/* ════════════════════════════════════════════════════════════════════
   STYLE-SHOP.CSS — MU RAVE 99z · OURO ANTIGO
   Sistema visual do conteúdo do painel (cards, menus, tags, welcome,
   restricted). 100% CSS · sem WebGL / blend-mode / 3d.
   Estiliza: shop-menu, menu_cash, shopgolds_*, shop, shop_cash,
   painel-restricted, shop-welcome.
   ──────────────────────────────────────────────────────────────────── */

:root{
  --sx-bg:#0a0805;
  --sx-panel-1:rgba(27,23,16,.96);
  --sx-panel-2:rgba(10,7,3,.97);
  --sx-gold:#e6b84f;   --sx-gold-b:#ffe6a8;   --sx-gold-d:#8a6420;
  --sx-ember:#ff7a33;  --sx-jade:#57b894;     --sx-blood:#d13b2f;
  --sx-border:rgba(230,184,79,.22);
  --sx-border-s:rgba(230,184,79,.12);
  --sx-text:#e8dcc4;
  --sx-muted:#9a8b6d;
  --sx-f-display:'Barlow Condensed',sans-serif;
  --sx-f-title:'Cinzel',serif;
  --sx-f-ui:'Barlow',sans-serif;
  --sx-f-mono:'IBM Plex Mono',monospace;

  /* moldura dupla gravada — mesma assinatura do resto do site */
  --sx-frame: inset 0 0 0 1px rgba(230,184,79,.42),
              inset 0 0 0 4px rgba(8,6,3,.92),
              inset 0 0 0 5px rgba(230,184,79,.16);
  --sx-frame-soft: inset 0 0 0 1px rgba(230,184,79,.20),
                   inset 0 0 0 4px rgba(8,6,3,.9),
                   inset 0 0 0 5px rgba(230,184,79,.10);
}

/* ═══════════════ ACESSO RESTRITO ═══════════════ */
.painel-restricted{
  max-width:520px; margin:50px auto; padding:40px 32px; text-align:center;
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(230,184,79,.14), transparent 60%),
    linear-gradient(165deg, var(--sx-panel-1), var(--sx-panel-2));
  box-shadow:var(--sx-frame);
}
.painel-restricted::before{
  content:""; position:absolute; inset:0 0 auto; height:2px;
  background:linear-gradient(90deg,transparent,var(--sx-ember),var(--sx-gold),var(--sx-ember),transparent);
  background-size:200% auto; animation:sxFlow 6s linear infinite;
}
.painel-restricted-icon{
  font-size:46px; line-height:1; margin-bottom:14px;
  filter:drop-shadow(0 0 18px rgba(255,150,50,.55));
}
.painel-restricted-title{
  font-family:var(--sx-f-title); font-size:26px; font-weight:700;
  letter-spacing:2.4px; text-transform:uppercase; color:var(--sx-gold-b); margin-bottom:8px;
  text-shadow:0 2px 0 #1a1206;
}
.painel-restricted-desc{
  font-family:var(--sx-f-ui); font-size:16px; line-height:1.6; color:var(--sx-muted);
}

/* ═══════════════ SHOP — TÍTULO DA SEÇÃO ═══════════════ */
.shop-page-title{
  font-family:var(--sx-f-title); font-size:21px; font-weight:700;
  letter-spacing:2.4px; text-transform:uppercase; color:var(--sx-gold-b);
  margin:2px 0 16px; padding-bottom:11px;
  position:relative; display:flex; align-items:center; gap:13px;
  text-shadow:0 2px 0 #1a1206;
}
.shop-page-title::before{
  content:"❖"; font-size:16px; color:var(--sx-gold);
  filter:drop-shadow(0 0 10px rgba(230,184,79,.6));
}
.shop-page-title::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:4px;
  border-top:1px solid rgba(230,184,79,.42); border-bottom:1px solid rgba(230,184,79,.14);
}

/* ═══════════════ SHOP — GRADE DE ITENS ═══════════════ */
.shop-items-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));   /* 2 colunas fixas */
  gap:12px; margin-bottom:8px;
}

.shop-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
  background:linear-gradient(170deg, var(--sx-panel-1), var(--sx-panel-2) 70%);
  box-shadow:var(--sx-frame-soft);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .26s;
}
.shop-card::before{           /* fio de luz no topo, acende no hover */
  content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:3;
  background:linear-gradient(90deg, var(--sx-ember), var(--sx-gold-b), var(--sx-gold), var(--sx-ember));
  background-size:240% auto; opacity:0; transition:opacity .25s; animation:sxFlow 6s linear infinite;
}
.shop-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--sx-frame), 0 30px 60px -34px rgba(255,150,50,.5);
}
.shop-card:hover::before{ opacity:1; }

