@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('/assets/fonts/space-grotesk.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/manrope.woff2') format('woff2')}
*,*::before,*::after{box-sizing:border-box}
/* Autor sempre vence a UA stylesheet: qualquer seletor deste arquivo com
   display:flex/block/grid (ex. .drawer, .btn-outline) anula silenciosamente
   o display:none implícito do atributo [hidden], sem erro de console —
   achado real de review adversarial (drawer permanecia display:flex e
   cobria a tela inteira mesmo com hidden=true). Regra global, !important
   deliberado: [hidden] é um contrato binário de estado, não deve perder
   pra especificidade de classe em lugar nenhum do site. */
[hidden]{display:none!important}
:root{
  --bg:#070513; --bg-2:#0d0920; --surface:rgba(13,10,31,.72); --surface-solid:#0d0920; --surface-2:#161233;
  --line:rgba(255,255,255,.1); --line-strong:rgba(255,255,255,.22);
  --ink:#f8fafc; --ink-2:#b8b5c8; --ink-3:#847fa0;
  --brand:#25104a; --on-brand:#ffffff;
  --accent:#00e6c2; --accent-light:#47ffdd; --accent-strong:#009f8c; --on-accent:#04140f;
  --radius-card:20px; --radius-tile:16px; --radius-btn:999px; --radius-chip:999px; --radius-sm:10px;
  --glow-hero:0 0 60px rgba(0,230,194,.22),0 0 140px rgba(37,16,74,.45);
  --glow-feat:0 0 26px rgba(0,230,194,.3);
  --shadow-card:0 10px 26px rgba(0,0,0,.4);
  --font-display:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:40px;--space-6:64px;--space-7:96px;--space-8:128px;
  --container-max:1400px;
  /* Goteira lateral UNICA do site. Antes cada bloco resolvia margem por conta
     propria (.container com --space-4 fixo, .editorial sem container
     nenhum) — resultado real medido a 360px: a faixa editorial ia de 0 a 360,
     encostada nas duas bordas, com o border-radius cortado. Agora existe UM
     token: todo bloco de primeiro nivel usa .container, e nada mais define
     margem lateral sozinho. */
  --gutter:20px;
  --fs-hero:clamp(2.125rem,1.5rem + 2.4vw,4rem);
  --fs-h2:clamp(1.375rem,1.15rem + 0.9vw,1.875rem);
  --fs-pdp-name:clamp(1.5rem,1.3rem + 0.8vw,2.125rem);
  --atmosphere:radial-gradient(560px 420px at 16% -6%,rgba(0,230,194,.14),transparent 60%),
    radial-gradient(620px 480px at 88% 12%,rgba(37,16,74,.5),transparent 65%),
    radial-gradient(900px 700px at 50% 115%,rgba(0,159,140,.08),transparent 60%),
    var(--bg);
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--atmosphere);background-attachment:fixed;color:var(--ink);font:16px/1.55 var(--font-body);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px;border-radius:4px}
/* Goteira SIMPLES de proposito, sem env(safe-area-*) aqui.
   Tentativa anterior: calc(var(--gutter) + env(safe-area-inset-left,0px)),
   inclusive protegida por @supports. Resultado MEDIDO no navegador: CSS
   .supports() responde true, mas env() dentro do calc resolve invalido em
   tempo de computed-value, a declaracao cai pro valor inicial e o
   padding-left do site inteiro vira 0px — ou seja, a "protecao" de notch
   produzia exatamente o defeito que esta missao existe pra corrigir
   (conteudo colado na borda). Uma propriedade so, sem calc, sem env: o
   comportamento fica identico em todo navegador. Safe-area do rodape
   continua tratada onde de fato importa (.wa-float e .pdp-cta). */
.container{max-width:var(--container-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
@media(min-width:600px){:root{--gutter:24px}}
@media(min-width:900px){:root{--gutter:32px}}
#bar{position:fixed;inset:0 auto auto 0;height:2px;width:0;background:var(--accent);transition:width .3s ease;z-index:99}
.eyebrow{font:700 11px/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-light);margin:0 0 var(--space-2)}

/* -------- header -------- */
header.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
/* Header em DUAS LINHAS no mobile (uma so no desktop), via flex-wrap sobre o
   MESMO markup — um unico <form> de busca, nunca dois duplicados. Motivo
   medido a 360px: em linha unica a busca ficava com 117.9px uteis, espremida
   entre marca e menu. Agora ela ocupa a largura inteira na segunda linha. */
/* padding-BLOCK, nunca o shorthand padding: o mesmo elemento tambem e
   .container, e o shorthand zeraria a goteira lateral dele (regressao real
   medida: header com padding-left 0, marca colada na borda). */
.top-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px var(--space-3);padding-block:10px}
.brand{order:1;display:inline-flex;align-items:center;gap:9px;min-height:44px;font-family:var(--font-display);font-size:13px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;color:var(--ink);white-space:nowrap}
/* Símbolo OFICIAL da MultiDrop (crop da logo aprovada, servido em WebP 256px
   para ficar nítido em 2x). Ao lado, a wordmark em texto — o símbolo não tem
   texto, então não há duplicação. Tamanho fixo + width/height no <img> =
   zero layout shift. */
.brand-mark{width:36px;height:36px;border-radius:9px;flex:0 0 auto;display:block;object-fit:cover;background:#000d0d}
nav.top{display:none;gap:var(--space-4);margin-left:var(--space-5)}
nav.top a{font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink-2);white-space:nowrap;padding:4px 0;border-bottom:1px solid transparent}
nav.top a:hover{color:var(--accent-light);border-color:var(--accent)}
.top-search{order:5;flex:1 0 100%;position:relative;display:flex;align-items:center;min-height:44px}
.top-search input{width:100%;font:14px/1.4 var(--font-body);color:var(--ink);background:transparent;
  border:none;border-bottom:1px solid var(--line-strong);border-radius:0;padding:6px 4px 6px 22px;min-height:44px}
.top-search input::placeholder{color:var(--ink-3)}
.top-search input:focus{outline:none;border-color:var(--accent)}
.top-search svg{position:absolute;left:2px;top:50%;margin-top:-7px;width:14px;height:14px;color:var(--ink-3);pointer-events:none}
.mobile-nav{order:4;display:inline-flex}
/* WhatsApp na chrome (pedido comercial: "aba/botao de WhatsApp facil de
   acessar"). No mobile e um alvo de 44px SEM rotulo, encostado a direita
   junto do menu — o header continua nas mesmas 2 linhas, sem ganhar altura.
   No desktop ganha o rotulo, que la sobra espaco. Cor do canal so no
   icone/texto: um botao verde solido no topo brigaria com o flutuante e com
   o CTA da PDP pela mesma acao. */
.top-wa{order:2;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-width:44px;min-height:44px;padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--radius-chip);
  color:#3ee87f;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.top-wa svg{width:18px;height:18px;flex:0 0 auto}
.top-wa:hover{border-color:#25D366;background:rgba(37,211,102,.1)}
.top-wa .lbl{display:none}
/* Carrinho: acao de ecommerce de verdade, entao ganha a cor de marca
   (--accent, teal) — o WhatsApp fica com a cor do canal de terceiro, o
   carrinho fica com a cor da loja. Badge some (hidden) com 0 itens; nunca
   mostra "0" — ausencia de badge JA comunica carrinho vazio. Vem DEPOIS do
   WhatsApp na ordem (mais perto do menu): e a acao de conversao primaria. */
.top-cart{order:3;margin-left:0;position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--radius-chip);
  color:var(--ink);background:none}
.top-cart svg{width:19px;height:19px;flex:0 0 auto}
.top-cart:hover{border-color:var(--accent);color:var(--accent-light)}
.cart-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);font-family:var(--font-display);font-size:10px;font-weight:700;
  line-height:16px;text-align:center}
