/* GERADO por build-css.js — NÃO editar à mão. Edite os módulos em src/styles/. */
@layer reset, tokens, base, layout, components, utilities, overrides;

/* ===== _tokens.css → @layer tokens ===== */
@layer tokens {
/* =============================================================================
 * 01 · TOKENS — escala Fibonacci estática da loja (px). As cores/fonte/raio
 * vêm do tema da loja (injetados inline por themeCss: cores, fonte, radius,
 * maxw e fscale). Aqui só o que é igual para toda loja.
 * ===========================================================================*/
:root{
  --fib-3:3px;--fib-5:5px;--fib-8:8px;--fib-13:13px;--fib-21:21px;--fib-34:34px;
  --fib-55:55px;--fib-89:89px;--fib-144:144px;--fib-233:233px;--fib-377:377px;--fib-610:610px;
  --ok:#059669;
  /* Cores de estado universais (não-tema): iguais em qualquer loja. Usar token
     em vez de hex cru no markup garante padronização e reuso multi-tenant. */
  --c-ok:#059669;
  --c-danger:#dc2626;
  --c-warn:#d97706;
  /* Alturas de controle padrão (input/botão) — base da padronização de forms. */
  --control-h:34px;
  --control-h-lg:42px;
  /* Espessura de borda padrão e anel de foco — consistência em todos os campos. */
  --line-w:1px;
  --focus-ring:0 0 0 3px color-mix(in srgb, var(--c-brand) 16%, transparent);
  /* Sobreposição do herói (escurecimento sobre a imagem) — render ajusta por seção. */
  --hero-overlay:.35;
  /* Tipografia fluida (clamp) — SÓ títulos de destaque (hero/section-title), não
     body/labels/botões. Faixa moderada (~1.5x) entre o mínimo e o máximo, escalando
     com a viewport sem media query. rem dentro do clamp (acompanha --fscale via html). */
  --fs-h1: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  --fs-h2: clamp(1.4rem, 1rem + 1.6vw, 2rem);
  --fs-h3: clamp(1.15rem, .95rem + .8vw, 1.5rem);
  --fs-lead: clamp(1.05rem, .98rem + .4vw, 1.25rem);
}

}

/* ===== _base.css → @layer base ===== */
@layer base {
/* =============================================================================
 * 02 · BASE — reset enxuto, elementos raiz e tipografia base.
 * ===========================================================================*/
*{box-sizing:border-box;margin:0}
/* overflow-x:clip evita scroll horizontal das seções full-bleed (hero--full) sem
 * criar contêiner de rolagem (não quebra o position:sticky do cabeçalho). */
html{font-size:calc(16px * var(--fscale,1));overflow-x:clip}
body{font-family:var(--font);color:var(--c-ink);background:var(--c-bg)}
a{color:inherit;text-decoration:none}
/* Títulos com peso forte (casa com fontes modernas tipo Montserrat). */
h1,h2,h3,h4{font-weight:700;line-height:1.15}

}

/* ===== _layout.css → @layer layout ===== */
@layer layout {
/* =============================================================================
 * 03 · LAYOUT — contêiner principal, seções e faixas full-bleed (sec-band).
 * ===========================================================================*/
/* Texto centralizado é o PADRÃO de toda página. Respiro de topo/fundo PADRONIZADO
 * em todas as páginas (mesma margem em cima e embaixo). */
main{max-width:var(--maxw);margin:0 auto;padding:var(--fib-55) var(--fib-21);text-align:center}
/* Exceção: a 1ª seção full-bleed (herói da home) encosta no menu — anula o respiro
 * do topo só nesse caso, sem afetar as demais páginas (favoritos, conta, etc.). */
main>.hero--full:first-child{margin-top:calc(-1 * var(--fib-55))}
/* Componentes estruturados/funcionais voltam à esquerda (legibilidade): detalhe do
 * produto, tabelas, totais, endereço, filtros, conta, pedidos, avaliações e campos de form. */
.pd,table,.totals-box,.addr-grid,.filter-form,.acc-form,.ord-card,.ord-items,.rev-item,.rev-form,.litem{text-align:left}
input,select,textarea,label{text-align:left}

/* ---- Ritmo padrão de seção (igual para toda loja) ----------------------- */
/* Uma seção = um bloco com respiro vertical consistente. O espaçamento entre
 * seções é responsabilidade do .sec (não dos grids internos), evitando margens
 * empilhadas e desiguais. */
.sec{margin:0 0 var(--fib-89)}
.sec:last-child{margin-bottom:0}

/* Cabeçalho de seção SEMPRE centralizado e padronizado (título + descrição). */
h2.sec-title{text-align:center;font-size:var(--fs-h2,var(--fib-34));font-weight:700;line-height:1.15;letter-spacing:-.01em;max-width:var(--fib-987);margin:0 auto var(--fib-34)}
.sec-sub{text-align:center;color:var(--c-muted);max-width:var(--fib-610);margin:calc(-1*var(--fib-21)) auto var(--fib-34);line-height:1.6}

/* Faixa de seção: opcionalmente sangra até a borda do padding do main (fundo por seção). */
.sec-band{margin-bottom:var(--fib-89)}
.sec-band.bg{margin-inline-start:calc(-1*var(--fib-21));margin-inline-end:calc(-1*var(--fib-21));padding-inline-start:var(--fib-21);padding-inline-end:var(--fib-21)}
.sec-band>.sec,.sec-band>section{margin-bottom:0}

}

/* ===== _header.css → @layer layout ===== */
@layer layout {
/* =============================================================================
 * 04 · HEADER (estilo pinha) — anúncio escuro + barra única (logo · busca ·
 * ícones) alinhada na mesma altura + menu centralizado em maiúsculas abaixo.
 * Ícones via Font Awesome. Drawer mobile + breadcrumbs no fim.
 * ===========================================================================*/
/* Barra de anúncio escura, em maiúsculas, com ícone. */
.ann{background:#1a1a1a;color:#fff;text-align:center;padding:var(--fib-8) var(--fib-21);font-size:var(--fib-13);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.ann i{margin-inline-end:var(--fib-5);opacity:.9}

header{background:var(--c-headerbg);border-bottom:1px solid var(--c-line)}
header.sticky{position:sticky;top:0;z-index:50}

/* Barra principal: logo (esq) · busca grande (centro) · ícones (dir) — alinhados. */
.hbar{display:flex;align-items:center;justify-content:space-between;gap:var(--fib-21);width:100%;padding:var(--fib-21) var(--fib-34)}
.hlogo{display:flex;align-items:center;gap:var(--fib-8);flex:none;color:var(--c-ink)}
.hlogo .logo{width:var(--fib-34);height:var(--fib-34);border-radius:var(--radius);background:var(--c-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.hlogo h1{font-size:var(--fib-21);font-weight:800;letter-spacing:.01em;white-space:nowrap}
.logoimg{height:var(--fib-55);max-width:var(--fib-233);object-fit:contain;display:block}

/* Busca grande arredondada (pill) no centro. */
.hsearch{flex:1;display:flex;align-items:center;background:var(--c-surface);border:1px solid var(--c-line);border-radius:999px;padding:0 var(--fib-5) 0 var(--fib-21);max-width:var(--fib-610)}
.hsearch input{flex:1;height:var(--fib-55);border:0;background:transparent;margin:0;padding:0;font-size:var(--fib-13);color:var(--c-ink)}
.hsearch input:focus{outline:none}
.hsearch button{flex:none;border:0;background:transparent;color:var(--c-muted);width:var(--fib-34);height:var(--fib-34);cursor:pointer;font-size:var(--fib-21);display:flex;align-items:center;justify-content:center;border-radius:50%}
.hsearch button:hover{color:var(--c-brand)}

/* Ícones do header — mesma altura, FA. */
.hicons{display:flex;align-items:center;gap:var(--fib-21);flex:none}
.hicon{position:relative;color:var(--c-brand);font-size:var(--fib-21);display:flex;align-items:center;line-height:1}
.hicon:hover{color:var(--c-brand)}
.cart-ic .cart-badge{position:absolute;top:calc(-1*var(--fib-8));right:calc(-1*var(--fib-8));background:var(--c-brand);color:#fff;font-size:10px;font-weight:700;min-width:var(--fib-13);height:var(--fib-13);border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 var(--fib-3)}

/* Menu centralizado em MAIÚSCULAS, abaixo da barra (linha separada). */
.hnav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--fib-34);padding:var(--fib-13) var(--fib-34) var(--fib-21);border-top:1px solid var(--c-line)}
.hnav a{font-weight:700;color:var(--c-ink);font-size:var(--fib-13);text-transform:uppercase;letter-spacing:.06em}
.hnav a:hover{color:var(--c-brand)}

/* WhatsApp flutuante */
.wa-float{position:fixed;right:var(--fib-21);bottom:var(--fib-21);width:var(--fib-55);height:var(--fib-55);border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fib-34);box-shadow:0 var(--fib-5) var(--fib-21) rgba(0,0,0,.25);z-index:60;transition:transform .15s}
.wa-float:hover{transform:scale(1.08)}

/* Menu mobile (drawer só com CSS) */
.mnav-btn{display:none;font-size:var(--fib-21);cursor:pointer;line-height:1;align-items:center;color:var(--c-brand);user-select:none}
.mnav-drawer a i{margin-inline-end:var(--fib-8);width:var(--fib-21);text-align:center;color:var(--c-brand)}
.mnav-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:90}
.mnav-drawer{position:fixed;top:0;left:0;bottom:0;width:min(280px,80vw);background:var(--c-surface);border-right:1px solid var(--c-line);transform:translateX(-100%);transition:transform .2s ease;z-index:95;padding:var(--fib-34) var(--fib-21);display:flex;flex-direction:column;gap:var(--fib-13);overflow-y:auto}
.mnav-drawer a{font-weight:600;font-size:var(--fib-21);padding:var(--fib-8) 0;border-bottom:1px solid var(--c-line)}
.mnav-close{position:absolute;top:var(--fib-13);right:var(--fib-13);width:var(--fib-34);height:var(--fib-34);display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--c-line);background:var(--c-bg);font-size:var(--fib-21);cursor:pointer;line-height:1;color:var(--c-ink);z-index:2;transition:border-color .2s,color .2s}
.mnav-close:hover{border-color:var(--c-brand);color:var(--c-brand)}
.mnav-search input{width:100%;height:var(--fib-34);border:1px solid var(--c-line);border-radius:var(--radius);padding:0 var(--fib-13);margin-bottom:var(--fib-8)}
.mnav-toggle:checked~.mnav-scrim{display:block}
.mnav-toggle:checked~.mnav-drawer{transform:translateX(0)}

/* Breadcrumbs */
.crumbs{font-size:var(--fib-13);color:var(--c-muted)}
.crumbs a{color:var(--c-brand);font-weight:600}.crumbs span{margin:0 var(--fib-5)}

}

/* ===== _buttons.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 05 · BUTTONS — botão primário/accent/secundário/ghost.
 * ===========================================================================*/
.btn{padding:var(--fib-13) var(--fib-21);border:0;border-radius:var(--radius);background:var(--c-brand);color:#fff;font-size:var(--fib-13);cursor:pointer;text-align:center;display:inline-block;width:100%;font-family:inherit;transition:filter .15s,transform .12s}
.btn:hover{filter:brightness(1.06)}
.btn.accent{background:var(--c-accent)}
.btn.sec{background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-line)}
.btn.ghost{background:transparent;color:var(--c-muted);border:1px solid var(--c-line)}
.btn:disabled{background:#ccc;cursor:not-allowed}

}

/* ===== _hero.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 06 · HERO — banner principal da home. Suporta imagem de fundo com overlay
 * configurável (::before), alturas (sm/md/lg) e modo full-bleed (edge-to-edge),
 * para casar com lojas de moda image-forward.
 * ===========================================================================*/
.hero{position:relative;overflow:hidden;border-radius:var(--radius);padding:var(--fib-89) var(--fib-34);background:var(--c-surface);border:1px solid var(--c-line);margin-bottom:var(--fib-89);background-size:cover;background-position:center}
.hero.img{color:#fff;text-shadow:0 1px 13px rgba(0,0,0,.45);border:0}
/* Overlay escuro sobre a imagem (intensidade vinda de --hero-overlay, ajustada por seção). */
.hero.img::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--hero-overlay,.35));z-index:0}
.hero>*{position:relative;z-index:1}
.hero h2{font-size:var(--fs-h1,var(--fib-55));font-weight:800;line-height:1.05;margin-bottom:var(--fib-21);letter-spacing:-.02em}
/* Herói de capa (md/lg): título com presença forte, como loja de moda. */
.hero.h-md h2,.hero.h-lg h2{font-size:clamp(2.25rem,1.4rem + 3.6vw,3.75rem)}
.hero p{font-size:var(--fs-lead,var(--fib-21));opacity:.95;margin-bottom:var(--fib-21);max-width:var(--fib-610)}
.hero.center{text-align:center}.hero.center p{margin-inline-start:auto;margin-inline-end:auto}
/* CTA do herói: largura natural (não estica como botão de card). */
.hero .btn{width:auto;min-width:var(--fib-144)}

/* Alturas — md/lg centralizam o conteúdo verticalmente (hero "de capa"). */
.hero.h-md{min-height:48vh;display:flex;flex-direction:column;justify-content:center}
.hero.h-lg{min-height:72vh;display:flex;flex-direction:column;justify-content:center}
.hero.center.h-md,.hero.center.h-lg{align-items:center}

/* Full-bleed: sangra até as bordas da viewport (sem cantos/borda) — visual de loja de moda.
 * Negative margins sem width:100vw para não criar scroll horizontal por causa da barra de rolagem. */
.hero--full{margin-inline-start:calc(-50vw + 50%);margin-inline-end:calc(-50vw + 50%);border-radius:0;border:0}

}

/* ===== _products.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 07 · PRODUCTS — grade da vitrine, cartão de produto (com variante "fashion"
 * image-forward + hover-zoom), página de produto (galeria/lightbox) e preço.
 * ===========================================================================*/
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(233px,1fr));gap:var(--fib-21)}
/* Estado vazio/carregando dentro de um grid ocupa a largura toda (centraliza de verdade). */
.grid .empty,.grid>p{grid-column:1/-1}
.card{position:relative;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--fib-21);display:flex;flex-direction:column;gap:var(--fib-8);text-align:center;transition:box-shadow .18s,transform .18s}
.card strong{font-size:var(--fib-13);font-weight:600;line-height:1.3}
.card:hover{box-shadow:0 var(--fib-8) var(--fib-34) rgba(0,0,0,.10);transform:translateY(-3px)}
/* Miniatura QUADRADA (1:1) por padrão = ratio "square" de verdade. Vale para a grade,
   relacionados, favoritos e "vistos recentemente" — todos seguem o mesmo padrão. */
.thumb{aspect-ratio:1/1;border-radius:var(--radius);background:var(--c-surface);display:flex;align-items:center;justify-content:center;font-size:var(--fib-34);color:#aaa;overflow:hidden}
/* Foto inteira, sem cortar (object-fit:contain) + fundo neutro p/ qualquer proporção. */
.thumb img{width:100%;height:100%;object-fit:contain;background:var(--c-surface);display:block}
.imgwrap img{width:100%;height:100%;object-fit:cover;display:block}
/* Zoom suave da imagem ao passar o mouse — sensação de loja de moda. */
.card .thumb img{transition:transform .45s ease}
.card:hover .thumb img{transform:scale(1.06)}
.thumb.ar-portrait{aspect-ratio:3/4}.thumb.ar-landscape{aspect-ratio:4/3}
.thumb.ar-auto{aspect-ratio:auto;height:auto}.thumb.ar-auto img{height:auto;object-fit:contain}

/* Variante minimal (sem cartão) e variante FASHION (image-forward, imagem alta, texto enxuto). */
.card-minimal{border:0;padding:var(--fib-8);background:transparent}
.card-minimal .thumb{border-radius:var(--radius)}
.card.fashion{border:0;background:transparent;padding:0;gap:var(--fib-5)}
.card.fashion:hover{box-shadow:none;transform:none}
/* Proporção 1:1 (quadrada) — casa com as fotos de produto originais (catálogo Pinha é 1:1),
   sem cortar a imagem; grade uniforme. */
.card.fashion .thumb{aspect-ratio:1/1;height:auto;border-radius:var(--radius)}
.card.fashion .thumb img{object-fit:contain;background:var(--c-surface)}
.card.fashion strong{font-size:var(--fib-13);font-weight:600}
.card.fashion .price{font-size:var(--fib-13);font-weight:700}
/* Botão discreto (image-forward): contorno, não barra cheia de cor. */
.card.fashion .btn{margin-top:var(--fib-3);background:transparent;color:var(--c-ink);border:1px solid var(--c-line);font-weight:600}
.card.fashion .btn:hover{border-color:var(--c-brand);color:var(--c-brand);filter:none}

.price{font-size:var(--fib-21);font-weight:700}
.soldout{display:inline-block;font-size:var(--fib-13);color:#dc2626;font-weight:600}
.badge-soldout{position:absolute;top:var(--fib-8);left:var(--fib-8);background:#dc2626;color:#fff;font-size:11px;font-weight:600;padding:2px var(--fib-8);border-radius:var(--fib-5)}

/* Página de produto: imagem grande + thumbs + lightbox */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:var(--fib-34)}
.pd .big{aspect-ratio:1/1;border-radius:var(--radius);background:linear-gradient(135deg,#eee,#ddd);display:flex;align-items:center;justify-content:center;font-size:var(--fib-89);color:#aaa;overflow:hidden}
/* Imagem principal do produto: caixa QUADRADA + contain = foto inteira (sem corte),
   casando com o tamanho original (catálogo é 1:1). Fundo neutro para qualquer proporção. */
.pd .imgwrap{position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:var(--c-surface)}
.pd .imgwrap img{width:100%;height:100%;object-fit:contain;background:var(--c-surface)}
.imgwrap img{cursor:zoom-in}
.thumbs{display:flex;gap:var(--fib-8);margin-top:var(--fib-8);flex-wrap:wrap}
.thumbs .t{width:55px;height:55px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--c-line);cursor:pointer}
.thumbs .t.on{border-color:var(--c-brand)}
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:100;align-items:center;justify-content:center;padding:var(--fib-21);cursor:zoom-out}
.lightbox.on{display:flex}
.lightbox img{max-width:95%;max-height:95%;object-fit:contain;border-radius:var(--radius)}

/* Quantidade na página de produto */
.qty-row{margin:var(--fib-13) 0}
.qty-ctl{display:inline-flex;align-items:center;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;margin-top:var(--fib-5)}
.qty-ctl button{width:var(--fib-34);height:var(--fib-34);border:0;background:var(--c-bg);font-size:var(--fib-21);cursor:pointer;color:var(--c-ink);line-height:1}
.qty-ctl button:hover{background:var(--c-line)}
.qty-ctl input{width:var(--fib-55);height:var(--fib-34);border:0;border-left:1px solid var(--c-line);border-right:1px solid var(--c-line);text-align:center;font-size:var(--fib-13);margin:0;-moz-appearance:textfield}
.qty-ctl input::-webkit-outer-spin-button,.qty-ctl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

}

/* ===== _sections.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 08 · SECTIONS — blocos configuráveis da home: banner, texto, imagem,
 * galeria (carrossel), colunas/coleções (+ variante "lookbook" com foto),
 * ícones, vídeo, código, botão, accordion (FAQ), depoimentos e mapa.
 * ===========================================================================*/
.banner{border-radius:var(--radius);padding:var(--fib-34);color:#fff;text-align:center;font-size:var(--fib-21);font-weight:600;margin-bottom:var(--fib-55)}
.text-sec h3{font-size:var(--fib-34);margin-bottom:var(--fib-13)}.text-sec p{color:var(--c-muted);line-height:1.6;margin-bottom:var(--fib-13);max-width:752px}

.block-image{margin-bottom:var(--fib-55)}.block-image.al-center{text-align:center}.block-image.al-right{text-align:right}.block-image.al-left{text-align:left}
.block-image img{display:inline-block;vertical-align:top}
.block-spacer{width:100%}

/* Galeria em carrossel */
.carousel{display:flex;gap:var(--fib-13);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--fib-8);margin-bottom:var(--fib-34)}
.carousel::-webkit-scrollbar{height:var(--fib-8)}.carousel::-webkit-scrollbar-thumb{background:var(--c-line);border-radius:var(--fib-5)}
.gslide{flex:0 0 auto;width:min(610px,85%);scroll-snap-align:center;border-radius:var(--radius);overflow:hidden;background:#eee}
.gslide img{width:100%;height:100%;object-fit:cover;display:block}

/* Colunas / cartões de coleção */
.cols{display:grid;gap:var(--fib-21);margin-bottom:var(--fib-34)}
.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}
.colcell{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--fib-21);text-align:center;overflow:hidden}
.colcell img{width:100%;height:var(--fib-144);object-fit:cover;border-radius:var(--radius);margin-bottom:var(--fib-13);transition:transform .5s ease}
.colcell:hover img{transform:scale(1.04)}
.colcell .colicon{font-size:var(--fib-55);line-height:1;margin-bottom:var(--fib-13)}
.colcell h3{font-size:var(--fib-21);margin-bottom:var(--fib-8)}.colcell p{color:var(--c-muted);line-height:1.6}

/* Variante LOOKBOOK: coleção com foto dominante + título sobreposto (estilo moda). */
.colcell.lookbook{position:relative;padding:0;border:0;text-align:left}
.colcell.lookbook img{height:var(--fib-377);margin:0;border-radius:var(--radius)}
.colcell.lookbook .lk-cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.66));color:#fff;padding:var(--fib-34) var(--fib-21) var(--fib-21)}
.colcell.lookbook h3{color:#fff;margin-bottom:var(--fib-3)}
.colcell.lookbook p{color:rgba(255,255,255,.85)}
/* Capa vazia (coleção sem produto com foto) — bloco com a inicial. */
.colcell.lookbook .col-cover-empty{height:var(--fib-377);display:flex;align-items:center;justify-content:center;background:var(--c-surface);color:var(--c-muted);font-size:var(--fib-89);font-weight:800}

/* Ícones (diferenciais) */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--fib-21);margin-bottom:var(--fib-34)}
.feat{text-align:center;padding:var(--fib-13)}.feat-ico{font-size:var(--fib-55);line-height:1;margin-bottom:var(--fib-13)}
.feat h4{font-size:var(--fib-21);margin-bottom:var(--fib-5)}.feat p{color:var(--c-muted);line-height:1.5}

/* Vídeo */
.video-wrap{position:relative;width:100%;border-radius:var(--radius);overflow:hidden;margin-bottom:var(--fib-34);background:#000}
.video-wrap.ar-16-9{aspect-ratio:16/9}.video-wrap.ar-4-3{aspect-ratio:4/3}.video-wrap.ar-1-1{aspect-ratio:1/1}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Bloco de código (iframe sandbox) e botão */
.block-code{margin-bottom:var(--fib-34)}
.code-embed{width:100%;border:0;display:block;background:#fff}
.block-button{margin-bottom:var(--fib-34)}.block-button.al-center{text-align:center}.block-button.al-right{text-align:right}.block-button.al-left{text-align:left}

/* Accordion (FAQ) */
.accordion{margin-bottom:var(--fib-34);border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden}
.acc-item{border-bottom:1px solid var(--c-line)}.acc-item:last-child{border-bottom:0}
.acc-item summary{cursor:pointer;padding:var(--fib-21);font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary::after{content:"+";font-size:var(--fib-21);color:var(--c-muted)}
.acc-item[open] summary::after{content:"−"}
.acc-item summary:hover{background:var(--c-bg)}
.acc-body{padding:0 var(--fib-21) var(--fib-21)}.acc-body p{color:var(--c-muted);line-height:1.6;margin-bottom:var(--fib-8)}

/* Depoimentos */
.tcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--fib-21);margin-bottom:var(--fib-34)}
.tcard{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--fib-21)}
.tstars{color:#f59e0b;font-size:var(--fib-21);letter-spacing:2px;margin-bottom:var(--fib-8)}
.ttext{line-height:1.6;margin-bottom:var(--fib-13);font-style:italic}.tname{font-weight:700}

/* Mapa */
.map-wrap{width:100%;border-radius:var(--radius);overflow:hidden;margin-bottom:var(--fib-34);border:1px solid var(--c-line)}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}

/* ---- Normalização do ritmo: o espaçamento entre seções vem do .sec; os grids
 * internos NÃO acumulam margem (evita gaps desiguais). Grids centralizados. -- */
.feats,.cols,.tcards,.carousel,.accordion{margin-bottom:0}
.cols{justify-items:stretch}
.feats{justify-items:center}

}

/* ===== _commerce.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 09 · COMMERCE — navegação de coleções, barra de busca/filtros, paginação,
 * formulários (inputs/select/table), carrinho (qty) e totais do checkout.
 * ===========================================================================*/
.colnav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--fib-8);margin-bottom:var(--fib-55)}
.colnav a{padding:var(--fib-8) var(--fib-13);border:1px solid var(--c-line);border-radius:var(--radius);font-size:var(--fib-13);font-weight:600;background:var(--c-surface)}
.colnav a:hover{border-color:var(--c-brand);color:var(--c-brand)}

/* Inputs base de formulário (carrinho, checkout, conta) */
select{width:100%;padding:var(--fib-13);border:1px solid var(--c-line);border-radius:var(--radius);font:inherit;margin-bottom:var(--fib-13);background:#fff}
input{width:100%;padding:var(--fib-13);border:1px solid var(--c-line);border-radius:var(--radius);font:inherit;margin-bottom:var(--fib-13)}
/* label de formulário — exclui os controles de UI baseados em <label> (menu mobile:
   .mnav-scrim/.mnav-btn/.mnav-close). Sob @layer, um seletor de elemento nu (label) em
   'components' venceria .mnav-scrim{display:none} de 'layout' por ordem de camada, deixando
   o scrim (label fixo, inset:0) visível e capturando todo clique → abria o menu. */
label:not([class*="mnav-"]){display:block;font-size:var(--fib-13);font-weight:600;margin-bottom:var(--fib-5)}
table{width:100%;border-collapse:collapse}td,th{padding:var(--fib-13);border-bottom:1px solid var(--c-line);text-align:left}
.row{display:flex;gap:var(--fib-21);align-items:center;justify-content:space-between}
.litem{display:flex;align-items:center;gap:var(--fib-13)}
.litem .mini{width:44px;height:44px;border-radius:var(--radius);overflow:hidden;background:#eee;flex:none}

/* Barra da vitrine: busca + filtros */
.shopbar{display:flex;gap:var(--fib-13);flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:var(--fib-34)}
.shopbar>form{display:flex;gap:var(--fib-8);flex:1;min-width:233px}
.shopbar input,.shopbar select{margin:0}
.shopbar .btn{width:auto;flex:none}
.filters{position:relative;flex:none}
.filters>summary{list-style:none;cursor:pointer}.filters>summary::-webkit-details-marker{display:none}
.filter-form{position:absolute;right:0;top:calc(100% + var(--fib-5));z-index:30;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);box-shadow:0 var(--fib-8) var(--fib-34) rgba(0,0,0,.12);padding:var(--fib-21);width:var(--fib-233);display:flex;flex-direction:column}
.filter-form label{font-size:var(--fib-13);color:var(--c-muted);margin:var(--fib-8) 0 var(--fib-5)}
.filter-form select,.filter-form input{width:100%;border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--fib-5) var(--fib-8);font-size:var(--fib-13);background:var(--c-bg);color:var(--c-ink)}
.price-range{display:flex;align-items:center;gap:var(--fib-5)}.price-range input{width:100%}
.filter-actions{display:flex;gap:var(--fib-8);margin-top:var(--fib-13)}
.searchinfo{font-size:var(--fib-13);color:var(--c-muted);margin-bottom:var(--fib-13)}

/* Paginação */
.pagination{display:flex;gap:var(--fib-8);justify-content:center;margin-top:var(--fib-34);flex-wrap:wrap}
.pagination a,.pagination span{padding:var(--fib-8) var(--fib-13);border:1px solid var(--c-line);border-radius:var(--radius);font-size:var(--fib-13);font-weight:600}
.pagination a:hover{border-color:var(--c-brand);color:var(--c-brand)}
.pagination .cur{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
.pagination .disabled{opacity:.4;pointer-events:none}

/* Carrinho: controle de quantidade inline */
.qty{display:inline-flex;align-items:center;gap:0;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden}
.qty form{display:contents}
.qty button{width:var(--fib-34);height:var(--fib-34);border:0;background:var(--c-surface);font-size:var(--fib-21);line-height:1;cursor:pointer;color:var(--c-ink);padding:0}
.qty button:hover{background:var(--c-bg)}
.qty .n{min-width:var(--fib-34);text-align:center;font-weight:600;font-size:var(--fib-13)}

/* Checkout: endereço + totais */
.addr-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--fib-13)}
.addr-grid .full{grid-column:1 / -1}
.totals-box{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--fib-21);margin-top:var(--fib-13)}
.totals-box .l{display:flex;justify-content:space-between;margin-bottom:var(--fib-5);font-size:var(--fib-13);color:var(--c-muted)}
.totals-box .l.tot{font-size:var(--fib-21);color:var(--c-ink);font-weight:700;margin-top:var(--fib-8);margin-bottom:0}

}

/* ===== _account.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 10 · ACCOUNT — conta do cliente, pedidos, rastreio, status, avaliações,
 * newsletter / avise-quando-voltar e favoritos (coração).
 * ===========================================================================*/
.acc-link.foot-acct{margin-top:var(--fib-13)}
.foot-acct{margin-top:var(--fib-13)}
.acc-wrap{max-width:var(--fib-377);margin:var(--fib-34) auto}
.acc-form{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--fib-34);display:flex;flex-direction:column}
.acc-form h2{margin-bottom:var(--fib-21)}
.acc-form label{font-size:var(--fib-13);color:var(--c-muted);margin-top:var(--fib-13);margin-bottom:var(--fib-5)}
.acc-form input{width:100%;height:var(--fib-34);border:1px solid var(--c-line);border-radius:var(--radius);padding:0 var(--fib-13);font-size:var(--fib-13);background:var(--c-bg);color:var(--c-ink)}
.acc-form input:focus{outline:none;border-color:var(--c-brand)}
.acc-form .btn{margin-top:var(--fib-21)}
.acc-alt{margin-top:var(--fib-13);font-size:var(--fib-13);color:var(--c-muted);text-align:center}
.acc-alt a,.acc-track a{color:var(--c-brand);font-weight:600}
.acc-track{text-align:center;margin-top:var(--fib-21);font-size:var(--fib-13);color:var(--c-muted)}
.form-err{background:#fee2e2;color:#b91c1c;border-radius:var(--radius);padding:var(--fib-13);margin-bottom:var(--fib-13);font-size:var(--fib-13);text-align:center}
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--fib-13);flex-wrap:wrap}

/* Pedidos (conta + rastreio) */
.ord-list{display:flex;flex-direction:column;gap:var(--fib-13);margin-top:var(--fib-13)}
.ord-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--fib-21)}
.ord-head{display:flex;align-items:center;justify-content:space-between;gap:var(--fib-8);flex-wrap:wrap;margin-bottom:var(--fib-13)}
.ord-badges{display:flex;gap:var(--fib-5);flex-wrap:wrap}
.ord-items{margin:0;padding:0;list-style:none;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);padding:var(--fib-8) 0}
.ord-items li{font-size:var(--fib-13);padding:var(--fib-3) 0;color:var(--c-ink)}
.ord-track{font-size:var(--fib-13);color:var(--c-muted);margin-top:var(--fib-8)}
.ord-foot{display:flex;justify-content:space-between;align-items:center;margin-top:var(--fib-13)}
.ord-foot strong{font-size:var(--fib-21)}
.track-result{margin-bottom:var(--fib-21)}

/* Selos de status */
.st-badge{display:inline-block;font-size:var(--fib-13);font-weight:700;padding:var(--fib-3) var(--fib-8);border-radius:999px}
.st-ok{background:#d1fae5;color:#047857}.st-warn{background:#fef3c7;color:#b45309}.st-info{background:#dbeafe;color:#1d4ed8}.st-err{background:#fee2e2;color:#b91c1c}.st-muted{background:#eee;color:#666}

/* Avaliações */
.stars{color:#f59e0b;letter-spacing:1px}
.rev-inline{display:inline-flex;align-items:center;gap:var(--fib-5);font-size:var(--fib-13);margin-bottom:var(--fib-8)}
.rev-summary{display:flex;align-items:center;gap:var(--fib-8);font-size:var(--fib-21);margin-bottom:var(--fib-21)}
.rev-list{display:flex;flex-direction:column;gap:var(--fib-13)}
.rev-item{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--fib-21)}
.rev-head{display:flex;align-items:center;gap:var(--fib-8);margin-bottom:var(--fib-5);flex-wrap:wrap}
.rev-title{font-weight:700;margin-bottom:var(--fib-5)}
.rev-item p{color:var(--c-ink);line-height:1.6}
.rev-form-wrap{margin-top:var(--fib-21)}
.rev-form-wrap summary{display:inline-block;list-style:none;cursor:pointer}
.rev-form-wrap summary::-webkit-details-marker{display:none}
.rev-form{margin-top:var(--fib-13);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--fib-21);display:flex;flex-direction:column;max-width:var(--fib-610)}
.rev-form label{font-size:var(--fib-13);color:var(--c-muted);margin-top:var(--fib-8);margin-bottom:var(--fib-3)}
.rev-form input,.rev-form select,.rev-form textarea{width:100%;border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--fib-8) var(--fib-13);font-size:var(--fib-13);background:var(--c-bg);color:var(--c-ink)}
.rev-form textarea{min-height:var(--fib-89);resize:vertical}
.rev-form .btn{margin-top:var(--fib-13)}
.rev-form .row{display:flex;gap:var(--fib-13);flex-wrap:wrap}.rev-form .row>div{flex:1;min-width:var(--fib-144)}

