/* ==========================================================================
   CRIMSON SHOP — "DARK NEON / HOLOGRÁFICO" (cabeçalho)
   neon-header.css  ·  arquivo NOVO e ADITIVO
   --------------------------------------------------------------------------
   • Não substitui styles.css / theme.css — apenas adiciona o novo header.
   • Classes novas: .neon-header, .neon-header-inner, .neon-logo,
     .neon-logo-mark, .neon-logo-copy, .neon-logo-title, .neon-logo-sub,
     .neon-location, .neon-location-icon, .neon-location-text, .neon-search,
     .neon-search-field, .neon-search-input, .neon-search-btn,
     .neon-header-menu, .neon-icon-btn, .neon-badge, .neon-header-cta,
     .neon-subbar, .neon-subbar-pill (.is-green / .is-purple),
     .neon-cart-count
   • Camada de compatibilidade com o header ATUAL (.site-header, .brand,
     .main-nav, .header-actions, .appearance-button, .header-order,
     .cart-count, .announcement, .live-dot) — nada é apagado, apenas
     receives o acabamento neon para o site não quebrar antes do HTML novo.
   • Hooks do JS preservados: [data-theme-open], [data-account-open],
     [data-open-cart], [data-cart-count].
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
/* O seletor é `html:root` (e não `:root`) de propósito: neon-carousel.css e
   neon-cards.css são carregados DEPOIS e redeclaram `--neon-purple`,
   `--neon-holo` e friends em `:root`. Com `:root` a cascata daria a eles a
   palavra final; com `html:root` a especificidade (0,1,1) vence e a paleta
   carmim/ônix realmente manda. */
