/* =============================================================================
   Imperio dos Mantos — Heraldica Imperial · preto/branco + ouro discreto
   Cada manto, um brasao.
   ========================================================================== */
:root{
  /* ---- NUCLEO PRETO (5 niveis para profundidade sem cor) ---- */
  --preto:        #0A0A0B;   /* fundo base */
  --preto-2:      #111113;   /* superficies elevadas (cards, drawer) */
  --preto-3:      #17171A;   /* hover de superficie / inputs */
  --grafite:      #1E1E22;   /* bordas de bloco no escuro */
  --carvao:       #2A2A2F;   /* divisores neutros */

  /* ---- BRANCO / CINZAS / TEXTO ---- */
  --branco:       #F7F6F2;   /* texto principal (marfim quente) */
  --branco-puro:  #FFFFFF;   /* destaque maximo */
  --cinza:        #B9B7B0;   /* texto secundario */
  --cinza-2:      #84827C;   /* terciario / muted */
  --cinza-3:      #4A4A4E;   /* desabilitado / placeholder */
  --txt:          var(--branco);   /* alias semantico */
  --muted:        var(--cinza-2);  /* alias semantico */

  /* ---- DOURADO (realce discreto — lista fechada de uso) ---- */
  --ouro:         #C8A14A;   /* ouro principal: filetes, brasao */
  --ouro-2:       #E6C977;   /* brilho / topo metalico / texto btn-ouro */
  --ouro-escuro:  #8C6A28;   /* base de gradiente */
  --ouro-leve:    rgba(200,161,74,.14);  /* wash sutil de fundo */
  --linha:        rgba(200,161,74,.45);  /* filete 1px (token-chave) */
  --ouro-glow:    rgba(200,161,74,.30);  /* sombra hover CTA */
  --grad-ouro:    linear-gradient(180deg,#E6C977 0%,#C8A14A 45%,#9A7A33 100%);

  /* ---- SEMANTICOS DISCRETOS ---- */
  --ok:           #C8A14A;
  --erro:         #B5483C;   /* vermelho terroso dessaturado (unico desvio) */
  --erro-bg:      rgba(181,72,60,.12);

  /* ---- TIPOGRAFIA ---- */
  --display:      "Cinzel","Times New Roman",serif;        /* titulos/capitais romanas */
  --font:         "Cormorant Garamond",Georgia,serif;      /* corpo/serifa elegante */
  --font-ui:      "Inter",system-ui,-apple-system,sans-serif; /* precos/numeros/UI */
  --font-titulo:  var(--display);  /* alias */
  --font-corpo:   var(--font);     /* alias */
  --tracking-caps:.22em;
  --fs-eyebrow:   .72rem;

  /* ---- RAIOS (sutis: luxo e mais reto) ---- */
  --r-0:0px; --r-sm:2px; --r-md:4px; --r-pill:999px;

  /* ---- SOMBRAS ---- */
  --sh-1:   0 1px 2px rgba(0,0,0,.5);
  --sh-2:   0 8px 24px rgba(0,0,0,.55);
  --sh-3:   0 18px 50px rgba(0,0,0,.65);
  --sh-ouro:0 0 0 1px var(--linha),0 10px 30px var(--ouro-glow);

  /* ---- LAYOUT ---- */
  --maxw:1240px; --gap:24px; --pad-bloco:28px;

  /* ---- FILETE / CANTONEIRA ---- */
  --filete-borda:1px solid var(--linha);
  --cantoneira:14px;

  /* ---- BREAKPOINTS (referencia) ---- */
  --bp-lg:1024px; --bp-md:768px; --bp-sm:480px;

  --transicao:.25s cubic-bezier(.2,.6,.2,1);

  /* ---- ALIASES DE COMPATIBILIDADE (protege CSS/JS legado --color-*) ---- */
  --color-bg:var(--preto); --color-surface:var(--preto-2); --color-surface-2:var(--preto-3);
  --color-border:var(--carvao); --color-line:var(--linha);
  --color-ink:var(--branco); --color-ink-900:var(--branco-puro);
  --color-muted:var(--cinza); --color-muted-2:var(--cinza-2);
  --color-gold:var(--ouro); --color-gold-2:var(--ouro-2);
  --color-danger:var(--erro); --color-ok:var(--ok);
}

/* =============================================================================
   RESET / BASE
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);color:var(--txt);background:var(--preto);
  line-height:1.55;-webkit-font-smoothing:antialiased;font-size:1rem;
}
img,svg{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
input,button,select,textarea{font-family:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:.04em}

/* bloco oculto do <symbol> do brasao (definido em header.php) */
.crest-im{display:none}

/* foco global — outline dourado discreto */
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--preto),0 0 0 3px var(--linha)}

/* =============================================================================
   1. MOTIVOS REUTILIZAVEIS (moldura / filete)
   ========================================================================== */