/* Newsletter + avise-quando-voltar */
.news-form{max-width:var(--fib-377);margin:0 auto var(--fib-21);text-align:center}
.news-form strong{display:block;margin-bottom:var(--fib-8)}
.news-row{display:flex;gap:var(--fib-8)}
.news-row input{flex:1;height:var(--fib-34);border:1px solid var(--c-line);border-radius:var(--radius);padding:0 var(--fib-13);font-size:var(--fib-13);background:var(--c-surface);color:var(--c-ink)}
.news-row .btn{flex:none;width:auto}
.js-ok{color:var(--ok,#059669);font-weight:700}
.bis-form{margin-top:var(--fib-13);background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--fib-13);max-width:var(--fib-377)}

/* Favoritos */
.wish-btn{position:absolute;top:var(--fib-8);right:var(--fib-8);z-index:5;width:var(--fib-34);height:var(--fib-34);border-radius:50%;border:1px solid var(--c-line);background:rgba(255,255,255,.9);color:#bbb;font-size:var(--fib-13);cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .12s,color .12s}
.wish-btn:hover{transform:scale(1.12)}
.wish-btn.on{color:#e11d48;border-color:#fbcfe8}
.wish-btn.wish-lg{position:static;width:auto;height:var(--fib-34);border-radius:var(--radius);padding:0 var(--fib-13);gap:var(--fib-5);font-size:var(--fib-13);font-weight:600}

}

/* ===== _footer.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 11 · FOOTER — rodapé em COLUNAS, padronizado e alinhado (marca/social, Loja,
 * Atendimento, Newsletter) + barra inferior com copyright. Full-bleed com
 * conteúdo limitado a --maxw. Responsivo (4 col → 2 col → 1 col).
 * ===========================================================================*/
.site-foot{margin-top:var(--fib-89);border-top:1px solid var(--c-line);background:var(--c-surface);color:var(--c-muted);font-size:var(--fib-13)}

.foot-cols{
  max-width:var(--maxw);margin:0 auto;
  padding:var(--fib-55) var(--fib-21) var(--fib-34);
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:var(--fib-34);
}
.foot-col h4{font-size:var(--fib-13);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink);margin:0 0 var(--fib-13)}

.foot-links{display:flex;flex-direction:column;gap:var(--fib-8)}
.foot-links a{color:var(--c-muted);font-weight:500}
.foot-links a:hover{color:var(--c-brand)}

.foot-brand .flogo{height:var(--fib-55);max-width:var(--fib-233);object-fit:contain;display:block;margin-bottom:var(--fib-13)}
.foot-brand .fbrand{display:block;font-size:var(--fib-21);font-weight:800;color:var(--c-ink);margin-bottom:var(--fib-13)}
.ftext{margin:0 0 var(--fib-13);line-height:1.6;color:var(--c-muted);max-width:34ch}

.fsocial{display:flex;gap:var(--fib-8)}
.fsocial a{width:var(--fib-34);height:var(--fib-34);border-radius:50%;background:var(--c-bg);border:1px solid var(--c-line);display:flex;align-items:center;justify-content:center;font-size:var(--fib-21);color:var(--c-ink);text-decoration:none;transition:border-color .2s ease,color .2s ease,transform .2s ease}
.fsocial a:hover{border-color:var(--c-brand);color:var(--c-brand);transform:translateY(-2px)}

/* Newsletter dentro da coluna (sobrescreve o estilo centrado padrão de _account.css). */
.foot-news .news-form{max-width:none;margin:0;text-align:left}

.foot-bottom{
  border-top:1px solid var(--c-line);max-width:var(--maxw);margin:0 auto;
  padding:var(--fib-21);display:flex;align-items:center;justify-content:space-between;
  gap:var(--fib-13);color:var(--c-muted);
}
.fpowered{opacity:.8}

@media (max-width:768px){
  .foot-cols{grid-template-columns:1fr 1fr;gap:var(--fib-21);padding:var(--fib-34) var(--fib-21)}
  .foot-brand{grid-column:1 / -1}
  .foot-bottom{flex-direction:column;text-align:center;gap:var(--fib-8)}
}
@media (max-width:480px){ .foot-cols{grid-template-columns:1fr} }

}

/* ===== _drawer.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 11b · CART DRAWER — carrinho lateral (gaveta). Abre da direita sem sair da
 * página quando o tema usa cart.mode === 'drawer'. Sem JS, os forms continuam
 * funcionando (degradação graciosa). Tudo na escala Fibonacci + tokens da loja.
 * ===========================================================================*/

/* Scrim (fundo escurecido). Começa invisível; .on (via JS) faz o fade. */
.cart-scrim{
  position:fixed;inset:0;z-index:var(--z-scrim,90);
  background:rgba(17,24,39,.45);opacity:0;
  transition:opacity .25s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.cart-scrim.on{opacity:1}

/* Painel lateral. translateX(100%) fora da tela; .on traz para dentro. */
.cart-drawer{
  position:fixed;top:0;right:0;z-index:var(--z-drawer,100);
  width:min(var(--fib-377),92vw);height:100%;
  background:var(--c-surface);color:var(--c-ink);
  box-shadow:-8px 0 var(--fib-34) rgba(17,24,39,.18);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;will-change:transform;
}
.cart-drawer.on{transform:translateX(0)}
body.cart-open{overflow:hidden}

/* Cabeçalho do drawer. */
.cd-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--fib-13);
  padding:var(--fib-21);border-bottom:1px solid var(--c-line);flex:none;
}
.cd-head strong{font-size:var(--fib-21);font-weight:700;display:inline-flex;align-items:center;gap:var(--fib-8)}
.cd-close{
  width:var(--fib-34);height:var(--fib-34);border-radius:50%;border:1px solid var(--c-line);
  background:var(--c-bg);color:var(--c-ink);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:var(--fib-21);transition:border-color .2s ease,color .2s ease,transform .2s ease;
}
.cd-close:hover{border-color:var(--c-brand);color:var(--c-brand);transform:rotate(90deg)}

/* Corpo rolável. */
.cd-body{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.cd-loading{padding:var(--fib-55) var(--fib-21);text-align:center;color:var(--c-muted)}

/* Lista de itens. */
.cd-items{padding:var(--fib-13) var(--fib-21);display:flex;flex-direction:column;gap:var(--fib-13)}
.cd-item{
  display:grid;grid-template-columns:var(--fib-55) 1fr auto;gap:var(--fib-13);align-items:center;
  padding-bottom:var(--fib-13);border-bottom:1px solid var(--c-line);
}
.cd-item:last-child{border-bottom:0;padding-bottom:0}
.cd-thumb{
  width:var(--fib-55);height:var(--fib-55);border-radius:var(--radius);overflow:hidden;
  background:var(--c-bg);display:block;flex:none;
}
.cd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cd-info{min-width:0;display:flex;flex-direction:column;gap:var(--fib-3)}
.cd-title{font-size:var(--fib-13);font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cd-var{font-size:11px;color:var(--c-muted)}
.cd-line{display:flex;align-items:center;gap:var(--fib-8);font-size:var(--fib-13)}
.cd-qty{color:var(--c-muted)}
.cd-price{font-weight:700}
.cd-soldout{font-size:11px;color:#b91c1c;font-weight:600}
.cd-removeform{margin:0;flex:none}
.cd-remove{
  width:var(--fib-21);height:var(--fib-21);border-radius:50%;border:0;background:transparent;
  color:var(--c-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .2s ease,background .2s ease;
}
.cd-remove:hover{color:#b91c1c;background:rgba(185,28,28,.08)}

/* Rodapé fixo (subtotal + ações). */
.cd-foot{
  padding:var(--fib-21);border-top:1px solid var(--c-line);flex:none;
  display:flex;flex-direction:column;gap:var(--fib-8);background:var(--c-surface);
}
.cd-subtotal{display:flex;align-items:baseline;justify-content:space-between;font-size:var(--fib-21)}
.cd-subtotal strong{font-weight:800}
.cd-note{font-size:11px;color:var(--c-muted);margin:0 0 var(--fib-5)}
.cd-checkout{width:100%}
.cd-viewcart{width:100%}

/* Carrinho vazio. */
.cd-empty{padding:var(--fib-55) var(--fib-21);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--fib-13);color:var(--c-muted)}
.cd-empty-ic{font-size:var(--fib-55);color:var(--c-line)}
.cd-empty p{margin:0;font-size:var(--fib-13)}

/* Mobile: drawer ocupa quase toda a tela. */
@media(max-width:480px){
  .cart-drawer{width:100vw;box-shadow:none}
  .cd-head,.cd-items,.cd-foot{padding-inline-start:var(--fib-13);padding-inline-end:var(--fib-13)}
}

/* Acessibilidade: respeita prefers-reduced-motion. */
@media(prefers-reduced-motion:reduce){
  .cart-drawer{transition:none}.cart-scrim{transition:none}.cd-close:hover{transform:none}
}

}

/* ===== _buttons-plus.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 5b · BUTTONS+ — sistema de botões genérico e completo para qualquer loja.
 * Variantes (cor/estilo), tamanhos, ícone, bloco, pílula, grupo e estados.
 * Reusa os tokens da loja (--c-brand/--c-accent/--c-ink/--c-line/--radius).
 * Não redefine o `.btn` base (que cada tema já tem) — só adiciona modificadores.
 * ===========================================================================*/

/* ---- Variantes de cor ----------------------------------------------------- */
.btn.primary,
.btn--primary {
  background: var(--c-brand);
  color: #fff;
  border: 1px solid var(--c-brand);
}
.btn.primary:hover,
.btn--primary:hover { filter: brightness(1.06); }

.btn.accent,
.btn--accent {
  background: var(--c-accent);
  color: #fff;
  border: 1px solid var(--c-accent);
}
.btn.accent:hover { filter: brightness(1.06); }

.btn.dark,
.btn--dark {
  background: var(--c-ink);
  color: var(--c-surface);
  border: 1px solid var(--c-ink);
}

.btn.outline,
.btn--outline {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
}
.btn.outline:hover,
.btn--outline:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.btn.outline-brand {
  background: transparent;
  color: var(--c-brand);
  border: 1px solid var(--c-brand);
}
.btn.outline-brand:hover {
  background: var(--c-brand);
  color: #fff;
}

.btn.ghost,
.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid transparent;
}
.btn.ghost:hover { background: var(--c-bg); }

.btn.soft {
  background: var(--c-bg);
  color: var(--c-ink);
  border: 1px solid transparent;
}
.btn.soft:hover { border-color: var(--c-line); }

.btn.link {
  background: transparent;
  border: 0;
  color: var(--c-brand);
  padding: 0;
  height: auto;
  min-height: 0;
  text-decoration: underline;
}

.btn.danger {
  background: #e11d48;
  color: #fff;
  border: 1px solid #e11d48;
}
.btn.success {
  background: #16a34a;
  color: #fff;
  border: 1px solid #16a34a;
}
.btn.whatsapp {
  background: #25d366;
  color: #fff;
  border: 1px solid #25d366;
}

/* Gradiente de marca (opcional, vistoso). */
.btn.gradient {
  border: 0;
  color: #fff;
  background-image: linear-gradient(120deg, var(--c-brand), var(--c-accent));
  background-size: 140% 140%;
  transition: background-position .4s ease, transform .15s ease;
}
.btn.gradient:hover { background-position: 100% 0; }

/* ---- Tamanhos ------------------------------------------------------------- */
.btn.xs,
.btn--xs {
  min-height: var(--fib-21);
  padding: 0 var(--fib-8);
  font-size: 11px;
}
.btn.sm,
.btn--sm {
  min-height: var(--fib-34);
  padding: 0 var(--fib-13);
  font-size: var(--fib-13);
}
.btn.lg,
.btn--lg {
  min-height: var(--fib-55);
  padding: 0 var(--fib-34);
  font-size: var(--fib-21);
}
.btn.xl {
  min-height: calc(var(--fib-55) + var(--fib-8));
  padding: 0 var(--fib-55);
  font-size: var(--fib-21);
}

/* ---- Forma ---------------------------------------------------------------- */
.btn.pill,
.btn--pill { border-radius: var(--r-pill, 999px); }
.btn.square { border-radius: 0; }
.btn.block,
.btn--block {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ---- Botão só ícone ------------------------------------------------------- */
.btn.icon,
.btn--icon {
  width: var(--fib-34);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.icon.lg { width: var(--fib-55); }
.btn.icon.round { border-radius: 50%; }

/* Botão com ícone + texto: alinhamento consistente. */
.btn i,
.btn svg { flex: none; }
.btn .btn-ic { margin-inline-end: var(--fib-5); }
.btn .btn-ic.end {
  margin-inline-end: 0;
  margin-inline-start: var(--fib-5);
}

/* ---- Grupo de botões ------------------------------------------------------ */
.btn-group {
  display: inline-flex;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-line);
}
.btn-group .btn {
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--c-line);
}
.btn-group .btn:last-child { border-right: 0; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fib-8);
}
.btn-row.center { justify-content: center; }
.btn-row.end { justify-content: flex-end; }

/* ---- Estados -------------------------------------------------------------- */
.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: var(--fib-2) solid var(--c-brand);
  outline-offset: var(--fib-2);
}

/* Botão de "adicionar ao carrinho" com micro-feedback ao clicar. */
.btn.add-cart.added {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

/* ---- Botão flutuante genérico (FAB) --------------------------------------- */
.fab {
  position: fixed;
  z-index: var(--z-fab, 60);
  width: var(--fib-55);
  height: var(--fib-55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fib-21);
  color: #fff;
  background: var(--c-brand);
  border: 0;
  cursor: pointer;
  box-shadow: 0 var(--fib-5) var(--fib-21) rgba(17, 24, 39, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 var(--fib-8) var(--fib-34) rgba(17, 24, 39, .28);
}
.fab.br { right: var(--fib-21); bottom: var(--fib-21); }
.fab.bl { left: var(--fib-21); bottom: var(--fib-21); }

}

/* ===== _header-plus.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 4b · HEADER+ — variantes e melhorias genéricas de cabeçalho que qualquer loja
 * pode usar: layouts (minimal/centered/split), anúncio com variantes, busca
 * expansível, ícones com contador, mega-menu simples, header transparente sobre
 * hero. Tokens da loja. Não reescreve o header base — adiciona modificadores.
 * ===========================================================================*/

/* ---- Barra de anúncio: variantes ------------------------------------------ */
.ann {
  text-align: center;
  font-size: var(--fib-13);
  font-weight: 600;
  padding: var(--fib-8) var(--fib-13);
  background: var(--c-ink);
  color: var(--c-surface);
}
.ann.brand { background: var(--c-brand); color: #fff; }
.ann.accent { background: var(--c-accent); color: #fff; }
.ann.soft { background: var(--c-bg); color: var(--c-ink); border-bottom: 1px solid var(--c-line); }
.ann a { color: inherit; text-decoration: underline; }
.ann i { margin-inline-end: var(--fib-5); }

/* ---- Layout do cabeçalho -------------------------------------------------- */
.store-header { background: var(--c-headerbg); border-bottom: 1px solid var(--c-line); }
.hbar {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--fib-13) var(--fib-21);
  display: flex;
  align-items: center;
  gap: var(--fib-21);
}
.hbar > .hsearch { flex: 1; }
.hicons { display: flex; align-items: center; gap: var(--fib-13); margin-inline-start: auto; }

/* Cabeçalho centralizado (logo no meio, nav embaixo). */
.store-header.centered .hbar { justify-content: center; flex-direction: column; gap: var(--fib-8); }
.store-header.centered .hicons { position: absolute; right: var(--fib-21); top: var(--fib-13); }

/* ---- Ícones do cabeçalho -------------------------------------------------- */
.hicon {
  position: relative;
  width: var(--fib-34);
  height: var(--fib-34);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-brand);
  font-size: var(--fib-21);
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.hicon:hover { background: var(--c-bg); color: var(--c-brand); }
.cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: var(--fib-13);
  height: var(--fib-13);
  padding: 0 4px;
  border-radius: var(--r-pill, 999px);
  background: var(--c-brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---- Busca grande arredondada no centro ----------------------------------- */
.hsearch {
  display: flex;
  align-items: center;
  max-width: var(--fib-610);
  margin-inline: auto;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill, 999px);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hsearch:focus-within { border-color: var(--c-brand); box-shadow: 0 0 0 var(--fib-3) color-mix(in srgb, var(--c-brand) 14%, transparent); }
.hsearch input { flex: 1; border: 0; background: transparent; padding: var(--fib-8) var(--fib-21); font-size: var(--fib-13); color: var(--c-ink); }
.hsearch input:focus { outline: none; }
.hsearch button { border: 0; background: transparent; width: var(--fib-34); height: var(--fib-34); color: var(--c-muted); cursor: pointer; }
.hsearch button:hover { color: var(--c-brand); }

/* ---- Nav principal (links em maiúsculas) ---------------------------------- */
.hnav {
  display: flex;
  gap: var(--fib-34);
  justify-content: center;
  padding: var(--fib-8) var(--fib-21) var(--fib-13);
  border-top: 1px solid var(--c-line);
}
.hnav a {
  font-size: var(--fib-13);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink);
  position: relative;
}
.hnav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--fib-5));
  height: 2px;
  background: var(--c-brand);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.hnav a:hover::after { transform: scaleX(1); }

/* ---- Botão de menu mobile (hambúrguer) ------------------------------------ */
.mnav-btn {
  display: none;
  width: var(--fib-34);
  height: var(--fib-34);
  align-items: center;
  justify-content: center;
  font-size: var(--fib-21);
  color: var(--c-brand);
  cursor: pointer;
}

/* ---- Header transparente sobre o hero (loja opta com .over-hero) ---------- */
.store-header.over-hero {
  position: absolute;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 0;
  color: #fff;
}
.store-header.over-hero .hicon,
.store-header.over-hero .hnav a { color: #fff; }
.store-header.over-hero.scrolled {
  position: fixed;
  background: var(--c-headerbg);
  color: var(--c-ink);
}

/* ---- Mega-menu simples (dropdown de coleções) ----------------------------- */
.has-mega { position: relative; }
.mega {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(var(--fib-8));
  min-width: var(--fib-610);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--fib-13);
  box-shadow: 0 var(--fib-13) var(--fib-34) rgba(17, 24, 39, .12);
  padding: var(--fib-21);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fib-13);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: var(--z-mega, 55);
}
.has-mega:hover .mega,
.has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega a { font-size: var(--fib-13); color: var(--c-ink); padding: var(--fib-5) 0; }
.mega a:hover { color: var(--c-brand); }

}

/* ===== _hero-plus.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 6b · HERO+ — variantes genéricas de hero/banner que qualquer loja usa:
 * alturas, overlay configurável, alinhamento, split (texto+imagem), badge,
 * indicador de rolagem, gradiente de marca, vídeo de fundo. Tokens da loja.
 * ===========================================================================*/

/* ---- Base / alturas ------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--fib-13);
  padding: var(--fib-89) var(--fib-21);
  background: var(--c-bg);
  overflow: hidden;
}
.hero.center { align-items: center; text-align: center; }
.hero h2 { font-size: var(--fib-55); line-height: 1.05; margin: 0; max-width: 18ch; }
.hero p { font-size: var(--fib-21); color: var(--c-muted); max-width: 48ch; margin: 0; }
.hero.h-md { min-height: 62vh; }
.hero.h-lg { min-height: 82vh; }

/* ---- Hero com imagem + overlay ------------------------------------------- */
.hero.img {
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hero.img h2,
.hero.img p { color: #fff; }
.hero.img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--hero-overlay, .35));
  z-index: 0;
}
.hero.img > * { position: relative; z-index: 1; }

/* Full-bleed (borda a borda). */
.hero.hero--full {
  width: 100vw;
  margin-inline-start: calc(50% - 50vw);
  border-radius: 0;
}

/* ---- Gradiente de marca (sem imagem) -------------------------------------- */
.hero.gradient {
  color: #fff;
  background-image: linear-gradient(135deg, var(--c-brand), var(--c-accent));
}
.hero.gradient h2,
.hero.gradient p { color: #fff; }

/* ---- Badge / pill no topo do hero ----------------------------------------- */
.hero .hero-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--fib-5);
  padding: var(--fib-5) var(--fib-13);
  border-radius: var(--r-pill, 999px);
  background: rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: var(--fib-13);
  font-weight: 600;
}
.hero:not(.img):not(.gradient) .hero-pill {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-ink);
}

/* ---- Hero split (texto + imagem lado a lado) ------------------------------ */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--fib-55);
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--fib-55) var(--fib-21);
}
.hero-split .hs-text h2 { font-size: var(--fib-55); margin: 0 0 var(--fib-13); }
.hero-split .hs-text p { color: var(--c-muted); font-size: var(--fib-21); margin: 0 0 var(--fib-21); }
.hero-split .hs-media img { width: 100%; border-radius: var(--fib-21); display: block; }
.hero-split.reverse .hs-text { order: 2; }

/* ---- Botões do hero ------------------------------------------------------- */
.hero .btn-row,
.hero .cluster { margin-top: var(--fib-13); }
.hero.center .btn-row { justify-content: center; }

/* ---- Indicador de rolagem ("scroll") -------------------------------------- */
.hero .scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--fib-21);
  transform: translateX(-50%);
  color: currentColor;
  font-size: var(--fib-21);
  opacity: .8;
  animation: bob 1.8s ease-in-out infinite;
  z-index: 1;
}

/* ---- Vídeo de fundo (loja opta) ------------------------------------------- */
.hero .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero.has-video::before { z-index: 1; }
.hero.has-video > *:not(.hero-video) { position: relative; z-index: 2; }

/* ---- Slider de hero (dots) ------------------------------------------------ */
.hero-slider { position: relative; }
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: var(--fib-21);
  transform: translateX(-50%);
  display: flex;
  gap: var(--fib-8);
  z-index: 2;
}
.hero-dots button {
  width: var(--fib-8);
  height: var(--fib-8);
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  padding: 0;
}
.hero-dots button.on { background: #fff; width: var(--fib-21); border-radius: var(--r-pill, 999px); }

/* ---- Responsivo do hero --------------------------------------------------- */
@media (max-width: 768px) {
  .hero-split { grid-template-columns: 1fr; gap: var(--fib-21); text-align: center; }
  .hero-split.reverse .hs-text { order: 0; }
  .hero h2 { font-size: var(--fib-34); }
  .hero p { font-size: var(--fib-13); }
  .hero-split .hs-text h2 { font-size: var(--fib-34); }
}

}

/* ===== _components.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 14 · COMPONENTS — componentes genéricos da loja (qualquer tema usa): badges,
 * chips, pills, tags, alerts, notices, tooltips, breadcrumbs, ratings, qty,
 * divisores, selos, tabela responsiva, paginação, abas. Tudo em tokens da loja
 * + escala Fibonacci. Nada acoplado a uma loja específica.
 * ===========================================================================*/

/* ---- Badges / selos ------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:var(--fib-5);padding:var(--fib-2) var(--fib-8);border-radius:var(--r-pill,999px);font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.02em}
.badge--brand{background:var(--c-brand);color:#fff}
.badge--accent{background:var(--c-accent);color:#fff}
.badge--soft{background:var(--c-bg);color:var(--c-ink);border:1px solid var(--c-line)}
.badge--new{background:#0ea5e9;color:#fff}
.badge--sale{background:#e11d48;color:#fff}
.badge--out{background:#6b7280;color:#fff}
.badge--low{background:#f59e0b;color:#1a1a1a}
.badge-dot{width:var(--fib-8);height:var(--fib-8);border-radius:50%;display:inline-block;background:currentColor}
/* Selo flutuante sobre a foto do produto (desconto/novo). */
.pbadge{position:absolute;top:var(--fib-8);left:var(--fib-8);z-index:2}
.pbadge--right{left:auto;right:var(--fib-8)}

/* ---- Chips / tags --------------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:var(--fib-5);padding:var(--fib-5) var(--fib-13);border-radius:var(--r-pill,999px);border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-ink);font-size:var(--fib-13);font-weight:600;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease}
.chip:hover{border-color:var(--c-brand);color:var(--c-brand)}
.chip.on{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.chip .x{opacity:.7;font-size:11px}
.chips{display:flex;flex-wrap:wrap;gap:var(--fib-8)}
.tag{display:inline-block;padding:var(--fib-2) var(--fib-8);border-radius:var(--radius);background:var(--c-bg);color:var(--c-muted);font-size:11px;font-weight:600}

/* ---- Avisos / alerts ------------------------------------------------------ */
.notice{display:flex;align-items:flex-start;gap:var(--fib-13);padding:var(--fib-13) var(--fib-21);border-radius:var(--radius);border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-ink);font-size:var(--fib-13);line-height:1.55}
.notice .ic{flex:none;font-size:var(--fib-21);line-height:1}
.notice--info{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}
.notice--ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.notice--warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.notice--err{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.notice strong{font-weight:700}

/* ---- Tooltip (CSS puro via aria/title-like data-tip) ---------------------- */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + var(--fib-5));left:50%;transform:translateX(-50%) translateY(var(--fib-3));white-space:nowrap;background:var(--c-ink);color:var(--c-surface);font-size:11px;font-weight:600;padding:var(--fib-3) var(--fib-8);border-radius:var(--radius);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:var(--z-tip,70)}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- Breadcrumbs ---------------------------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fib-5);font-size:var(--fib-13);color:var(--c-muted);margin-bottom:var(--fib-13)}
.crumbs a{color:var(--c-muted)}
.crumbs a:hover{color:var(--c-brand)}
.crumbs span{opacity:.6}
.crumbs .here{color:var(--c-ink);font-weight:600}

/* ---- Ratings (estrelas) --------------------------------------------------- */
.stars{display:inline-flex;gap:var(--fib-2);color:#f59e0b;font-size:var(--fib-13);letter-spacing:1px;line-height:1}
.stars .empty{color:var(--c-line)}
.rating-row{display:inline-flex;align-items:center;gap:var(--fib-8);font-size:var(--fib-13);color:var(--c-muted)}
.rating-row strong{color:var(--c-ink)}

/* ---- Controle de quantidade (− valor +) ----------------------------------- */
.qty-ctl{display:inline-flex;align-items:center;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;background:var(--c-surface)}
.qty-ctl button{width:var(--fib-34);height:var(--fib-34);border:0;background:transparent;color:var(--c-ink);font-size:var(--fib-21);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.qty-ctl button:hover{background:var(--c-bg)}
.qty-ctl button:disabled{opacity:.4;cursor:not-allowed}
.qty-ctl input{width:var(--fib-55);height:var(--fib-34);border:0;border-left:1px solid var(--c-line);border-right:1px solid var(--c-line);text-align:center;font-size:var(--fib-13);font-weight:600;background:transparent;color:var(--c-ink);-moz-appearance:textfield}
.qty-ctl input::-webkit-outer-spin-button,.qty-ctl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---- Divisores ------------------------------------------------------------ */
.hr{height:1px;background:var(--c-line);border:0;margin:var(--fib-34) 0}
.hr-label{display:flex;align-items:center;gap:var(--fib-13);color:var(--c-muted);font-size:var(--fib-13);margin:var(--fib-34) 0}
.hr-label::before,.hr-label::after{content:"";flex:1;height:1px;background:var(--c-line)}

/* ---- Selo de confiança (linha de garantias no produto/checkout) ----------- */
.trust-row{display:flex;flex-wrap:wrap;gap:var(--fib-21);margin-top:var(--fib-21);padding-top:var(--fib-21);border-top:1px solid var(--c-line)}
.trust-item{display:flex;align-items:center;gap:var(--fib-8);font-size:var(--fib-13);color:var(--c-muted)}
.trust-item i{color:var(--c-brand);font-size:var(--fib-21)}
.trust-item b{color:var(--c-ink);font-weight:600}

/* ---- Tabela responsiva (genérica) ----------------------------------------- */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:520px}

/* ---- Paginação ------------------------------------------------------------ */
.pagination{display:flex;flex-wrap:wrap;gap:var(--fib-5);justify-content:center;align-items:center;margin-top:var(--fib-34)}
.pagination a,.pagination span{min-width:var(--fib-34);height:var(--fib-34);padding:0 var(--fib-8);border-radius:var(--radius);border:1px solid var(--c-line);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fib-13);font-weight:600;color:var(--c-ink);background:var(--c-surface)}
.pagination a:hover{border-color:var(--c-brand);color:var(--c-brand)}
.pagination .cur{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.pagination .disabled{opacity:.4;pointer-events:none}

/* ---- Abas (tabs) ---------------------------------------------------------- */
.tabs{display:flex;gap:var(--fib-8);border-bottom:1px solid var(--c-line);margin-bottom:var(--fib-21);overflow-x:auto}
.tabs a,.tabs button{padding:var(--fib-13) var(--fib-13);border:0;background:transparent;color:var(--c-muted);font-weight:600;font-size:var(--fib-13);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tabs a.on,.tabs button.on{color:var(--c-ink);border-bottom-color:var(--c-brand)}

/* ---- "Voltar ao topo" ----------------------------------------------------- */
.to-top{position:fixed;right:var(--fib-21);bottom:var(--fib-21);z-index:var(--z-fab,60);width:var(--fib-34);height:var(--fib-34);border-radius:50%;background:var(--c-ink);color:var(--c-surface);display:none;align-items:center;justify-content:center;cursor:pointer;border:0;opacity:.9;box-shadow:0 var(--fib-3) var(--fib-13) rgba(0,0,0,.25)}
.to-top.show{display:flex}
.to-top:hover{opacity:1;transform:translateY(-2px)}

/* ---- Anúncio de barra (genérico, além do .ann do header) ------------------ */
.bar-promo{background:var(--c-brand);color:#fff;text-align:center;font-size:var(--fib-13);font-weight:600;padding:var(--fib-8) var(--fib-13)}

/* ---- Card de benefício (ícone + título + texto) — genérico ---------------- */
.benefit{display:flex;gap:var(--fib-13);align-items:flex-start;padding:var(--fib-13)}
.benefit .b-ic{flex:none;width:var(--fib-34);height:var(--fib-34);border-radius:50%;background:var(--c-bg);color:var(--c-brand);display:flex;align-items:center;justify-content:center;font-size:var(--fib-21)}
.benefit h4{margin:0 0 var(--fib-3);font-size:var(--fib-13);font-weight:700}
.benefit p{margin:0;font-size:var(--fib-13);color:var(--c-muted);line-height:1.5}
.benefit-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--fib-233),1fr));gap:var(--fib-13)}

/* ---- Skeleton (carregamento) — genérico ----------------------------------- */
.sk{position:relative;overflow:hidden;background:var(--c-bg);border-radius:var(--radius)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:sk-shimmer 1.4s infinite}
.sk-line{height:var(--fib-13);margin-bottom:var(--fib-8)}
.sk-thumb{aspect-ratio:1/1}
@keyframes sk-shimmer{100%{transform:translateX(100%)}}

/* ---- Estado vazio genérico ------------------------------------------------ */
.empty-box{padding:var(--fib-55) var(--fib-21);text-align:center;color:var(--c-muted);display:flex;flex-direction:column;align-items:center;gap:var(--fib-13)}
.empty-box .e-ic{font-size:var(--fib-55);color:var(--c-line)}

/* ---- Selo "X pessoas vendo" / prova social leve (genérico, opcional) ------ */
.live-tag{display:inline-flex;align-items:center;gap:var(--fib-5);font-size:11px;color:var(--c-muted);font-weight:600}
.live-tag .pulse{width:var(--fib-8);height:var(--fib-8);border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:live-pulse 1.8s infinite}
@keyframes live-pulse{70%{box-shadow:0 0 0 var(--fib-8) rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ============================================================================
 * CONTROLES DE FORMULÁRIO PADRÃO — base única para inputs/campos do tema.
 * Qualquer par "input + botão" (cupom, CEP, newsletter, busca) usa estas
 * classes para ficar IDÊNTICO entre si e herdar cor/raio/fonte do tema.
 * ==========================================================================*/

/* Input padrão: mesma altura, borda, raio, fundo e foco em qualquer campo. */
.input-std{
  height:var(--control-h);
  padding:0 var(--fib-13);
  border:var(--line-w) solid var(--c-line);
  border-radius:var(--radius);
  background:var(--c-surface);
  color:var(--c-ink);
  font-size:var(--fib-13);
  font-weight:500;
  font-family:var(--font);
  line-height:1;
  width:100%;
  margin:0;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.input-std::placeholder{color:var(--c-muted)}
.input-std:focus{outline:none;border-color:var(--c-brand);box-shadow:var(--focus-ring)}
/* Variante destacada (CEP): borda já na cor da marca para chamar atenção. */
.input-std--hl{border-color:color-mix(in srgb, var(--c-brand) 40%, var(--c-line))}

/* Campo em linha: input + botão SEMPRE na mesma horizontal, nunca quebram.
   O input cresce (flex:1) e o botão mantém o tamanho. */
.field-inline{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--fib-8)}
/* Input cresce a partir do zero (flex-basis:0) e preenche o espaço; o botão fica
   no tamanho do conteúdo (width:auto vence o .btn{width:100%} por especificidade). */
.field-inline > .input-std,.field-inline > input{flex:1 1 0;min-width:0;width:auto;margin:0}
/* margin:0 + align-self:center → botão NUNCA desalinha do input (algumas regras
   genéricas dão margin-top:13px ao .btn, que quebrava o alinhamento horizontal). */
.field-inline > .btn{flex:0 0 auto;width:auto;margin:0;align-self:center}

/* Botão de controle: mesma altura do input padrão (par visualmente alinhado). */
.btn-control{width:auto;height:var(--control-h);min-height:0;padding:0 var(--fib-13);font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center}

/* Cores de estado como utilitário (substitui hex cru inline → tokenizado). */
.text-danger{color:var(--c-danger)}
.text-ok{color:var(--c-ok)}
.text-warn{color:var(--c-warn)}

/* Largura de CTA padrão (substitui max-width:233px inline espalhado). */
.w-cta{max-width:var(--fib-233)}
.w-form{max-width:var(--fib-377)}

/* Bloco centralizado na página (rodapé de post, CTA centrado, etc.). */
.block-center{margin-inline:auto;text-align:center}

}

/* ===== _product-enhance.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 7b · PRODUCT ENHANCE — melhorias genéricas de cartão de produto e da página de
 * produto, reutilizáveis por qualquer loja: selos, overlays, swatches, barra de
 * estoque, preço promocional, ações rápidas, galeria, wishlist. Tokens da loja.
 * ===========================================================================*/

/* ---- Grade responsiva uniforme -------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--fib-233), 1fr));
  gap: var(--fib-21);
  align-items: start;
}
.grid.tight { gap: var(--fib-13); }
.grid.cols-2-fixed { grid-template-columns: repeat(2, 1fr); }

/* ---- Container queries: o grid de produtos reage à largura DO CONTAINER -----
   O .grid mora dentro de <section class="sec">; tornamos a seção um container de
   tamanho inline. As media queries de _responsive.css PERMANECEM (enhancement —
   não regridem nada); o @container só refina quando a seção em si é estreita
   (ex.: grid dentro de coluna/spotlight), independente da viewport. inline-size
   = sem afetar a altura nem o sticky do header (que está fora de .sec). */
.sec { container-type: inline-size; container-name: products; }
@container products (min-width: 540px) {
  .sec .grid { grid-template-columns: repeat(auto-fill, minmax(var(--fib-233), 1fr)); }
}
@container products (max-width: 539px) {
  .sec .grid { grid-template-columns: repeat(2, 1fr); gap: var(--fib-13); }
}
@container products (max-width: 320px) {
  .sec .grid { grid-template-columns: 1fr; }
}

/* ---- Selo sobre a foto (desconto/novo/esgotado) --------------------------- */
.card { position: relative; }
.product-flags {
  position: absolute;
  top: var(--fib-8);
  left: var(--fib-8);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--fib-3);
}
.flag {
  display: inline-block;
  padding: var(--fib-2) var(--fib-8);
  border-radius: var(--r-sm, 5px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.flag.sale { background: #e11d48; }
.flag.new { background: #0ea5e9; }
.flag.hot { background: #f97316; }
.flag.out { background: #6b7280; }

/* ---- Botão de favorito (coração) sobre o cartão --------------------------- */
.wish-btn {
  position: absolute;
  top: var(--fib-8);
  right: var(--fib-8);
  z-index: 3;
  width: var(--fib-34);
  height: var(--fib-34);
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .9);
  color: #9aa4b2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--fib-13);
  transition: color .2s ease, transform .2s ease, background .2s ease;
  box-shadow: 0 1px var(--fib-5) rgba(17, 24, 39, .12);
}
.wish-btn:hover { transform: scale(1.1); }
.wish-btn.on { color: #e11d48; }
.wish-btn.wish-lg {
  position: static;
  width: auto;
  height: var(--fib-34);
  border-radius: var(--radius);
  padding: 0 var(--fib-13);
  gap: var(--fib-5);
  background: transparent;
  border: 1px solid var(--c-line);
  box-shadow: none;
}

/* ---- Preço com promoção (de/por) ------------------------------------------ */
.price { font-weight: 700; }
.price .was {
  color: var(--c-muted);
  font-weight: 400;
  text-decoration: line-through;
  margin-inline-end: var(--fib-5);
  font-size: .85em;
}
.price .now { color: var(--c-accent); }
.price-off {
  display: inline-block;
  margin-inline-start: var(--fib-5);
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
}
.installments {
  display: block;
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 400;
  margin-top: var(--fib-3);
}

/* ---- Barra de estoque ("últimas unidades") -------------------------------- */
.stock-bar {
  height: var(--fib-5);
  border-radius: var(--r-pill, 999px);
  background: var(--c-line);
  overflow: hidden;
  margin-top: var(--fib-8);
}
.stock-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #e11d48);
}
.stock-note {
  font-size: 11px;
  color: #b45309;
  font-weight: 600;
  margin-top: var(--fib-3);
}

/* ---- Swatches (cores) ----------------------------------------------------- */
.swatches {
  display: flex;
  gap: var(--fib-5);
  margin-top: var(--fib-8);
  flex-wrap: wrap;
}
.swatch {
  width: var(--fib-21);
  height: var(--fib-21);
  border-radius: 50%;
  border: 1px solid var(--c-line);
  cursor: pointer;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.swatch:hover { transform: scale(1.12); }
.swatch.on { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-brand); }
.swatch.more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-muted);
  background: var(--c-bg);
}

/* ---- Pílulas de tamanho --------------------------------------------------- */
.size-pills {
  display: flex;
  gap: var(--fib-5);
  flex-wrap: wrap;
  margin-top: var(--fib-8);
}
.size-pill {
  min-width: var(--fib-34);
  height: var(--fib-34);
  padding: 0 var(--fib-8);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fib-13);
  font-weight: 600;
  cursor: pointer;
  background: var(--c-surface);
  transition: border-color .15s ease, color .15s ease;
}
.size-pill:hover { border-color: var(--c-brand); }
.size-pill.on { background: var(--c-ink); color: var(--c-surface); border-color: var(--c-ink); }
.size-pill.off { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

/* ---- Ações rápidas no hover (desktop) ------------------------------------- */
.card .quick {
  position: absolute;
  left: var(--fib-8);
  right: var(--fib-8);
  bottom: var(--fib-8);
  z-index: 3;
  display: flex;
  gap: var(--fib-5);
  opacity: 0;
  transform: translateY(var(--fib-8));
  transition: opacity .2s ease, transform .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .quick { opacity: 1; transform: none; }
}
.card .quick .btn { flex: 1; }

/* ---- Galeria do produto (zoom/lightbox) ----------------------------------- */
.imgwrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg);
  cursor: zoom-in;
}
.imgwrap img { width: 100%; display: block; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox, 150);
  background: rgba(0, 0, 0, .9);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--fib-21);
  cursor: zoom-out;
}
.lightbox.on { display: flex; }
.lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: var(--radius);
}