html:root{
  /* matiz — CARMIM no lugar do roxo genérico
     (o nome do token foi mantido porque styles.css / theme.css / app.js
     continuam referenciando --neon-purple) */
  --neon-purple:#e01e4a;
  --neon-purple-bright:#ff5c7a;
  --neon-purple-deep:#7a0f2a;
  --neon-carmim:#e01e4a;
  --neon-carmim-bright:#ff5c7a;
  --neon-ember:#ff8a3d;
  --neon-ember-bright:#ffb37a;
  --neon-gold:#ffd23f;
  --neon-cyan:#22d3ee;
  --neon-cyan-bright:#67e8f9;
  --neon-pink:#f472b6;
  --neon-green:#34d399;

  /* superfícies — PRETO ÔNIX */
  --neon-glass:rgba(9,8,9,.84);
  --neon-glass-strong:rgba(7,6,7,.92);
  --neon-text:#eae4e5;
  --neon-muted:#a49a9c;
  --neon-line:#262225;

  /* gradiente holográfico — CARMIM / EMBER (sem roxo, sem ciano) */
  --neon-holo:linear-gradient(90deg,#ff2d55 0%,#ff6b35 18%,#ffd23f 34%,#ff2d55 52%,#b3123f 70%,#ff8a3d 86%,#ff2d55 100%);
  --neon-holo-soft:linear-gradient(135deg,#ffd23f 0%,#ff6b35 32%,#e01e4a 60%,#ff8a3d 100%);
  /* variante escura para superfícies preenchidas com texto branco (AA) */
  --neon-holo-fill:linear-gradient(90deg,#9c0b2e 0%,#d81a45 30%,#d63a24 55%,#b3123f 78%,#d81a45 100%);

  /* brilhos */
  --neon-glow-purple:0 0 22px rgba(224,30,74,.42);
  --neon-glow-cyan:0 0 22px rgba(255,138,61,.32);
  --neon-glow-green:0 0 20px rgba(52,211,153,.30);

  /* motion */
  --neon-ease:cubic-bezier(.22,1,.36,1);
  --neon-dur:.3s;

  /* métricas */
  --neon-header-h:76px;
  --neon-subbar-h:46px;
  --neon-radius:999px;
}

/* o accent do tema continua mandando na harmonização do neon */
body[data-accent="crimson"]{
  --neon-purple:#e01e4a;
  --neon-purple-bright:#ff5c7a;
  --neon-holo:linear-gradient(90deg,#ff2d55 0%,#ff6b35 22%,#ffd23f 40%,#ff2d55 58%,#b3123f 76%,#ff8a3d 100%);
  --neon-holo-fill:linear-gradient(90deg,#9c0b2e 0%,#d81a45 30%,#d63a24 55%,#b3123f 78%,#d81a45 100%);
}
body[data-accent="ruby"]{
  --neon-purple:#d81b5c;
  --neon-purple-bright:#ff7d99;
  --neon-holo:linear-gradient(90deg,#ff3d7f 0%,#ff8a3d 30%,#ffd23f 50%,#d81b5c 72%,#ff3d7f 100%);
  --neon-holo-fill:linear-gradient(90deg,#7d0b32 0%,#c41f52 32%,#c93a2c 56%,#a01340 78%,#c41f52 100%);
}
body[data-accent="violet"]{
  --neon-purple:#8b3fd4;
  --neon-purple-bright:#c4a6ff;
  --neon-holo:linear-gradient(90deg,#ff2d55 0%,#e01e4a 34%,#ff8a3d 64%,#ff2d55 100%);
  --neon-holo-fill:linear-gradient(90deg,#4a1a72 0%,#8b3fd4 32%,#b3123f 58%,#7a0f2a 78%,#8b3fd4 100%);
}
body[data-accent="gold"]{
  --neon-purple:#e0a41c;
  --neon-purple-bright:#fcd34d;
  --neon-holo:linear-gradient(90deg,#f59e0b 0%,#ffd23f 28%,#ff8a3d 54%,#b3123f 78%,#f59e0b 100%);
  --neon-holo-fill:linear-gradient(90deg,#7a4a05 0%,#b8790c 30%,#a8500f 56%,#7a2a0d 78%,#b8790c 100%);
}
body[data-accent="emerald"]{
  --neon-purple:#10b981;
  --neon-purple-bright:#6ee7b7;
  --neon-holo:linear-gradient(90deg,#34d399 0%,#ffd23f 30%,#ff8a3d 56%,#10b981 80%,#34d399 100%);
  --neon-holo-fill:linear-gradient(90deg,#0a5c42 0%,#0e8a60 30%,#9a5510 56%,#0a5c42 78%,#0e8a60 100%);
}


/* ==========================================================================
   2. KEYFRAMES
   ========================================================================== */
@keyframes neon-header-in{
  from{opacity:0;transform:translateY(-14px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes neon-subbar-in{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes neon-holo{
  from{background-position:0% 50%;}
  to{background-position:200% 50%;}
}
@keyframes neon-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@keyframes neon-pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.55;transform:scale(.88);}
}


/* ==========================================================================
   3. SUPERFÍCIE DO HEADER (glassmorphism)
   ========================================================================== */
.neon-header{
  position:sticky;
  top:0;
  z-index:50;
  width:100%;
  background:var(--neon-glass);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(224,30,74,.22);
  box-shadow:0 1px 0 rgba(224,30,74,.16),0 20px 46px -24px rgba(0,0,0,.95);
  animation:neon-header-in .55s var(--neon-ease) both;
}
/* filete holográfico de 1px na base */
.neon-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:var(--neon-holo);
  background-size:220% 100%;
  opacity:.72;
  pointer-events:none;
  animation:neon-holo 14s linear infinite;
}

/* o header neon é escuro nos dois temas; no claro ganha só um pouco mais de opacidade */
body[data-theme="light"] .neon-header{
  background:rgba(7,6,7,.90);
}

.neon-header-inner{
  width:min(var(--max,1220px),calc(100% - 40px));
  margin-inline:auto;
  min-height:var(--neon-header-h);
  display:flex;
  align-items:center;
  gap:20px;
}


/* ==========================================================================
   4. LOGO
   ========================================================================== */
.neon-logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex:none;
  text-decoration:none;
  color:inherit;
}
.neon-logo-mark{
  position:relative;
  isolation:isolate;
  width:40px;
  height:40px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,140,140,.95) 0%,rgba(224,30,74,.60) 42%,rgba(255,138,61,.26) 72%,rgba(6,5,6,.30) 100%);
  border:1px solid rgba(255,140,140,.55);
  box-shadow:0 0 0 1px rgba(224,30,74,.25),0 0 20px rgba(224,30,74,.55),inset 0 0 16px rgba(255,138,61,.24);
  transition:transform var(--neon-dur) var(--neon-ease),box-shadow var(--neon-dur) var(--neon-ease);
}
/* anel holográfico girando */
.neon-logo-mark::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(255,138,61,0) 0deg,
    rgba(255,138,61,.85) 70deg,
    rgba(255,138,61,0) 150deg,
    rgba(255,45,85,.80) 225deg,
    rgba(255,45,85,0) 310deg,
    rgba(255,138,61,0) 360deg);
  -webkit-mask:radial-gradient(circle closest-side at center,transparent 76%,#000 86%);
  mask:radial-gradient(circle closest-side at center,transparent 76%,#000 86%);
  animation:neon-spin 7s linear infinite;
  pointer-events:none;
}
.neon-logo-mark > span{
  width:13px;
  height:13px;
  border:2px solid rgba(255,255,255,.92);
  border-radius:50%;
  box-shadow:0 0 12px rgba(255,120,110,.9);
}
.neon-logo:hover .neon-logo-mark{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 0 0 1px rgba(255,140,140,.55),0 0 28px rgba(224,30,74,.75),inset 0 0 18px rgba(255,138,61,.32);
}

.neon-logo-copy{
  display:grid;
  gap:3px;
  line-height:1.05;
}
.neon-logo-title{
  font-size:15px;
  font-weight:800;
  letter-spacing:.18em;
  line-height:1.1;
  color:var(--neon-purple-bright);
  background:var(--neon-holo);
  background-size:220% 100%;
  animation:neon-holo 9s linear infinite;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .neon-logo-title{
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
  }
}
.neon-logo-sub{
  font-size:8px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#b3a8aa;
}


/* ==========================================================================
   5. LOCALIZAÇÃO (pill)
   ========================================================================== */
.neon-location{
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex:none;
  padding:8px 14px;
  border-radius:var(--neon-radius);
  border:1px solid rgba(224,30,74,.32);
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 18px rgba(224,30,74,.14);
  color:var(--neon-text);
  font-family:inherit;
  font-size:11px;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:all var(--neon-dur) var(--neon-ease);
}
.neon-location:hover{
  transform:translateY(-1px);
  border-color:rgba(255,92,122,.80);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 20px rgba(224,30,74,.45),inset 0 0 20px rgba(255,138,61,.16);
}
.neon-location-icon{
  font-size:13px;
  line-height:1;
  color:var(--neon-ember-bright);
  filter:drop-shadow(0 0 6px rgba(255,138,61,.60));
}
.neon-location-text{
  font-size:11px;
  font-weight:600;
  letter-spacing:.01em;
  color:#d6cdce;
}
.neon-location-text small{
  display:block;
  margin-top:2px;
  font-size:9px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--neon-muted);
}


/* ==========================================================================
   6. BUSCA
   ========================================================================== */
.neon-search{
  position:relative;
  display:flex;
  align-items:center;
  min-width:0;
}
/* dentro do header a busca ocupa o espaço livre disponível */
.neon-header .neon-search{
  flex:1 1 auto;
}
/* utilitário: .neon-search aplicado direto no <input> */
input.neon-search{
  width:100%;
  min-width:0;
  height:42px;
  padding:0 52px 0 18px;
  border:1px solid rgba(224,30,74,.26);
  border-radius:var(--neon-radius);
  background:rgba(255,255,255,.045);
  color:var(--neon-text);
  font-family:inherit;
  font-size:12px;
  -webkit-appearance:none;
  appearance:none;
  transition:all var(--neon-dur) var(--neon-ease);
}
input.neon-search::placeholder{
  color:#7c819b;
}
input.neon-search:focus-visible{
  outline:2px solid var(--neon-purple-bright);
  outline-offset:2px;
  border-color:rgba(255,92,122,.90);
  box-shadow:0 0 0 3px rgba(224,30,74,.20),0 0 24px rgba(224,30,74,.36);
}
.neon-search-field{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
  height:42px;
  border-radius:var(--neon-radius);
  border:1px solid rgba(224,30,74,.26);
  background:rgba(255,255,255,.045);
  transition:all var(--neon-dur) var(--neon-ease);
}
.neon-search-field:focus-within{
  border-color:rgba(255,92,122,.90);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(224,30,74,.20),0 0 24px rgba(224,30,74,.36);
}
.neon-search-input{
  width:100%;
  min-width:0;
  height:100%;
  padding:0 52px 0 18px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--neon-text);
  font-family:inherit;
  font-size:12px;
  -webkit-appearance:none;
  appearance:none;
}
.neon-search-input::placeholder{
  color:#7c819b;
}
.neon-search-input::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
}
/* inputs soltos dentro de .neon-search (uso utilitário) */
.neon-search input:not(.neon-search-input){
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--neon-text);
  font-family:inherit;
  font-size:12px;
}
.neon-search input:not(.neon-search-input)::placeholder{
  color:#7c819b;
}
.neon-search-btn{
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,140,120,.60);
  border-radius:50%;
  background:var(--neon-holo-fill);
  background-size:220% 100%;
  color:#fff;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 0 16px rgba(224,30,74,.50);
  animation:neon-holo 8s linear infinite;
  transition:all var(--dur-neon) var(--ease-neon),box-shadow var(--dur-neon) var(--ease-neon);
}
.neon-search-btn svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
}
.neon-search-btn:hover{
  transform:translateY(calc(-50% - 1px));
  box-shadow:0 0 26px rgba(224,30,74,.78);
}
.neon-search-btn:active{
  transform:translateY(-50%) scale(.96);
}


/* ==========================================================================
   7. MENU DA DIREITA (ícones)
   ========================================================================== */
.neon-header-menu{
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
}
.neon-icon-btn{
  position:relative;
  width:40px;
  height:40px;
  flex:none;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(224,30,74,.26);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#d2c9ca;
  font-family:inherit;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  transition:all var(--neon-dur) var(--neon-ease);
}
.neon-icon-btn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.neon-icon-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,92,122,.85);
  color:#fff;
  background:rgba(255,255,255,.08);
  box-shadow:0 0 20px rgba(224,30,74,.50),inset 0 0 16px rgba(255,138,61,.16);
}
/* variante com rótulo (ex.: "Minha conta") */
.neon-icon-btn.is-wide{
  width:auto;
  padding:0 14px;
  gap:8px;
  font-size:11px;
  font-weight:600;
}
.neon-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  display:grid;
  place-items:center;
  border-radius:var(--neon-radius);
  border:1px solid rgba(6,5,6,.85);
  background:var(--neon-holo-fill);
  background-size:220% 100%;
  color:#fff;
  font-size:9px;
  font-weight:800;
  line-height:1;
  box-shadow:0 0 14px rgba(224,30,74,.85);
  animation:neon-holo 6s linear infinite;
}
.neon-icon-btn .neon-badge{
  position:absolute;
  top:-6px;
  right:-6px;
}


/* ==========================================================================
   8. BADGE DO CARRINHO / CTA DE DESTAQUE
   ========================================================================== */
.neon-cart-count{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:var(--neon-radius);
  background:var(--neon-holo-fill);
  background-size:220% 100%;
  color:#fff;
  font-size:10px;
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  box-shadow:0 0 14px rgba(224,30,74,.75),0 0 0 1px rgba(255,140,120,.35);
  animation:neon-holo 6s linear infinite;
}
.neon-header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  height:40px;
  padding:0 18px;
  flex:none;
  border:1px solid rgba(255,140,120,.60);
  border-radius:var(--neon-radius);
  background:var(--neon-holo-fill);
  background-size:220% 100%;
  color:#fff;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 0 20px rgba(224,30,74,.46),inset 0 1px 0 rgba(255,255,255,.14);
  animation:neon-holo 10s linear infinite;
  transition:all var(--neon-dur) var(--neon-ease);
}
.neon-header-cta svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.neon-header-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 0 30px rgba(224,30,74,.72),inset 0 1px 0 rgba(255,255,255,.18);
}
.neon-header-cta:active{
  transform:translateY(0) scale(.98);
}
.neon-cta-text{
  display:inline-block;
}


