/* ============================================================
   HM MODA MASCULINA — VITRINE v4 (header + hero + luxo preto/dourado)
   ------------------------------------------------------------
   Ainda separado do hm.css antigo (o painel admin depende dele).

   Referencia de LAYOUT (nao de cor): vitrines modernas tipo Myller —
   header com menu, hero em carrossel, tiles de categoria, secoes
   curadas (Novidades, Mais Vendidos...) e so DEPOIS o catalogo
   completo com filtro. A COR e da marca: preto + dourado em degrade,
   clima de realeza/luxo. Nada de vermelho/branco como base — vermelho
   so entra num tema sazonal especifico (Natal, Black Friday).
   ============================================================ */
:root {
  /* ---------- PALETA DA MARCA — mexe AQUI pra calibrar o dourado ---------- */
  --preto:        #0a0a0a;
  --preto-2:      #121214;
  --grafite:      #1b1b1e;
  --grafite-2:    #232326;
  --grafite-3:    #313135;
  --linha:        #2c2c30;
  --linha-2:      #3c3c41;

  --ouro-escuro:  #9c7522;
  --ouro:         #c9962f;
  --ouro-claro:   #f7d774;
  --ouro-brilho:  #fff3c9;
  /* degrade padrao usado em texto/botao/selo dourado */
  --degrade-ouro: linear-gradient(120deg, var(--ouro-escuro) 0%, var(--ouro) 35%, var(--ouro-claro) 60%, var(--ouro) 85%, var(--ouro-escuro) 100%);
  --degrade-fundo: linear-gradient(180deg, var(--grafite) 0%, var(--preto) 100%);

  --texto:        #f3efe4;
  --texto-suave:  #b7b2a4;
  --texto-fraco:  #7b776c;
  --branco:       #ffffff;

  --zap:          #25D366;
  --erro:         #ff6b6b;
  --sucesso:      var(--ouro-claro);

  /* cores de tema sazonal — o padrao (sem tema) usa o proprio dourado.
     Cada tema sazonal reescreve so estas duas variaveis (ver secao TEMAS). */
  --tema-1: var(--ouro-escuro);
  --tema-2: var(--ouro-claro);

  --f-display: 'Oswald', 'Bahnschrift', 'Arial Narrow', sans-serif;
  --f-corpo:   'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;

  --raio: 10px;
  --sombra:   0 8px 24px rgba(0,0,0,.35);
  --sombra-g: 0 24px 60px rgba(0,0,0,.55);
  --brilho:   0 0 0 1px rgba(201,150,47,.35), 0 6px 22px rgba(201,150,47,.16);
  --tr: .25s cubic-bezier(.22,.61,.36,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x escondido: sacola e menu mobile ficam estacionados FORA da tela
   (translateX) esperando abrir. Sem isto vira rolagem lateral fantasma. */
/* overflow-x: CLIP (nao "hidden"): corta a rolagem lateral do menu/sacola
   fora da tela SEM criar um container de rolagem — assim o topo (position:sticky)
   gruda de verdade ao rolar. "hidden" quebrava o sticky. */
html, body { overflow-x: clip; max-width: 100%; }
body {
  font-family: var(--f-corpo); background: var(--preto); color: var(--texto);
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--ouro); color: var(--preto); }

.container { max-width: 1760px; margin: 0 auto; padding: 0 44px; }
@media (max-width: 900px) { .container { padding: 0 22px; } }
@media (max-width: 640px) { .container { padding: 0 16px; } }

.display { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
/* texto com o degrade dourado — usar so em titulos/precos/selos, com moderacao */
.txt-ouro {
  background: var(--degrade-ouro); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================ CABECALHO */
.cabecalho {
  position: sticky; top: 0; z-index: 220; background: rgba(10,10,10,.94);
  border-bottom: 1px solid var(--linha);
}
.cab-linha { display: flex; align-items: center; gap: 18px; padding: 10px 14px 10px 4px; max-width: 1760px; margin: 0 auto; }
@media (max-width: 900px) { .cab-linha { padding: 10px 12px 10px 4px; gap: 10px; } }

.btn-menu-mob { display: none; width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; }
.btn-menu-mob svg { width: 23px; height: 23px; margin: auto; color: var(--texto); }

/* logo: SVG INLINE no cabecalho (nao <img>) pra dar pra animar o brilho de
   dentro e sobrepor o gorro de Natal na coroa. Vetorial = nitida em qualquer
   tamanho, sem a moldura preta que a versao antiga (foto/PNG) tinha. */
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-img { height: 60px; width: auto; overflow: visible; filter: brightness(1.28) saturate(1.12); }
/* desktop mostra a logo animada (GIF); celular mostra so' o emblema */
.logo-mob { display: none; }
.logo-desktop { height: 62px; }
@media (max-width: 700px) {
  .logo-desktop { display: none; }
  .logo-mob { display: block; height: 46px; }
}
/* entrada suave: sutil, nada de girar ou piscar - e uma assinatura de luxo,
   nao um banner. */
.logo-img { animation: logoEntra .9s cubic-bezier(.22,.61,.36,1) both; }
@keyframes logoEntra { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }

/* brilho que atravessa a logo de tempos em tempos: e o <rect class="logo-brilho">
   que ja vem dentro do SVG (largura 70, viewBox de 320) — so anima a posicao. */
.logo-brilho { opacity: 0; transform: translateX(-90px); animation: logoBrilho 6s ease-in-out infinite; }
@keyframes logoBrilho {
  0%, 55% { transform: translateX(-90px); opacity: 0; }
  70% { opacity: .9; }
  90%, 100% { transform: translateX(340px); opacity: 0; }
}

/* gorro de Papai Noel sobre a coroa: SO no tema natal (ver secao TEMAS
   SAZONAIS mais abaixo pra troca de data/paleta) */
.logo-gorro-natal { display: none; }
html[data-tema="natal"] .logo-gorro-natal { display: inline; }

/* busca GRANDE no centro do topo (igual referencia): sempre visivel, nao e
   um icone que abre gaveta. No celular ela desce pra segunda linha (ver
   media query no fim do cabecalho). */
.busca-central {
  flex: 1; max-width: 1400px; margin: 0 22px; position: relative; display: flex; align-items: center;
}
.busca-central svg { position: absolute; left: 18px; width: 20px; height: 20px; color: var(--texto-fraco); pointer-events: none; }
.busca-central input {
  width: 100%; padding: 15px 16px 15px 50px; border-radius: 12px; outline: none; font-size: 15px;
  background: var(--grafite); border: 1px solid var(--linha-2); color: var(--texto); transition: var(--tr);
}
.busca-central input:focus { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(201,150,47,.18); }

.cab-acoes { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.acao-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 10px; border-radius: 9px; transition: var(--tr); color: var(--texto); }
.acao-btn:hover { background: var(--grafite-2); color: var(--ouro-claro); }
.acao-btn svg { width: 21px; height: 21px; }
.acao-btn .acao-rot { font-size: 10.5px; font-weight: 600; }
.acao-btn .badge {
  position: absolute; top: -2px; right: 2px; min-width: 17px; height: 17px; border-radius: 9px;
  background: var(--degrade-ouro); color: var(--preto); font-family: var(--f-corpo); font-weight: 800;
  font-size: 10.5px; display: grid; place-items: center; padding: 0 4px;
}
.acao-btn .badge[hidden] { display: none; }

/* WhatsApp no topo: so' o icone BRANCO, ao lado de Conta/Sacola (sem bola verde) */
.cab-zap {
  display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: 2px; flex-shrink: 0;
  padding: 5px 10px; border-radius: 9px; background: none; color: var(--texto);
  cursor: pointer; border: 0; transition: var(--tr);
}
.cab-zap:hover { background: var(--grafite-2); color: var(--ouro-claro); }
.cab-zap svg { width: 21px; height: 21px; }
.cab-zap .acao-rot { font-size: 10.5px; font-weight: 600; }

/* ---- segunda linha do cabecalho: categorias + info da loja ---- */
/* no celular ela fica vazia (menu vira gaveta) — some junto. So categorias
   aqui: o endereco saiu (ficava poluido do lado do menu) e mora so no rodape. */
.barra-menu { display: none; border-top: 1px solid var(--linha); background: var(--preto-2); }
@media (min-width: 900px) { .barra-menu { display: block; } }
.barra-menu-linha { display: flex; align-items: center; gap: 14px; }
.menu-desktop { display: none; align-items: center; gap: 4px; flex-wrap: wrap; }
.menu-desktop a {
  padding: 11px 13px; border-radius: 0; font-size: 13.5px; font-weight: 500;
  color: var(--texto-suave); transition: var(--tr); white-space: nowrap;
}
.menu-desktop a:hover, .menu-desktop a.ativo { color: var(--ouro-claro); }

/* ---- menu mobile (categorias em gaveta) ---- */
.menu-mobile {
  position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 84%); z-index: 320;
  background: var(--preto-2); border-right: 1px solid var(--linha); transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.22,.61,.36,1); display: flex; flex-direction: column;
}
.menu-mobile.aberto { transform: translateX(0); box-shadow: var(--sombra-g); }
.menu-mobile-cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--linha); }
.menu-mobile-cab img { height: 30px; }
.menu-mobile-cab button { width: 34px; height: 34px; font-size: 22px; color: var(--texto); }
.menu-mobile-lista { flex: 1; overflow-y: auto; padding: 10px 12px; }
.menu-mobile-lista a {
  display: flex; align-items: center; gap: 10px; padding: 12px 12px; border-radius: 8px;
  color: var(--texto-suave); font-size: 15px; transition: var(--tr);
}
.menu-mobile-lista a:hover, .menu-mobile-lista a.ativo { background: var(--grafite-2); color: var(--ouro-claro); }
.menu-mobile-lista .qt { margin-left: auto; font-size: 12px; color: var(--texto-fraco); }
.menu-mobile-lista .sep { border-top: 1px solid var(--linha); margin: 8px 4px; }