/* ---- Selo de avaliação inline (no cartão) --------------------------------- */
.card .mini-rate {
  display: inline-flex;
  align-items: center;
  gap: var(--fib-3);
  font-size: 11px;
  color: var(--c-muted);
  margin-top: var(--fib-3);
}
.card .mini-rate .stars { font-size: 11px; }

/* ---- Esgotado: capa esmaecida --------------------------------------------- */
.card.is-out .thumb { opacity: .65; filter: grayscale(.2); }
.badge-soldout {
  position: absolute;
  top: var(--fib-8);
  left: var(--fib-8);
  z-index: 3;
  background: #6b7280;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: var(--fib-2) var(--fib-8);
  border-radius: var(--r-sm, 5px);
}

}

/* ===== _product-page.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 7c · PRODUCT PAGE — refino completo da página de produto (genérico p/ qualquer
 * loja): galeria, info, variações, quantidade, avaliações, especificações,
 * tabela de medidas, estimativa de entrega, barra de compra fixa no mobile,
 * relacionados e vistos. Casa com as classes reais do render (.pd/.imgwrap/.rev-*).
 * ===========================================================================*/

/* ---- Layout principal ----------------------------------------------------- */
.pd {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--fib-55);
  align-items: start;
}
.pd > div:first-child { position: relative; }

/* Galeria: imagem principal grande (sticky no desktop) + miniaturas. */
.pd .gallery-col { position: sticky; top: var(--fib-21); }
.pd h2 { font-size: var(--fib-34); line-height: 1.15; margin: 0 0 var(--fib-8); }

/* ---- Miniaturas ----------------------------------------------------------- */
.thumbs {
  display: flex;
  gap: var(--fib-8);
  margin-top: var(--fib-13);
  flex-wrap: wrap;
}
.thumbs .t {
  width: var(--fib-55);
  height: var(--fib-55);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-line);
  cursor: pointer;
  background: var(--c-surface);
  transition: border-color .15s ease, transform .15s ease;
}
.thumbs .t:hover { transform: translateY(-2px); }
.thumbs .t.on { border-color: var(--c-brand); box-shadow: 0 0 0 1px var(--c-brand); }
.thumbs .t img { width: 100%; height: 100%; object-fit: contain; background: var(--c-surface); display: block; }

/* ---- Bloco de informações ------------------------------------------------- */
.pd .price {
  font-size: var(--fib-34);
  font-weight: 800;
  color: var(--c-ink);
}
.pd .price .was {
  font-size: .6em;
  color: var(--c-muted);
  text-decoration: line-through;
  margin-inline-end: var(--fib-8);
  font-weight: 400;
}
.pd .price .off-pill {
  font-size: .5em;
  vertical-align: middle;
  margin-inline-start: var(--fib-8);
  background: #16a34a;
  color: #fff;
  padding: 2px var(--fib-8);
  border-radius: var(--r-pill, 999px);
  font-weight: 700;
}
.pd .pd-desc {
  color: var(--c-muted);
  line-height: 1.7;
  margin: var(--fib-13) 0 var(--fib-21);
}

/* ---- Variações / quantidade ----------------------------------------------- */
.pd label {
  display: block;
  font-size: var(--fib-13);
  font-weight: 600;
  margin: var(--fib-13) 0 var(--fib-5);
}
.pd select {
  width: 100%;
  min-height: var(--fib-34);
  padding: var(--fib-8) var(--fib-13);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fib-13);
}
.qty-row {
  display: flex;
  align-items: center;
  gap: var(--fib-13);
  margin: var(--fib-13) 0;
}
.qty-row label { margin: 0; }
.qty-ctl {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.qty-ctl button {
  width: var(--fib-34);
  height: var(--fib-34);
  border: 0;
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fib-21);
  cursor: pointer;
}
.qty-ctl button:hover { background: var(--c-bg); }
.qty-ctl input {
  width: var(--fib-55);
  height: var(--fib-34);
  border: 0;
  border-left: 1px solid var(--c-line);
  border-right: 1px solid var(--c-line);
  text-align: center;
  font-weight: 700;
  background: transparent;
  color: var(--c-ink);
}

/* ---- Botões de compra ----------------------------------------------------- */
/* :not(.btn-control) → não dá margem ao "Calcular" do frete (que fica em linha
   com o input via .field-inline, e a margem quebrava o alinhamento horizontal). */
.pd form .btn:not(.btn-control) { margin-top: var(--fib-13); }
.pd .btn[style*="233px"], .pd form > .btn { font-size: var(--fib-21); }
.bis-form { margin-top: var(--fib-13); }

/* ---- Avaliações ----------------------------------------------------------- */
.rev-summary {
  display: flex;
  align-items: center;
  gap: var(--fib-13);
  margin-bottom: var(--fib-21);
}
.rev-summary .stars { font-size: var(--fib-21); }
.rev-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--fib-8);
  margin: var(--fib-5) 0 var(--fib-13);
  font-size: var(--fib-13);
}
.rev-list { display: flex; flex-direction: column; gap: var(--fib-21); }
.rev-item {
  border: 1px solid var(--c-line);
  border-radius: var(--fib-13);
  padding: var(--fib-21);
  background: var(--c-surface);
}
.rev-head {
  display: flex;
  align-items: center;
  gap: var(--fib-8);
  margin-bottom: var(--fib-8);
  flex-wrap: wrap;
}
.rev-title { font-weight: 700; margin-bottom: var(--fib-5); }
.rev-item p { color: var(--c-ink); line-height: 1.6; margin: 0; }
.rev-form-wrap { margin-top: var(--fib-21); }
.rev-form {
  border: 1px solid var(--c-line);
  border-radius: var(--fib-13);
  padding: var(--fib-21);
  margin-top: var(--fib-13);
  background: var(--c-bg);
}
.rev-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fib-13); }

/* ---- Especificações (tabela genérica) ------------------------------------- */
.specs {
  width: 100%;
  border-collapse: collapse;
  margin: var(--fib-21) 0;
}
.specs tr { border-bottom: 1px solid var(--c-line); }
.specs th {
  text-align: left;
  padding: var(--fib-8) var(--fib-13) var(--fib-8) 0;
  color: var(--c-muted);
  font-weight: 600;
  width: 40%;
  font-size: var(--fib-13);
}
.specs td { padding: var(--fib-8) 0; font-size: var(--fib-13); }

/* ---- Tabela de medidas (size guide) --------------------------------------- */
.size-guide {
  border: 1px solid var(--c-line);
  border-radius: var(--fib-13);
  padding: var(--fib-13);
  margin: var(--fib-13) 0;
}
.size-guide table { width: 100%; border-collapse: collapse; font-size: var(--fib-13); }
.size-guide th, .size-guide td {
  border: 1px solid var(--c-line);
  padding: var(--fib-5) var(--fib-8);
  text-align: center;
}
.size-guide thead th { background: var(--c-bg); font-weight: 700; }

/* ---- Estimativa de entrega (CEP) ------------------------------------------ */
.ship-est {
  display: flex;
  gap: var(--fib-8);
  align-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--fib-8);
  margin: var(--fib-13) 0;
}
.ship-est input { flex: 1; border: 0; background: transparent; }
.ship-est .btn { flex: none; }
.ship-result { font-size: var(--fib-13); color: var(--c-muted); margin-top: var(--fib-5); }

/* ---- Selos de confiança no produto ---------------------------------------- */
.pd-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fib-13);
  margin-top: var(--fib-21);
  padding-top: var(--fib-21);
  border-top: 1px solid var(--c-line);
}
.pd-trust span { display: flex; align-items: center; gap: var(--fib-8); font-size: var(--fib-13); color: var(--c-muted); }
.pd-trust i { color: var(--c-brand); font-size: var(--fib-21); }

/* ---- Barra de compra fixa (mobile) ---------------------------------------- */
.buy-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-buybar, 70);
  display: none;
  align-items: center;
  gap: var(--fib-13);
  padding: var(--fib-8) var(--fib-13);
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 calc(-1 * var(--fib-3)) var(--fib-13) rgba(17, 24, 39, .08);
}
.buy-bar .bb-price { font-weight: 800; font-size: var(--fib-21); }
.buy-bar .btn { flex: 1; }

/* ---- Detalhes em acordeão (descrição/entrega/trocas) ---------------------- */
.pd-acc { margin-top: var(--fib-21); }
.pd-acc details { border-bottom: 1px solid var(--c-line); }
.pd-acc summary {
  cursor: pointer;
  padding: var(--fib-13) 0;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.pd-acc summary::-webkit-details-marker { display: none; }
.pd-acc summary::after { content: "+"; color: var(--c-muted); font-size: var(--fib-21); }
.pd-acc details[open] summary::after { content: "\2013"; }
.pd-acc .pd-acc-body { padding-bottom: var(--fib-13); color: var(--c-muted); line-height: 1.7; }

/* ---- Responsivo ----------------------------------------------------------- */
@media (max-width: 768px) {
  .pd { grid-template-columns: 1fr; gap: var(--fib-21); }
  .pd .gallery-col { position: static; }
  .rev-form .row { grid-template-columns: 1fr; }
  .pd-trust { grid-template-columns: 1fr; }
  .buy-bar { display: flex; }
  body.has-buybar main { padding-bottom: var(--fib-89); }
}

}

/* ===== _prose.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 20 · PROSE — tipografia rica para conteúdo longo: post de blog, páginas
 * personalizadas (Sobre/Trocas/Políticas) e descrição de produto. Aplique
 * `.prose` no container do conteúdo. Genérico, em tokens da loja.
 * ===========================================================================*/

.prose {
  max-width: 70ch;
  color: var(--c-ink);
  font-size: var(--fib-21);
  line-height: 1.75;
}
.prose.narrow { max-width: 62ch; }
.prose.center { margin-inline: auto; }

/* ---- Títulos -------------------------------------------------------------- */
.prose h1 { font-size: clamp(var(--fib-34), 5vw, var(--fib-55)); line-height: 1.1; margin: 0 0 var(--fib-21); }
.prose h2 { font-size: var(--fib-34); line-height: 1.2; margin: var(--fib-55) 0 var(--fib-13); }
.prose h3 { font-size: var(--fib-21); line-height: 1.3; margin: var(--fib-34) 0 var(--fib-8); }
.prose h4 { font-size: var(--fib-21); margin: var(--fib-21) 0 var(--fib-8); font-weight: 600; }
.prose h2 + h3 { margin-top: var(--fib-13); }

/* ---- Parágrafos / listas -------------------------------------------------- */
.prose p { margin: 0 0 var(--fib-21); }
.prose ul, .prose ol { margin: 0 0 var(--fib-21); padding-inline-start: var(--fib-21); }
.prose li { margin-bottom: var(--fib-8); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul ul, .prose ol ol { margin: var(--fib-8) 0; }
.prose li::marker { color: var(--c-brand); }

/* ---- Links ---------------------------------------------------------------- */
.prose a {
  color: var(--c-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.prose a:hover { text-decoration-thickness: 2px; }

/* ---- Ênfase --------------------------------------------------------------- */
.prose strong { font-weight: 700; color: var(--c-ink); }
.prose em { font-style: italic; }
.prose mark { background: color-mix(in srgb, var(--c-accent) 25%, transparent); color: inherit; padding: 0 2px; }
.prose small { font-size: .82em; color: var(--c-muted); }

/* ---- Citação -------------------------------------------------------------- */
.prose blockquote {
  margin: var(--fib-34) 0;
  padding: var(--fib-13) var(--fib-21);
  border-left: var(--fib-3) solid var(--c-brand);
  background: var(--c-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--c-ink);
  font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite { display: block; margin-top: var(--fib-8); font-style: normal; font-weight: 600; color: var(--c-muted); }

/* ---- Código --------------------------------------------------------------- */
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm, 5px);
  padding: 1px var(--fib-5);
}
.prose pre {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: var(--fib-13);
  padding: var(--fib-21);
  overflow-x: auto;
  margin: var(--fib-21) 0;
  font-size: var(--fib-13);
  line-height: 1.6;
}
.prose pre code { background: transparent; border: 0; padding: 0; color: inherit; }

/* ---- Imagens / figuras ---------------------------------------------------- */
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--fib-13);
  display: block;
  margin: var(--fib-21) 0;
}
.prose figure { margin: var(--fib-34) 0; }
.prose figcaption { text-align: center; font-size: var(--fib-13); color: var(--c-muted); margin-top: var(--fib-8); }
.prose .img-full {
  width: 100vw;
  max-width: 100vw;
  margin-inline-start: calc(50% - 50vw);
  border-radius: 0;
}

/* ---- Divisores / tabelas -------------------------------------------------- */
.prose hr { border: 0; height: 1px; background: var(--c-line); margin: var(--fib-34) 0; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--fib-21) 0; font-size: var(--fib-13); }
.prose th, .prose td { border: 1px solid var(--c-line); padding: var(--fib-8) var(--fib-13); text-align: left; }
.prose thead th { background: var(--c-bg); font-weight: 700; }

/* ---- Primeira letra capitular (opcional) ---------------------------------- */
.prose.dropcap > p:first-of-type::first-letter {
  float: left;
  font-size: var(--fib-89);
  line-height: .8;
  font-weight: 800;
  margin: var(--fib-5) var(--fib-13) 0 0;
  color: var(--c-brand);
}

/* ---- Caixa de destaque (callout) ------------------------------------------ */
.prose .callout {
  display: flex;
  gap: var(--fib-13);
  padding: var(--fib-21);
  border-radius: var(--fib-13);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  margin: var(--fib-21) 0;
}
.prose .callout .c-ic { color: var(--c-brand); font-size: var(--fib-34); flex: none; }
.prose .callout p:last-child { margin-bottom: 0; }

/* ---- Responsivo ----------------------------------------------------------- */
@media (max-width: 768px) {
  .prose { font-size: var(--fib-13); }
  .prose h1 { font-size: var(--fib-34); }
  .prose h2 { font-size: var(--fib-21); }
}

}

/* ===== _blog.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 21 · BLOG — lista de posts e página do post. Genérico para qualquer loja que
 * tenha (ou venha a ter) um blog: capa, grade de cards, categorias, meta
 * (autor/data/tempo de leitura), artigo, compartilhar, autor, relacionados,
 * navegação prev/próximo, CTA de newsletter. Tokens da loja + Fibonacci.
 * Markup esperado: .blog (lista) / .post (página). Use junto com .prose no corpo.
 * ===========================================================================*/

/* =============================================================================
 * LISTA DO BLOG
 * ===========================================================================*/
.blog { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--fib-21); }

/* ---- Capa do blog --------------------------------------------------------- */
.blog-hero {
  text-align: center;
  padding-block: var(--fib-55);
}
.blog-hero h1 { font-size: clamp(var(--fib-34), 6vw, var(--fib-89)); margin: 0 0 var(--fib-13); }
.blog-hero p { color: var(--c-muted); max-width: 56ch; margin: 0 auto; font-size: var(--fib-21); }

/* ---- Filtro de categorias ------------------------------------------------- */
.blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fib-8);
  justify-content: center;
  margin-bottom: var(--fib-34);
}
.blog-cats a {
  padding: var(--fib-5) var(--fib-13);
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--c-line);
  font-size: var(--fib-13);
  font-weight: 600;
  color: var(--c-ink);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.blog-cats a:hover { border-color: var(--c-brand); color: var(--c-brand); }
.blog-cats a.on { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-surface); }

/* ---- Post em destaque (primeiro, largura total) --------------------------- */
.post-feature {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--fib-34);
  align-items: center;
  margin-bottom: var(--fib-55);
  border: 1px solid var(--c-line);
  border-radius: var(--fib-21);
  overflow: hidden;
  background: var(--c-surface);
}
.post-feature .pf-media { aspect-ratio: 16/10; overflow: hidden; }
.post-feature .pf-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-feature:hover .pf-media img { transform: scale(1.04); }
.post-feature .pf-body { padding: var(--fib-34); }
.post-feature h2 { font-size: var(--fib-34); margin: var(--fib-8) 0 var(--fib-13); }
.post-feature p { color: var(--c-muted); line-height: 1.6; margin: 0 0 var(--fib-13); }

/* ---- Grade de posts ------------------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--fib-377), 1fr));
  gap: var(--fib-34);
}

/* ---- Card de post --------------------------------------------------------- */
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-radius: var(--fib-13);
  overflow: hidden;
  border: 1px solid var(--c-line);
  transition: transform .25s ease, box-shadow .25s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 var(--fib-13) var(--fib-34) rgba(17, 24, 39, .12); }
.post-card .pc-media { aspect-ratio: 16/10; overflow: hidden; background: var(--c-bg); }
.post-card .pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .pc-media img { transform: scale(1.05); }
.post-card .pc-body { padding: var(--fib-21); display: flex; flex-direction: column; gap: var(--fib-8); flex: 1; }
.post-card .pc-cat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-brand);
}
.post-card h3 { font-size: var(--fib-21); line-height: 1.3; margin: 0; }
.post-card h3 a { color: var(--c-ink); }
.post-card h3 a:hover { color: var(--c-brand); }
.post-card .pc-excerpt {
  color: var(--c-muted);
  line-height: 1.6;
  font-size: var(--fib-13);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card .pc-foot { margin-top: auto; }

/* ---- Meta (autor / data / leitura) ---------------------------------------- */
.post-meta {
  display: flex;
  align-items: center;
  gap: var(--fib-8);
  font-size: var(--fib-13);
  color: var(--c-muted);
  flex-wrap: wrap;
}
.post-meta .avatar {
  width: var(--fib-21);
  height: var(--fib-21);
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-bg);
}
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.post-meta time { white-space: nowrap; }

/* =============================================================================
 * PÁGINA DO POST
 * ===========================================================================*/
.post { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--fib-21); }

/* ---- Cabeçalho do post ---------------------------------------------------- */
.post-head {
  max-width: 70ch;
  margin: 0 auto;
  text-align: center;
  padding-block: var(--fib-55) var(--fib-34);
}
.post-head .pc-cat { display: inline-block; margin-bottom: var(--fib-13); }
.post-head h1 { font-size: clamp(var(--fib-34), 5vw, var(--fib-55)); line-height: 1.12; margin: 0 0 var(--fib-21); }
.post-head .post-meta { justify-content: center; }

/* ---- Capa do post --------------------------------------------------------- */
.post-cover {
  margin: 0 auto var(--fib-34);
  border-radius: var(--fib-21);
  overflow: hidden;
  aspect-ratio: 16/9;
  max-width: var(--fib-987, 987px);
}
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Corpo do post (usa .prose) — coluna única, centrada -------------------
   Sem barra lateral: Compartilhar + tags vão para o rodapé do post (.post-foot). */
.post-body {
  max-width: var(--fib-754, 754px);
  margin-inline: auto;
}
.post-body .prose { max-width: 100%; }

/* ---- Rodapé do post: Compartilhar + tags (abaixo do conteúdo, CENTRADO) ----
   Bloco centralizado na página: rótulo "Compartilhar" + ícones e as tags ficam
   centrados horizontalmente (pedido do lojista). */
.post-foot {
  max-width: var(--fib-754, 754px);
  margin: var(--fib-34) auto 0;
  padding-top: var(--fib-21);
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--fib-13);
}
.post-foot .post-share { justify-content: center; }
.post-foot .post-tags { justify-content: center; }

/* ---- Índice (table of contents) ------------------------------------------- */
.post-toc {
  border: 1px solid var(--c-line);
  border-radius: var(--fib-13);
  padding: var(--fib-21);
}
.post-toc strong { display: block; font-size: var(--fib-13); text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); margin-bottom: var(--fib-13); }
.post-toc a { display: block; padding: var(--fib-5) 0; font-size: var(--fib-13); color: var(--c-ink); }
.post-toc a:hover, .post-toc a.active { color: var(--c-brand); }
.post-toc a.sub { padding-inline-start: var(--fib-13); color: var(--c-muted); }

/* ---- Compartilhar --------------------------------------------------------- */
.post-share {
  display: flex;
  align-items: center;
  gap: var(--fib-8);
}
.post-share span { font-size: var(--fib-13); color: var(--c-muted); }
.post-share a {
  width: var(--fib-34);
  height: var(--fib-34);
  border-radius: 50%;
  border: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.post-share a:hover { border-color: var(--c-brand); color: var(--c-brand); transform: translateY(-2px); }

/* ---- Tags do post --------------------------------------------------------- */
.post-tags { display: flex; flex-wrap: wrap; gap: var(--fib-8); margin: 0; }
.post-tags a {
  font-size: var(--fib-13);
  padding: var(--fib-3) var(--fib-13);
  border-radius: var(--r-pill, 999px);
  background: var(--c-bg);
  color: var(--c-muted);
}
.post-tags a:hover { color: var(--c-brand); }

/* ---- Cartão do autor ------------------------------------------------------ */
.author-card {
  display: flex;
  gap: var(--fib-21);
  align-items: center;
  padding: var(--fib-21);
  border-radius: var(--fib-13);
  background: var(--c-bg);
  margin: var(--fib-34) 0;
}
.author-card img {
  width: var(--fib-55);
  height: var(--fib-55);
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.author-card h4 { margin: 0 0 var(--fib-3); }
.author-card p { margin: 0; color: var(--c-muted); font-size: var(--fib-13); line-height: 1.5; }

/* ---- Navegação prev / próximo --------------------------------------------- */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fib-13);
  margin: var(--fib-34) 0;
}
.post-nav a {
  border: 1px solid var(--c-line);
  border-radius: var(--fib-13);
  padding: var(--fib-21);
  display: flex;
  flex-direction: column;
  gap: var(--fib-5);
  transition: border-color .15s ease;
}
.post-nav a:hover { border-color: var(--c-brand); }
.post-nav .pn-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); }
.post-nav .pn-title { font-weight: 600; color: var(--c-ink); }
.post-nav a.next { text-align: right; }

/* ---- Relacionados --------------------------------------------------------- */
.post-related { margin-block: var(--fib-55); }
.post-related h2 { text-align: center; margin-bottom: var(--fib-34); }

/* ---- CTA de newsletter no fim do post ------------------------------------- */
.post-cta {
  text-align: center;
  padding: var(--fib-55) var(--fib-21);
  border-radius: var(--fib-21);
  background: var(--c-bg);
  margin-block: var(--fib-55);
}
.post-cta h3 { margin: 0 0 var(--fib-8); }
.post-cta p { color: var(--c-muted); margin: 0 auto var(--fib-21); max-width: 48ch; }
.post-cta form { display: flex; gap: var(--fib-8); max-width: var(--fib-610); margin: 0 auto; }
.post-cta input { flex: 1; }

/* ---- Barra de progresso de leitura (topo) --------------------------------- */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: var(--fib-3);
  width: 0;
  background: var(--c-brand);
  z-index: var(--z-progress, 120);
  transition: width .1s linear;
}

/* ---- Responsivo ----------------------------------------------------------- */
@media (max-width: 900px) {
  .post-toc { display: none; }
}
@media (max-width: 768px) {
  .post-feature { grid-template-columns: 1fr; }
  .post-feature .pf-body { padding: var(--fib-21); }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav a.next { text-align: left; }
  .blog-hero h1 { font-size: var(--fib-34); }
  .blog-hero p { font-size: var(--fib-13); }
  .author-card { flex-direction: column; text-align: center; }
}

/* =============================================================================
 * WIDGETS DA SIDEBAR DO BLOG (posts populares, tags, categorias, busca)
 * ===========================================================================*/
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fib-377);
  gap: var(--fib-55);
  align-items: start;
}
.blog-side { position: sticky; top: var(--fib-21); display: flex; flex-direction: column; gap: var(--fib-34); }
.widget { }
.widget h4 {
  font-size: var(--fib-13);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-muted);
  margin: 0 0 var(--fib-13);
  padding-bottom: var(--fib-8);
  border-bottom: 1px solid var(--c-line);
}

/* Busca do blog. */
.widget-search { display: flex; gap: var(--fib-8); }
.widget-search input {
  flex: 1;
  min-height: var(--fib-34);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 0 var(--fib-13);
  background: var(--c-surface);
  color: var(--c-ink);
}

/* Posts populares (miniatura + título). */
.popular-post {
  display: flex;
  gap: var(--fib-13);
  align-items: center;
  padding: var(--fib-8) 0;
}
.popular-post .pp-thumb {
  width: var(--fib-55);
  height: var(--fib-55);
  border-radius: var(--radius);
  overflow: hidden;
  flex: none;
  background: var(--c-bg);
}
.popular-post .pp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.popular-post .pp-title { font-size: var(--fib-13); font-weight: 600; line-height: 1.3; }
.popular-post .pp-title a:hover { color: var(--c-brand); }
.popular-post time { font-size: 11px; color: var(--c-muted); }

/* Lista de categorias com contador. */
.cat-list { display: flex; flex-direction: column; }
.cat-list a {
  display: flex;
  justify-content: space-between;
  padding: var(--fib-8) 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fib-13);
  color: var(--c-ink);
}
.cat-list a:hover { color: var(--c-brand); }
.cat-list .n { color: var(--c-muted); }

/* Nuvem de tags. */
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--fib-8); }
.tag-cloud a {
  font-size: var(--fib-13);
  padding: var(--fib-3) var(--fib-13);
  border-radius: var(--r-pill, 999px);
  background: var(--c-bg);
  color: var(--c-muted);
  transition: background .15s ease, color .15s ease;
}
.tag-cloud a:hover { background: var(--c-brand); color: #fff; }

/* =============================================================================
 * COMENTÁRIOS DO POST
 * ===========================================================================*/
.comments { margin-block: var(--fib-55); max-width: var(--fib-987, 987px); margin-inline: auto; }
.comments > h3 { margin-bottom: var(--fib-21); }
.comment {
  display: flex;
  gap: var(--fib-13);
  padding: var(--fib-21) 0;
  border-bottom: 1px solid var(--c-line);
}
.comment .c-avatar {
  width: var(--fib-34);
  height: var(--fib-34);
  border-radius: 50%;
  background: var(--c-bg);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--c-muted);
}
.comment .c-head { display: flex; align-items: center; gap: var(--fib-8); margin-bottom: var(--fib-5); }
.comment .c-name { font-weight: 700; }
.comment .c-date { font-size: 11px; color: var(--c-muted); }
.comment .c-body { color: var(--c-ink); line-height: 1.6; margin: 0; }
.comment.reply { margin-inline-start: var(--fib-55); }
.comment-form { margin-top: var(--fib-21); display: flex; flex-direction: column; gap: var(--fib-13); }
.comment-form textarea { min-height: var(--fib-89); }

@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-side { position: static; }
  .comment.reply { margin-inline-start: var(--fib-21); }
}

}

/* ===== _theme-extra.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 22 · THEME EXTRA — componentes gerais de tema que qualquer loja aproveita:
 * resultados de busca, 404, modal/dialog, toast, cookie banner, contato,
 * tabela comparativa, depoimentos, FAQ rico, banner de cupom, store locator,
 * loading. Tudo em tokens da loja + escala Fibonacci.
 * ===========================================================================*/

/* ---- Página de resultados de busca ---------------------------------------- */
.search-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fib-13);
  margin-bottom: var(--fib-21);
  flex-wrap: wrap;
}
.search-head h1 { margin: 0; font-size: var(--fib-34); }
.search-head .count { color: var(--c-muted); font-size: var(--fib-13); }
.no-results {
  text-align: center;
  padding-block: var(--fib-89);
  color: var(--c-muted);
}
.no-results .nr-ic { font-size: var(--fib-89); color: var(--c-line); margin-bottom: var(--fib-13); }
.no-results .suggestions { display: flex; gap: var(--fib-8); justify-content: center; flex-wrap: wrap; margin-top: var(--fib-21); }

/* ---- Página 404 ----------------------------------------------------------- */
.page-404 {
  text-align: center;
  padding-block: var(--fib-89);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fib-13);
}
.page-404 .big-num {
  font-size: clamp(var(--fib-89), 18vw, 160px);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(120deg, var(--c-brand), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-404 p { color: var(--c-muted); max-width: 40ch; }

/* ---- Modal / dialog genérico ---------------------------------------------- */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 130);
  background: rgba(17, 24, 39, .5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--fib-21);
}
.modal-scrim.on { display: flex; }
.modal {
  background: var(--c-surface);
  border-radius: var(--fib-21);
  max-width: var(--fib-610);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 var(--fib-21) var(--fib-55) rgba(0, 0, 0, .3);
  animation: modal-in .25s ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(var(--fib-21)) scale(.98); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--fib-21); border-bottom: 1px solid var(--c-line); }
.modal-head strong { font-size: var(--fib-21); }
.modal-body { padding: var(--fib-21); }
.modal-close { width: var(--fib-34); height: var(--fib-34); border: 0; background: transparent; font-size: var(--fib-21); cursor: pointer; color: var(--c-muted); border-radius: 50%; }
.modal-close:hover { background: var(--c-bg); color: var(--c-ink); }

/* ---- Toast / notificação flutuante ---------------------------------------- */
.toast-wrap {
  position: fixed;
  right: var(--fib-21);
  bottom: var(--fib-21);
  z-index: var(--z-toast, 140);
  display: flex;
  flex-direction: column;
  gap: var(--fib-8);
  max-width: var(--fib-377);
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--fib-8);
  padding: var(--fib-13) var(--fib-21);
  border-radius: var(--fib-13);
  background: var(--c-ink);
  color: var(--c-surface);
  font-size: var(--fib-13);
  box-shadow: 0 var(--fib-8) var(--fib-21) rgba(0, 0, 0, .25);
  animation: toast-in .3s ease;
}
.toast.ok { background: #16a34a; }
.toast.err { background: #e11d48; }
@keyframes toast-in { from { opacity: 0; transform: translateX(var(--fib-21)); } to { opacity: 1; transform: none; } }

/* ---- Banner de cookies / LGPD --------------------------------------------- */
.cookie-bar {
  position: fixed;
  left: var(--fib-21);
  right: var(--fib-21);
  bottom: var(--fib-21);
  z-index: var(--z-cookie, 110);
  display: flex;
  align-items: center;
  gap: var(--fib-21);
  flex-wrap: wrap;
  padding: var(--fib-13) var(--fib-21);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--fib-13);
  box-shadow: 0 var(--fib-8) var(--fib-34) rgba(17, 24, 39, .15);
  font-size: var(--fib-13);
}
.cookie-bar p { margin: 0; flex: 1; min-width: var(--fib-233); color: var(--c-muted); }
.cookie-bar .btn-row { margin-inline-start: auto; }

/* ---- Tabela comparativa --------------------------------------------------- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--fib-21) 0;
}
.compare-table th, .compare-table td {
  border: 1px solid var(--c-line);
  padding: var(--fib-13);
  text-align: center;
}
.compare-table thead th { background: var(--c-bg); }
.compare-table tbody th { text-align: left; font-weight: 600; }
.compare-table .yes { color: #16a34a; }
.compare-table .no { color: var(--c-muted); opacity: .6; }
.compare-table .hl { background: color-mix(in srgb, var(--c-brand) 8%, transparent); }

/* ---- Depoimentos (cards) — refino genérico -------------------------------- */
.tcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--fib-233), 1fr));
  gap: var(--fib-21);
}
.tcard {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--fib-13);
  padding: var(--fib-21);
  display: flex;
  flex-direction: column;
  gap: var(--fib-8);
}
.tcard .tstars { color: #f59e0b; letter-spacing: 1px; }
.tcard .ttext { font-style: italic; color: var(--c-ink); line-height: 1.6; margin: 0; }
.tcard .tname { font-weight: 700; margin-top: auto; }

/* ---- Bloco de contato (mapa + dados) -------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fib-34);
  align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: var(--fib-13); }
.contact-info .ci-item { display: flex; gap: var(--fib-13); align-items: flex-start; }
.contact-info .ci-item i { color: var(--c-brand); font-size: var(--fib-21); margin-top: 2px; }
.contact-info strong { display: block; }
.contact-info span { color: var(--c-muted); }

/* ---- Banner de cupom (faixa destacada) ------------------------------------ */
.coupon-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fib-13);
  flex-wrap: wrap;
  padding: var(--fib-21);
  border: 2px dashed var(--c-brand);
  border-radius: var(--fib-13);
  background: color-mix(in srgb, var(--c-brand) 6%, transparent);
  text-align: center;
}
.coupon-strip .code {
  font-family: ui-monospace, monospace;
  font-weight: 800;
  font-size: var(--fib-21);
  letter-spacing: .1em;
  padding: var(--fib-5) var(--fib-13);
  border: 1px dashed var(--c-brand);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-brand);
}

/* ---- Store locator / horário ---------------------------------------------- */
.hours-list { display: flex; flex-direction: column; gap: var(--fib-5); }
.hours-list .hr-row { display: flex; justify-content: space-between; font-size: var(--fib-13); padding: var(--fib-5) 0; border-bottom: 1px solid var(--c-line); }
.hours-list .hr-row.today { font-weight: 700; color: var(--c-brand); }

/* ---- Spinner / carregando genérico ---------------------------------------- */
.spinner {
  width: var(--fib-34);
  height: var(--fib-34);
  border: var(--fib-3) solid var(--c-line);
  border-top-color: var(--c-brand);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.loading-center { display: flex; align-items: center; justify-content: center; padding: var(--fib-55); }

/* ---- Selo de pagamento (bandeiras) ---------------------------------------- */
.pay-icons { display: flex; flex-wrap: wrap; gap: var(--fib-8); align-items: center; }
.pay-icons .pay {
  width: var(--fib-34);
  height: var(--fib-21);
  border-radius: var(--r-sm, 5px);
  border: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--c-muted);
  background: var(--c-surface);
}