.shop-card-thumb{
  position:relative; height:200px; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 50% 38%, rgba(230,184,79,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,214,140,.04), rgba(0,0,0,.22));
  border-bottom:1px solid var(--sx-border-s); overflow:hidden;
}
.shop-card-thumb::after{      /* brilho quente de canto */
  content:""; position:absolute; top:-30%; right:-30%; width:60%; height:60%;
  background:radial-gradient(circle, rgba(255,194,74,.2), transparent 60%);
  pointer-events:none;
}
.shop-card-thumb img{
  max-width:88%; max-height:none; width:auto; height:auto; object-fit:none;   /* tamanho original */
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.7)); transition:transform .3s;
}
.shop-card:hover .shop-card-thumb img{ transform:scale(1.06); }

.shop-card-body{ display:flex; flex-direction:column; gap:8px; padding:15px 15px 13px; flex:1; }

.shop-card-name{
  font-family:var(--sx-f-display); font-size:20px; font-weight:700; letter-spacing:.9px;
  text-transform:uppercase; color:var(--sx-text); line-height:1.12;
}
.shop-card-parts{
  font-family:var(--sx-f-mono); font-size:10.5px; letter-spacing:.2px; color:var(--sx-muted);
  margin-top:-2px;
}

.shop-card-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.shop-tag{
  font-family:var(--sx-f-mono); font-size:9px; font-weight:600; letter-spacing:.8px;
  text-transform:uppercase; padding:3px 7px;
  background:rgba(230,184,79,.05); box-shadow:inset 0 0 0 1px var(--sx-border); color:var(--sx-muted);
}
.shop-tag.gold{ background:rgba(230,184,79,.1); box-shadow:inset 0 0 0 1px rgba(230,184,79,.4); color:var(--sx-gold); }
.shop-tag.neon{ background:rgba(87,184,148,.1); box-shadow:inset 0 0 0 1px rgba(87,184,148,.4); color:var(--sx-jade); }
.shop-tag.red{  background:rgba(255,122,51,.1); box-shadow:inset 0 0 0 1px rgba(255,122,51,.4); color:var(--sx-ember); }

.shop-full-banner{
  display:flex; align-items:center; gap:8px; margin-top:1px; padding:6px 10px;
  background:linear-gradient(90deg, rgba(255,122,51,.14), rgba(230,184,79,.05));
  box-shadow:inset 0 0 0 1px rgba(255,122,51,.3);
  position:relative; overflow:hidden;
}
.shop-full-banner::after{     /* varredura de brilho */
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,240,200,.2), transparent);
  animation:sxSweep 4.5s ease-in-out infinite;
}
.shop-full-icon{ font-size:15px; filter:drop-shadow(0 0 8px rgba(230,184,79,.7)); flex-shrink:0; }
.shop-full-text{
  font-family:var(--sx-f-display); font-size:13px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--sx-gold-b); line-height:1.1;
}
.shop-full-sub{ font-family:var(--sx-f-mono); font-size:9px; letter-spacing:.6px; color:var(--sx-ember); }

.shop-card-footer{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:auto; padding-top:10px; border-top:1px solid var(--sx-border-s);
}
.shop-card-footer .shop-card-price{ flex:0 1 auto; min-width:0; }
.shop-card-footer .shop-btn{ flex:0 0 auto; }
.shop-card-price{
  font-family:var(--sx-f-title); font-size:19px; font-weight:700; letter-spacing:.4px;
  color:var(--sx-gold-b); text-shadow:0 2px 0 #1a1206, 0 0 16px rgba(230,184,79,.4); white-space:nowrap;
}
.shop-btn{
  position:relative; overflow:hidden;
  font-family:var(--sx-f-display); font-size:14px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:#241906; cursor:pointer; white-space:nowrap;
  padding:9px 17px; border:0;
  background:linear-gradient(180deg,#ffe6a8,#e6b84f 48%,#a87b32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.32),
             0 0 0 1px var(--sx-gold-d), 0 10px 22px -12px rgba(255,150,50,.9);
  transition:transform .18s, filter .2s;
}
.shop-btn::after{
  content:""; position:absolute; top:0; left:-130%; width:52%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent); transition:left .6s;
}
.shop-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.shop-btn:hover::after{ left:150%; }
.shop-btn:active{ transform:translateY(0); }

/* ═══════════════ MENU DE CATEGORIAS — trilhos horizontais ═══════════════ */
.shopm-wrapper{ display:flex; flex-direction:column; gap:2px; margin-bottom:20px; }

.shopm-section{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:124px minmax(0,1fr); align-items:stretch;
  background:linear-gradient(100deg, rgba(27,23,16,.96), rgba(10,7,3,.97) 62%);
  box-shadow:var(--sx-frame-soft);
}
.shopm-section + .shopm-section{ margin-top:8px; }

/* faixa da esquerda: nome do grupo em pé */
.shopm-header{
  position:relative; display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(230,184,79,.13), rgba(230,184,79,.03));
  border-right:1px solid var(--sx-border);
}
.shopm-header::after{
  content:''; position:absolute; right:-1px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(180deg,var(--sx-gold-b),var(--sx-gold),transparent);
}
.shopm-header-icon{
  font-size:20px; line-height:1; filter:drop-shadow(0 0 10px rgba(255,150,50,.6));
}
.shopm-header-title{
  font-family:var(--sx-f-display); font-size:20px; font-weight:700; letter-spacing:2.4px;
  text-transform:uppercase; color:var(--sx-gold-b); line-height:1;
  text-shadow:0 2px 0 #1a1206;
}
.shopm-header-sub{
  font-family:var(--sx-f-mono); font-size:9px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--sx-muted);
}