/* ==========================================================================
   9. BARRA SECUNDÁRIA (pills de tags)
   ========================================================================== */
.neon-subbar{
  width:min(var(--max,1220px),calc(100% - 40px));
  margin-inline:auto;
  min-height:var(--neon-subbar-h);
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:9px 0;
  border-top:1px solid rgba(224,30,74,.16);
  animation:neon-subbar-in .5s .12s var(--neon-ease) both;
}
/* caso o .neon-subbar seja irmão do .neon-header (fora dele), ele gruda junto */
.neon-header + .neon-subbar{
  position:sticky;
  top:var(--neon-header-h);
  z-index:49;
  width:100%;
  max-width:none;
  padding:9px max(20px,calc((100vw - var(--max,1220px))/2));
  background:var(--neon-glass);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid rgba(224,30,74,.16);
  border-bottom:1px solid rgba(224,30,74,.20);
}
.neon-subbar-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:26px;
  padding:0 12px;
  border-radius:var(--neon-radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  color:#c6cadb;
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
  white-space:nowrap;
  transition:all var(--neon-dur) var(--neon-ease);
}
.neon-subbar-pill::before{
  content:"";
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 8px currentColor;
}
/* Os 3 pills da subbar usam a MESMA família carmim — o "Entrega rápida"
   estava em verde e destoava dos outros dois. A classe is-green continua
   existindo por compatibilidade, mas aponta para o carmim. */
