:root{
  color-scheme:dark;
  --papel:#0a0a0b;
  --papel-2:#16161a;
  --tinta:#f4f1ea;
  --tinta-2:#cdc8bf;
  --suave:#8f8a82;
  --linha:#26262b;
  --laranja:#ff5a1f;
  --laranja-escuro:#e2440c;
  --azul:#2b4bff;
  --amarelo:#ffd23f;
  --verde:#1f9d55;
  --branco:#121215;
  --raio:18px;
  --sombra:0 1px 0 rgba(255,255,255,.03) inset, 0 24px 48px -16px rgba(0,0,0,.7);
  --titulo:"Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --texto:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --largura:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--titulo);line-height:1.02;margin:0;letter-spacing:-.02em}
.pular{position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;padding:10px 14px;z-index:999}
.pular:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

/* faixa corrida */
.faixa{background:#000;color:var(--tinta);border-bottom:1px solid #1c1c20;overflow:hidden;font-family:var(--titulo);font-weight:800;font-size:13px;letter-spacing:.12em}
.faixa-trilho{display:flex;gap:36px;padding:9px 0;width:max-content;animation:correr 32s linear infinite}
.faixa-trilho span::after{content:"✦";margin-left:36px;color:var(--laranja)}
@keyframes correr{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.faixa-trilho{animation:none}}

/* topo */
.topo{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.72);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--linha)}
.topo-in{max-width:var(--largura);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:24px}
.logo{font-family:var(--titulo);font-weight:800;font-size:24px;letter-spacing:-.04em;text-decoration:none;white-space:nowrap}
.logo b{color:var(--laranja);font-weight:800}
.abas{display:flex;gap:4px;flex:1;justify-content:center}
.abas a{text-decoration:none;font-weight:600;font-size:15px;padding:9px 14px;border-radius:999px;transition:background .15s,color .15s;white-space:nowrap}
.abas a:hover{background:var(--papel-2)}
.abas a.ativa{background:var(--laranja);color:#fff}
.btn-carrinho{position:relative;background:var(--laranja);color:#fff;border:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .15s}
.btn-carrinho:hover{transform:scale(1.06)}
.contador{position:absolute;top:-4px;right:-4px;background:#fff;color:#111;font-size:12px;font-weight:700;min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;padding:0 6px;border:2px solid var(--papel)}
.contador.pulo{animation:pulo .4s}
@keyframes pulo{50%{transform:scale(1.35)}}

@media (max-width:860px){
  .topo-in{flex-wrap:wrap;gap:10px 16px;padding:10px 16px}
  .logo{flex:1}
  .abas{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
  .abas::-webkit-scrollbar{display:none}
  .abas a{font-size:14px;padding:8px 12px;background:var(--papel-2)}
}

main{min-height:60vh;outline:none}
main:focus,main:focus-visible{outline:none}
.secao{max-width:var(--largura);margin:0 auto;padding:56px 20px}
@media (max-width:640px){.secao{padding:40px 16px}}

/* hero */
.hero{max-width:var(--largura);margin:0 auto;padding:40px 20px 24px;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.hero-txt .chapeu{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;background:var(--branco);border:1px solid var(--linha);padding:6px 12px;border-radius:999px}
.hero-txt .chapeu i{width:8px;height:8px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 4px rgba(31,157,85,.18)}
.hero h1{font-size:clamp(48px,8.4vw,112px);font-weight:800;margin:20px 0 18px;letter-spacing:-.045em;line-height:.9}
.hero h1 em{font-style:normal;color:var(--laranja)}
.hero h1 .azul{color:#6f8bff}
.hero p.lead{font-size:clamp(17px,1.6vw,20px);color:var(--tinta-2);max-width:30em;margin:0 0 28px}
.hero-acoes{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{position:relative;aspect-ratio:1/1.05;display:grid;place-items:center}
.hero-visual .disco{position:absolute;inset:-4%;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(255,90,31,.55),rgba(255,46,99,.18) 45%,rgba(255,90,31,0) 68%)}
.hero-visual .disco::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px dashed var(--tinta);opacity:.25;animation:girar 40s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.hero-visual img{position:relative;height:100%;width:auto;filter:drop-shadow(0 30px 30px rgba(0,0,0,.25))}
.hero-visual .g1{transform:translateX(18%) rotate(8deg)}
.hero-visual .g2{position:absolute;height:88%;transform:translateX(-30%) rotate(-10deg);z-index:0}
.selo-giro{position:absolute;right:2%;top:4%;width:112px;height:112px;z-index:2;background:var(--amarelo);border-radius:50%;display:grid;place-items:center;text-align:center;font-family:var(--titulo);font-weight:800;line-height:1;transform:rotate(12deg);box-shadow:var(--sombra);color:#111}
.selo-giro b{display:block;font-size:30px}
.selo-giro small{font-size:12px;letter-spacing:.06em}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:28px}
  .hero-visual{max-width:420px;width:100%;margin:0 auto;order:-1}
  .selo-giro{width:88px;height:88px}.selo-giro b{font-size:24px}
}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:16px 26px;font-weight:700;font-size:16px;text-decoration:none;transition:transform .15s,background .15s,box-shadow .15s;min-height:52px}
.btn:active{transform:scale(.98)}
.btn-principal{background:var(--laranja);color:#fff;box-shadow:0 8px 20px -8px rgba(255,90,31,.7)}
.btn-principal:hover{background:var(--laranja-escuro)}
.btn-escuro{background:var(--tinta);color:var(--papel)}
.btn-escuro:hover{background:#fff}
.btn-contorno{background:transparent;border:2px solid var(--tinta)}
.btn-contorno:hover{background:var(--tinta);color:var(--papel)}
.btn-bloco{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* números */
.numeros{max-width:var(--largura);margin:0 auto;padding:8px 20px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.numero{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:20px}
.numero b{font-family:var(--titulo);font-size:clamp(28px,3.4vw,40px);display:block;line-height:1}
.numero span{color:var(--suave);font-size:14px}
@media (max-width:640px){.numeros{grid-template-columns:repeat(2,1fr);padding:8px 16px 0}}

/* cabeçalho de seção */
.cab{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.cab h2{font-size:clamp(34px,5vw,60px);font-weight:800}
.cab p{margin:8px 0 0;color:var(--suave);font-size:17px}
.cab a{font-weight:600}

/* cards de categoria */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat{position:relative;border-radius:var(--raio);padding:22px;min-height:260px;text-decoration:none;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s}
.cat:hover{transform:translateY(-4px)}
.cat h3{font-size:28px;font-weight:800;position:relative;z-index:1}
.cat p{margin:6px 0 0;font-size:14px;position:relative;z-index:1;max-width:14em}
.cat img{position:absolute;right:-12%;bottom:-8%;height:78%;width:auto;transition:transform .3s}
.cat:hover img{transform:rotate(-6deg) scale(1.05)}
.cat .tag{align-self:flex-start;position:relative;z-index:1;font-size:12px;font-weight:700;background:rgba(255,255,255,.9);color:#111;padding:4px 10px;border-radius:999px}
.cat-garrafas{background:radial-gradient(circle at 80% 90%,#2a2a30,#121215 70%);color:var(--tinta);border:1px solid var(--linha)}
.cat-copos{background:var(--azul);color:#fff}
.cat-camisetas{background:var(--amarelo);color:#111}
.cat-personalizados{background:var(--laranja);color:#fff}
@media (max-width:960px){.cats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cats{grid-template-columns:1fr}.cat{min-height:200px}}

/* grade de produtos */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.card-img{position:relative;aspect-ratio:1/1.05;background:radial-gradient(circle at 50% 38%,#2b2b31,#111114 72%);display:grid;place-items:center;overflow:hidden}
.card-img img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;transition:transform .35s}
.card:hover .card-img img{transform:scale(1.05) rotate(-3deg)}
.card-img .alt{position:absolute;opacity:0;transition:opacity .3s}
.card:hover .card-img .alt{opacity:1}
.card-selo{position:absolute;left:12px;top:12px;background:var(--tinta);color:var(--papel);font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;z-index:1}
.card-selo.breve{background:var(--amarelo);color:var(--tinta)}
.card-info{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-info h3{font-family:var(--texto);font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.card-info p{margin:0;color:var(--suave);font-size:14px}
.preco{font-family:var(--titulo);font-weight:800;font-size:24px;margin-top:auto;padding-top:6px}
.preco small{font-family:var(--texto);font-size:13px;font-weight:500;color:var(--suave)}
.card.inativo .card-img img{filter:grayscale(.3);opacity:.75}

/* estado vazio */
.vazio{background:var(--branco);border:2px dashed var(--linha);border-radius:var(--raio);padding:48px 24px;text-align:center}
.vazio h3{font-size:28px;margin-bottom:8px}
.vazio p{color:var(--suave);margin:0 auto 20px;max-width:28em}

/* banner personalizado */
.banner{background:radial-gradient(circle at 85% 50%,rgba(255,90,31,.35),transparent 55%),#0f0f12;border:1px solid var(--linha);color:var(--tinta);border-radius:28px;padding:48px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;overflow:hidden;position:relative}
.banner h2{font-size:clamp(36px,5vw,64px);font-weight:800}
.banner h2 em{font-style:normal;color:var(--laranja)}
.banner p{color:#cfcac0;font-size:17px;max-width:30em}
.passos{display:grid;gap:12px;margin:24px 0 28px;padding:0;list-style:none;counter-reset:p}
.passos li{counter-increment:p;display:flex;gap:14px;align-items:center;font-weight:500}
.passos li::before{content:counter(p);font-family:var(--titulo);font-weight:800;width:36px;height:36px;border-radius:50%;background:var(--laranja);color:#fff;display:grid;place-items:center;flex:none}
.banner-img{display:grid;place-items:center}
.banner-img img{max-height:380px;width:auto;transform:rotate(8deg)}
@media (max-width:860px){.banner{grid-template-columns:1fr;padding:32px 24px}.banner-img{order:-1}.banner-img img{max-height:260px}}

/* garantias */
.garantias{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.garantia{padding:24px;border-radius:var(--raio);background:var(--branco);border:1px solid var(--linha)}
.garantia .ico{width:44px;height:44px;border-radius:12px;background:var(--papel-2);display:grid;place-items:center;margin-bottom:14px;font-size:22px}
.garantia h3{font-family:var(--texto);font-size:18px;font-weight:700;margin-bottom:4px;letter-spacing:-.01em}
.garantia p{margin:0;color:var(--suave);font-size:15px}
@media (max-width:760px){.garantias{grid-template-columns:1fr}}

/* página de produto */
.migalha{font-size:14px;color:var(--suave);margin-bottom:20px}
.migalha a{text-decoration:none}
.migalha a:hover{text-decoration:underline}
.produto{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.galeria{position:sticky;top:96px}
.foto-principal{background:radial-gradient(circle at 50% 38%,#2c2c33,#0f0f12 72%);border:1px solid var(--linha);border-radius:24px;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.foto-principal{position:relative}
.foto-principal img{position:absolute;inset:5%;width:90%;height:90%;object-fit:contain}
.miniaturas{display:flex;gap:10px;margin-top:12px}
.miniaturas button{width:84px;height:84px;border-radius:14px;border:2px solid var(--linha);background:var(--branco);padding:6px;display:grid;place-items:center}
.miniaturas button img{height:100%;width:auto}
.miniaturas button.ativa{border-color:var(--tinta)}
.prod-info h1{font-size:clamp(34px,4.4vw,52px);font-weight:800;margin:6px 0 12px}
.prod-info .marca{font-size:14px;font-weight:600;color:var(--suave);text-transform:uppercase;letter-spacing:.08em}
.prod-info .resumo{font-size:17px;color:var(--tinta-2);margin:0 0 20px}
.prod-preco{font-family:var(--titulo);font-weight:800;font-size:44px;line-height:1}
.prod-preco small{display:block;font-family:var(--texto);font-weight:500;font-size:14px;color:var(--suave);margin-top:6px}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:24px 0}
.chip{background:var(--branco);border:1px solid var(--linha);border-radius:14px;padding:12px 10px;text-align:center}
.chip b{font-family:var(--titulo);font-size:20px;display:block;line-height:1.1}
.chip span{font-size:12px;color:var(--suave)}
.rotulo{font-weight:700;font-size:15px;margin:22px 0 10px;display:block}
.variantes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.variante{position:relative;text-align:left;background:var(--branco);border:2px solid var(--linha);border-radius:16px;padding:14px 16px;transition:border-color .15s}
.variante:hover{border-color:var(--tinta-2)}
.variante[aria-checked="true"]{border-color:var(--laranja);box-shadow:inset 0 0 0 1px var(--laranja),0 0 24px -8px rgba(255,90,31,.6)}
.variante b{display:block;font-size:16px}
.variante span{display:block;font-size:13px;color:var(--suave)}
.variante em{font-style:normal;font-family:var(--titulo);font-weight:800;font-size:20px;display:block;margin-top:6px}
.variante[aria-checked="true"]::after{content:"✓";position:absolute;right:12px;top:12px;width:22px;height:22px;border-radius:50%;background:var(--laranja);color:#fff;font-size:13px;display:grid;place-items:center}
.envio-arte{margin-top:14px;background:var(--branco);border:2px dashed var(--linha);border-radius:16px;padding:18px;transition:border-color .15s,background .15s}
.envio-arte.arrastando{border-color:var(--laranja);background:rgba(255,90,31,.08)}
.envio-arte label.soltar{display:flex;gap:14px;align-items:center;cursor:pointer}
.envio-arte .ico-up{width:48px;height:48px;border-radius:12px;background:var(--laranja);color:#fff;display:grid;place-items:center;flex:none}
.envio-arte b{display:block}
.envio-arte small{color:var(--suave)}
.envio-arte input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.arte-previa{display:flex;gap:14px;align-items:center}
.arte-previa img,.arte-previa .pdf{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--papel-2);display:grid;place-items:center;font-weight:800;font-size:13px}
.arte-previa .nome{flex:1;min-width:0;word-break:break-all;font-size:14px}
.link-btn{background:none;border:0;padding:0;text-decoration:underline;font-weight:600;font-size:14px}
textarea.obs{width:100%;margin-top:10px;border:1px solid var(--linha);border-radius:12px;padding:12px;min-height:72px;resize:vertical;background:var(--papel)}
.comprar{display:flex;gap:10px;margin-top:22px}
.qtd{display:flex;align-items:center;background:var(--branco);border:2px solid var(--linha);border-radius:999px;height:52px}
.qtd button{width:44px;height:100%;border:0;background:none;font-size:20px;font-weight:700}
.qtd output{min-width:28px;text-align:center;font-weight:700}
.comprar .btn{flex:1}
.confianca{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:14px;color:var(--suave)}
.confianca span::before{content:"✓ ";color:var(--verde);font-weight:800}
.acordeao{margin-top:28px;border-top:1px solid var(--linha)}
.acordeao details{border-bottom:1px solid var(--linha)}
.acordeao summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.acordeao summary::-webkit-details-marker{display:none}
.acordeao summary::after{content:"+";font-size:22px;font-weight:400;transition:transform .2s}
.acordeao details[open] summary::after{transform:rotate(45deg)}
.acordeao ul{margin:0 0 18px;padding-left:20px;color:var(--tinta-2)}
.acordeao li{margin-bottom:6px}
.ficha{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:15px}
.ficha td{padding:9px 0;border-bottom:1px dashed var(--linha)}
.ficha td:first-child{color:var(--suave);width:45%}
.acordeao p{margin:0 0 18px;color:var(--tinta-2)}
.barra-fixa{display:none}
@media (max-width:860px){
  .produto{grid-template-columns:1fr;gap:24px}
  .galeria{position:static}
  .chips{grid-template-columns:repeat(2,1fr)}
  .miniaturas button{width:68px;height:68px}
  .barra-fixa{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--branco);border-top:1px solid var(--linha);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:12px;align-items:center;transform:translateY(110%);transition:transform .25s}
  .barra-fixa.mostrar{transform:none}
  .barra-fixa .preco{padding:0;margin:0;font-size:22px}
  .barra-fixa .btn{flex:1;min-height:48px;padding:12px 18px}
}
@media (max-width:420px){.variantes{grid-template-columns:1fr}}

/* gaveta do carrinho */
.veu{position:fixed;inset:0;background:rgba(17,17,17,.45);z-index:80;animation:aparecer .2s}
@keyframes aparecer{from{opacity:0}}
.gaveta{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--papel);z-index:90;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s;box-shadow:-20px 0 40px rgba(0,0,0,.15);visibility:hidden}
.gaveta.aberta{transform:none;visibility:visible}
.gaveta-topo{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--linha)}
.gaveta-topo h2{font-size:26px;font-weight:800}
.fechar{background:var(--branco);border:1px solid var(--linha);width:40px;height:40px;border-radius:50%;font-size:24px;line-height:1}
.gaveta-itens{flex:1;overflow-y:auto;padding:12px 20px}
.item{display:grid;grid-template-columns:72px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--linha);align-items:start}
.item-img{width:72px;height:72px;border-radius:12px;background:var(--branco);border:1px solid var(--linha);display:grid;place-items:center;overflow:hidden}
.item-img img{height:86%;width:auto}
.item h4{font-family:var(--texto);font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.item .var{font-size:13px;color:var(--suave)}
.item .arte-ok{font-size:12px;color:var(--verde);font-weight:600}
.item .qtd{height:36px;margin-top:8px;display:inline-flex;border-width:1px}
.item .qtd button{width:32px;font-size:16px}
.item-dir{text-align:right;display:flex;flex-direction:column;align-items:end;gap:8px}
.item-dir b{font-size:15px}
.remover{background:none;border:0;color:var(--suave);font-size:13px;text-decoration:underline;padding:0}
.gaveta-rodape{padding:18px 20px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--linha);background:var(--branco)}
.linha-total{display:flex;justify-content:space-between;margin-bottom:6px;font-size:15px}
.linha-total.grande{font-size:20px;font-weight:800;font-family:var(--titulo);margin:10px 0 16px}
.gaveta-vazia{text-align:center;padding:60px 10px}
.gaveta-vazia .ico{font-size:44px}
.gaveta-vazia p{color:var(--suave)}

/* checkout */
.checkout{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start}
.bloco{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:24px;margin-bottom:16px}
.bloco h2{font-size:24px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.bloco h2 .n{width:30px;height:30px;border-radius:50%;background:var(--tinta);color:var(--papel);font-size:15px;display:grid;place-items:center;font-family:var(--texto)}
.campos{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.campo{grid-column:span 6;display:flex;flex-direction:column;gap:6px}
.campo.c3{grid-column:span 3}.campo.c2{grid-column:span 2}.campo.c4{grid-column:span 4}
.campo label{font-size:14px;font-weight:600}
.campo input,.campo select{height:50px;border:1.5px solid var(--linha);border-radius:12px;padding:0 14px;background:var(--papel);transition:border-color .15s,background .15s;width:100%}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--laranja);background:var(--papel-2)}
.campo.erro input{border-color:#ff5c50;background:rgba(255,92,80,.08)}
.campo .msg{font-size:13px;color:#ff7a70;min-height:0}
@media (max-width:560px){.campo.c3,.campo.c2,.campo.c4{grid-column:span 6}}
.opcoes{display:grid;gap:10px}
.opcao{display:flex;gap:14px;align-items:center;border:2px solid var(--linha);border-radius:14px;padding:14px 16px;cursor:pointer;background:var(--papel)}
.opcao:has(input:checked){border-color:var(--laranja);background:var(--papel-2)}
.opcao input{accent-color:var(--laranja);width:20px;height:20px;flex:none}
.opcao b{display:block}
.opcao small{color:var(--suave)}
.opcao .val{margin-left:auto;font-weight:700;white-space:nowrap}
.resumo{position:sticky;top:96px}
.resumo .item{grid-template-columns:56px 1fr auto}
.resumo .item-img{width:56px;height:56px}
.pix-info{display:flex;gap:12px;align-items:center;background:rgba(31,157,85,.1);border:1px solid rgba(31,157,85,.35);color:#86efac;border-radius:14px;padding:14px;font-size:14px;margin-bottom:16px}
.pix-info svg{flex:none}
.alerta{background:rgba(255,210,63,.08);border:1px solid rgba(255,210,63,.35);color:#fde68a;border-radius:14px;padding:14px 16px;font-size:14px;margin-bottom:16px}
.alerta.erro{background:rgba(255,92,80,.1);border-color:rgba(255,92,80,.4);color:#fecaca}
@media (max-width:900px){.checkout{grid-template-columns:1fr}.resumo{position:static;order:-1}}

/* tela do pix */
.pix-tela{max-width:560px;margin:0 auto;text-align:center}
.pix-tela h1{font-size:clamp(34px,5vw,48px);font-weight:800;margin-bottom:8px}
.pix-tela .sub{color:var(--suave);margin:0 0 24px}
.qr{background:#fff;border:1px solid var(--linha);border-radius:24px;padding:20px;display:inline-block;box-shadow:var(--sombra)}
.qr img{width:min(280px,70vw);height:auto;image-rendering:pixelated}
.valor-pix{font-family:var(--titulo);font-weight:800;font-size:40px;margin:20px 0 4px}
.copia{display:flex;gap:8px;margin:18px 0}
.copia input{flex:1;min-width:0;height:52px;border:1.5px solid var(--linha);border-radius:12px;padding:0 14px;background:var(--papel-2);font-size:13px;color:var(--suave)}
.status-pix{display:inline-flex;align-items:center;gap:10px;font-weight:600;background:var(--branco);border:1px solid var(--linha);padding:10px 16px;border-radius:999px;margin:8px 0 20px}
.girando{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--linha);border-top-color:var(--laranja);animation:girar .8s linear infinite}
.como{text-align:left;background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:20px 24px;margin-top:8px}
.como ol{margin:0;padding-left:20px}
.como li{margin:6px 0}
.timer{font-variant-numeric:tabular-nums}
.sucesso .check{width:96px;height:96px;border-radius:50%;background:var(--verde);color:#fff;display:grid;place-items:center;margin:0 auto 20px;font-size:48px;animation:surgir .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes surgir{from{transform:scale(0)}}
.cartao-pedido{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:20px 24px;text-align:left;margin:24px 0}
.cartao-pedido .linha-total{font-size:15px}

/* rodapé */
.rodape{background:#050506;color:#a8a39a;margin-top:40px;border-top:1px solid var(--linha)}
.rodape-in{max-width:var(--largura);margin:0 auto;padding:56px 20px 32px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.rodape h4{color:#fff;font-family:var(--texto);font-size:14px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.rodape ul{list-style:none;padding:0;margin:0}
.rodape li{margin-bottom:8px}
.rodape a{text-decoration:none}
.rodape a:hover{color:#fff;text-decoration:underline}
.rodape p{margin:0 0 8px;font-size:15px}
.logo-rodape{color:#fff;margin-bottom:12px}
.pix-selo{display:flex;gap:8px;align-items:center;color:#fff}
.mini{font-size:13px!important;opacity:.7}
.rodape-base{border-top:1px solid #2a2a2a;text-align:center;padding:18px;font-size:13px;opacity:.7}
@media (max-width:760px){.rodape-in{grid-template-columns:1fr 1fr}.rodape-in>div:first-child{grid-column:1/-1}}

/* aviso */
.aviso{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);background:var(--tinta);color:#111;padding:14px 20px;border-radius:14px;font-weight:600;z-index:100;transition:transform .3s cubic-bezier(.2,.8,.2,1);max-width:calc(100% - 32px);box-shadow:var(--sombra);visibility:hidden}
.aviso.mostrar{transform:translate(-50%,0);visibility:visible}

.whats{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;z-index:30;box-shadow:0 10px 24px -8px rgba(0,0,0,.4)}

.entrar{animation:entrar .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes entrar{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- camada cinematográfica ---- */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:200;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grao 1.2s steps(6) infinite}
@keyframes grao{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
body{background:radial-gradient(1200px 700px at 75% -10%,rgba(255,90,31,.14),transparent 60%),radial-gradient(900px 600px at -10% 30%,rgba(43,75,255,.10),transparent 60%),var(--papel);background-attachment:fixed}
.hero{min-height:calc(100vh - 140px);padding-top:56px;padding-bottom:56px}
.hero h1{text-shadow:0 10px 60px rgba(0,0,0,.6)}
.hero h1 em{text-shadow:0 0 40px rgba(255,90,31,.45)}
.hero-visual::before{content:"";position:absolute;left:10%;right:10%;bottom:2%;height:14%;background:radial-gradient(ellipse at center,rgba(255,90,31,.45),transparent 70%);filter:blur(10px)}
.hero-visual img{filter:drop-shadow(0 40px 40px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(255,90,31,.18))}
.hero-visual .g1{animation:flutuar 6s ease-in-out infinite}
.hero-visual .g2{animation:flutuar2 7s ease-in-out infinite}
@keyframes flutuar{0%,100%{transform:translateX(18%) rotate(8deg)}50%{transform:translateX(18%) rotate(6deg) translateY(-14px)}}
@keyframes flutuar2{0%,100%{transform:translateX(-30%) rotate(-10deg)}50%{transform:translateX(-30%) rotate(-12deg) translateY(-10px)}}
.feixe{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);background-size:250% 100%;animation:varrer 7s ease-in-out infinite;mix-blend-mode:screen;border-radius:50%;z-index:1}
@keyframes varrer{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
.numero,.garantia,.card,.bloco,.chip,.variante,.cartao-pedido,.como{box-shadow:0 1px 0 rgba(255,255,255,.035) inset}
.card:hover{border-color:#3a3a40;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,90,31,.25)}
.cab h2,.banner h2{text-shadow:0 10px 50px rgba(0,0,0,.6)}
.btn-principal{box-shadow:0 10px 30px -8px rgba(255,90,31,.75),0 0 0 1px rgba(255,255,255,.08) inset}
.btn-principal:hover{box-shadow:0 14px 40px -8px rgba(255,90,31,.95)}
.cat{border:1px solid rgba(255,255,255,.06)}
.cat-copos{background:radial-gradient(circle at 80% 90%,#4a66ff,#1a2bb0 70%)}
.cat-personalizados{background:radial-gradient(circle at 80% 90%,#ff7a45,#c2330a 70%)}
.status-pix,.hero-txt .chapeu{backdrop-filter:blur(8px)}
::selection{background:var(--laranja);color:#fff}
@media (max-width:860px){.hero{min-height:0;padding-top:24px}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}

/* ---- fotos de produto em quadro branco ---- */
.foto{background:#fff!important}
.card-img.foto{aspect-ratio:1/1}
.card-img.foto img{inset:0;width:100%;height:100%;object-fit:cover}
.card:hover .card-img.foto img{transform:scale(1.04)}
.foto-principal.foto img{inset:0;width:100%;height:100%;object-fit:contain}
.card-info .tema{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--laranja)}
.hero-visual img.foto-recorte{background:#fff;border-radius:28px;height:auto;width:62%;aspect-ratio:1/1;object-fit:cover;box-shadow:0 40px 80px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06);filter:none}
.hero-visual .g1.foto-recorte{position:relative;z-index:2;transform:translateX(16%) rotate(5deg)}
.hero-visual .g2.foto-recorte{position:absolute;width:52%;height:auto;transform:translateX(-38%) rotate(-8deg);opacity:.92}
@keyframes flutuar{0%,100%{transform:translateX(16%) rotate(5deg)}50%{transform:translateX(16%) rotate(4deg) translateY(-12px)}}
@keyframes flutuar2{0%,100%{transform:translateX(-38%) rotate(-8deg)}50%{transform:translateX(-38%) rotate(-10deg) translateY(-8px)}}
.cat img.foto-recorte{right:14px;bottom:14px;width:42%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#fff;border-radius:16px;box-shadow:0 16px 30px -10px rgba(0,0,0,.6)}
.cat:hover img.foto-recorte{transform:rotate(-4deg) scale(1.04)}
.cat h3,.cat p{max-width:55%}
/* filtros da categoria */
.filtros-loja{display:grid;gap:12px;margin-bottom:12px}
.busca{display:flex;align-items:center;gap:10px;background:var(--branco);border:1.5px solid var(--linha);border-radius:14px;padding:0 16px;height:54px;max-width:560px}
.busca:focus-within{border-color:var(--laranja)}
.busca input{flex:1;background:none;border:0;outline:none;height:100%;font-size:16px;min-width:0}
.chips-filtro{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips-filtro::-webkit-scrollbar{display:none}
.chips-filtro button{flex:none;border:1px solid var(--linha);background:var(--branco);border-radius:999px;padding:9px 16px;font-weight:600;font-size:14px;white-space:nowrap}
.chips-filtro button:hover{border-color:#44444a}
.chips-filtro button.ativo{background:var(--laranja);border-color:var(--laranja);color:#fff}
.contagem{color:var(--suave);font-size:14px;margin:4px 0 16px}
@media (max-width:640px){.grade{grid-template-columns:repeat(2,1fr);gap:10px}.card-info{padding:12px}.card-info h3{font-size:14px}.preco{font-size:19px}}
.cat h3{font-size:clamp(20px,2vw,26px);overflow-wrap:anywhere}
.cat img.foto-recorte{width:36%}
.hero-visual .g2.foto-recorte{transform:translateX(-62%) rotate(-9deg)}
@keyframes flutuar2{0%,100%{transform:translateX(-62%) rotate(-9deg)}50%{transform:translateX(-62%) rotate(-11deg) translateY(-8px)}}
@media (max-width:860px){.hero-visual img.foto-recorte{width:56%}.hero-visual .g2.foto-recorte{width:46%}}
.frete-dica{margin:0;color:var(--suave);font-size:14px;padding:10px 0}
.ico-pag{width:40px;height:40px;border-radius:10px;background:var(--papel-2);display:grid;place-items:center;flex:none;color:var(--laranja)}
.mini-seg{font-size:13px;color:var(--suave);margin:12px 0 0;text-align:center}
#opcoesFrete .opcao{background:var(--papel)}

/* várias fotos (lados do copo) */
.lados{position:absolute;right:10px;bottom:10px;z-index:1;background:rgba(17,17,17,.82);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.card-img.foto .alt{opacity:0;transition:opacity .3s}
.card:hover .card-img.foto .alt{opacity:1}
.foto-principal .seta{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(17,17,17,.75);color:#fff;font-size:28px;line-height:1;display:grid;place-items:center;z-index:2}
.foto-principal .seta:hover{background:var(--laranja)}
.seta-esq{left:12px}.seta-dir{right:12px}
.miniaturas button{background:#fff!important;overflow:hidden;padding:0}
.miniaturas button img{width:100%;height:100%;object-fit:cover}
.miniaturas button.ativa{border-color:var(--laranja)}
.dica-lados{font-size:13px;color:var(--suave);margin:8px 0 0}