/* ============================================================ HERO: foto + cupom */
.hero-myller { position: relative; padding: 0; background: var(--degrade-fundo); overflow: hidden; }
.hero-myller-grid { position: relative; z-index: 2; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .hero-myller-grid { grid-template-columns: 1.5fr 1fr; align-items: stretch; } }

/* fogos de artificio do tema Ano Novo: escondidos no padrao e nos outros
   temas, so aparecem em html[data-tema="ano-novo"] (ver TEMAS SAZONAIS) */
.fogos-ano-novo { display: none; position: absolute; inset: 0 0 auto 0; height: 130px; z-index: 1; pointer-events: none; }
html[data-tema="ano-novo"] .fogos-ano-novo { display: block; }
.fogo { position: absolute; top: 46px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ouro-claro); box-shadow: 0 0 10px 3px var(--ouro-claro); }
.fogo-1 { left: 16%; animation: fogoBrilha 2.6s ease-out .1s infinite; }
.fogo-2 { left: 52%; top: 30px; animation: fogoBrilha 2.6s ease-out .9s infinite; }
.fogo-3 { left: 84%; animation: fogoBrilha 2.6s ease-out 1.7s infinite; }
.fogo::before, .fogo::after { content: ''; position: absolute; inset: -34px; border-radius: 50%;
  border: 2px solid var(--tema-2); opacity: 0; transform: scale(.2);
  animation: fogoEstoura 2.6s ease-out infinite; }
.fogo::after { border-color: var(--ouro-claro); }
/* mesmo atraso da explosao (::before/::after) do respectivo ponto, pra nascer
   junto com o brilho central - so o ::after um pouco depois, de "eco" */
.fogo-1::before, .fogo-1::after { animation-delay: .1s; }
.fogo-1::after { animation-delay: .25s; }
.fogo-2::before, .fogo-2::after { animation-delay: .9s; }
.fogo-2::after { animation-delay: 1.05s; }
.fogo-3::before, .fogo-3::after { animation-delay: 1.7s; }
.fogo-3::after { animation-delay: 1.85s; }
@keyframes fogoBrilha { 0%, 15% { opacity: 0; } 22% { opacity: 1; } 60% { opacity: .8; } 100% { opacity: 0; } }
@keyframes fogoEstoura {
  0%, 12% { transform: scale(.15); opacity: 0; }
  28% { opacity: .9; }
  70% { opacity: .25; }
  100% { transform: scale(1.2); opacity: 0; }
}

.hero-foto { position: relative; border-radius: 14px; overflow: hidden; min-height: 260px;
  border: 1px solid var(--linha-2); box-shadow: var(--sombra-g); }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero-foto::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 45%), linear-gradient(100deg, rgba(0,0,0,.55) 0%, transparent 55%); }
.hero-selo {
  position: absolute; left: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(10,10,10,.72); border: 1px solid rgba(201,150,47,.5); color: var(--ouro-claro);
  padding: 9px 15px; border-radius: 24px; font-size: 12.5px; font-weight: 700; letter-spacing: .4px;
}
.hero-selo svg { width: 18px; height: 18px; }

