/* ===========================================================
   NotAReal.shop — linguagem visual de marketplace real
   (Shopee/ML/AliExpress): fundo cinza claro, cards brancos,
   laranja de conversão, verde de frete/parcelas, Roboto.
   =========================================================== */

:root{
  --bg:        #F5F5F5;
  --card:      #FFFFFF;
  --ink:       #333333;
  --ink-soft:  #757575;
  --ink-faint: #9e9e9e;
  --brand:     #F1471D;   /* laranja de conversão */
  --brand-dark:#D63A12;
  --brand-soft:#FFF1EC;
  --accent:    #FFB300;   /* amarelo de destaque/estrelas */
  --good:      #00A650;   /* verde de frete grátis / parcelas */
  --good-soft: #EAF7EF;
  --coin:      #F5A623;
  --line:      #E0E0E0;
  --dark:      #212121;

  --r: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.10);
  --shadow-hover: 0 4px 12px rgba(0,0,0,.14);

  --rar-common:   #8D8A82;
  --rar-rare:     #2D7DD2;
  --rar-epic:     #E86A10;
  --rar-legendary:#D4A017;

  --font:'Roboto','Segoe UI',Arial,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:14px;
  line-height:1.45;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
a{ color:inherit; }
.ic{ width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:1.8; vertical-align:-.22em; }

/* ---------- faixa de honestidade (fina, estilo faixa promo) ---------- */
.honesty-bar{
  background:var(--dark); color:#e8e8e8;
  text-align:center; font-size:.76rem;
  padding:.35rem .75rem;
}
.honesty-link{ color:var(--accent); margin-left:.45rem; font-weight:500; }

