/* GERADO por build-css.js — NÃO editar à mão. Edite os módulos em src/styles/. */

/* ===== _tokens.css ===== */
/* =============================================================================
 * 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;
  /* Sobreposição do herói (escurecimento sobre a imagem) — render ajusta por seção. */
  --hero-overlay:.35;
}


/* ===== _base.css ===== */
/* =============================================================================
 * 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 ===== */
/* =============================================================================
 * 03 · LAYOUT — contêiner principal, seções e faixas full-bleed (sec-band).
 * ===========================================================================*/
main{max-width:var(--maxw);margin:0 auto;padding:var(--fib-34) var(--fib-21)}

/* ---- 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(--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-left:calc(-1*var(--fib-21));margin-right:calc(-1*var(--fib-21));padding-left:var(--fib-21);padding-right:var(--fib-21)}
.sec-band>.sec,.sec-band>section{margin-bottom:0}


/* ===== _header.css ===== */
/* =============================================================================
 * 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-right: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;gap:var(--fib-21);max-width:var(--maxw);margin:0 auto;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-34);max-width:144px;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-ink);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-ink);user-select:none}
.mnav-drawer a i{margin-right:var(--fib-8);width:var(--fib-21);text-align:center;color:var(--c-muted)}
.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-21);font-size:var(--fib-34);cursor:pointer;line-height:1;color:var(--c-muted)}
.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 ===== */
/* =============================================================================
 * 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 ===== */
/* =============================================================================
 * 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(--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:var(--fib-89)}
.hero p{font-size:var(--fib-21);opacity:.95;margin-bottom:var(--fib-21);max-width:var(--fib-610)}
.hero.center{text-align:center}.hero.center p{margin-left:auto;margin-right: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-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);border-radius:0;border:0}


/* ===== _products.css ===== */
/* =============================================================================
 * 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)}
.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)}
.thumb{height:var(--fib-144);border-radius:var(--radius);background:linear-gradient(135deg,#eee,#ddd);display:flex;align-items:center;justify-content:center;font-size:var(--fib-34);color:#aaa;overflow:hidden}
.thumb img,.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{height:var(--fib-233)}.thumb.ar-landscape{height:var(--fib-89)}
.thumb.ar-auto{height:auto;aspect-ratio:auto}.thumb.ar-auto img{height:auto}

/* 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 FIXA 3:4 — todas as fotos com a mesma altura → grade uniforme. */
.card.fashion .thumb{aspect-ratio:3/4;height:auto;border-radius:var(--radius)}
.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{height:340px;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}
.pd .imgwrap{position:relative;height:340px;border-radius:var(--radius);overflow:hidden;background:#eee}
.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 ===== */
/* =============================================================================
 * 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)}

/* Í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 ===== */
/* =============================================================================
 * 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{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 ===== */
/* =============================================================================
 * 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 ===== */
/* =============================================================================
 * 11 · FOOTER — rodapé com links, redes sociais e texto.
 * ===========================================================================*/
footer{text-align:center;color:var(--c-muted);font-size:var(--fib-13);padding:var(--fib-34);border-top:1px solid var(--c-line);margin-top:var(--fib-55)}
.footlinks{display:flex;flex-wrap:wrap;gap:var(--fib-13);justify-content:center;margin-bottom:var(--fib-13)}
.footlinks a{font-weight:600}.footlinks a:hover{color:var(--c-brand)}
.fsocial{display:flex;gap:var(--fib-13);justify-content:center;margin-bottom:var(--fib-13)}
.fsocial a{width:var(--fib-34);height:var(--fib-34);border-radius:50%;background:var(--c-surface);border:1px solid var(--c-line);display:flex;align-items:center;justify-content:center;font-size:var(--fib-21);text-decoration:none}
.fsocial a:hover{border-color:var(--c-brand);transform:translateY(-2px)}
.ftext{max-width:var(--fib-610);margin:0 auto var(--fib-13);line-height:1.6;color:var(--c-muted)}


/* ===== _feedback.css ===== */
/* =============================================================================
 * 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}


/* ===== _responsive.css ===== */
/* =============================================================================
 * 13 · RESPONSIVE — ajustes nos breakpoints (vence os componentes: último).
 * ===========================================================================*/
@media(max-width:768px){
  /* Mobile: barra = menu + logo + ícones; busca e nav vão pro drawer. */
  .hnav,.hsearch{display:none}
  .mnav-btn{display:inline-flex}
  .hbar{gap:var(--fib-13);padding:var(--fib-13) var(--fib-21);justify-content:space-between}
  .hlogo{flex:1;justify-content:center}
  .hlogo h1{font-size:var(--fib-21)}
  .pd{grid-template-columns:1fr}
  .hero h2,.hero.h-md h2,.hero.h-lg h2{font-size:var(--fib-34)}
  .hero{padding:var(--fib-55) var(--fib-21)}
  .hero.h-md,.hero.h-lg{min-height:55vh}
  .addr-grid{grid-template-columns:1fr}
  .cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}
  .colcell.lookbook img{height:var(--fib-233)}
}
@media(max-width:480px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
}