.hero-cupom-card {
  background: var(--grafite); border: 1px solid var(--linha-2); border-radius: 14px; padding: 30px 28px;
  display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;
}
.hero-cupom-card::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 0%, rgba(201,150,47,.14), transparent 55%); pointer-events: none; }
.hero-selo-tema {
  display: none; align-items: center; gap: 7px; width: fit-content; padding: 6px 13px; border-radius: 20px;
  font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--preto); margin-bottom: 14px;
  background: linear-gradient(120deg, var(--tema-1), var(--tema-2));
}
[data-tema]:not([data-tema="padrao"]) .hero-selo-tema { display: inline-flex; }
.hero-eyebrow { font-family: var(--f-display); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--ouro-claro); }
.hero-cupom-card h1 {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; line-height: 1.1;
  font-size: clamp(24px, 3.4vw, 32px); margin: 10px 0 12px;
}
.hero-cupom-card p { color: var(--texto-suave); font-size: 14px; margin-bottom: 20px; }
.btn-hero {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: 9px; width: fit-content;
  background: var(--degrade-ouro); color: var(--preto); font-family: var(--f-display); font-weight: 700;
  font-size: 13.5px; letter-spacing: 1px; text-transform: uppercase; transition: var(--tr); box-shadow: var(--brilho);
}
.btn-hero:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ---- CARROSSEL DE BANNERS (28/09): vários banners de largura total passando,
   com bolinhas embaixo e setas/arrastar. ---- */
.hero-slider { position: relative; z-index: 2; width: 100%; overflow: hidden;
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.hero-track { display: flex; transition: transform .55s cubic-bezier(.4,.0,.2,1); }
.hero-slide { position: relative; flex: 0 0 100%; min-width: 100%;
  min-height: clamp(440px, 70vh, 720px); display: flex; align-items: center; overflow: hidden; }
.hero-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-slide::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(8,8,8,.94) 0%, rgba(8,8,8,.82) 34%, rgba(8,8,8,.32) 64%, rgba(8,8,8,.12) 84%, rgba(8,8,8,.5) 100%); }
/* slide VIP (sem foto): fundo escuro com brilho dourado */
.hero-slide-vip { background:
  radial-gradient(circle at 82% 18%, rgba(201,150,47,.22), transparent 55%),
  linear-gradient(120deg, #0c0c0c 0%, #171310 55%, #0c0c0c 100%); }
.hero-slide-vip::after { display: none; }
/* slide da capa: arte pronta, sem escurecer e sem texto por cima */
.hero-slide-capa::after { display: none; }
.hero-slide-capa .hero-banner-img { object-fit: cover; object-position: center; }
/* slide 2 (arte VIP pronta): a imagem fica num wrapper com a proporcao EXATA
   dela (2.5:1); assim os pontos de clique (%) batem certinho nos botoes
   desenhados em qualquer largura. */
.hero-slide-vip2 { justify-content: center; overflow: hidden;
  background: linear-gradient(120deg, #0c0c0c 0%, #171310 55%, #0c0c0c 100%); }
.hero-slide-vip2::after { display: none; }
.vip2-arte { position: relative; width: 100%; max-width: 1983px; aspect-ratio: 1983 / 793; margin: 0 auto; }
.vip2-arte .hero-banner-img { object-fit: contain; object-position: center; }
.hero-hotspot { position: absolute; z-index: 3; display: block; border-radius: 10px; }
.hero-hotspot.hs-insta { left: 52.2%; width: 22.4%; top: 71%; height: 15.5%; }
.hero-hotspot.hs-vip   { left: 75.2%; width: 22.6%; top: 71%; height: 15.5%; }
/* capa: larga no desktop, recorte proprio no celular (mostra tudo, sem cortar) */
.capa-mob { display: none; }
@media (max-width: 640px) {
  /* no celular mostra a CAPA INTEIRA (foto completa). O slide da capa ganha a
     PROPORCAO da foto (2.5:1), entao a imagem preenche certinho, sem tarjas
     pretas e sem ficar gigante. */
  .hero-slide-capa .capa-desk { display: block; object-fit: contain; object-position: center; }
  .hero-slide-capa .capa-mob { display: none; }
}
.hero-banner-inner { position: relative; z-index: 2; width: 100%; }
.hero-banner-conteudo { max-width: 640px; padding: 40px 0; }
.hero-banner-conteudo .hero-eyebrow { display: block; margin-bottom: 10px; }
.hero-banner-conteudo h1 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  line-height: 1.05; font-size: clamp(32px, 5vw, 58px); margin: 6px 0 16px; }
.hero-banner-conteudo p { color: var(--texto-suave); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55;
  margin-bottom: 26px; max-width: 520px; }
.hero-botoes { display: flex; flex-wrap: wrap; gap: 12px; }
/* botao secundario (grupo VIP): contorno dourado */
.btn-hero-sec { background: transparent; color: var(--ouro-claro); border: 1.5px solid var(--ouro); box-shadow: none; }
.btn-hero-sec:hover { background: rgba(201,150,47,.12); }
/* setas */
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(10,10,10,.5); color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: var(--tr); backdrop-filter: blur(2px); }
.hero-arrow:hover { background: rgba(10,10,10,.8); border-color: var(--ouro); color: var(--ouro-claro); }
.hero-arrow svg { width: 22px; height: 22px; }
.hero-prev { left: 18px; } .hero-next { right: 18px; }
/* bolinhas */
.hero-dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 5;
  display: flex; justify-content: center; gap: 9px; }
.hero-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.4); transition: var(--tr); padding: 0; }
.hero-dots button.ativo { background: var(--degrade-ouro); width: 26px; border-radius: 5px; }
@media (max-width: 640px) {
  /* altura do slide ~= altura da foto da capa (390px de largura, 2.5:1 => ~156px),
     assim a foto INTEIRA aparece colada na busca, sem tarja em cima nem embaixo. */
  .hero-slide { min-height: 160px; align-items: flex-end; }
  .hero-slide::after { background: linear-gradient(0deg, rgba(8,8,8,.96) 14%, rgba(8,8,8,.55) 58%, rgba(8,8,8,.2) 100%); }
  .hero-banner-conteudo { padding: 12px 0 14px; max-width: 100%; }
  .hero-banner-conteudo h1 { font-size: clamp(24px, 6.5vw, 32px); margin: 4px 0 10px; }
  .hero-banner-conteudo p { display: none; }
  .hero-botoes { gap: 8px; }
  .hero-arrow { width: 38px; height: 38px; }
  .hero-prev { left: 8px; } .hero-next { right: 8px; }
}

/* ============================================================ FAIXA DE BENEFICIOS */
.beneficios { border-bottom: 1px solid var(--linha); background: var(--preto-2); }
.beneficios-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linha); }
@media (min-width: 700px) { .beneficios-grid { grid-template-columns: repeat(4, 1fr); } }
.beneficio { background: var(--preto-2); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 18px; }
.beneficio svg { width: 26px; height: 26px; color: var(--ouro-claro); flex-shrink: 0; }
.beneficio b { display: block; font-size: 13px; color: var(--texto); }
.beneficio span { display: block; font-size: 11.5px; color: var(--texto-fraco); margin-top: 1px; }