/* ---- MOLDURA: cantoneiras "L" douradas nos 4 cantos ---- */
.moldura{position:relative}
.moldura::before,.moldura::after{
  content:"";position:absolute;width:var(--cantoneira);height:var(--cantoneira);
  border-color:var(--ouro);border-style:solid;pointer-events:none;opacity:.85;
  transition:opacity var(--transicao);
}
.moldura::before{top:8px;left:8px;border-width:1px 0 0 1px}
.moldura::after{bottom:8px;right:8px;border-width:0 1px 1px 0}
/* variante que so aparece no hover do pai (cards) */
.moldura-hover::before,.moldura-hover::after{
  content:"";position:absolute;width:var(--cantoneira);height:var(--cantoneira);
  border-color:var(--ouro);border-style:solid;pointer-events:none;opacity:0;
  transition:opacity var(--transicao);
}
.moldura-hover::before{top:8px;left:8px;border-width:1px 0 0 1px}
.moldura-hover::after{bottom:8px;right:8px;border-width:0 1px 1px 0}
.moldura-hover:hover::before,.moldura-hover:hover::after{opacity:.85}

/* ---- FILETE divisor: gradiente transparente -> ouro -> transparente ---- */
.filete-x{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--linha) 18%,var(--linha) 82%,transparent)}

/* =============================================================================
   3. TOPBAR
   ========================================================================== */
.topbar{
  height:36px;display:flex;align-items:center;background:#000;
  border-bottom:1px solid var(--carvao);box-shadow:inset 0 -1px 0 var(--linha);
}
.topbar .container,.topbar > div{
  font-family:var(--font-ui);font-size:.72rem;color:var(--cinza);
  text-transform:uppercase;letter-spacing:.14em;text-align:center;width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* =============================================================================
   4. CONTAINER
   ========================================================================== */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}

/* =============================================================================
   18. BOTOES
   ========================================================================== */
.btn{
  font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.12em;
  font-weight:600;font-size:.8rem;padding:12px 22px;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;transition:var(--transicao);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1;
}
.btn-pri{background:var(--branco);color:var(--preto)}
.btn-pri:hover{background:var(--branco-puro);box-shadow:var(--sh-2)}
.btn-ghost{background:transparent;color:var(--branco);border-color:var(--carvao)}
.btn-ghost:hover{border-color:var(--linha);color:var(--branco-puro)}
.btn-ouro{background:transparent;color:var(--ouro-2);border-color:var(--linha)}
.btn-ouro:hover{background:var(--grad-ouro);color:#1a1408;border-color:transparent;box-shadow:var(--sh-ouro)}
.btn-block{width:100%;justify-content:center}
.btn-grande{padding:16px 28px;font-size:.9rem}
.btn-sm{padding:8px 14px;font-size:.72rem}
.btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none;
  background:var(--grafite);color:var(--cinza-3);border-color:var(--carvao)}

/* =============================================================================
   5. HEADER
   ========================================================================== */
.site-header{
  background:var(--preto);position:sticky;top:0;z-index:50;
  border-bottom:var(--filete-borda);transition:box-shadow var(--transicao);
}
.site-header.scrolled{box-shadow:var(--sh-2)}
.header-inner{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:20px;height:78px;max-width:var(--maxw);margin-inline:auto;padding-inline:24px;
}
.brand{display:flex;align-items:center;gap:12px}
.logo10{height:48px;width:auto;transition:filter var(--transicao)}
.logo10 use{fill:url(#gradOuro)}
.brand:hover .logo10{filter:drop-shadow(0 0 6px var(--ouro-glow))}
.brand-name{
  display:flex;flex-direction:column;line-height:1;font-family:var(--display);
  text-transform:uppercase;border-bottom:1px solid var(--linha);padding-bottom:3px;
}
.brand-name strong,.brand-name .ln1{
  font-weight:600;color:var(--branco);font-size:1.05rem;letter-spacing:.2em;
}
.brand-name span,.brand-name small,.brand-name .ln2{
  font-weight:500;color:var(--cinza);font-size:.7rem;letter-spacing:.34em;
}
.busca{position:relative;display:flex;align-items:center}
.busca::before{
  content:"";position:absolute;left:14px;top:50%;width:16px;height:16px;
  transform:translateY(-50%);pointer-events:none;
  background:var(--cinza);
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
}
.busca input{
  width:100%;background:var(--preto-3);border:1px solid var(--carvao);
  border-radius:var(--r-pill);height:42px;padding:0 16px 0 40px;
  color:var(--branco);font-family:var(--font-ui);font-size:.9rem;outline:none;
  transition:var(--transicao);
}
.busca input::placeholder{color:var(--cinza-3)}
.busca input:focus{border-color:var(--linha);box-shadow:0 0 0 1px var(--linha)}
.busca button{
  background:none;border:0;color:var(--cinza);cursor:pointer;
  position:absolute;right:8px;height:42px;padding:0 8px;font-size:.9rem;
}
.cart-btn,#cartBtn{
  width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--carvao);border-radius:var(--r-pill);
  color:var(--branco);cursor:pointer;position:relative;transition:var(--transicao);font-size:1.05rem;
}
.cart-btn:hover,#cartBtn:hover{border-color:var(--linha)}
.cart-count,#cartCount{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad-ouro);color:#1a1408;border-radius:var(--r-pill);
  font-family:var(--font-ui);font-size:.62rem;font-weight:600;padding:0 4px;
}
.cart-count:empty,#cartCount:empty{display:none}
.nav-toggle,#navToggle{
  display:none;background:transparent;border:1px solid var(--carvao);border-radius:var(--r-sm);
  width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer;
  color:var(--ouro);font-size:1.4rem;line-height:1;transition:var(--transicao);
}
.nav-toggle:hover,#navToggle:hover{border-color:var(--linha)}