@media(min-width:900px){
  .top-in{flex-wrap:nowrap;height:64px;padding-block:0;gap:var(--space-4)}
  nav.top{display:flex;order:1}
  .top-search{order:2;flex:0 1 260px;margin-left:auto}
  .top-wa{order:3;margin-left:0;padding:0 14px}
  .top-wa .lbl{display:inline}
  .top-cart{order:4;margin-left:0}
  .mobile-nav{display:none}
}
/* 19/09/2026 — o painel ancora no HEADER (sticky = bloco de contencao), nao no
   <summary>: a 320px o botao de menu cai para a segunda linha, a esquerda, e
   um painel ancorado em right:0 do botao abria quase todo fora da tela
   (medido: left -166px). Ancorado no header, abre sempre dentro da goteira,
   abaixo da barra inteira, em qualquer quebra de linha. */
details.mobile-nav{position:static}
details.mobile-nav summary{list-style:none;cursor:pointer;line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
details.mobile-nav summary svg{width:22px;height:22px}
details.mobile-nav summary::-webkit-details-marker{display:none}
/* max-height + scroll: o painel agora lista TODAS as categorias vendaveis (17
   no catalogo real), nao mais 6 — sem isso a lista estouraria a altura da tela. */
.mobile-nav-panel{position:absolute;right:var(--gutter);top:calc(100% + 6px);background:var(--surface-solid);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:var(--space-2) 0;min-width:230px;max-width:calc(100vw - 2 * var(--gutter));max-height:70vh;overflow-y:auto;
  box-shadow:0 20px 44px rgba(0,0,0,.5);z-index:30;overscroll-behavior:contain}
.mobile-nav-panel a{display:block;padding:10px var(--space-4);font-size:14px;color:var(--ink-2)}
.mobile-nav-panel a:hover{background:var(--surface-2);color:var(--ink)}
/* Telas muito estreitas (320-359px): marca + WhatsApp + carrinho + menu nao
   cabiam em 280px uteis (medido 335px) e o menu caia sozinho numa terceira
   linha. Gaps menores e alvos de 40px mantem a barra em DUAS linhas (icones +
   busca), sem esconder nada. Fica DEPOIS das regras base (mesma
   especificidade: a ultima vence). */
@media(max-width:359px){.top-in{gap:8px 8px}.brand{gap:7px;font-size:12px;letter-spacing:.1em}.top-wa,.top-cart,details.mobile-nav summary{min-width:40px}.top-wa,.top-cart{padding:0 8px}}

/* -------- hero -------- */
/* padding-BLOCK, nunca o shorthand: .hero tambem carrega .container, e o
   shorthand zerava a goteira lateral dela.
   CAUSA RAIZ do "mobile colado na borda": .hero e section.band tem a mesma
   especificidade de .container e vem DEPOIS no arquivo, entao venciam e
   anulavam o padding lateral de TODO o <main>. O overflow-x:hidden do body
   escondia a consequencia, entao o defeito nunca virou scroll horizontal —
   so conteudo encostado na borda. */
.hero{padding-block:var(--space-6);display:grid;gap:var(--space-5);align-items:center}
.hero-copy{max-width:46ch}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.02em;margin:0 0 var(--space-4)}
/* .hero-COPY p, nunca .hero p. Com o seletor largo esta regra vencia por
   especificidade (0,1,1) TODO paragrafo dentro do hero — inclusive os da
   campanha, que agora moram ali: medido, .offer-tag/.offer-qty/.offer-price
   herdavam margin-bottom:40px e font-size:16px, inflando cada card de oferta
   de 274px para 395px e quebrando o max-width da nota. Escopar na coluna de
   copy resolve na causa, sem !important em lugar nenhum. */
.hero-copy p{color:var(--ink-2);font-size:16px;max-width:38ch;margin:0 0 var(--space-5)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent);font-family:var(--font-display);font-size:13px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:16px 30px;border:1px solid var(--accent);border-radius:var(--radius-btn);
  box-shadow:var(--glow-feat);transition:background .15s ease,box-shadow .15s ease,transform .1s ease}
.btn:hover{background:var(--accent-light);border-color:var(--accent-light)}
.btn:active{transform:scale(.98)}
.btn-outline{display:inline-block;background:transparent;color:var(--ink);font-family:var(--font-display);font-size:13px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:15px 29px;border:1px solid var(--line-strong);border-radius:var(--radius-btn)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-light)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
/* Desktop: a CAMPANHA ocupa a coluna da direita, ao lado da copy. Medido a
   1440x1024 na versao anterior: os cards de oferta comecavam em y=736 com so
   959px de viewport util, ou seja, a promocao que deveria ABRIR a pagina
   nascia na dobra. Copy e ofertas dividem a primeira tela.
   .hero-media (as 2 fotos de produto entre a campanha e a faixa de
   beneficios) foi REMOVIDO por decisao de inspecao humana — produto solto
   nessa posicao nao e mais desejado, ver home-view.ts::heroSection. */
@media(min-width:900px){
  .hero{grid-template-columns:1.05fr .95fr;padding-block:var(--space-7) var(--space-6);gap:var(--space-5) var(--space-6);align-items:start}
  .hero-copy{grid-column:1;grid-row:1}
}

/* -------- home: "Comece pelo tamanho" -------- */
/* 4 colunas cabem em 360px so com gap/padding curtos: com gap 16 e padding
   lateral 8 sobravam 52px uteis por tile e o rotulo "Ver produtos"
   transbordava (overflow real medido a 360px). min-width:0 impede o item de
   grid de usar o tamanho do conteudo como piso — sem isso a coluna 1fr nao
   encolhe e volta a estourar. */
.home-size-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.home-size{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:76px;min-width:0;
  padding:var(--space-3) 4px;border:1px solid var(--line-strong);border-radius:var(--radius-tile);background:var(--surface)}
@media(min-width:600px){.home-size-grid{gap:var(--space-3)}.home-size{padding:var(--space-3) var(--space-2)}}
.home-size strong{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink)}
.home-size span{font-size:10px;color:var(--ink-3);letter-spacing:0;text-transform:uppercase;white-space:nowrap}
@media(min-width:600px){.home-size span{font-size:11px;letter-spacing:.02em}}
.home-size:hover{border-color:var(--accent)}
.home-size:hover span{color:var(--accent-light)}

/* -------- secoes -------- */
section.band{padding-block:var(--space-6)}
/* flex-wrap OBRIGATORIO: o link lateral e white-space:nowrap, e com um
   rotulo longo ("Ver camiseta nacional") a linha media 326px numa viewport de
   360 — o cabecalho da secao passava a ser cortado na direita (medido). Com
   wrap o link desce pra segunda linha em vez de vazar. */
.band-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-2) var(--space-3);margin-bottom:var(--space-5)}
.band-head h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);margin:0;letter-spacing:-.01em}
.band-head a{font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;padding-bottom:2px;border-bottom:1px solid var(--ink-3)}
.band-head a:hover{color:var(--accent-light);border-color:var(--accent)}

/* -------- categorias: tiles editoriais com foto -------- */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
.cat-tile{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--surface-2);border-radius:var(--radius-tile);border:1px solid var(--line)}
.cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cat-tile:hover img{transform:scale(1.04)}
.cat-tile .cat-label{position:absolute;left:0;right:0;bottom:0;padding:var(--space-3);
  background:linear-gradient(0deg,rgba(7,5,19,.85),rgba(7,5,19,0) 72%);
  color:#fff;font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.02em}
.cat-tile .cat-label em{font-style:normal;font-weight:500;font-size:11.5px;color:rgba(255,255,255,.62)}
@media(min-width:600px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.cat-grid{grid-template-columns:repeat(4,1fr)}.cat-tile{aspect-ratio:3/4.2}}

/* -------- banner comercial (oferta de kit no atacado) --------
   Usa o violeta da marca + borda teal, NAO o glow do hero: a Home ja tem
   orcamento de glow gasto na figura do hero (ver "orcamento de glow" em
   ecommerce-principles.md) — o banner ganha destaque por cor/escala, nao por
   mais um brilho competindo na mesma tela. */
.promo{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--brand),#160a2e 70%);
  border:1px solid var(--accent-strong);border-radius:var(--radius-card);padding:var(--space-5) var(--space-4)}