/* ============================================================ NAVEGACAO RAPIDA (categorias em circulo) */
.nav-rapida-secao { padding: 26px 0 6px; }
.nav-rapida { display: flex; gap: 18px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.nav-rapida::-webkit-scrollbar { display: none; }
/* desktop: bolinhas MAIORES distribuidas por TODA a largura (de ponta a ponta,
   sem vazio nas laterais); celular: rolagem horizontal como no Instagram */
@media (min-width: 900px) {
  .nav-rapida { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; justify-items: center; gap: 12px; overflow: visible; }
}
.nav-circulo { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 108px; text-align: center; }
@media (min-width: 900px) { .nav-circulo { width: auto; } }
.nav-circulo-ic {
  width: 96px; height: 96px; aspect-ratio: 1 / 1; flex-shrink: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #23201a 0%, #141210 70%);
  border: 2px solid var(--ouro); box-sizing: border-box;
  display: grid; place-items: center; transition: var(--tr); overflow: hidden;
}
/* com FOTO: anel dourado UNIFORME (solido, nao degrade) em volta da foto */
.nav-circulo-ic.com-foto { border: 0; padding: 3px; background: var(--ouro); }
.nav-circulo-ic.com-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center; display: block; }
.nav-circulo:hover .nav-circulo-ic { box-shadow: var(--brilho); filter: brightness(1.08); transform: translateY(-2px); }
.nav-circulo-ic svg { width: 40px; height: 40px; color: var(--ouro-claro); }
.nav-circulo-nome { font-size: 12px; color: var(--texto-suave); line-height: 1.25; max-width: 100px; }

/* ============================================================ SECOES CURADAS + CARROSSEL */
.titulo-secao { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.titulo-secao h2 { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .5px; font-size: clamp(20px,3vw,26px); }
.titulo-secao .ver-tudo { font-size: 12.5px; font-weight: 700; letter-spacing: .5px; color: var(--ouro-claro); white-space: nowrap; }
.titulo-secao .ver-tudo:hover { text-decoration: underline; }

.secao { padding: 28px 0; border-top: 1px solid var(--linha); }

/* carrossel real: arrasta com o dedo (scroll-snap + -webkit-overflow-scrolling),
   scrollbar nativa ESCONDIDA, e setas que avancam "um cartao" por clique
   (a referencia pediu isso explicitamente — nada de barra feia aparecendo) */
.carrossel { position: relative; margin-top: 16px; }
.secao-linha {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.secao-linha::-webkit-scrollbar { display: none; }
/* no celular o carrossel mostra 2 cards por vez (igual o catalogo 2 a 2), sem
   aquele "um card e meio"; no desktop volta a ter cards de largura fixa */
.secao-linha .card { flex: 0 0 calc(50% - 7px); scroll-snap-align: start; }
@media (min-width: 700px) { .secao-linha .card { flex: 0 0 224px; } }
.car-seta {
  display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px;
  border-radius: 50%; background: rgba(10,10,10,.85); border: 1px solid var(--linha-2); color: var(--texto);
  align-items: center; justify-content: center; transition: var(--tr); box-shadow: var(--sombra);
}
.car-seta:hover { border-color: var(--ouro); color: var(--ouro-claro); }
.car-seta svg { width: 20px; height: 20px; }
.car-prev { left: -14px; }
.car-next { right: -14px; }
/* setas so no desktop: no celular o dedo ja resolve, e um botao de 40px em
   cima do carrossel roubaria espaco de toque das fotos */
@media (min-width: 900px) {
  .car-seta { display: flex; }
}

/* ============================================================ CARD DE PRODUTO */
.card {
  background: var(--grafite); border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden; display: flex; flex-direction: column; transition: var(--tr); cursor: pointer;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-g); border-color: var(--ouro-escuro); }
.card-foto { aspect-ratio: 1/1; position: relative; overflow: hidden; background: var(--preto); }
.card-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .card-foto img { transform: scale(1.045); }
.card-tags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; }
/* fonte de CORPO aqui, nao a de display: o Oswald condensado em negrito, uppercase
   e menos de 11px fecha o furo do "O" e vira "D" — ilegivel. Inter aguenta o
   tamanho pequeno sem perder a letra. */