/* =============================================================================
   6. CATNAV
   ========================================================================== */
.catnav,#catnav{background:var(--preto-2);border-bottom:var(--filete-borda)}
.catnav-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;
  max-width:var(--maxw);margin-inline:auto;padding:11px 24px;
}
.catnav-inner::-webkit-scrollbar{display:none}
.catnav a,.catnav-inner a{
  position:relative;font-family:var(--display);font-size:.8rem;text-transform:uppercase;
  letter-spacing:.18em;color:var(--cinza);white-space:nowrap;padding:4px 0;
  transition:color var(--transicao);
}
.catnav a::after,.catnav-inner a::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--grad-ouro);transform:scaleX(0);transition:transform var(--transicao);
}
.catnav a:hover,.catnav a.on,.catnav-inner a:hover,.catnav-inner a.on{color:var(--branco)}
.catnav a:hover::after,.catnav a.on::after,.catnav-inner a:hover::after,.catnav-inner a.on::after{transform:scaleX(1)}

/* =============================================================================
   7. HERO
   ========================================================================== */
.hero{
  background:var(--preto);position:relative;overflow:hidden;padding:72px 0;
  background-image:radial-gradient(60% 60% at 50% 40%,var(--ouro-leve),transparent 70%);
}
.hero-marca{
  position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:520px;height:auto;opacity:.04;pointer-events:none;z-index:0;
}
.hero-marca use{fill:url(#gradOuro)}
.hero-stripes{
  position:absolute;top:0;left:0;right:0;height:33%;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(115deg,transparent 0 38px,var(--linha) 38px 39px);
  opacity:.10;
}
.hero-inner{
  position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;
  gap:48px;align-items:center;max-width:var(--maxw);margin-inline:auto;padding-inline:24px;
}
.hero-eyebrow{
  display:inline-block;font-family:var(--display);font-size:var(--fs-eyebrow);
  text-transform:uppercase;letter-spacing:.22em;color:var(--ouro);margin-bottom:18px;
}
.hero-txt h1{
  font-family:var(--display);font-size:clamp(2.4rem,5vw,4rem);color:var(--branco);
  line-height:1.05;text-transform:uppercase;
}
.hero-txt h1 span{color:var(--ouro)}
.hero-txt p,.hero-txt .hero-sub{
  font-family:var(--font);font-size:1.25rem;color:var(--cinza);
  margin:20px 0 30px;max-width:480px;
}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-prod{
  position:relative;display:block;background:var(--preto-2);
  border:1px solid var(--grafite);border-radius:var(--r-md);overflow:hidden;
  transition:var(--transicao);
}
.hero-prod:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.hero-prod-img{
  display:block;width:100%;position:relative;aspect-ratio:4/5;
  background:radial-gradient(circle at 50% 40%,var(--preto-3),var(--preto)) center/cover no-repeat;
}
.hero-prod-tag{
  position:absolute;top:12px;left:12px;background:var(--grad-ouro);color:#1a1408;
  font-family:var(--font-ui);font-size:.62rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;padding:4px 8px;border-radius:var(--r-sm);z-index:2;
}
.hero-prod .hp-nome,.hp-nome{
  display:block;font-family:var(--display);font-size:1rem;text-transform:uppercase;color:var(--branco);
  padding:14px 16px 0;
}
.hero-prod .hp-preco,.hp-preco{
  display:block;font-family:var(--font-ui);font-size:1.1rem;font-weight:600;color:var(--ouro);
  padding:4px 16px 16px;
}

/* =============================================================================
   8. BENEFICIOS
   ========================================================================== */
.beneficios{background:var(--preto-2);border-block:var(--filete-borda);padding:40px 0}
.beneficios-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  max-width:var(--maxw);margin-inline:auto;padding-inline:24px;
}
.benef{text-align:center;padding:0 20px;border-left:1px solid var(--carvao);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.benef:first-child{border-left:0}
.benef strong,.benef h3,.benef h4{
  display:block;font-family:var(--display);font-size:.8rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--branco);
}
.benef small,.benef p{font-family:var(--font);color:var(--cinza);font-size:1rem}
.benef-ic{
  width:56px;height:56px;border-radius:var(--r-pill);border:1px solid var(--linha);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ouro);font-size:1.4rem;
}
.benef-ic svg{width:28px;height:28px;stroke:var(--ouro);fill:none;stroke-width:1.5}