.promo-copy h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,1.15rem + 1.9vw,2.5rem);
  line-height:1.08;letter-spacing:-.01em;margin:0 0 var(--space-2);color:var(--ink)}
.promo-copy h2 strong{color:var(--accent);white-space:nowrap}
.promo-unit{font-size:15.5px;color:var(--ink-2);margin:0 0 var(--space-4)}
.promo-unit strong{color:var(--ink);font-family:var(--font-display);font-weight:700}
.promo-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
/* CTA na cor do WhatsApp — o destino e o WhatsApp, entao o botao veste o
   canal, igual ao flutuante; nao e o teal de acao generica da marca. */
.promo-cta{background:#25D366;border-color:#25D366;color:#04140f;box-shadow:0 0 22px rgba(37,211,102,.28)}
.promo-cta:hover{background:#2ee674;border-color:#2ee674}
.promo-note{margin:var(--space-4) 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-3);max-width:60ch}
@media(min-width:900px){.promo{padding:var(--space-6) var(--space-6)}.promo-copy{max-width:70%}}

/* -------- HOME: campanha comercial em HTML (kits de camiseta nacional) --------
   Entrada comercial construida em HTML/CSS, NUNCA um banner de imagem: o
   texto continua selecionavel, traduzivel e legivel por leitor de tela,
   escala de 360px a 1440px sem recorte e fica editavel sem passar por
   ferramenta grafica (uma arte pode vir depois, por cima desta estrutura).

   As duas ofertas dividem o MESMO container e o mesmo vocabulario visual
   (mesma campanha); se distinguem por escala do numero, cor da borda e um
   unico glow no kit maior — nunca por dois blocos desconexos. */
.offer-grid{grid-column:1/-1;display:grid;gap:var(--space-3);margin-top:var(--space-2)}
@media(min-width:720px){.offer-grid{grid-template-columns:1fr 1fr;gap:var(--space-4)}}
/* min-width:0 em item de grid: sem isso a coluna 1fr usa o conteudo como
   piso e o numero gigante estoura a largura no mobile (mesma correcao ja
   aplicada em .home-size, e o defeito exato que esta rodada existe pra nao
   deixar voltar). */
.offer{position:relative;display:flex;flex-direction:column;gap:var(--space-2);min-width:0;
  background:linear-gradient(150deg,var(--brand),#120826 74%);border:1px solid var(--line-strong);
  border-radius:var(--radius-card);padding:var(--space-4);
  transition:transform .15s ease,border-color .15s ease}
.offer:hover,.offer:focus-within{transform:translateY(-2px);border-color:var(--accent)}
/* O kit maior leva a borda teal e o UNICO glow desta secao — destaque por
   hierarquia, dentro do orcamento de glow da tela (ecommerce-principles.md). */
.offer--max{border-color:var(--accent-strong);box-shadow:var(--glow-feat)}
.offer-tag{margin:0;font:700 10.5px/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-light)}
.offer-qty{display:flex;align-items:baseline;gap:10px;margin:0;min-width:0}
.offer-qty strong{font-family:var(--font-display);font-weight:700;font-size:clamp(2.75rem,2rem + 3.2vw,4.25rem);
  line-height:.88;letter-spacing:-.03em;color:var(--ink)}
.offer-qty span{font-size:13px;line-height:1.25;color:var(--ink-2)}
.offer-price{margin:0;font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.offer-price strong{font-size:clamp(1.5rem,1.2rem + 1.3vw,2rem);font-weight:700;color:var(--accent);letter-spacing:-.01em}
.offer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:auto;padding-top:var(--space-3)}
.offer-actions .btn{padding:14px 20px;font-size:11.5px}
.offer-wa{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;font-size:12.5px;font-weight:700;
  letter-spacing:.02em;color:var(--ink-2);border-bottom:1px solid transparent}
.offer-wa svg{width:15px;height:15px}
.offer-wa:hover{color:#3ee87f;border-color:#25D366}
.offer-note{grid-column:1/-1;margin:var(--space-3) 0 0;font-size:11.5px;line-height:1.55;color:var(--ink-3);max-width:66ch}
/* Desktop: a campanha vira a COLUNA DA DIREITA do hero (ver o bloco .hero
   acima). Esta regra tem que morar aqui, DEPOIS de .offer-grid{grid-column:
   1/-1} — a mesma especificidade perde por ordem de arquivo, e foi
   exatamente isso que aconteceu na primeira tentativa: grid-row aplicava,
   grid-column nao, e os cards ficavam por cima da copy. */
@media(min-width:900px){.offer-grid{grid-column:2;grid-row:1 / span 2;grid-template-columns:1fr;align-self:start;align-content:start;grid-auto-rows:max-content;margin-top:0}}
@media(prefers-reduced-motion:reduce){.offer{transition:none}.offer:hover,.offer:focus-within{transform:none}}
/* Mobile: o padding do card de oferta encolhe aqui: a 360px cada card media
   417px de altura, e dois deles somados jogavam as categorias pra fora de
   alcance. padding-BLOCK na .hero (nunca o shorthand): ela tambem e
   .container. (As fotos de produto que ficavam depois da campanha, mais
   "order:3", foram removidas — ver nota de .hero-media acima.) */
@media(max-width:719px){
  .hero{padding-block:var(--space-5) var(--space-4);gap:var(--space-4)}
  .hero-copy{order:1}
  .offer-grid{order:2;margin-top:0}
  .offer{padding:var(--space-3);gap:6px}
  .offer-actions{padding-top:var(--space-2)}
  .offer-note{margin-top:var(--space-2)}
}

/* -------- faixa de beneficios (envio expresso, canal, outlet) --------
   Cedo na jornada, logo abaixo da campanha. NENHUM prazo em horas/dias: nao
   existe dado de SLA de entrega em lugar nenhum deste projeto, e "24h"/"mesmo
   dia" seria promessa inventada pela loja. Diz a REGIAO, que e o dado real
   informado. */
.trust-band{padding-block:var(--space-3)}
.trust-bar{display:grid;grid-template-columns:1fr;gap:var(--space-3);margin:0;list-style:none;
  border:1px solid var(--line);border-radius:var(--radius-tile);background:var(--surface);padding:var(--space-3)}
@media(min-width:760px){.trust-bar{grid-template-columns:repeat(3,1fr);gap:var(--space-4)}}
.trust-item{display:flex;align-items:center;gap:10px;min-width:0}
.trust-item svg{width:20px;height:20px;flex:0 0 auto;color:var(--accent)}
.trust-item b{display:block;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.trust-item span{display:block;font-size:12px;line-height:1.35;color:var(--ink-3)}

/* -------- PLP em modo KIT (?kit=3 / ?kit=10): quick-add direto do card --------
   Reaproveita a MESMA estrutura visual da antiga "Compra Rapida" da Home
   (card deitado no mobile, foto+tamanho+CTA) — so o destino mudou: o CTA
   agora e um <button> que chama ADICIONAR AO CARRINHO (packages/checkout via
   /carrinho/estado), nunca mais um link pro WhatsApp. Fora do modo kit a PLP
   volta ao card simples (.card, ver partials.ts) — nao poluir a experiencia
   padrao com escolha de tamanho embutida. */
.qb-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
@media(min-width:560px){.qb-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-4) var(--space-3)}}
/* Para em 3 colunas de proposito: sao 6 cards, entao 3 fecha duas fileiras
   inteiras em qualquer desktop — uma quarta coluna deixaria a segunda fileira
   pela metade. */
@media(min-width:900px){.qb-grid{grid-template-columns:repeat(3,1fr)}}
/* Mobile: card DEITADO (foto de 92px a esquerda) pra caber produto + tamanhos
   + CTA sem virar uma torre de varias telas de rolagem. Do 560 pra cima vira
   card em pe, com a foto inteira. */
.qcard{display:flex;gap:var(--space-3);min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:var(--space-3)}
@media(min-width:560px){.qcard{flex-direction:column}}
.qcard-figure{flex:0 0 92px;width:92px;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line)}
@media(min-width:560px){.qcard-figure{flex:0 0 auto;width:100%;border-radius:var(--radius-tile)}}
.qcard-figure img{width:100%;height:100%;object-fit:cover}
.qcard-figure .ph{display:grid;place-items:center;height:100%;color:var(--ink-3);font-size:11px}
.qcard-body{display:flex;flex-direction:column;flex:1;min-width:0}
.qcard-brand{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-light)}
.qcard-name{margin-top:2px;font-size:13.5px;line-height:1.3;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.qcard-name:hover{color:var(--accent-light)}
.qcard-price{margin-top:4px;font-family:var(--font-display);font-size:14.5px;font-weight:700;color:var(--ink)}
.qcard-sizes{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-3)}
.qsize{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer}
.qsize input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.qsize:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.qsize:has(input:focus-visible){outline:2px solid var(--accent-light);outline-offset:2px}
/* min-height reservado: o texto muda ao escolher tamanho, e sem reserva o
   card inteiro pularia de altura a cada clique. */