.neon-subbar-pill.is-green{
  border-color:rgba(224,30,74,.50);
  color:#ffc2ce;
  background:rgba(224,30,74,.10);
  box-shadow:0 0 16px rgba(224,30,74,.26),inset 0 0 14px rgba(224,30,74,.12);
}
.neon-subbar-pill.is-purple{
  border-color:rgba(224,30,74,.50);
  color:#ffc2ce;
  background:rgba(224,30,74,.10);
  box-shadow:0 0 16px rgba(224,30,74,.26),inset 0 0 14px rgba(224,30,74,.12);
}
.neon-subbar-pill:hover{
  transform:translateY(-1px);
}
.neon-subbar-pill.is-green:hover{
  border-color:rgba(255,140,150,.90);
  box-shadow:0 0 24px rgba(224,30,74,.48),inset 0 0 16px rgba(224,30,74,.16);
}
.neon-subbar-pill.is-purple:hover{
  border-color:rgba(255,140,150,.90);
  box-shadow:0 0 24px rgba(224,30,74,.48),inset 0 0 16px rgba(224,30,74,.16);
}


/* ==========================================================================
   10. COMPATIBILIDADE — header ATUAL (.site-header / .brand / ...)
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  height:auto;
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:var(--neon-glass);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(224,30,74,.24);
  box-shadow:0 1px 0 rgba(224,30,74,.18),0 20px 44px -22px rgba(0,0,0,.95);
  animation:neon-header-in .55s var(--neon-ease) both;
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:var(--neon-holo);
  background-size:220% 100%;
  opacity:.70;
  pointer-events:none;
  animation:neon-holo 14s linear infinite;
}

/* --- marca ---------------------------------------------------------------- */
.site-header .brand{
  gap:12px;
}
.site-header .brand-mark{
  width:38px;
  height:38px;
  clip-path:none;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 32% 26%,rgba(255,140,140,.95) 0%,rgba(224,30,74,.60) 42%,rgba(255,138,61,.24) 72%,rgba(6,5,6,.30) 100%);
  border:1px solid rgba(255,140,140,.50);
  box-shadow:0 0 0 1px rgba(224,30,74,.22),0 0 18px rgba(224,30,74,.50),inset 0 0 14px rgba(255,138,61,.22);
  transition:all var(--neon-dur) var(--neon-ease);
}
.site-header .brand-mark span{
  width:13px;
  height:13px;
  border:2px solid rgba(255,255,255,.92);
  border-radius:50%;
  background:transparent;
  box-shadow:0 0 12px rgba(255,120,110,.85);
}
.site-header .brand-mark span:after{
  background:rgba(255,255,255,.92);
  box-shadow:0 0 10px rgba(255,120,110,.9);
}
.site-header .brand:hover .brand-mark{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 0 0 1px rgba(255,140,140,.55),0 0 26px rgba(224,30,74,.72),inset 0 0 18px rgba(255,138,61,.30);
}
.site-header .brand-copy strong{
  font-size:14px;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--neon-purple-bright);
  background:var(--neon-holo);
  background-size:220% 100%;
  animation:neon-holo 9s linear infinite;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .site-header .brand-copy strong{
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
  }
}
.site-header .brand-copy small{
  color:#b3a8aa;
  letter-spacing:.24em;
}
/* contraste do subtítulo no tema claro */
body[data-theme="light"] .site-header .brand-copy small{
  color:#767b90;
}
/* botão de conta no tema claro (o accent do tema não cobre [data-account-open]) */
body[data-theme="light"] .site-header [data-account-open]{
  color:#1a1a1a;
  background:var(--surface);
  border-color:var(--line);
}
body[data-theme="light"] .site-header [data-account-open]:hover{
  color:#1a1a1a;
  background:var(--surface-2);
  border-color:var(--neon-purple-bright);
}