.tag { font-family: var(--f-corpo); font-size: 11px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; padding: 4px 9px; border-radius: 4px; color: var(--preto); }
.tag.novo { background: linear-gradient(120deg, var(--texto), #cfcfcf); }
.tag.promo { background: var(--degrade-ouro); }
[data-tema="black-friday"] .tag.promo { background: linear-gradient(120deg, var(--tema-2), #7a0d12); color: #fff; }
.tag.top { background: var(--degrade-ouro); }
.card-frete {
  position: absolute; bottom: 10px; left: 10px; right: 10px; background: rgba(10,10,10,.82);
  border: 1px solid rgba(201,150,47,.4); color: var(--ouro-claro); font-size: 10.5px; font-weight: 600;
  text-align: center; padding: 5px 6px; border-radius: 6px; letter-spacing: .3px;
}

.card-info { padding: 14px 15px 16px; flex: 1; display: flex; flex-direction: column; }
/* mesmo motivo do .tag: Oswald bold uppercase abaixo de ~12px fecha o "O" */
.card-marca { font-family: var(--f-corpo); font-size: 11.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ouro); font-weight: 800; }
.card-nome { font-size: 14.5px; font-weight: 500; margin: 4px 0 10px; line-height: 1.34; color: var(--texto);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 39px; }
.card-precos { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card-preco { font-family: var(--f-display); font-weight: 700; font-size: 21px; color: var(--ouro-claro); }
.card-antigo { font-size: 13px; color: var(--texto-fraco); text-decoration: line-through; }
.card-parcela { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }
.card-add { margin-top: 11px; width: 100%; background: var(--grafite-2); color: var(--texto); padding: 11px;
  border: 1px solid var(--linha-2); border-radius: 8px; font-family: var(--f-display); font-size: 12.5px;
  letter-spacing: 1px; text-transform: uppercase; transition: var(--tr); }
.card-add:hover { background: var(--degrade-ouro); color: var(--preto); border-color: transparent; }

.vazio { grid-column: 1/-1; text-align: center; padding: 70px 20px; color: var(--texto-fraco); }
.vazio svg { width: 56px; height: 56px; margin: 0 auto 14px; color: var(--linha-2); }

/* ============================================================ CATALOGO COMPLETO */
.catalogo-full { padding: 36px 0 60px; border-top: 1px solid var(--linha); background: var(--preto-2); }
.catalogo-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 0 0 18px; }
.catalogo-cab h2 { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .5px; font-size: clamp(20px,3vw,26px); }
.catalogo-ferramentas { display: flex; align-items: center; gap: 10px; }
.catalogo-ferramentas select {
  padding: 10px 12px; border-radius: 8px; background: var(--grafite); border: 1px solid var(--linha-2);
  color: var(--texto); outline: none;
}
.chips-cat { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 16px; }
.chip-cat {
  flex-shrink: 0; padding: 8px 15px; border-radius: 20px; border: 1px solid var(--linha-2);
  font-size: 13px; font-weight: 600; color: var(--texto-suave); transition: var(--tr); white-space: nowrap;
}
.chip-cat:hover { border-color: var(--ouro-escuro); color: var(--texto); }
.chip-cat.ativo { background: var(--degrade-ouro); color: var(--preto); border-color: transparent; }

/* ============================================================ GRADE */
.grade { padding: 6px 0 10px; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
@media (min-width: 640px) { .grade { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } }

/* ============================================================ JANELA DO PRODUTO */
.veu { position: fixed; inset: 0; background: rgba(0,0,0,.68);
  opacity: 0; visibility: hidden; transition: .28s; z-index: 300; }
.veu.aberto { opacity: 1; visibility: visible; }

.janela { position: fixed; z-index: 320; left: 50%; top: 50%; transform: translate(-50%,-46%) scale(.97);
  width: min(940px, calc(100% - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--grafite); border: 1px solid var(--linha-2); border-radius: 14px;
  opacity: 0; visibility: hidden; transition: .28s; }
.janela.aberto { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); }
/* acoes do topo da janela: compartilhar + fechar, dois icones redondos juntos */
.janela-acoes { position: absolute; right: 12px; top: 12px; z-index: 5; display: flex; gap: 8px; }
.janela-ic { width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(10,10,10,.72); color: var(--texto); border: 1px solid var(--linha-2);
  display: grid; place-items: center; transition: var(--tr); backdrop-filter: blur(3px); }
.janela-ic:hover { background: rgba(10,10,10,.92); border-color: var(--ouro); color: var(--ouro-claro); }
.janela-ic svg { width: 18px; height: 18px; }
.janela-x { font-size: 22px; line-height: 1; }
.jp { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
/* MOLDURA FIXA (mesma caixa pra TODAS as fotos, qualquer angulo/formato):
   quadrada. A foto aparece INTEIRA (contain, nunca corta) e o resto da caixa
   e preenchido por um DESFOQUE da propria foto — sem branco, sem zoom. */
.jp-foto { background: #111; position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
.jp-foto img { width: 100%; height: 100%; object-fit: contain; }
.jp-galeria { position: relative; user-select: none; }
.jp-gal-track { display: flex; width: 100%; height: 100%; transition: transform .35s ease; }
.jp-gal-slide { flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; position: relative; }
.jp-gal-slide::before { content: ''; position: absolute; inset: 0; background-image: var(--bg);
  background-size: cover; background-position: center; filter: blur(26px) brightness(.5); transform: scale(1.2); }
.jp-gal-slide img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.jp-gal-seta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px;
  border-radius: 50%; border: 0; background: rgba(10,10,10,.5); color: #fff; font-size: 24px; line-height: 1;
  display: grid; place-items: center; cursor: pointer; transition: var(--tr); }
.jp-gal-seta:hover { background: rgba(10,10,10,.82); color: var(--ouro-claro); }
.jp-gal-prev { left: 10px; } .jp-gal-next { right: 10px; }
.jp-gal-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 7px; z-index: 3; }
.jp-gal-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; transition: var(--tr); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.jp-gal-dots span.on { background: var(--ouro-claro); width: 22px; border-radius: 4px; }
.jp-gal-dica { position: absolute; top: 10px; left: 10px; z-index: 3; background: rgba(10,10,10,.62); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .3px; padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(3px); }
/* coluna da foto + faixa de miniaturas clicaveis embaixo */
.jp-col-foto { min-width: 0; }
.jp-thumbs { display: flex; gap: 8px; padding: 10px 10px 2px; overflow-x: auto; scrollbar-width: thin; }
.jp-thumb { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 8px; overflow: hidden;
  border: 2px solid var(--linha-2); background: #111; cursor: pointer; padding: 0; transition: var(--tr); }
.jp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jp-thumb:hover { border-color: var(--ouro-claro); }
.jp-thumb.on { border-color: var(--ouro); }
.jp-dados { padding: 30px 30px 26px; }
.jp-topo-dados { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* Inter, nao Oswald: o condensado bold uppercase abaixo de ~13px fecha o "O"
   (virou "TECHNDS" na tela) — mesmo motivo do .tag e do .card-marca. */
.jp-marca { font-family: var(--f-corpo); font-size: 12.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ouro); font-weight: 800; }
.jp-compartilhar {
  display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 20px;
  border: 1px solid var(--linha-2); color: var(--texto-suave); font-size: 12px; font-weight: 600;
  white-space: nowrap; transition: var(--tr);
}
.jp-compartilhar:hover { border-color: var(--ouro); color: var(--ouro-claro); }
.jp-compartilhar svg { width: 16px; height: 16px; }
.jp-nome { font-family: var(--f-display); font-size: 27px; text-transform: uppercase;
  line-height: 1.1; margin: 6px 0 10px; color: var(--texto); }
.jp-desc { font-size: 14px; color: var(--texto-suave); margin-bottom: 16px; }
.jp-precos { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.jp-preco { font-family: var(--f-display); font-size: 34px; font-weight: 700; color: var(--ouro-claro); }
.jp-antigo { font-size: 15px; color: var(--texto-fraco); text-decoration: line-through; }
.jp-parcela { font-size: 13px; color: var(--texto-suave); margin-bottom: 18px; }

.jp-grupo { margin-bottom: 16px; }
.jp-rot { font-family: var(--f-display); font-size: 12px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--texto-suave); margin-bottom: 8px; }
.jp-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.op { padding: 9px 15px; border: 1.5px solid var(--linha-2); border-radius: 8px;
  font-size: 13.5px; transition: var(--tr); background: var(--grafite-2); color: var(--texto); }
.op:hover { border-color: var(--ouro); }
.op.sel { border-color: var(--ouro); background: var(--degrade-ouro); color: var(--preto); font-weight: 600; }
/* cor com foto propria (cadastrada no admin) vira SWATCH: miniatura + nome.
   Clicar troca a foto principal da peca pra aquela cor (ver fotoDaCor no JS) */
.op-cor { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; }
.op-cor img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.3); }
.op-cor.sel img { border-color: var(--preto); }
/* seletor de cor estilo Shein/Shopee: foto da cor + nome, cartao selecionavel */
.op-corcard { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; padding: 6px 6px 8px;
  border: 1.5px solid var(--linha-2); border-radius: 12px; background: transparent; cursor: pointer; transition: var(--tr); }
.op-corcard:hover { border-color: var(--ouro); }
.op-corcard.sel { border-color: var(--ouro); background: rgba(201,150,47,.12); }
.op-corcard .cc-foto { width: 60px; height: 60px; border-radius: 9px; overflow: hidden; background: #f4f4f2; display: block; }
.op-corcard .cc-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-corcard .cc-sem { display: block; width: 100%; height: 100%; background: linear-gradient(135deg,#3a3a3a,#1c1c1c); }
.op-corcard .cc-nome { font-size: 11.5px; line-height: 1.15; color: var(--texto-suave); text-align: center; max-width: 66px; }
.op-corcard.sel .cc-nome { color: var(--texto); font-weight: 600; }

.jp-qtd { display: inline-flex; align-items: center; gap: 16px; border: 1.5px solid var(--linha-2);
  border-radius: 8px; padding: 7px 14px; }
.jp-qtd button { font-size: 19px; font-weight: 700; width: 22px; color: var(--texto); }
.jp-estoque { font-size: 12.5px; color: var(--texto-suave); margin-top: 8px; }
.jp-estoque b { color: var(--ouro-claro); }
.jp-add { width: 100%; background: var(--degrade-ouro); color: var(--preto); padding: 16px; border-radius: 9px;
  font-family: var(--f-display); font-size: 14.5px; letter-spacing: 1.4px; text-transform: uppercase;
  margin-top: 18px; transition: var(--tr); box-shadow: var(--brilho); }
.jp-add:hover { filter: brightness(1.08); }
.jp-add:disabled { background: var(--grafite-3); color: var(--texto-fraco); cursor: not-allowed; box-shadow: none; }

/* ============================================================ SACOLA */
.sacola { position: fixed; top: 0; right: 0; height: 100%; width: min(430px, 100%); z-index: 340;
  background: var(--grafite); border-left: 1px solid var(--linha-2);
  transform: translateX(100%); transition: transform .32s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column; }
.sacola.aberta { transform: translateX(0); }
.sac-cab { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px;
  background: var(--preto); color: var(--texto); border-bottom: 1px solid var(--linha); }
.sac-cab h3 { font-family: var(--f-display); font-size: 21px; text-transform: uppercase; letter-spacing: 1px; }
.sac-cab button { font-size: 26px; color: var(--texto); width: 34px; }
.sac-corpo { flex: 1; overflow-y: auto; padding: 6px 22px; }
.sac-vazia { text-align: center; padding: 70px 16px; color: var(--texto-fraco); }
.sac-vazia svg { width: 58px; height: 58px; margin: 0 auto 14px; color: var(--linha-2); }

.item { display: flex; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--linha); }
.item-foto { width: 74px; height: 74px; border-radius: 7px; overflow: hidden; background: var(--preto); flex-shrink: 0; }
.item-foto img { width: 100%; height: 100%; object-fit: cover; }
.item-d { flex: 1; min-width: 0; }
.item-nome { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--texto); }
.item-nome:hover { color: var(--ouro-claro); text-decoration: underline; }
.item-var { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.item-var-edit { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.item-var-edit select {
  padding: 4px 8px; border-radius: 6px; border: 1px solid var(--linha-2); background: var(--grafite-2);
  color: var(--texto); font-size: 12px; outline: none;
}
.item-var-edit select:focus { border-color: var(--ouro); }
.item-un { font-size: 12px; color: var(--texto-suave); margin-top: 3px; }
.item-linha { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; gap: 10px; }
.item-qtd { display: inline-flex; align-items: center; gap: 11px; border: 1px solid var(--linha-2);
  border-radius: 7px; padding: 3px 9px; }
.item-qtd button { width: 20px; font-weight: 700; color: var(--texto); }
.item-total { font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--ouro-claro); }
.item-x { font-size: 11.5px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .6px; }
.item-x:hover { color: var(--erro); }

.sac-pe { padding: 18px 22px 22px; border-top: 1px solid var(--linha); background: var(--preto-2); }
.sac-linha { display: flex; justify-content: space-between; font-size: 14px; color: var(--texto-suave); margin-bottom: 6px; }
.sac-total { display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-display); font-size: 25px; font-weight: 700; text-transform: uppercase; margin: 8px 0 14px; color: var(--ouro-claro); }
.btn-fechar-zap { width: 100%; background: var(--zap); color: #06371c; padding: 17px; border-radius: 10px;
  font-family: var(--f-display); font-size: 15px; letter-spacing: 1.2px; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 10px; transition: var(--tr); }
.btn-fechar-zap:hover { background: #2ee673; }
.btn-fechar-zap svg { width: 21px; height: 21px; }
.sac-obs { font-size: 11.5px; color: var(--texto-fraco); text-align: center; margin-top: 10px; line-height: 1.5; }

/* ============================================================ BOTAO FLUTUANTE */
.zap-flutua { position: fixed; right: 22px; bottom: 22px; z-index: 200; width: 58px; height: 58px;
  border-radius: 50%; background: var(--zap); color: #06371c; display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(37,211,102,.42); transition: var(--tr); }
.zap-flutua:hover { transform: scale(1.07); }
.zap-flutua svg { width: 30px; height: 30px; }
.zap-flutua.escondido { opacity: 0; visibility: hidden; transform: scale(.8); }

/* ============================================================ AVISO */
.avisos { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 500;
  display: flex; flex-direction: column; gap: 9px; align-items: center; pointer-events: none; }
.aviso { background: var(--grafite); border: 1px solid var(--linha-2); color: var(--texto); padding: 13px 22px;
  border-radius: 9px; font-size: 14px; box-shadow: var(--sombra-g); display: flex; align-items: center; gap: 9px; animation: sobe .32s; }
.aviso .ok { color: var(--ouro-claro); font-weight: 700; }
@keyframes sobe { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================ TOAST
   Aviso curtinho (~1.8s, ver showToast() no JS) pra confirmar uma acao no
   ato: sacola, link copiado, newsletter, "escolha o tamanho". Elemento
   UNICO e fixo (#toast) — cada chamada so troca o texto e reanima. */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 10px);
  background: var(--grafite); border: 1px solid rgba(201,150,47,.5); color: var(--texto);
  padding: 12px 24px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  text-align: center; white-space: nowrap; max-width: calc(100% - 32px);
  box-shadow: var(--brilho), var(--sombra-g); opacity: 0; pointer-events: none; z-index: 600;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) {
  /* fica acima do botao flutuante de WhatsApp, senao um cobre o outro */
  .toast { bottom: 88px; white-space: normal; }
}

/* ============================================================ CONTA */
.conta { position: fixed; z-index: 360; left: 50%; top: 50%;
  transform: translate(-50%,-46%) scale(.97); width: min(430px, calc(100% - 32px));
  max-height: calc(100vh - 40px); overflow-y: auto; background: var(--grafite); border: 1px solid var(--linha-2);
  border-radius: 14px; opacity: 0; visibility: hidden; transition: .28s; }
.conta.aberta { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); }
.conta-cab { background: var(--preto); color: var(--texto); padding: 20px 24px; display: flex;
  align-items: center; justify-content: space-between; border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--linha); }
.conta-cab h3 { font-family: var(--f-display); font-size: 20px; text-transform: uppercase; letter-spacing: 1px; }
.conta-cab button { color: var(--texto); font-size: 24px; width: 32px; }
.conta-corpo { padding: 22px 24px 26px; }
.conta-aba { display: flex; gap: 4px; margin-bottom: 20px; background: var(--preto-2);
  padding: 4px; border-radius: 9px; }
.conta-aba button { flex: 1; padding: 9px; border-radius: 7px; font-size: 13.5px; font-weight: 600;
  color: var(--texto-suave); transition: var(--tr); }
.conta-aba button.sel { background: var(--degrade-ouro); color: var(--preto); }
.campo { margin-bottom: 13px; }
.campo label { display: block; font-family: var(--f-display); font-size: 11.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--texto-suave); margin-bottom: 6px; }
.campo input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--linha-2); background: var(--grafite-2);
  color: var(--texto); border-radius: 9px; outline: none; transition: var(--tr); }
.campo input:focus { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(201,150,47,.18); }
.conta-btn { width: 100%; background: var(--degrade-ouro); color: var(--preto); padding: 15px; border-radius: 9px;
  font-family: var(--f-display); font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase;
  margin-top: 6px; transition: var(--tr); box-shadow: var(--brilho); }
.conta-btn:hover { filter: brightness(1.08); }
.conta-btn:disabled { background: var(--grafite-3); color: var(--texto-fraco); cursor: not-allowed; box-shadow: none; }
.conta-link { display: block; text-align: center; margin-top: 14px; font-size: 13px;
  color: var(--texto-suave); text-decoration: underline; cursor: pointer; }
.conta-erro { background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.3); color: var(--erro);
  padding: 11px 13px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.conta-ok { background: rgba(201,150,47,.12); border: 1px solid rgba(201,150,47,.35); color: var(--ouro-claro);
  padding: 11px 13px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.conta-nota { font-size: 12px; color: var(--texto-fraco); text-align: center; margin-top: 12px; line-height: 1.5; }

.sac-quem { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--grafite-2); border: 1px solid var(--linha); border-radius: 9px;
  padding: 10px 13px; margin-bottom: 12px; font-size: 13px; color: var(--texto-suave); flex-wrap: wrap; }
.sac-quem b { font-weight: 600; color: var(--texto); }
.sac-quem button { font-size: 12px; color: var(--texto-suave); text-decoration: underline; }
.sac-quem.convidado { display: block; }
.sac-entrar-link { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ouro-claro); text-decoration: underline; }

/* ============================================================ CUPOM */
.cupom-lin { display: flex; gap: 8px; margin-bottom: 12px; }
.cupom-lin input { flex: 1; min-width: 0; padding: 11px 13px; border: 1.5px solid var(--linha-2);
  border-radius: 9px; outline: none; text-transform: uppercase; font-size: 14px; background: var(--grafite-2);
  color: var(--texto); letter-spacing: 1px; transition: var(--tr); }
.cupom-lin input:focus { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(201,150,47,.18); }
.cupom-lin button { background: var(--degrade-ouro); color: var(--preto); padding: 0 18px; border-radius: 9px;
  font-family: var(--f-display); font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; }
.cupom-lin button:hover { filter: brightness(1.08); }
.cupom-ok { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(201,150,47,.12); border: 1px solid rgba(201,150,47,.35); color: var(--ouro-claro); border-radius: 9px;
  padding: 10px 13px; margin-bottom: 12px; font-size: 13px; }
.cupom-ok b { font-family: var(--f-display); letter-spacing: 1px; font-size: 15px; }
.cupom-ok button { color: var(--ouro-claro); text-decoration: underline; font-size: 12px; }
.cupom-erro { background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.3); color: var(--erro); border-radius: 9px;
  padding: 10px 13px; margin-bottom: 12px; font-size: 12.5px; line-height: 1.45; }