.qcard-hint{margin:var(--space-2) 0 var(--space-3);font-size:11px;line-height:1.4;color:var(--ink-3);min-height:2.8em}
.qcard-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;min-height:46px;width:100%;
  background:var(--accent);color:var(--on-accent);font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:0 14px;border:1px solid var(--accent);border-radius:var(--radius-btn);text-align:center}
.qcard-cta:hover{background:var(--accent-light);border-color:var(--accent-light)}
.qb-foot{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-top:var(--space-4)}
.kit-banner{margin-bottom:var(--space-5);padding:var(--space-4);border:1px solid var(--accent-strong);border-radius:var(--radius-card);
  background:linear-gradient(135deg,var(--brand),#160a2e 70%)}
.kit-banner .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.kit-banner strong{font-family:var(--font-display);font-size:15px;color:var(--ink)}
.kit-banner .status{font-size:12.5px;color:var(--accent-light);font-weight:700}
.kit-banner .track{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.kit-banner .track span{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s ease}
.kit-banner .switch{margin-top:10px;font-size:12px;color:var(--ink-2)}
.kit-banner .switch a{color:var(--accent-light);text-decoration:underline}
/* PRICING V2 — tabela progressiva (Home/PLP/PDP) e kit fechado */
.tier-table{margin:0 0 var(--space-5);padding:var(--space-4);border:1px solid var(--accent-strong);border-radius:var(--radius-card);background:var(--surface-1)}
.tier-table h3{margin:0 0 10px;font-family:var(--font-display);font-size:15px;color:var(--ink)}
.tier-table table{width:100%;border-collapse:collapse;font-size:13.5px}
.tier-table th{text-align:left;font-weight:600;color:var(--ink-2);padding:6px 0;border-bottom:1px solid var(--line)}
.tier-table td{text-align:right;font-family:var(--font-display);font-weight:700;color:var(--ink);padding:6px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.tier-table tr:last-child th,.tier-table tr:last-child td{border-bottom:none}
.tier-table .tier-note{margin:10px 0 0;font-size:12px;color:var(--ink-2)}
.tier-table--compact{padding:var(--space-3);margin:var(--space-3) 0}
.tier-table--compact h3{font-size:13.5px}
.kit-fixed{margin:var(--space-3) 0;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:13px;color:var(--ink-2)}
.cart-item-list{display:block;font-size:11.5px;color:var(--ink-3);text-decoration:line-through;font-weight:400}
.cart-item-tier{display:block;font-size:11.5px;color:var(--accent-light);font-weight:600}
.cart-v2-progress{margin:0 0 var(--space-4);padding:var(--space-3);border:1px solid var(--accent-strong);border-radius:var(--radius-sm);font-size:13px;color:var(--ink-2)}
.cart-v2-progress strong{color:var(--ink)}
.cart-v2-progress ul{margin:6px 0 0;padding:0;list-style:none}
.cart-v2-progress li{padding:3px 0}
.cart-v2-progress .track{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:6px}
.cart-v2-progress .track span{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s ease}
@media(prefers-reduced-motion:reduce){.kit-banner .track span{transition:none}}
/* ==================================================================
   PROMOÇÕES (0014) — HERO DE LANÇAMENTO (.launch*), badge de card/PDP
   (.promo-badge), nota PLP/PDP (.promo-note) e progresso no carrinho
   (.cart-promo). Só aparece com promoção VIVA (decidido pelo servidor).
   Tipografia primeiro; sem imagem, sem canvas, sem vídeo. Mobile-first:
   320/375/390/430 sem overflow, CTA na primeira tela.
   ================================================================== */
.launch{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:var(--space-5);align-items:center;
  padding-block:var(--space-5) var(--space-5);margin-top:var(--space-3);
  border:1px solid rgba(0,230,194,.22);border-radius:var(--radius-card);
  background:
    radial-gradient(520px 320px at 12% 0%,rgba(0,230,194,.16),transparent 62%),
    radial-gradient(640px 420px at 100% 100%,rgba(37,16,74,.65),transparent 65%),
    linear-gradient(160deg,#080618 0%,#0b1330 55%,#070513 100%);
  box-shadow:0 0 0 1px rgba(0,230,194,.06) inset,0 30px 80px rgba(0,0,0,.45),var(--glow-hero)}
.launch-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 70% at 60% 45%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 70% at 60% 45%,#000 30%,transparent 100%)}
.launch-copy{position:relative;min-width:0}
.launch-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--space-3);font:700 11px/1 var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:var(--accent-light)}
.launch-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent),0 0 24px rgba(0,230,194,.6);animation:launch-breathe 2.8s ease-in-out infinite}
.launch-title{margin:0 0 var(--space-3);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.035em;line-height:.92;color:var(--ink)}
.launch-title__qty,.launch-title__price{display:block}
.launch-title__qty{font-size:clamp(2.55rem,1.35rem + 6.6vw,6.2rem)}
.launch-title__price{font-size:clamp(2.55rem,1.35rem + 6.6vw,6.2rem);color:var(--accent);
  text-shadow:0 0 18px rgba(0,230,194,.35),0 0 60px rgba(0,230,194,.18);white-space:nowrap}
.launch-title__price em{font-style:normal;font-size:.42em;letter-spacing:.06em;color:var(--ink);text-shadow:none;vertical-align:.12em;margin-left:.15em}
.launch-support{margin:0 0 var(--space-4);font:600 13px/1.6 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);max-width:34ch}
.launch-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.launch-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;
  background:var(--accent);color:var(--on-accent);font:700 14px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--accent-light);border-radius:var(--radius-btn);
  box-shadow:0 0 0 1px rgba(0,230,194,.35),0 0 28px rgba(0,230,194,.42),0 12px 30px rgba(0,0,0,.4);
  transition:transform .12s ease,box-shadow .2s ease,background .15s ease}
.launch-cta:hover{background:var(--accent-light);box-shadow:0 0 0 1px rgba(71,255,221,.5),0 0 40px rgba(0,230,194,.6),0 12px 30px rgba(0,0,0,.4)}
.launch-cta:active{transform:scale(.985)}
.launch-cta span{display:inline-block;transition:transform .15s ease}
.launch-cta:hover span{transform:translateX(3px)}
.launch-badge{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  font:700 10.5px/1 var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.04);backdrop-filter:blur(6px)}
.launch-proof{margin:var(--space-3) 0 0;font:600 12px/1.4 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.launch-proof strong{color:var(--ink);font-weight:700}
/* composição numérica (desktop) */
.launch-figure{display:none;position:relative;min-width:0}
.launch-panel{position:relative;overflow:hidden;aspect-ratio:1.06;max-width:520px;margin-left:auto;padding:22px;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:24px;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 45%,rgba(0,230,194,.06));
  box-shadow:0 0 0 1px rgba(0,230,194,.12),0 40px 90px rgba(0,0,0,.5),0 0 60px rgba(0,230,194,.12);
  backdrop-filter:blur(14px) saturate(130%);
  transform:perspective(1400px) rotateY(-7deg) rotateX(3deg);transform-origin:60% 50%;
  animation:launch-float 7s ease-in-out infinite}