/* ---- Responsivo ----------------------------------------------------------- */
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; }
  .compare-table { font-size: var(--fib-13); }
  .cookie-bar { flex-direction: column; align-items: stretch; }
  .cookie-bar .btn-row { margin-inline-start: 0; }
  .toast-wrap { left: var(--fib-13); right: var(--fib-13); max-width: none; }
}

}

/* ===== _sections-plus.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 8b · SECTIONS+ — biblioteca de blocos de seção genéricos que qualquer loja
 * pode usar no tema: faixas de CTA, marquee, contagem regressiva, newsletter,
 * tira de logos, split (texto+imagem), banda de marca, grade de diferenciais,
 * citação, FAQ, lookbook. Tokens da loja + escala Fibonacci.
 * ===========================================================================*/

/* ---- Ritmo vertical e largura de seção ------------------------------------ */
.section,
.sec {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--fib-21);
}
.section--wide { max-width: var(--fib-1597, 1597px); }
.section--narrow { max-width: var(--fib-987, 987px); }
.section-pad { padding-block: var(--fib-55); }
.section-pad-lg { padding-block: var(--fib-89); }

/* Faixa de fundo full-bleed (cor de borda a borda, conteúdo centrado). */
.band {
  width: 100vw;
  margin-inline-start: calc(50% - 50vw);
  padding-block: var(--fib-55);
}
.band > .band-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--fib-21);
}
.band.soft { background: var(--c-bg); }
.band.ink { background: var(--c-ink); color: var(--c-surface); }
.band.brand { background: var(--c-brand); color: #fff; }
.band.brand h2, .band.ink h2 { color: inherit; }

/* ---- Cabeçalho de seção --------------------------------------------------- */
.sec-head {
  text-align: center;
  max-width: 65ch;
  margin: 0 auto var(--fib-34);
}
.sec-head .eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: var(--fib-8);
}
.sec-head h2 { margin: 0 0 var(--fib-8); }
.sec-head p { color: var(--c-muted); line-height: 1.6; margin: 0; }
.sec-head.left { text-align: left; margin-inline: 0; }

/* ---- Faixa de CTA --------------------------------------------------------- */
.cta-band {
  text-align: center;
  padding-block: var(--fib-89);
  border-radius: var(--fib-21);
}
.cta-band h2 { margin: 0 0 var(--fib-8); }
.cta-band p { color: inherit; opacity: .85; max-width: 56ch; margin: 0 auto var(--fib-21); }
.cta-band .btn-row { justify-content: center; }

/* ---- Marquee (texto que corre) -------------------------------------------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: var(--c-ink);
  color: var(--c-surface);
  padding-block: var(--fib-8);
}
.marquee > .marquee-track {
  display: inline-block;
  padding-inline-start: 100%;
  animation: marquee 18s linear infinite;
  font-weight: 600;
  font-size: var(--fib-13);
  letter-spacing: .03em;
}
.marquee span { margin: 0 var(--fib-21); }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee > .marquee-track { animation: none; padding-inline-start: 0; text-align: center; display: block; }
}

/* ---- Contagem regressiva (countdown) -------------------------------------- */
.countdown {
  display: flex;
  gap: var(--fib-8);
  justify-content: center;
  align-items: center;
}
.cd-unit {
  min-width: var(--fib-55);
  padding: var(--fib-8);
  border-radius: var(--radius);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  text-align: center;
}
.cd-unit b { display: block; font-size: var(--fib-34); font-weight: 800; line-height: 1; }
.cd-unit small { font-size: 10px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ---- Newsletter (bloco autônomo) ------------------------------------------ */
.newsletter-block {
  text-align: center;
  padding-block: var(--fib-55);
}
.newsletter-block h3 { margin: 0 0 var(--fib-8); }
.newsletter-block p { color: var(--c-muted); margin: 0 auto var(--fib-21); max-width: 48ch; }
.newsletter-block form {
  display: flex;
  gap: var(--fib-8);
  max-width: var(--fib-610);
  margin: 0 auto;
}
.newsletter-block input { flex: 1; }

/* ---- Tira de logos (marcas/garantias) ------------------------------------- */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fib-34);
  align-items: center;
  justify-content: center;
  opacity: .7;
}
.logo-strip img { height: var(--fib-34); width: auto; filter: grayscale(1); }

/* ---- Split (texto + imagem lado a lado) ----------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fib-55);
  align-items: center;
}
.split.reverse > .split-text { order: 2; }
.split-text h2 { margin: 0 0 var(--fib-13); }
.split-text p { color: var(--c-muted); line-height: 1.7; margin: 0 0 var(--fib-21); }
.split-media img { width: 100%; border-radius: var(--fib-21); display: block; }
.split-list { list-style: none; padding: 0; margin: 0 0 var(--fib-21); display: grid; gap: var(--fib-8); }
.split-list li { display: flex; gap: var(--fib-8); align-items: flex-start; }
.split-list i { color: var(--c-brand); margin-top: 3px; }

/* ---- Grade de diferenciais (ícones) --------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--fib-233), 1fr));
  gap: var(--fib-21);
}
.feature-card {
  text-align: center;
  padding: var(--fib-21);
}
.feature-card .f-ic {
  width: var(--fib-55);
  height: var(--fib-55);
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fib-34);
  margin-bottom: var(--fib-13);
}
.feature-card h4 { margin: 0 0 var(--fib-5); }
.feature-card p { color: var(--c-muted); line-height: 1.6; margin: 0; }

/* ---- Citação / depoimento em destaque ------------------------------------- */
.quote-block {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
  padding-block: var(--fib-34);
}
.quote-block blockquote {
  font-size: var(--fib-21);
  line-height: 1.6;
  font-style: italic;
  margin: 0 0 var(--fib-13);
}
.quote-block cite { color: var(--c-muted); font-style: normal; font-weight: 600; }

/* ---- Lookbook (coleção foto + título sobreposto) — refino genérico --------- */
.lookbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--fib-233), 1fr));
  gap: var(--fib-13);
}
.look-cell {
  position: relative;
  border-radius: var(--fib-13);
  overflow: hidden;
  aspect-ratio: 3/4;
  display: block;
}
.look-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.look-cell:hover img { transform: scale(1.05); }
.look-cell .lk-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--fib-34) var(--fib-13) var(--fib-13);
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
  color: #fff;
}
.look-cell h3 { margin: 0; color: #fff; }
.look-cell p { margin: var(--fib-3) 0 0; color: rgba(255, 255, 255, .85); font-size: var(--fib-13); }

/* ---- FAQ (accordion) refino ----------------------------------------------- */
.accordion .acc-item {
  border-bottom: 1px solid var(--c-line);
}
.accordion summary {
  cursor: pointer;
  padding: var(--fib-13) 0;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fib-13);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  font-size: var(--fib-21);
  color: var(--c-muted);
  transition: transform .2s ease;
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .acc-body { padding-bottom: var(--fib-13); color: var(--c-muted); line-height: 1.7; }

/* ---- Banner promocional (faixa imagem/cor) -------------------------------- */
.promo-banner {
  border-radius: var(--fib-21);
  overflow: hidden;
  text-align: center;
  padding: var(--fib-55) var(--fib-21);
  color: #fff;
  background-size: cover;
  background-position: center;
  position: relative;
}
.promo-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
}
.promo-banner > * { position: relative; }

}

/* ===== _checkout-cart.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 9b · CHECKOUT + CART — refino genérico da página de carrinho e do checkout:
 * resumo do pedido, passos, cupom, totais, itens, frete, confiança, vazio.
 * Tokens da loja. Funciona com a tabela de carrinho existente (degradação ok).
 * ===========================================================================*/

/* ---- Passos do checkout (carrinho > dados > pagamento) --------------------- */
.steps-bar {
  display: flex;
  align-items: center;
  gap: var(--fib-8);
  margin-bottom: var(--fib-34);
  justify-content: center;
}
.step-dot {
  display: flex;
  align-items: center;
  gap: var(--fib-8);
  color: var(--c-muted);
  font-size: var(--fib-13);
  font-weight: 600;
}
.step-dot .n {
  width: var(--fib-34);
  height: var(--fib-34);
  border-radius: 50%;
  border: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.step-dot.on { color: var(--c-ink); }
.step-dot.on .n { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.step-dot.done .n { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.step-sep { width: var(--fib-34); height: 1px; background: var(--c-line); }

/* ---- Layout do checkout (form + resumo) ----------------------------------- */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr var(--fib-377);
  gap: var(--fib-34);
  align-items: start;
}
.order-summary {
  position: sticky;
  top: var(--fib-21);
  border: 1px solid var(--c-line);
  border-radius: var(--fib-13);
  padding: var(--fib-21);
  background: var(--c-surface);
}
.order-summary h3 { margin: 0 0 var(--fib-13); font-size: var(--fib-21); }
.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--fib-5) 0;
  font-size: var(--fib-13);
  color: var(--c-muted);
}
.summary-line.total {
  border-top: 1px solid var(--c-line);
  margin-top: var(--fib-8);
  padding-top: var(--fib-13);
  font-size: var(--fib-21);
  color: var(--c-ink);
  font-weight: 800;
}
.summary-line .ok { color: #16a34a; }

/* ---- Mini itens do resumo ------------------------------------------------- */
.summary-items {
  display: flex;
  flex-direction: column;
  gap: var(--fib-13);
  margin-bottom: var(--fib-13);
  max-height: var(--fib-377);
  overflow-y: auto;
}
.summary-item {
  display: grid;
  grid-template-columns: var(--fib-55) 1fr auto;
  gap: var(--fib-8);
  align-items: center;
}
.summary-item .si-thumb {
  width: var(--fib-55);
  height: var(--fib-55);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg);
  position: relative;
}
.summary-item .si-thumb img { width: 100%; height: 100%; object-fit: cover; }
.summary-item .si-qty {
  position: absolute;
  top: calc(-1 * var(--fib-5));
  right: calc(-1 * var(--fib-5));
  width: var(--fib-21);
  height: var(--fib-21);
  border-radius: 50%;
  background: var(--c-ink);
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.summary-item strong { font-size: var(--fib-13); font-weight: 600; }
.summary-item .si-var { font-size: 11px; color: var(--c-muted); }

/* ---- Caixa de cupom ------------------------------------------------------- */
.coupon-box {
  display: flex;
  gap: var(--fib-8);
  margin: var(--fib-13) 0;
}
.coupon-box input { flex: 1; text-transform: uppercase; }
.coupon-applied {
  display: flex;
  align-items: center;
  gap: var(--fib-8);
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: var(--radius);
  padding: var(--fib-8) var(--fib-13);
  font-size: var(--fib-13);
  font-weight: 600;
}

/* ---- Linha de item do carrinho (versão card) ------------------------------ */
.litem {
  display: flex;
  gap: var(--fib-13);
  align-items: center;
}
.litem .mini {
  width: var(--fib-55);
  height: var(--fib-55);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg);
  flex: none;
}
.litem .mini img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Frete grátis: barra de progresso ------------------------------------- */
.freeship-bar {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--fib-13);
  margin-bottom: var(--fib-21);
  font-size: var(--fib-13);
}
.freeship-bar .track {
  height: var(--fib-5);
  background: var(--c-line);
  border-radius: var(--r-pill, 999px);
  margin-top: var(--fib-8);
  overflow: hidden;
}
.freeship-bar .track > span {
  display: block;
  height: 100%;
  background: var(--c-accent);
  transition: width .4s ease;
}
.freeship-bar.reached { color: #065f46; }

/* ---- Confiança no checkout ------------------------------------------------ */
.checkout-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fib-13);
  margin-top: var(--fib-21);
  padding-top: var(--fib-21);
  border-top: 1px solid var(--c-line);
  font-size: 11px;
  color: var(--c-muted);
}
.checkout-trust span { display: inline-flex; align-items: center; gap: var(--fib-5); }
.checkout-trust i { color: var(--c-accent); }

/* ---- Carrinho vazio ------------------------------------------------------- */
.cart-empty {
  text-align: center;
  padding-block: var(--fib-89);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fib-13);
}
.cart-empty .ce-ic { font-size: var(--fib-89); color: var(--c-line); }

/* ---- Confirmação do pedido ------------------------------------------------ */
.ok-box {
  border: 1px solid #a7f3d0;
  background: #ecfdf5;
  border-radius: var(--fib-13);
  padding: var(--fib-34);
  text-align: center;
}
.ok-box h2 { margin: 0 0 var(--fib-8); color: #065f46; }

/* ---- Responsivo do checkout ----------------------------------------------- */
@media (max-width: 768px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .order-summary { position: static; order: -1; }
  .steps-bar { gap: var(--fib-5); }
  .step-dot span:not(.n) { display: none; }
}

}

/* ===== _forms-plus.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 15 · FORMS+ — controles de formulário genéricos e acessíveis para qualquer
 * loja: campos, grupos, label flutuante, estados de validação, selects, radios,
 * checkboxes, switch, stepper, faixa de preço, busca. Tudo em tokens da loja.
 * ===========================================================================*/

/* ---- Campo base + grupo --------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:var(--fib-5);margin-bottom:var(--fib-13)}
.field > label,.fld-label{font-size:var(--fib-13);font-weight:600;color:var(--c-ink)}
.field .hint{font-size:11px;color:var(--c-muted);line-height:1.5}
.field .err{font-size:11px;color:#b91c1c;font-weight:600}
.field-row{display:flex;gap:var(--fib-13);flex-wrap:wrap}
.field-row > .field{flex:1;min-width:var(--fib-144)}

/* Inputs/textarea/select coerentes (genéricos; a loja já estiliza os básicos,
   aqui reforçamos foco, tamanho e estados). */
.inp,.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{
  width:100%;min-height:var(--fib-34);padding:var(--fib-8) var(--fib-13);
  border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-surface);color:var(--c-ink);
  font-size:var(--fib-13);font-family:inherit;transition:border-color .18s ease,box-shadow .18s ease;
}
.inp:focus,.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--c-brand);box-shadow:0 0 0 var(--fib-3) color-mix(in srgb,var(--c-brand) 18%,transparent);
}
.inp::placeholder{color:var(--c-muted);opacity:.7}
.field.invalid .inp,.field.invalid input,.inp.invalid{border-color:#e11d48}
.field.invalid .inp:focus,.inp.invalid:focus{box-shadow:0 0 0 var(--fib-3) rgba(225,29,72,.18)}
.field.valid .inp,.inp.valid{border-color:#16a34a}

/* ---- Label flutuante (input + label) -------------------------------------- */
.float{position:relative}
.float input,.float textarea{padding-top:var(--fib-21)}
.float label{position:absolute;left:var(--fib-13);top:var(--fib-13);color:var(--c-muted);font-size:var(--fib-13);pointer-events:none;transition:transform .15s ease,font-size .15s ease,color .15s ease;transform-origin:left top}
.float input:focus + label,.float input:not(:placeholder-shown) + label,.float textarea:focus + label,.float textarea:not(:placeholder-shown) + label{transform:translateY(calc(-1 * var(--fib-8))) scale(.82);color:var(--c-brand)}

/* ---- Input com ícone/addon ----------------------------------------------- */
.inp-group{display:flex;align-items:stretch}
.inp-group .inp{border-radius:var(--radius) 0 0 var(--radius)}
.inp-group .addon{display:flex;align-items:center;padding:0 var(--fib-13);border:1px solid var(--c-line);border-left:0;border-radius:0 var(--radius) var(--radius) 0;background:var(--c-bg);color:var(--c-muted);font-size:var(--fib-13)}
.inp-icon{position:relative}
.inp-icon > i{position:absolute;left:var(--fib-13);top:50%;transform:translateY(-50%);color:var(--c-muted);pointer-events:none}
.inp-icon > .inp{padding-inline-start:var(--fib-34)}

/* ---- Select com chevron próprio ------------------------------------------- */
.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:var(--fib-13);top:50%;width:var(--fib-8);height:var(--fib-8);border-right:2px solid var(--c-muted);border-bottom:2px solid var(--c-muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-inline-end:var(--fib-34)}

/* ---- Checkbox / radio custom ---------------------------------------------- */
.check{display:inline-flex;align-items:flex-start;gap:var(--fib-8);cursor:pointer;font-size:var(--fib-13);line-height:1.5}
.check input{appearance:none;-webkit-appearance:none;width:var(--fib-21);height:var(--fib-21);flex:none;border:1px solid var(--c-line);border-radius:var(--r-sm,4px);background:var(--c-surface);position:relative;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.check input[type=radio]{border-radius:50%}
.check input:checked{background:var(--c-brand);border-color:var(--c-brand)}
.check input[type=checkbox]:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.check input[type=radio]:checked::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.check input:focus-visible{box-shadow:0 0 0 var(--fib-3) color-mix(in srgb,var(--c-brand) 25%,transparent)}

/* ---- Switch --------------------------------------------------------------- */
.switch{display:inline-flex;align-items:center;gap:var(--fib-8);cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:var(--fib-34);height:var(--fib-21);border-radius:var(--r-pill,999px);background:var(--c-line);position:relative;transition:background .2s ease;flex:none}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:calc(var(--fib-21) - 4px);height:calc(var(--fib-21) - 4px);border-radius:50%;background:#fff;transition:transform .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .track{background:var(--c-brand)}
.switch input:checked + .track::after{transform:translateX(var(--fib-13))}

/* ---- Faixa de preço (dois inputs) ---------------------------------------- */
.price-range{display:flex;align-items:center;gap:var(--fib-8)}
.price-range .inp{max-width:var(--fib-89)}
.price-range span{color:var(--c-muted)}

/* ---- Busca grande --------------------------------------------------------- */
.search-xl{display:flex;align-items:center;gap:var(--fib-8);max-width:var(--fib-610);margin:0 auto}
.search-xl .inp{border-radius:var(--r-pill,999px);padding-inline-start:var(--fib-21)}
.search-xl button{border-radius:50%;width:var(--fib-34);height:var(--fib-34);flex:none}

/* ---- Botão de envio com loading ------------------------------------------- */
.btn[data-loading]{position:relative;color:transparent !important;pointer-events:none}
.btn[data-loading]::after{content:"";position:absolute;left:50%;top:50%;width:var(--fib-13);height:var(--fib-13);margin:calc(-1 * var(--fib-8)) 0 0 calc(-1 * var(--fib-8));border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:btn-spin .6s linear infinite}
@keyframes btn-spin{100%{transform:rotate(360deg)}}

/* ---- Mensagem de sucesso inline (forms js-ajax) --------------------------- */
.form-ok{display:flex;align-items:center;gap:var(--fib-8);color:#065f46;font-weight:600;font-size:var(--fib-13)}
.form-ok i{font-size:var(--fib-21)}

}

/* ===== _animations.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 16 · ANIMATIONS — micro-interações, reveal on scroll e keyframes genéricos.
 * Todas respeitam prefers-reduced-motion (desligam no fim do arquivo).
 * Classes utilitárias: .anim-*, .hover-*, .reveal. Keyframes reutilizáveis.
 * ===========================================================================*/

/* ---- Keyframes ------------------------------------------------------------ */
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-up{from{opacity:0;transform:translateY(var(--fib-21))}to{opacity:1;transform:none}}
@keyframes fade-down{from{opacity:0;transform:translateY(calc(-1 * var(--fib-21)))}to{opacity:1;transform:none}}
@keyframes fade-left{from{opacity:0;transform:translateX(var(--fib-21))}to{opacity:1;transform:none}}
@keyframes fade-right{from{opacity:0;transform:translateX(calc(-1 * var(--fib-21)))}to{opacity:1;transform:none}}
@keyframes zoom-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-1 * var(--fib-8)))}}
@keyframes spin{100%{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-brand) 45%,transparent)}100%{box-shadow:0 0 0 var(--fib-13) rgba(0,0,0,0)}}

/* ---- Classes de entrada (aplicar direto) ---------------------------------- */
.anim-fade{animation:fade-in .5s ease both}
.anim-up{animation:fade-up .55s cubic-bezier(.2,.7,.3,1) both}
.anim-down{animation:fade-down .55s cubic-bezier(.2,.7,.3,1) both}
.anim-left{animation:fade-left .55s cubic-bezier(.2,.7,.3,1) both}
.anim-right{animation:fade-right .55s cubic-bezier(.2,.7,.3,1) both}
.anim-zoom{animation:zoom-in .5s cubic-bezier(.2,.7,.3,1) both}
.anim-pop{animation:pop .4s ease both}
.anim-float{animation:float-y 4s ease-in-out infinite}
.anim-spin{animation:spin .8s linear infinite}
/* Atrasos em cascata (listas/grids). */
.anim-d1{animation-delay:.06s}.anim-d2{animation-delay:.12s}.anim-d3{animation-delay:.18s}
.anim-d4{animation-delay:.24s}.anim-d5{animation-delay:.3s}.anim-d6{animation-delay:.36s}

/* ---- Reveal on scroll (sem JS: usa a auto-animação ao entrar via :target?
   Implementação leve baseada em classe .reveal + .in adicionada por JS opcional;
   default = visível para não esconder conteúdo sem JS). ---------------------- */
.reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(var(--fib-21));transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.in.d1{transition-delay:.06s}.js .reveal.in.d2{transition-delay:.12s}.js .reveal.in.d3{transition-delay:.18s}

/* ---- Hover utilitários ---------------------------------------------------- */
.hover-lift{transition:transform .25s ease,box-shadow .25s ease}
.hover-lift:hover{transform:translateY(-3px);box-shadow:0 var(--fib-8) var(--fib-21) rgba(17,24,39,.12)}
.hover-zoom{overflow:hidden}
.hover-zoom img{transition:transform .45s ease}
.hover-zoom:hover img{transform:scale(1.06)}
.hover-bright{transition:filter .2s ease}
.hover-bright:hover{filter:brightness(1.05)}
.hover-underline{background-image:linear-gradient(var(--c-brand),var(--c-brand));background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .25s ease}
.hover-underline:hover{background-size:100% 2px}
.press{transition:transform .08s ease}
.press:active{transform:scale(.97)}

/* ---- Estados de feedback animado ------------------------------------------ */
.is-added{animation:pop .4s ease}
.is-error{animation:shake .5s ease}
.attention{animation:ring 1.4s ease-out infinite}

/* ---- Transições suaves padrão em elementos interativos -------------------- */
a,button,.btn,.card,.chip,.cd-item,.colcell{transition-property:color,background-color,border-color,box-shadow,transform,opacity}
a,button,.btn,.chip{transition-duration:.2s;transition-timing-function:ease}

/* ---- Carrossel/scroll-snap genérico --------------------------------------- */
.snap-x{display:flex;gap:var(--fib-13);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.snap-x > *{scroll-snap-align:start;flex:0 0 auto}

/* ---- prefers-reduced-motion: desliga TUDO --------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .anim-fade,.anim-up,.anim-down,.anim-left,.anim-right,.anim-zoom,.anim-pop,.anim-float{animation:none !important;opacity:1 !important;transform:none !important}
  .js .reveal{opacity:1 !important;transform:none !important}
}

}

/* ===== _theme-modes.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 19 · THEME MODES — modos opcionais que QUALQUER loja pode ativar via atributo
 * no <html>/<body> ou via tema: densidade (compacto/confortável), modo escuro
 * automático (prefers-color-scheme) e forçado, alto contraste, e variações de
 * largura/raio. Sobrepõe só TOKENS — não reescreve componentes.
 * ===========================================================================*/

/* ---- Densidade ------------------------------------------------------------ */
[data-density="compact"] {
  --fib-13: 12px;
  --fib-21: 18px;
  --fib-34: 28px;
  --fib-55: 44px;
}
[data-density="compact"] .sec { margin-bottom: var(--fib-55); }
[data-density="comfortable"] {
  --fib-34: 38px;
  --fib-55: 60px;
  --fib-89: 100px;
}

/* ---- Cantos (raio) por preferência ---------------------------------------- */
[data-corners="sharp"] { --radius: 0; }
[data-corners="rounded"] { --radius: var(--fib-21); }

/* ---- Largura de conteúdo -------------------------------------------------- */
[data-width="narrow"] { --maxw: var(--fib-987, 987px); }
[data-width="wide"] { --maxw: var(--fib-1597, 1597px); }

/* ---- Modo escuro automático (segue o sistema, se a loja optar) ------------ */
/* A loja precisa marcar <html data-dark="auto"> para participar; assim não
   afeta lojas claras por acidente. Sobrepõe apenas os tokens semânticos. */
@media (prefers-color-scheme: dark) {
  [data-dark="auto"] {
    --c-bg: #0f1115;
    --c-surface: #171a21;
    --c-ink: #e7e9ee;
    --c-muted: #9aa3b2;
    --c-line: #272b35;
    --c-headerbg: #12141a;
  }
  [data-dark="auto"] .card.fashion .thumb img { background: #1c2029; }
  [data-dark="auto"] .wish-btn { background: rgba(23, 26, 33, .9); }
  [data-dark="auto"] .notice--info { background: #0b2a4a; border-color: #1d4ed8; color: #bfdbfe; }
  [data-dark="auto"] .notice--ok { background: #06281d; border-color: #047857; color: #a7f3d0; }
}

/* ---- Modo escuro FORÇADO (independe do sistema) --------------------------- */
[data-dark="on"] {
  --c-bg: #0f1115;
  --c-surface: #171a21;
  --c-ink: #e7e9ee;
  --c-muted: #9aa3b2;
  --c-line: #272b35;
  --c-headerbg: #12141a;
}
[data-dark="on"] .card.fashion .thumb img { background: #1c2029; }
[data-dark="on"] .wish-btn { background: rgba(23, 26, 33, .9); }
[data-dark="on"] img.logoimg { filter: brightness(0) invert(1); }

/* ---- Alto contraste ------------------------------------------------------- */
[data-contrast="high"] {
  --c-line: #000;
  --c-muted: #333;
}
[data-contrast="high"] .btn { border-width: 2px; }
[data-contrast="high"] a { text-underline-offset: 2px; }
@media (prefers-contrast: more) {
  :root {
    --c-line: #6b7280;
  }
  .btn.outline, .btn--outline { border-width: 2px; }
}

/* ---- Header que ganha sombra ao rolar (a loja adiciona .scrolled via JS) --- */
.store-header.sticky { position: sticky; top: 0; z-index: var(--z-header, 50); transition: box-shadow .2s ease, background .2s ease; }
.store-header.sticky.scrolled { box-shadow: 0 var(--fib-3) var(--fib-13) rgba(17, 24, 39, .08); }

/* ---- Cantos arredondados nas imagens por opção ---------------------------- */
[data-img="rounded"] .thumb,
[data-img="rounded"] .imgwrap { border-radius: var(--fib-21); }
[data-img="square"] .thumb { border-radius: 0; }

/* ---- Esconde "powered by" quando a loja desligar -------------------------- */
[data-powered="off"] .fpowered { display: none; }

/* ---- Tipografia: títulos com mais peso/letra por estilo ------------------- */
[data-type="bold"] h1, [data-type="bold"] h2, [data-type="bold"] h3 { font-weight: 800; letter-spacing: -.01em; }
[data-type="elegant"] h1, [data-type="elegant"] h2 { font-weight: 500; letter-spacing: .01em; }

/* ---- Animação de entrada de seção por opção (data-reveal no html) --------- */
[data-reveal="on"].js .sec { opacity: 0; transform: translateY(var(--fib-21)); transition: opacity .6s ease, transform .6s ease; }
[data-reveal="on"].js .sec.in { opacity: 1; transform: none; }

}

/* ===== _feedback.css → @layer components ===== */
@layer components {
/* =============================================================================
 * 12 · FEEDBACK — estados auxiliares: texto mudo, vazio e caixa de sucesso.
 * ===========================================================================*/
.muted{color:var(--c-muted)}
.empty{color:var(--c-muted);padding:var(--fib-55) 0;text-align:center}
.ok-box{background:#d1fae5;color:var(--ok);padding:var(--fib-21);border-radius:var(--radius);text-align:center}

}

/* ===== _utilities.css → @layer utilities ===== */
@layer utilities {
/* =============================================================================
 * 17 · UTILITIES — utilitários atômicos (espaçamento, texto, flex/grid, cor,
 * borda, sombra, visibilidade) na escala Fibonacci + tokens da loja. Genérico:
 * qualquer loja/tema reaproveita. Vem quase no fim (vence componentes), mas
 * antes de _responsive.css. Sufixos: 0/3/5/8/13/21/34/55/89 (valores --fib-*).
 * ===========================================================================*/

/* ---- Margem ---------------------------------------------------------------- */
.m-0{margin:0}.m-3{margin:var(--fib-3)}.m-5{margin:var(--fib-5)}.m-8{margin:var(--fib-8)}.m-13{margin:var(--fib-13)}.m-21{margin:var(--fib-21)}.m-34{margin:var(--fib-34)}.m-55{margin:var(--fib-55)}
.mt-0{margin-top:0}.mt-3{margin-top:var(--fib-3)}.mt-5{margin-top:var(--fib-5)}.mt-8{margin-top:var(--fib-8)}.mt-13{margin-top:var(--fib-13)}.mt-21{margin-top:var(--fib-21)}.mt-34{margin-top:var(--fib-34)}.mt-55{margin-top:var(--fib-55)}.mt-89{margin-top:var(--fib-89)}
.mb-0{margin-bottom:0}.mb-3{margin-bottom:var(--fib-3)}.mb-5{margin-bottom:var(--fib-5)}.mb-8{margin-bottom:var(--fib-8)}.mb-13{margin-bottom:var(--fib-13)}.mb-21{margin-bottom:var(--fib-21)}.mb-34{margin-bottom:var(--fib-34)}.mb-55{margin-bottom:var(--fib-55)}.mb-89{margin-bottom:var(--fib-89)}
.ml-auto{margin-inline-start:auto}.mr-auto{margin-inline-end:auto}.mx-auto{margin-inline-start:auto;margin-inline-end:auto}
.my-13{margin-top:var(--fib-13);margin-bottom:var(--fib-13)}.my-21{margin-top:var(--fib-21);margin-bottom:var(--fib-21)}.my-34{margin-top:var(--fib-34);margin-bottom:var(--fib-34)}.my-55{margin-top:var(--fib-55);margin-bottom:var(--fib-55)}

/* ---- Padding --------------------------------------------------------------- */
.p-0{padding:0}.p-5{padding:var(--fib-5)}.p-8{padding:var(--fib-8)}.p-13{padding:var(--fib-13)}.p-21{padding:var(--fib-21)}.p-34{padding:var(--fib-34)}.p-55{padding:var(--fib-55)}
.pt-13{padding-top:var(--fib-13)}.pt-21{padding-top:var(--fib-21)}.pt-34{padding-top:var(--fib-34)}.pt-55{padding-top:var(--fib-55)}
.pb-13{padding-bottom:var(--fib-13)}.pb-21{padding-bottom:var(--fib-21)}.pb-34{padding-bottom:var(--fib-34)}.pb-55{padding-bottom:var(--fib-55)}
.px-13{padding-inline-start:var(--fib-13);padding-inline-end:var(--fib-13)}.px-21{padding-inline-start:var(--fib-21);padding-inline-end:var(--fib-21)}
.py-13{padding-top:var(--fib-13);padding-bottom:var(--fib-13)}.py-21{padding-top:var(--fib-21);padding-bottom:var(--fib-21)}.py-34{padding-top:var(--fib-34);padding-bottom:var(--fib-34)}.py-55{padding-top:var(--fib-55);padding-bottom:var(--fib-55)}

/* ---- Gap ------------------------------------------------------------------- */
.gap-3{gap:var(--fib-3)}.gap-5{gap:var(--fib-5)}.gap-8{gap:var(--fib-8)}.gap-13{gap:var(--fib-13)}.gap-21{gap:var(--fib-21)}.gap-34{gap:var(--fib-34)}

/* ---- Display / Flex / Grid ------------------------------------------------- */
.d-none{display:none}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}
.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}
.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.items-baseline{align-items:baseline}
.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}
.flex-1{flex:1}.flex-auto{flex:auto}.flex-none{flex:none}.grow{flex-grow:1}.shrink-0{flex-shrink:0}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr)}.grid-4{display:grid;grid-template-columns:repeat(4,1fr)}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--fib-144),1fr))}
.grid-auto-lg{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--fib-233),1fr))}
.col-span-full{grid-column:1 / -1}
.center{display:flex;align-items:center;justify-content:center}

/* ---- Texto ----------------------------------------------------------------- */
.t-left{text-align:left}.t-center{text-align:center}.t-right{text-align:right}.t-justify{text-align:justify}
.fw-400{font-weight:400}.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}
.fs-11{font-size:11px}.fs-13{font-size:var(--fib-13)}.fs-21{font-size:var(--fib-21)}.fs-34{font-size:var(--fib-34)}.fs-55{font-size:var(--fib-55)}
.uppercase{text-transform:uppercase;letter-spacing:.03em}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}
.italic{font-style:italic}.nowrap{white-space:nowrap}.break{word-break:break-word;overflow-wrap:anywhere}
.lh-tight{line-height:1.2}.lh-snug{line-height:1.4}.lh-normal{line-height:1.6}
.tracking-wide{letter-spacing:.05em}.tracking-tight{letter-spacing:-.01em}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---- Cores (texto/fundo via tokens) --------------------------------------- */
.t-brand{color:var(--c-brand)}.t-accent{color:var(--c-accent)}.t-ink{color:var(--c-ink)}.t-muted{color:var(--c-muted)}.t-white{color:#fff}
.bg-brand{background:var(--c-brand);color:#fff}.bg-accent{background:var(--c-accent);color:#fff}
.bg-surface{background:var(--c-surface)}.bg-soft{background:var(--c-bg)}.bg-ink{background:var(--c-ink);color:var(--c-surface)}
.bg-transparent{background:transparent}

/* ---- Borda / raio / sombra ------------------------------------------------- */
.bd{border:1px solid var(--c-line)}.bd-0{border:0}.bd-t{border-top:1px solid var(--c-line)}.bd-b{border-bottom:1px solid var(--c-line)}
.bd-brand{border-color:var(--c-brand)}
.r-0{border-radius:0}.r-sm{border-radius:var(--r-sm,5px)}.r{border-radius:var(--radius)}.r-lg{border-radius:var(--fib-21)}.r-pill{border-radius:var(--r-pill,999px)}.r-full{border-radius:50%}
.sh-sm{box-shadow:0 1px var(--fib-3) rgba(17,24,39,.06)}.sh{box-shadow:0 var(--fib-3) var(--fib-13) rgba(17,24,39,.08)}.sh-lg{box-shadow:0 var(--fib-8) var(--fib-34) rgba(17,24,39,.12)}.sh-none{box-shadow:none}

/* ---- Tamanho / largura ----------------------------------------------------- */
.w-full{width:100%}.w-auto{width:auto}.h-full{height:100%}.min-w-0{min-width:0}
.maxw-content{max-width:var(--maxw);margin-inline-start:auto;margin-inline-end:auto}
.maxw-text{max-width:65ch}.maxw-narrow{max-width:var(--fib-610)}
.mw-100{max-width:100%}.img-fluid{max-width:100%;height:auto;display:block}

/* ---- Aspecto --------------------------------------------------------------- */
.ar-1{aspect-ratio:1/1}.ar-4-3{aspect-ratio:4/3}.ar-3-4{aspect-ratio:3/4}.ar-16-9{aspect-ratio:16/9}.ar-3-2{aspect-ratio:3/2}
.obj-cover{object-fit:cover}.obj-contain{object-fit:contain}

/* ---- Posição --------------------------------------------------------------- */
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{inset:0}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}
.z-1{z-index:1}.z-10{z-index:10}.z-50{z-index:50}
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}

/* ---- Cursor / seleção / pointer ------------------------------------------- */
.pointer{cursor:pointer}.not-allowed{cursor:not-allowed}.select-none{user-select:none}
.pe-none{pointer-events:none}.pe-auto{pointer-events:auto}

/* ---- Opacidade ------------------------------------------------------------- */
.op-0{opacity:0}.op-50{opacity:.5}.op-70{opacity:.7}.op-100{opacity:1}