.sac-linha.desc { color: var(--sucesso); font-weight: 600; }

/* ============================================================ RODAPE */
.rodape { background: var(--preto-2); border-top: 1px solid var(--linha); padding: 44px 0 0; margin-top: 0; }
.rod-grid { display: grid; gap: 30px; grid-template-columns: 1.6fr 1fr; padding-bottom: 30px; }
.rod-marca img { height: 34px; margin-bottom: 12px; }
.rod-marca p { font-size: 13px; color: var(--texto-suave); max-width: 320px; line-height: 1.6; }
.rod-social { display: flex; gap: 10px; margin-top: 16px; }
.rod-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linha-2);
  display: grid; place-items: center; color: var(--texto-suave); transition: var(--tr); }
.rod-social a:hover { color: var(--preto); background: var(--degrade-ouro); border-color: transparent; }
.rod-social svg { width: 17px; height: 17px; }
.rod-col h4 { font-family: var(--f-display); font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ouro); margin-bottom: 14px; }
.rod-col a, .rod-col div { display: block; font-size: 13.5px; color: var(--texto-suave); padding: 5px 0; }
.rod-col a:hover { color: var(--ouro-claro); }
.rod-base { border-top: 1px solid var(--linha); text-align: center; padding: 16px 20px; font-size: 12px; color: var(--texto-fraco); }
@media (max-width: 760px) { .rod-grid { grid-template-columns: 1fr; } }