.launch-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%)}
.launch-num{display:grid;justify-items:center;gap:6px;font-family:var(--font-display);font-weight:700;color:var(--ink);letter-spacing:-.05em;line-height:.9;text-align:center}
.launch-num__qty{font-size:clamp(5rem,4rem + 4vw,9.5rem);animation:launch-reveal .9s cubic-bezier(.2,.8,.2,1) both}
.launch-num__x{font-size:2rem;color:var(--ink-3);letter-spacing:0;animation:launch-reveal .9s .12s cubic-bezier(.2,.8,.2,1) both}
.launch-num__price{font-size:clamp(4.4rem,3.4rem + 3.6vw,8rem);color:var(--accent);text-shadow:0 0 22px rgba(0,230,194,.45),0 0 70px rgba(0,230,194,.2);
  animation:launch-reveal .9s .24s cubic-bezier(.2,.8,.2,1) both,launch-breathe-glow 3.4s 1.2s ease-in-out infinite}
.launch-num__price small{font-size:.3em;letter-spacing:0;vertical-align:.9em;margin-right:.1em;color:var(--accent-light)}
.launch-num__price i{font-style:normal;font-size:.48em;letter-spacing:-.02em;vertical-align:.6em}
.launch-label{position:absolute;font:700 10px/1 var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.launch-label--tl{top:16px;left:18px}.launch-label--tr{top:16px;right:18px;color:var(--accent-light)}
.launch-label--bl{bottom:16px;left:18px;color:var(--ink)}.launch-label--br{bottom:16px;right:18px}
.launch-sweep{position:absolute;top:-30%;left:-60%;width:40%;height:160%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent);transform:rotate(12deg);animation:launch-sweep 9s 2s ease-in-out infinite}
@keyframes launch-breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
@keyframes launch-breathe-glow{0%,100%{text-shadow:0 0 22px rgba(0,230,194,.45),0 0 70px rgba(0,230,194,.2)}50%{text-shadow:0 0 30px rgba(0,230,194,.65),0 0 90px rgba(0,230,194,.32)}}
@keyframes launch-float{0%,100%{transform:perspective(1400px) rotateY(-7deg) rotateX(3deg) translateY(0)}50%{transform:perspective(1400px) rotateY(-5deg) rotateX(2deg) translateY(-6px)}}
@keyframes launch-reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes launch-sweep{0%,55%{left:-60%}100%{left:140%}}
@media(min-width:600px){.launch{padding-block:var(--space-6)}.launch-support{font-size:14px}}
@media(min-width:900px){
  .launch{grid-template-columns:1.1fr .9fr;gap:var(--space-6);padding:var(--space-6) var(--space-6);margin-top:var(--space-4)}
  .launch-figure{display:block}
  .launch-title__price{white-space:normal}
}
@media(max-width:359px){.launch-cta{width:100%;padding:0 18px}.launch-support{letter-spacing:.1em;font-size:12px}.launch-title{letter-spacing:-.03em}}
@media(prefers-reduced-motion:reduce){
  .launch-dot,.launch-panel,.launch-num__qty,.launch-num__x,.launch-num__price,.launch-sweep{animation:none}
  .launch-panel{transform:none}.launch-cta,.launch-cta span{transition:none}
}
/* badge de card/PDP */
.promo-badge{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 5px;max-width:100%;margin-top:6px;padding:3px 9px;border:1px solid rgba(0,230,194,.45);border-radius:12px;
  font:600 10px/1.3 var(--font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--accent-light);background:rgba(0,230,194,.08);white-space:normal;vertical-align:middle}
.promo-badge b{font-weight:700;color:var(--ink)}
.pdp .price .promo-badge{margin-left:8px;font-size:11px}
/* nota PLP/PDP */
.promo-note{margin:0 0 var(--space-4);padding:var(--space-3) var(--space-4);border:1px solid rgba(0,230,194,.35);border-radius:var(--radius-card);
  background:linear-gradient(135deg,rgba(0,230,194,.1),rgba(13,10,31,.6) 60%)}
.promo-note--compact{padding:var(--space-3);margin:var(--space-3) 0}
.promo-note__eyebrow{margin:0 0 4px;font:700 10.5px/1 var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-light)}
.promo-note__rule{margin:0;font-family:var(--font-display);font-size:16px;line-height:1.3;color:var(--ink)}
.promo-note__rule strong{color:var(--accent)}
.promo-note__hint{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--ink-2)}
/* progresso no carrinho + checkout */
.cart-promo{margin:0 0 var(--space-3);padding:var(--space-3);border:1px solid rgba(0,230,194,.4);border-radius:var(--radius-sm);
  background:linear-gradient(135deg,rgba(0,230,194,.1),rgba(13,10,31,.5) 65%);font-size:13px;color:var(--ink-2)}
.cart-promo__title{margin:0 0 4px;font:700 10.5px/1 var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-light)}
.cart-promo__main{margin:0;color:var(--ink);font-weight:600}
.cart-promo__main strong{color:var(--accent)}
.cart-promo__sub{margin:4px 0 0;font-size:12px}
.cart-promo .track{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:8px}
.cart-promo .track span{display:block;height:100%;background:var(--accent);border-radius:999px;box-shadow:0 0 10px rgba(0,230,194,.6);transition:width .3s ease}
.cart-promo--done{border-color:var(--accent)}
.cart-item-promo{display:block;font-size:11.5px;color:var(--accent-light);font-weight:600;white-space:normal;max-width:120px;text-align:right;line-height:1.3}
@media(prefers-reduced-motion:reduce){.cart-promo .track span{transition:none}}

/* -------- chips de categoria (lista COMPLETA: Home e topo da PLP) -------- */
.cat-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.cat-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border:1px solid var(--line-strong);
  border-radius:var(--radius-chip);font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--surface)}
.cat-chip:hover{border-color:var(--accent);color:var(--accent-light)}
.cat-chip .n{color:var(--ink-3);font-weight:500;font-size:11.5px}
.cat-chip.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cat-chip.is-active .n{color:var(--on-accent);opacity:.75}

/* -------- marcas em destaque: pills da loja real (marca extraida do nome publico) -------- */
.brand-pills{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.brand-pill{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:9px 16px;border:1px solid var(--line-strong);
  border-radius:var(--radius-chip);font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--ink-2);background:var(--surface)}
.brand-pill:hover{border-color:var(--accent);color:var(--accent-light)}
.brand-pill .n{color:var(--ink-3);font-weight:500}

/* -------- faixa editorial -------- */
.editorial{position:relative;background:var(--brand);color:var(--on-brand);padding:var(--space-7) var(--space-4);text-align:center;overflow:hidden;border-radius:var(--radius-card)}
.editorial .eyebrow{color:var(--accent-light)}
.editorial h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);margin:0 0 var(--space-2)}
.editorial p{color:color-mix(in srgb,var(--on-brand) 78%,transparent);font-size:14.5px;margin:0 0 var(--space-4)}

/* -------- "selecionados": grid editorial com ritmo (1 destaque + complementares) --------
   Card em destaque usa a MESMA proporcao 3:4 + cover dos demais cards de produto (nunca
   uma terceira proporcao) — achado real de review adversarial: chegou a usar 16:10 (=8:5)
   no mobile e 1:1 no desktop, exatamente o crop que a Final Spec V5 §14 invalidou com
   medicao real das 422 fotos (corte medio 47.9%, 96.4% com corte severo). O destaque
   continua vindo do layout (ocupa a largura inteira / 2x2, glow, box-shadow), nunca de
   uma proporcao de imagem diferente. Ver .card-figure abaixo para a decisao completa. */
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3) var(--space-2)}
.feature-grid .card:first-child{grid-column:1/-1}
.feature-grid .card:first-child{box-shadow:var(--glow-feat);border-radius:var(--radius-card)}
@media(min-width:600px){
  .feature-grid{grid-template-columns:repeat(4,1fr);gap:var(--space-4) var(--space-3)}
  .feature-grid .card:first-child{grid-column:span 2;grid-row:span 2}
}