/* =============================================================================
   9. HOME-LAYOUT
   ========================================================================== */
.home-layout{
  display:grid;grid-template-columns:260px 1fr;gap:32px;margin-top:40px;
  max-width:var(--maxw);margin-inline:auto;padding-inline:24px;align-items:start;
}
.home-cats{
  background:var(--preto-2);border:var(--filete-borda);border-radius:var(--r-md);
  overflow:hidden;position:sticky;top:96px;
}
.home-cats h3{
  font-family:var(--display);font-size:.9rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ouro);padding:14px 16px;border-bottom:1px solid var(--carvao);
}
.home-cats li{border-bottom:1px solid var(--carvao)}
.home-cats li:last-child{border-bottom:0}
.home-cats a{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-family:var(--display);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--cinza);padding:12px 16px;transition:var(--transicao);
}
.home-cats a::after{content:"";color:var(--ouro);font-size:.7rem;opacity:0;transition:opacity var(--transicao)}
.home-cats a:hover{background:var(--ouro-leve);color:var(--branco)}
.home-cats a:hover::after{content:"\25BA";opacity:1}
.home-cats a.on,.home-cats a.todos.on,.home-cats li.on > a{border-left:2px solid var(--ouro);color:var(--branco)}
.home-cats a span{
  font-family:var(--font-ui);font-size:.7rem;color:var(--cinza-2);
}
.home-main{display:flex;flex-direction:column}
.home-main .secao{margin-block:0 36px}

/* =============================================================================
   10. SECAO + GRID
   ========================================================================== */
.secao{margin-block:48px}
.secao .container,.secao > .secao-top,.secao > .secao-head{}
.secao-top,.secao-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.secao-top + .filete-x,.secao-head + .filete-x{margin-top:12px}
.secao-titulo{
  font-family:var(--display);font-size:1.5rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--branco);
}
.ver-mais{
  font-family:var(--font-ui);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ouro);display:inline-flex;align-items:center;gap:6px;transition:var(--transicao);
}
.ver-mais::after{content:"\2192"}
.ver-mais:hover{text-decoration:underline;text-underline-offset:4px}
.grid-prod{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;margin-top:24px;
}
.vazio{
  text-align:center;padding:64px 24px;color:var(--cinza);font-family:var(--font);
}
.vazio .logo10{margin:0 auto 16px;height:64px;opacity:.3}
.vazio h3{font-family:var(--display);text-transform:uppercase;color:var(--branco);margin-bottom:8px}
.vazio p{color:var(--cinza);margin-bottom:16px}

/* =============================================================================
   11. CARD-PROD
   ========================================================================== */
.card-prod{
  position:relative;display:block;background:var(--preto-2);border:1px solid var(--grafite);
  border-radius:var(--r-md);overflow:hidden;transition:var(--transicao);
}
.card-prod:hover{border-color:var(--linha);transform:translateY(-4px);box-shadow:var(--sh-2)}
.card-img{position:relative;aspect-ratio:4/5;overflow:hidden}
.card-img-bg{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 38%,var(--preto-3),var(--preto)) center/cover no-repeat;
  transition:transform .45s var(--transicao);
}
.card-prod:hover .card-img-bg{transform:scale(1.04)}
.card-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:3}
.card-ver{
  position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);text-align:center;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;
  color:var(--ouro);padding:10px;transform:translateY(100%);opacity:0;transition:var(--transicao);z-index:2;
}
.card-prod:hover .card-ver{transform:translateY(0);opacity:1}
.card-body{padding:14px 16px}
.card-body .filete-x,.card-img + .card-body{}
.card-cat{
  font-family:var(--font-ui);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--cinza-2);
}
.card-titulo{
  font-family:var(--display);font-size:.95rem;text-transform:uppercase;color:var(--branco);
  margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.25;min-height:2.4em;
}
.card-preco-linha{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
.card-preco{font-family:var(--font-ui);font-size:1.1rem;font-weight:600;color:var(--branco)}
.card-preco s,.card-preco .antigo{color:var(--cinza-3);font-size:.85rem;margin-left:6px;font-weight:400}

/* ---- estado esgotado ---- */
.card-prod.esg .card-img-bg,.card-prod .badge-esg ~ * .card-img-bg{filter:grayscale(.4) opacity(.7)}
.card-prod.esg .card-img-bg{filter:grayscale(.4) opacity(.7)}
.card-prod.esg .card-ver{opacity:.4;cursor:not-allowed}
.card-prod.esg{cursor:not-allowed}

/* =============================================================================
   12. BADGES
   ========================================================================== */
.badge{
  font-family:var(--font-ui);font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;
  padding:4px 8px;border-radius:var(--r-sm);font-weight:600;
}
.badge-novo{background:var(--grad-ouro);color:#1a1408}
.badge-esg{background:rgba(0,0,0,.7);color:var(--cinza);border:1px solid var(--carvao)}
.todos{
  display:inline-flex;align-items:center;font-family:var(--font-ui);text-transform:uppercase;
  letter-spacing:.12em;font-size:.72rem;font-weight:600;padding:8px 14px;border-radius:var(--r-sm);
  background:transparent;color:var(--branco);border:1px solid var(--carvao);transition:var(--transicao);
}
.todos:hover{border-color:var(--linha);color:var(--branco-puro)}
.todos.on{border:1px solid var(--ouro);background:var(--ouro-leve)}

/* =============================================================================
   13. FOOTER
   ========================================================================== */
.site-footer{
  background:#000;border-top:var(--filete-borda);padding-top:56px;color:var(--cinza);margin-top:0;
}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;
  max-width:var(--maxw);margin-inline:auto;padding-inline:24px;
}
.brand-footer{display:flex;flex-direction:column;gap:14px}
.brand-footer .logo10{height:56px}
.brand-footer p{font-family:var(--font);color:var(--cinza);font-size:1rem;max-width:330px}
.brand-footer h4{
  font-family:var(--display);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--cinza);
}
.footer-col h4{
  position:relative;font-family:var(--display);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--cinza);margin-bottom:14px;padding-top:14px;
}
.footer-col h4::before{
  content:"";position:absolute;top:0;left:0;width:40px;height:1px;
  background:linear-gradient(90deg,var(--linha),transparent);
}
.footer-col a,.footer-col span{
  display:block;font-family:var(--font-ui);font-size:.85rem;color:var(--cinza);
  padding:4px 0;transition:var(--transicao);
}
.footer-col a:hover{color:var(--branco);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ouro)}
.footer-pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.footer-pay span,.footer-pay img{filter:grayscale(1) opacity(.6);transition:var(--transicao)}
.footer-pay span{
  background:var(--preto-2);border:1px solid var(--carvao);border-radius:var(--r-sm);
  padding:.35rem .6rem;font-family:var(--font-ui);font-size:.72rem;color:var(--cinza);
}
.footer-pay span:hover,.footer-pay img:hover{filter:grayscale(0) opacity(1)}
.footer-bottom{
  margin-top:40px;padding:20px 24px;text-align:center;
  font-family:var(--font-ui);font-size:.72rem;color:var(--cinza-2);
}