/* ---- ONDE ESTAMOS: mapa da loja + rota (compacto) ---- */
.rod-mapa-secao { padding: 26px 0 30px; }
.rod-mapa-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; }
.rod-mapa-cab h4 { font-family: var(--f-display); font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ouro); margin: 0; }
.rod-endereco-txt { color: var(--texto-suave); font-size: 14px; }
.btn-rota { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: 999px; background: var(--degrade-ouro); color: var(--preto); font-family: var(--f-corpo);
  font-weight: 800; font-size: 13px; transition: var(--tr); box-shadow: var(--brilho); }
.btn-rota:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-rota svg { width: 16px; height: 16px; }
.rod-mapa-wrap { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--linha-2); box-shadow: var(--sombra-g); line-height: 0; }
.rod-mapa-wrap iframe { width: 100%; height: 360px; border: 0; display: block; }
/* mapa Leaflet: arrastavel + zoom; marcador preso nas coordenadas */
.rod-mapa-div { width: 100%; height: 360px; background: var(--grafite); }
.rod-mapa-div.leaflet-container { font-family: inherit; }
/* tira o quadrado branco padrao do divIcon do Leaflet e da brilho ao pino */
.pino-ouro { background: none; border: 0; }
.pino-ouro svg { filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
.rod-mapa-div .leaflet-control-zoom a { background: var(--grafite); color: var(--ouro-claro); border-color: var(--linha-2); }
.rod-mapa-div .leaflet-control-zoom a:hover { background: var(--grafite-2); }
/* pino DOURADO proprio, no centro do mapa (a bbox e' centrada na loja); a ponta
   fica exatamente no ponto. pointer-events:none pra nao atrapalhar o mapa. */
.rod-mapa-pino { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); z-index: 2; pointer-events: none; line-height: 0; }
.rod-mapa-pino svg { width: 42px; height: 42px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
@media (max-width: 640px) {
  .rod-mapa-cab .btn-rota { margin-left: 0; }
  .rod-mapa-wrap iframe { height: 260px; }
  .rod-mapa-div { height: 260px; }
}

/* ---- TOPO DO RODAPE: logo grande + info + redes (centralizado) ---- */
.rod-topo { text-align: center; padding: 6px 0 30px; }
.rod-topo-logo { height: 66px; width: auto; margin: 0 auto 12px; display: block; filter: brightness(1.28) saturate(1.12); }
.rod-topo-tag { color: var(--texto-suave); font-size: 14.5px; max-width: 640px; margin: 0 auto 18px; line-height: 1.6; }
.rod-social-centro { justify-content: center; }

/* ---- BLOCO FINAL: logo grande + mensagem + redes (centralizado) ---- */
.rod-final { text-align: center; padding: 30px 0 34px; border-top: 1px solid var(--linha); }
.rod-final-logo { height: 96px; width: auto; margin: 0 auto 14px; display: block; filter: drop-shadow(0 0 14px rgba(201,150,47,.28)); }
.rod-final-tag { color: var(--texto-suave); font-size: 14px; max-width: 620px; margin: 0 auto 8px; }
.rod-final-msg { color: var(--texto-fraco); font-size: 13.5px; line-height: 1.6; max-width: 560px; margin: 0 auto 18px; }
.rod-final-msg b { color: var(--ouro-claro); }
.rod-social-centro { justify-content: center; }

/* ---- newsletter no rodape ---- */
.rod-news-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding: 26px 20px; border-bottom: 1px solid var(--linha); }
.rod-news-txt h4 { font-family: var(--f-display); font-size: 16px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto); }
.rod-news-txt p { font-size: 12.5px; color: var(--texto-fraco); margin-top: 3px; }
.news-form { display: flex; gap: 8px; flex-wrap: wrap; }
.news-form input {
  padding: 11px 14px; border-radius: 8px; border: 1.5px solid var(--linha-2); background: var(--grafite);
  color: var(--texto); outline: none; min-width: 220px; transition: var(--tr);
}
.news-form input:focus { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(201,150,47,.18); }
.news-form button {
  padding: 11px 20px; border-radius: 8px; background: var(--degrade-ouro); color: var(--preto);
  font-family: var(--f-display); font-weight: 700; font-size: 12.5px; letter-spacing: .8px; text-transform: uppercase;
  transition: var(--tr);
}
.news-form button:hover { filter: brightness(1.08); }