/* -------- grid de produtos: produto como protagonista, glow SO no card em destaque -------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4) var(--space-3)}
@media(min-width:600px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,1fr);gap:var(--space-5) var(--space-4)}}
.card{display:block}
/* 3:4 (retrato), NAO 8:5, NAO 4:5. Historico: o Lab aprovou 8:5 como
   referencia estetica. O gate de QA de producao (25/08/2026) mediu as 422
   fotos vendaveis reais (nao so uma amostra) e invalidou 8:5 por completo —
   0 fotos proximas de 1.6:1, corte medio de 47.9% da altura, 96.4% das
   fotos com corte severo (>35%). Primeiro ajuste foi para 4:5 (corte medio
   5.2%, 2.1% severo) — tecnicamente defensavel mas ainda nao a mediana real
   do catalogo. Review adversarial independente (auditoria completa das 422
   dimensoes reais) mostrou que a mediana exata e 0.750 = 3:4 — corte medio
   1.3%, ZERO fotos com corte severo, 89.1% praticamente intactas, e ja
   consistente com .cat-tile (que sempre usou 3:4). DECISAO HUMANA FINAL
   (nao redesign): 3:4 + object-fit:cover, nunca contain (a mistura real de
   68.5% retrato / 27.7% quadrada faria contain produzir letterbox
   irregular, quebrando a grade flush do C3). Ver docs/design-v5/
   V5-HYBRID-FINAL-SPEC.md §5/§13 para o registro completo da decisao. */
.card-figure{aspect-ratio:3/4;background:var(--surface-2);overflow:hidden;position:relative;border-radius:var(--radius-card);border:1px solid var(--line)}
.card-figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-figure img{transform:scale(1.035)}
.card:hover .card-figure{border-color:var(--line-strong)}
.card-figure .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);font-size:11px;letter-spacing:.04em}
.card-brand{margin-top:var(--space-3);font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-light)}
.card-name{margin-top:2px;font-size:14px;color:var(--ink);line-height:1.35;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card:not(:has(.card-brand)) .card-name{margin-top:var(--space-3)}
.card-price{margin-top:5px;font-family:var(--font-display);font-size:14.5px;color:var(--ink);font-weight:700}
.card-sizes{margin-top:4px;font-size:11.5px;letter-spacing:.03em;color:var(--ink-3)}

/* -------- filtros do catalogo -------- */
.catalog-head{padding:var(--space-5) 0 var(--space-4);border-bottom:1px solid var(--line);margin-bottom:var(--space-5)}
.catalog-head h1{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);margin:0 0 6px;letter-spacing:-.01em}
.catalog-head .count{font-size:13px;color:var(--ink-3)}

/* -------- utilitarios de acessibilidade -------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--space-3);top:-100px;z-index:100;background:var(--accent);color:var(--on-accent);
  padding:10px 18px;border-radius:var(--radius-sm);font-family:var(--font-display);font-weight:700;font-size:13px;transition:top .15s ease}
.skip-link:focus{top:var(--space-3)}
body.no-scroll{overflow:hidden}

/* -------- PLP: tamanho rapido, controles, ordenacao -------- */
.quick-sizes{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.quick-size{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;
  border:1px solid var(--line-strong);border-radius:var(--radius-chip);font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--ink-2)}
.quick-size:hover{border-color:var(--accent);color:var(--accent-light)}
.quick-size.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.catalog-controls{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-top:var(--space-4)}
.catalog-controls .btn-outline{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;font-size:12.5px}
.catalog-controls .btn-outline svg{width:16px;height:16px}
.sort-form select{appearance:none;font:13px/1.4 var(--font-body);color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius-chip);padding:0 28px 0 14px;height:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23847fa0'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.sort-form select:focus{outline:none;border-color:var(--accent)}

/* -------- PLP: filtros aplicados (chips removiveis) -------- */
.applied-filters{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:7px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-chip);
  font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--surface)}
.chip:hover{border-color:var(--accent);color:var(--accent-light)}
.chip span{color:var(--ink-3)}
.chip-clear{border-style:dashed;color:var(--ink-3)}

/* -------- PLP: drawer de filtros (dialog acessivel) -------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(4,3,10,.6);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);max-width:100vw;background:var(--surface-solid);
  border-left:1px solid var(--line);z-index:41;display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,.5)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);border-bottom:1px solid var(--line)}
.drawer-head h2{font-family:var(--font-display);font-weight:700;font-size:17px;margin:0}
.drawer-close{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);background:none;border:none}
.drawer-close svg{width:18px;height:18px}
.drawer-body{overflow-y:auto;padding:var(--space-4);flex:1}
.drawer-section{margin-bottom:var(--space-5)}
.drawer-section h3{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--space-3)}
.size-toggle-group{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.size-toggle{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.size-toggle input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.size-toggle:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.size-toggle:has(input:focus-visible){outline:2px solid var(--accent-light);outline-offset:2px}
.drawer-section select{width:100%;appearance:none;font:14px/1.4 var(--font-body);color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:0 28px 0 14px;height:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23847fa0'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.price-toggle-group{display:flex;flex-direction:column;gap:var(--space-2)}
.price-toggle{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.price-toggle input{width:18px;height:18px;accent-color:var(--accent)}
.drawer-foot{display:flex;gap:var(--space-3);padding:var(--space-4);border-top:1px solid var(--line)}
.drawer-foot .btn-outline{flex:0 0 auto;min-height:48px;display:inline-flex;align-items:center;padding:0 18px;font-size:12.5px}
.drawer-foot .btn{flex:1;min-height:48px;justify-content:center}
@media(min-width:640px){.drawer{width:420px}}

/* -------- carrinho: reusa a MESMA primitiva de drawer (.drawer/.drawer-head/
   .drawer-body/.drawer-foot), so o conteudo interno muda -------- */