/* =============================================================================
   15. CART DRAWER + FRETE
   ========================================================================== */
.cart-overlay,#cartOverlay{
  position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:var(--transicao);z-index:90;
}
.cart-overlay.open,.cart-overlay.show,#cartOverlay.open,#cartOverlay.show{opacity:1;visibility:visible}
.cart-drawer,#cartDrawer{
  position:fixed;top:0;right:0;height:100vh;width:min(420px,100%);background:var(--preto-2);
  border-left:var(--filete-borda);box-shadow:var(--sh-3);transform:translateX(100%);
  transition:transform var(--transicao);z-index:91;display:flex;flex-direction:column;
}
.cart-drawer.open,#cartDrawer.open{transform:translateX(0)}
.cart-head{
  display:flex;justify-content:space-between;align-items:center;padding:20px;
  border-bottom:var(--filete-borda);
}
.cart-head h3{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;color:var(--ouro);font-size:1.1rem;
}
.cart-head button,.cartClose,#cartClose{
  background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--cinza);transition:var(--transicao);
}
.cart-head button:hover,.cartClose:hover,#cartClose:hover{color:var(--ouro)}
.cart-items,#cartItems{flex:1;overflow-y:auto;padding:16px 20px}
.cart-item{
  display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--carvao);
}
.cart-item:last-child{border-bottom:0}
.cart-item img{
  width:64px;height:80px;object-fit:cover;background:var(--preto-3);border:1px solid var(--grafite);border-radius:var(--r-sm);
}
.ci-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.ci-nome{font-family:var(--display);font-size:.85rem;color:var(--branco)}
.ci-tam{font-family:var(--font-ui);font-size:.7rem;color:var(--cinza)}
.ci-acoes{display:flex;align-items:center;gap:8px;margin-top:8px}
.ci-stepper{display:inline-flex;align-items:center;gap:6px}
.ci-stepper span{min-width:28px;text-align:center;font-family:var(--font-ui);font-size:.85rem;color:var(--branco)}
.ci-menos,.ci-mais,.ci-stepper button{
  width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--carvao);border-radius:var(--r-sm);
  color:var(--branco);cursor:pointer;font-size:1rem;line-height:1;transition:var(--transicao);
}
.ci-menos:hover,.ci-mais:hover,.ci-stepper button:hover:not(:disabled){border-color:var(--ouro)}
.ci-stepper button:disabled{opacity:.4;cursor:not-allowed}
.ci-rm{
  background:none;border:0;color:var(--cinza);cursor:pointer;font-size:.78rem;padding:0;transition:var(--transicao);
}
.ci-rm:hover{color:var(--erro)}
.cart-vazio,#cart-vazio{
  text-align:center;color:var(--cinza);font-family:var(--font);padding:50px 0;
}
.cart-vazio .logo10{margin:0 auto 14px;height:56px;opacity:.3}
.cart-foot{border-top:var(--filete-borda);padding:20px;background:var(--preto)}
.cart-frete{margin-bottom:16px}
.cart-frete label{
  display:block;font-family:var(--font-ui);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--cinza);margin-bottom:8px;
}
.frete-row{display:flex;gap:8px}
.frete-row input,#freteCep{
  flex:1;min-width:0;background:var(--preto-3);border:1px solid var(--carvao);border-radius:var(--r-pill);
  height:42px;padding:0 16px;color:var(--branco);font-family:var(--font-ui);outline:none;transition:var(--transicao);
}
.frete-row input::placeholder,#freteCep::placeholder{color:var(--cinza-3)}
.frete-row input:focus,#freteCep:focus{border-color:var(--linha);box-shadow:0 0 0 1px var(--linha)}
.frete-result,#freteResult{margin-top:10px}
.frete-op{
  display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--carvao);font-family:var(--font-ui);font-size:.86rem;color:var(--cinza);cursor:pointer;
}
.frete-op:last-child{border-bottom:0}
.frete-op strong{font-family:var(--font-ui);font-weight:600;color:var(--branco)}
.frete-op input[type=radio]{accent-color:var(--ouro)}
.frete-op.sel,.frete-op:has(input:checked){color:var(--branco)}
.frete-op.sel strong,.frete-op:has(input:checked) strong{color:var(--ouro)}
.frete-msg{font-family:var(--font-ui);font-size:.85rem;color:var(--cinza);margin:4px 0}
.frete-msg.err{color:var(--erro)}
.frete-msg.ok{color:var(--ouro)}
.cart-total,#cartTotal{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
}
.cart-total span,.cart-total label{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;color:var(--branco);font-size:.9rem;
}
.cart-total strong,#cartTotal{font-family:var(--font-ui);font-size:1.3rem;font-weight:600;color:var(--branco)}