/* --- navegação ------------------------------------------------------------ */
.main-nav{
  gap:30px;
}
.main-nav a{
  position:relative;
  color:#c0b6b7;
  transition:color var(--neon-dur) var(--neon-ease);
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:1px;
  background:var(--neon-holo);
  background-size:220% 100%;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--neon-dur) var(--neon-ease);
}
.main-nav a:hover{
  color:#fff;
}
.main-nav a:hover::after{
  transform:scaleX(1);
}

/* --- ações do header ------------------------------------------------------ */
.header-actions{
  gap:10px;
}
.site-header .appearance-button{
  min-height:40px;
  padding:0 13px;
  gap:8px;
  border:1px solid rgba(224,30,74,.30);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#d2c9ca;
  transition:all var(--neon-dur) var(--neon-ease);
}
.site-header .appearance-button svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
}
.site-header .appearance-button:hover{
  transform:translateY(-1px);
  border-color:rgba(255,92,122,.85);
  background:rgba(255,255,255,.08);
  color:#fff;
  box-shadow:0 0 20px rgba(224,30,74,.50);
}
.site-header [data-account-open]{
  min-height:40px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  flex:none;
  border:1px solid rgba(224,30,74,.30);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#d2c9ca;
  font-family:inherit;
  font-size:11px;
  cursor:pointer;
  transition:all var(--neon-dur) var(--neon-ease);
}
.site-header [data-account-open]:hover{
  transform:translateY(-1px);
  border-color:rgba(255,92,122,.85);
  background:rgba(255,255,255,.08);
  color:#fff;
  box-shadow:0 0 20px rgba(224,30,74,.50);
}
.site-header .account-icon{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  filter:drop-shadow(0 0 6px rgba(224,30,74,.60));
}
.site-header .account-label{
  font-size:11px;
  font-weight:600;
}
.site-header .header-order,
.site-header [data-open-cart]{
  height:40px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  flex:none;
  border:1px solid rgba(255,140,120,.60);
  border-radius:var(--neon-radius);
  background:var(--neon-holo-fill);
  background-size:220% 100%;
  color:#fff;
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 0 20px rgba(224,30,74,.44),inset 0 1px 0 rgba(255,255,255,.14);
  animation:neon-holo 10s linear infinite;
  transition:all var(--neon-dur) var(--neon-ease);
}
.site-header .header-order:hover,
.site-header [data-open-cart]:hover{
  transform:translateY(-1px);
  border-color:rgba(255,180,170,.90);
  box-shadow:0 0 30px rgba(224,30,74,.72),inset 0 1px 0 rgba(255,255,255,.18);
}
.site-header .header-order .cart-count,
.site-header [data-open-cart] .cart-count{
  min-width:20px;
  height:20px;
  padding:0 6px;
  margin-left:2px;
  border-radius:var(--neon-radius);
  background:rgba(6,5,6,.78);
  border:1px solid rgba(255,140,120,.75);
  color:#fff;
  font-size:10px;
  font-weight:800;
  box-shadow:0 0 12px rgba(224,30,74,.85);
}