/* ---- Visibilidade por breakpoint ------------------------------------------ */
.hide{display:none !important}
@media(max-width:768px){.md\:hide{display:none !important}.md\:block{display:block !important}.md\:flex{display:flex !important}.md\:grid-1{grid-template-columns:1fr !important}.md\:t-center{text-align:center !important}.md\:w-full{width:100% !important}}
@media(min-width:769px){.md\:show-up{display:revert}}
@media(max-width:480px){.sm\:hide{display:none !important}.sm\:block{display:block !important}.sm\:grid-1{grid-template-columns:1fr !important}.sm\:t-center{text-align:center !important}}
.show-mobile{display:none}
@media(max-width:768px){.show-mobile{display:revert}.hide-mobile{display:none !important}}

}

/* ===== _a11y-print.css → @layer overrides ===== */
@layer overrides {
/* =============================================================================
 * 18 · A11Y + PRINT — acessibilidade (foco visível, sr-only, skip-link, alvos
 * de toque, contraste de foco) e estilos de impressão (recibo/pedido). Genérico.
 * ===========================================================================*/

/* ---- Foco visível consistente em todo elemento interativo ----------------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:var(--fib-2) solid var(--c-brand);outline-offset:var(--fib-2);border-radius:var(--r-sm,4px);
}
/* Remove o outline só quando NÃO é navegação por teclado (mouse). */
:where(a,button):focus:not(:focus-visible){outline:none}

/* ---- Skip link (pular para o conteúdo) ------------------------------------ */
.skip-link{position:absolute;left:var(--fib-13);top:calc(-1 * var(--fib-89));z-index:var(--z-skip,200);background:var(--c-ink);color:var(--c-surface);padding:var(--fib-8) var(--fib-13);border-radius:var(--radius);font-weight:600;font-size:var(--fib-13);transition:top .2s ease}
.skip-link:focus{top:var(--fib-13)}

/* ---- Só para leitor de tela ----------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only-focusable:focus,.sr-only-focusable:focus-within{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}

/* ---- Alvo de toque mínimo (WCAG 2.5.5) ------------------------------------ */
@media(pointer:coarse){
  .btn,.hicon,.cd-close,.cd-remove,.qty-ctl button,.pagination a,.chip{min-height:var(--touch,44px)}
  .hicon,.cd-close{min-width:var(--touch,44px)}
}

/* ---- Imagens sem alt não devem quebrar layout ----------------------------- */
img{max-width:100%}
img:not([alt]){outline:none}

/* ---- Estado :target (âncoras) destaca a seção ----------------------------- */
:target{scroll-margin-top:var(--fib-89)}

/* ---- Reduz movimento já tratado em _animations.css; aqui só o scroll ------ */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- Contraste em foco de campos errados ---------------------------------- */
.field.invalid label{color:#b91c1c}

/* =============================================================================
 * PRINT — recibo/pedido limpo: esconde navegação/ações, fundo branco, sem cores
 * pesadas. Ativado em /pedido, conta, rastreio ao imprimir.
 * ===========================================================================*/
@media print{
  *{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}
  .store-header,.mnav-drawer,.mnav-scrim,.wa-float,.site-foot,.cart-drawer,.cart-scrim,.to-top,.shopbar,.pagination,.news-form,.btn,.colnav,.crumbs{display:none !important}
  main{margin:0;padding:0;max-width:100%}
  a[href]::after{content:"" }
  .ord-card,.card,.sec{break-inside:avoid;border:1px solid #ccc !important}
  h1,h2,h3{page-break-after:avoid}
  img{max-width:40mm !important}
  body{font-size:12pt;line-height:1.4}
}

}

/* ===== _ux-feedback.css → @layer overrides ===== */
@layer overrides {
/* =============================================================================
 * UX · FEEDBACK & ESTADOS — toasts, snackbars, progress, badges de status,
 * loading/skeletons extras, ripple, "copiado!", estados disabled/empty/error/
 * success ricos. Genérico para qualquer loja (só tokens + Fibonacci). Tudo
 * namespaced em .ux-/.u- para não colidir com os módulos existentes.
 * Comentários: NUNCA usar barra-asterisco dentro de texto de comentário.
 * ===========================================================================*/

/* ---- Toasts / snackbars --------------------------------------------------- */
/* Pilha de toasts no canto inferior. O conteúdo é injetado por JS; o CSS dá a
 * aparência, a entrada animada e o auto-empilhamento. */
.ux-toasts{
  position:fixed;
  left:50%;
  bottom:calc(var(--fib-21) + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  z-index:var(--z-toast,140);
  display:flex;
  flex-direction:column;
  gap:var(--fib-8);
  width:min(var(--fib-377),calc(100vw - var(--fib-34)));
  pointer-events:none;
}
.ux-toasts--tr{left:auto;right:var(--fib-21);transform:none;align-items:flex-end}
.ux-toasts--tl{left:var(--fib-21);transform:none;align-items:flex-start}
.ux-toasts--br{left:auto;right:var(--fib-21);transform:none;bottom:calc(var(--fib-21) + env(safe-area-inset-bottom,0px));align-items:flex-end}
.ux-toast{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:var(--fib-13);
  padding:var(--fib-13) var(--fib-21);
  border-radius:var(--radius);
  background:var(--c-ink);
  color:var(--c-surface);
  font-size:var(--fib-13);
  line-height:1.45;
  box-shadow:0 var(--fib-8) var(--fib-21) rgba(17,24,39,.22);
  animation:ux-toast-in .32s cubic-bezier(.2,.7,.3,1) both;
  position:relative;
  overflow:hidden;
}
.ux-toast.out{animation:ux-toast-out .28s ease forwards}
.ux-toast .ux-toast-ic{flex:none;font-size:var(--fib-21);line-height:1;display:flex}
.ux-toast .ux-toast-msg{flex:1;min-width:0}
.ux-toast .ux-toast-msg strong{display:block;font-weight:700;margin-bottom:var(--fib-3)}
.ux-toast .ux-toast-x{
  flex:none;
  width:var(--fib-21);
  height:var(--fib-21);
  border:0;
  background:transparent;
  color:inherit;
  opacity:.7;
  cursor:pointer;
  font-size:var(--fib-21);
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-sm,4px);
  transition:opacity .15s ease,background .15s ease;
}
.ux-toast .ux-toast-x:hover{opacity:1;background:rgba(255,255,255,.14)}
/* Barra de progresso de auto-dismiss (largura animada por JS via --ux-ttl). */
.ux-toast .ux-toast-bar{
  position:absolute;
  left:0;
  bottom:0;
  height:var(--fib-3);
  width:100%;
  transform-origin:left;
  background:color-mix(in srgb,var(--c-surface) 60%,transparent);
  animation:ux-toast-timer var(--ux-ttl,4s) linear forwards;
}
.ux-toast--ok{background:#065f46;color:#ecfdf5}
.ux-toast--ok .ux-toast-ic{color:#6ee7b7}
.ux-toast--err{background:#7f1d1d;color:#fef2f2}
.ux-toast--err .ux-toast-ic{color:#fca5a5}
.ux-toast--warn{background:#78350f;color:#fffbeb}
.ux-toast--warn .ux-toast-ic{color:#fcd34d}
.ux-toast--info{background:#1e3a8a;color:#eff6ff}
.ux-toast--info .ux-toast-ic{color:#93c5fd}
.ux-toast--brand{background:var(--c-brand);color:#fff}
@keyframes ux-toast-in{
  from{opacity:0;transform:translateY(var(--fib-21)) scale(.98)}
  to{opacity:1;transform:none}
}
@keyframes ux-toast-out{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(var(--fib-13)) scale(.98)}
}
@keyframes ux-toast-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* Snackbar largo na base (ação + desfazer). */
.ux-snackbar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(var(--fib-21) + env(safe-area-inset-bottom,0px));
  z-index:var(--z-toast,140);
  display:flex;
  align-items:center;
  gap:var(--fib-21);
  padding:var(--fib-13) var(--fib-21);
  border-radius:var(--radius);
  background:var(--c-ink);
  color:var(--c-surface);
  font-size:var(--fib-13);
  box-shadow:0 var(--fib-8) var(--fib-21) rgba(17,24,39,.24);
  max-width:min(var(--fib-610),calc(100vw - var(--fib-34)));
  animation:ux-toast-in .3s cubic-bezier(.2,.7,.3,1) both;
}
.ux-snackbar .ux-snackbar-act{
  flex:none;
  border:0;
  background:transparent;
  color:var(--c-accent);
  font-weight:700;
  font-size:var(--fib-13);
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:var(--fib-5) var(--fib-8);
  border-radius:var(--r-sm,4px);
  transition:background .15s ease;
}
.ux-snackbar .ux-snackbar-act:hover{background:rgba(255,255,255,.12)}

/* ---- Progress (barra + circular) ----------------------------------------- */
.ux-progress{
  width:100%;
  height:var(--fib-8);
  border-radius:var(--r-pill,999px);
  background:var(--c-line);
  overflow:hidden;
  position:relative;
}
.ux-progress > i{
  display:block;
  height:100%;
  width:var(--ux-val,0%);
  border-radius:inherit;
  background:var(--c-brand);
  transition:width .4s cubic-bezier(.2,.7,.3,1);
}
.ux-progress--accent > i{background:var(--c-accent)}
.ux-progress--ok > i{background:var(--ok,#059669)}
.ux-progress--thin{height:var(--fib-3)}
.ux-progress--lg{height:var(--fib-13)}
/* Indeterminado (loop deslizante). */
.ux-progress--indet > i{
  width:40%;
  animation:ux-progress-indet 1.4s ease-in-out infinite;
}
@keyframes ux-progress-indet{
  0%{margin-inline-start:-40%}
  100%{margin-inline-start:100%}
}
/* Barra de progresso fina no topo da página (carregamento de rota). */
.ux-topbar{
  position:fixed;
  top:0;
  left:0;
  height:var(--fib-3);
  width:var(--ux-val,0%);
  background:var(--c-brand);
  z-index:var(--z-progress,150);
  transition:width .3s ease,opacity .3s ease;
  box-shadow:0 0 var(--fib-8) color-mix(in srgb,var(--c-brand) 60%,transparent);
}
.ux-topbar.done{opacity:0}

/* Spinner circular leve (sem dependência de imagem). */
.ux-spinner{
  display:inline-block;
  width:var(--fib-21);
  height:var(--fib-21);
  border-radius:50%;
  border:var(--fib-2,2px) solid color-mix(in srgb,currentColor 25%,transparent);
  border-top-color:currentColor;
  animation:spin .7s linear infinite;
  vertical-align:middle;
}
.ux-spinner--sm{width:var(--fib-13);height:var(--fib-13);border-width:var(--fib-2,2px)}
.ux-spinner--lg{width:var(--fib-34);height:var(--fib-34);border-width:var(--fib-3)}
.ux-spinner--brand{color:var(--c-brand)}
/* Botão em estado de carregamento: troca o texto por spinner sem pular layout. */
.ux-loading{position:relative;color:transparent !important;pointer-events:none}
.ux-loading::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:var(--fib-21);
  height:var(--fib-21);
  margin:calc(-1 * var(--fib-13)/2) 0 0 calc(-1 * var(--fib-13)/2);
  margin-top:calc(-1 * var(--fib-13));
  margin-inline-start:calc(-1 * var(--fib-13));
  border-radius:50%;
  border:var(--fib-2,2px) solid rgba(255,255,255,.4);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.ux-loading.ux-loading--ink::after{border-color:color-mix(in srgb,var(--c-ink) 25%,transparent);border-top-color:var(--c-ink)}

/* ---- Skeletons extras (cartões, listas, texto) --------------------------- */
.ux-sk{
  position:relative;
  overflow:hidden;
  background:color-mix(in srgb,var(--c-line) 55%,var(--c-bg));
  border-radius:var(--r-sm,4px);
}
.ux-sk::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 55%,transparent),transparent);
  animation:ux-sk-sweep 1.3s infinite;
}
@keyframes ux-sk-sweep{100%{transform:translateX(100%)}}
.ux-sk-text{height:var(--fib-13);margin-bottom:var(--fib-8);border-radius:var(--r-pill,999px)}
.ux-sk-text.w-90{width:90%}
.ux-sk-text.w-75{width:75%}
.ux-sk-text.w-60{width:60%}
.ux-sk-text.w-40{width:40%}
.ux-sk-title{height:var(--fib-21);width:60%;margin-bottom:var(--fib-13);border-radius:var(--r-sm,4px)}
.ux-sk-thumb{aspect-ratio:1/1;width:100%;border-radius:var(--radius)}
.ux-sk-thumb--wide{aspect-ratio:16/9}
.ux-sk-avatar{width:var(--fib-34);height:var(--fib-34);border-radius:50%}
.ux-sk-btn{height:var(--fib-34);width:var(--fib-89);border-radius:var(--radius)}
.ux-sk-chip{height:var(--fib-21);width:var(--fib-55);border-radius:var(--r-pill,999px);display:inline-block}
/* Cartão-esqueleto de produto pronto (thumb + 2 linhas + preço). */
.ux-sk-card{
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  padding:var(--fib-13);
  background:var(--c-surface);
}
.ux-sk-card .ux-sk-thumb{margin-bottom:var(--fib-13)}
.ux-sk-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--fib-233),1fr));
  gap:var(--fib-21);
}

/* ---- Badges de status (pílulas com ponto) -------------------------------- */
.ux-status{
  display:inline-flex;
  align-items:center;
  gap:var(--fib-5);
  padding:var(--fib-3) var(--fib-8);
  border-radius:var(--r-pill,999px);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.4;
  border:1px solid transparent;
}
.ux-status::before{
  content:"";
  width:var(--fib-8);
  height:var(--fib-8);
  border-radius:50%;
  background:currentColor;
  flex:none;
}
.ux-status--ok{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.ux-status--pending{background:#fffbeb;color:#b45309;border-color:#fde68a}
.ux-status--err{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.ux-status--info{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.ux-status--neutral{background:var(--c-bg);color:var(--c-muted);border-color:var(--c-line)}
.ux-status--live::before{animation:ux-status-pulse 1.6s ease-out infinite}
@keyframes ux-status-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 50%,transparent)}
  70%{box-shadow:0 0 0 var(--fib-5) transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* ---- "Copiado!" — feedback de cópia em botão/código ---------------------- */
.ux-copy{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:var(--fib-5);
  cursor:pointer;
}
.ux-copy::after{
  content:attr(data-copied,"Copiado!");
  content:"Copiado!";
  position:absolute;
  left:50%;
  bottom:calc(100% + var(--fib-5));
  transform:translate(-50%,var(--fib-3));
  background:var(--ok,#059669);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:var(--fib-3) var(--fib-8);
  border-radius:var(--r-sm,4px);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.ux-copy.copied::after{opacity:1;transform:translate(-50%,0)}
.ux-copy.copied{color:var(--ok,#059669)}

/* ---- Ripple sutil (origem definida por JS via --ux-rx/--ux-ry) ----------- */
.ux-ripple{position:relative;overflow:hidden;isolation:isolate}
.ux-ripple::after{
  content:"";
  position:absolute;
  left:var(--ux-rx,50%);
  top:var(--ux-ry,50%);
  width:var(--fib-21);
  height:var(--fib-21);
  border-radius:50%;
  background:currentColor;
  opacity:.18;
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;
}
.ux-ripple.rip::after{animation:ux-ripple .6s ease-out}
@keyframes ux-ripple{
  to{transform:translate(-50%,-50%) scale(12);opacity:0}
}

/* ---- Estados disabled / empty / error / success ricos -------------------- */
/* Estado desabilitado coerente para qualquer controle marcado. */
.ux-disabled,[data-disabled="true"]{
  opacity:.5;
  pointer-events:none;
  cursor:not-allowed;
  filter:grayscale(.2);
  user-select:none;
}
/* Caixa de estado (sucesso/erro/info) com ícone + título + texto + ação. */
.ux-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--fib-13);
  padding:var(--fib-55) var(--fib-21);
  border-radius:var(--radius);
  border:1px dashed var(--c-line);
  background:var(--c-surface);
}
.ux-state .ux-state-ic{
  width:var(--fib-89);
  height:var(--fib-89);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fib-55);
  background:var(--c-bg);
  color:var(--c-muted);
}
.ux-state h3{font-size:var(--fib-21);font-weight:700;margin:0}
.ux-state p{color:var(--c-muted);font-size:var(--fib-13);line-height:1.6;max-width:var(--fib-377);margin:0}
.ux-state .ux-state-act{margin-top:var(--fib-8)}
.ux-state--ok{border-color:#a7f3d0;background:#f0fdf4}
.ux-state--ok .ux-state-ic{background:#dcfce7;color:#16a34a}
.ux-state--err{border-color:#fecaca;background:#fef2f2}
.ux-state--err .ux-state-ic{background:#fee2e2;color:#dc2626}
.ux-state--empty .ux-state-ic{color:var(--c-line)}

/* Banner de erro inline (formulário/checkout). */
.ux-error-banner{
  display:flex;
  align-items:flex-start;
  gap:var(--fib-13);
  padding:var(--fib-13) var(--fib-21);
  border-radius:var(--radius);
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
  font-size:var(--fib-13);
  line-height:1.55;
  animation:ux-shake .5s ease;
}
.ux-error-banner .ux-error-ic{flex:none;font-size:var(--fib-21);line-height:1;color:#dc2626}
@keyframes ux-shake{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-3px)}
  40%,60%{transform:translateX(3px)}
}

/* Banner de sucesso inline. */
.ux-success-banner{
  display:flex;
  align-items:center;
  gap:var(--fib-13);
  padding:var(--fib-13) var(--fib-21);
  border-radius:var(--radius);
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  color:#065f46;
  font-size:var(--fib-13);
  line-height:1.55;
  animation:ux-pop-soft .4s cubic-bezier(.2,.7,.3,1) both;
}
.ux-success-banner .ux-ok-ic{flex:none;font-size:var(--fib-21);color:#059669;line-height:1}
@keyframes ux-pop-soft{
  0%{opacity:0;transform:translateY(var(--fib-8))}
  100%{opacity:1;transform:none}
}

/* ---- Dot de notificação / contador --------------------------------------- */
.ux-dot{position:relative;display:inline-flex}
.ux-dot::after{
  content:"";
  position:absolute;
  top:calc(-1 * var(--fib-3));
  right:calc(-1 * var(--fib-3));
  width:var(--fib-8);
  height:var(--fib-8);
  border-radius:50%;
  background:#e11d48;
  border:var(--fib-2,2px) solid var(--c-surface);
}
.ux-count{position:relative;display:inline-flex}
.ux-count[data-count]::after{
  content:attr(data-count);
  position:absolute;
  top:calc(-1 * var(--fib-8));
  right:calc(-1 * var(--fib-8));
  min-width:var(--fib-21);
  height:var(--fib-21);
  padding:0 var(--fib-3);
  border-radius:var(--r-pill,999px);
  background:var(--c-accent);
  color:#fff;
  font-size:10px;
  font-weight:800;
  line-height:var(--fib-21);
  text-align:center;
  border:var(--fib-2,2px) solid var(--c-surface);
}

/* ---- Pulso de atenção (CTA / novidade) ----------------------------------- */
.ux-pulse{position:relative}
.ux-pulse::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--c-brand) 45%,transparent);
  animation:ux-pulse-ring 2s ease-out infinite;
  pointer-events:none;
}
@keyframes ux-pulse-ring{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-brand) 45%,transparent)}
  70%{box-shadow:0 0 0 var(--fib-13) transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* ---- prefers-reduced-motion: corta animações deste módulo ---------------- */
@media(prefers-reduced-motion:reduce){
  .ux-toast,.ux-snackbar,.ux-success-banner,.ux-error-banner{animation:none !important}
  .ux-toast .ux-toast-bar,.ux-progress--indet > i,.ux-spinner,.ux-loading::after,
  .ux-sk::after,.ux-status--live::before,.ux-pulse::before,.ux-ripple.rip::after,
  .anim-spin{animation:none !important}
  .ux-sk::after{display:none}
}

}

/* ===== _ux-mobile.css → @layer overrides ===== */
@layer overrides {
/* =============================================================================
 * UX · MOBILE — alvos de toque grandes, bottom-sheet, sticky add-to-cart,
 * scroll-snap polido, safe-area (notch), tap highlight, drawer/menu polidos,
 * scroll momentum, FAB. Genérico (só tokens + Fibonacci). Namespaced em .ux-.
 * Comentários: NUNCA escrever a sequência barra-asterisco dentro do texto.
 * ===========================================================================*/

/* ---- Tap highlight + momentum globais (suaves, sem flash azul) ------------ */
/* Remove o realce azul padrão do iOS/Android e troca por um realce sutil do
 * tema só quando o elemento for de fato tocável. */
a,button,.btn,.chip,[role="button"],[data-tap]{
  -webkit-tap-highlight-color:color-mix(in srgb,var(--c-brand) 14%,transparent);
}
.ux-tap{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  user-select:none;
  transition:background .12s ease,transform .12s ease;
}
@media (hover:none){
  .ux-tap:active{background:color-mix(in srgb,var(--c-brand) 8%,transparent);transform:scale(.985)}
}

/* ---- Alvos de toque mínimos (>=44px) ------------------------------------- */
/* No toque, qualquer controle marcado .ux-hit ganha área clicável >=44px sem
 * mudar o visual (pseudo-elemento expandido). */
.ux-hit{position:relative}
@media (pointer:coarse){
  .ux-hit::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    min-width:44px;
    min-height:44px;
    width:100%;
    height:100%;
    transform:translate(-50%,-50%);
  }
  /* Ícones de cabeçalho, fechar, qty etc. crescem o suficiente no toque. */
  .ux-hit-grow{min-width:44px;min-height:44px}
}

/* ---- Safe-area (notch / home indicator) ---------------------------------- */
.ux-safe-top{padding-top:env(safe-area-inset-top,0px)}
.ux-safe-bottom{padding-bottom:env(safe-area-inset-bottom,0px)}
.ux-safe-x{
  padding-inline-start:max(var(--fib-21),env(safe-area-inset-left,0px));
  padding-inline-end:max(var(--fib-21),env(safe-area-inset-right,0px));
}
.ux-safe-all{
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-inline-start:env(safe-area-inset-left,0px);
  padding-inline-end:env(safe-area-inset-right,0px);
}

/* ---- Bottom-sheet (folha que sobe da base) ------------------------------- */
.ux-sheet-scrim{
  position:fixed;
  inset:0;
  background:rgba(17,24,39,.45);
  opacity:0;
  visibility:hidden;
  z-index:var(--z-scrim,120);
  transition:opacity .28s ease,visibility .28s ease;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.ux-sheet-scrim.open{opacity:1;visibility:visible}
.ux-sheet{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:var(--z-drawer,130);
  background:var(--c-surface);
  color:var(--c-ink);
  border-radius:var(--fib-21) var(--fib-21) 0 0;
  box-shadow:0 calc(-1 * var(--fib-8)) var(--fib-34) rgba(17,24,39,.2);
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom,0px);
  will-change:transform;
}
.ux-sheet.open{transform:none}
/* Alça de arraste no topo da folha. */
.ux-sheet-handle{
  flex:none;
  width:var(--fib-55);
  height:var(--fib-5);
  border-radius:var(--r-pill,999px);
  background:var(--c-line);
  margin:var(--fib-13) auto var(--fib-8);
  cursor:grab;
}
.ux-sheet-head{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--fib-13);
  padding:0 var(--fib-21) var(--fib-13);
  border-bottom:1px solid var(--c-line);
}
.ux-sheet-head h3{font-size:var(--fib-21);font-weight:700;margin:0}
.ux-sheet-close{
  flex:none;
  width:var(--fib-34);
  height:var(--fib-34);
  border:0;
  background:var(--c-bg);
  color:var(--c-ink);
  border-radius:50%;
  font-size:var(--fib-21);
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ux-sheet-body{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:var(--fib-21);
}
.ux-sheet-foot{
  flex:none;
  padding:var(--fib-13) var(--fib-21);
  border-top:1px solid var(--c-line);
  display:flex;
  gap:var(--fib-13);
}

/* ---- Sticky add-to-cart (barra fixa de compra no mobile) ----------------- */
.ux-buybar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:var(--z-buybar,110);
  display:flex;
  align-items:center;
  gap:var(--fib-13);
  padding:var(--fib-13) var(--fib-21);
  padding-bottom:calc(var(--fib-13) + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--c-surface) 96%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  backdrop-filter:saturate(1.4) blur(10px);
  border-top:1px solid var(--c-line);
  box-shadow:0 calc(-1 * var(--fib-3)) var(--fib-13) rgba(17,24,39,.08);
  transform:translateY(110%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.ux-buybar.show{transform:none}
.ux-buybar .ux-buybar-info{flex:1;min-width:0;text-align:left}
.ux-buybar .ux-buybar-info .t{
  display:block;
  font-size:var(--fib-13);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ux-buybar .ux-buybar-info .p{display:block;font-size:var(--fib-21);font-weight:800;color:var(--c-ink);line-height:1.1}
.ux-buybar .ux-buybar-info .p .old{font-size:var(--fib-13);font-weight:500;color:var(--c-muted);text-decoration:line-through;margin-inline-start:var(--fib-5)}
.ux-buybar .btn{width:auto;flex:none;min-width:var(--fib-144);min-height:var(--fib-55)}
/* Só faz sentido no estreito; some no desktop. */
@media (min-width:769px){.ux-buybar{display:none}}

/* ---- FAB (ação flutuante, ex.: WhatsApp/filtros) ------------------------- */
.ux-fab{
  position:fixed;
  right:var(--fib-21);
  bottom:calc(var(--fib-21) + env(safe-area-inset-bottom,0px));
  z-index:var(--z-fab,60);
  width:var(--fib-55);
  height:var(--fib-55);
  border-radius:50%;
  border:0;
  background:var(--c-brand);
  color:#fff;
  font-size:var(--fib-21);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 var(--fib-5) var(--fib-21) rgba(17,24,39,.28);
  transition:transform .2s ease,box-shadow .2s ease;
}
.ux-fab:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 var(--fib-8) var(--fib-34) rgba(17,24,39,.32)}
.ux-fab:active{transform:scale(.96)}
.ux-fab--accent{background:var(--c-accent)}
.ux-fab--lg{width:var(--fib-89);height:var(--fib-89);font-size:var(--fib-34)}
/* FAB estendido com rótulo. */
.ux-fab--ext{width:auto;border-radius:var(--r-pill,999px);padding:0 var(--fib-21);gap:var(--fib-8);font-size:var(--fib-13);font-weight:700}

/* ---- Scroll-snap polido (carrossel de produtos no toque) ----------------- */
.ux-snap{
  display:flex;
  gap:var(--fib-13);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scroll-padding:var(--fib-21);
  padding-bottom:var(--fib-8);
  scrollbar-width:none;
}
.ux-snap::-webkit-scrollbar{display:none}
.ux-snap > *{scroll-snap-align:start;flex:0 0 auto}
.ux-snap--center > *{scroll-snap-align:center}
.ux-snap--peek > *{width:min(78vw,var(--fib-377))}
.ux-snap--cards > *{width:min(46vw,var(--fib-233))}
/* Indicadores (dots) do carrossel — controlados por JS marcando .on. */
.ux-snap-dots{display:flex;justify-content:center;gap:var(--fib-5);margin-top:var(--fib-13)}
.ux-snap-dots i{
  width:var(--fib-8);
  height:var(--fib-8);
  border-radius:50%;
  background:var(--c-line);
  transition:width .25s ease,background .25s ease;
  display:block;
}
.ux-snap-dots i.on{width:var(--fib-21);border-radius:var(--r-pill,999px);background:var(--c-brand)}

/* ---- Scroll momentum / contenção em áreas roláveis ----------------------- */
.ux-scroll-y{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.ux-scroll-x{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
}
/* Sombras laterais que indicam mais conteúdo rolável (somem nas bordas). */
.ux-scroll-fade{
  background:
    linear-gradient(90deg,var(--c-surface) 30%,transparent),
    linear-gradient(90deg,transparent,var(--c-surface) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%,rgba(17,24,39,.12),transparent),
    radial-gradient(farthest-side at 100% 50%,rgba(17,24,39,.12),transparent) 100% 0;
  background-repeat:no-repeat;
  background-size:var(--fib-34) 100%,var(--fib-34) 100%,var(--fib-13) 100%,var(--fib-13) 100%;
  background-attachment:local,local,scroll,scroll;
}

/* ---- Drawer / menu mobile polido (refinamento aditivo) ------------------- */
.ux-mdrawer{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:min(86vw,var(--fib-377));
  z-index:var(--z-drawer,130);
  background:var(--c-surface);
  color:var(--c-ink);
  box-shadow:var(--fib-8) 0 var(--fib-34) rgba(17,24,39,.2);
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
  display:flex;
  flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  will-change:transform;
}
.ux-mdrawer.open{transform:none}
.ux-mdrawer--right{left:auto;right:0;transform:translateX(100%);box-shadow:calc(-1 * var(--fib-8)) 0 var(--fib-34) rgba(17,24,39,.2)}
.ux-mdrawer--right.open{transform:none}
.ux-mdrawer-head{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--fib-21);
  border-bottom:1px solid var(--c-line);
}
.ux-mdrawer-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:var(--fib-13) 0}
.ux-mdrawer-link{
  display:flex;
  align-items:center;
  gap:var(--fib-13);
  padding:var(--fib-13) var(--fib-21);
  min-height:var(--fib-55);
  font-size:var(--fib-21);
  font-weight:600;
  color:var(--c-ink);
  border-bottom:1px solid color-mix(in srgb,var(--c-line) 50%,transparent);
  transition:background .15s ease,padding-left .15s ease;
}
.ux-mdrawer-link:active,.ux-mdrawer-link:hover{background:var(--c-bg);padding-inline-start:var(--fib-34)}
.ux-mdrawer-link .ux-chev{margin-inline-start:auto;color:var(--c-muted);font-size:var(--fib-21)}
.ux-mdrawer-foot{flex:none;padding:var(--fib-21);border-top:1px solid var(--c-line);display:flex;flex-direction:column;gap:var(--fib-13)}

/* ---- Densidade no mobile: campos e botões maiores ------------------------ */
@media (max-width:480px){
  .ux-mobile-lg input,.ux-mobile-lg select,.ux-mobile-lg textarea,.ux-mobile-lg .inp{
    min-height:var(--fib-55);
    font-size:16px; /* evita zoom automático do iOS ao focar */
  }
  .ux-mobile-lg .btn{min-height:var(--fib-55);font-size:var(--fib-21)}
}

/* ---- Tabela vira "cartões" no estreito (genérico, opt-in) ---------------- */
@media (max-width:560px){
  .ux-stack-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ux-stack-table tr{display:block;border:1px solid var(--c-line);border-radius:var(--radius);margin-bottom:var(--fib-13);padding:var(--fib-8) var(--fib-13)}
  .ux-stack-table td{display:flex;justify-content:space-between;gap:var(--fib-13);border:0;padding:var(--fib-5) 0;text-align:right}
  .ux-stack-table td::before{content:attr(data-label);font-weight:600;color:var(--c-muted);text-align:left}
}

/* ---- prefers-reduced-motion: corta transições deste módulo --------------- */
@media(prefers-reduced-motion:reduce){
  .ux-sheet,.ux-sheet-scrim,.ux-buybar,.ux-mdrawer,.ux-fab,.ux-snap-dots i{
    transition:none !important;
  }
}

}

/* ===== _ux-forms.css → @layer overrides ===== */
@layer overrides {
/* =============================================================================
 * UX · FORMS — foco visível, validação inline, floating label, helper/erro,
 * autofill, steppers, contadores, máscara visual, campos grandes no mobile.
 * Genérico (só tokens + Fibonacci). Namespaced em .ux- para não colidir com os
 * formulários já existentes (.inp/.field/.form-ok etc.). Aditivo, opt-in.
 * Comentários: NUNCA usar a sequência barra-asterisco dentro do texto.
 * ===========================================================================*/

/* ---- Campo base UX (wrapper com label, controle, helper) ------------------ */
.ux-field{
  display:flex;
  flex-direction:column;
  gap:var(--fib-5);
  text-align:left;
  margin-bottom:var(--fib-21);
}
.ux-field > label,.ux-label{
  font-size:var(--fib-13);
  font-weight:600;
  color:var(--c-ink);
  display:inline-flex;
  align-items:center;
  gap:var(--fib-5);
}
.ux-label .req{color:#dc2626;font-weight:700}
.ux-label .opt{color:var(--c-muted);font-weight:500;font-size:11px}

/* Controle genérico (input/select/textarea). Aplique .ux-input no controle. */
.ux-input,
.ux-field input:not([type="checkbox"]):not([type="radio"]),
.ux-field select,
.ux-field textarea{
  width:100%;
  font-family:inherit;
  font-size:var(--fib-13);
  color:var(--c-ink);
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  padding:var(--fib-13) var(--fib-13);
  line-height:1.4;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
  appearance:none;
  -webkit-appearance:none;
}
.ux-input::placeholder,.ux-field input::placeholder,.ux-field textarea::placeholder{color:var(--c-muted);opacity:.8}
.ux-field textarea{min-height:var(--fib-89);resize:vertical}

/* ---- Foco visível rico (anel suave do tema, não outline padrão) ---------- */
.ux-input:focus,
.ux-field input:focus,
.ux-field select:focus,
.ux-field textarea:focus,
.ux-focusable:focus-visible{
  outline:none;
  border-color:var(--c-brand);
  box-shadow:0 0 0 var(--fib-3) color-mix(in srgb,var(--c-brand) 22%,transparent);
  background:var(--c-surface);
}

/* ---- Hover do controle ---------------------------------------------------- */
.ux-input:hover:not(:focus),
.ux-field input:hover:not(:focus),
.ux-field select:hover:not(:focus),
.ux-field textarea:hover:not(:focus){
  border-color:color-mix(in srgb,var(--c-ink) 25%,var(--c-line));
}

/* ---- Autofill (Chrome pinta amarelo; harmoniza com o tema) --------------- */
.ux-input:-webkit-autofill,
.ux-field input:-webkit-autofill,
.ux-field select:-webkit-autofill,
.ux-field textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--c-ink);
  caret-color:var(--c-ink);
  box-shadow:0 0 0 var(--fib-377) var(--c-surface) inset;
  transition:background-color 9999s ease-in-out 0s;
}

/* ---- Helper / contador / erro / sucesso ---------------------------------- */
.ux-help{font-size:11px;color:var(--c-muted);line-height:1.5;display:flex;align-items:center;gap:var(--fib-5)}
.ux-help--count{justify-content:flex-end;font-variant-numeric:tabular-nums}
.ux-err-text{
  font-size:11px;
  color:#dc2626;
  line-height:1.5;
  display:flex;
  align-items:center;
  gap:var(--fib-5);
  min-height:var(--fib-13);
}
.ux-err-text::before{content:"!";flex:none;width:var(--fib-13);height:var(--fib-13);border-radius:50%;background:#dc2626;color:#fff;font-size:9px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.ux-ok-text{font-size:11px;color:#059669;line-height:1.5;display:flex;align-items:center;gap:var(--fib-5)}
.ux-ok-text::before{content:"\2713";color:#059669;font-weight:800}

/* ---- Estados de validação no controle ------------------------------------ */
.ux-field.is-invalid .ux-input,
.ux-field.is-invalid input,
.ux-field.is-invalid select,
.ux-field.is-invalid textarea,
.ux-input.is-invalid{
  border-color:#dc2626;
  box-shadow:0 0 0 var(--fib-3) color-mix(in srgb,#dc2626 18%,transparent);
}
.ux-field.is-valid .ux-input,
.ux-field.is-valid input,
.ux-input.is-valid{
  border-color:#059669;
}
.ux-field.is-invalid .ux-label{color:#b91c1c}
/* Validação nativa do browser quando o usuário já interagiu (.touched). */
.ux-field.touched input:invalid,.ux-input.touched:invalid{
  border-color:#dc2626;
}
.ux-field.touched input:valid:not(:placeholder-shown),.ux-input.touched:valid:not(:placeholder-shown){
  border-color:#059669;
}

/* ---- Floating label (rótulo que sobe ao focar/preencher) ----------------- */
.ux-float{position:relative;margin-bottom:var(--fib-21);text-align:left}
.ux-float .ux-input,
.ux-float input,
.ux-float textarea{
  width:100%;
  padding:var(--fib-21) var(--fib-13) var(--fib-5);
  font-size:var(--fib-13);
}
.ux-float label{
  position:absolute;
  left:var(--fib-13);
  top:var(--fib-13);
  color:var(--c-muted);
  font-size:var(--fib-13);
  pointer-events:none;
  transform-origin:left top;
  transition:transform .18s ease,color .18s ease,top .18s ease;
  background:transparent;
}
.ux-float .ux-input:focus + label,
.ux-float input:focus + label,
.ux-float textarea:focus + label,
.ux-float .ux-input:not(:placeholder-shown) + label,
.ux-float input:not(:placeholder-shown) + label,
.ux-float textarea:not(:placeholder-shown) + label{
  transform:scale(.8) translateY(calc(-1 * var(--fib-8)));
  top:var(--fib-5);
  color:var(--c-brand);
  font-weight:600;
}
.ux-float.is-invalid label{color:#dc2626}

/* ---- Input com ícone / prefixo / sufixo ---------------------------------- */
.ux-input-group{
  position:relative;
  display:flex;
  align-items:center;
}
.ux-input-group .ux-input,.ux-input-group input{flex:1}
.ux-input-group .ux-prefix,.ux-input-group .ux-suffix{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:var(--c-muted);
  font-size:var(--fib-13);
  pointer-events:none;
  display:flex;
  align-items:center;
}
.ux-input-group .ux-prefix{left:var(--fib-13)}
.ux-input-group .ux-suffix{right:var(--fib-13)}
.ux-input-group.has-prefix .ux-input,.ux-input-group.has-prefix input{padding-inline-start:var(--fib-34)}
.ux-input-group.has-suffix .ux-input,.ux-input-group.has-suffix input{padding-inline-end:var(--fib-34)}
/* Botão dentro do campo (limpar / mostrar senha) é clicável. */
.ux-input-group .ux-inbtn{
  position:absolute;
  right:var(--fib-5);
  top:50%;
  transform:translateY(-50%);
  width:var(--fib-34);
  height:var(--fib-34);
  border:0;
  background:transparent;
  color:var(--c-muted);
  cursor:pointer;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fib-21);
  transition:background .15s ease,color .15s ease;
}
.ux-input-group .ux-inbtn:hover{background:var(--c-bg);color:var(--c-ink)}

/* ---- Máscara visual / dica de formato ------------------------------------ */
/* Mostra o formato esperado (ex.: 000.000.000-00) por baixo do que foi
 * digitado, alinhado pela mesma fonte mono. JS preenche --ux-mask. */
.ux-masked{position:relative;font-variant-numeric:tabular-nums}
.ux-masked input{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.04em;
}
.ux-mask-hint{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  color:var(--c-muted);
  letter-spacing:.04em;
  margin-top:var(--fib-3);
  opacity:.8;
}

/* ---- Stepper numérico grande (qty no carrinho/produto) ------------------- */
.ux-stepper{
  display:inline-flex;
  align-items:stretch;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--c-surface);
  height:var(--fib-55);
}
.ux-stepper button{
  width:var(--fib-55);
  border:0;
  background:transparent;
  color:var(--c-ink);
  font-size:var(--fib-34);
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.ux-stepper button:hover{background:var(--c-bg)}
.ux-stepper button:active{background:color-mix(in srgb,var(--c-brand) 12%,var(--c-bg))}
.ux-stepper button:disabled{opacity:.4;cursor:not-allowed}
.ux-stepper input{
  width:var(--fib-55);
  border:0;
  border-left:1px solid var(--c-line);
  border-right:1px solid var(--c-line);
  text-align:center;
  font-size:var(--fib-21);
  font-weight:700;
  background:transparent;
  color:var(--c-ink);
  -moz-appearance:textfield;
}
.ux-stepper input::-webkit-outer-spin-button,
.ux-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ux-stepper--sm{height:var(--fib-34)}
.ux-stepper--sm button{width:var(--fib-34);font-size:var(--fib-21)}
.ux-stepper--sm input{width:var(--fib-34);font-size:var(--fib-13)}

/* ---- Checkbox / radio customizados acessíveis ---------------------------- */
.ux-check{display:inline-flex;align-items:flex-start;gap:var(--fib-8);cursor:pointer;font-size:var(--fib-13);line-height:1.4;color:var(--c-ink)}
.ux-check input{position:absolute;opacity:0;width:0;height:0}
.ux-check .ux-box{
  flex:none;
  width:var(--fib-21);
  height:var(--fib-21);
  border:var(--fib-2,2px) solid var(--c-line);
  border-radius:var(--r-sm,5px);
  background:var(--c-surface);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s ease,background .15s ease;
  position:relative;
}
.ux-check .ux-box::after{
  content:"";
  width:var(--fib-8);
  height:var(--fib-13);
  border:solid #fff;
  border-width:0 var(--fib-2,2px) var(--fib-2,2px) 0;
  transform:rotate(45deg) scale(0);
  transition:transform .15s cubic-bezier(.2,.7,.3,1);
  margin-top:calc(-1 * var(--fib-2));
}
.ux-check input:checked + .ux-box{background:var(--c-brand);border-color:var(--c-brand)}
.ux-check input:checked + .ux-box::after{transform:rotate(45deg) scale(1)}
.ux-check input:focus-visible + .ux-box{box-shadow:0 0 0 var(--fib-3) color-mix(in srgb,var(--c-brand) 25%,transparent)}
.ux-check.radio .ux-box{border-radius:50%}
.ux-check.radio .ux-box::after{width:var(--fib-8);height:var(--fib-8);border:0;border-radius:50%;background:#fff;transform:scale(0);margin:0}
.ux-check.radio input:checked + .ux-box::after{transform:scale(1)}

/* ---- Toggle / switch grande ---------------------------------------------- */
.ux-toggle{display:inline-flex;align-items:center;gap:var(--fib-13);cursor:pointer;font-size:var(--fib-13);color:var(--c-ink)}
.ux-toggle input{position:absolute;opacity:0}
.ux-toggle .ux-track{
  width:var(--fib-55);
  height:var(--fib-34);
  border-radius:var(--r-pill,999px);
  background:var(--c-line);
  position:relative;
  transition:background .2s ease;
  flex:none;
}
.ux-toggle .ux-track::after{
  content:"";
  position:absolute;
  top:var(--fib-3);
  left:var(--fib-3);
  width:calc(var(--fib-34) - var(--fib-5));
  height:calc(var(--fib-34) - var(--fib-5));
  border-radius:50%;
  background:#fff;
  box-shadow:0 var(--fib-2,2px) var(--fib-5) rgba(17,24,39,.25);
  transition:transform .2s cubic-bezier(.2,.7,.3,1);
}
.ux-toggle input:checked + .ux-track{background:var(--c-brand)}
.ux-toggle input:checked + .ux-track::after{transform:translateX(var(--fib-21))}
.ux-toggle input:focus-visible + .ux-track{box-shadow:0 0 0 var(--fib-3) color-mix(in srgb,var(--c-brand) 25%,transparent)}

/* ---- Segmented control (escolha visual em pílula) ------------------------ */
.ux-segmented{
  display:inline-flex;
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--r-pill,999px);
  padding:var(--fib-3);
  gap:var(--fib-3);
}
.ux-segmented button,.ux-segmented label{
  border:0;
  background:transparent;
  color:var(--c-muted);
  font-size:var(--fib-13);
  font-weight:600;
  padding:var(--fib-8) var(--fib-21);
  border-radius:var(--r-pill,999px);
  cursor:pointer;
  transition:background .2s ease,color .2s ease;
  white-space:nowrap;
}
.ux-segmented button.on,.ux-segmented label.on{background:var(--c-surface);color:var(--c-ink);box-shadow:0 var(--fib-2,2px) var(--fib-5) rgba(17,24,39,.12)}

/* ---- Upload (área de arrastar) ------------------------------------------- */
.ux-drop{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--fib-8);
  padding:var(--fib-34) var(--fib-21);
  border:var(--fib-2,2px) dashed var(--c-line);
  border-radius:var(--radius);
  background:var(--c-bg);
  color:var(--c-muted);
  text-align:center;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.ux-drop:hover,.ux-drop.drag{border-color:var(--c-brand);background:color-mix(in srgb,var(--c-brand) 6%,var(--c-bg));color:var(--c-ink)}
.ux-drop .ux-drop-ic{font-size:var(--fib-34);color:var(--c-brand)}

/* ---- Steps de formulário (wizard) ---------------------------------------- */
.ux-formsteps{display:flex;align-items:center;gap:var(--fib-8);margin-bottom:var(--fib-34);justify-content:center;flex-wrap:wrap}
.ux-formsteps .st{display:inline-flex;align-items:center;gap:var(--fib-8);color:var(--c-muted);font-size:var(--fib-13);font-weight:600}
.ux-formsteps .st .n{
  width:var(--fib-34);
  height:var(--fib-34);
  border-radius:50%;
  border:var(--fib-2,2px) solid var(--c-line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fib-13);
  background:var(--c-surface);
  transition:all .2s ease;
}
.ux-formsteps .st.on{color:var(--c-ink)}
.ux-formsteps .st.on .n{border-color:var(--c-brand);background:var(--c-brand);color:#fff}
.ux-formsteps .st.done .n{border-color:var(--ok,#059669);background:var(--ok,#059669);color:#fff}
.ux-formsteps .sep{flex:1;min-width:var(--fib-21);height:var(--fib-2,2px);background:var(--c-line);max-width:var(--fib-55)}

/* ---- Campos grandes no mobile (anti-zoom iOS) ---------------------------- */
@media (max-width:480px){
  .ux-input,.ux-field input,.ux-field select,.ux-field textarea,.ux-float input{
    font-size:16px;
    min-height:var(--fib-55);
  }
}

/* ---- prefers-reduced-motion ---------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .ux-float label,.ux-check .ux-box::after,.ux-toggle .ux-track::after,
  .ux-input,.ux-segmented button{transition:none !important}
}

}

/* ===== _ux-navigation.css → @layer overrides ===== */
@layer overrides {
/* =============================================================================
 * UX · NAVIGATION — header sticky com sombra ao rolar, voltar-ao-topo, mega-menu,
 * indicador de seção ativa, breadcrumbs, paginação, scroll-to-anchor com offset,
 * tab-bar mobile. Genérico (só tokens + Fibonacci). Namespaced .ux-, aditivo.
 * Comentários: NUNCA usar a sequência barra-asterisco dentro do texto.
 * ===========================================================================*/

/* ---- Offset de âncora (compensa o header sticky no scroll-to) ------------- */
/* Qualquer alvo de âncora recebe respiro para não ficar embaixo do cabeçalho. */
html{scroll-behavior:smooth}
:target{scroll-margin-top:calc(var(--ux-headh,var(--fib-89)) + var(--fib-21))}
[id]{scroll-margin-top:calc(var(--ux-headh,var(--fib-89)) + var(--fib-21))}

/* ---- Header sticky com elevação ao rolar (aditivo, opt-in) --------------- */
/* O JS adiciona .ux-scrolled no header (ou no body) quando passa do topo;
 * o CSS aplica sombra e leve compactação sem mexer no layout base. */
.ux-stick{
  position:sticky;
  top:0;
  z-index:var(--z-header,100);
  transition:box-shadow .25s ease,background .25s ease,padding .25s ease;
}
.ux-stick.ux-scrolled{
  box-shadow:0 var(--fib-3) var(--fib-13) rgba(17,24,39,.1);
  background:color-mix(in srgb,var(--c-headerbg,var(--c-surface)) 96%,transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(8px);
  backdrop-filter:saturate(1.3) blur(8px);
}
/* Esconde o header ao rolar para baixo, revela ao subir (auto-hide). */
.ux-autohide{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.ux-autohide.ux-hidden{transform:translateY(-100%)}

/* ---- Barra de progresso de leitura/scroll da página --------------------- */
.ux-readbar{
  position:fixed;
  top:0;
  left:0;
  height:var(--fib-3);
  width:var(--ux-read,0%);
  background:linear-gradient(90deg,var(--c-brand),var(--c-accent));
  z-index:var(--z-progress,150);
  transition:width .1s linear;
}

/* ---- Voltar ao topo (refino do .to-top com rótulo opcional) -------------- */
.ux-totop{
  position:fixed;
  right:var(--fib-21);
  bottom:calc(var(--fib-55) + env(safe-area-inset-bottom,0px));
  z-index:var(--z-fab,60);
  width:var(--fib-55);
  height:var(--fib-55);
  border-radius:50%;
  background:var(--c-ink);
  color:var(--c-surface);
  border:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fib-21);
  opacity:0;
  visibility:hidden;
  transform:translateY(var(--fib-21)) scale(.9);
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
  box-shadow:0 var(--fib-5) var(--fib-21) rgba(17,24,39,.28);
}
.ux-totop.show{opacity:.92;visibility:visible;transform:none}
.ux-totop:hover{opacity:1;transform:translateY(-2px)}

/* ---- Mega-menu (painel largo de categorias no desktop) ------------------- */
.ux-mega-trigger{position:relative}
.ux-mega{
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%) translateY(var(--fib-8));
  min-width:var(--fib-610);
  max-width:min(var(--fib-987,987px),92vw);
  background:var(--c-surface);
  color:var(--c-ink);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  box-shadow:0 var(--fib-13) var(--fib-34) rgba(17,24,39,.16);
  padding:var(--fib-21);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(var(--fib-144),1fr));
  gap:var(--fib-21);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  z-index:var(--z-mega,105);
}
.ux-mega-trigger:hover .ux-mega,
.ux-mega-trigger:focus-within .ux-mega,
.ux-mega.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.ux-mega-col h4{font-size:var(--fib-13);font-weight:700;color:var(--c-muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 var(--fib-13)}
.ux-mega-col a{
  display:block;
  padding:var(--fib-5) 0;
  font-size:var(--fib-13);
  color:var(--c-ink);
  transition:color .15s ease,padding-left .15s ease;
}
.ux-mega-col a:hover{color:var(--c-brand);padding-inline-start:var(--fib-5)}
.ux-mega-feat{
  grid-column:span 1;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  min-height:var(--fib-144);
  display:flex;
  align-items:flex-end;
  padding:var(--fib-13);
  color:#fff;
  background:var(--c-brand);
}
.ux-mega-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.ux-mega-feat span{position:relative;font-weight:700;font-size:var(--fib-13)}

/* ---- Indicador de seção ativa (sublinhado deslizante) -------------------- */
.ux-navlink{
  position:relative;
  padding:var(--fib-8) 0;
  color:var(--c-ink);
  font-weight:600;
  font-size:var(--fib-13);
  transition:color .18s ease;
}
.ux-navlink::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--fib-2,2px);
  background:var(--c-brand);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
  border-radius:var(--r-pill,999px);
}
.ux-navlink:hover{color:var(--c-brand)}
.ux-navlink:hover::after,
.ux-navlink.active::after,
.ux-navlink[aria-current]::after{transform:scaleX(1)}
.ux-navlink.active{color:var(--c-brand)}

/* ---- Navegação por âncoras lateral (scroll-spy) -------------------------- */
.ux-anchors{display:flex;flex-direction:column;gap:var(--fib-5);position:sticky;top:calc(var(--ux-headh,var(--fib-89)) + var(--fib-21))}
.ux-anchors a{
  display:flex;
  align-items:center;
  gap:var(--fib-8);
  padding:var(--fib-5) var(--fib-13);
  border-left:var(--fib-2,2px) solid var(--c-line);
  color:var(--c-muted);
  font-size:var(--fib-13);
  transition:color .15s ease,border-color .15s ease;
}
.ux-anchors a.active{color:var(--c-brand);border-left-color:var(--c-brand);font-weight:600}
.ux-anchors a:hover{color:var(--c-ink)}

/* ---- Breadcrumbs aprimorados (chevrons + truncamento) -------------------- */
.ux-crumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--fib-5);
  font-size:var(--fib-13);
  color:var(--c-muted);
  margin-bottom:var(--fib-21);
}
.ux-crumbs a{color:var(--c-muted);transition:color .15s ease;max-width:var(--fib-233);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ux-crumbs a:hover{color:var(--c-brand)}
.ux-crumbs .sep{opacity:.5;font-size:11px}
.ux-crumbs .here{color:var(--c-ink);font-weight:600;max-width:var(--fib-377);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:480px){
  /* No estreito mostra só o nível anterior + atual. */
  .ux-crumbs .collapse{display:none}
  .ux-crumbs .back-1::before{content:"\2039 ";opacity:.5}
}

/* ---- Paginação rica (com setas e reticências) ---------------------------- */
.ux-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--fib-5);margin-top:var(--fib-34)}
.ux-pager a,.ux-pager span{
  min-width:var(--fib-34);
  height:var(--fib-34);
  padding:0 var(--fib-8);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  font-size:var(--fib-13);
  font-weight:600;
  color:var(--c-ink);
  background:var(--c-surface);
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.ux-pager a:hover{border-color:var(--c-brand);color:var(--c-brand)}
.ux-pager .cur{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.ux-pager .gap{border:0;background:transparent;pointer-events:none;color:var(--c-muted)}
.ux-pager .nav{font-weight:700}
.ux-pager .disabled{opacity:.4;pointer-events:none}
/* "Carregar mais" central. */
.ux-loadmore{display:flex;justify-content:center;margin-top:var(--fib-34)}
.ux-loadmore .btn{width:auto;min-width:var(--fib-233)}

/* ---- Tab-bar inferior (app-like no mobile) ------------------------------- */
.ux-tabbar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:var(--z-header,100);
  display:flex;
  background:color-mix(in srgb,var(--c-surface) 96%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  backdrop-filter:saturate(1.4) blur(10px);
  border-top:1px solid var(--c-line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 calc(-1 * var(--fib-3)) var(--fib-13) rgba(17,24,39,.06);
}
.ux-tabbar a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--fib-3);
  min-height:var(--fib-55);
  padding:var(--fib-5) 0;
  color:var(--c-muted);
  font-size:10px;
  font-weight:600;
  position:relative;
  transition:color .15s ease;
}
.ux-tabbar a .ic{font-size:var(--fib-21);line-height:1}
.ux-tabbar a.active{color:var(--c-brand)}
.ux-tabbar a.active::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:var(--fib-21);
  height:var(--fib-3);
  border-radius:var(--r-pill,999px);
  background:var(--c-brand);
}
@media (min-width:769px){.ux-tabbar{display:none}}

/* ---- Skip-link / saltar para conteúdo (a11y de navegação) ---------------- */
.ux-skip{
  position:fixed;
  top:var(--fib-8);
  left:var(--fib-8);
  z-index:var(--z-skip,200);
  background:var(--c-ink);
  color:var(--c-surface);
  padding:var(--fib-8) var(--fib-21);
  border-radius:var(--radius);
  font-size:var(--fib-13);
  font-weight:600;
  transform:translateY(calc(-100% - var(--fib-21)));
  transition:transform .2s ease;
}
.ux-skip:focus{transform:none;outline:var(--fib-2,2px) solid var(--c-accent);outline-offset:var(--fib-2,2px)}

/* ---- Filtro/ordenação sticky de catálogo --------------------------------- */
.ux-filterbar{
  position:sticky;
  top:calc(var(--ux-headh,var(--fib-89)));
  z-index:calc(var(--z-header,100) - 1);
  display:flex;
  align-items:center;
  gap:var(--fib-13);
  padding:var(--fib-8) 0;
  background:var(--c-bg);
  border-bottom:1px solid var(--c-line);
  overflow-x:auto;
  scrollbar-width:none;
}
.ux-filterbar::-webkit-scrollbar{display:none}
.ux-filterbar .count{font-size:var(--fib-13);color:var(--c-muted);white-space:nowrap}
.ux-filterbar .spacer{flex:1}

/* ---- prefers-reduced-motion ---------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ux-stick,.ux-autohide,.ux-totop,.ux-mega,.ux-navlink::after,
  .ux-readbar,.ux-tabbar a{transition:none !important}
}

}

/* ===== _ux-motion.css → @layer overrides ===== */
@layer overrides {
/* =============================================================================
 * UX · MOTION — micro-interações: reveal, stagger, hover-lift/zoom/tilt,
 * transições de página, pulso de CTA, transições de view. SEMPRE desligadas em
 * prefers-reduced-motion (bloco final). Genérico (só tokens + Fibonacci).
 * Namespaced .ux-/.uxa-. Comentários: NUNCA a sequência barra-asterisco no texto.
 * ===========================================================================*/

/* ---- Keyframes próprios (não conflitam com _animations.css) -------------- */
@keyframes uxa-rise{from{opacity:0;transform:translateY(var(--fib-21))}to{opacity:1;transform:none}}
@keyframes uxa-sink{from{opacity:0;transform:translateY(calc(-1 * var(--fib-21)))}to{opacity:1;transform:none}}
@keyframes uxa-in-left{from{opacity:0;transform:translateX(calc(-1 * var(--fib-34)))}to{opacity:1;transform:none}}
@keyframes uxa-in-right{from{opacity:0;transform:translateX(var(--fib-34))}to{opacity:1;transform:none}}
@keyframes uxa-scale-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes uxa-blur-in{from{opacity:0;filter:blur(var(--fib-8))}to{opacity:1;filter:blur(0)}}
@keyframes uxa-tada{0%{transform:scale(1)}10%,20%{transform:scale(.95) rotate(-2deg)}30%,50%,70%,90%{transform:scale(1.04) rotate(2deg)}40%,60%,80%{transform:scale(1.04) rotate(-2deg)}100%{transform:scale(1) rotate(0)}}
@keyframes uxa-heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.18)}28%{transform:scale(1)}42%{transform:scale(1.14)}70%{transform:scale(1)}}
@keyframes uxa-gradient-pan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes uxa-shimmer-text{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes uxa-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}

/* ---- Reveal on scroll (JS adiciona .in quando entra na viewport) --------- */
.uxa-reveal{opacity:1}
.js .uxa-reveal{opacity:0;will-change:opacity,transform}
.js .uxa-reveal.in{animation:uxa-rise .7s cubic-bezier(.2,.7,.3,1) both}
.js .uxa-reveal.from-left{animation-name:uxa-in-left}
.js .uxa-reveal.from-right{animation-name:uxa-in-right}
.js .uxa-reveal.from-top{animation-name:uxa-sink}
.js .uxa-reveal.scale{animation-name:uxa-scale-in}
.js .uxa-reveal.blur{animation-name:uxa-blur-in}
.js .uxa-reveal.in.from-left,
.js .uxa-reveal.in.from-right,
.js .uxa-reveal.in.from-top,
.js .uxa-reveal.in.scale,
.js .uxa-reveal.in.blur{animation-duration:.7s;animation-timing-function:cubic-bezier(.2,.7,.3,1);animation-fill-mode:both}

/* ---- Stagger (atrasos em cascata para listas/grids) ---------------------- */
/* Cada filho herda um atraso crescente; ótimo em grade de produtos. */
.uxa-stagger > *{opacity:0}
.js .uxa-stagger.in > *{animation:uxa-rise .6s cubic-bezier(.2,.7,.3,1) both}
.js .uxa-stagger.in > *:nth-child(1){animation-delay:.04s}
.js .uxa-stagger.in > *:nth-child(2){animation-delay:.08s}
.js .uxa-stagger.in > *:nth-child(3){animation-delay:.12s}
.js .uxa-stagger.in > *:nth-child(4){animation-delay:.16s}
.js .uxa-stagger.in > *:nth-child(5){animation-delay:.2s}
.js .uxa-stagger.in > *:nth-child(6){animation-delay:.24s}
.js .uxa-stagger.in > *:nth-child(7){animation-delay:.28s}
.js .uxa-stagger.in > *:nth-child(8){animation-delay:.32s}
.js .uxa-stagger.in > *:nth-child(9){animation-delay:.36s}
.js .uxa-stagger.in > *:nth-child(10){animation-delay:.4s}
.js .uxa-stagger.in > *:nth-child(11){animation-delay:.44s}
.js .uxa-stagger.in > *:nth-child(12){animation-delay:.48s}
/* A partir do 12º, todos entram juntos para não atrasar demais. */
.js .uxa-stagger.in > *:nth-child(n+13){animation-delay:.5s}

/* ---- Entradas diretas (aplicar a classe e já anima) ---------------------- */
.uxa-rise{animation:uxa-rise .6s cubic-bezier(.2,.7,.3,1) both}
.uxa-sink{animation:uxa-sink .6s cubic-bezier(.2,.7,.3,1) both}
.uxa-left{animation:uxa-in-left .6s cubic-bezier(.2,.7,.3,1) both}
.uxa-right{animation:uxa-in-right .6s cubic-bezier(.2,.7,.3,1) both}
.uxa-scale{animation:uxa-scale-in .5s cubic-bezier(.2,.7,.3,1) both}
.uxa-blur{animation:uxa-blur-in .6s ease both}
/* Atrasos utilitários extras (além dos .anim-d* já existentes). */
.uxa-d1{animation-delay:.05s}.uxa-d2{animation-delay:.1s}.uxa-d3{animation-delay:.15s}
.uxa-d4{animation-delay:.2s}.uxa-d5{animation-delay:.25s}.uxa-d6{animation-delay:.3s}
.uxa-d7{animation-delay:.35s}.uxa-d8{animation-delay:.4s}

/* ---- Hover-lift / zoom / tilt / glow (cartões e mídia) ------------------- */
.uxa-lift{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease}
.uxa-lift:hover{transform:translateY(calc(-1 * var(--fib-5)));box-shadow:0 var(--fib-13) var(--fib-34) rgba(17,24,39,.14)}
.uxa-lift-sm:hover{transform:translateY(-3px)}
.uxa-zoom-wrap{overflow:hidden;border-radius:inherit}
.uxa-zoom-wrap img{transition:transform .5s cubic-bezier(.2,.7,.3,1);display:block}
.uxa-zoom-wrap:hover img{transform:scale(1.07)}
.uxa-tilt{transition:transform .3s ease}
.uxa-tilt:hover{transform:perspective(var(--fib-610)) rotateX(2deg) rotateY(-2deg) translateZ(0)}
.uxa-glow{transition:box-shadow .3s ease}
.uxa-glow:hover{box-shadow:0 0 var(--fib-21) color-mix(in srgb,var(--c-brand) 35%,transparent)}
.uxa-press{transition:transform .1s ease}
.uxa-press:active{transform:scale(.96)}
/* Borda que "desenha" no hover (sutil). */
.uxa-frame{position:relative}
.uxa-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 0 var(--c-brand);
  transition:box-shadow .25s ease;
  pointer-events:none;
}
.uxa-frame:hover::after{box-shadow:inset 0 0 0 var(--fib-2,2px) var(--c-brand)}

/* ---- Pulso / chamariz de CTA --------------------------------------------- */
.uxa-cta-pulse{position:relative;z-index:0}
.uxa-cta-pulse::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--c-brand);
  animation:uxa-cta-ring 2.4s ease-out infinite;
}
@keyframes uxa-cta-ring{
  0%{transform:scale(1);opacity:.5}
  100%{transform:scale(1.18);opacity:0}
}
.uxa-tada:hover{animation:uxa-tada 1s ease}
.uxa-heartbeat{animation:uxa-heartbeat 1.6s ease-in-out infinite}
.uxa-wiggle:hover{animation:uxa-wiggle .4s ease}

/* ---- Texto com brilho deslizante (badge "novo"/promo) -------------------- */
.uxa-shine{
  background:linear-gradient(90deg,currentColor 30%,#fff 50%,currentColor 70%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:uxa-shimmer-text 3s linear infinite;
}
/* Fundo gradiente animado (faixa de promo, herói). */
.uxa-gradient{
  background:linear-gradient(120deg,var(--c-brand),var(--c-accent),var(--c-brand));
  background-size:200% 200%;
  animation:uxa-gradient-pan 8s ease infinite;
}

/* ---- Transição de página / view (fade leve ao navegar) ------------------- */
/* O JS adiciona .ux-leaving ao <main> antes de navegar; o conteúdo some
 * suavemente. Na chegada, .ux-enter anima a entrada. */
.ux-enter{animation:uxa-rise .45s cubic-bezier(.2,.7,.3,1) both}
.ux-leaving{opacity:0;transform:translateY(calc(-1 * var(--fib-8)));transition:opacity .25s ease,transform .25s ease}

/* View Transitions API (navegadores compatíveis) — fade suave entre páginas. */
@media (prefers-reduced-motion:no-preference){
  @supports (view-transition-name:none){
    ::view-transition-old(root){animation:uxa-fade-out .25s ease both}
    ::view-transition-new(root){animation:uxa-rise .3s cubic-bezier(.2,.7,.3,1) both}
  }
}
@keyframes uxa-fade-out{to{opacity:0}}

/* ---- Realce de foco animado (anel que "respira") ------------------------- */
.uxa-focus-ring:focus-visible{
  outline:none;
  animation:uxa-ring-breathe 1.6s ease-in-out infinite;
  border-radius:inherit;
}
@keyframes uxa-ring-breathe{
  0%,100%{box-shadow:0 0 0 var(--fib-2,2px) color-mix(in srgb,var(--c-brand) 50%,transparent)}
  50%{box-shadow:0 0 0 var(--fib-5) color-mix(in srgb,var(--c-brand) 25%,transparent)}
}

/* ---- Contador/preço que "rola" ao mudar (efeito odômetro leve) ----------- */
.uxa-bump{animation:uxa-bump-k .35s cubic-bezier(.2,.7,.3,1)}
@keyframes uxa-bump-k{
  0%{transform:translateY(var(--fib-8));opacity:.4}
  100%{transform:none;opacity:1}
}

/* ---- Ondas de carregamento (3 pontos) ------------------------------------ */
.uxa-dots{display:inline-flex;gap:var(--fib-5);align-items:center}
.uxa-dots i{
  width:var(--fib-8);
  height:var(--fib-8);
  border-radius:50%;
  background:currentColor;
  display:block;
  animation:uxa-dots-b 1.2s ease-in-out infinite;
}
.uxa-dots i:nth-child(2){animation-delay:.15s}
.uxa-dots i:nth-child(3){animation-delay:.3s}
@keyframes uxa-dots-b{
  0%,80%,100%{transform:scale(.6);opacity:.5}
  40%{transform:scale(1);opacity:1}
}

/* ---- Skeleton de carregamento de imagem (blur-up até carregar) ----------- */
.uxa-img-load{background:var(--c-bg);transition:filter .4s ease,opacity .4s ease;filter:blur(var(--fib-8));opacity:.6}
.uxa-img-load.loaded{filter:none;opacity:1}

/* ---- Marquee / faixa rolante de selos (genérico, opt-in) ----------------- */
.uxa-marquee{overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.uxa-marquee > *{display:inline-flex;gap:var(--fib-34);animation:uxa-marquee-k 22s linear infinite;padding-inline-end:var(--fib-34)}
.uxa-marquee:hover > *{animation-play-state:paused}
@keyframes uxa-marquee-k{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- prefers-reduced-motion: desliga TUDO deste módulo -------------------- */
@media(prefers-reduced-motion:reduce){
  .uxa-reveal,.js .uxa-reveal,.js .uxa-reveal.in,
  .uxa-stagger > *,.js .uxa-stagger.in > *,
  .uxa-rise,.uxa-sink,.uxa-left,.uxa-right,.uxa-scale,.uxa-blur,
  .uxa-cta-pulse::before,.uxa-tada,.uxa-heartbeat,.uxa-wiggle,
  .uxa-shine,.uxa-gradient,.ux-enter,.uxa-focus-ring,.uxa-bump,
  .uxa-dots i,.uxa-marquee > *{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  .ux-leaving{transition:none !important;opacity:1 !important;transform:none !important}
  .uxa-lift,.uxa-zoom-wrap img,.uxa-tilt,.uxa-glow,.uxa-press,.uxa-frame::after,
  .uxa-img-load{transition:none !important}
  .js .uxa-stagger > *,.uxa-stagger > *{opacity:1 !important}
}

}

/* ===== _ux-states.css → @layer overrides ===== */
@layer overrides {
/* =============================================================================
 * UX · STATES & A11Y — focus-visible global, sr-only, navegação por teclado,
 * prefers-contrast, hover/active ricos, seleção de texto, scrollbar tematizada,
 * estados aria (busy/expanded/selected/invalid). Genérico (tokens + Fibonacci).
 * Namespaced .ux- onde aplicável; regras globais são melhorias aditivas seguras.
 * Comentários: NUNCA usar a sequência barra-asterisco dentro do texto.
 * ===========================================================================*/

/* ---- Foco visível global por teclado (não atrapalha clique de mouse) ----- */
/* :focus-visible só dispara em navegação por teclado/AT — mouse não vê o anel. */
:focus-visible{
  outline:var(--fib-2,2px) solid var(--c-brand);
  outline-offset:var(--fib-2,2px);
  border-radius:var(--r-sm,4px);
}
/* Remove o outline default só quando o foco NÃO é por teclado. */
:focus:not(:focus-visible){outline:none}
/* Controles principais ganham um anel suave do tema ao foco por teclado. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.chip:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible{
  outline:var(--fib-2,2px) solid var(--c-brand);
  outline-offset:var(--fib-3);
  box-shadow:0 0 0 var(--fib-3) color-mix(in srgb,var(--c-brand) 18%,transparent);
}

/* ---- sr-only (visível só para leitores de tela) -------------------------- */
.sr-only,.ux-sr{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
/* Reaparece ao receber foco (ex.: skip-link textual). */
.sr-only-focusable:focus,.ux-sr-focusable:focus{
  position:static !important;
  width:auto;
  height:auto;
  margin:0;
  overflow:visible;
  clip:auto;
  white-space:normal;
}

/* ---- Acessibilidade de leitura: legenda só por contexto ------------------ */
.ux-visually-hidden{position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}

/* ---- Hover/active ricos em superfícies clicáveis ------------------------- */
/* Aplicar .ux-interactive em cards/linhas/cells clicáveis: hover sobe,
 * active afunda, e o foco por teclado fica claro. */
.ux-interactive{
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.ux-interactive:hover{background:color-mix(in srgb,var(--c-brand) 4%,var(--c-surface))}
.ux-interactive:active{transform:scale(.99)}
.ux-interactive:focus-visible{outline:var(--fib-2,2px) solid var(--c-brand);outline-offset:var(--fib-2,2px)}
/* Linha de lista clicável. */
.ux-row-link{
  display:flex;
  align-items:center;
  gap:var(--fib-13);
  padding:var(--fib-13) var(--fib-21);
  border-radius:var(--radius);
  transition:background .15s ease;
}
.ux-row-link:hover{background:var(--c-bg)}
.ux-row-link:active{background:color-mix(in srgb,var(--c-brand) 8%,var(--c-bg))}
.ux-row-link .ux-chev{margin-inline-start:auto;color:var(--c-muted);transition:transform .15s ease}
.ux-row-link:hover .ux-chev{transform:translateX(var(--fib-3));color:var(--c-brand)}

/* ---- Estados ARIA refletidos visualmente --------------------------------- */
[aria-busy="true"]{cursor:progress;opacity:.7}
[aria-disabled="true"]{opacity:.5;pointer-events:none;cursor:not-allowed}
[aria-current="page"],[aria-current="true"]{font-weight:700}
[aria-invalid="true"]{border-color:#dc2626 !important}
[aria-selected="true"]{background:color-mix(in srgb,var(--c-brand) 10%,var(--c-surface))}
/* Disclosure (details/summary) com seta que gira. */
[aria-expanded] .ux-caret,details > summary .ux-caret{
  display:inline-block;
  transition:transform .2s ease;
}
[aria-expanded="true"] .ux-caret,details[open] > summary .ux-caret{transform:rotate(90deg)}
details > summary{cursor:pointer;list-style:none}
details > summary::-webkit-details-marker{display:none}
details > summary:focus-visible{outline:var(--fib-2,2px) solid var(--c-brand);outline-offset:var(--fib-2,2px)}

/* ---- Seleção de texto tematizada ----------------------------------------- */
::selection{background:color-mix(in srgb,var(--c-brand) 28%,transparent);color:var(--c-ink)}
.ux-noselect{user-select:none;-webkit-user-select:none}

/* ---- Scrollbar fina tematizada (desktop) --------------------------------- */
.ux-scrollbar{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--c-ink) 30%,transparent) transparent}
.ux-scrollbar::-webkit-scrollbar{width:var(--fib-8);height:var(--fib-8)}
.ux-scrollbar::-webkit-scrollbar-track{background:transparent}
.ux-scrollbar::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--c-ink) 24%,transparent);border-radius:var(--r-pill,999px)}
.ux-scrollbar::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--c-ink) 40%,transparent)}

/* ---- Indicador de carregamento de página inteira ------------------------- */
.ux-page-busy{position:relative;min-height:var(--fib-233)}
.ux-page-busy::after{
  content:"";
  position:absolute;
  top:var(--fib-55);
  left:50%;
  transform:translateX(-50%);
  width:var(--fib-34);
  height:var(--fib-34);
  border-radius:50%;
  border:var(--fib-3) solid var(--c-line);
  border-top-color:var(--c-brand);
  animation:spin .8s linear infinite;
}

/* ---- Tooltip acessível por foco (além do data-tip existente) ------------- */
.ux-hint{position:relative;display:inline-flex;align-items:center}
.ux-hint .ux-hint-pop{
  position:absolute;
  bottom:calc(100% + var(--fib-5));
  left:50%;
  transform:translateX(-50%) translateY(var(--fib-3));
  background:var(--c-ink);
  color:var(--c-surface);
  font-size:11px;
  line-height:1.4;
  font-weight:500;
  padding:var(--fib-5) var(--fib-8);
  border-radius:var(--r-sm,4px);
  width:max-content;
  max-width:var(--fib-233);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  z-index:var(--z-tip,70);
  box-shadow:0 var(--fib-3) var(--fib-13) rgba(17,24,39,.2);
}
.ux-hint:hover .ux-hint-pop,
.ux-hint:focus-within .ux-hint-pop{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- prefers-contrast: high (reforça bordas e foco) ---------------------- */
@media (prefers-contrast:more){
  :focus-visible{outline-width:var(--fib-3);outline-offset:var(--fib-2,2px)}
  .btn,.chip,.card,.ux-input,.ux-field input,.ux-field select,.ux-field textarea,
  .notice,.ux-status,.badge{border-width:var(--fib-2,2px) !important}
  a{text-decoration:underline}
  .muted,.ux-help,.sec-sub{color:var(--c-ink) !important}
  ::selection{background:var(--c-brand);color:#fff}
}
/* forced-colors (Windows High Contrast): preserva contornos. */
@media (forced-colors:active){
  .btn,.chip,.card,.ux-input,.ux-status,.badge,.ux-toast,.ux-sheet,.ux-mdrawer{
    border:1px solid CanvasText;
  }
  :focus-visible{outline:var(--fib-2,2px) solid Highlight}
}

/* ---- Estados de toque vs ponteiro fino ----------------------------------- */
/* No mouse, revela controles que só aparecem no hover (ex.: quick-add). */
@media (hover:hover) and (pointer:fine){
  .ux-hover-reveal{opacity:0;transform:translateY(var(--fib-5));transition:opacity .2s ease,transform .2s ease}
  .ux-hover-host:hover .ux-hover-reveal,
  .ux-hover-host:focus-within .ux-hover-reveal{opacity:1;transform:none}
}
/* No toque, esses controles ficam sempre visíveis (não há hover). */
@media (hover:none){
  .ux-hover-reveal{opacity:1;transform:none}
}

/* ---- Acessibilidade: alvo de foco rolável dentro de modal/drawer --------- */
.ux-trap{outline:none}

/* ---- Desabilitar animação por escolha do usuário (classe utilitária) ----- */
.ux-no-motion *,.ux-no-motion *::before,.ux-no-motion *::after{
  animation-duration:.001ms !important;
  transition-duration:.001ms !important;
}

/* ---- prefers-reduced-motion ---------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .ux-interactive,.ux-row-link,.ux-row-link .ux-chev,.ux-hint .ux-hint-pop,
  .ux-hover-reveal,[aria-expanded] .ux-caret{transition:none !important}
  .ux-page-busy::after{animation:none !important}
}

}

/* ===== _ux-commerce.css → @layer overrides ===== */
@layer overrides {
/* =============================================================================
 * UX · COMMERCE — cartão de produto com quick-add/quick-view, selos, urgência
 * (estoque baixo), galeria com zoom/lente, mini-cart polido, barra de frete
 * grátis, recomendações, wishlist, comparador, swatches, prova social. Genérico
 * (só tokens + Fibonacci). Namespaced .ux-, aditivo (não quebra .card/.price).
 * Comentários: NUNCA usar a sequência barra-asterisco dentro do texto.
 * ===========================================================================*/

/* ---- Cartão de produto com camada de ações (quick-add / quick-view) ------ */
/* Use .ux-pcard como hospedeiro; o .ux-pcard-media segura a imagem e revela as
 * ações no hover (no toque, ficam visíveis). Aditivo ao .card existente. */
.ux-pcard{position:relative;display:flex;flex-direction:column;height:100%}
.ux-pcard-media{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--c-bg);
  aspect-ratio:1/1;
}
.ux-pcard-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.ux-pcard:hover .ux-pcard-media img{transform:scale(1.05)}
/* Segunda imagem (hover-swap): aparece ao passar o mouse. */
.ux-pcard-media .ux-alt{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.ux-pcard:hover .ux-pcard-media .ux-alt{opacity:1}
/* Camada de ações flutuantes. */
.ux-pcard-actions{
  position:absolute;
  right:var(--fib-8);
  top:var(--fib-8);
  display:flex;
  flex-direction:column;
  gap:var(--fib-5);
  z-index:2;
}
.ux-pcard-act{
  width:var(--fib-34);
  height:var(--fib-34);
  border-radius:50%;
  border:0;
  background:color-mix(in srgb,var(--c-surface) 92%,transparent);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  color:var(--c-ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fib-21);
  box-shadow:0 var(--fib-2,2px) var(--fib-8) rgba(17,24,39,.14);
  opacity:0;
  transform:translateX(var(--fib-8));
  transition:opacity .2s ease,transform .2s ease,background .15s ease,color .15s ease;
}
.ux-pcard:hover .ux-pcard-act,.ux-pcard:focus-within .ux-pcard-act{opacity:1;transform:none}
.ux-pcard-act:hover{background:var(--c-brand);color:#fff}
.ux-pcard-act.on{background:var(--c-accent);color:#fff;opacity:1;transform:none}
.ux-pcard-act:nth-child(2){transition-delay:.04s}
.ux-pcard-act:nth-child(3){transition-delay:.08s}
@media (hover:none){.ux-pcard-act{opacity:1;transform:none}}
/* Botão "adicionar" deslizante que sobe da base da imagem. */
.ux-quickadd{
  position:absolute;
  left:var(--fib-8);
  right:var(--fib-8);
  bottom:var(--fib-8);
  z-index:2;
  padding:var(--fib-8) var(--fib-13);
  border:0;
  border-radius:var(--radius);
  background:var(--c-ink);
  color:var(--c-surface);
  font-size:var(--fib-13);
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--fib-8);
  transform:translateY(calc(100% + var(--fib-13)));
  opacity:0;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease,background .15s ease;
}
.ux-pcard:hover .ux-quickadd,.ux-pcard:focus-within .ux-quickadd{transform:none;opacity:1}
.ux-quickadd:hover{background:var(--c-brand)}
@media (hover:none){.ux-quickadd{position:static;transform:none;opacity:1;margin-top:var(--fib-8)}}
/* Corpo do cartão (título, preço, rating). */
.ux-pcard-body{display:flex;flex-direction:column;gap:var(--fib-5);padding:var(--fib-13) var(--fib-3);text-align:left;flex:1}
.ux-pcard-title{font-size:var(--fib-13);font-weight:600;color:var(--c-ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ux-pcard-price{display:flex;align-items:baseline;gap:var(--fib-8);margin-top:auto}
.ux-pcard-price .now{font-size:var(--fib-21);font-weight:800;color:var(--c-ink)}
.ux-pcard-price .was{font-size:var(--fib-13);color:var(--c-muted);text-decoration:line-through}
.ux-pcard-price .off{font-size:11px;font-weight:700;color:#fff;background:#e11d48;padding:var(--fib-2,2px) var(--fib-5);border-radius:var(--r-sm,4px)}

/* ---- Selos sobre o produto (novo / promo / esgotado / frete) ------------- */
.ux-flags{position:absolute;top:var(--fib-8);left:var(--fib-8);display:flex;flex-direction:column;gap:var(--fib-5);z-index:2}
.ux-flag{
  display:inline-flex;
  align-items:center;
  gap:var(--fib-3);
  padding:var(--fib-2,2px) var(--fib-8);
  border-radius:var(--r-sm,4px);
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  line-height:1.5;
  color:#fff;
}
.ux-flag--new{background:#0ea5e9}
.ux-flag--sale{background:#e11d48}
.ux-flag--hot{background:#f97316}
.ux-flag--ship{background:#059669}
.ux-flag--soft{background:color-mix(in srgb,var(--c-ink) 80%,transparent)}
/* Véu de esgotado sobre a imagem. */
.ux-soldout{position:absolute;inset:0;background:color-mix(in srgb,var(--c-surface) 60%,transparent);display:flex;align-items:center;justify-content:center;z-index:3}
.ux-soldout span{background:var(--c-ink);color:var(--c-surface);font-size:var(--fib-13);font-weight:700;padding:var(--fib-5) var(--fib-13);border-radius:var(--r-pill,999px);text-transform:uppercase;letter-spacing:.05em}

/* ---- Urgência: estoque baixo (barra + texto) ----------------------------- */
.ux-urgency{display:flex;flex-direction:column;gap:var(--fib-5);font-size:11px;color:#b45309;font-weight:600}
.ux-urgency .bar{height:var(--fib-5);border-radius:var(--r-pill,999px);background:var(--c-line);overflow:hidden}
.ux-urgency .bar > i{display:block;height:100%;width:var(--ux-stock,40%);background:linear-gradient(90deg,#f59e0b,#ef4444);border-radius:inherit;transition:width .5s ease}
.ux-urgency .ic{display:inline-flex}
/* Cronômetro de oferta. */
.ux-countdown{display:inline-flex;align-items:center;gap:var(--fib-5);font-variant-numeric:tabular-nums;font-weight:800}
.ux-countdown b{
  background:var(--c-ink);
  color:var(--c-surface);
  padding:var(--fib-3) var(--fib-5);
  border-radius:var(--r-sm,4px);
  min-width:var(--fib-21);
  text-align:center;
  font-size:var(--fib-13);
}
.ux-countdown .sep{color:var(--c-muted)}

/* ---- Swatches (cores/variações) ------------------------------------------ */
.ux-swatches{display:flex;flex-wrap:wrap;gap:var(--fib-8);align-items:center}
.ux-swatch{
  width:var(--fib-21);
  height:var(--fib-21);
  border-radius:50%;
  border:var(--fib-2,2px) solid var(--c-surface);
  box-shadow:0 0 0 1px var(--c-line);
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
  position:relative;
  background:var(--ux-sw,var(--c-line));
}
.ux-swatch:hover{transform:scale(1.12)}
.ux-swatch.on{box-shadow:0 0 0 var(--fib-2,2px) var(--c-brand);transform:scale(1.08)}
.ux-swatch.on::after{content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.ux-swatch:focus-visible{outline:var(--fib-2,2px) solid var(--c-brand);outline-offset:var(--fib-2,2px)}
.ux-swatch.more{background:var(--c-bg);color:var(--c-muted);box-shadow:0 0 0 1px var(--c-line);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700}
/* Pílulas de tamanho. */
.ux-sizes{display:flex;flex-wrap:wrap;gap:var(--fib-8)}
.ux-size{
  min-width:var(--fib-34);
  height:var(--fib-34);
  padding:0 var(--fib-8);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  background:var(--c-surface);
  color:var(--c-ink);
  font-size:var(--fib-13);
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.ux-size:hover{border-color:var(--c-ink)}
.ux-size.on{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.ux-size:disabled,.ux-size.out{opacity:.4;cursor:not-allowed;text-decoration:line-through}

/* ---- Galeria com zoom / lente -------------------------------------------- */
.ux-gallery{display:flex;flex-direction:column;gap:var(--fib-13)}
.ux-gallery-main{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--c-bg);
  aspect-ratio:1/1;
  cursor:zoom-in;
}
.ux-gallery-main img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease;transform-origin:var(--ux-ox,50%) var(--ux-oy,50%)}
/* No hover (desktop) a imagem aproxima na posição do cursor (JS define --ux-ox/oy). */
@media (hover:hover) and (pointer:fine){
  .ux-gallery-main:hover img{transform:scale(2)}
}
/* Tira de miniaturas. */
.ux-thumbs{display:flex;gap:var(--fib-8);overflow-x:auto;scrollbar-width:none;padding-bottom:var(--fib-3)}
.ux-thumbs::-webkit-scrollbar{display:none}
.ux-thumb{
  flex:0 0 auto;
  width:var(--fib-55);
  height:var(--fib-55);
  border-radius:var(--radius);
  overflow:hidden;
  border:var(--fib-2,2px) solid transparent;
  cursor:pointer;
  background:var(--c-bg);
  transition:border-color .15s ease,opacity .15s ease;
  opacity:.7;
}
.ux-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ux-thumb:hover{opacity:1}
.ux-thumb.on{border-color:var(--c-brand);opacity:1}

/* ---- Mini-cart polido (refino aditivo do drawer de carrinho) ------------- */
.ux-minicart-line{
  display:grid;
  grid-template-columns:var(--fib-55) 1fr auto;
  gap:var(--fib-13);
  align-items:start;
  padding:var(--fib-13) 0;
  border-bottom:1px solid var(--c-line);
}
.ux-minicart-line .thumb{width:var(--fib-55);height:var(--fib-55);border-radius:var(--radius);object-fit:cover;background:var(--c-bg)}
.ux-minicart-line .info{min-width:0;text-align:left}
.ux-minicart-line .info .t{font-size:var(--fib-13);font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ux-minicart-line .info .v{font-size:11px;color:var(--c-muted);margin-top:var(--fib-3)}
.ux-minicart-line .info .p{font-size:var(--fib-13);font-weight:700;margin-top:var(--fib-5)}
.ux-minicart-line .rm{
  border:0;
  background:transparent;
  color:var(--c-muted);
  cursor:pointer;
  font-size:var(--fib-21);
  width:var(--fib-34);
  height:var(--fib-34);
  border-radius:50%;
  transition:background .15s ease,color .15s ease;
}
.ux-minicart-line .rm:hover{background:#fef2f2;color:#dc2626}
/* Rodapé do mini-cart (subtotal + CTA). */
.ux-minicart-foot{padding-top:var(--fib-13);display:flex;flex-direction:column;gap:var(--fib-13)}
.ux-minicart-foot .sub{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fib-13)}
.ux-minicart-foot .sub b{font-size:var(--fib-21);font-weight:800}

/* ---- Barra de frete grátis (progresso até o limite) ---------------------- */
.ux-freeship{
  display:flex;
  flex-direction:column;
  gap:var(--fib-8);
  padding:var(--fib-13);
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--ok,#059669) 8%,var(--c-surface));
  border:1px solid color-mix(in srgb,var(--ok,#059669) 25%,transparent);
}
.ux-freeship .msg{font-size:var(--fib-13);color:var(--c-ink);text-align:center;line-height:1.45}
.ux-freeship .msg b{color:var(--ok,#059669)}
.ux-freeship .track{height:var(--fib-8);border-radius:var(--r-pill,999px);background:var(--c-line);overflow:hidden;position:relative}
.ux-freeship .track > i{display:block;height:100%;width:var(--ux-ship,0%);background:linear-gradient(90deg,var(--c-brand),var(--ok,#059669));border-radius:inherit;transition:width .5s cubic-bezier(.2,.7,.3,1)}
.ux-freeship.done .msg b{color:var(--ok,#059669)}
.ux-freeship.done .track > i{background:var(--ok,#059669)}
.ux-freeship .truck{display:inline-flex;align-items:center;gap:var(--fib-5);justify-content:center;font-weight:700}

/* ---- Prova social leve (sem citar número de reviews) --------------------- */
.ux-social{display:inline-flex;align-items:center;gap:var(--fib-8);font-size:11px;color:var(--c-muted);font-weight:600}
.ux-social .avs{display:inline-flex}
.ux-social .avs span{
  width:var(--fib-21);
  height:var(--fib-21);
  border-radius:50%;
  border:var(--fib-2,2px) solid var(--c-surface);
  background:var(--c-line);
  margin-inline-start:calc(-1 * var(--fib-8));
  background-size:cover;
  background-position:center;
}
.ux-social .avs span:first-child{margin-inline-start:0}
.ux-viewing{display:inline-flex;align-items:center;gap:var(--fib-5);font-size:11px;color:var(--c-muted);font-weight:600}
.ux-viewing .pulse{width:var(--fib-8);height:var(--fib-8);border-radius:50%;background:#22c55e;animation:ux-view-pulse 1.8s ease-out infinite}
@keyframes ux-view-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 var(--fib-8) rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ---- Wishlist (coração com micro-pop) ------------------------------------ */
.ux-wish{
  border:0;
  background:transparent;
  cursor:pointer;
  color:var(--c-muted);
  font-size:var(--fib-21);
  width:var(--fib-34);
  height:var(--fib-34);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:color .15s ease,background .15s ease,transform .12s ease;
}
.ux-wish:hover{background:color-mix(in srgb,#e11d48 10%,transparent);color:#e11d48}
.ux-wish:active{transform:scale(.85)}
.ux-wish.on{color:#e11d48}
.ux-wish.on{animation:ux-wish-pop .4s ease}
@keyframes ux-wish-pop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ---- Comparador (linha lado a lado) -------------------------------------- */
.ux-compare{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(var(--fib-144),1fr);
  gap:var(--fib-13);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:var(--fib-8);
}
.ux-compare > *{scroll-snap-align:start}
.ux-compare-col{
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  padding:var(--fib-13);
  background:var(--c-surface);
  display:flex;
  flex-direction:column;
  gap:var(--fib-8);
}
.ux-compare-col.best{border-color:var(--c-brand);box-shadow:0 0 0 1px var(--c-brand)}
.ux-compare-row{display:flex;justify-content:space-between;gap:var(--fib-8);font-size:var(--fib-13);padding:var(--fib-5) 0;border-bottom:1px solid color-mix(in srgb,var(--c-line) 60%,transparent)}
.ux-compare-row .k{color:var(--c-muted)}
.ux-compare-row .v{font-weight:600}
.ux-compare-row .yes{color:var(--ok,#059669)}
.ux-compare-row .no{color:var(--c-muted);opacity:.6}

/* ---- Carrossel de recomendações ("Você também pode gostar") -------------- */
.ux-recos{display:flex;flex-direction:column;gap:var(--fib-21)}
.ux-recos-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--fib-13)}
.ux-recos-head h3{font-size:var(--fib-21);font-weight:700;margin:0}
.ux-recos-head a{font-size:var(--fib-13);color:var(--c-brand);font-weight:600}
.ux-recos-track{
  display:flex;
  gap:var(--fib-13);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:var(--fib-8);
}
.ux-recos-track::-webkit-scrollbar{display:none}
.ux-recos-track > *{scroll-snap-align:start;flex:0 0 auto;width:min(60vw,var(--fib-233))}
/* Setas de navegação do carrossel (desktop). */
.ux-carousel{position:relative}
.ux-carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:var(--fib-34);
  height:var(--fib-34);
  border-radius:50%;
  border:0;
  background:var(--c-surface);
  color:var(--c-ink);
  box-shadow:0 var(--fib-3) var(--fib-13) rgba(17,24,39,.18);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fib-21);
  z-index:2;
  opacity:0;
  transition:opacity .2s ease,background .15s ease;
}
.ux-carousel:hover .ux-carousel-btn{opacity:1}
.ux-carousel-btn.prev{left:calc(-1 * var(--fib-13))}
.ux-carousel-btn.next{right:calc(-1 * var(--fib-13))}
.ux-carousel-btn:hover{background:var(--c-brand);color:#fff}
.ux-carousel-btn:disabled{opacity:0 !important;pointer-events:none}
@media (hover:none){.ux-carousel-btn{display:none}}

/* ---- Parcelamento / preço destacado -------------------------------------- */
.ux-pricing{display:flex;flex-direction:column;gap:var(--fib-3);text-align:left}
.ux-pricing .row1{display:flex;align-items:baseline;gap:var(--fib-8);flex-wrap:wrap}
.ux-pricing .big{font-size:var(--fib-34);font-weight:800;color:var(--c-ink);line-height:1}
.ux-pricing .old{font-size:var(--fib-21);color:var(--c-muted);text-decoration:line-through}
.ux-pricing .save{font-size:var(--fib-13);font-weight:700;color:#fff;background:#e11d48;padding:var(--fib-2,2px) var(--fib-8);border-radius:var(--r-sm,4px)}
.ux-pricing .inst{font-size:var(--fib-13);color:var(--c-muted)}
.ux-pricing .inst b{color:var(--c-ink)}
.ux-pricing .pix{font-size:var(--fib-13);color:var(--ok,#059669);font-weight:600}

/* ---- Linha de garantias / confiança (refino aditivo) --------------------- */
.ux-guarantees{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--fib-144),1fr));gap:var(--fib-13);margin-top:var(--fib-21)}
.ux-guarantee{display:flex;align-items:center;gap:var(--fib-8);padding:var(--fib-8);border-radius:var(--radius);background:var(--c-bg)}
.ux-guarantee .ic{flex:none;width:var(--fib-34);height:var(--fib-34);border-radius:50%;background:var(--c-surface);color:var(--c-brand);display:flex;align-items:center;justify-content:center;font-size:var(--fib-21)}
.ux-guarantee .tx{font-size:11px;line-height:1.4;color:var(--c-muted)}
.ux-guarantee .tx b{display:block;color:var(--c-ink);font-size:var(--fib-13)}

/* ---- prefers-reduced-motion ---------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .ux-pcard-media img,.ux-pcard-media .ux-alt,.ux-pcard-act,.ux-quickadd,
  .ux-swatch,.ux-size,.ux-gallery-main img,.ux-freeship .track > i,
  .ux-urgency .bar > i,.ux-carousel-btn,.ux-minicart-line .rm,.ux-wish{
    transition:none !important;
  }
  .ux-viewing .pulse,.ux-wish.on{animation:none !important}
  .ux-pcard-act,.ux-quickadd{opacity:1 !important;transform:none !important}
}

}

/* ===== _product-standardize.css → @layer overrides ===== */
@layer overrides {
/* =============================================================================
 * 38 · PRODUCT — PADRONIZAÇÃO (camada final, tokenizada)
 * -----------------------------------------------------------------------------
 * Camada de padronização da PÁGINA DE PRODUTO. Não redefine o grid base (que já
 * funciona em _product-page.css); aqui ficam: ritmo vertical em escala Fibonacci,
 * estados (hover/focus-visible/disabled/sold-out), tokenização (cor, raio e fonte
 * vêm SEMPRE das variáveis do tema, então qualquer loja herda), acessibilidade
 * e responsivo. Objetivo: consistência total e reuso multi-tenant, sem mudar o
 * layout atual. Tudo escopado em .pd / seções do produto para não vazar.
 * ===========================================================================*/

/* ============================================================================
 * 1 · CONTÊINER PRINCIPAL DO PRODUTO (.pd)
 * ==========================================================================*/
.pd {
  margin-top: var(--fib-21);
  align-items: start;
}
/* Coluna de informações: ritmo vertical consistente entre os blocos. */
.pd > div:last-child > * { margin-top: 0; }
.pd > div:last-child > * + * { margin-top: var(--fib-13); }

/* Título do produto: hierarquia clara, sem herdar tamanhos aleatórios. */
.pd h2 {
  font-size: clamp(var(--fib-21), 3.5vw, var(--fib-34));
  line-height: 1.2;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0;
  letter-spacing: .01em;
}

/* Avaliação inline (estrelas + contagem) logo abaixo do título. */
.pd .rev-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--fib-5);
  font-size: var(--fib-13);
  color: var(--c-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.pd .rev-inline:hover { color: var(--c-brand); }

/* ============================================================================
 * 2 · PREÇO
 * ==========================================================================*/
.pd .price {
  font-size: clamp(var(--fib-21), 4vw, var(--fib-34));
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.1;
  margin: var(--fib-13) 0;
  letter-spacing: -.01em;
}
/* Preço "de/por" (riscado + atual) — padrão, caso o tema use. */
.pd .price .was {
  font-size: var(--fib-13);
  font-weight: 500;
  color: var(--c-muted);
  text-decoration: line-through;
  margin-inline-end: var(--fib-8);
}
.pd .price .off {
  font-size: var(--fib-13);
  font-weight: 700;
  color: var(--c-danger);
  margin-inline-start: var(--fib-8);
}
/* Parcelamento (texto auxiliar sob o preço). */
.pd .installments {
  font-size: var(--fib-13);
  color: var(--c-muted);
  margin-top: calc(var(--fib-5) * -1);
}
.pd .installments b { color: var(--c-ink); font-weight: 600; }

/* ============================================================================
 * 3 · DESCRIÇÃO
 * ==========================================================================*/
.pd-desc {
  text-align: justify;
  color: var(--c-muted);
  line-height: 1.7;
  font-size: var(--fib-13);
  margin: var(--fib-13) 0 var(--fib-21);
  white-space: pre-line;
}
.pd-desc:empty { display: none; margin: 0; }

/* ============================================================================
 * 4 · GALERIA — imagem principal + miniaturas
 * ==========================================================================*/
.pd .imgwrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg);
  aspect-ratio: 1 / 1;
}
.pd .imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: transform .4s ease;
}
.pd .imgwrap:hover img { transform: scale(1.03); }
/* Placeholder (produto sem foto): inicial centralizada. */
.pd .big {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fib-89);
  font-weight: 800;
  color: var(--c-line);
  background: var(--c-bg);
  border-radius: var(--radius);
}
/* Selo "Esgotado" sobre a foto. */
.pd .badge-soldout {
  position: absolute;
  top: var(--fib-13);
  left: var(--fib-13);
  z-index: 2;
  background: var(--c-ink);
  color: var(--c-surface);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: var(--fib-5) var(--fib-13);
  border-radius: var(--r-pill, 999px);
}

/* Miniaturas: faixa rolável, com seleção ativa anelada na cor da marca. */
.pd .thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fib-8);
  margin-top: var(--fib-8);
}
.pd .thumbs .t {
  width: var(--fib-55);
  height: var(--fib-55);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--c-bg);
  transition: border-color .15s ease, transform .15s ease;
}
.pd .thumbs .t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd .thumbs .t:hover { transform: translateY(-2px); }
.pd .thumbs .t.on { border-color: var(--c-brand); }
.pd .thumbs .t:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* ============================================================================
 * 5 · FORMULÁRIO DE COMPRA — variantes, quantidade, CTA
 * ==========================================================================*/
.pd form { margin: 0; }
/* Rótulos dos campos (Opção, Quantidade): pequenos, em caixa-alta discreta. */
.pd form label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-muted);
  margin: var(--fib-13) 0 var(--fib-5);
}
/* Seletor de variante: mesma altura/estilo do input padrão. */
.pd select {
  width: 100%;
  height: var(--control-h-lg);
  padding: 0 var(--fib-13);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fib-13);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pd select:focus { outline: none; border-color: var(--c-brand); box-shadow: var(--focus-ring); }

/* ---- SELETOR DE VARIANTE estilo Pinha/Shopify: grupos por opção -----------
   "Cor" → swatches por imagem (selecionar troca a foto); "Tamanho"/demais →
   botões. Combinação resolve a variante. */
.opt-group { margin: var(--fib-21) 0; }
.opt-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--fib-8); }
.opt-label .opt-name { color: var(--c-muted); }
.opt-label .opt-val { color: var(--c-ink); }
.opt-choices { display: flex; flex-wrap: wrap; gap: var(--fib-8); }
/* Swatch de cor (imagem) */
.opt-sw { width: var(--fib-55); height: var(--fib-55); padding: 0; border: 2px solid var(--c-line); border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--c-bg); transition: border-color .15s ease, transform .15s ease; }
.opt-sw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opt-sw:hover { transform: translateY(-2px); border-color: var(--c-brand); }
.opt-sw.on { border-color: var(--c-brand); box-shadow: 0 0 0 1px var(--c-brand); }
/* Botão de tamanho/opção */
.opt-pill { min-width: var(--control-h); height: var(--control-h); padding: 0 var(--fib-13); border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface); color: var(--c-ink); font-size: var(--fib-13); font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.opt-pill:hover { border-color: var(--c-brand); }
.opt-pill.on { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
/* Indisponível para a combinação atual selecionada */
.opt-sw.soldopt { opacity: .35; }
.opt-pill.soldopt { opacity: .45; text-decoration: line-through; }

/* Linha de quantidade: rótulo + controle alinhados. */
.pd .qty-row { margin: var(--fib-13) 0; }
.pd .qty-ctl { height: var(--control-h-lg); }
.pd .qty-ctl button { width: var(--control-h-lg); height: var(--control-h-lg); }
.pd .qty-ctl input { height: var(--control-h-lg); }

/* CTA "Adicionar ao carrinho": destaque máximo, largura cheia até um teto.
   :not(.btn-control) → NÃO afeta o botão "Calcular" da calculadora de frete
   (que é um .btn-control dentro de um <form class="ship-est">). */
.pd .add-cart,
.pd form > .btn:not(.btn-control) {
  width: 100%;
  max-width: var(--fib-377);
  height: var(--control-h-lg);
  margin-top: var(--fib-21);
  font-size: var(--fib-13);
  font-weight: 700;
}
.pd .btn:disabled { opacity: .55; cursor: not-allowed; }

/* Aviso de reposição (back-in-stock) quando esgotado. */
.pd .bis-form { margin-top: var(--fib-13); }
.pd .bis-form .news-row { max-width: var(--fib-377); }

/* ============================================================================
 * 6 · BOTÃO FAVORITAR (wishlist) na página de produto
 * ==========================================================================*/
.pd .wish-lg {
  display: inline-flex;
  align-items: center;
  gap: var(--fib-8);
  width: auto;
  height: var(--control-h);
  padding: 0 var(--fib-21);
  margin-top: var(--fib-13);
  background: transparent;
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--radius);
  color: var(--c-ink);
  font-size: var(--fib-13);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pd .wish-lg i { color: var(--c-muted); transition: color .15s ease, transform .2s ease; }
.pd .wish-lg:hover { border-color: var(--c-brand); color: var(--c-brand); }
.pd .wish-lg:hover i { color: var(--c-brand); }
/* Estado favoritado (script global marca aria-pressed=true / classe .on). */
.pd .wish-lg.on i,
.pd .wish-lg[aria-pressed="true"] i { color: var(--c-danger); transform: scale(1.1); }
.pd .wish-lg:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* ============================================================================
 * 7 · CALCULADORA DE FRETE (na página de produto) — usa .ship-calc/.field-inline
 * ==========================================================================*/
.pd .ship-calc {
  margin-top: var(--fib-21);
  padding-top: var(--fib-21);
  border-top: var(--line-w) solid var(--c-line);
}

/* ============================================================================
 * 8 · AVALIAÇÕES (resumo, lista, formulário)
 * ==========================================================================*/
.rev-sec { margin-top: var(--fib-55); }
.rev-summary {
  display: flex;
  align-items: center;
  gap: var(--fib-8);
  font-size: var(--fib-21);
  margin-bottom: var(--fib-21);
}
.rev-summary strong { color: var(--c-ink); }
.rev-list { display: flex; flex-direction: column; gap: var(--fib-21); }
.rev-item {
  padding: var(--fib-21);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
}
.rev-head {
  display: flex;
  align-items: center;
  gap: var(--fib-8);
  flex-wrap: wrap;
  margin-bottom: var(--fib-8);
  font-size: var(--fib-13);
}
.rev-head strong { color: var(--c-ink); font-weight: 700; }
.rev-title { font-weight: 700; color: var(--c-ink); margin-bottom: var(--fib-3); }
.rev-item p { margin: 0; color: var(--c-muted); line-height: 1.6; font-size: var(--fib-13); }

/* Formulário de avaliação (dentro de <details>). */
.rev-form-wrap { margin-top: var(--fib-21); }
.rev-form-wrap > summary {
  list-style: none;
  cursor: pointer;
  width: auto;
  max-width: var(--fib-233);
}
.rev-form-wrap > summary::-webkit-details-marker { display: none; }
.rev-form {
  margin-top: var(--fib-21);
  padding: var(--fib-21);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  display: flex;
  flex-direction: column;
  gap: var(--fib-5);
}
.rev-form .row { display: flex; gap: var(--fib-13); flex-wrap: wrap; }
.rev-form .row > div { flex: 1 1 var(--fib-144); }
.rev-form label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-muted);
  margin-top: var(--fib-8);
}
.rev-form input,
.rev-form select,
.rev-form textarea {
  width: 100%;
  padding: var(--fib-8) var(--fib-13);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: var(--fib-13);
  font-family: var(--font);
}
.rev-form input:focus,
.rev-form select:focus,
.rev-form textarea:focus { outline: none; border-color: var(--c-brand); box-shadow: var(--focus-ring); }
.rev-form textarea { min-height: var(--fib-89); resize: vertical; }
.rev-form > .btn { margin-top: var(--fib-13); }

/* ============================================================================
 * 9 · SEÇÕES SECUNDÁRIAS (relacionados, vistos recentemente)
 * ==========================================================================*/
.pd ~ .sec,
.rev-sec,
.recent-sec,
section.sec[style] { margin-top: var(--fib-55); }
.recent-sec .sec-title,
.rev-sec .sec-title { margin-bottom: var(--fib-21); }

/* Cartões dessas seções herdam o card padrão; aqui só o ritmo do grid. */
.recent-sec .grid,
.rev-sec ~ .sec .grid { gap: var(--fib-21); }

/* ============================================================================
 * 10 · LIGHTBOX (zoom da imagem)
 * ==========================================================================*/
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 90);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--fib-55) var(--fib-21);
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(2px);
}
.lightbox.on { display: flex; animation: lb-in .2s ease; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox img {
  max-width: min(92vw, var(--fib-610));
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 var(--fib-13) var(--fib-55) rgba(0, 0, 0, .5);
  user-select: none;
}
/* Botão fechar (X) — canto superior direito. */
.lightbox .lb-close {
  position: absolute;
  top: var(--fib-21);
  right: var(--fib-21);
  width: var(--fib-34);
  height: var(--fib-34);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: var(--fib-21);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.lightbox .lb-close:hover { background: rgba(255, 255, 255, .28); transform: rotate(90deg); }
/* Setas de navegação (passar imagens para o lado). */
.lightbox .lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--fib-55);
  height: var(--fib-55);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: var(--fib-21);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.lightbox .lb-nav:hover { background: rgba(255, 255, 255, .3); }
.lightbox .lb-prev { left: var(--fib-21); }
.lightbox .lb-next { right: var(--fib-21); }
/* Contador "1 / 4". */
.lightbox .lb-count {
  position: absolute;
  bottom: var(--fib-21);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .85);
  font-size: var(--fib-13);
  font-weight: 600;
  letter-spacing: .05em;
  background: rgba(0, 0, 0, .35);
  padding: var(--fib-5) var(--fib-13);
  border-radius: var(--r-pill, 999px);
}
@media (max-width: 480px) {
  .lightbox .lb-nav { width: var(--fib-34); height: var(--fib-34); font-size: var(--fib-13); }
  .lightbox .lb-prev { left: var(--fib-8); }
  .lightbox .lb-next { right: var(--fib-8); }
  .lightbox img { max-width: 96vw; }
}

/* ============================================================================
 * 11 · ACESSIBILIDADE — foco visível consistente em todos os controles do produto
 * ==========================================================================*/
.pd a:focus-visible,
.pd button:focus-visible,
.pd select:focus-visible,
.pd input:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

/* ============================================================================
 * 12 · RESPONSIVO
 * ==========================================================================*/
@media (max-width: 768px) {
  .pd { margin-top: var(--fib-13); }
  .pd h2 { font-size: var(--fib-21); }
  .pd .price { font-size: var(--fib-21); }
  .pd .add-cart,
  .pd form > .btn:not(.btn-control) { max-width: 100%; }
  .pd .wish-lg { width: 100%; justify-content: center; }
  .pd .ship-calc { max-width: 100%; }
  .cart-coupon { max-width: 100%; }
  .rev-form .row { flex-direction: column; gap: var(--fib-5); }
}
@media (max-width: 480px) {
  .pd .thumbs .t { width: var(--fib-34); height: var(--fib-34); }
  .rev-item { padding: var(--fib-13); }
  .rev-summary { font-size: var(--fib-13); }
}

/* ============================================================================
 * 13 · MOVIMENTO REDUZIDO — respeita prefers-reduced-motion
 * ==========================================================================*/
@media (prefers-reduced-motion: reduce) {
  .pd .imgwrap img,
  .pd .thumbs .t,
  .pd .wish-lg,
  .pd .wish-lg i { transition: none; }
  .pd .imgwrap:hover img { transform: none; }
}

/* ============================================================================
 * 14 · GALERIA STICKY (desktop) — a coluna da imagem acompanha a rolagem
 * enquanto a coluna de informações é mais longa. Melhora a experiência de
 * compra sem alterar o grid. Desativa no mobile (coluna única).
 * ==========================================================================*/
@media (min-width: 921px) {
  .pd > div:first-child {
    position: sticky;
    top: var(--fib-21);
    align-self: start;
  }
}

/* ============================================================================
 * 15 · LINHA DE CONFIANÇA / GARANTIAS (opcional no tema) — usa .trust-row
 * dos componentes; aqui só o encaixe no produto.
 * ==========================================================================*/
.pd .trust-row { margin-top: var(--fib-21); }
.pd .trust-item i { color: var(--c-brand); }

/* ============================================================================
 * 16 · DISPONIBILIDADE / ESTOQUE — texto de status padronizado por estado
 * ==========================================================================*/
.pd .stock {
  display: inline-flex;
  align-items: center;
  gap: var(--fib-5);
  font-size: var(--fib-13);
  font-weight: 600;
  margin: var(--fib-8) 0;
}
.pd .stock::before {
  content: "";
  width: var(--fib-8);
  height: var(--fib-8);
  border-radius: 50%;
  background: currentColor;
}
.pd .stock.in { color: var(--c-ok); }
.pd .stock.low { color: var(--c-warn); }
.pd .stock.out { color: var(--c-danger); }

/* ============================================================================
 * 17 · TABELA DE ESPECIFICAÇÕES (ficha técnica) — caso o tema renderize specs
 * ==========================================================================*/
.pd .specs {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--fib-21);
  font-size: var(--fib-13);
}
.pd .specs th,
.pd .specs td {
  text-align: left;
  padding: var(--fib-8) var(--fib-13);
  border-bottom: var(--line-w) solid var(--c-line);
  vertical-align: top;
}
.pd .specs th {
  width: 38%;
  color: var(--c-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .03em;
}
.pd .specs td { color: var(--c-ink); }
.pd .specs tr:last-child th,
.pd .specs tr:last-child td { border-bottom: 0; }

/* ============================================================================
 * 18 · COMPARTILHAR (na página de produto, se o tema exibir) — ícones em pílula
 * ==========================================================================*/
.pd .pd-share {
  display: flex;
  align-items: center;
  gap: var(--fib-8);
  margin-top: var(--fib-21);
  padding-top: var(--fib-21);
  border-top: var(--line-w) solid var(--c-line);
}
.pd .pd-share span { font-size: var(--fib-13); color: var(--c-muted); }
.pd .pd-share a {
  width: var(--control-h);
  height: var(--control-h);
  border-radius: 50%;
  border: var(--line-w) solid var(--c-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.pd .pd-share a:hover { border-color: var(--c-brand); color: var(--c-brand); transform: translateY(-2px); }

/* ============================================================================
 * 19 · ACCORDION DE DETALHES (descrição longa/entrega/devolução) — reaproveita
 * o .accordion global; aqui só o respiro dentro do produto.
 * ==========================================================================*/
.pd .accordion { margin-top: var(--fib-21); }

/* ============================================================================
 * 20 · DARK MODE / ALTA DENSIDADE — herdados por token, sem regra própria.
 * As cores vêm de var(--c-*), então [data-theme="dark"] do tema já reflete
 * aqui automaticamente. Só ajustamos a sombra do lightbox para não "sumir".
 * ==========================================================================*/
[data-theme="dark"] .pd .imgwrap,
[data-theme="dark"] .pd .big { background: color-mix(in srgb, var(--c-ink) 8%, var(--c-bg)); }
[data-theme="dark"] .lightbox { background: rgba(0, 0, 0, .9); }

/* ============================================================================
 * 21 · IMPRESSÃO — esconde controles interativos, mostra só o essencial
 * ==========================================================================*/
@media print {
  .pd .thumbs,
  .pd .wish-lg,
  .pd .ship-calc,
  .pd .add-cart,
  .lightbox,
  .recent-sec { display: none !important; }
  .pd { display: block; }
  .pd .imgwrap { max-width: var(--fib-377); }
}

}

/* ===== _cart.css → @layer overrides ===== */
@layer overrides {
/* =============================================================================
 * 40 · CART — página do carrinho (redesign minimalista e moderno)
 * -----------------------------------------------------------------------------
 * Layout em 2 colunas: lista de itens (esquerda) + resumo do pedido sticky
 * (direita). Tudo tokenizado (cor/raio/fonte do tema), escala Fibonacci, com
 * estados, responsivo e dark-mode automático. Substitui a antiga tabela.
 * ===========================================================================*/

/* ============================================================================
 * 1 · CONTÊINER + CABEÇALHO
 * ==========================================================================*/
.cart {
  margin-top: var(--fib-13);
}
.cart-head {
  display: flex;
  align-items: baseline;
  gap: var(--fib-13);
  margin-bottom: var(--fib-21);
  padding-bottom: var(--fib-13);
  border-bottom: var(--line-w) solid var(--c-line);
}
.cart-title {
  font-size: clamp(var(--fib-21), 4vw, var(--fib-34));
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--c-ink);
  margin: 0;
}
.cart-count {
  font-size: var(--fib-13);
  font-weight: 600;
  color: var(--c-muted);
  background: var(--c-bg);
  padding: var(--fib-3) var(--fib-13);
  border-radius: var(--r-pill, 999px);
}

/* ============================================================================
 * 2 · GRID DE 2 COLUNAS (itens + resumo)
 * ==========================================================================*/
.cart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fib-377);
  gap: var(--fib-55);
  align-items: start;
}

/* ============================================================================
 * 3 · LISTA DE ITENS
 * ==========================================================================*/
.cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--fib-13);
}

/* Linha do item: mídia + info + quantidade + total + remover. */
.cart-line {
  display: grid;
  grid-template-columns: var(--fib-89) minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--fib-21);
  padding: var(--fib-13);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cart-line:hover {
  border-color: color-mix(in srgb, var(--c-brand) 30%, var(--c-line));
  box-shadow: 0 var(--fib-3) var(--fib-13) color-mix(in srgb, var(--c-ink) 5%, transparent);
}
.cart-line.is-out {
  opacity: .7;
  border-color: color-mix(in srgb, var(--c-danger) 30%, var(--c-line));
}

/* Mídia (foto do produto). */
.cl-media {
  width: var(--fib-89);
  height: var(--fib-89);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.cl-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cl-noimg {
  font-size: var(--fib-34);
  font-weight: 800;
  color: var(--c-line);
}

/* Informações do item. */
.cl-info {
  display: flex;
  flex-direction: column;
  gap: var(--fib-3);
  min-width: 0;
}
.cl-title {
  font-size: var(--fib-13);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.cl-variant {
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 500;
}
.cl-unit {
  font-size: 11px;
  color: var(--c-muted);
  margin-top: var(--fib-3);
}
.cl-out {
  display: inline-flex;
  align-items: center;
  gap: var(--fib-5);
  font-size: 11px;
  font-weight: 700;
  color: var(--c-danger);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top: var(--fib-5);
}

/* Controle de quantidade (− valor +). */
.cl-qty {
  display: inline-flex;
  align-items: center;
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg);
  flex: none;
}
.cl-qty form { margin: 0; display: flex; }
.cl-qty button {
  width: var(--fib-34);
  height: var(--fib-34);
  border: 0;
  background: transparent;
  color: var(--c-ink);
  font-size: var(--fib-21);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.cl-qty button:hover { background: var(--c-brand); color: #fff; }
.cl-qty button:disabled { opacity: .4; cursor: not-allowed; }
.cl-qty button:disabled:hover { background: transparent; color: var(--c-ink); }
.cl-n {
  min-width: var(--fib-34);
  text-align: center;
  font-size: var(--fib-13);
  font-weight: 700;
  color: var(--c-ink);
  border-left: var(--line-w) solid var(--c-line);
  border-right: var(--line-w) solid var(--c-line);
  height: var(--fib-34);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Total da linha (preço × quantidade). */
.cl-line-total {
  font-size: var(--fib-13);
  font-weight: 800;
  color: var(--c-ink);
  white-space: nowrap;
  min-width: var(--fib-55);
  text-align: right;
}

/* Botão remover (ícone de lixeira). */
.cl-remove { margin: 0; }
.cl-remove button {
  width: var(--fib-34);
  height: var(--fib-34);
  border: 0;
  background: transparent;
  color: var(--c-muted);
  font-size: var(--fib-13);
  cursor: pointer;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.cl-remove button:hover {
  background: color-mix(in srgb, var(--c-danger) 10%, transparent);
  color: var(--c-danger);
}

/* ============================================================================
 * 4 · RESUMO DO PEDIDO (coluna direita, sticky)
 * ==========================================================================*/
.cart-aside { position: sticky; top: var(--fib-21); }
.summary {
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  padding: var(--fib-21);
  display: flex;
  flex-direction: column;
  gap: var(--fib-13);
}
.summary-h {
  font-size: var(--fib-13);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-muted);
  margin: 0 0 var(--fib-5);
}

/* O cupom e a calculadora de frete vivem dentro do resumo. */
.summary .cart-coupon { max-width: 100%; margin-top: 0; }
.summary .ship-calc { margin: 0; max-width: 100%; padding-top: var(--fib-13); border-top: var(--line-w) solid var(--c-line); }

/* Linhas de valores (subtotal, desconto, frete). */
.summary-rows {
  display: flex;
  flex-direction: column;
  gap: var(--fib-8);
  padding-top: var(--fib-13);
  border-top: var(--line-w) solid var(--c-line);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--fib-13);
  font-size: var(--fib-13);
  color: var(--c-ink);
}
.summary-row > span:first-child { color: var(--c-muted); }
.summary-row.text-ok > span { color: var(--c-ok); }

/* Total em destaque. */
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--fib-13);
  margin-top: var(--fib-5);
  border-top: var(--line-w) solid var(--c-line);
  font-size: var(--fib-13);
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.summary-total .st-value {
  font-size: var(--fib-21);
  font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -.01em;
}

/* CTA finalizar — botão principal, largura cheia. */
.summary-cta {
  width: 100%;
  height: var(--control-h-lg);
  margin-top: var(--fib-5);
  font-weight: 700;
  font-size: var(--fib-13);
}
.summary-warn {
  display: flex;
  align-items: center;
  gap: var(--fib-8);
  font-size: var(--fib-13);
  margin: var(--fib-5) 0 0;
}

/* Link "continuar comprando". */
.cart-continue {
  display: inline-flex;
  align-items: center;
  gap: var(--fib-5);
  justify-content: center;
  font-size: var(--fib-13);
  color: var(--c-muted);
  margin-top: var(--fib-3);
  transition: color .15s ease;
}
.cart-continue:hover { color: var(--c-brand); }

/* Selos de confiança. */
.summary-trust {
  display: flex;
  flex-direction: column;
  gap: var(--fib-8);
  padding-top: var(--fib-13);
  margin-top: var(--fib-5);
  border-top: var(--line-w) solid var(--c-line);
}
.summary-trust span {
  display: inline-flex;
  align-items: center;
  gap: var(--fib-8);
  font-size: 11px;
  color: var(--c-muted);
}
.summary-trust i { color: var(--c-brand); width: var(--fib-13); text-align: center; }

/* ============================================================================
 * 5 · ESTADO VAZIO
 * ==========================================================================*/
.cart-empty {
  text-align: center;
  padding: var(--fib-89) var(--fib-21);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fib-13);
  max-width: var(--fib-377);
  margin: 0 auto;
}
.cart-empty .ce-ic {
  width: var(--fib-89);
  height: var(--fib-89);
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-line);
  font-size: var(--fib-34);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-empty h1 {
  font-size: var(--fib-21);
  font-weight: 700;
  color: var(--c-ink);
  margin: 0;
}
.cart-empty p {
  font-size: var(--fib-13);
  color: var(--c-muted);
  margin: 0 0 var(--fib-8);
  line-height: 1.6;
}
.cart-empty .btn { width: auto; }

/* ============================================================================
 * 6 · RESPONSIVO
 * ==========================================================================*/
@media (max-width: 900px) {
  /* Resumo passa para baixo da lista (coluna única). */
  .cart-grid { grid-template-columns: 1fr; gap: var(--fib-21); }
  .cart-aside { position: static; }
}
@media (max-width: 560px) {
  /* Linha do item compacta: mídia + info em cima, controles embaixo. */
  .cart-line {
    grid-template-columns: var(--fib-55) minmax(0, 1fr) auto;
    grid-template-areas:
      "media info remove"
      "media qty total";
    gap: var(--fib-8) var(--fib-13);
    row-gap: var(--fib-8);
  }
  .cl-media { grid-area: media; width: var(--fib-55); height: var(--fib-55); }
  .cl-info { grid-area: info; }
  .cl-qty { grid-area: qty; justify-self: start; }
  .cl-line-total { grid-area: total; justify-self: end; align-self: center; }
  .cl-remove { grid-area: remove; justify-self: end; }
  .cl-unit { display: none; }
}
@media (max-width: 380px) {
  .cl-qty button { width: var(--fib-21); }
  .cl-n { min-width: var(--fib-21); }
}

/* ============================================================================
 * 7 · DARK MODE — herdado por token; só ajustes finos de contraste
 * ==========================================================================*/
[data-theme="dark"] .cart-line { background: color-mix(in srgb, var(--c-ink) 4%, var(--c-surface)); }
[data-theme="dark"] .summary { background: color-mix(in srgb, var(--c-ink) 4%, var(--c-surface)); }
[data-theme="dark"] .cl-media,
[data-theme="dark"] .cl-qty { background: color-mix(in srgb, var(--c-ink) 8%, var(--c-bg)); }

/* ============================================================================
 * 8 · DENSIDADE COMPACTA (opcional via data-density) — espaçamentos menores
 * ==========================================================================*/
[data-density="compact"] .cart-line { padding: var(--fib-8); gap: var(--fib-13); }
[data-density="compact"] .summary { padding: var(--fib-13); }
[data-density="compact"] .cart-items { gap: var(--fib-8); }

/* ============================================================================
 * 9 · ACESSIBILIDADE — foco visível nos controles do carrinho
 * ==========================================================================*/
.cart-line button:focus-visible,
.summary a:focus-visible,
.summary button:focus-visible,
.summary input:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

/* ============================================================================
 * 10 · IMPRESSÃO — recibo limpo do carrinho
 * ==========================================================================*/
@media print {
  .cart-grid { grid-template-columns: 1fr; }
  .cl-qty button, .cl-remove, .summary-cta, .cart-continue, .summary-trust,
  .summary .cart-coupon, .summary .ship-calc { display: none !important; }
  .cart-line, .summary { border-color: #ccc; box-shadow: none; }
}

/* ============================================================================
 * 11 · BARRA "FRETE GRÁTIS" — incentivo de progresso até o limite (opcional)
 * Renderizada quando o tema/loja define um limite de frete grátis; o JS ajusta
 * a largura de .fsp-fill via --fsp (0–100). Tokenizada e reutilizável.
 * ==========================================================================*/
.free-ship {
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  padding: var(--fib-13);
  margin-bottom: var(--fib-13);
  display: flex;
  flex-direction: column;
  gap: var(--fib-8);
}
.free-ship .fsp-msg {
  font-size: var(--fib-13);
  color: var(--c-ink);
  display: flex;
  align-items: center;
  gap: var(--fib-8);
}
.free-ship .fsp-msg i { color: var(--c-brand); }
.free-ship .fsp-msg b { color: var(--c-brand); font-weight: 700; }
.free-ship.is-free .fsp-msg { color: var(--c-ok); }
.free-ship.is-free .fsp-msg i { color: var(--c-ok); }
.fsp-track {
  height: var(--fib-8);
  border-radius: var(--r-pill, 999px);
  background: var(--c-bg);
  overflow: hidden;
}
.fsp-fill {
  height: 100%;
  width: calc(var(--fsp, 0) * 1%);
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-brand) 70%, #fff), var(--c-brand));
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.free-ship.is-free .fsp-fill { background: var(--c-ok); }

/* ============================================================================
 * 12 · OBSERVAÇÃO DO PEDIDO (campo opcional de recado) — estilo padrão
 * ==========================================================================*/
.cart-note { margin-top: var(--fib-13); }
.cart-note summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--fib-13);
  color: var(--c-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--fib-5);
}
.cart-note summary::-webkit-details-marker { display: none; }
.cart-note summary:hover { color: var(--c-brand); }
.cart-note textarea {
  width: 100%;
  margin-top: var(--fib-8);
  min-height: var(--fib-55);
  padding: var(--fib-8) var(--fib-13);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: var(--fib-13);
  resize: vertical;
}
.cart-note textarea:focus { outline: none; border-color: var(--c-brand); box-shadow: var(--focus-ring); }

/* ============================================================================
 * 13 · FAIXA "VOCÊ TAMBÉM PODE GOSTAR" no rodapé do carrinho — espaçamento
 * ==========================================================================*/
.cart-reco { margin-top: var(--fib-55); padding-top: var(--fib-21); border-top: var(--line-w) solid var(--c-line); }
.cart-reco .sec-title { margin-bottom: var(--fib-21); }

/* ============================================================================
 * 14 · MICRO-INTERAÇÕES — entrada suave das linhas + respeito a reduced-motion
 * ==========================================================================*/
.cart-line { animation: cl-in .25s ease both; }
@keyframes cl-in { from { opacity: 0; transform: translateY(var(--fib-5)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cart-line, .fsp-fill { animation: none; transition: none; }
}

}

/* ===== _tweaks.css → @layer overrides ===== */
@layer overrides {
/* =============================================================================
 * 23 · TWEAKS — ajustes finos (late cascade, antes do responsivo): botões em 1
 * linha, breadcrumbs padrão, páginas de conteúdo centradas, descrição do produto
 * justificada, FAQ com respiro, newsletter alinhada. Tokens da loja.
 * ===========================================================================*/

/* ---- Grade de produtos: cards de altura igual + BOTÃO alinhado na horizontal -
   `.grid` estica os cards (align-items:stretch) e o preço+botão são empurrados
   para a base (margin-top:auto) — assim o botão fica na MESMA linha em toda a
   fileira, independente do tamanho do título. */
.grid { align-items: stretch; }
.card { height: 100%; }
.card .price { margin-top: auto; }
.card form, .card > a.btn, .card > .btn { margin-top: 0; }

/* ---- Botões: padrão único — texto MAIÚSCULO, fonte 13, sem quebra ---------- */
.btn { white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: var(--fib-13); }
.btn.sm, .btn.xs, .btn--sm, .btn--xs { font-size: 11px; }
.btn.lg, .btn--lg { font-size: var(--fib-21); }
/* "Adicionar ao carrinho": estava 21px (gigante) — volta ao tamanho padrão. */
.pd form > .btn, .pd .btn, .add-cart { font-size: var(--fib-13); }
.add-cart { width: auto; min-width: var(--fib-233); }

/* ---- Títulos de página + breadcrumbs SEMPRE em MAIÚSCULO ------------------
   Pedido do lojista: padronizar títulos de página (conteúdo, coleção, blog,
   seções) e a trilha de navegação em caixa-alta, com leve espaçamento de letra
   para legibilidade. */
.crumbs, .crumbs a, .crumbs .here,
.page-content h1, .blog-hero h1, .post-head h1,
.sec-title { text-transform: uppercase; letter-spacing: .04em; }

/* ---- Breadcrumbs: padrão e com margem consistente em TODAS as páginas ------ */
.crumbs { margin: var(--fib-13) 0 var(--fib-21); font-size: var(--fib-13); color: var(--c-muted); display: flex; flex-wrap: wrap; align-items: center; gap: var(--fib-5); }
.crumbs a { color: var(--c-muted); }
.crumbs a:hover { color: var(--c-brand); }
.crumbs span { opacity: .55; }
.crumbs .here { color: var(--c-ink); font-weight: 600; opacity: 1; }

/* ---- Tipografia PADRÃO de páginas e textos longos (prose) -----------------
   Escala única para Sobre/Políticas/FAQ/Blog: corpo no tamanho-base do tema
   (13px) e títulos numa escala consistente — antes o corpo estava 21px (grande). */
.prose { font-size: var(--fib-13); line-height: 1.8; }
.prose h1 { font-size: var(--fib-34); line-height: 1.2; margin: 0 0 var(--fib-21); }
.prose h2 { font-size: var(--fib-21); line-height: 1.3; margin: var(--fib-34) 0 var(--fib-13); }
.prose h3 { font-size: var(--fib-13); text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); margin: var(--fib-21) 0 var(--fib-8); }
.prose p, .prose li { font-size: var(--fib-13); line-height: 1.8; }
.prose blockquote { font-size: var(--fib-13); }

/* ---- Páginas de conteúdo (Sobre/Informações/FAQ/Políticas) ----------------
   Conteúdo centralizado no MEIO da página: coluna centrada + títulos centrados;
   o corpo fica justificado para leitura confortável de textos longos. */
.page-content { max-width: min(70ch, 100%); margin-inline: auto; }
.page-content h1, .page-content h2, .page-content h3 { text-align: center; }
.page-content > p, .page-content li { text-align: justify; }
.page-content ul, .page-content ol { display: inline-block; text-align: left; }
.page-content.prose { font-size: var(--fib-13); }
.page-content .lead, .page-content .intro { text-align: center; color: var(--c-muted); }

/* ---- Descrição do produto: justificada ------------------------------------ */
.pd-desc { text-align: justify; color: var(--c-muted); line-height: 1.7; margin: var(--fib-13) 0 var(--fib-21); }

/* ---- FAQ (accordion): margens e espaçamentos ------------------------------ */
.accordion { margin: var(--fib-21) 0; border-top: 1px solid var(--c-line); }
.accordion .acc-item { border-bottom: 1px solid var(--c-line); }
.accordion summary { padding: var(--fib-13) var(--fib-8); font-size: var(--fib-13); font-weight: 600; gap: var(--fib-21); }
.accordion .acc-body { padding: 0 var(--fib-8) var(--fib-21); }
.accordion .acc-body p { margin: 0 0 var(--fib-13); line-height: 1.7; }
.accordion .acc-body p:last-child { margin-bottom: 0; }

/* ---- Calculadora de frete por CEP -----------------------------------------
   Layout (input + botão na mesma linha) e input vêm das classes GLOBAIS
   .field-inline + .input-std/.input-std--hl (ver _components.css). Aqui só o
   rótulo, o resultado e os detalhes específicos do widget. */
.ship-calc { margin: var(--fib-21) 0; max-width: var(--fib-377); }
.ship-calc-label { display: block; font-size: var(--fib-13); font-weight: 600; color: var(--c-ink); margin-bottom: var(--fib-8); text-transform: uppercase; letter-spacing: .04em; }
.ship-calc-label i { color: var(--c-brand); margin-inline-end: var(--fib-5); }
/* CEP em MAIÚSCULO (inclui o placeholder "DIGITE SEU CEP"). */
.ship-est .input-std { text-transform: uppercase; }
.ship-result { font-size: var(--fib-13); color: var(--c-muted); margin-top: var(--fib-8); min-height: var(--fib-21); }
.ship-result strong { color: var(--c-ink); }

/* ---- Espaçamento PADRÃO entre a última seção e o rodapé (todas as páginas) -- */
main > *:last-child { margin-bottom: 0; }
.site-foot { margin-top: var(--fib-89); }

/* ---- Cupom de desconto: input IDÊNTICO ao do CEP + alinhado ao botão -------
   Usa .input-std/.field-inline (mesma base do CEP) → mesmo tamanho garantido.
   Código do cupom sempre em maiúsculo. */
.cart-coupon { max-width: var(--fib-377); margin-top: var(--fib-13); }
.cart-coupon .input-std { text-transform: uppercase; }
.coupon-applied { display: flex; gap: var(--fib-8); align-items: center; margin-top: var(--fib-13); }
.coupon-err { margin-top: var(--fib-5); font-size: var(--fib-13); }

/* ---- NOME DO PRODUTO em MAIÚSCULO — EM TODOS OS LOCAIS (CSS global) --------
   Cobre todo lugar onde o nome de produto aparece: cartões (home, coleções,
   relacionados, vistos, busca, favoritos), página de produto, carrinho (linha
   da tabela) e o mini-carrinho (drawer). Aplica a qualquer loja do tema. */
.card a strong, .card strong,
.pd h2,
.recent-sec strong,
.litem strong,
.cd-title,
.cart-line strong,
.ord-item strong { text-transform: uppercase; letter-spacing: .02em; }
.wish-btn, .wish-lg { text-transform: uppercase; letter-spacing: .03em; }

/* ---- SWATCHES DE COR nos cards (selecionar cor troca a imagem) — global ----
   Mini-imagens redondas da cor; clicar troca a foto do produto no grid. */
.swatches { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--fib-5); margin: var(--fib-8) 0 0; }
.swatches .sw { width: var(--fib-21); height: var(--fib-21); padding: 0; border: 1px solid var(--c-line); border-radius: 50%; overflow: hidden; cursor: pointer; background: var(--c-bg); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.swatches .sw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swatches .sw:hover { transform: translateY(-1px); border-color: var(--c-brand); }
.swatches .sw.on { border-color: var(--c-brand); box-shadow: 0 0 0 1px var(--c-brand); }
.sw-more { font-size: 11px; color: var(--c-muted); font-weight: 600; margin-inline-start: var(--fib-3); }

/* ---- HOVER em TODOS os botões do tema (feedback visual consistente) --------
   Botão cheio: leve realce + elevação; botão de contorno (sec/ghost/outline):
   borda/texto na cor da marca. Respeita prefers-reduced-motion. */
.btn { transition: filter .15s ease, transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 var(--fib-3) var(--fib-13) color-mix(in srgb, var(--c-ink) 14%, transparent); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.sec:hover, .btn.ghost:hover, .btn.outline:hover, .btn[class*="--outline"]:hover { border-color: var(--c-brand); color: var(--c-brand); filter: none; }
.btn:disabled, .btn[disabled] { filter: none !important; transform: none !important; box-shadow: none !important; cursor: not-allowed; }
/* Ícones de ação (header, conta, sacola) também reagem ao hover. */
.icon-btn:hover, .hicon:hover, .cart-ic:hover { color: var(--c-brand); }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}

/* ---- Newsletter do rodapé: botão "Assinar" da MESMA altura do input -------- */
.news-row { align-items: stretch; }
.news-row input { height: var(--fib-34); }
.news-row .btn { height: var(--fib-34); min-height: var(--fib-34); display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; }

/* ---- .btn-control: blindagem contra @layer -------------------------------- *
 * Sob cascade layers, regras .btn de camadas posteriores (overrides) venciam o
 * .btn-control de 'components' (padding 21px/altura), comprimindo o botão e
 * cortando o texto de Aplicar/Calcular. Aqui (fim do cascade, camada overrides)
 * o controle compacto é restaurado e o conteúdo virou ícone (FA) — cabe sempre. */
.field-inline { align-items: stretch; }
.field-inline > .input-std,
.field-inline > input { align-self: stretch; height: auto; min-height: var(--control-h); }
.field-inline > .btn-control,
.coupon-applied .btn-control {
  flex: 0 0 auto; width: auto; min-width: var(--control-h);
  align-self: stretch; height: auto; min-height: var(--control-h);
  padding-block: 0; padding-inline: var(--fib-13);
  font-size: var(--fib-13); line-height: 1;
}
.btn-control i { font-size: var(--fib-13); line-height: 1; }

}

/* ===== _responsive.css → @layer overrides ===== */
@layer overrides {
/* =============================================================================
 * 13 · RESPONSIVE — ajustes por breakpoint (vence os componentes: vem por último
 * no cascade). Cobre TODA a loja: header, hero, grades, produto, carrinho,
 * checkout, conta, coleções, seções, drawer e rodapé. Breakpoints: 1024 / 768
 * / 600 / 480 / 360. Tokens da loja + escala Fibonacci. Nada estoura na horizontal.
 * ===========================================================================*/

/* Trava global anti-overflow horizontal (full-bleed/hero usam calc de viewport). */
html{overflow-x:hidden}
img,video,iframe{max-width:100%}

/* ---- 1024px: tablet largo --------------------------------------------------*/
@media(max-width:1024px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(var(--fib-144),1fr))}
  .pd{gap:var(--fib-34)}
  .feats{grid-template-columns:repeat(auto-fit,minmax(var(--fib-144),1fr))}
  .tcards{grid-template-columns:repeat(2,1fr)}
}

/* ---- 768px: tablet / celular grande ----------------------------------------*/
@media(max-width:768px){
  /* Header: barra = menu + logo + ícones; busca e nav vão pro drawer. */
  .hnav,.hsearch{display:none}
  .mnav-btn{display:inline-flex}
  /* Mobile: logo COLADO ao botão de menu (à esquerda); ícones à direita. */
  .hbar{gap:var(--fib-8);padding:var(--fib-13) var(--fib-21);justify-content:flex-start}
  .hlogo{flex:none;justify-content:flex-start}
  .hicons{margin-inline-start:auto}
  .hlogo h1{font-size:var(--fib-21)}
  .logoimg{height:var(--fib-34)}

  /* Hero. */
  .hero h2,.hero.h-md h2,.hero.h-lg h2{font-size:var(--fib-34);line-height:1.15}
  .hero p{font-size:var(--fib-13)}
  .hero{padding:var(--fib-55) var(--fib-21)}
  .hero.h-md,.hero.h-lg{min-height:55vh}

  /* Grades de produto e seções. */
  .grid{grid-template-columns:repeat(2,1fr);gap:var(--fib-13)}
  .cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}
  .feats{grid-template-columns:repeat(2,1fr)}
  .colcell.lookbook img,.colcell.lookbook .col-cover-empty{height:var(--fib-233)}
  .sec{margin-bottom:var(--fib-55)}
  .sec-title{font-size:var(--fib-21)}

  /* Página de produto: 1 coluna. */
  .pd{grid-template-columns:1fr}
  .pd h2{font-size:var(--fib-34)}
  .thumbs{justify-content:center}

  /* Carrinho (tabela -> empilhada). */
  .addr-grid{grid-template-columns:1fr}
  table,thead,tbody,th,td,tr{display:block}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  tbody tr{border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--fib-13);margin-bottom:var(--fib-13)}
  tbody td{border:0;padding:var(--fib-5) 0;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:var(--fib-13)}
  .litem{align-items:center}

  /* Checkout. */
  .totals-box{width:100%}

  /* Conta / pedidos. */
  .acc-head{flex-direction:column;align-items:flex-start;gap:var(--fib-13)}
  .ord-head{flex-direction:column;align-items:flex-start;gap:var(--fib-8)}

  /* Shopbar (busca/ordenar/filtrar). */
  .shopbar{flex-wrap:wrap;gap:var(--fib-8)}
  .shopbar form,.shopbar .filters{flex:1 1 100%}

  /* Spotlight de seções (texto+visual lado a lado -> empilha). */
  .spotlight,.spot,.split{grid-template-columns:1fr}

  /* Rodapé. */
  .foot-cols{grid-template-columns:1fr 1fr;gap:var(--fib-21)}
  .foot-brand{grid-column:1 / -1}
  .foot-bottom{flex-direction:column;text-align:center;gap:var(--fib-8)}

  /* Botão flutuante. */
  .wa-float{right:var(--fib-13);bottom:var(--fib-13)}
}

/* ---- 600px: celular --------------------------------------------------------*/
@media(max-width:600px){
  .container,main{padding-inline-start:var(--fib-13);padding-inline-end:var(--fib-13)}
  .tcards{grid-template-columns:1fr}
  .map-wrap iframe{height:var(--fib-233)}
  .video-wrap{border-radius:var(--radius)}

  /* Menu lateral e carrinho ocupam a TELA INTEIRA no celular (largura + altura),
     com botão de fechar grande e intuitivo (área de toque 55px). */
  .mnav-drawer{width:100vw;max-width:100vw;border-right:0;padding-top:var(--fib-89)}
  .mnav-close{width:var(--fib-55);height:var(--fib-55);font-size:var(--fib-34)}
  .cart-drawer{width:100vw;max-width:100vw;box-shadow:none}
  .cd-close{width:var(--fib-55);height:var(--fib-55);font-size:var(--fib-34)}
  .cd-head{padding:var(--fib-21) var(--fib-21) var(--fib-13)}
}

/* ---- 480px: celular pequeno ------------------------------------------------*/
@media(max-width:480px){
  .grid{grid-template-columns:repeat(2,1fr);gap:var(--fib-8)}
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr}
  .hero h2,.hero.h-md h2,.hero.h-lg h2{font-size:var(--fib-34)}
  .hero .btn,.pd .btn:not(.btn-control){width:100%;max-width:100%}
  .card.fashion strong{font-size:11px}
  .price{font-size:var(--fib-13)}
  .qty-ctl input{width:var(--fib-34)}
  .foot-cols{grid-template-columns:1fr}
  .ann{font-size:11px;padding:var(--fib-5)}
  .crumbs{font-size:11px}
  .sec-title{font-size:var(--fib-21)}
  .rev-form .row{grid-template-columns:1fr}
}

/* ---- 360px: telas estreitas ------------------------------------------------*/
@media(max-width:360px){
  .grid{grid-template-columns:1fr}
  .hbar{padding:var(--fib-8) var(--fib-13)}
  .hicons{gap:var(--fib-5)}
  .hlogo h1{font-size:var(--fib-13)}
  .card.fashion .thumb{aspect-ratio:1/1}
}

/* ---- Ponteiro fino (mouse): hover mais rico (não em toque) -----------------*/
@media(hover:hover) and (pointer:fine){
  .card.fashion:hover .thumb img{transform:scale(1.05)}
}

}