/* =============================================================================
   16. PAGINA DE PRODUTO
   ========================================================================== */
.breadcrumb{
  font-family:var(--font-ui);font-size:.72rem;color:var(--cinza-2);
  max-width:var(--maxw);margin-inline:auto;padding:20px 24px 0;
}
.breadcrumb a{transition:var(--transicao)}
.breadcrumb a:hover{color:var(--branco)}
.breadcrumb .sep,.breadcrumb span + span::before{color:var(--ouro)}
.breadcrumb > *:last-child,.breadcrumb b{color:var(--branco)}
.produto,#produto{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:32px;
  max-width:var(--maxw);margin-inline:auto;padding-inline:24px;align-items:start;
}
.produto-img{
  background:var(--preto-2);border-radius:var(--r-md);overflow:hidden;position:sticky;top:96px;
}
.produto-img img{width:100%;aspect-ratio:4/5;object-fit:cover}
.produto-img .thumbs,.produto-img > div:last-child{display:flex;gap:8px;padding:8px;flex-wrap:wrap}
.produto-img .thumb{width:60px;height:75px;object-fit:cover;border:1px solid var(--carvao);cursor:pointer;border-radius:var(--r-sm)}
.produto-img .thumb.sel,.produto-img .thumb.on{border:1px solid var(--ouro)}
.produto-cat{
  display:inline-block;font-family:var(--font-ui);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--cinza-2);
}
.produto-info h1{font-family:var(--display);font-size:2rem;text-transform:uppercase;color:var(--branco);margin:8px 0}
.produto-preco{font-family:var(--font-ui);font-size:1.8rem;font-weight:600;color:var(--branco);margin-bottom:4px}
.produto-preco small,.produto-preco .parcela{display:block;font-size:.85rem;font-weight:400;color:var(--cinza)}
.produto-desc{font-family:var(--font);font-size:1.15rem;color:var(--cinza);margin:16px 0 22px}
.tam-bloco{margin-bottom:24px}
.tam-label{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-ui);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--cinza);margin-bottom:10px;
}
.tam-label a{color:var(--ouro);text-transform:none;letter-spacing:0;font-size:.8rem}
.tam-opcoes,#tamOpcoes{display:flex;gap:8px;flex-wrap:wrap}
.tam-btn,.tamBtn{
  width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--carvao);background:var(--preto-3);color:var(--branco);
  font-family:var(--font-ui);font-weight:500;cursor:pointer;border-radius:var(--r-sm);transition:var(--transicao);
}
.tam-btn:hover:not(.esg),.tamBtn:hover:not(.esg){border-color:var(--linha)}
.tam-btn.sel,.tamBtn.sel{border:1px solid var(--ouro);background:var(--ouro-leve)}
.tam-btn.esg,.tamBtn.esg{
  color:var(--cinza-3);cursor:not-allowed;
  background:
    linear-gradient(135deg,transparent calc(50% - .5px),var(--cinza-3) calc(50% - .5px),var(--cinza-3) calc(50% + .5px),transparent calc(50% + .5px)),
    var(--preto-3);
}
.tam-estoque,#tamEstoque{font-family:var(--font-ui);font-size:.72rem;color:var(--ouro);min-height:1.2em;margin-top:12px}
.qtd-bloco,#qtdBloco{margin-bottom:22px}
.qtd-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.qtd-stepper{display:inline-flex;align-items:center;gap:8px}
.qtd-stepper button,#qtdMenos,#qtdMais{
  width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--carvao);color:var(--branco);cursor:pointer;
  border-radius:var(--r-sm);font-size:1rem;line-height:1;transition:var(--transicao);
}
.qtd-stepper button:hover:not(:disabled),#qtdMenos:hover:not(:disabled),#qtdMais:hover:not(:disabled){border-color:var(--ouro)}
.qtd-stepper button:disabled{opacity:.4;cursor:not-allowed}
.qtd-stepper input,#qtdInput{
  width:48px;height:28px;text-align:center;background:var(--preto-3);border:1px solid var(--carvao);
  color:var(--branco);font-family:var(--font-ui);border-radius:var(--r-sm);
}
.qtd-max,#qtdMax{font-family:var(--font-ui);font-size:.7rem;color:var(--cinza-2)}
.produto-aviso,#addAviso{font-family:var(--font-ui);font-size:.85rem;margin-top:12px;min-height:1.2em;padding:0}
.produto-aviso.ok,#addAviso.ok{border-left:2px solid var(--ouro);background:var(--ouro-leve);color:var(--branco);padding:10px 12px}
.produto-aviso.err,#addAviso.err{border:1px solid var(--erro);background:var(--erro-bg);color:var(--branco);padding:10px 12px}
.produto-extra{margin-top:18px}
.produto-extra > *{border-top:1px solid var(--carvao);padding:14px 0}
.produto-extra h3,.produto-extra h4,.produto-extra summary{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--branco);
  font-size:.9rem;cursor:pointer;
}
.produto-extra p,.produto-extra span{color:var(--cinza);font-family:var(--font)}