/* trilho de abas */
.shopm-grid{
  display:flex; flex-wrap:wrap; align-content:center; gap:6px; padding:11px 13px;
}
.shopm-item{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px; padding:9px 13px;
  text-decoration:none; white-space:nowrap;
  font-family:var(--sx-f-display); font-size:15.5px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; color:#bfae8e;
  background:rgba(230,184,79,.05);
  box-shadow:inset 0 0 0 1px rgba(230,184,79,.16);
  transition:transform .18s, background .2s, color .2s, box-shadow .22s;
}
/* varredura de luz que atravessa a aba no hover */
.shopm-item::after{
  content:''; position:absolute; top:0; left:-130%; width:48%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,240,200,.22),transparent);
  transition:left .55s;
}
.shopm-item:hover{
  transform:translateY(-2px); color:#ffe6a8;
  background:rgba(230,184,79,.13);
  box-shadow:inset 0 0 0 1px rgba(230,184,79,.5), 0 10px 22px -14px rgba(255,150,50,.9);
}
.shopm-item:hover::after{ left:150%; }
.shopm-item-icon{
  width:24px; height:24px; flex-shrink:0; display:grid; place-items:center; font-size:13px;
  background:rgba(230,184,79,.1); box-shadow:inset 0 0 0 1px rgba(230,184,79,.28);
  transition:background .2s, box-shadow .2s;
}
.shopm-item:hover .shopm-item-icon{
  background:linear-gradient(180deg,#ffe6a8,#e6b84f 48%,#a87b32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px var(--sx-gold-d);
}
.shopm-item-name{ line-height:1; }

/* ═══════════════ BOAS-VINDAS DO SHOP ═══════════════ */
.shop-welcome{
  position:relative; overflow:hidden; padding:24px 26px; margin-bottom:18px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(230,184,79,.11), transparent 55%),
    linear-gradient(165deg, var(--sx-panel-1), var(--sx-panel-2));
  box-shadow:var(--sx-frame);
}
.shop-welcome::before{
  content:""; position:absolute; inset:0 0 auto; height:2px;
  background:linear-gradient(90deg,transparent,var(--sx-ember),var(--sx-gold),transparent);
  background-size:200% auto; animation:sxFlow 6s linear infinite;
}
.shop-welcome-header{ display:flex; align-items:center; gap:15px; margin-bottom:15px; }
.shop-welcome-icon{
  width:48px; height:48px; flex-shrink:0; display:grid; place-items:center;
  font-size:24px; color:#241906;
  background:linear-gradient(180deg,#ffe6a8,#e6b84f 48%,#a87b32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 26px -10px rgba(255,150,50,.9);
}
.shop-welcome-title{
  font-family:var(--sx-f-title); font-size:21px; font-weight:700; letter-spacing:2.2px;
  text-transform:uppercase; color:var(--sx-gold-b); text-shadow:0 2px 0 #1a1206;
}
.shop-welcome-sub{
  font-family:var(--sx-f-mono); font-size:11px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--sx-ember); margin-top:3px;
}
.shop-welcome-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.shop-welcome-list li{
  position:relative; padding:12px 15px 12px 40px;
  background:rgba(230,184,79,.04); box-shadow:inset 0 0 0 1px var(--sx-border-s);
  font-family:var(--sx-f-ui); font-size:14.5px; line-height:1.6; color:var(--sx-muted);
}
.shop-welcome-list li::before{
  content:"❖"; position:absolute; left:15px; top:12px; color:var(--sx-gold); font-size:11px;
}
.shop-welcome-list b{ color:var(--sx-text); font-weight:600; }
.shop-welcome-list a{ color:var(--sx-gold); text-decoration:none; font-weight:600; }
.shop-welcome-list a:hover{ color:var(--sx-gold-b); }

/* ═══════════════ ANIMAÇÕES ═══════════════ */
@keyframes sxFlow{ to{ background-position:240% center; } }
@keyframes sxSweep{ 0%{ left:-60%; } 55%,100%{ left:130%; } }

@media (prefers-reduced-motion:reduce){
  .shop-card::before, .painel-restricted::before, .shop-welcome::before, .shop-full-banner::after{ animation-duration:30s; }
  .shop-card, .shopm-item, .shop-btn{ transition:none !important; }
  .shop-card:hover, .shopm-item:hover, .shop-btn:hover{ transform:none !important; }
}

@media (max-width:680px){
  .shop-items-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px; }
  .shopm-section{ grid-template-columns:1fr; }
  .shopm-header{ flex-direction:row; align-items:center; gap:9px; border-right:0;
    border-bottom:1px solid var(--sx-border); padding:10px 13px; }
  .shopm-header::after{ display:none; }
  .shopm-header-sub{ margin-left:auto; }
  .shopm-item{ font-size:14px; padding:8px 12px; }
  .shop-card-thumb{ height:170px; }
  .shop-page-title{ font-size:22px; }
}