/* --- hooks do JS (precisam continuar funcionando) ------------------------- */
.neon-header [data-theme-open],
.neon-header [data-account-open],
.neon-header [data-open-cart],
.site-header [data-theme-open],
.site-header [data-account-open],
.site-header [data-open-cart]{
  font-family:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.neon-header [data-theme-open],
.neon-header [data-account-open],
.neon-header [data-open-cart]{
  border-radius:12px;
}
.neon-header [data-cart-count],
.site-header [data-cart-count]{
  font-variant-numeric:tabular-nums;
}
.site-header [data-cart-count]{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:var(--neon-radius);
  background:rgba(6,5,6,.78);
  border:1px solid rgba(255,140,120,.75);
  color:#fff;
  font-size:10px;
  font-weight:800;
  line-height:1;
  box-shadow:0 0 12px rgba(224,30,74,.85);
}

/* --- barra de anúncio ----------------------------------------------------- */
.announcement{
  background:color-mix(in srgb,var(--base,#0a0a0a) 92%,#e01e4a 8%);
  border-bottom:1px solid color-mix(in srgb,var(--theme-accent,#db2838) 18%,transparent);
  color:var(--muted);
}
.live-dot{
  background:#34d399;
  box-shadow:0 0 12px rgba(52,211,153,.85);
  animation:neon-pulse 2.4s ease-in-out infinite;
}


/* ==========================================================================
   11. FOCO VISÍVEL
   ========================================================================== */
.neon-header :is(a,button,input,select,textarea):focus-visible,
.neon-subbar :is(a,button,input,select,textarea):focus-visible,
.site-header :is(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--neon-purple-bright);
  outline-offset:2px;
  border-radius:6px;
}
.neon-search-input:focus-visible{
  outline:none;
}


/* ==========================================================================
   12. RESPONSIVO
   ========================================================================== */

/* ≤1200px — aperta o espaçamento, tudo continua em uma linha */
@media (max-width:1200px){
  :root{--neon-header-h:72px;}
  .neon-header-inner{
    gap:16px;
  }
  .neon-location{
    padding:7px 12px;
  }
  .neon-search-input{
    font-size:11px;
    padding-right:48px;
  }
  .neon-header-cta{
    padding:0 15px;
    font-size:11px;
  }
}

/* ≤900px — a barra secundária encolhe (scroll) e some o texto da location */
@media (max-width:900px){
  :root{--neon-header-h:68px;}
  .neon-header-inner{
    gap:12px;
  }
  .neon-location-text{
    display:none;
  }
  .neon-location{
    padding:8px 10px;
  }
  .neon-subbar{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .neon-subbar::-webkit-scrollbar{
    display:none;
  }
  .neon-subbar-pill:nth-child(n+3){
    display:none;
  }
  .main-nav{
    gap:18px;
    margin-right:20px;
  }
}

/* ≤720px — empilha: logo/menu em cima, busca embaixo */
@media (max-width:720px){
  :root{--neon-header-h:auto;--neon-subbar-h:40px;}
  .neon-header-inner{
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    padding:12px 0;
    width:min(var(--max,1220px),calc(100% - 32px));
  }
  .neon-logo{
    order:1;
  }
  .neon-location{
    order:2;
  }
  .neon-header-menu{
    order:3;
    margin-left:auto;
  }
  .neon-header-cta{
    order:4;
  }
  .neon-header .neon-search{
    order:5;
    flex:1 0 100%;
  }
  .neon-search-field{
    height:40px;
  }
  .neon-subbar{
    padding:8px 0;
  }
  .neon-logo-title{
    font-size:13px;
  }
  .neon-logo-mark{
    width:36px;
    height:36px;
  }
  .neon-icon-btn{
    width:38px;
    height:38px;
  }
  .neon-header-cta{
    height:38px;
    padding:0 13px;
  }
  .neon-location{
    padding:7px 10px;
  }
  .site-header{
    min-height:64px;
    gap:10px;
  }
  .site-header .brand-mark{
    width:34px;
    height:34px;
  }
  .site-header .brand-copy strong{
    font-size:12px;
    letter-spacing:.12em;
  }
  .site-header .brand-copy small{
    font-size:7px;
  }
  .site-header .header-order,
  .site-header [data-open-cart]{
    height:36px;
    padding:0 12px;
  }
  .site-header [data-account-open]{
    min-height:36px;
    padding:0 11px;
  }
}

/* ≤480px — só ícones */
@media (max-width:480px){
  .neon-header-inner{
    width:calc(100% - 24px);
    gap:10px;
  }
  .neon-logo-copy{
    display:none;
  }
  .neon-location{
    display:none;
  }
  .neon-icon-btn{
    width:36px;
    height:36px;
    border-radius:10px;
  }
  .neon-header-cta{
    height:38px;
    padding:0 11px;
    font-size:11px;
  }
  /* se o CTA tiver ícone, vira botão circular só-ícone */
  .neon-header-cta:has(svg,.neon-cta-icon){
    width:38px;
    padding:0;
    font-size:0;
    gap:0;
  }
  .neon-header-cta:has(svg,.neon-cta-icon) svg{
    width:17px;
    height:17px;
  }
  .neon-header-cta:has(svg,.neon-cta-icon) .neon-cta-icon{
    font-size:16px;
  }
  .neon-subbar-pill{
    height:24px;
    padding:0 10px;
    font-size:9px;
  }
  .neon-search-input{
    font-size:11px;
    padding:0 46px 0 14px;
  }
  .site-header .account-label,
  .account-label{
    display:none;
  }
  .site-header [data-account-open]{
    width:36px;
    height:36px;
    padding:0;
    justify-content:center;
  }
  .site-header .appearance-button span{
    display:none;
  }
  .site-header .appearance-button{
    width:36px;
    height:36px;
    padding:0;
    justify-content:center;
  }
}

/* scroll-padding coerente com a altura do header novo */
html:has(.neon-header){
  scroll-padding-top:calc(var(--neon-header-h,76px) + var(--neon-subbar-h,46px) + 12px);
}
@media (max-width:720px){
  html:has(.neon-header){
    scroll-padding-top:150px;
  }
}


/* ==========================================================================
   13. PREFERÊNCIA POR MENOS MOVIMENTO
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .neon-header,
  .neon-subbar,
  .neon-logo-mark::after,
  .neon-logo-title,
  .neon-cart-count,
  .neon-badge,
  .neon-search-btn,
  .neon-header-cta,
  .site-header,
  .site-header .brand-copy strong,
  .site-header .header-order,
  .site-header [data-open-cart],
  .live-dot,
  .site-header::after,
  .neon-header::after{
    animation:none !important;
  }
  .neon-header *,
  .neon-subbar *,
  .site-header *{
    transition:none !important;
  }
  .neon-logo-mark::after{
    opacity:0;
  }
}

/* ════════════════════════════════════════════════════════════════════
   CORREÇÃO DE LAYOUT — o .site-header legado (styles.css) traz
   `display:flex; height:74px; padding:0 max(32px,…)` que briga com a
   nova estrutura (linha interna + subbar empilhados). Aqui o header
   volta a ser um bloco e a linha interna assume o layout horizontal.
   ════════════════════════════════════════════════════════════════════ */
.site-header.neon-header{
  display:block;
  height:auto;
  min-height:0;
  padding:0;
  align-items:stretch;
  justify-content:flex-start;
}
.site-header.neon-header > .neon-header-inner{
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 18px;
  min-height:var(--neon-header-h);
}
.site-header.neon-header .neon-header-inner .main-nav{
  margin-left:0;
  margin-right:0;
  gap:22px;
  flex:none;
}
.site-header.neon-header .neon-header-inner .brand{
  min-width:auto;
  flex:none;
}
.site-header.neon-header .neon-header-inner .header-actions{
  margin-left:auto;
  flex:none;
}
.site-header.neon-header .neon-search{
  flex:1 1 320px;
  min-width:180px;
}
/* A subbar fica numa linha própria, colada abaixo da linha principal */
.site-header.neon-header > .neon-subbar{
  width:100%;
  max-width:none;
  margin-inline:0;
  border-top:1px solid rgba(224,30,74,.16);
}
.site-header.neon-header > .neon-subbar > .neon-subbar-inner{
  width:min(var(--max,1220px),calc(100% - 40px));
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:8px 0;
  min-height:0;
}

@media(max-width:1100px){
  .site-header.neon-header .neon-header-inner .main-nav{display:none}
  .site-header.neon-header .neon-search{flex:1 1 240px}
}
@media(max-width:760px){
  .site-header.neon-header > .neon-header-inner{
    flex-wrap:wrap;
    padding:10px 16px;
    gap:12px;
  }
  .site-header.neon-header .neon-search{order:3;flex:1 1 100%;min-width:0}
  .site-header.neon-header .neon-location .neon-location-text{display:none}
  .site-header.neon-header .neon-header-inner .header-actions{margin-left:auto}
}

/* ════════════════════════════════════════════════════════════════════
   AJUSTES FINAIS
   • .neon-search sem wrapper .neon-search-field → a caixa (borda/fundo)
     precisa vir no próprio .neon-search, senão o input fica sem moldura.
   • Botão "Minha conta" com texto → precisa de largura automática.
   ════════════════════════════════════════════════════════════════════ */
.site-header.neon-header .neon-search{
  height:42px;
  border-radius:var(--neon-radius);
  border:1px solid rgba(224,30,74,.26);
  background:rgba(255,255,255,.045);
  transition:all var(--neon-dur) var(--neon-ease);
}
.site-header.neon-header .neon-search:focus-within{
  border-color:rgba(255,92,122,.90);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(224,30,74,.20),0 0 24px rgba(224,30,74,.36);
}
.site-header.neon-header .neon-search-input{
  height:100%;
  padding:0 50px 0 16px;
  font-size:12px;
}

.neon-account-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:none;
  height:40px;
  padding:0 14px;
  border:1px solid rgba(224,30,74,.26);
  border-radius:var(--neon-radius);
  background:rgba(255,255,255,.045);
  color:#d2c9ca;
  font-family:inherit;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:all var(--neon-dur) var(--neon-ease);
}
.neon-account-btn:hover{
  border-color:rgba(255,92,122,.75);
  background:rgba(224,30,74,.14);
  box-shadow:0 0 18px rgba(224,30,74,.30);
  transform:translateY(-1px);
}
.neon-account-btn .account-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:14px}
.neon-account-btn .account-label{white-space:nowrap}

@media(max-width:1240px){
  .site-header.neon-header .neon-header-inner .main-nav{display:none}
}
@media(max-width:900px){
  .site-header.neon-header .neon-account-btn .account-label{display:none}
  .site-header.neon-header .neon-account-btn{padding:0;width:40px;justify-content:center}
}

/* Mobile: o logo precisa ficar primeiro na linha do header */
@media(max-width:760px){
  .site-header.neon-header > .neon-header-inner .neon-logo{order:0}
  .site-header.neon-header > .neon-header-inner .header-actions{order:1}
  .site-header.neon-header > .neon-header-inner .neon-location{order:2}
  .site-header.neon-header > .neon-header-inner .neon-search{order:3}
}
@media(max-width:480px){
  .site-header.neon-header > .neon-header-inner .neon-logo-copy{display:none}
}

/* ════════════════════════════════════════════════════════════════════
   BOTÃO DE CARRINHO (ícone) — aparece ao lado do botão de tema
   No mobile o CTA "Meu pedido" vira um botão de ícone compacto (40×40)
   com o badge do carrinho, para caber ao lado do tema e da conta.
   ════════════════════════════════════════════════════════════════════ */
.neon-cta-icon{
  display:none;
  align-items:center;
  justify-content:center;
}
.neon-cta-icon svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:760px){
  /* vira botão de ícone, do mesmo tamanho dos outros dois */
  .site-header.neon-header .neon-header-cta{
    width:40px;
    height:40px;
    min-height:40px;
    padding:0;
    gap:0;
    justify-content:center;
    border-radius:12px;
    background:rgba(255,255,255,.045);
    border-color:rgba(168,85,247,.26);
    color:#cfd3e6;
    position:relative;
  }
  .site-header.neon-header .neon-header-cta .neon-cta-text{display:none}
  .site-header.neon-header .neon-header-cta .neon-cta-icon{display:inline-flex}
  .site-header.neon-header .neon-header-cta:hover{
    border-color:rgba(196,181,253,.75);
    background:rgba(224,30,74,.14);
    box-shadow:0 0 18px rgba(224,30,74,.32);
  }
  /* o badge do carrinho vira o contador sobre o ícone */
  .site-header.neon-header .neon-header-cta .neon-cart-count{
    top:-5px;
    right:-5px;
    min-width:18px;
    height:18px;
    font-size:9px;
    font-weight:800;
  }
}