/* =============================================================================
   17. LOJA
   ========================================================================== */
.pagina-head{
  padding:34px 0 0;max-width:var(--maxw);margin-inline:auto;padding-inline:24px;
}
.pagina-head h1{font-family:var(--display);font-size:2.2rem;text-transform:uppercase;color:var(--branco)}
.pagina-head span,.pagina-head p{font-family:var(--font-ui);font-size:.9rem;color:var(--cinza)}
.pagina-head .filete-x{margin-top:16px}
.loja{
  display:grid;grid-template-columns:240px 1fr;gap:32px;
  max-width:var(--maxw);margin-inline:auto;padding:28px 24px 56px;align-items:start;
}
.filtros-loja{
  background:var(--preto-2);border:var(--filete-borda);border-radius:var(--r-md);padding:18px;position:sticky;top:96px;
}
.filtros-loja h3,.filtros-loja h4{
  font-family:var(--display);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--branco);margin-bottom:10px;
}
.filtros-loja .filete-x{margin:14px 0}
.filtro-tam{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.filtro-tam span{font-family:var(--font-ui);font-size:.75rem;color:var(--cinza);margin-right:4px}
.filtro-tam a{
  min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--carvao);background:var(--preto-3);color:var(--branco);
  font-family:var(--font-ui);font-size:.8rem;border-radius:var(--r-sm);transition:var(--transicao);
}
.filtro-tam a:hover{border-color:var(--linha)}
.filtro-tam a.on{border:1px solid var(--ouro);background:var(--ouro-leve)}
.filtros-loja select,.loja select{
  background:var(--preto-3);border:1px solid var(--carvao);color:var(--branco);
  font-family:var(--font-ui);font-size:.85rem;padding:.55rem 2rem .55rem .8rem;border-radius:var(--r-sm);
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A14A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;background-size:14px;
}
.paginacao{display:flex;gap:6px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.paginacao a,.paginacao span{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--carvao);color:var(--branco);font-family:var(--font-ui);font-size:.85rem;
  border-radius:var(--r-sm);transition:var(--transicao);
}
.paginacao a:hover{border-color:var(--linha)}
.paginacao a.on,.paginacao span.on{border:1px solid var(--ouro);background:var(--ouro-leve)}
.paginacao .disabled,.paginacao [disabled]{color:var(--cinza-3);cursor:not-allowed}

/* =============================================================================
   19. ESTADOS GLOBAIS (hover de superficie generico)
   ========================================================================== */
.esg{cursor:not-allowed}

/* =============================================================================
   20. ADMIN
   ========================================================================== */