/* ---------- header ---------- */
.topbar{
  background:linear-gradient(180deg,var(--brand) 0%,var(--brand-dark) 100%);
  color:#fff;
  position:sticky; top:0; z-index:50;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.topbar-inner{
  max-width:1220px; margin:0 auto; padding:.6rem .85rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.logo{ display:flex; align-items:center; gap:.45rem; text-decoration:none; }
.logo-cart{ width:2rem; height:2rem; }
.logo-text{ font-size:1.35rem; font-weight:900; letter-spacing:-.02em; }
.logo-tld{ font-weight:400; opacity:.85; font-size:.95rem; }
.deliver-to{
  display:flex; align-items:center; gap:.35rem;
  font-size:.78rem; line-height:1.15; opacity:.95;
  padding:.25rem .4rem; border-radius:var(--r);
}
.deliver-to:hover{ outline:1px solid rgba(255,255,255,.5); }
.deliver-txt{ display:flex; flex-direction:column; }
.deliver-txt small{ opacity:.8; font-size:.68rem; }
.search-wrap{ flex:1; min-width:220px; display:flex; background:#fff; border-radius:4px; overflow:hidden; }
.search{
  flex:1; border:none; outline:none;
  padding:.6rem .8rem; font-family:inherit; font-size:.9rem; color:var(--ink);
}
.search::placeholder{ color:var(--ink-faint); }
.search-btn{
  background:var(--dark); color:#fff; padding:0 1.1rem;
  display:flex; align-items:center;
}
.search-btn:hover{ background:#000; }
.topbar-stats{ display:flex; gap:.35rem; align-items:center; }
.hd-btn{
  position:relative; color:#fff;
  padding:.45rem .55rem; border-radius:var(--r);
  display:flex; align-items:center;
}
.hd-btn:hover{ background:rgba(255,255,255,.14); }
.hd-ic{ width:1.5rem; height:1.5rem; }
.hd-badge{
  position:absolute; top:.05rem; right:-.15rem;
  background:#fff; color:var(--brand);
  border-radius:999px; font-size:.66rem; font-weight:700;
  min-width:1.25rem; padding:.05rem .3rem; text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.hd-badge-coin{ color:#8a6100; background:#FFE082; }
.lang-toggle{ font-weight:700; font-size:.8rem; border:1px solid rgba(255,255,255,.55); border-radius:4px; padding:.3rem .55rem; }

/* ---------- layout ---------- */
.container{ max-width:1220px; margin:0 auto; padding:.9rem .85rem 4.5rem; }

/* ---------- hero / banners ---------- */
.hero-row{ display:grid; grid-template-columns:1fr 300px; gap:.75rem; }
.hero-banner{
  background:linear-gradient(100deg,var(--brand) 30%,#FF7A45 100%);
  color:#fff; border-radius:var(--r);
  padding:1.4rem 1.6rem; min-height:170px;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  box-shadow:var(--shadow);
  overflow:hidden; position:relative;
}
.hero-kicker{
  background:#fff; color:var(--brand);
  font-weight:900; font-size:.72rem; letter-spacing:.06em;
  padding:.18rem .55rem; border-radius:3px;
}
.hero-title{ font-size:1.7rem; font-weight:900; margin:.5rem 0 .15rem; }
.hero-note{ font-size:.78rem; opacity:.92; margin-bottom:.7rem; }
.hero-timer{ display:flex; align-items:center; gap:.25rem; }
.ht-cell{
  background:var(--dark); color:#fff;
  font-weight:700; font-size:1.05rem; font-variant-numeric:tabular-nums;
  border-radius:4px; padding:.25rem .5rem; min-width:2.4rem; text-align:center;
}
.ht-sep{ font-weight:900; }
.hero-art{ position:relative; width:150px; height:130px; flex:none; }
.ha-box{
  position:absolute; width:64px; height:64px; border-radius:8px;
  background:rgba(255,255,255,.22); border:2px solid rgba(255,255,255,.55);
}
.ha-box{ right:8px; bottom:6px; }
.ha-box.hb2{ right:62px; bottom:36px; width:48px; height:48px; transform:rotate(-8deg); }
.ha-box.hb3{ right:16px; bottom:78px; width:38px; height:38px; transform:rotate(10deg); }
.ha-tag{
  position:absolute; top:0; left:0; z-index:2;
  background:var(--accent); color:var(--dark);
  font-weight:900; font-size:1rem;
  border-radius:999px; padding:.45rem .55rem;
  transform:rotate(-10deg);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.side-banner{
  background:var(--card); border-radius:var(--r); box-shadow:var(--shadow);
  padding:1.1rem 1rem; display:flex; flex-direction:column; gap:.3rem; justify-content:center;
}
.side-banner b{ font-size:1rem; }
.side-banner > span{ font-size:.78rem; color:var(--ink-soft); }
.side-cta{
  margin-top:.6rem;
  background:var(--brand); color:#fff; font-weight:700; font-size:.88rem;
  border-radius:4px; padding:.55rem;
}
.side-cta:hover{ background:var(--brand-dark); }

/* ---------- fileira de gamificação (estilo Shopee) ---------- */
.quick-row{
  background:var(--card); border-radius:var(--r); box-shadow:var(--shadow);
  margin-top:.75rem;
  display:grid; grid-template-columns:repeat(5,1fr);
  padding:.9rem .5rem .75rem;
}
.quick-item{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:.25rem; border-radius:var(--r);
}
.quick-item:hover{ background:var(--bg); }
.qi-circle{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.qi-circle .ic{ width:1.6rem; height:1.6rem; }
.qi-box{ background:linear-gradient(135deg,#FF7A45,var(--brand)); }
.qi-wheel{ background:linear-gradient(135deg,#FFC53D,#F5A623); }
.qi-goal{ background:linear-gradient(135deg,#37C871,var(--good)); }
.qi-col{ background:linear-gradient(135deg,#5CA9F0,#2D7DD2); }
.qi-label{ font-size:.78rem; font-weight:500; color:var(--ink); }
.qi-tag{
  font-size:.68rem; color:var(--brand); font-weight:700;
  background:var(--brand-soft); border-radius:999px; padding:.05rem .5rem;
}
.qi-tag-hot{ background:var(--brand); color:#fff; }
.qi-goalbar{
  width:70%; height:5px; border-radius:999px; background:var(--line); overflow:hidden;
}
.goal-fill{ display:block; height:100%; width:0%; background:var(--good); transition:width .5s; }

/* ---------- categorias ---------- */
.cat-row{
  display:flex; gap:.45rem; overflow-x:auto;
  padding:.75rem 0 .15rem; scrollbar-width:none;
}
.cat-row::-webkit-scrollbar{ display:none; }
.cat-chip{
  white-space:nowrap;
  background:var(--card); color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px;
  padding:.4rem .95rem; font-size:.82rem; font-weight:500;
}
.cat-chip:hover{ border-color:var(--brand); color:var(--brand); }
.cat-chip.is-active{ background:var(--brand-soft); color:var(--brand); border-color:var(--brand); font-weight:700; }

/* ---------- título de seção ---------- */
.section-head{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  padding:.9rem .1rem .6rem;
}
.section-head h2{
  font-size:1.05rem; font-weight:700; color:var(--brand);
  text-transform:uppercase; letter-spacing:.03em;
}
.section-note{ font-size:.75rem; color:var(--ink-faint); font-style:italic; }

/* ---------- grid de produtos ---------- */
.grid{
  display:grid; gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
}
.card{
  background:var(--card); border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden; position:relative;
  display:flex; flex-direction:column;
  transition:box-shadow .15s, transform .15s;
}
.card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.card-img{ position:relative; aspect-ratio:1; background:#fff; border-bottom:1px solid #f0f0f0; }
.card-img svg{ width:100%; height:100%; display:block; }
.card-discount{
  position:absolute; top:0; right:0;
  background:var(--accent); color:var(--dark);
  font-weight:900; font-size:.72rem;
  padding:.2rem .4rem; border-radius:0 0 0 var(--r);
}
.card-best{
  position:absolute; top:.5rem; left:0;
  background:var(--brand); color:#fff;
  font-size:.62rem; font-weight:700; letter-spacing:.04em;
  padding:.15rem .45rem; border-radius:0 3px 3px 0;
}
.card-body{ padding:.55rem .6rem .65rem; display:flex; flex-direction:column; gap:.18rem; flex:1; }
.card-name{
  font-size:.8rem; color:var(--ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.1rem;
}
.card-price-row{ display:flex; align-items:baseline; gap:.35rem; flex-wrap:wrap; margin-top:.1rem; }
.card-price{ font-size:1.15rem; font-weight:700; color:var(--ink); }
.card-price .cents{ font-size:.72rem; font-weight:700; }
.card-oldprice{ font-size:.72rem; color:var(--ink-faint); text-decoration:line-through; }
.card-installment{ font-size:.74rem; color:var(--good); font-weight:500; }
.card-freight{ font-size:.72rem; color:var(--good); font-weight:700; }
.card-freight .fnote{ color:var(--ink-faint); font-weight:400; }
.card-meta{ font-size:.7rem; color:var(--ink-soft); display:flex; align-items:center; gap:.25rem; }
.card-meta .stars{ color:var(--accent); font-weight:700; }
.card-buy{
  margin-top:.45rem;
  background:#fff; color:var(--brand);
  border:1px solid var(--brand); border-radius:4px;
  font-weight:700; font-size:.78rem; padding:.42rem .3rem;
  transition:background .12s;
}
.card-buy:hover{ background:var(--brand); color:#fff; }
.card-buy .cashback{ font-weight:400; opacity:.85; font-size:.68rem; }

/* skeleton */
.skel{ border-radius:var(--r); overflow:hidden; background:var(--card); box-shadow:var(--shadow); }
.skel .sk-img{ aspect-ratio:1; }
.skel .sk-line{ height:.7rem; margin:.5rem .55rem; border-radius:3px; }
.sk-anim{
  background:linear-gradient(100deg,#ececec 40%,#f7f7f7 50%,#ececec 60%);
  background-size:200% 100%;
  animation:skshine 1.1s linear infinite;
}
@keyframes skshine{ to{ background-position:-200% 0; } }
.grid-sentinel{ height:2px; }

/* espaço de anúncio (rótulo compliant) */
.ad-slot{
  grid-column:1 / -1;
  background:var(--card); border:1px dashed var(--line); border-radius:var(--r);
  min-height:90px;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.15rem;
  color:var(--ink-faint);
}
.ad-slot .ad-label{ font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.ad-slot .ad-ph{ font-size:.75rem; font-style:italic; }

/* ---------- barra mobile ---------- */
.mobile-bar{
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:var(--card); border-top:1px solid var(--line);
  box-shadow:0 -2px 8px rgba(0,0,0,.06);
}
.mb-btn{
  flex:1; padding:.4rem 0 .5rem;
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  font-size:.64rem; color:var(--ink-soft);
}
.mb-btn .ic{ width:1.4em; height:1.4em; }
.mb-btn.is-active{ color:var(--brand); }

/* ---------- modais / drawer ---------- */
.modal, .drawer{
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
.modal[hidden], .drawer[hidden]{ display:none; }
.modal-card{
  background:var(--card); border-radius:12px;
  box-shadow:0 8px 40px rgba(0,0,0,.22);
  width:min(430px,100%); max-height:92vh; overflow:auto;
  padding:1.4rem 1.3rem 1.2rem; position:relative;
}
.modal-wide{ width:min(680px,100%); }
.modal-card h2{ font-size:1.15rem; font-weight:700; }
.modal-sub{ font-size:.84rem; color:var(--ink-soft); margin:.3rem 0 .9rem; }
.modal-close{
  position:absolute; top:.6rem; right:.6rem;
  width:2rem; height:2rem; line-height:1;
  background:var(--bg); color:var(--ink-soft);
  border-radius:50%; font-size:1.15rem;
}
.modal-close:hover{ background:var(--line); }
.drawer{ justify-content:flex-end; padding:0; }
.drawer-card{
  background:var(--card);
  width:min(400px,92vw); height:100%; overflow:auto;
  padding:1.4rem 1.3rem 1.2rem; position:relative;
  display:flex; flex-direction:column;
  box-shadow:-4px 0 24px rgba(0,0,0,.18);
}
.drawer-card h2{ font-size:1.1rem; font-weight:700; }

.btn{ border-radius:6px; font-weight:700; transition:filter .12s; }
.btn:hover{ filter:brightness(.94); }
.btn-big{ display:block; width:100%; padding:.75rem; font-size:.95rem; margin-top:.9rem; }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-buy{ background:var(--good); color:#fff; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.coin-inline{
  background:#FFE082; color:#8a6100;
  border-radius:999px; font-size:.8em; font-weight:700; padding:.05em .5em;
}

/* ---------- caixa misteriosa ---------- */
.box-stage{ display:flex; justify-content:center; padding:1rem 0 .6rem; min-height:150px; position:relative; }
.gift-light{
  position:absolute; top:30%; left:50%; width:160px; height:160px;
  margin-top:-80px; margin-left:-80px;
  background:radial-gradient(circle, rgba(255,230,100,0.8) 0%, rgba(255,180,0,0) 70%);
  opacity:0; pointer-events:none; z-index:1; mix-blend-mode:screen;
}
.gift-box{ position:relative; width:120px; height:110px; z-index:2; transform-origin:bottom; }
.gift-body{
  position:absolute; bottom:0; width:120px; height:80px;
  background:var(--brand); border-radius:6px;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.12);
}
.gift-body::after{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:16px;
  transform:translateX(-50%); background:var(--accent);
}
.gift-lid{
  position:absolute; top:12px; left:-6px; width:132px; height:26px;
  background:var(--brand-dark); border-radius:4px;
  z-index:2; transform-origin:left bottom;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.gift-box.shaking{ animation:shake .45s ease-in-out infinite; }
@keyframes shake{
  0%,100%{ transform:rotate(0) scale(1,1); }
  25%{ transform:rotate(-8deg) scale(0.95, 1.05); }
  50%{ transform:rotate(0) scale(1.05, 0.95); }
  75%{ transform:rotate(8deg) scale(0.95, 1.05); }
}
.gift-box.opening .gift-lid{ animation:lidfly .65s cubic-bezier(.15,1.15,.6,1) forwards; }
.gift-box.opening ~ .gift-light, .box-stage:has(.gift-box.opening) .gift-light{ animation:ray-spin .8s ease-out forwards; }
@keyframes lidfly{ 
  40%{ transform:translateY(-80px) rotate(-15deg); }
  100%{ transform:translateY(-140px) rotate(-45deg); opacity:0; } 
}
@keyframes ray-spin{
  0%{ opacity:0; transform:scale(0.5) rotate(0deg); }
  50%{ opacity:1; transform:scale(1.5) rotate(90deg); }
  100%{ opacity:0; transform:scale(2) rotate(180deg); }
}
.box-result{ text-align:center; padding:.4rem 0 .2rem; }
.box-result .res-card{
  display:inline-block; border-radius:var(--r);
  padding:.9rem 1.1rem; box-shadow:var(--shadow-hover);
  animation:pop .6s cubic-bezier(.34,1.56,.64,1);
  max-width:100%;
}
@keyframes pop{ 
  0%{ transform:scale(.4); opacity:0 } 
  50%{ transform:scale(1.08); opacity:1 }
  100%{ transform:scale(1); opacity:1 } 
}
.res-card .res-img{ width:110px; height:110px; margin:0 auto .45rem; }
.res-card .res-img > svg, .res-card .res-img > img{ width:100%; height:100%; border-radius:var(--r); }
.res-card .res-img > img{ object-fit:cover; display:block; }
.res-card .res-name{ font-weight:500; font-size:.88rem; max-width:230px; margin-bottom:.3rem; }
.rar{
  display:inline-block; border-radius:3px;
  color:#fff; font-size:.7rem; font-weight:700; padding:.12rem .55rem;
  text-transform:uppercase; letter-spacing:.04em;
}
.rar-common{ background:var(--rar-common); }
.rar-rare{ background:var(--rar-rare); }
.rar-epic{ background:var(--rar-epic); }
.rar-legendary{ background:var(--rar-legendary); }
.res-common{ background:#fafafa; }
.res-rare{ background:#EDF4FC; }
.res-epic{ background:#FDF1E6; }
.res-legendary{ background:#FCF6E3; }

.drop-rates{ margin-top:1rem; font-size:.8rem; }
.drop-rates summary{ cursor:pointer; font-weight:500; color:var(--ink-soft); }
.drop-rates table{ width:100%; margin-top:.5rem; border-collapse:collapse; }
.drop-rates td{ padding:.3rem .2rem; border-bottom:1px solid #f0f0f0; }
.drop-rates td:last-child{ text-align:right; font-variant-numeric:tabular-nums; font-weight:700; }

/* ---------- roleta ---------- */
.wheel-stage{ position:relative; width:260px; margin:0 auto; padding-top:14px; }
.wheel-pointer{
  position:absolute; top:4px; left:50%;
  width:0; height:0; z-index:3;
  border-left:13px solid transparent; border-right:13px solid transparent;
  border-top:20px solid var(--brand);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));
  transform-origin:top center;
  transform:translateX(-50%) rotate(0deg);
}
.wheel-pointer.tick{ animation:pointerTick .1s ease-out; }
@keyframes pointerTick{
  0%{ transform:translateX(-50%) rotate(0deg); }
  50%{ transform:translateX(-50%) rotate(-18deg); }
  100%{ transform:translateX(-50%) rotate(0deg); }
}
.wheel{
  width:260px; height:260px; border-radius:50%;
  border:8px solid var(--brand);
  box-shadow:0 3px 12px rgba(0,0,0,.18), inset 0 0 0 3px #fff;
  position:relative;
  transition:transform 4.2s cubic-bezier(.12,.8,.1,1);
}
.wheel.winner-pulse{ animation:winnerPulse .5s cubic-bezier(.2,.9,.3,1.3); }
@keyframes winnerPulse{
  0%,100%{ transform:scale(1) rotate(var(--rot,0)); }
  50%{ transform:scale(1.05) rotate(var(--rot,0)); box-shadow:0 0 25px rgba(245, 166, 35, 0.6), inset 0 0 0 3px #fff; }
}
.wheel-hub{
  position:absolute; left:50%; top:calc(50% + 7px); transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%;
  background:#fff; border:3px solid var(--brand); z-index:2;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.wheel-label{
  position:absolute; left:50%; top:50%;
  transform-origin:0 0;
  font-size:.68rem; font-weight:700; color:var(--ink);
  width:105px; text-align:right; padding-right:16px;
}

/* ---------- carrinho ---------- */
.cart-items{ flex:1; display:flex; flex-direction:column; gap:.5rem; }
.cart-empty{ font-size:.85rem; color:var(--ink-soft); font-style:italic; padding:1.5rem 0; text-align:center; }
.cart-item{
  display:flex; gap:.6rem; align-items:center;
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
  padding:.45rem;
}
.cart-item .ci-img{ width:52px; height:52px; flex:none; }
.cart-item .ci-img svg{ width:100%; height:100%; border-radius:6px; border:1px solid #f0f0f0; }
.ci-name{ font-size:.78rem; flex:1; line-height:1.25; color:var(--ink); }
.ci-price{ font-size:.85rem; font-weight:700; white-space:nowrap; }
.ci-del{
  color:var(--ink-faint); border-radius:50%; background:var(--bg);
  width:1.7rem; height:1.7rem; font-weight:700; flex:none;
}
.ci-del:hover{ background:var(--line); color:var(--brand); }
.cart-footer{ border-top:1px solid var(--line); margin-top:.8rem; padding-top:.7rem; }
.cart-line{ display:flex; justify-content:space-between; font-size:.85rem; padding:.14rem 0; color:var(--ink-soft); }
.cart-line-freight .freight-free{ color:var(--good); font-weight:700; }
.cart-line-total{ font-size:1rem; color:var(--ink); font-weight:700; padding-top:.35rem; }
.cart-line-total .charged{ color:var(--good); font-size:1.15rem; }
.cart-asalways{ font-size:.72rem; color:var(--ink-faint); font-style:italic; text-align:right; }

/* ---------- coleção ---------- */
.collection-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem;
}
.col-item{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  text-align:center; padding-bottom:.5rem; background:#fff; cursor:pointer;
  transition:transform .18s var(--sp,ease), box-shadow .18s;
}
.col-item:hover{ transform:translateY(-3px); }
.col-thumb{ position:relative; }
.col-thumb > svg, .col-thumb > img{ width:100%; aspect-ratio:1; display:block; border-bottom:1px solid #f0f0f0; }
.col-thumb > img{ object-fit:cover; }
.col-item .cn{ font-size:.7rem; padding:.35rem .3rem .25rem; line-height:1.25; color:var(--ink); }

/* ---- selo de raridade (canto da miniatura) ---- */
.rar-seal{
  position:absolute; top:6px; right:6px; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:#fff; border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.28); z-index:2;
}
.rar-seal svg{ width:15px; height:15px; }
.rar-seal-common{ background:var(--rar-common); }
.rar-seal-rare{ background:var(--rar-rare); }
.rar-seal-epic{ background:var(--rar-epic); }
.rar-seal-legendary{ background:linear-gradient(135deg,#F6C94A,var(--rar-legendary)); }

/* ---- moldura por raridade: só de olhar já sabe ---- */
.col-rar-rare{ border-color:var(--rar-rare); box-shadow:0 0 0 1px var(--rar-rare) inset; }
.col-rar-epic{ border-color:var(--rar-epic); box-shadow:0 0 0 1px var(--rar-epic) inset, 0 4px 14px rgba(232,106,16,.18); }
.col-rar-legendary{
  border-color:var(--rar-legendary);
  box-shadow:0 0 0 1px var(--rar-legendary) inset, 0 5px 18px rgba(212,160,23,.32);
}
/* lendário ganha um brilho que passa por cima da foto */
.col-rar-legendary .col-thumb::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,240,190,.55) 50%, transparent 65%);
  background-size:250% 100%; animation:rar-shine 3.2s ease-in-out infinite;
}
@keyframes rar-shine{ 0%{ background-position:150% 0; } 60%,100%{ background-position:-90% 0; } }
.col-rar-epic .col-thumb::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 70% 20%, rgba(232,106,16,.18), transparent 55%);
}
.col-empty{ grid-column:1/-1; text-align:center; color:var(--ink-soft); font-style:italic; padding:1.5rem 0; }

/* ---------- recibo ---------- */
.receipt{
  background:var(--bg); border:1px dashed var(--ink-faint); border-radius:var(--r);
  padding:.9rem; font-size:.8rem; white-space:pre-wrap; word-break:break-word;
  font-family:'Consolas','Courier New',monospace; color:var(--ink);
}
.share-hint{ font-size:.74rem; color:var(--ink-faint); text-align:center; margin-top:.5rem; font-style:italic; }

/* ---------- check-in ---------- */
.checkin-card{ text-align:center; }
.checkin-coins{
  font-size:2.2rem; font-weight:900; color:var(--coin);
  padding:.6rem 0;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.checkin-coins .coin-svg{ width:2.2rem; height:2.2rem; }

/* ---------- toasts ---------- */
.toast-zone{
  position:fixed; bottom:4.4rem; left:.75rem; z-index:90;
  display:flex; flex-direction:column; gap:.4rem; max-width:min(330px,88vw);
}
.toast{
  background:rgba(33,33,33,.94); color:#fff;
  border-radius:6px; box-shadow:0 3px 12px rgba(0,0,0,.25);
  font-size:.76rem; padding:.55rem .7rem;
  animation:toastin .3s cubic-bezier(.2,1.4,.4,1);
}
.toast.out{ animation:toastout .3s forwards; }
@keyframes toastin{ from{ transform:translateX(-120%);} }
@keyframes toastout{ to{ transform:translateX(-120%); opacity:0;} }

/* ---------- confete / moeda voadora ---------- */
.confetti-zone,.fly-zone{ position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden; }
.confetti{ position:absolute; width:9px; height:13px; top:-20px; animation:cfall linear forwards; }
@keyframes cfall{ to{ transform:translateY(105vh) rotate(720deg); } }
.fly-coin{
  position:absolute; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE082,var(--coin));
  border:1.5px solid #c98a10;
  z-index:210;
  transition:transform .7s cubic-bezier(.3,-.2,.6,1), opacity .7s;
}

/* ---------- rodapé ---------- */
.footer{ background:var(--card); border-top:1px solid var(--line); margin-top:2.5rem; color:var(--ink-soft); }
.footer-inner{
  max-width:1220px; margin:0 auto; padding:1.8rem .85rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.6rem;
}
.footer-block h3{
  font-size:.8rem; font-weight:700; color:var(--ink);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5rem;
}
.footer-block h3.mt{ margin-top:1rem; }
.footer-block p, .footer-block li{ font-size:.8rem; }
.footer-block ul{ list-style:none; display:flex; flex-direction:column; gap:.3rem; }
.footer-block li::before{ content:"• "; color:var(--brand); }
.footer-why{
  background:var(--brand-soft); border:1px solid #ffd9cc;
  border-radius:var(--r); padding:.9rem;
}
.footer-why h3{ color:var(--brand); }
.log-entry{ margin-bottom:.4rem; font-style:italic; }
.footer-legal{
  border-top:1px solid var(--line); text-align:center;
  font-size:.72rem; color:var(--ink-faint); padding:.9rem;
}

/* ===========================================================
   PÁGINA DO PRODUTO (PDP)
   =========================================================== */
/* #pdpBody é apenas o container da página; o grid de 2 colunas é o .pdp-layout.
   (As regras antigas de modal foram removidas — a PDP virou página inteira.) */
.pdp-body{ display:block; }

.pdp-gallery{ position:sticky; top:70px; align-self:start; }
.pdp-main-img{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:10px;
  aspect-ratio:1; overflow:hidden;
}
.pdp-main-img svg{ width:100%; height:100%; display:block; }
.pdp-fake-badge{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  background:rgba(33,33,33,.82); color:#fff;
  font-size:.62rem; font-weight:700; letter-spacing:.08em;
  padding:.2rem .5rem; border-radius:4px;
}
.pdp-disc{
  position:absolute; top:0; right:0;
  background:var(--accent); color:var(--dark);
  font-weight:900; font-size:.9rem; padding:.3rem .5rem; border-radius:0 0 0 10px;
}
.pdp-thumbs{ display:flex; gap:.5rem; margin-top:.6rem; }
.pdp-thumb{
  width:60px; height:60px; border:1px solid var(--line); border-radius:8px;
  overflow:hidden; background:#fff; transition:border-color .15s, transform .15s;
}
.pdp-thumb svg{ width:100%; height:100%; }
.pdp-thumb:hover{ transform:translateY(-2px); }
.pdp-thumb.is-active{ border-color:var(--brand); border-width:2px; }

.pdp-name{ font-size:1.25rem; font-weight:500; line-height:1.3; }
.pdp-rateline{ display:flex; align-items:center; gap:.35rem; margin:.5rem 0; font-size:.82rem; color:var(--ink-soft); }
.pdp-stars{ color:var(--accent); letter-spacing:1px; }
.pdp-rateline b{ color:var(--ink); }
.pdp-pricebox{ border-bottom:1px solid var(--line); padding-bottom:.9rem; margin-bottom:.9rem; }
.pdp-oldprice{ font-size:.85rem; color:var(--ink-faint); text-decoration:line-through; }
.pdp-price{ font-size:2rem; font-weight:400; color:var(--ink); display:flex; align-items:center; gap:.5rem; }
.pdp-off{ font-size:.8rem; font-weight:700; color:var(--good); }
.pdp-installment{ font-size:.85rem; color:var(--good); margin-top:.2rem; }
.pdp-freight{ display:flex; gap:.55rem; align-items:center; background:var(--good-soft); border-radius:8px; padding:.6rem .7rem; }
.pdp-freight .ic{ color:var(--good); width:1.5rem; height:1.5rem; flex:none; }
.pdp-freight b{ display:block; color:var(--good); font-size:.88rem; }
.pdp-freight small{ color:var(--ink-soft); font-size:.75rem; }
.pdp-stock{ font-size:.8rem; color:var(--brand); font-weight:500; margin:.7rem 0 .5rem; }
.pdp-qtyrow{ display:flex; align-items:center; gap:.8rem; font-size:.85rem; margin-bottom:.9rem; }
.pdp-stepper{ display:flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.pdp-stepper button{ width:2.2rem; height:2.2rem; font-size:1.2rem; color:var(--brand); background:#fff; transition:background .12s; }
.pdp-stepper button:hover{ background:var(--brand-soft); }
.pdp-stepper input{ width:3rem; text-align:center; border:none; border-inline:1px solid var(--line); font-weight:700; font-size:.95rem; color:var(--ink); }
.pdp-actions{ display:flex; flex-direction:column; gap:.5rem; }
.pdp-actions .btn{ margin-top:0; }
.btn-outline{ background:#fff; color:var(--brand); border:1px solid var(--brand); }
.btn-outline:hover{ background:var(--brand-soft); filter:none; }
.pdp-seller{ display:flex; gap:.6rem; align-items:center; margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line); }
.pdp-seller-avatar{
  width:2.4rem; height:2.4rem; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#FF7A45,var(--brand)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
.pdp-seller small{ color:var(--ink-soft); font-size:.72rem; display:block; }
.pdp-seller b{ font-size:.9rem; }
.pdp-seller-meta{ font-size:.72rem; color:var(--ink-faint); }
.pdp-seller-store{ display:inline-block; margin-top:.25rem; font-size:.78rem; font-weight:600; color:var(--brand); text-decoration:none; }
.pdp-seller-store:hover{ text-decoration:underline; }

.pdp-detail{ grid-column:1 / -1; }
.pdp-sec{ border-top:1px solid var(--line); padding-top:1.1rem; margin-top:1.1rem; }
.pdp-sec h3{ font-size:.95rem; font-weight:700; margin-bottom:.6rem; }
.pdp-sec-note{ font-weight:400; font-size:.76rem; color:var(--ink-faint); }
.pdp-sec p{ font-size:.86rem; color:var(--ink-soft); line-height:1.55; }
.pdp-specs{ width:100%; border-collapse:collapse; font-size:.82rem; }
.pdp-specs td{ padding:.5rem .6rem; border:1px solid var(--line); }
.pdp-specs td:first-child{ background:var(--bg); color:var(--ink-soft); width:40%; font-weight:500; }
.pdp-reviews{ display:flex; flex-direction:column; gap:.7rem; }
.pdp-review{ background:var(--bg); border-radius:8px; padding:.7rem .8rem; }
.pr-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.25rem; }
.pr-name{ font-weight:500; font-size:.82rem; }
.pr-stars{ color:var(--accent); font-size:.8rem; letter-spacing:1px; }
.pdp-review p{ font-size:.82rem; color:var(--ink-soft); }
.pdp-disclaimer{ font-size:.74rem; color:var(--ink-faint); font-style:italic; margin-top:.7rem; }
.pdp-related{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.55rem; }
.pdp-relcard{ background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; text-align:left; transition:box-shadow .15s, transform .15s; }
.pdp-relcard:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.rc-img{ aspect-ratio:1; }
.rc-img svg{ width:100%; height:100%; }
.rc-name{ font-size:.72rem; color:var(--ink); padding:.35rem .4rem 0; line-height:1.25; height:2.4rem; overflow:hidden; }
.rc-price{ font-size:.85rem; font-weight:700; padding:0 .4rem .45rem; }

/* ===========================================================
   ANIMAÇÕES / MICRO-INTERAÇÕES
   =========================================================== */
/* entrada/saída de modais */
.modal:not(.closing){ animation:overlayIn .2s ease; }
.modal.closing{ animation:overlayOut .2s ease forwards; }
.drawer:not(.closing){ animation:overlayIn .2s ease; }
.drawer.closing{ animation:overlayOut .2s ease forwards; }
@keyframes overlayIn{ from{ background:rgba(0,0,0,0); } }
@keyframes overlayOut{ to{ background:rgba(0,0,0,0); } }
.modal:not(.closing) .modal-card{ animation:modalIn .3s cubic-bezier(.2,.9,.3,1.15); }
.modal.closing .modal-card{ animation:modalOut .2s ease forwards; }
@keyframes modalIn{ from{ transform:translateY(24px) scale(.96); opacity:0; } }
@keyframes modalOut{ to{ transform:translateY(12px) scale(.98); opacity:0; } }
.drawer:not(.closing) .drawer-card{ animation:slideIn .3s cubic-bezier(.2,.9,.3,1.05); }
.drawer.closing .drawer-card{ animation:slideOut .2s ease forwards; }
@keyframes slideIn{ from{ transform:translateX(100%); } }
@keyframes slideOut{ to{ transform:translateX(100%); } }

/* entrada dos cards do grid */
.card{ animation:cardIn .35s ease backwards; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(10px); } }
.card-img svg{ transition:transform .3s ease; }
.card:hover .card-img svg{ transform:scale(1.06); }

/* fileira de gamificação */
.qi-circle{ transition:transform .18s cubic-bezier(.2,.9,.3,1.3), box-shadow .18s; }
.quick-item:hover .qi-circle{ transform:translateY(-3px) scale(1.08); box-shadow:0 5px 14px rgba(0,0,0,.18); }

/* botão pulse ao adicionar */
.pulse{ animation:pulseAnim .42s ease; }
@keyframes pulseAnim{ 0%{transform:scale(1)} 28%{transform:scale(.94)} 60%{transform:scale(1.05)} 100%{transform:scale(1)} }

/* bump do carrinho */
#cartBtn.bump{ animation:cartBump .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes cartBump{ 0%,100%{transform:none} 25%{transform:scale(1.28) rotate(-9deg)} 55%{transform:scale(.92) rotate(4deg)} }

/* troca de imagem na galeria */
.pdp-main-img.img-swap{ animation:imgSwap .32s ease; }
@keyframes imgSwap{ from{ opacity:.3; transform:scale(1.04); } }

/* hero: leve flutuação nas caixas */
.ha-box{ animation:floaty 4s ease-in-out infinite; }
.ha-box.hb2{ animation-delay:.6s; }
.ha-box.hb3{ animation-delay:1.2s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(var(--rot,0)); } 50%{ transform:translateY(-6px) rotate(var(--rot,0)); } }
.ha-box.hb2{ --rot:-8deg; }
.ha-box.hb3{ --rot:10deg; }
.ha-tag{ animation:tagPulse 2.2s ease-in-out infinite; }
@keyframes tagPulse{ 0%,100%{ transform:rotate(-10deg) scale(1); } 50%{ transform:rotate(-10deg) scale(1.08); } }

/* timer: piscada sutil dos segundos */
#ftS{ animation:tick 1s steps(1) infinite; }
@keyframes tick{ 0%,60%{ background:var(--dark); } 61%,100%{ background:#3a3a3a; } }

/* botões: leve afundar no clique */
.btn:active,.card-buy:active,.side-cta:active{ transform:scale(.97); }

/* ===========================================================
   PAGAMENTO
   =========================================================== */
.pay-container{ max-width:1000px; }
.pay-h1{ font-size:1.4rem; font-weight:700; margin:.4rem 0 1rem; }
.pay-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1.2rem; align-items:start; }
.pay-main{ background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:1.2rem; }
.pay-disclaimer{
  background:var(--good-soft); border:1px solid #bfe6cd; border-radius:var(--r);
  padding:.7rem .85rem; font-size:.82rem; color:#14663a; margin-bottom:1.1rem;
}
.pay-sec-title{ font-size:1rem; font-weight:700; margin-bottom:.7rem; }

.pay-methods{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.pay-method{
  display:flex; align-items:center; gap:.65rem; text-align:left;
  border:1.5px solid var(--line); border-radius:var(--r); background:#fff;
  padding:.7rem .8rem; transition:border-color .15s, box-shadow .15s, transform .12s;
}
.pay-method:hover{ border-color:var(--brand); transform:translateY(-1px); }
.pay-method.is-selected{ border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft) inset; background:var(--brand-soft); }
.pm-icon{ width:2.3rem; height:2.3rem; flex:none; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--brand); }
.pm-icon .ic{ width:1.35rem; height:1.35rem; }
.pm-text{ flex:1; display:flex; flex-direction:column; }
.pm-text b{ font-size:.86rem; }
.pm-text small{ font-size:.72rem; color:var(--ink-soft); }
.pm-radio{ width:1.15rem; height:1.15rem; flex:none; border:2px solid var(--line); border-radius:50%; position:relative; }
.pay-method.is-selected .pm-radio{ border-color:var(--brand); }
.pay-method.is-selected .pm-radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--brand); }

.pay-generate-row{ margin-top:1rem; }

/* resultado */
.pay-result{ margin-top:1.2rem; border-top:1px solid var(--line); padding-top:1.1rem; }
.pay-result-inner.reveal{ animation:payReveal .4s cubic-bezier(.2,.9,.3,1.1); }
@keyframes payReveal{ from{ opacity:0; transform:translateY(14px); } }
.pay-result-title{ font-size:.95rem; font-weight:700; margin-bottom:.8rem; }
.pay-visual{ display:flex; justify-content:center; margin-bottom:1rem; }
.pay-fields{ display:flex; flex-direction:column; gap:.5rem; }
.pay-field{ background:var(--bg); border-radius:6px; padding:.5rem .7rem; }
.pay-field small{ font-size:.68rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.pf-valrow{ display:flex; align-items:center; gap:.5rem; margin-top:.15rem; }
.pf-val{ flex:1; font-size:.9rem; font-weight:500; word-break:break-all; }
.pf-val.mono{ font-family:'Consolas','Courier New',monospace; font-size:.78rem; }
.pf-copy{ flex:none; width:1.9rem; height:1.9rem; border-radius:6px; background:#fff; border:1px solid var(--line); color:var(--brand); display:flex; align-items:center; justify-content:center; }
.pf-copy:hover{ background:var(--brand-soft); }
.pay-joke{
  margin-top:1rem; background:#FFF8E1; border:1px dashed var(--coin);
  border-radius:var(--r); padding:.7rem .85rem; font-size:.85rem; color:#7a5b00; font-style:italic;
}
.pay-regen{ margin-top:.8rem; background:#fff; border:1px solid var(--brand); color:var(--brand); padding:.5rem .9rem; font-size:.82rem; }
.pay-regen:hover{ background:var(--brand-soft); }

/* resumo lateral */
.pay-side{ position:sticky; top:70px; }
.pay-summary{ background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:1.1rem; }
.pay-summary h2{ font-size:.95rem; font-weight:700; margin-bottom:.7rem; }
.pay-sum-items{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:.7rem; }
.pay-sum-item{ display:flex; align-items:center; gap:.5rem; font-size:.78rem; }
.psi-img{ width:34px; height:34px; flex:none; border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.psi-img svg{ width:100%; height:100%; }
.pay-sum-item span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-soft); }
.pay-sum-item b{ white-space:nowrap; }
.pay-sum-more{ font-size:.75rem; color:var(--ink-faint); }
.pay-sum-line{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--ink-soft); padding:.2rem 0; border-top:1px solid var(--line); }
.pay-sum-line .freight-free{ color:var(--good); font-weight:700; }
.pay-sum-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--line); font-weight:700; }
.pay-sum-total b{ font-size:1.3rem; color:var(--ink); }
.pay-sum-real{ font-size:.72rem; color:var(--good); text-align:right; font-style:italic; margin-bottom:.8rem; }

/* cartão de crédito visual */
.credit-card{
  width:100%; max-width:320px; aspect-ratio:1.586; border-radius:12px;
  color:#fff; padding:1rem 1.1rem; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 8px 20px rgba(0,0,0,.25); position:relative; overflow:hidden;
}
.credit-card::after{ content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.08); }
.cc-top{ display:flex; justify-content:space-between; align-items:center; }
.cc-chip{ width:34px; height:26px; border-radius:5px; background:linear-gradient(135deg,#f5d67b,#c99700); }
.cc-brand{ font-weight:900; font-style:italic; font-size:1.05rem; }
.cc-number{ font-size:1.15rem; letter-spacing:.08em; font-family:'Consolas','Courier New',monospace; text-shadow:0 1px 2px rgba(0,0,0,.3); }
.cc-bottom{ display:flex; justify-content:space-between; font-size:.72rem; }
.cc-bottom small{ opacity:.7; font-size:.6rem; text-transform:uppercase; display:block; }

/* pix / cripto QR */
.pix-visual,.crypto-visual{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.qr{ width:150px; height:150px; border:1px solid var(--line); border-radius:8px; padding:6px; background:#fff; }
.crypto-net{ font-weight:700; font-size:.9rem; }
.crypto-amount{ font-size:1.1rem; font-weight:700; color:var(--brand); }

/* boleto */
.boleto-visual{ width:100%; max-width:360px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.boleto-head{ background:var(--dark); color:#fff; font-size:.75rem; font-weight:700; padding:.4rem .6rem; }
.barcode{ width:100%; height:60px; display:block; padding:.5rem .6rem 0; }
.boleto-line{ font-family:'Consolas','Courier New',monospace; font-size:.7rem; text-align:center; padding:.5rem .4rem; word-break:break-all; }

/* paypal / cash */
.paypal-visual{ text-align:center; }
.pp-logo{ font-size:1.6rem; font-weight:900; font-style:italic; color:#1a3a8f; }
.pp-logo b{ color:#2b9fd0; }
.paypal-visual small{ display:block; font-size:.7rem; color:var(--ink-faint); margin-top:.2rem; }
.cash-visual{ display:flex; align-items:center; gap:.6rem; background:var(--good-soft); border:1px solid #bfe6cd; border-radius:10px; padding:1rem 1.4rem; }
.cash-note{ font-size:1.6rem; font-weight:900; color:var(--good); }
.cash-amount{ font-size:1.4rem; font-weight:700; color:#14663a; }

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .hero-row{ grid-template-columns:1fr; }
  .side-banner{ flex-direction:row; align-items:center; flex-wrap:wrap; }
  .side-banner .side-cta{ margin:0 0 0 auto; }
  .deliver-to{ display:none; }
  .pdp-body{ grid-template-columns:1fr; gap:1rem; }
  .pdp-gallery{ position:static; display:flex; flex-direction:column; align-items:center; }
  .pdp-main-img{ aspect-ratio:auto; height:min(48vh,320px); width:100%; display:flex; align-items:center; justify-content:center; }
  .pdp-main-img svg{ width:auto; height:100%; max-width:100%; }
  .pay-layout{ grid-template-columns:1fr; }
  .pay-side{ position:static; }
}
@media (max-width:640px){
  .mobile-bar{ display:flex; }
  .container{ padding-bottom:6.5rem; }
  .grid{ grid-template-columns:repeat(2,1fr); gap:.5rem; }
  .topbar-inner{ gap:.5rem; }
  .search-wrap{ order:3; min-width:100%; }
  .toast-zone{ bottom:5.2rem; }
  .hero-title{ font-size:1.25rem; }
  .hero-art{ display:none; }
  .quick-row{ grid-template-columns:repeat(5,1fr); padding:.7rem .2rem .6rem; gap:.1rem; }
  .quick-row .qi-label{ font-size:.62rem; }
  .qi-circle{ width:44px; height:44px; }
  .qi-tag{ font-size:.6rem; }
}

/* ---------- responsivo e novas páginas MPA ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .wheel{ transition-duration:.01ms !important; }
}

/* Transições Premium e Hover Effects */
.page-enter {
  animation: fadeInPage 0.4s ease-out forwards;
}
@keyframes fadeInPage {
  /* só opacidade — um transform no body vira "containing block" e quebra
     todo position:fixed (gate de idade, banner de cookies, modais, barra mobile). */
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.btn:active {
  transform: scale(0.96);
}

/* Containers das Páginas */
.pdp-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 2rem;
  align-items: start;
  background: var(--card);
  padding: 1.5rem;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.pdp-detail-section {
  margin-top: 2rem;
  background: var(--card);
  padding: 1.5rem;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.cart-wrapper {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.cart-left {
  flex: 1;
  background: var(--card);
  padding: 1.5rem;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.cart-right {
  width: 340px;
  background: var(--card);
  padding: 1.5rem;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  position: sticky;
  top: 5rem;
}
.cart-title-main {
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}
.minigame-card {
  background: var(--card);
  padding: 2rem;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.collection-wrapper {
  background: var(--card);
  padding: 1.5rem;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

@media (max-width:900px){
  .pdp-layout { grid-template-columns: 1fr; }
  .cart-wrapper { flex-direction: column; }
  .cart-right { width: 100%; position: static; }
}
@media (max-width:560px){
  .pay-methods { grid-template-columns: 1fr; }
}

/* ===========================================================
   PEDIDO + RASTREAMENTO
   =========================================================== */
.order-container{ max-width:1000px; }
.order-confirm{ text-align:center; padding:1.4rem 1rem .4rem; }
.oc-check{ width:64px; height:64px; margin:0 auto .6rem; }
.oc-check svg{ width:100%; height:100%; }
.oc-circle{ fill:none; stroke:var(--good); stroke-width:3; stroke-dasharray:151; stroke-dashoffset:151; animation:ocCircle .5s ease forwards; }
.oc-tick{ fill:none; stroke:var(--good); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:ocTick .35s .45s ease forwards; }
@keyframes ocCircle{ to{ stroke-dashoffset:0; } }
@keyframes ocTick{ to{ stroke-dashoffset:0; } }
.order-confirm h1{ font-size:1.5rem; font-weight:900; }
.oc-sub{ color:var(--ink-soft); font-size:.9rem; margin:.3rem 0 .9rem; }
.oc-meta{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.oc-pill{ background:var(--card); border:1px solid var(--line); border-radius:999px; padding:.35rem .8rem; box-shadow:var(--shadow); }
.oc-pill small{ color:var(--ink-faint); font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; margin-right:.4rem; }
.oc-pill b{ font-size:.85rem; }

.order-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1rem; margin-top:1rem; align-items:start; }
.track-card,.order-items-card{ background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:1.1rem; }
.track-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.3rem; margin-bottom:.7rem; }
.track-head h2{ font-size:1.05rem; font-weight:700; }
.track-code{ font-size:.7rem; color:var(--ink-faint); font-family:'Consolas','Courier New',monospace; }

/* mapa */
.track-map{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.mp-svg{ width:100%; display:block; background:#eef1ee; }
.mp-bg{ fill:#eef1ee; }
.mp-street{ stroke:#e2e6e2; stroke-width:2; }
.mp-route{ fill:none; stroke:#c3c8c3; stroke-width:2.5; stroke-dasharray:5 5; stroke-linejoin:round; }
.mp-route-done{ fill:none; stroke:var(--brand); stroke-width:3.5; stroke-linejoin:round; stroke-linecap:round; }
.mp-origin{ fill:#8a8f8a; stroke:#5f645f; stroke-width:1; }
.mp-origin path{ stroke:#5f645f; }
.mp-dest path{ fill:var(--good); }
.mp-dest-pulse{ fill:var(--good); opacity:.25; animation:destPulse 1.8s ease-in-out infinite; }
@keyframes destPulse{ 0%,100%{ transform:scale(.6); opacity:.28; } 50%{ transform:scale(1.15); opacity:.08; } }
.mp-dest{ transform-box:fill-box; }
.mp-dot{ fill:#fff; stroke:var(--brand); stroke-width:2; }
.mp-dot-pulse{ animation:dotPulse .6s ease; }
@keyframes dotPulse{ 0%{ transform:scale(1); } 50%{ transform:scale(2.2); } 100%{ transform:scale(1); } transform-origin:center; }
.mp-courier{ }
.mp-courier-halo{ fill:var(--brand); opacity:.2; animation:destPulse 1.4s ease-in-out infinite; }
.mp-courier g{ fill:var(--brand); stroke:#fff; stroke-width:.6; }
.mp-courier.is-moving > g{ animation:drive-bob .25s infinite; transform-origin:center; }
@keyframes drive-bob{
  0%, 100%{ transform:translate(-8px, -6px); }
  50%{ transform:translate(-8px, -7.5px) rotate(-3deg); }
}
.mp-label{ font-size:8px; fill:#7a807a; font-family:'Roboto',sans-serif; text-anchor:middle; }
.mp-label-end{ fill:var(--good); font-weight:700; }

/* eta */
.track-eta{ display:flex; justify-content:space-between; align-items:flex-end; padding:.7rem 0 .4rem; border-bottom:1px solid var(--line); margin-bottom:.6rem; }
.te-block small{ display:block; font-size:.66rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; }
.te-block b{ font-size:.95rem; color:var(--brand); }
.te-right{ text-align:right; }
.te-next{ font-size:.72rem; color:var(--ink-soft); }

/* timeline */
.track-timeline{ list-style:none; position:relative; padding-left:.3rem; }
.tl-step{ display:flex; gap:.7rem; padding-bottom:.9rem; position:relative; }
.tl-step:not(:last-child) .tl-marker::after{ content:""; position:absolute; left:6px; top:14px; bottom:-8px; width:2px; background:var(--line); }
.tl-step.done .tl-marker::after{ background:var(--brand); }
.tl-marker{ position:relative; width:14px; height:14px; flex:none; border-radius:50%; border:2px solid var(--line); background:#fff; margin-top:1px; }
.tl-step.done .tl-marker{ border-color:var(--brand); background:var(--brand); }
.tl-step.active .tl-marker{ border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px var(--brand-soft); animation:tlPulse 1.4s ease-in-out infinite; }
@keyframes tlPulse{ 0%,100%{ box-shadow:0 0 0 3px var(--brand-soft); } 50%{ box-shadow:0 0 0 6px var(--brand-soft); } }
.tl-body b{ font-size:.85rem; }
.tl-step.future .tl-body b{ color:var(--ink-faint); font-weight:400; }
.tl-joke{ font-size:.76rem; color:var(--ink-soft); font-style:italic; margin-top:.15rem; }
.tl-step.active .tl-body b{ color:var(--brand); }

/* itens do pedido */
.order-items-card h2{ font-size:1rem; font-weight:700; margin-bottom:.7rem; }
.order-items{ display:flex; flex-direction:column; gap:.5rem; max-height:260px; overflow:auto; }
.order-item{ display:flex; align-items:center; gap:.5rem; }
.oi-img{ width:38px; height:38px; flex:none; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.oi-img svg{ width:100%; height:100%; }
.oi-name{ flex:1; font-size:.76rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oi-price{ font-size:.8rem; white-space:nowrap; }
.order-total-row{ display:flex; justify-content:space-between; align-items:baseline; margin-top:.8rem; padding-top:.7rem; border-top:1px solid var(--line); font-weight:700; }
.order-total-row b{ font-size:1.3rem; }
.order-charged{ font-size:.74rem; color:var(--good); text-align:right; margin-top:.2rem; }
.order-actions{ display:flex; flex-direction:column; gap:.5rem; margin-top:1rem; }
.order-actions .btn{ margin-top:0; }
.order-share{ background:transparent; color:var(--brand); border:none; font-size:.82rem; text-decoration:underline; padding:.3rem; }

@media (max-width:820px){
  .order-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .oc-circle,.oc-tick{ animation:none; stroke-dashoffset:0; }
  .mp-dest-pulse,.mp-courier-halo,.tl-step.active .tl-marker{ animation:none; }
}

/* ===========================================================
   CONTA / CADASTRO
   =========================================================== */
.hd-avatar{ display:flex; align-items:center; justify-content:center; width:1.65rem; height:1.65rem; border-radius:50%; color:#fff; font-weight:700; font-size:.85rem; }
.auth-card{ text-align:center; }
.auth-card h2{ margin-bottom:.2rem; }
.auth-google{
  display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%;
  border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
  font-weight:500; font-size:.9rem; padding:.7rem; margin-top:.6rem;
  transition:background .12s, box-shadow .12s;
}
.auth-google:hover{ background:#f6f6f6; box-shadow:var(--shadow); }
.g-ic{ width:1.2rem; height:1.2rem; }
.auth-or{ display:flex; align-items:center; gap:.6rem; color:var(--ink-faint); font-size:.75rem; margin:.9rem 0 .5rem; }
.auth-or::before,.auth-or::after{ content:""; flex:1; height:1px; background:var(--line); }
.auth-input{
  width:100%; border:1px solid var(--line); border-radius:8px;
  padding:.65rem .8rem; font-family:inherit; font-size:.9rem; color:var(--ink);
  margin-bottom:.5rem; background:#fff; outline:none;
}
.auth-input:focus{ border-color:var(--brand); }
.auth-mock{ font-size:.72rem; color:var(--ink-faint); font-style:italic; margin-top:.8rem; }

.account-card .acc-head{ display:flex; align-items:center; gap:.7rem; padding-bottom:.9rem; margin-bottom:.6rem; border-bottom:1px solid var(--line); }
.acc-avatar{ width:2.6rem; height:2.6rem; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; }
.acc-id b{ display:block; font-size:.95rem; }
.acc-id small{ color:var(--ink-soft); font-size:.76rem; }
.acc-item{
  display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  padding:.7rem .5rem; border-radius:8px; font-size:.9rem; color:var(--ink);
}
.acc-item:hover{ background:var(--bg); }
.acc-item .ic{ color:var(--ink-soft); }
.acc-logout{ color:var(--brand); margin-top:.2rem; border-top:1px solid var(--line); border-radius:0; }
.acc-logout .ic{ color:var(--brand); }

/* ===========================================================
   MEUS PEDIDOS (lista)
   =========================================================== */
.orders-container{ max-width:820px; }
.orders-h1{ font-size:1.4rem; font-weight:700; margin:.4rem 0 1rem; }
.orders-list{ display:flex; flex-direction:column; gap:.7rem; }
.order-row{
  display:flex; align-items:center; gap:.9rem; text-align:left;
  background:var(--card); border-radius:var(--r); box-shadow:var(--shadow);
  padding:.8rem .9rem; transition:box-shadow .15s, transform .12s;
}
.order-row:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.ol-thumbs{ display:flex; flex:none; }
.ol-thumb{ width:38px; height:38px; border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-left:-8px; background:#fff; }
.ol-thumb:first-child{ margin-left:0; }
.ol-thumb svg{ width:100%; height:100%; }
.ol-more{ align-self:center; font-size:.72rem; color:var(--ink-faint); margin-left:.35rem; }
.ol-info{ flex:1; min-width:0; }
.ol-top{ display:flex; justify-content:space-between; gap:.5rem; }
.ol-top b{ font-size:.82rem; font-family:'Consolas','Courier New',monospace; }
.ol-total{ font-weight:700; }
.ol-status{ display:flex; align-items:center; gap:.5rem; margin:.3rem 0; }
.ol-badge{ background:var(--brand-soft); color:var(--brand); font-size:.7rem; font-weight:700; padding:.1rem .5rem; border-radius:999px; }
.ol-count{ font-size:.72rem; color:var(--ink-faint); }
.ol-bar{ height:5px; background:var(--line); border-radius:999px; overflow:hidden; }
.ol-bar span{ display:block; height:100%; background:var(--brand); transition:width .5s; }
.ol-go{ font-size:1.6rem; color:var(--ink-faint); flex:none; }
.orders-empty{ text-align:center; padding:2.5rem 1rem; color:var(--ink-soft); }
.orders-empty .btn{ margin-top:1rem; display:inline-block; width:auto; padding:.6rem 1.4rem; }

/* ===========================================================
   VENDEDOR
   =========================================================== */
.seller-container{ max-width:1000px; }
.seller-gate,.seller-register{ max-width:420px; margin:2rem auto; text-align:center; background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:2rem 1.5rem; }
.sg-icon{ width:56px; height:56px; margin:0 auto 1rem; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; }
.sg-icon .ic{ width:1.8rem; height:1.8rem; }
.seller-gate h1,.seller-register h1{ font-size:1.3rem; margin-bottom:.5rem; }
.seller-gate p,.seller-intro{ color:var(--ink-soft); font-size:.9rem; margin-bottom:1.1rem; }
.seller-register .auth-input{ text-align:center; }

.seller-head{ display:flex; align-items:center; gap:1rem; background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:1.1rem 1.2rem; margin-bottom:.9rem; }
.sh-avatar{ width:3.4rem; height:3.4rem; border-radius:14px; background:linear-gradient(135deg,#FF7A45,var(--brand)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.5rem; flex:none; }
.sh-badge{ display:inline-block; background:var(--dark); color:var(--warn,#FFD23F); font-size:.62rem; font-weight:700; letter-spacing:.06em; padding:.1rem .45rem; border-radius:4px; }
.sh-id h1{ font-size:1.3rem; margin:.15rem 0; }
.sh-id small{ color:var(--ink-soft); font-size:.76rem; }

.seller-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.stat-box{ background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:.9rem 1rem; }
.stat-box small{ display:block; font-size:.68rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.25rem; }
.stat-box b{ font-size:1.4rem; font-weight:900; color:var(--ink); }
.stat-box .star{ color:var(--accent); }
.seller-note{ font-size:.75rem; color:var(--ink-faint); font-style:italic; margin:.6rem 0 1.2rem; }

.seller-cols{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:1rem; align-items:start; }
.seller-add,.seller-products{ background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:1.1rem; }
.seller-add h2,.seller-products h2{ font-size:1rem; font-weight:700; margin-bottom:.7rem; }
.seller-catlabel{ display:block; font-size:.72rem; color:var(--ink-soft); margin-bottom:.25rem; }
.seller-prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; }
.seller-prod{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; }
.sp-img{ aspect-ratio:1; border-bottom:1px solid var(--line); }
.sp-img svg{ width:100%; height:100%; }
.sp-body{ padding:.5rem .55rem .6rem; display:flex; flex-direction:column; gap:.15rem; }
.sp-name{ font-size:.8rem; font-weight:500; line-height:1.2; }
.sp-price{ font-size:1rem; font-weight:700; }
.sp-sold{ font-size:.7rem; color:var(--ink-soft); }
.sp-rev{ font-size:.72rem; color:var(--good); font-weight:700; }
.sp-remove{ margin-top:.4rem; font-size:.72rem; color:var(--brand); border:1px solid var(--line); border-radius:6px; padding:.3rem; background:#fff; }
.sp-remove:hover{ background:var(--brand-soft); }
.seller-empty{ grid-column:1/-1; text-align:center; color:var(--ink-soft); font-style:italic; padding:1.5rem 0; }

@media (max-width:760px){
  .seller-stats{ grid-template-columns:repeat(2,1fr); }
  .seller-cols{ grid-template-columns:1fr; }
}

/* ===========================================================
   AVALIAÇÕES REAIS (interação do usuário na PDP)
   =========================================================== */
.rev-form{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:.9rem; margin-bottom:1rem; }
.rev-form-top{ display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; }
.rev-avatar{ width:2.2rem; height:2.2rem; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; }
.rev-pickwrap small{ display:block; font-size:.68rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.rev-starpick{ display:flex; gap:.1rem; }
.rev-star{ font-size:1.5rem; line-height:1; color:var(--line); transition:color .1s, transform .1s; }
.rev-star:hover{ transform:scale(1.15); }
.rev-star.on{ color:var(--accent); }
.rev-text{
  width:100%; border:1px solid var(--line); border-radius:8px; resize:vertical;
  padding:.6rem .7rem; font-family:inherit; font-size:.85rem; color:var(--ink); outline:none;
}
.rev-text:focus{ border-color:var(--brand); }
.rev-form-foot{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-top:.6rem; flex-wrap:wrap; }
.rev-form-foot small{ font-size:.74rem; color:var(--ink-soft); }
.rev-loginlink{ color:var(--brand); text-decoration:underline; }
.rev-submit{ padding:.5rem 1.1rem; font-size:.85rem; }

.rev-subhead{ font-size:.82rem; font-weight:700; color:var(--ink-soft); margin:1rem 0 .6rem; text-transform:uppercase; letter-spacing:.03em; }
.rev-user-list{ display:flex; flex-direction:column; gap:.7rem; }
.rev-empty{ font-size:.82rem; color:var(--ink-faint); font-style:italic; padding:.5rem 0; }
.rev-item{ display:flex; gap:.6rem; }
.rev-ava-sm{ width:2rem; height:2rem; flex:none; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.rev-body{ flex:1; min-width:0; background:var(--bg); border-radius:8px; padding:.55rem .7rem; animation:cardIn .3s ease; }
.rev-line1{ display:flex; align-items:center; gap:.4rem; }
.rev-line1 b{ font-size:.82rem; }
.rev-youtag{ background:var(--brand-soft); color:var(--brand); font-size:.62rem; font-weight:700; padding:.05rem .4rem; border-radius:999px; }
.rev-when{ font-size:.68rem; color:var(--ink-faint); margin-left:auto; }
.rev-stars{ color:var(--accent); font-size:.85rem; letter-spacing:1px; margin:.15rem 0; }
.rev-textout{ font-size:.83rem; color:var(--ink); line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.rev-actions{ display:flex; gap:.8rem; margin-top:.4rem; }
.rev-like,.rev-del{ font-size:.72rem; color:var(--ink-soft); padding:.1rem .2rem; border-radius:5px; }
.rev-like:hover{ background:var(--brand-soft); color:var(--brand); }
.rev-like.on{ color:var(--brand); font-weight:700; }
.rev-del:hover{ color:var(--brand); }

/* ===========================================================
   VENDEDOR — formulário rico + cards (v2)
   =========================================================== */
.p-photo{ width:100%; height:100%; object-fit:cover; display:block; }

.seller-newbtn{ margin-left:auto; padding:.6rem 1.1rem; font-size:.85rem; white-space:nowrap; align-self:center; }
.seller-products-full{ background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:1.1rem; margin-top:1rem; }
.seller-products-full h2{ font-size:1rem; font-weight:700; margin-bottom:.8rem; }

.seller-prod{ position:relative; }
.seller-prod .sp-img{ position:relative; cursor:pointer; }
.sp-disc{ position:absolute; top:.4rem; left:0; background:var(--accent); color:var(--dark); font-weight:800; font-size:.7rem; padding:.1rem .4rem; border-radius:0 4px 4px 0; z-index:2; }
.sp-priceline{ display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; }
.sp-old{ font-size:.72rem; color:var(--ink-faint); text-decoration:line-through; }
.sp-stats{ display:flex; justify-content:space-between; gap:.4rem; font-size:.66rem; color:var(--ink-soft); margin-top:.15rem; }
/* ações do card do vendedor — botões de ícone limpos + kebab */
.sp-actions{ display:flex; align-items:center; gap:.3rem; margin-top:.6rem; }
.sp-ico{ width:33px; height:33px; flex:none; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink-soft); cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.sp-ico:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.sp-ico .ic{ width:17px; height:17px; }
.sp-kebab{ margin-left:auto; }   /* empurra o "⋯" para a direita */
.seller-empty-full{ grid-column:1/-1; text-align:center; padding:2rem 1rem; color:var(--ink-soft); }
.seller-empty-full .btn{ margin-top:1rem; display:inline-block; width:auto; padding:.6rem 1.4rem; }

/* modal do formulário */
.prod-form-card{ width:min(540px,100%); text-align:left; }
.prod-form-card h2{ margin-bottom:.3rem; }
.pf-photo-row{ display:flex; gap:.9rem; align-items:center; margin:.7rem 0 .9rem; }
.pf-photo{ width:96px; height:96px; border:2px dashed var(--line); border-radius:10px; overflow:hidden; cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.pf-photo:hover{ border-color:var(--brand); }
.pf-photo-preview{ width:100%; height:100%; }
.pf-photo-preview img, .pf-photo-preview svg{ width:100%; height:100%; object-fit:cover; }
.pf-photo-side{ display:flex; flex-direction:column; gap:.1rem; }
.pf-photo-title{ font-weight:700; font-size:.85rem; }
.pf-photo-hint{ font-size:.72rem; color:var(--ink-soft); max-width:220px; }
.pf-photo-remove{ align-self:flex-start; font-size:.72rem; color:var(--brand); text-decoration:underline; margin-top:.25rem; }
.pf-label{ display:block; font-size:.72rem; color:var(--ink-soft); margin:.5rem 0 .2rem; font-weight:500; }
.prod-form-card .auth-input{ margin-bottom:0; }
.pf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.3rem .7rem; }

/* strip "da comunidade" na home */
.community-strip{ margin-top:1.2rem; }
.community-head{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:.5rem; }
.community-head h2{ font-size:1.05rem; font-weight:700; color:var(--brand); text-transform:uppercase; letter-spacing:.03em; }
.community-head span{ font-size:.75rem; color:var(--ink-faint); font-style:italic; }
.card-img .p-photo{ transition:transform .3s ease; }
.card:hover .card-img .p-photo{ transform:scale(1.06); }

/* ===========================================================
   PEDIDOS — abas + histórico "entregue"
   =========================================================== */
.orders-tabs{ display:flex; gap:.4rem; margin-bottom:1rem; border-bottom:2px solid var(--line); }
.orders-tab{ padding:.6rem .9rem; font-size:.9rem; font-weight:700; color:var(--ink-soft); border-bottom:3px solid transparent; margin-bottom:-2px; display:flex; align-items:center; gap:.4rem; }
.orders-tab:hover{ color:var(--brand); }
.orders-tab.is-active{ color:var(--brand); border-bottom-color:var(--brand); }
.ot-count{ background:var(--bg); color:var(--ink-soft); font-size:.72rem; border-radius:999px; padding:.02rem .45rem; min-width:1.3rem; text-align:center; }
.orders-tab.is-active .ot-count{ background:var(--brand-soft); color:var(--brand); }
.orders-hist-note{ font-size:.78rem; color:var(--ink-faint); font-style:italic; background:var(--good-soft); border:1px solid #bfe6cd; border-radius:var(--r); padding:.6rem .8rem; margin-bottom:.8rem; }
#ordersPane{ display:flex; flex-direction:column; gap:.7rem; }
.order-row-delivered{ border-left:4px solid var(--good); }
.ol-badge-delivered{ background:var(--good-soft); color:var(--good); }
.ol-joke{ font-size:.76rem; color:var(--ink-soft); font-style:italic; margin-top:.3rem; line-height:1.35; }
.oc-pill-delivered b{ color:var(--good); }
.order-confirm.is-delivered .oc-circle,
.order-confirm.is-delivered .oc-tick{ stroke:var(--good); }

/* ===========================================================
   SLOT DE ANÚNCIO (com piada)
   =========================================================== */
.ad-slot{ flex-direction:column; gap:.4rem; padding:.7rem; }
.ad-unit{
  width:100%; min-height:70px; border-radius:6px;
  background:repeating-linear-gradient(-45deg,#fafafa,#fafafa 10px,#f2f2f2 10px,#f2f2f2 20px);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
}
.ad-joke{ font-size:.74rem; color:var(--ink-soft); font-style:italic; text-align:center; max-width:520px; }

/* ===========================================================
   LEGAL — gate de idade, banner de cookies, links, páginas
   =========================================================== */
.legal-links{ margin-top:.4rem; }
.legal-links a{ color:var(--ink-faint); text-decoration:underline; }
.legal-links a:hover{ color:var(--brand); }

.age-gate{ position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:1rem; }
.age-card{ background:var(--card); border-radius:12px; box-shadow:0 12px 48px rgba(0,0,0,.4); max-width:400px; width:100%; padding:2rem 1.6rem; text-align:center; animation:modalIn .3s cubic-bezier(.2,.9,.3,1.15); }
.age-emoji{ font-size:2.6rem; }
.age-card h2{ font-size:1.25rem; font-weight:700; margin:.5rem 0; }
.age-card p{ font-size:.86rem; color:var(--ink-soft); margin-bottom:1.2rem; }
.age-actions{ display:flex; gap:.6rem; }
.age-actions .btn{ flex:1; margin:0; padding:.7rem; }

.cookie-banner{ position:fixed; bottom:0; left:0; right:0; z-index:280; background:var(--dark); color:#eee; padding:.9rem 1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center; box-shadow:0 -2px 12px rgba(0,0,0,.25); animation:slideUpIn .3s ease; }
@keyframes slideUpIn{ from{ transform:translateY(100%); } }
.cookie-banner.out{ animation:slideDownOut .3s ease forwards; }
@keyframes slideDownOut{ to{ transform:translateY(100%); } }
.cookie-text{ font-size:.82rem; max-width:620px; }
.cookie-actions{ display:flex; gap:.5rem; }
.cookie-actions .btn{ margin:0; padding:.5rem .9rem; font-size:.82rem; }
.cookie-banner .btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }

/* páginas legais */
.legal-page{ max-width:760px; }
.legal-page h1{ font-size:1.6rem; font-weight:700; margin:.4rem 0 .3rem; }
.legal-updated{ font-size:.78rem; color:var(--ink-faint); margin-bottom:1.4rem; }
.legal-page h2{ font-size:1.05rem; font-weight:700; margin:1.6rem 0 .5rem; color:var(--brand); scroll-margin-top:70px; }
.legal-page p, .legal-page li{ font-size:.9rem; color:var(--ink); line-height:1.65; }
.legal-page ul{ padding-left:1.2rem; margin:.4rem 0; }
.legal-page li{ margin-bottom:.35rem; }
.legal-callout{ background:var(--brand-soft); border:1px solid #ffd9cc; border-radius:var(--r); padding:.9rem 1.1rem; margin:1rem 0; font-size:.86rem; }
.legal-joke{ color:var(--ink-soft); font-style:italic; }

/* ============================================================
   MODERAÇÃO + PAINEL ADMIN
   ============================================================ */
/* selos de status */
.mod-badge{ display:inline-block; font-size:.68rem; font-weight:700; padding:.12rem .45rem; border-radius:999px; letter-spacing:.02em; vertical-align:middle; }
.mod-pending{  background:#FFF6E0; color:#9a6b00; border:1px solid #ffe4a3; }
.mod-approved{ background:var(--good-soft); color:#00733a; border:1px solid #b8e6ca; }
.mod-rejected{ background:#FDE7E7; color:#b3261e; border:1px solid #f3c0bd; }
.mod-hidden{   background:#ECECEC; color:#666; border:1px solid #dcdcdc; }
/* selo sobreposto no card do vendedor */
.seller-prod .sp-img{ position:relative; }
.seller-prod .sp-img .mod-badge{ position:absolute; top:6px; left:6px; z-index:2; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.mod-wrap-pending{ outline:2px solid #ffe4a3; }
.mod-wrap-rejected{ outline:2px solid #f3c0bd; opacity:.85; }

/* aviso de produto não aprovado (página de produto) */
.mod-notice{ max-width:520px; margin:4rem auto; text-align:center; padding:2rem 1.5rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.mod-notice-ic{ font-size:2.6rem; }
.mod-notice h1{ font-size:1.4rem; margin:.5rem 0; }
.mod-notice p{ color:var(--ink-soft); margin-bottom:1.4rem; }

/* container admin */
.admin-container{ padding-top:1.2rem; padding-bottom:3rem; }
.admin-title-tag{ margin-left:.8rem; padding:.2rem .6rem; background:rgba(255,255,255,.16); color:#fff; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.03em; }
.admin-shell{ max-width:960px; margin:0 auto; }
.admin-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.admin-head h1{ font-size:1.5rem; }
.admin-who{ color:var(--ink-soft); font-size:.82rem; }
.admin-localnote{ background:#FFF6E0; border:1px solid #ffe4a3; color:#7a5a00; font-size:.8rem; padding:.5rem .8rem; border-radius:var(--r); margin:.6rem 0 1rem; }

/* gate */
.admin-gate{ max-width:460px; margin:4rem auto; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:2.2rem 1.6rem; box-shadow:var(--shadow); }
.admin-gate-ic{ font-size:2.8rem; }
.admin-gate h1{ font-size:1.4rem; margin:.4rem 0; }
.admin-gate p{ color:var(--ink-soft); }
.admin-gate-actions{ margin:1.2rem 0 .6rem; }
.admin-gate-note{ font-size:.74rem; color:var(--ink-faint); }

/* abas */
.admin-tabs{ display:flex; gap:.4rem; border-bottom:2px solid var(--line); margin-bottom:1rem; flex-wrap:wrap; }
.admin-tab{ background:none; border:none; padding:.6rem .9rem; font-size:.92rem; font-weight:600; color:var(--ink-soft); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; }
.admin-tab.active{ color:var(--brand); border-bottom-color:var(--brand); }
.admin-count{ background:var(--brand); color:#fff; border-radius:999px; padding:0 .4rem; font-size:.72rem; margin-left:.2rem; }

/* estratégia + filtros */
.admin-strategy{ background:var(--good-soft); border:1px solid #b8e6ca; color:#0a6b3c; font-size:.84rem; padding:.7rem .9rem; border-radius:var(--r); margin-bottom:1rem; }
.qfilters{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.qfilter{ background:var(--card); border:1px solid var(--line); border-radius:999px; padding:.35rem .8rem; font-size:.82rem; cursor:pointer; color:var(--ink-soft); }
.qfilter.active{ background:var(--dark); color:#fff; border-color:var(--dark); }

/* lista de moderação */
.admin-empty{ text-align:center; color:var(--ink-faint); padding:2.5rem 1rem; }
.admin-modlist{ display:flex; flex-direction:column; gap:.8rem; }
.modcard{ display:flex; gap:.9rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:.8rem; box-shadow:var(--shadow); }
.modcard-img{ width:96px; height:96px; flex:none; border-radius:6px; overflow:hidden; background:#fafafa; display:flex; align-items:center; justify-content:center; }
.modcard-img img, .modcard-img svg{ width:100%; height:100%; object-fit:cover; }
.modcard-body{ flex:1; min-width:0; }
.modcard-top{ display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; }
.modcard-cat{ font-size:.74rem; color:var(--ink-faint); text-transform:capitalize; }
.modcard-price{ margin-left:auto; font-weight:700; color:var(--brand); }
.modcard-name{ font-weight:700; }
.modcard-desc{ font-size:.84rem; color:var(--ink-soft); margin:.15rem 0 .4rem; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.modcard-scan{ background:#fafafa; border:1px solid var(--line); border-radius:6px; padding:.4rem .6rem; font-size:.76rem; color:var(--ink-soft); }
.modcard-scan ul{ margin:.15rem 0 0; padding-left:1rem; }
.modcard-scan code{ background:#eee; padding:0 .3rem; border-radius:3px; }
.modcard-actions{ display:flex; gap:.4rem; margin-top:.5rem; flex-wrap:wrap; }
.mbtn{ border:none; border-radius:6px; padding:.4rem .8rem; font-size:.82rem; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block; }
.mbtn-ok{ background:var(--good); color:#fff; }
.mbtn-no{ background:#FDE7E7; color:#b3261e; }
.mbtn-hide{ background:#ECECEC; color:#555; }
.mbtn-view{ background:var(--dark); color:#fff; }

/* avaliações */
.admin-sub{ color:var(--ink-soft); font-size:.86rem; margin-bottom:.8rem; }
.admin-revlist{ display:flex; flex-direction:column; gap:.6rem; }
.admin-rev{ display:flex; gap:.8rem; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:.7rem .9rem; }
.admin-rev-main{ flex:1; min-width:0; }
.admin-rev-head{ display:flex; gap:.5rem; align-items:center; }
.admin-rev-stars{ color:var(--accent); }
.admin-rev-text{ margin:.2rem 0; }
.admin-rev-prod{ color:var(--ink-faint); }

/* dados */
.admin-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.6rem; margin-bottom:1.2rem; }
.admin-stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:.7rem .8rem; text-align:center; }
.admin-stat small{ display:block; color:var(--ink-soft); font-size:.74rem; margin-bottom:.2rem; }
.admin-stat b{ font-size:1.4rem; }
.admin-stat.ok b{ color:var(--good); }
.admin-stat.bad b{ color:#b3261e; }
.admin-stat.warn b{ color:#9a6b00; }
.admin-panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1rem; margin-bottom:1rem; }
.admin-panel h3{ font-size:1rem; margin-bottom:.7rem; }
.bar-list{ display:flex; flex-direction:column; gap:.35rem; }
.bar-row{ display:flex; align-items:center; gap:.6rem; font-size:.82rem; }
.bar-lb{ width:130px; flex:none; color:var(--ink-soft); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; height:10px; background:#f0f0f0; border-radius:999px; overflow:hidden; }
.bar-fill{ display:block; height:100%; background:var(--brand); border-radius:999px; }
.admin-feed{ display:flex; flex-direction:column; gap:.25rem; max-height:340px; overflow:auto; font-size:.8rem; }
.feed-row{ display:flex; gap:.5rem; align-items:center; padding:.25rem 0; border-bottom:1px solid #f2f2f2; }
.feed-row code{ background:#eee; padding:0 .3rem; border-radius:3px; }
.feed-row small{ color:var(--ink-faint); }
.feed-row span{ color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feed-by{ color:var(--brand); font-weight:600; }

@media (max-width:560px){
  .modcard{ flex-direction:column; }
  .modcard-img{ width:100%; height:150px; }
  .bar-lb{ width:90px; }
}

/* ============================================================
   COMPARTILHAR (loja/produto) + ajustes do painel vendedor
   ============================================================ */
/* grupo de botões do cabeçalho do vendedor (Editar / Compartilhar loja / Novo) */
.seller-head-actions{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.sh-btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem; }
.sh-btn .ic{ width:16px; height:16px; }
.sh-btn-primary .ic{ width:17px; height:17px; }

.share-card{ max-width:440px; }
.share-card h2{ font-size:1.25rem; margin-bottom:.2rem; }
.share-linkrow{ display:flex; gap:.4rem; margin:.9rem 0 .9rem; }
.share-link{ flex:1; min-width:0; font-size:.82rem; color:var(--ink-soft); background:#fafafa; }
.share-copy{ flex:none; white-space:nowrap; }

/* botões sociais personalizados (cor + ícone de cada rede) */
.share-socials{ display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; }
.share-social{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.65rem .5rem; border-radius:10px; font-weight:700; font-size:.9rem; color:#fff; text-decoration:none; border:none; transition:transform .1s, filter .15s, box-shadow .15s; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.share-social:hover{ filter:brightness(1.07); transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,.18); }
.share-social:active{ transform:translateY(0); }
.share-social .ss-ic{ display:inline-flex; }
.share-social .ss-ic svg{ width:20px; height:20px; display:block; }
.share-wa{ background:#25D366; }
.share-tg{ background:#229ED9; }
.share-xx{ background:#000000; }
.share-fb{ background:#1877F2; }
.share-note{ margin-top:1rem; font-size:.76rem; color:var(--ink-faint); line-height:1.4; background:#FFF6E0; border:1px solid #ffe4a3; padding:.5rem .7rem; border-radius:var(--r); }

@media (max-width:560px){
  .share-socials{ grid-template-columns:1fr 1fr; }
  .seller-head-actions{ width:100%; }
  .seller-head-actions .btn{ flex:1; }
}

/* ============================================================
   LOJA DO VENDEDOR — capa, logo, bio, gestão de anúncios
   ============================================================ */
.seller-cover{
  background:linear-gradient(120deg, var(--brand-soft), #fff 70%);
  border:1px solid var(--line); border-radius:var(--r);
  padding:1.1rem 1.2rem; margin-bottom:1rem;
  box-shadow:var(--shadow);
}
.seller-cover .seller-head{ margin:0; }
.sh-logo{
  width:76px; height:76px; flex:none; border-radius:16px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.sh-logo-img{ width:100%; height:100%; object-fit:cover; }
.sh-logo-letter{ font-size:2.2rem; font-weight:900; }
.sh-bio{ margin-top:.4rem; color:var(--ink-soft); font-size:.9rem; max-width:52ch; }
.sh-bio-empty{ color:var(--brand); cursor:pointer; font-weight:600; display:inline-block; }
.sh-bio-empty:hover{ text-decoration:underline; }

.seller-prod-headrow{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.8rem; }
.seller-prod-headrow h2{ margin:0; }

/* mais ações por card — deixa envolver bonito */
.seller-prod .sp-actions{ display:flex; flex-wrap:wrap; gap:.35rem; }
.sp-btn.sp-remove{ color:#b3261e; }
.sp-btn.sp-show{ color:var(--good); font-weight:700; }

/* card oculto/arquivado fica esmaecido na aba */
.mod-wrap-hidden{ opacity:.7; }
.mod-wrap-archived{ opacity:.6; }
.mod-hidden{ background:#ECECEC; color:#666; border:1px solid #dcdcdc; }
.mod-archived{ background:#E7EEF7; color:#33608f; border:1px solid #cadcf0; }

/* logo redondo/quadrado no formulário de loja */
.pf-logo .pf-photo-preview{ border-radius:16px; }
.pf-logo .sh-logo-letter{ color:var(--brand); }

/* modal de confirmação (exclusão recomendada) */
.confirm-card{ max-width:440px; }
.confirm-card h2{ font-size:1.2rem; margin-bottom:.3rem; }
.confirm-actions{ display:flex; flex-direction:column; gap:.5rem; margin-top:1.1rem; }
.confirm-actions .btn{ width:100%; }
.btn-danger{ background:#FDE7E7; color:#b3261e; border:1px solid #f3c0bd; }
.btn-danger:hover{ background:#fbd9d9; }

@media (max-width:560px){
  .seller-head{ flex-wrap:wrap; }
  .seller-head-actions{ width:100%; }
  .seller-head-actions .btn{ flex:1; }
}

/* piada no card de resultado da Caixa Misteriosa */
.res-joke{ margin-top:.5rem; font-size:.82rem; color:var(--ink-soft); font-style:italic; max-width:32ch; }

/* botão fantasma (cancelar sutil, ex.: folha de gestão do anúncio) */
.btn-ghost{ background:none; border:1px solid transparent; color:var(--ink-soft); }
.btn-ghost:hover{ background:#f4f4f4; color:var(--ink); }

/* ===========================================================
   POLIMENTO v2 — micro-interações vivas e saltitantes
   (springs/bounce/pop). Camada aditiva: refina o que já existe,
   sem mudar layout. Respeita prefers-reduced-motion (regra global).
   =========================================================== */
:root{
  --sp:       cubic-bezier(.34,1.56,.64,1);   /* overshoot — hovers */
  --sp-pop:   cubic-bezier(.18,1.5,.36,1);    /* pop mais forte */
  --sp-soft:  cubic-bezier(.22,1,.36,1);      /* expo-out suave */
}

/* ---- keyframes reutilizáveis ---- */
@keyframes pv-pop{ 0%{transform:scale(.9)} 55%{transform:scale(1.07)} 100%{transform:scale(1)} }
@keyframes pv-badgePop{ 0%{transform:scale(1)} 32%{transform:scale(1.55)} 62%{transform:scale(.92)} 100%{transform:scale(1)} }
@keyframes pv-wiggle{ 0%{transform:rotate(0)} 28%{transform:rotate(-9deg)} 60%{transform:rotate(6deg)} 100%{transform:rotate(0)} }
@keyframes pv-radioPop{ 0%{transform:scale(0)} 60%{transform:scale(1.25)} 100%{transform:scale(1)} }
@keyframes pv-itemIn{ from{opacity:0; transform:translateX(-14px);} }
@keyframes pv-attn{ 0%,100%{ box-shadow:0 3px 10px rgba(241,71,29,.28); } 50%{ box-shadow:0 6px 22px rgba(241,71,29,.5); } }

/* ---- botões: elevam no hover, afundam com squash no clique ---- */
.btn,.side-cta{
  transition:transform .3s var(--sp), box-shadow .22s ease, background .12s, filter .12s;
  will-change:transform;
}
.btn:hover,.side-cta:hover{ transform:translateY(-2px); }
.btn:active,.side-cta:active,.card-buy:active,.pay-regen:active{ transform:translateY(0) scale(.95); transition-duration:.09s; }
.btn-primary:hover,.side-cta:hover{ box-shadow:0 7px 18px rgba(241,71,29,.32); }
.btn-buy:hover{ box-shadow:0 7px 18px rgba(0,166,80,.3); }
.btn-big{ transition:transform .3s var(--sp), box-shadow .22s ease, background .12s, filter .12s; }

/* CTAs de jogo pedem atenção com uma respiração sutil no brilho */
#openBoxBtn:not(:disabled),#spinBtn:not(:disabled){ animation:pv-attn 2.6s ease-in-out infinite; }
#openBoxBtn:hover:not(:disabled),#spinBtn:hover:not(:disabled){ transform:translateY(-2px) scale(1.015); }

/* ---- cards do grid: lift com spring + zoom mais suave na imagem ---- */
.card{ transition:box-shadow .3s var(--sp-soft), transform .32s var(--sp); }
.card:hover{ transform:translateY(-5px); box-shadow:0 12px 26px rgba(0,0,0,.15); }
.card:active{ transform:translateY(-2px) scale(.99); transition-duration:.1s; }
.card-img svg,.card-img .p-photo{ transition:transform .45s var(--sp-soft); }
.card:hover .card-img svg,.card:hover .card-img .p-photo{ transform:scale(1.07); }
.card-buy{ transition:background .15s, transform .28s var(--sp), box-shadow .18s; }
.card-buy:hover{ box-shadow:0 4px 12px rgba(241,71,29,.22); }
/* entrada em cascata (por posição na fileira; reinicia a cada lote) */
.grid > .card{ animation:cardIn .42s var(--sp-soft) backwards; }
.grid > .card:nth-child(4n+1){ animation-delay:.02s; }
.grid > .card:nth-child(4n+2){ animation-delay:.07s; }
.grid > .card:nth-child(4n+3){ animation-delay:.12s; }
.grid > .card:nth-child(4n+4){ animation-delay:.17s; }

/* ---- chips de categoria ---- */
.cat-chip{ transition:background .18s, color .18s, border-color .18s, transform .24s var(--sp); }
.cat-chip:hover{ transform:translateY(-2px); }
.cat-chip:active{ transform:translateY(0) scale(.94); }
.cat-chip.is-active{ animation:pv-pop .32s var(--sp-pop); }

/* ---- fileira de gamificação: círculo salta e o ícone dá uma piscadela ---- */
.qi-circle{ transition:transform .32s var(--sp), box-shadow .2s; }
.quick-item:hover .qi-circle{ transform:translateY(-4px) scale(1.1); box-shadow:0 8px 18px rgba(0,0,0,.2); }
.quick-item:active .qi-circle{ transform:translateY(-1px) scale(1.02); transition-duration:.1s; }
.quick-item:hover .qi-circle .ic{ animation:pv-wiggle .55s var(--sp); }

/* ---- botões do header: leve salto no hover, encolhem no clique ---- */
.hd-btn{ transition:background .15s, transform .26s var(--sp); }
.hd-btn:hover{ transform:translateY(-1px) scale(1.06); }
.hd-btn:active{ transform:scale(.9); }
/* badge que "estoura" quando o valor muda (via JS: classe .badge-pop) */
.hd-badge.badge-pop{ animation:pv-badgePop .5s var(--sp-pop); }

/* ---- pulse (add-to-cart) mais saltitante ---- */
@keyframes pulseAnim{ 0%{transform:scale(1)} 24%{transform:scale(.9)} 54%{transform:scale(1.09)} 76%{transform:scale(.98)} 100%{transform:scale(1)} }

/* ---- timer do hero: segundos pulsam em vez de só piscar ---- */
#ftS{ animation:secPop 1s var(--sp) infinite; }
@keyframes secPop{ 0%{transform:scale(1.12)} 16%{transform:scale(1)} 100%{transform:scale(1)} }

/* ---- busca: anel suave ao focar ---- */
.search-wrap{ transition:box-shadow .2s ease; }
.search-wrap:focus-within{ box-shadow:0 0 0 3px rgba(255,255,255,.4); }

/* painel de busca ampliada da home (lojas / comunidades / pessoas / produtos) */
.search-extra{ margin:.2rem 0 1rem; display:flex; flex-direction:column; gap:.9rem; }
.sx-group h3{ font-size:.85rem; color:var(--ink-soft); margin:0 0 .5rem; font-weight:800; letter-spacing:.01em; }
.sx-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.sx-chip{ display:flex; flex-direction:column; gap:.1rem; padding:.5rem .8rem; background:var(--card); border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:border-color .15s, transform .15s var(--sp,ease); max-width:260px; }
a.sx-chip:hover{ border-color:var(--brand); transform:translateY(-1px); }
.sx-chip b{ font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sx-chip small{ font-size:.72rem; color:var(--ink-faint); }
.sx-chip-user{ cursor:default; }
.sx-empty{ color:var(--ink-faint); font-size:.9rem; padding:.4rem 0; }

/* ---- caixa misteriosa: leve balanço ocioso convida a abrir ---- */
.gift-box{ animation:pv-giftBob 3.2s ease-in-out infinite; }
@keyframes pv-giftBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }

/* ---- PDP: miniaturas e stepper ---- */
.pdp-thumb{ transition:border-color .15s, transform .26s var(--sp); }
.pdp-thumb:hover{ transform:translateY(-3px) scale(1.03); }
.pdp-thumb.is-active{ animation:pv-pop .32s var(--sp-pop); }
.pdp-stepper button{ transition:background .12s, transform .2s var(--sp); }
.pdp-stepper button:active{ transform:scale(.85); }

/* ---- carrinho: itens entram deslizando; lixeira gira no hover ---- */
.cart-item{ animation:pv-itemIn .38s var(--sp-soft) backwards; }
.ci-del{ transition:background .15s, color .15s, transform .28s var(--sp); }
.ci-del:hover{ transform:rotate(90deg) scale(1.12); color:var(--brand); }

/* ---- pagamento: método salta ao selecionar; radinho estoura ---- */
.pay-method{ transition:border-color .18s, box-shadow .18s, background .18s, transform .26s var(--sp); }
.pay-method:hover{ transform:translateY(-2px); }
.pay-method:active{ transform:translateY(0) scale(.985); transition-duration:.1s; }
.pay-method.is-selected{ animation:pv-pop .34s var(--sp-pop); }
.pay-method.is-selected .pm-radio::after{ animation:pv-radioPop .32s var(--sp-pop); }
.pf-copy{ transition:background .15s, transform .24s var(--sp); }
.pf-copy:active{ transform:scale(.85); }

/* ---- barra de navegação mobile: encolhe no toque, ícone estoura no ativo ---- */
.mb-btn{ transition:color .15s, transform .24s var(--sp); }
.mb-btn:active{ transform:scale(.88); }
.mb-btn.is-active .ic{ animation:pv-pop .42s var(--sp-pop); }

/* ---- barra de progresso da meta: preenche com spring ---- */
.goal-fill{ transition:width .7s var(--sp-soft); }

/* ---- botões sociais de compartilhar: salto ---- */
.share-social{ transition:transform .24s var(--sp), filter .15s, box-shadow .15s; }
.share-social:hover{ transform:translateY(-2px) scale(1.03); }
.share-social:active{ transform:translateY(0) scale(.96); }

/* ============================================================
   MÉTRICAS INDIVIDUAIS DO PRODUTO (painel do vendedor)
   ============================================================ */
.pm-back{ display:inline-flex; align-items:center; gap:.4rem; background:none; border:none; color:var(--ink-soft); font-weight:600; font-size:.9rem; cursor:pointer; padding:.4rem .2rem; margin-bottom:.6rem; }
.pm-back:hover{ color:var(--brand); }
.pm-back .ic{ width:18px; height:18px; }

.pm-head{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.pm-photo{ width:96px; height:96px; flex:none; border-radius:12px; overflow:hidden; background:#fafafa; border:1px solid var(--line); }
.pm-photo img, .pm-photo svg{ width:100%; height:100%; object-fit:cover; display:block; }
.pm-id{ flex:1; min-width:180px; }
.pm-id h1{ font-size:1.35rem; margin:.2rem 0; }
.pm-priceline{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.pm-price{ font-size:1.15rem; font-weight:800; color:var(--brand); }
.pm-cat{ color:var(--ink-faint); font-size:.85rem; text-transform:capitalize; }
.pm-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

.pm-panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.1rem; margin-top:1rem; box-shadow:var(--shadow); }
.pm-panel h3{ font-size:1rem; margin-bottom:.8rem; display:flex; align-items:center; gap:.5rem; }
.pm-revcount{ background:var(--brand-soft); color:var(--brand); border-radius:999px; padding:0 .5rem; font-size:.78rem; font-weight:700; }
.pm-conv{ margin-top:.7rem; font-size:.85rem; color:var(--ink-soft); }
/* cores do funil */
.bar-fill.bar-views{ background:var(--rar-rare); }
.bar-fill.bar-carts{ background:var(--accent); }
.bar-fill.bar-sales{ background:var(--good); }

.pm-revs{ display:flex; flex-direction:column; gap:.6rem; }
.pm-rev{ border:1px solid var(--line); border-radius:8px; padding:.6rem .8rem; background:#fafafa; }
.pm-rev-top{ display:flex; align-items:center; gap:.5rem; }
.pm-rev-stars{ color:var(--accent); letter-spacing:1px; }
.pm-rev p{ margin-top:.2rem; font-size:.88rem; color:var(--ink-soft); }
.pm-empty{ color:var(--ink-faint); font-style:italic; font-size:.9rem; }

@media (max-width:560px){
  .pm-actions{ width:100%; }
  .pm-actions .sh-btn{ flex:1; }
}

/* ============================================================
   RANK dos mais vendidos + detalhe da coleção
   ============================================================ */
.qi-rank{ background:linear-gradient(135deg,#B98CFF,#8E44AD); }

.rank-container{ padding-top:1.1rem; padding-bottom:3rem; }
.rank-wrapper{ max-width:680px; margin:0 auto; }
.rank-wrapper > h2{ font-size:1.5rem; }
.rank-wrapper .qfilters{ margin:1rem 0; }
.rank-list{ display:flex; flex-direction:column; gap:.5rem; }
.rank-row{ display:flex; align-items:center; gap:.8rem; padding:.6rem .8rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r); text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:transform .18s var(--sp,ease), box-shadow .18s; }
.rank-row:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.rank-top{ border-color:#ffd9a3; background:linear-gradient(90deg,#FFFBF0,#fff 60%); }
.rank-pos{ flex:none; width:38px; text-align:center; font-weight:800; font-size:1.05rem; color:var(--ink-soft); }
.rank-top .rank-pos{ font-size:1.35rem; }
.rank-thumb{ flex:none; width:52px; height:52px; border-radius:8px; overflow:hidden; background:#fafafa; border:1px solid var(--line); }
.rank-thumb img, .rank-thumb svg{ width:100%; height:100%; object-fit:cover; display:block; }
.rank-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.rank-name{ font-weight:600; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-sub{ font-size:.74rem; color:var(--ink-faint); display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.rank-shop{ color:var(--brand); font-weight:600; }
.rank-sales{ flex:none; text-align:right; display:flex; flex-direction:column; }
.rank-sales b{ font-size:1.1rem; color:var(--good); }
.rank-sales small{ font-size:.66rem; color:var(--ink-faint); }

/* ================= COMUNIDADE + LOJA ================= */
.community-container{ max-width:720px; margin:0 auto; padding-top:1.1rem; padding-bottom:3rem; }
.community-hero h1{ font-size:1.7rem; }
.community-sub{ color:var(--ink-soft); font-size:.9rem; line-height:1.45; margin:.4rem 0 1rem; }
.community-search{ position:relative; margin-bottom:1rem; }
.community-search .ic{ position:absolute; left:.8rem; top:50%; transform:translateY(-50%); width:1.15rem; height:1.15rem; fill:none; stroke:var(--ink-faint); stroke-width:2; }
.community-search input{ width:100%; padding:.7rem .9rem .7rem 2.5rem; border:1px solid var(--line); border-radius:999px; font-size:.95rem; background:var(--card); color:var(--ink); }
.community-search input:focus{ outline:none; border-color:var(--brand); }
.community-tabs{ margin-bottom:1rem; }
.community-content{ display:flex; flex-direction:column; gap:.55rem; }

/* linha de loja no ranking */
.store-row .store-thumbs{ flex:none; display:flex; }
.store-mini{ width:34px; height:34px; border-radius:7px; overflow:hidden; border:1px solid var(--line); background:#fafafa; margin-left:-10px; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.store-mini:first-child{ margin-left:0; }
.store-mini img, .store-mini svg{ width:100%; height:100%; object-fit:cover; display:block; }
.store-stats{ display:flex; gap:.6rem; }
.rank-row.rank-top .rank-pos{ color:var(--brand); font-size:1.2rem; }

/* estado vazio / competição */
.community-empty{ text-align:center; padding:2.4rem 1rem; color:var(--ink-soft); display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.ce-badge{ font-size:2.4rem; }
.community-empty p{ max-width:340px; line-height:1.45; }
/* CTA dos estados vazios (a base .btn não tem padding/display; sem isto o link fica "cru") */
.community-empty .btn{ display:inline-block; padding:.6rem 1.3rem; text-decoration:none; margin-top:.3rem; cursor:pointer; line-height:1.2; }

/* ---- página da loja (store.html) ---- */
.store-container{ max-width:720px; margin:0 auto; padding-top:1rem; padding-bottom:3rem; }
.store-back{ display:inline-block; color:var(--ink-soft); text-decoration:none; font-size:.85rem; margin-bottom:.8rem; }
.store-back:hover{ color:var(--brand); }
.store-profile{ display:flex; align-items:center; gap:1rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1rem; box-shadow:var(--shadow); }
.store-avatar{ flex:none; width:64px; height:64px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:800; }
.store-headinfo h1{ font-size:1.4rem; margin:.15rem 0; }
.store-badge{ display:inline-block; font-size:.6rem; font-weight:800; letter-spacing:.04em; background:#FFE082; color:#8a6100; padding:.15rem .45rem; border-radius:4px; }
.store-rankline{ font-size:.82rem; color:var(--ink-soft); font-weight:600; }
.store-followrow{ display:flex; align-items:center; gap:.7rem; margin-top:.5rem; flex-wrap:wrap; }
.store-followers{ font-size:.82rem; color:var(--ink-soft); }
.store-follow{ padding:.32rem 1.1rem; font-size:.85rem; }

/* rede social: publicações da loja */
.store-compose{ display:flex; flex-direction:column; gap:.45rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:.7rem .8rem; box-shadow:var(--shadow); margin-bottom:.9rem; }
.sp-prod{ font:inherit; } .sp-text{ resize:vertical; min-height:52px; font:inherit; } .sp-publish{ align-self:flex-end; padding:.35rem 1.1rem; }
.store-posts{ display:flex; flex-direction:column; gap:.8rem; margin-bottom:1.4rem; }
.sp-post{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:.8rem .9rem; box-shadow:var(--shadow); }
.sp-head{ display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--ink-soft); margin-bottom:.5rem; }
.sp-who{ font-weight:700; color:var(--ink); } .sp-when{ flex:1; }
.sp-del{ flex:none; width:22px; height:22px; border:none; border-radius:50%; background:var(--line); color:var(--ink-soft); font-size:1rem; line-height:1; cursor:pointer; }
.sp-del:hover{ background:var(--danger,#d33); color:#fff; }
.sp-prodcard{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:.4rem .5rem; margin-bottom:.55rem; }
.sp-prodcard:hover{ border-color:var(--brand); }
.sp-thumb{ flex:none; width:48px; height:48px; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--card); }
.sp-thumb img, .sp-thumb svg{ width:100%; height:100%; object-fit:cover; }
.sp-prodinfo{ display:flex; flex-direction:column; min-width:0; }
.sp-prodname{ font-weight:600; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-prodprice{ font-size:.82rem; color:var(--brand); font-weight:700; }
.sp-prodgone{ opacity:.6; font-size:.82rem; }
.sp-body{ margin:0 0 .55rem; font-size:.94rem; white-space:pre-wrap; word-break:break-word; }
.sp-actions{ display:flex; align-items:center; gap:1rem; border-top:1px solid var(--line); padding-top:.5rem; }
.sp-like{ display:inline-flex; align-items:center; gap:.3rem; background:none; border:none; cursor:pointer; font-size:.95rem; color:var(--ink-soft); padding:.1rem .2rem; }
.sp-like-on{ color:var(--danger,#e0245e); }
.sp-cinfo{ font-size:.85rem; color:var(--ink-soft); }
.sp-comments{ margin-top:.6rem; display:flex; flex-direction:column; gap:.35rem; }
.sp-comment{ display:flex; align-items:baseline; gap:.4rem; font-size:.88rem; }
.sp-cwho{ font-weight:700; flex:none; }
.sp-ctext{ flex:1; word-break:break-word; }
.sp-cdel{ flex:none; border:none; background:none; color:var(--ink-faint); cursor:pointer; font-size:.95rem; line-height:1; }
.sp-cdel:hover{ color:var(--danger,#d33); }
.sp-cempty, .sp-clogin{ font-size:.8rem; color:var(--ink-faint); margin:.1rem 0; }
.sp-cbox{ display:flex; gap:.4rem; margin-top:.3rem; }
.sp-cinput{ flex:1; }
.sp-csend{ padding:.3rem .8rem; font-size:.82rem; }
.store-statgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin:.9rem 0 1.4rem; }
.store-stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:.6rem .3rem; text-align:center; }
.store-stat .ss-ic{ font-size:1rem; }
.store-stat b{ display:block; font-size:1.05rem; margin-top:.1rem; }
.store-stat small{ font-size:.62rem; color:var(--ink-faint); }
.store-sectitle{ font-size:1.05rem; margin:0 0 .7rem; }
.store-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; }
.store-prod{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:transform .18s var(--sp,ease), box-shadow .18s; display:flex; flex-direction:column; }
.store-prod:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.sc-thumb{ position:relative; aspect-ratio:1/1; background:#fafafa; }
.sc-thumb > img, .sc-thumb > .p-photo{ width:100%; height:100%; object-fit:cover; display:block; }
.sc-off{ position:absolute; top:.4rem; left:.4rem; background:var(--brand); color:#fff; font-size:.66rem; font-weight:800; padding:.1rem .35rem; border-radius:4px; }
.sc-name{ font-size:.82rem; font-weight:600; padding:.5rem .55rem 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-price{ font-size:1rem; font-weight:800; color:var(--good); padding:.1rem .55rem 0; }
.sc-meta{ font-size:.7rem; color:var(--ink-faint); padding:.15rem .55rem .6rem; }

@media (max-width:560px){
  .store-statgrid{ grid-template-columns:repeat(2,1fr); }
  .store-grid{ grid-template-columns:repeat(2,1fr); }
}

/* detalhe do item da coleção */
.col-detail-card{ max-width:400px; text-align:center; }
.cd-photo{ width:170px; height:170px; margin:0 auto .7rem; border-radius:14px; overflow:hidden; background:#fafafa; border:1px solid var(--line); }
.cd-photo > img, .cd-photo > svg{ width:100%; height:100%; object-fit:cover; display:block; }
.col-detail-card h2{ font-size:1.25rem; margin:.4rem 0 .5rem; }
.col-detail-card .rar{ display:inline-block; }
.cd-desc{ color:var(--ink-soft); font-size:.9rem; line-height:1.4; margin-bottom:.8rem; }
.cd-meta{ text-align:left; background:#fafafa; border:1px solid var(--line); border-radius:var(--r); padding:.6rem .8rem; font-size:.82rem; color:var(--ink-soft); display:flex; flex-direction:column; gap:.3rem; }
.cd-when{ color:var(--ink-faint); }
.cd-link{ margin-top:.9rem; display:inline-block; width:100%; }

/* ============================================================
   ADMIN: usuários, configurações, denúncias
   ============================================================ */
.admin-userlist{ display:flex; flex-direction:column; gap:.5rem; }
.admin-user{ display:flex; align-items:center; gap:.8rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:.6rem .8rem; }
.admin-user.is-banned{ opacity:.6; border-color:#f3c0bd; }
.au-avatar{ width:38px; height:38px; flex:none; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.au-info{ flex:1; min-width:0; }
.au-name{ font-weight:600; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.au-sub{ font-size:.76rem; color:var(--ink-faint); }
.au-tag{ font-size:.66rem; font-weight:700; padding:.05rem .4rem; border-radius:999px; background:#eee; color:#666; }
.au-tag.au-admin{ background:var(--brand-soft); color:var(--brand); }
.au-tag.au-ban{ background:#FDE7E7; color:#b3261e; }
.au-tag.au-verified{ background:#E3F0FF; color:#1877F2; }
.au-handle{ color:var(--ink-faint); font-weight:400; font-size:.85rem; }
/* botão de EXCLUIR na Gestão — vermelho de perigo, distinto dos demais */
.mbtn-del{ background:#fff; color:#b3261e; border:1px solid #f3c0bd !important; }
.mbtn-del:hover{ background:#FDE7E7; }
/* sub-abas da Gestão (Usuários/Lojas/Comunidades) */
.mg-subtabs{ margin-bottom:1rem; }

/* selo de verificado (loja/vendedor) — check num distintivo azul */
.verified-badge{ display:inline-flex; vertical-align:middle; width:1.05em; height:1.05em; margin-left:.28em; color:#1877F2; position:relative; top:-1px; }
.verified-badge svg{ width:100%; height:100%; display:block; }
.rank-name .verified-badge, .store-headinfo h1 .verified-badge{ width:1em; height:1em; }
.store-headinfo h1 .verified-badge{ color:#1877F2; }
.au-actions{ display:flex; gap:.35rem; flex:none; }

.admin-flags{ display:flex; flex-direction:column; gap:.55rem; }
.admin-flag{ display:flex; align-items:center; gap:.6rem; cursor:pointer; font-size:.92rem; }
.admin-flag input{ width:18px; height:18px; accent-color:var(--brand); }
.admin-fields{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.admin-field{ display:flex; flex-direction:column; gap:.3rem; font-size:.82rem; color:var(--ink-soft); }
.admin-field .auth-input{ font-size:.9rem; }
.admin-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.7rem; }
.admin-panel-head h3{ margin:0; }
#setSave{ width:100%; margin-top:.4rem; }

/* modal e links de denúncia */
.report-card{ max-width:400px; }
.report-reasons{ display:flex; flex-direction:column; gap:.5rem; margin-top:1rem; }
.report-reasons .btn{ width:100%; }
.pdp-report, .rev-report{ background:none; border:none; color:var(--ink-faint); font-size:.76rem; cursor:pointer; padding:.2rem; text-decoration:underline; }
.pdp-report{ display:block; margin-top:.6rem; }
.pdp-report:hover, .rev-report:hover{ color:#b3261e; }

@media (max-width:560px){
  .admin-fields{ grid-template-columns:1fr; }
  .au-actions{ flex-direction:column; }
}

/* ===== Refinamento mobile: alvos de toque confortáveis (mín. ~44px) =====
   Só no celular (≤560px). No dedo, os controles do header/rodapé eram pequenos
   demais (chips ~38px, idioma ~27px, links legais ~14px). Aqui damos área de
   toque sem inflar o visual — o conteúdo continua do mesmo tamanho, centralizado. */
@media (max-width:560px){
  .hd-btn{ min-height:44px; justify-content:center; }
  .lang-toggle{ min-height:44px; }
  .honesty-link{ display:inline-block; padding:.25rem .1rem; }
  .legal-links a{ display:inline-block; padding:.4rem .15rem; }
  /* ícones de ação do card do vendedor (gráfico/editar/compartilhar/kebab) */
  .sp-ico, .sp-actions button{ min-width:40px; min-height:40px; }
}

/* ================= COMUNIDADES (coletivos) + ONBOARDING ================= */
.name-hint{ font-size:.78rem; min-height:1.1em; margin:-.2rem 0 .2rem; }
.name-hint.is-taken{ color:#b3261e; }
.name-hint.is-free{ color:var(--good); }

/* modal: criar comunidade */
.cc-card{ max-width:400px; }
.cc-photo{ display:flex; flex-direction:column; align-items:center; gap:.4rem; cursor:pointer; margin:.4rem 0 .8rem; }
.cc-photo-prev{ width:88px; height:88px; border-radius:50%; background:var(--brand-soft) center/cover no-repeat; color:var(--brand); border:2px dashed var(--brand); display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:300; overflow:hidden; }
.cc-photo-txt{ font-size:.75rem; color:var(--ink-faint); }

/* modal: onboarding */
.ob-card{ max-width:420px; text-align:center; }
.ob-steps{ display:flex; justify-content:center; gap:.4rem; margin-bottom:.9rem; }
.ob-dot{ width:26px; height:5px; border-radius:999px; background:var(--line); transition:background .2s; }
.ob-dot.on{ background:var(--brand); } .ob-dot.done{ background:var(--good); }
.ob-emoji{ font-size:2.6rem; line-height:1; }
.ob-card h2{ font-size:1.35rem; margin:.4rem 0 .3rem; }
.ob-atwrap{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:.3rem 0 .1rem; }
.ob-atwrap:focus-within{ border-color:var(--brand); }
.ob-at{ padding:0 .5rem 0 .8rem; font-weight:800; color:var(--ink-faint); }
.ob-atinput{ border:none !important; flex:1; }
.ob-comlist{ display:flex; flex-direction:column; gap:.45rem; max-height:230px; overflow-y:auto; margin:.5rem 0 .7rem; }
.ob-com-row{ display:flex; align-items:center; gap:.6rem; text-align:left; }
.ob-com-ph{ flex:none; width:40px; height:40px; border-radius:50%; background:var(--brand-soft) center/cover no-repeat; color:var(--brand); display:flex; align-items:center; justify-content:center; font-weight:800; }
.ob-com-info{ flex:1; min-width:0; } .ob-com-info b{ display:block; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ob-com-info small{ font-size:.72rem; color:var(--ink-faint); }
.ob-empty{ color:var(--ink-faint); font-size:.85rem; padding:.8rem 0; }
.ob-create{ width:100%; margin-bottom:.6rem; }
.ob-skip{ display:block; width:100%; background:none; border:none; color:var(--ink-faint); font-size:.82rem; margin-top:.6rem; cursor:pointer; text-decoration:underline; }

/* aba comunidades: grade de cards */
.comm-create-btn{ align-self:flex-start; width:auto; display:inline-flex; align-items:center; gap:.4rem; padding:.75rem 1.35rem; font-size:.92rem; border-radius:8px; margin-bottom:.6rem; }
.comm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; }
.comm-card{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem; padding:1rem .6rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r); text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:transform .18s var(--sp,ease), box-shadow .18s; }
.comm-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
/* ranking: chips de ordenação + medalha/posição no card */
.comm-sort{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
.comm-rank{ position:absolute; top:.4rem; left:.5rem; font-size:.78rem; font-weight:800; color:var(--ink-soft); }
.comm-rank-top{ font-size:1.1rem; }
.comm-photo{ width:64px; height:64px; border-radius:50%; background:var(--brand-soft) center/cover no-repeat; color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:1.7rem; font-weight:800; }
.comm-name{ font-weight:700; font-size:.9rem; line-height:1.2; }
.comm-flag{ font-size:1rem; } .comm-mine{ font-size:.62rem; background:var(--good); color:#fff; padding:.05rem .35rem; border-radius:999px; vertical-align:middle; }
.comm-meta{ font-size:.74rem; color:var(--ink-faint); }

/* página de uma comunidade */
.cp-head{ display:flex; align-items:center; gap:1rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1rem; box-shadow:var(--shadow); margin-bottom:1rem; }
.cp-photo{ flex:none; width:80px; height:80px; border-radius:50%; background:var(--brand-soft) center/cover no-repeat; color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:800; }
.cp-info{ flex:1; min-width:0; } .cp-info h1{ font-size:1.35rem; margin:0 0 .2rem; word-break:break-word; }
.cp-meta{ display:flex; flex-wrap:wrap; gap:.7rem; font-size:.82rem; color:var(--ink-soft); margin-bottom:.6rem; }
.cp-join{ padding:.4rem 1.2rem; }

/* container do botão real do Google (GIS) no modal de login */
.gsi-host{ display:flex; justify-content:center; min-height:0; margin-bottom:.2rem; }
.gsi-host:empty{ display:none; }

/* membros da comunidade */
.cp-members{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.cp-member{ display:flex; align-items:center; gap:.5rem; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:.3rem .8rem .3rem .3rem; box-shadow:var(--shadow); }
.cp-member-ghost{ opacity:.6; }
.cp-mavatar{ flex:none; width:32px; height:32px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:800; }
.cp-mname{ font-size:.85rem; font-weight:600; display:flex; flex-direction:column; line-height:1.15; }
.cp-msub{ font-size:.72rem; font-weight:400; color:var(--ink-soft); }
.cp-mtag{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; padding:.12rem .45rem; border-radius:999px; }
.cp-mtag-founder{ background:var(--brand-soft); color:var(--brand); }
.cp-mtag-mod{ background:#eadcff; color:#7c3aed; }
.cp-mtag-me{ background:var(--line); color:var(--ink-soft); }
.cp-macts{ display:flex; gap:.3rem; flex-wrap:wrap; margin-left:.2rem; }
.cp-mact{ font-size:.68rem; font-weight:600; padding:.15rem .5rem; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); cursor:pointer; }
.cp-mact:hover{ background:var(--bg); }
.cp-mact-danger{ color:var(--danger,#d33); border-color:var(--danger,#d33); }

/* ações do cabeçalho + bio */
.cp-actions{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.cp-bio{ font-size:.9rem; color:var(--ink-soft); margin:0 0 .6rem; white-space:pre-wrap; word-break:break-word; }
.cc-bio{ resize:vertical; min-height:64px; font:inherit; }

/* meta coletiva */
.cp-goal{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1rem; box-shadow:var(--shadow); margin-bottom:1rem; }
.cp-goal-top{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.5rem; flex-wrap:wrap; }
.cp-goal-title{ font-weight:700; } .cp-goal-num{ font-size:.85rem; color:var(--ink-soft); }
.cp-goal-bar{ height:10px; border-radius:999px; background:var(--line); overflow:hidden; }
.cp-goal-fill{ display:block; height:100%; background:linear-gradient(90deg,var(--brand),#22c55e); transition:width .4s var(--sp,ease); }
.cp-goal-foot{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-top:.55rem; flex-wrap:wrap; }
.cp-goal-hint{ font-size:.78rem; color:var(--ink-soft); }
.cp-goal-claim{ padding:.35rem 1rem; }

/* mural */
.cp-wall-compose{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:.8rem; }
.cp-wall-input{ width:100%; resize:vertical; min-height:52px; padding:.6rem .7rem; border:1px solid var(--line); border-radius:var(--r); background:var(--card); color:var(--ink); font:inherit; }
.cp-wall-post{ align-self:flex-end; padding:.35rem 1.1rem; }
.cp-wall-join{ font-size:.85rem; color:var(--ink-soft); margin:0 0 .8rem; }
.cp-wall-list{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.cp-wall-item{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:.6rem .8rem; box-shadow:var(--shadow); }
.cp-wall-h{ display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--ink-soft); margin-bottom:.25rem; }
.cp-wall-who{ font-weight:700; color:var(--ink); }
.cp-wall-when{ flex:1; }
.cp-wall-del{ flex:none; width:22px; height:22px; border:none; border-radius:50%; background:var(--line); color:var(--ink-soft); font-size:1rem; line-height:1; cursor:pointer; }
.cp-wall-del:hover{ background:var(--danger,#d33); color:#fff; }
.cp-wall-text{ margin:0; font-size:.92rem; white-space:pre-wrap; word-break:break-word; }

@media (max-width:560px){
  .comm-grid{ grid-template-columns:repeat(2,1fr); }
  .cp-head{ flex-direction:column; text-align:center; }
}

/* ===========================================================
   POLIMENTO v3 — botões + toque + acessibilidade + mobile
   Camada final (aditiva). Unifica o feedback dos botões, adiciona
   anel de foco por teclado, remove atrasos/flashes de toque e dá
   retorno tátil às novas páginas (rank, loja, comunidade).
   =========================================================== */

/* ---- toque limpo: sem flash cinza nem atraso de 300ms ---- */
.btn, .hd-btn, .mb-btn, .cat-chip, .card-buy, .side-cta, .pay-method,
.rank-row, .comm-card, .store-prod, .cp-join, .comm-create-btn, .pf-copy,
a.logo, .qi-link, .quick-item{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ---- feedback de clique unificado e AUTORITATIVO p/ todos os botões ---- */
.btn{ transition:transform .28s var(--sp), box-shadow .2s ease, filter .12s, background .12s; }
.btn:hover:not([disabled]){ transform:translateY(-2px); }
.btn:active:not([disabled]){ transform:translateY(0) scale(.95); transition-duration:.08s; }
/* variantes de sombra no hover, por cor */
.btn-primary:hover:not([disabled]){ box-shadow:0 7px 18px rgba(241,71,29,.32); }
.btn-buy:hover:not([disabled]){ box-shadow:0 7px 18px rgba(0,166,80,.3); }
.btn-outline:hover:not([disabled]){ box-shadow:0 5px 14px rgba(241,71,29,.16); }
.btn-danger:hover:not([disabled]){ box-shadow:0 5px 14px rgba(179,38,30,.2); }

/* ---- desabilitado: sem hover/lift, cursor claro ---- */
.btn[disabled], .btn:disabled{ transform:none !important; box-shadow:none !important; filter:saturate(.6); }

/* ---- anel de foco por teclado (a11y) — só no foco por teclado, não no clique ---- */
.btn:focus-visible, .hd-btn:focus-visible, .mb-btn:focus-visible,
.cat-chip:focus-visible, .card-buy:focus-visible, .pay-method:focus-visible,
.rank-row:focus-visible, .comm-card:focus-visible, .store-prod:focus-visible,
.pf-copy:focus-visible, .lang-toggle:focus-visible, .community-search input:focus-visible{
  outline:2.5px solid var(--brand);
  outline-offset:2px;
  border-radius:6px;
}

/* ---- ripple no clique (preenche do ponto tocado) — via .pv-ripple em shared.js ---- */
.btn{ position:relative; overflow:hidden; }
.pv-ripple{
  position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
  background:currentColor; opacity:.28; animation:pv-ripple .55s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes pv-ripple{ to{ transform:scale(2.6); opacity:0; } }

/* ---- retorno tátil das novas páginas (sem hover no dedo) ---- */
.rank-row:active, .comm-card:active, .store-prod:active, .cp-join:active{ transform:scale(.98); }
.mb-btn:active{ transform:scale(.9); }
.hd-btn:active:not([disabled]){ transform:scale(.9); }

/* CTA "entrar na comunidade": leve salto no hover como os demais CTAs */
.cp-join{ transition:background .15s, transform .24s var(--sp), box-shadow .18s; }
.cp-join:hover{ transform:translateY(-2px); box-shadow:0 6px 15px rgba(241,71,29,.28); }

/* ============ ajustes finos de mobile ============ */
/* No celular, buscas e inputs a 16px evitam o zoom automático do iOS ao focar. */
@media (max-width:640px){
  .community-search input, .auth-input, input[type="search"], input[type="text"]{ font-size:16px; }
  /* linhas de rank/loja: alvos e respiro confortáveis no dedo */
  .rank-row{ padding:.7rem .8rem; }
  .rank-thumb{ width:48px; height:48px; }
  /* grid da loja/comunidade: 2 colunas com respiro */
  .store-grid, .comm-grid{ gap:.55rem; }
  /* botões de ação em modais ocupam a largura (mais fáceis de acertar) */
  .report-reasons .btn, .confirm-actions .btn{ min-height:46px; }
  /* barra mobile: rótulos não quebram e ícones bem alinhados */
  .mb-btn{ min-height:52px; }
}

/* faixa intermediária (tablet): grids de coleção/loja respiram melhor */
@media (min-width:641px) and (max-width:900px){
  .store-grid{ grid-template-columns:repeat(3,1fr); }
}

/* reduced-motion: desliga ripple e springs extras (a regra global já cobre durações) */
@media (prefers-reduced-motion:reduce){
  .pv-ripple{ display:none; }
}

/* ================= PAINEL DO USUÁRIO (account.html) ================= */
.account-container{ max-width:640px; margin:0 auto; padding-top:1.1rem; padding-bottom:3rem; }
.acct-title{ font-size:1.7rem; margin-bottom:1rem; }
.acct-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem; box-shadow:var(--shadow); margin-bottom:1rem; }
.acct-card h2{ font-size:1.1rem; margin:0 0 .3rem; display:flex; align-items:center; gap:.5rem; }
.acct-sub{ color:var(--ink-soft); font-size:.86rem; margin:0 0 .8rem; line-height:1.4; }
.acct-count{ font-size:.72rem; background:var(--brand-soft); color:var(--brand); border-radius:999px; padding:.05rem .5rem; font-weight:700; }

/* perfil */
.acct-profile{ display:flex; align-items:center; gap:1rem; }
.acct-avatar{ flex:none; width:64px; height:64px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:800; }
.acct-pinfo{ min-width:0; }
.acct-pname{ font-size:1.2rem; font-weight:800; display:flex; align-items:center; gap:.3rem; }
.acct-phandle{ color:var(--brand); font-weight:600; font-size:.92rem; }
.acct-nouser{ color:var(--ink-faint); font-weight:400; font-style:italic; }
.acct-pmeta{ font-size:.78rem; color:var(--ink-faint); margin-top:.15rem; }

/* username */
.acct-atwrap{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:.2rem; }
.acct-atwrap:focus-within{ border-color:var(--brand); }
.acct-at{ padding:0 .5rem 0 .8rem; font-weight:800; color:var(--ink-faint); }
.acct-atinput{ border:none !important; flex:1; }
.acct-save{ margin-top:.5rem; padding:.55rem 1.4rem; }
.acct-inline-btn{ display:inline-block; padding:.6rem 1.3rem; margin-top:.3rem; }

/* comunidades */
.acct-comlist{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:.7rem; }
.acct-com-row{ display:flex; align-items:center; gap:.6rem; }
.acct-com-link{ flex:1; display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); min-width:0; }
.acct-com-ph{ flex:none; width:42px; height:42px; border-radius:50%; background:var(--brand-soft) center/cover no-repeat; color:var(--brand); display:flex; align-items:center; justify-content:center; font-weight:800; }
.acct-com-info{ min-width:0; } .acct-com-info b{ display:block; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-com-info small{ font-size:.74rem; color:var(--ink-faint); }
.acct-empty{ color:var(--ink-faint); font-size:.86rem; padding:.5rem 0; }

/* idioma */
.acct-langrow{ display:flex; gap:.5rem; flex-wrap:wrap; }
.acct-langrow .btn{ padding:.5rem 1rem; }

/* zona de perigo */
.acct-danger{ border-color:#f3c0bd; }
.acct-danger h2{ color:#b3261e; }
.acct-dangerrow{ display:flex; gap:.6rem; flex-wrap:wrap; }
.acct-dangerrow .btn{ padding:.6rem 1.3rem; }

/* gate (não logado) */
.acct-gate{ text-align:center; padding:3rem 1rem; display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.acct-gate-emoji{ font-size:2.6rem; }
.acct-gate p{ color:var(--ink-soft); max-width:340px; }

@media (max-width:560px){
  .acct-profile{ flex-direction:column; text-align:center; }
  .acct-dangerrow .btn, .acct-langrow .btn{ flex:1; }
}

/* ================= ECONOMIA: explorar-para-ganhar + impostos ================= */
.qi-circle.qi-explore{ background:#e8f5e9; color:#00A650; }
.acct-cur{ font-size:.7rem; background:var(--brand-soft); color:var(--brand); border-radius:999px; padding:.05rem .5rem; font-weight:700; vertical-align:middle; }

/* HUD fixo do explorar */
.explore-hud{ position:sticky; top:0; z-index:20; background:var(--card); border-bottom:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.05); }
.hud-inner{ max-width:640px; margin:0 auto; padding:.6rem 1rem; }
.hud-top{ display:flex; justify-content:space-between; align-items:baseline; }
.hud-title{ font-weight:800; font-size:.95rem; }
.hud-earned{ font-size:.85rem; color:var(--ink-soft); } .hud-earned b{ color:var(--good); }
.hud-bar{ height:6px; background:var(--line); border-radius:999px; margin:.4rem 0 .3rem; overflow:hidden; }
.hud-fill{ display:block; height:100%; background:var(--good); border-radius:999px; transition:width .4s var(--sp,ease); }
.hud-sub{ font-size:.74rem; color:var(--ink-faint); }
.hud-login{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.hud-login span{ font-size:.85rem; color:var(--ink-soft); } .hud-login .btn{ padding:.4rem 1rem; white-space:nowrap; }

/* feed de exploração */
.explore-container{ max-width:640px; margin:0 auto; padding-top:1rem; padding-bottom:3rem; }
.explore-feed{ display:flex; flex-direction:column; gap:.7rem; }
.exp-card{ position:relative; display:flex; gap:.9rem; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:.7rem; text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:transform .18s var(--sp,ease), box-shadow .18s; overflow:hidden; }
.exp-card:active{ transform:scale(.99); }
.exp-thumb{ flex:none; width:88px; height:88px; border-radius:10px; overflow:hidden; background:#fafafa; border:1px solid var(--line); }
.exp-thumb img, .exp-thumb svg{ width:100%; height:100%; object-fit:cover; display:block; }
.exp-body{ flex:1; min-width:0; }
.exp-name{ font-weight:600; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exp-shop{ display:block; font-size:.76rem; color:var(--brand); font-weight:600; }
.exp-price{ font-size:1.1rem; font-weight:800; color:var(--good); margin-top:.15rem; }
.exp-earn{ position:absolute; right:.8rem; top:50%; background:var(--good); color:#fff; font-weight:800; font-size:.9rem; padding:.2rem .6rem; border-radius:999px; box-shadow:0 3px 10px rgba(0,166,80,.35); animation:exp-pop 1.4s ease forwards; }
@keyframes exp-pop{ 0%{ transform:translateY(-50%) scale(.5); opacity:0; } 15%{ transform:translateY(-50%) scale(1.1); opacity:1; } 30%{ transform:translateY(-50%) scale(1); } 70%{ transform:translate(0,-50%) scale(1); opacity:1; } 100%{ transform:translate(0,-160%) scale(.9); opacity:0; } }
.explore-end{ text-align:center; padding:1.6rem 1rem; color:var(--ink-faint); display:flex; flex-direction:column; align-items:center; gap:.7rem; }

/* imposto no recibo (order.html) */
.order-tax{ margin-top:.6rem; padding:.7rem .8rem; background:#fff8f6; border:1px dashed #f3c0bd; border-radius:var(--r); }
.ot-head{ font-weight:800; font-size:.85rem; color:#b3261e; margin-bottom:.2rem; }
.ot-line{ display:flex; justify-content:space-between; font-size:.9rem; } .ot-line b{ color:#b3261e; }
.ot-note{ font-size:.75rem; color:var(--ink-faint); margin-top:.3rem; line-height:1.35; }

/* "+R$x" que aparece no card ao ganhar dinheiro rolando a home (subtil) */
.card-earn{ position:absolute; top:8px; left:8px; z-index:3; background:var(--good); color:#fff; font-weight:800; font-size:.8rem; padding:.15rem .5rem; border-radius:999px; box-shadow:0 3px 10px rgba(0,166,80,.35); pointer-events:none; animation:card-earn-pop 1.3s ease forwards; }
@keyframes card-earn-pop{ 0%{ transform:translateY(6px) scale(.6); opacity:0; } 15%{ transform:translateY(0) scale(1.08); opacity:1; } 30%{ transform:scale(1); } 70%{ opacity:1; } 100%{ transform:translateY(-14px) scale(.9); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .card-earn{ display:none; } }

/* saldo do usuário no resumo do pagamento (verde = dá; vermelho = falta) */
.pay-balance{ margin-top:.6rem; padding:.55rem .7rem; border-radius:var(--r); font-size:.85rem; }
.pay-balance.is-ok{ background:#e8f5e9; color:#1b5e20; }
.pay-balance.is-short{ background:#FDE7E7; color:#b3261e; }
.pay-balance a{ color:inherit; font-weight:700; }

/* contexto "Nv" (vendas totais) ao lado da barra de compradores únicos no admin */
.bar-extra{ font-size:.66rem; color:var(--ink-faint); margin-left:.35rem; flex:none; }

/* ===== banner global do admin + aba Operações ===== */
.admin-banner{ background:#FFF3CD; color:#664d03; border-bottom:1px solid #ffe69c; text-align:center; padding:.5rem 1rem; font-size:.88rem; font-weight:600; }
.ops-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
/* os botões de backup usam a base .btn (sem padding próprio) — sem isto ficam "crus" */
.ops-row .btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1.2rem; font-size:.85rem; cursor:pointer; }
.ops-import{ cursor:pointer; }
.admin-danger-panel{ border-color:#f3c0bd; }
.admin-danger-panel h3{ color:#b3261e; }
.ops-resets{ display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; }
.ops-resets .mbtn{ width:auto; }