.cart-empty{padding:var(--space-6) 0;text-align:center;color:var(--ink-2);font-size:14px}
.cart-item{display:grid;grid-template-columns:56px 1fr auto;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.cart-item-figure{grid-row:1/3;width:56px;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line)}
.cart-item-figure img{width:100%;height:100%;object-fit:cover}
.cart-item-figure .ph{display:grid;place-items:center;height:100%;color:var(--ink-3);font-size:9px}
.cart-item-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.cart-item-name{font-size:13.5px;color:var(--ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cart-item-name:hover{color:var(--accent-light)}
.cart-item-size{font-size:11.5px;color:var(--ink-3)}
/* flex-wrap: a 320px a linha (− 1 + Remover) media ~150px para ~148px uteis e o
   "Remover" estourava 2px o drawer; quebrando, ele desce de linha sem cortar. */
.cart-item-qty{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px}
.qty-btn{min-width:28px;min-height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:15px;line-height:1}
.qty-btn:hover{border-color:var(--accent);color:var(--accent-light)}
.cart-item-qty span{min-width:1.5em;text-align:center;font-family:var(--font-display);font-size:13px;font-weight:700}
.cart-item-remove{margin-left:6px;font-size:11.5px;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px;background:none;border:none;padding:4px 0}
.cart-item-remove:hover{color:var(--ink)}
.cart-item-warn{grid-column:1/-1;margin:6px 0 0;font-size:11.5px;color:#ff9d6b}
.cart-item-subtotal{grid-row:1;font-family:var(--font-display);font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.cart-kit-progress{margin:0 0 var(--space-4);padding:var(--space-3);border:1px solid var(--accent-strong);border-radius:var(--radius-sm);
  background:rgba(0,230,194,.06);font-size:12.5px;color:var(--ink-2)}
.cart-kit-progress strong{color:var(--ink);font-family:var(--font-display)}
.cart-kit-track{margin-top:8px;height:4px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.cart-kit-track span{display:block;height:100%;background:var(--accent);border-radius:999px}
.cart-kit-switch{margin:0 0 var(--space-4);padding:var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--surface);font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:8px}
.cart-kit-switch .actions{display:flex;gap:8px}
.cart-kit-switch button{min-height:36px;padding:0 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:700;font-family:var(--font-display)}
.cart-kit-switch button[data-kit-confirm]{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent)}
.cart-kit-switch button[data-kit-cancel]{background:none;color:var(--ink-2);border:1px solid var(--line-strong)}
.cart-totals{margin:var(--space-4) 0 0;font-size:13px;color:var(--ink-2)}
.cart-totals div{display:flex;justify-content:space-between;padding:4px 0}
.cart-totals dt,.cart-totals dd{margin:0;font-weight:400}
.cart-totals .cart-total-final{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:14.5px}
.cart-drawer-continue{display:block;text-align:center;margin-top:var(--space-3);font-size:12.5px;color:var(--ink-3)}
.cart-drawer-continue:hover{color:var(--accent-light)}

/* -------- checkout: pagina progressiva (funciona sem JS — todos os
   fieldsets ficam visiveis; JS so acrescenta a navegacao passo-a-passo) -------- */
/* padding-BLOCK, nunca o shorthand: .checkout e .order-page tambem carregam
   .container — o shorthand zerava a goteira lateral e, no mobile, o titulo
   "Finalizar compra"/"Pedido recebido" ficava colado na borda (achado real de
   19/09/2026, presente em PROD desde o V5). O max-width soma a goteira dos
   dois lados para o conteudo continuar com os mesmos 560px/640px no desktop. */
.checkout{padding-block:var(--space-5) var(--space-8);max-width:calc(560px + 2 * var(--gutter))}
.checkout h1{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);margin:0 0 var(--space-5)}
.checkout-error{margin:0 0 var(--space-5);padding:var(--space-3);border:1px solid #ff6b6b;border-radius:var(--radius-sm);background:rgba(255,107,107,.08);color:#ffb3b3;font-size:13.5px}
.checkout-form label{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-3);font-size:13px;color:var(--ink-2)}
.checkout-form input[type=text],.checkout-form input[type=tel]{min-height:46px;padding:0 14px;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:14px/1.4 var(--font-body)}
.checkout-form input:focus{outline:none;border-color:var(--accent)}
.checkout-step{border:none;margin:0 0 var(--space-5);padding:0}
.checkout-step legend{font-family:var(--font-display);font-weight:700;font-size:15px;margin-bottom:var(--space-3);padding:0}
/* ".checkout-form label.checkout-radio" (nao so ".checkout-radio"): precisa
   de especificidade MAIOR que ".checkout-form label" (que fixa
   flex-direction:column) pra vencer na cascata sem !important — a suite
   hidden-cascade.test.ts trava que SO [hidden] usa !important no
   stylesheet inteiro (garante que nada mais possa voltar a vencer o
   contrato de [hidden]). ATENCAO: nunca usar crase (backtick) dentro deste
   bloco CSS — o bloco inteiro e um template literal de TypeScript, e uma
   crase crua fecharia a string no meio, quebrando o arquivo inteiro (foi
   exatamente isso que aconteceu aqui, corrigido nesta mesma rodada). */
.checkout-form label.checkout-radio{flex-direction:row;align-items:center;gap:12px;min-height:52px;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer}
.checkout-radio input{width:18px;height:18px;accent-color:var(--accent)}
.checkout-radio span{margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.checkout-hint{font-size:13px;color:var(--ink-3);margin:0 0 var(--space-3)}
/* LAUNCH READINESS — cotação de frete no passo 3 */
.checkout-quote-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin:0 0 var(--space-3);font-size:13.5px}
.checkout-quote-bar button{white-space:nowrap}
.checkout-quote-options{display:flex;flex-direction:column;gap:8px;margin:0 0 var(--space-3)}
.checkout-quote-options:empty{display:none}
.checkout-radio .q-meta{margin-left:0;display:block;font-size:11.5px;color:var(--ink-3)}
.checkout-radio .q-price{margin-left:auto;font-size:13.5px;color:var(--ink);font-weight:600}
.checkout-radio.q-main{flex-wrap:wrap}
.checkout-radio .q-body{display:flex;flex-direction:column;gap:2px}
.checkout-quote-status.err{color:#ffb3b3}
.checkout-step-actions{display:flex;gap:var(--space-3);margin-top:var(--space-4)}
.checkout-totals{margin:var(--space-4) 0;font-size:13.5px;color:var(--ink-2)}
.checkout-totals div{display:flex;justify-content:space-between;padding:5px 0}
.checkout-note{font-size:12px;color:var(--ink-3);margin:0 0 var(--space-4)}
#checkout-review-items .cart-item-subtotal{grid-row:auto}

/* -------- pedido: confirmacao pos-checkout -------- */
.order-page{padding-block:var(--space-6) var(--space-8);max-width:calc(640px + 2 * var(--gutter))}
.order-hero{margin-bottom:var(--space-6)}
.order-hero .eyebrow{color:var(--accent-light)}
.order-hero h1{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);margin:0 0 8px}
.order-hero p{color:var(--ink-2);font-size:14px;margin:0}
.order-expiry{display:inline-block;margin-top:var(--space-3);padding:8px 14px;border:1px solid var(--accent-strong);
  border-radius:var(--radius-chip);font-size:12px;color:var(--accent-light)}
.order-section{margin-bottom:var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid var(--line)}
.order-section h2{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--space-3)}
.order-item{display:flex;justify-content:space-between;gap:var(--space-3);padding:8px 0;font-size:13.5px;color:var(--ink-2)}
.order-item b{color:var(--ink);font-weight:500}
.order-cta{margin-top:var(--space-5)}
.order-expired{margin:var(--space-3) 0 0;padding:14px 16px;border:1px solid #f0a33c;border-radius:var(--radius-sm);
  background:rgba(240,163,60,.1);color:#ffd9a8;font-size:13px;line-height:1.55}
.order-expired b{color:#ffb454;font-weight:600}
.order-cancelled{margin:var(--space-3) 0 0;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink-2);font-size:13px;line-height:1.55}
.order-cancelled b{color:var(--ink);font-weight:600}
.order-tracking{display:inline-block;margin-top:var(--space-3);padding:8px 14px;border:1px solid var(--accent-strong);
  border-radius:var(--radius-chip);font-size:12px;color:var(--accent-light)}
.order-tracking b{font-weight:700}

/* -------- PLP: "mostrar mais" + progresso -------- */
.load-more{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-6) 0}
.load-more .btn-outline{min-height:48px;padding:0 32px}
.load-more-progress{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(320px,100%)}
.load-more-track{width:100%;height:4px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.load-more-fill{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s ease}
.load-more-left{font-size:12px;color:var(--ink-3);letter-spacing:.02em}
@media(prefers-reduced-motion:reduce){.load-more-fill{transition:none}}

/* Barra de categorias da PLP: rola na horizontal no mobile em vez de virar um
   paredao de 18 chips empilhados. scroll-padding alinha o chip ativo. */
.plp-cats{margin-top:var(--space-4);flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-left:var(--space-3);
  padding-bottom:var(--space-2);margin-bottom:calc(var(--space-2) * -1)}
.plp-cats::-webkit-scrollbar{display:none}
.plp-cats .cat-chip{flex:0 0 auto;scroll-snap-align:start}
@media(min-width:900px){.plp-cats{flex-wrap:wrap;overflow:visible}}

/* -------- estado vazio / erro -------- */
.empty{padding:var(--space-8) var(--space-3);text-align:center;color:var(--ink-2)}
.empty b{display:block;font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink);margin-bottom:var(--space-3)}

/* -------- detalhe de produto: PDP orientada a acao (disciplina comercial) -------- */
.pdp{display:grid;gap:var(--space-5);padding:var(--space-5) 0 var(--space-4)}
.pdp-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}
.pdp-gallery img{aspect-ratio:1/1;object-fit:cover;background:var(--surface-2);border-radius:var(--radius-card);border:1px solid var(--line)}
.pdp-gallery .lead{grid-column:1/-1}
.pdp-info{align-self:start}
.crumb{font-size:12px;color:var(--ink-3);margin-bottom:var(--space-4)}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--accent-light)}
.pdp-brand{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-light);margin:0 0 6px}
.pdp h1{font-family:var(--font-display);font-weight:700;font-size:var(--fs-pdp-name);margin:0 0 var(--space-2);line-height:1.1;letter-spacing:-.01em}
.pdp .price{font-family:var(--font-display);font-size:24px;color:var(--ink);margin:0 0 var(--space-5);font-weight:700}
.size-label{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-2)}
.size-label span{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.sizes{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-5)}
.size-chip{min-width:52px;min-height:44px;text-align:center;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  border-radius:var(--radius-sm);padding:11px 14px;font-size:13px;font-weight:600}
.size-chip:not([disabled]):hover{border-color:var(--accent)}
.size-chip.selected{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.size-chip[disabled]{color:var(--ink-3);border-color:var(--line);background:var(--surface-2);
  text-decoration:line-through;text-decoration-color:var(--line-strong);cursor:not-allowed}
.pdp-cta{background:var(--surface-solid);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-6)}
.pdp-cta__price{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink)}
.pdp-cta__status{display:block;margin-top:2px;color:var(--ink-3);font-size:11.5px}
/* CTA VIVO: ADICIONA AO CARRINHO — cor de marca (--accent), nao mais o verde
   do WhatsApp (essa acao nao sai mais do site pro canal de terceiro; o
   WhatsApp virou handoff so DEPOIS do pedido criado, ver /pedido). Estado
   desabilitado (sem tamanho escolhido) fica cinza/neutro, nunca "clicavel de
   mentira" — o disabled real do <button> impede o clique. */