.adm{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.adm-side{background:#000;border-right:var(--filete-borda);padding:24px 0}
.adm-brand{
  display:flex;align-items:center;gap:10px;padding:0 20px 20px;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;color:var(--ouro);font-size:.9rem;
}
.adm-brand .logo10{height:40px}
.adm-side a,.adm-side .nav a{
  display:block;font-family:var(--font-ui);font-size:.85rem;color:var(--cinza);
  padding:10px 20px;transition:var(--transicao);
}
.adm-side a:hover,.adm-side a.on{color:var(--branco);background:var(--ouro-leve)}
.adm-main{background:var(--preto)}
.adm-top{
  display:flex;justify-content:space-between;align-items:center;padding:18px 28px;
  border-bottom:var(--filete-borda);
}
.adm-top h1,.adm-top h2{font-family:var(--display);text-transform:uppercase;color:var(--branco);font-size:1.3rem}
.adm-sair{font-family:var(--font-ui)}
.adm-content{padding:28px}
.alert{
  font-family:var(--font-ui);font-size:.85rem;padding:10px 14px;border-radius:var(--r-sm);margin-bottom:18px;
}
.alert.ok{border-left:2px solid var(--ouro);background:var(--ouro-leve);color:var(--branco)}
.alert.err{border:1px solid var(--erro);background:var(--erro-bg);color:var(--branco)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.card{
  position:relative;background:var(--preto-2);border:1px solid var(--grafite);
  border-radius:var(--r-md);padding:20px;
}
.card-alerta{border-left:2px solid var(--erro)}
.card-ok{border-left:2px solid var(--ouro)}
.card h3,.card strong{font-family:var(--font-ui);color:var(--branco)}
.bloco{
  background:var(--preto-2);border:var(--filete-borda);border-radius:var(--r-md);padding:var(--pad-bloco);margin-bottom:24px;
}
.bloco-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.bloco-head h2,.bloco-head h3{font-family:var(--display);text-transform:uppercase;color:var(--branco);font-size:1.1rem}
.bloco-head + .filete-x{margin-bottom:16px}
.muted{color:var(--cinza-2)}
.sync-stats{font-family:var(--font-ui)}
.sync-stats strong,.sync-stats .num{color:var(--branco)}
.sync-stats span,.sync-stats .label{color:var(--cinza)}

/* =============================================================================
   21. RESPONSIVO
   ========================================================================== */
@media (max-width:1024px){
  .home-layout{grid-template-columns:1fr}
  .home-cats{position:static}
  .home-cats h3{display:none}
  .home-cats ul{display:flex;gap:8px;overflow-x:auto;padding:12px;scrollbar-width:none}
  .home-cats ul::-webkit-scrollbar{display:none}
  .home-cats li{border:0;flex:0 0 auto}
  .home-cats a{
    border:1px solid var(--carvao);border-radius:var(--r-pill);padding:8px 16px;white-space:nowrap;
  }
  .home-cats a span{display:none}
  .loja{grid-template-columns:1fr}
  .filtros-loja{position:static}
}
@media (max-width:768px){
  .header-inner{grid-template-columns:auto 1fr auto auto;height:64px}
  .nav-toggle,#navToggle{display:inline-flex}
  .brand-name{display:none}
  .busca{grid-column:1 / -1;order:5;margin-top:-8px}
  /* catnav vira painel vertical */
  .catnav,#catnav{
    position:fixed;top:0;left:0;bottom:0;width:min(280px,82%);background:var(--preto-2);
    border-right:var(--filete-borda);border-bottom:0;z-index:80;
    transform:translateX(-100%);transition:transform var(--transicao);overflow-y:auto;
  }
  .catnav.open,#catnav.open{transform:translateX(0)}
  .catnav-inner{flex-direction:column;align-items:stretch;height:auto;gap:0;padding:24px 20px}
  .catnav-inner a{padding:14px 0;border-bottom:1px solid var(--carvao)}
  .catnav a::after,.catnav-inner a::after{display:none}
  .hero-inner{grid-template-columns:1fr}
  .hero-txt{order:1}
  .hero-prod{order:2;max-width:420px}
  .hero-stripes{opacity:.06}
  .hero-marca{width:340px;opacity:.04}
  .beneficios-grid{grid-template-columns:1fr 1fr}
  .benef:nth-child(odd){border-left:0}
  .produto,#produto{grid-template-columns:1fr}
  .produto-img{position:static}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .container{padding-inline:16px}
  .header-inner{padding-inline:16px}
  .catnav-inner{padding-inline:16px}
  .hero-inner{padding-inline:16px}
  .beneficios-grid{padding-inline:16px}
  .home-layout{padding-inline:16px}
  .grid-prod{grid-template-columns:repeat(2,minmax(160px,1fr));gap:14px}
  .topbar .container,.topbar > div{font-size:.66rem;letter-spacing:.1em}
  :root{--cantoneira:10px}
  .beneficios-grid{grid-template-columns:1fr}
  .benef{border-left:0;border-top:1px solid var(--carvao);padding:18px 0}
  .benef:first-child{border-top:0}
  .cart-drawer,#cartDrawer{width:100%;border-left:none}
  .cart-head{position:sticky;top:0;background:var(--preto-2);z-index:2}
  .footer-grid{padding-inline:16px}
  .loja{padding-inline:16px}
  .produto,#produto{padding-inline:16px}
  .pagina-head{padding-inline:16px}
}