/* ============================================================ CELULAR (mobile-first: acima e a base, aqui os ajustes de telas maiores) */
@media (max-width: 899px) {
  .menu-desktop { display: none !important; }
  .btn-menu-mob { display: grid; place-items: center; }
  /* no celular: menu na esquerda, LOGO no centro, icones (sacola/whatsapp) na
     direita; a busca desce pra uma linha inteira embaixo. Sem position absolute
     (que fazia a logo escapar pra cima). */
  .cab-linha { flex-wrap: wrap; align-items: center; }
  .btn-menu-mob { order: 0; flex-shrink: 0; }
  .logo { order: 1; flex: 1; display: flex; justify-content: center; margin: 0; }
  .logo .logo-img { height: 68px; }
  .cab-acoes { order: 2; flex-shrink: 0; }
  .busca-central { order: 3; flex-basis: 100%; max-width: none; margin: 8px 0 2px; }
  .acao-btn .acao-rot, .cab-zap .acao-rot { display: none; }
  .jp { grid-template-columns: 1fr; }
  .jp-dados { padding: 20px 20px 24px; }
  .jp-nome { font-size: 22px; }
  .jp-preco { font-size: 29px; }
  .janela { top: auto; bottom: 0; transform: translate(-50%, 4%); width: 100%;
    max-height: 92vh; border-radius: 16px 16px 0 0; }
  .janela.aberto { transform: translate(-50%, 0); }
}
@media (min-width: 900px) {
  .menu-desktop { display: flex; }
}

/* ============================================================ TEMAS SAZONAIS
   Ajuste as DATAS no topo de hm-loja.js (constante TEMA_DATAS). Aqui so a
   cor/decoracao de cada tema — a base continua preto + dourado; o tema
   sazonal acrescenta um detalhe, nunca troca a loja inteira de cor. */
html[data-tema="natal"]      { --tema-1: #1f7a4d; --tema-2: #d1373f; }
html[data-tema="ano-novo"]   { --tema-1: #d9b24c; --tema-2: #fff3c9; }
html[data-tema="namorados"]  { --tema-1: #c2185b; --tema-2: #ff8fab; }
html[data-tema="carnaval"]   { --tema-1: #7b2ff7; --tema-2: #1fb976; }
html[data-tema="pais"]       { --tema-1: #1a3a6b; --tema-2: #c9962f; }
html[data-tema="black-friday"] { --tema-1: #0a0a0a; --tema-2: #d1373f; }

/* camada de decoracao (flocos/brilhos/coracoes) — fica atras dos modais,
   na frente do fundo, e nunca captura clique (pointer-events:none) */
#tema-decor { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
#tema-decor .particula { position: absolute; top: -8%; opacity: 0; line-height: 1; will-change: transform, opacity; }

.particula.flocando { color: #eaf4ff; text-shadow: 0 0 6px rgba(255,255,255,.5); animation-name: cair; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes cair {
  0% { transform: translate(0,-8vh) rotate(0deg); opacity: 0; }
  10% { opacity: .9; }
  90% { opacity: .9; }
  100% { transform: translate(14px, 108vh) rotate(200deg); opacity: 0; }
}
.particula.brilhando { color: var(--ouro-claro); text-shadow: 0 0 10px rgba(247,215,116,.7); animation-name: piscar; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes piscar {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50% { opacity: 1; transform: scale(1); }
}
.particula.flutuando { color: #ff5f82; text-shadow: 0 0 8px rgba(255,95,130,.55); animation-name: flutuar; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes flutuar {
  0% { transform: translate(0, 6vh); opacity: 0; }
  12% { opacity: .85; }
  88% { opacity: .85; }
  100% { transform: translate(-16px, -108vh); opacity: 0; }
}
.particula.confetando { animation-name: cair; animation-timing-function: linear; animation-iteration-count: infinite; }