.pdp-buy{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--on-accent);
  font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:15px 22px;min-height:48px;border:1px solid var(--accent);border-radius:var(--radius-btn);white-space:nowrap;
  box-shadow:var(--glow-feat);transition:background .15s ease,transform .1s ease}
.pdp-buy:hover{background:var(--accent-light);border-color:var(--accent-light)}
.pdp-buy:active{transform:scale(.98)}
.pdp-buy[disabled]{background:var(--surface-2);color:var(--ink-3);border-color:var(--line-strong);box-shadow:none;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.pdp-buy{transition:none}}
.pdp-atendimento{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;margin-top:var(--space-3);
  font-size:12.5px;font-weight:700;color:var(--ink-2);border-bottom:1px solid transparent}
.pdp-atendimento svg{width:16px;height:16px}
.pdp-atendimento:hover{color:#3ee87f;border-color:#25D366}
.pdp .desc{white-space:pre-wrap;color:var(--ink-2);font-size:14px;line-height:1.7;max-width:52ch;
  padding-top:var(--space-5);border-top:1px solid var(--line)}
.pdp .desc[data-fallback="true"]{font-style:italic;color:var(--ink-3)}
@media(min-width:900px){
  .pdp{grid-template-columns:1.5fr 1fr;align-items:start;gap:var(--space-6);padding-bottom:var(--space-8)}
  .pdp-info{position:sticky;top:88px}
  .pdp-cta{position:static;box-shadow:none}
}
/* Mobile: barra de acao STICKY no rodape — preco e status sempre visiveis, nunca abaixo da dobra
   (padrao de conversao mobile 2026 — ver ecommerce-principles.md/references.md). */
@media(max-width:899px){
  .pdp-cta{position:sticky;bottom:0;z-index:15;border-radius:var(--radius-card) var(--radius-card) 0 0;
    /* A sangria negativa TEM que ser exatamente a goteira do container, senao
       a barra ultrapassa a viewport: com --space-4 (24px) fixo contra uma
       goteira de 20px sobravam 4px, e o body passava a rolar 364px numa tela
       de 360 (medido). Amarrar em --gutter mantem os dois sempre iguais. */
    box-shadow:0 -12px 30px rgba(0,0,0,.45);margin:0 calc(var(--gutter) * -1) 0;border-left:none;border-right:none;border-bottom:none;
    padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom,0px))}
  /* --pdp-sticky-height e medido de verdade em JS (altura real da barra, nunca um offset presumido) — 90px e so o fallback antes do primeiro layout. */
  .pdp{padding-bottom:calc(var(--pdp-sticky-height, 90px) + var(--space-3) + env(safe-area-inset-bottom,0px))}
}

/* -------- WhatsApp flutuante (canal de venda real da V1) --------
   z-index 25: acima do conteudo e da barra sticky da PDP (15), abaixo do
   drawer de filtros (41) e do seu backdrop (40) — quando o drawer abre, o
   botao fica coberto E inerte (entra em appShellEls() no JS abaixo), nunca
   flutuando por cima de um dialogo modal.
   A cor e a do WhatsApp (#25D366), nao um token da marca: e um simbolo de
   servico de terceiro, reconhecivel justamente por essa cor — mesma logica
   que ja vale pra marca de terceiro no catalogo. */
.wa-float{position:fixed;right:var(--gutter);z-index:25;display:inline-flex;align-items:center;gap:10px;
  bottom:calc(var(--wa-bottom, 20px) + env(safe-area-inset-bottom,0px));
  height:56px;padding:0 20px 0 16px;border-radius:var(--radius-btn);
  background:#25D366;color:#04140f;font-family:var(--font-display);font-size:13.5px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 22px rgba(37,211,102,.35);
  transition:transform .12s ease,box-shadow .15s ease}
.wa-float svg{width:26px;height:26px;flex:0 0 auto}
.wa-float:hover{background:#2ee674;transform:translateY(-1px)}
.wa-float:active{transform:scale(.97)}
/* No mobile o rotulo sai e o botao vira circulo: 56px de alvo, sem competir
   com o CTA da PDP nem cobrir preco/tamanho do card. */
@media(max-width:599px){.wa-float{width:56px;height:56px;padding:0;justify-content:center;gap:0}.wa-float .wa-label{display:none}}
/* A PDP NAO esconde mais o flutuante: o CTA principal da barra de acao virou
   "Adicionar ao carrinho" (cor de marca), entao o WhatsApp deixou de competir
   consigo mesmo ali — os dois botoes agora sao acoes DIFERENTES (comprar vs.
   atendimento), podem conviver como em qualquer outra pagina do site. */
@media(prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}}

/* -------- footer / bloco de informacoes --------
   Deixou de ser uma linha unica (marca + frase) e virou o bloco de informacao
   que um rodape de loja precisa ter: navegacao curta + canais REAIS. Instagram
   e TikTok sao os handles publicados da marca (ver INSTAGRAM_URL/TIKTOK_URL
   acima) — o rodape nunca renderiza um perfil adivinhado.
   padding-BLOCK, nunca o shorthand: este elemento nao e .container, mas o
   filho direto e, e a disciplina do arquivo inteiro e essa. */
footer.site{border-top:1px solid var(--line);padding-block:var(--space-6);margin-top:var(--space-7)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-5) var(--space-4)}}
.foot-col{min-width:0}
.foot-col h2{font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 var(--space-2)}
.foot-links{display:flex;flex-direction:column;align-items:flex-start}
.foot-links a{display:inline-flex;align-items:center;gap:9px;min-height:40px;font-size:13.5px;color:var(--ink-2)}
.foot-links a:hover{color:var(--accent-light)}
/* Rodapé: logo COMPLETA oficial (símbolo + "MultiDrop"), sem wordmark de texto
   ao lado — o nome já está na arte (alt carrega o nome pro leitor de tela). */
footer.site .fbrand{display:block;margin:0 0 var(--space-2) -8px}
footer.site .fbrand-logo{display:block;width:120px;height:120px;border-radius:16px}
.foot-note{margin:var(--space-3) 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:40ch}
.foot-note strong{color:var(--ink-2)}
.foot-social svg{width:17px;height:17px;flex:0 0 auto;color:var(--ink-3)}
.foot-social:hover svg{color:var(--accent-light)}
.foot-social .h{color:var(--ink-3);font-size:12px}
.foot-bottom{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line)}
footer.site small{color:var(--ink-3);font-size:11.5px}