/* ===================================================================
   EGGYS 3D LAB — Design System (redesign 2026)
   Paleta neon coesa: ciano + azul + violeta. Sem arco-íris.
   Fonte: Space Grotesk (display) + Inter (UI/texto)
   =================================================================== */

:root{
  color-scheme:dark;
  /* superfícies */
  --bg:#06080f;
  --bg-2:#090d1a;
  --panel:#0b1124;
  --panel-2:#0e1630;
  --card:#0c1428;
  --card-2:#0e1834;
  --line:#1a2542;
  --line-2:#27355c;
  --line-soft:rgba(255,255,255,.06);

  /* tinta */
  --txt:#eaf0fb;
  --txt-2:#a7b4d0;
  --muted:#6e7d9e;

  /* neon (configuráveis via Tweaks) */
  --cy:#22d3ee;
  --cy-2:#67e8f9;
  --bl:#3b82f6;
  --vi:#8b5cf6;
  --vi-2:#a78bfa;
  --grad:linear-gradient(115deg,var(--cy),var(--bl) 52%,var(--vi));
  --grad-soft:linear-gradient(115deg,rgba(34,211,238,.16),rgba(59,130,246,.10) 50%,rgba(139,92,246,.16));

  --radius:14px;
  --radius-lg:22px;
  --radius-pill:999px;
  --shadow:0 24px 60px -28px rgba(0,0,0,.85);
  --glow-cy:0 0 30px -6px rgba(34,211,238,.55);
  --maxw:1280px;
  --hd:74px;

  /* intensidade do fundo (Tweaks) */
  --bg-strength:1;

  --vignette: rgba(6,8,15,.9);
  --head-bg: linear-gradient(180deg,rgba(13,19,38,.82),rgba(9,13,26,.72));
  --head-shadow: 0 18px 50px -30px rgba(0,0,0,.9);
  --head-shadow-scrolled: 0 18px 46px -22px rgba(0,0,0,.95);
  --nav-hover: rgba(255,255,255,.04);

  /* escala de espaçamento — usar em regras novas/editadas em vez de px soltos */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* escala tipográfica — corpo/UI (headings continuam com clamp() próprio) */
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:15px;
  --fs-md:17px; --fs-lg:20px; --fs-xl:26px; --fs-2xl:34px;

  /*
    Breakpoints padrão da loja (max-width): 1080 desktop→tablet-grande,
    920 tablet, 680 phone, 440 phone pequeno. Novas regras devem usar
    um desses quatro valores em vez de inventar um novo.
  */

  /*
    Escala de z-index — camadas em ordem crescente, do fundo pro topo:
    base(0-1) < sticky(10) < header(60) < drawer/painéis(100-121) <
    nav-mobile(80) < overlay/backdrop(150) < toast(200) < loader(9999).
    Ajustar novas camadas para um valor dentro da faixa certa, não um
    número aleatório maior que tudo.
  */
  --z-sticky:10;
  --z-header:60;
  --z-nav-mobile:80;
  --z-drawer:100;
  --z-overlay:150;
  --z-toast:200;
  --z-loader:9999;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f8fafc;
  --bg-2: #f1f5f9;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --card: #ffffff;
  --card-2: #f1f5f9;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --line-soft: rgba(0,0,0,.06);

  --txt: #0f172a;
  --txt-2: #1e293b;
  --muted: #475569;

  --cy: #0891b2;
  --cy-2: #06b6d4;
  --bl: #2563eb;
  --vi: #7c3aed;
  --vi-2: #8b5cf6;
  
  --grad-soft: linear-gradient(115deg, rgba(8,145,178,.08), rgba(37,99,235,.05) 50%, rgba(124,58,237,.08));
  --shadow: 0 10px 25px -5px rgba(0,0,0,.05), 0 8px 10px -6px rgba(0,0,0,.01);
  --glow-cy: 0 0 20px -6px rgba(8,145,178,.3);
  --vignette: rgba(248,250,252,.9);
  --head-bg: linear-gradient(180deg,rgba(255,255,255,.9),rgba(241,245,249,.85));
  --head-shadow: 0 18px 50px -30px rgba(0,0,0,.08);
  --head-shadow-scrolled: 0 18px 46px -22px rgba(0,0,0,.12);
  --nav-hover: rgba(0,0,0,.04);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--txt);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  /* vinheta sutil pra dar profundidade sobre o canvas */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% 12%,rgba(139,92,246,.10),transparent 60%),
    radial-gradient(90% 70% at 12% 4%,rgba(34,211,238,.08),transparent 55%),
    radial-gradient(120% 120% at 50% 120%,var(--vignette),var(--bg) 70%);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:rgba(34,211,238,.3);color:#fff}

/* canvas Three.js fixo de fundo */
#bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:var(--bg-strength)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2}
.shell{position:relative;z-index:2}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--cy-2)}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--cy),transparent)}
.muted{color:var(--muted)}

/* gradiente de texto coeso */
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===================================================================
   BOTÕES
   =================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;
  font-weight:700;font-size:14.5px;letter-spacing:.01em;padding:13px 22px;border-radius:12px;
  transition:transform .18s cubic-bezier(.34,1.4,.6,1),box-shadow .25s,background .25s,border-color .2s;white-space:nowrap}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-lg{padding:16px 28px;font-size:15.5px}
.btn-primary{position:relative;color:#04111f;background:var(--grad);box-shadow:0 14px 34px -14px rgba(34,211,238,.7)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 44px -14px rgba(59,130,246,.85)}
.btn-ghost{color:var(--txt);background:rgba(255,255,255,.025);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--cy);background:rgba(34,211,238,.07);transform:translateY(-3px)}
.btn-wa{color:#eafff4;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.4)}
.btn-wa:hover{background:rgba(37,211,102,.2);transform:translateY(-3px)}
.btn-wa svg{stroke:none;fill:currentColor}
.btn-block{width:100%}

/* ===================================================================
   HEADER
   =================================================================== */
.head{position:sticky;top:0;z-index:60;transition:.3s}
/* position:relative ancora o dropdown do burger na barra (ver store-bridge.css) */
.head-in{position:relative;display:flex;align-items:center;gap:26px;height:var(--hd);
  margin-top:14px;padding:0 20px;border-radius:18px;border:1px solid var(--line);
  background:var(--head-bg);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:var(--head-shadow)}
.head.scrolled .head-in{border-color:var(--line-2);box-shadow:var(--head-shadow-scrolled)}
/* No desktop a marca nao encolhe (flex:0 0 auto) — quem cede espaco e o menu,
   que vira burger. So no mobile ela passa a truncar (ver @media 920px). */
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;font-family:'Space Grotesk';font-weight:700;font-size:19px;letter-spacing:.01em;white-space:nowrap}
.brand img{height:38px;width:auto;flex:0 0 auto;filter:drop-shadow(0 4px 14px rgba(34,211,238,.4))}
.brand>span{overflow:hidden;text-overflow:ellipsis}
.brand .b3d{color:var(--cy-2)}
.nav{display:flex;align-items:center;gap:4px;margin-left:8px}
/* Icones do menu na barra. Medido em 1265px: 5 itens com icone pedem 558px
   dos 728 disponiveis; os 7 pediriam 754 e quebrariam os rotulos. Por isso
   Sobre e Contato ganham .nav-extra e saem da barra (seguem no burger e no
   rodape). Os 48px do antigo icone de conta entram nessa conta. */
.nav > a{display:inline-flex;align-items:center}
.nav > a > svg{flex:0 0 auto;width:15px;height:15px;margin-right:6px;opacity:.75;transition:opacity .16s}
.nav > a:hover > svg,.nav > a.active > svg{opacity:1}
.nav > a.nav-extra{display:none}
/* nowrap: rotulo de menu nunca quebra em duas linhas dentro da barra */
.nav a{position:relative;white-space:nowrap;padding:9px 11px;border-radius:10px;color:var(--txt-2);font-weight:700;font-size:clamp(13px, 1.3vw, 15px);transition:.16s}
.nav a:hover{color:var(--txt);background:var(--nav-hover)}
.nav a.active{color:var(--txt)}
.nav a.active::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;border-radius:2px;background:var(--grad)}
.head-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.025);color:var(--txt);cursor:pointer;transition:.18s}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{border-color:var(--cy);background:rgba(34,211,238,.1);transform:translateY(-2px);color:var(--cy-2)}
.cart-count{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:var(--grad);color:#04111f;font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:0 4px 12px -2px rgba(34,211,238,.7)}
.head-cta{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:12px;font-weight:700;font-size:14px;
  color:var(--txt);border:1px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box;transition:.2s}
.head-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.head-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px -16px rgba(34,211,238,.8)}
.burger{display:none}

/* faixa lateral vertical decorativa */
.side-tag{position:fixed;left:10px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);z-index:40;pointer-events:none;opacity:.7}

/* ===================================================================
   HERO
   =================================================================== */
.hero{position:relative;padding:46px 0 24px}
.hero-grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:40px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 15px;border-radius:var(--radius-pill);
  border:1px solid var(--line-2);background:rgba(13,19,38,.6);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--txt-2)}
.hero-badge b{color:var(--cy-2);font-weight:700}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--cy);box-shadow:0 0 12px 2px var(--cy);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:clamp(40px,5.6vw,76px);margin:22px 0 0;letter-spacing:-.035em}
.hero h1 .spk{display:inline-block;color:var(--vi-2);filter:drop-shadow(0 0 14px rgba(139,92,246,.7))}

/* "3D" com textura de camadas de impressão FDM */
.print3d{position:relative;display:inline-block;font-size:1.18em;line-height:.9;margin-top:.06em;
  font-weight:700;letter-spacing:-.04em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(59,130,246,.45))}
.print3d::after{/* linhas de camada sobre o texto */
  content:"3D";position:absolute;inset:0;-webkit-background-clip:text;background-clip:text;color:transparent;
  background-image:repeating-linear-gradient(0deg,rgba(4,8,18,.0) 0,rgba(4,8,18,.0) 2px,rgba(4,8,18,.42) 3px,rgba(4,8,18,.0) 5px);
  mix-blend-mode:multiply;pointer-events:none}
.print3d-underline{height:4px;width:148px;margin-top:14px;border-radius:3px;background:var(--grad);
  box-shadow:0 0 20px -2px rgba(34,211,238,.7);position:relative;overflow:hidden}
.print3d-underline::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  transform:translateX(-100%);animation:sweep 3.4s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(220%)}}

.hero .lead{color:var(--txt-2);font-size:clamp(15px,1.5vw,18px);max-width:480px;margin:26px 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:30px}
.hfeat{display:flex;align-items:center;gap:12px;min-width:0;min-height:68px;padding:13px 15px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,22,48,.7),rgba(9,13,26,.5))}
.hfeat-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  border:1px solid var(--line-2);background:rgba(34,211,238,.08)}
.hfeat-ic svg{width:19px;height:19px;fill:none;stroke:var(--cy-2);stroke-width:1.7}
.hfeat .swatches{display:flex}
.hfeat .swatches i{width:14px;height:14px;border-radius:50%;margin-left:-5px;border:2px solid var(--card)}
.hfeat b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hfeat>div{min-width:0}
.hfeat>div>span{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* câmara de impressão (palco do holograma) */
.print-chamber{position:relative;border-radius:24px;border:1px solid var(--line-2);overflow:hidden;
  background:radial-gradient(120% 90% at 60% 20%,rgba(34,211,238,.07),transparent 55%),linear-gradient(180deg,#070b18,#05070f);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05);aspect-ratio:1/.94;min-height:440px}
.print-chamber .corner{position:absolute;width:26px;height:26px;border:2px solid rgba(34,211,238,.5);z-index:4}
.print-chamber .corner.tl{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.print-chamber .corner.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.print-chamber .corner.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-radius:0 0 0 6px}
.print-chamber .corner.br{bottom:14px;right:14px;border-left:0;border-top:0;border-radius:0 0 6px 0}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.chamber-glow{position:absolute;inset:0;z-index:1;background:radial-gradient(50% 42% at 50% 64%,rgba(139,92,246,.22),transparent 70%)}
.chamber-floorlabel{position:absolute;left:0;right:0;bottom:30px;text-align:center;z-index:3;font-family:'Space Grotesk';
  font-size:13px;letter-spacing:.4em;color:rgba(167,180,208,.5);text-transform:uppercase;pointer-events:none}

/* HUD da impressão — o vidro escuro do painel é fixo (visual "heads-up
   display", igual nos dois temas), então o texto tem cor fixa também;
   var(--txt)/var(--muted) ficariam quase pretos em cima desse vidro
   escuro no tema claro (texto escuro sobre fundo escuro = invisível). */
.hud{position:absolute;right:16px;z-index:5;width:188px;border-radius:14px;border:1px solid var(--line-2);
  background:rgba(13,19,38,.6);backdrop-filter:blur(10px);
  padding:13px 14px;box-shadow:0 18px 40px -22px #000}
.hud.h1{top:18px}
.hud-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hud-tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cy-2)}
.hud-tag i{width:7px;height:7px;border-radius:50%;background:var(--cy);box-shadow:0 0 10px 1px var(--cy);animation:pulse 1.4s infinite}
.hud-k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8b98b8;margin-top:11px}
.hud-v{font-size:14px;font-weight:700;font-family:'Space Grotesk';color:#eaf0fb}
.hud-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:9px}
.hud-bar i{display:block;height:100%;width:42%;border-radius:4px;background:var(--grad);box-shadow:0 0 12px rgba(34,211,238,.7)}
.hud-mini{display:flex;gap:10px;position:absolute;right:16px;bottom:18px;z-index:5}
.hud-chip{border-radius:12px;border:1px solid var(--line-2);background:rgba(13,19,38,.6);backdrop-filter:blur(8px);
  padding:9px 13px;min-width:96px}
.hud-chip .hud-k{margin-top:0}

/* ===================================================================
   FAIXA DE SELOS
   =================================================================== */
.trust-strip{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:18px}
.trust-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;flex-wrap:wrap}
.trust{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-2)}
.trust svg{width:20px;height:20px;fill:none;stroke:var(--cy-2);stroke-width:1.5}
.trust-sep{width:5px;height:5px;border-radius:50%;background:var(--line-2)}

/* ===================================================================
   SEÇÕES
   =================================================================== */
.section{position:relative;z-index:2;padding:74px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:36px;flex-wrap:wrap}
.section-head h2{font-size:clamp(28px,3.4vw,42px);margin:14px 0 0}
.section-head p{color:var(--muted);margin:10px 0 0;font-size:14.5px;max-width:440px}
.section-head .hl-notes{display:flex;gap:26px}
.hl-note{display:flex;gap:11px;align-items:flex-start}
.hl-note .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;border:1px solid var(--line-2);background:rgba(139,92,246,.08)}
.hl-note .ic svg{width:18px;height:18px;fill:none;stroke:var(--vi-2);stroke-width:1.7}
.hl-note b{font-size:13.5px;display:block}
.hl-note span{font-size:12px;color:var(--muted)}

/* toolbar busca + sort */
.toolbar{display:flex;gap:14px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.search{position:relative;flex:1;min-width:240px}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;pointer-events:none}
.search input{width:100%;background:var(--bg-2);border:1.5px solid var(--line-2);border-radius:13px;color:var(--txt);
  padding:14px 16px 14px 46px;font-size:14.5px;font-family:inherit;transition:.18s}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 4px rgba(34,211,238,.12)}
.sort{display:flex;align-items:center;gap:10px}
.sort label{color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap}
.select{position:relative}
.select select{appearance:none;background:var(--bg-2);border:1.5px solid var(--line-2);border-radius:13px;color:var(--txt);
  padding:13px 42px 13px 16px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:.18s}
.select select:focus{outline:none;border-color:var(--cy)}
.select::after{content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* chips de categoria */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:var(--radius-pill);
  border:1.5px solid var(--line-2);background:rgba(255,255,255,.02);color:var(--txt-2);font-weight:600;font-size:13.5px;cursor:pointer;transition:.18s}
.chip:hover{border-color:var(--cy);color:var(--txt)}
.chip.active{color:#04111f;background:var(--grad);border-color:transparent;font-weight:700;box-shadow:0 10px 26px -12px rgba(34,211,238,.7)}

/* ===================================================================
   GRID + CARDS DE PRODUTO  (borda neutra, glow ciano só no hover)
   =================================================================== */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(180deg,var(--card-2),var(--card));
  transition:transform .28s cubic-bezier(.34,1.3,.5,1),border-color .25s,box-shadow .3s}
.card:hover{transform:translateY(-6px);border-color:rgba(34,211,238,.45);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9),0 0 0 1px rgba(34,211,238,.18),0 0 50px -14px rgba(34,211,238,.35)}
.card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:radial-gradient(120% 100% at 50% 0,#0d1730,#070b16)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-media img{transform:scale(1.06)}
.card-media .ph{width:100%;height:100%;display:grid;place-items:center;color:#1d2b4d}
.card-media .ph svg{width:74px;height:74px;fill:none;stroke:currentColor;stroke-width:1}
.badge{position:absolute;top:12px;display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:9px;
  font-size:11px;font-weight:800;letter-spacing:.03em;z-index:2;backdrop-filter:blur(4px)}
.badge-off{left:12px;color:#04111f;background:var(--grad)}
/* right:58px: deixa livre o canto onde fica o botão de favoritar (.fav) */
.badge-feat{right:58px;color:var(--vi-2);background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.4)}
.fav{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;z-index:3;
  border:1px solid rgba(255,255,255,.16);background:rgba(7,11,22,.82);backdrop-filter:blur(8px);color:#dbe4f3;cursor:pointer;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.6);transition:transform .18s cubic-bezier(.2,.7,.3,1.4),color .18s,border-color .18s,background .18s}
.fav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:fill .18s}
.fav:hover{color:#fb5e8c;border-color:rgba(251,94,140,.55);transform:scale(1.08)}
.fav.on{color:#fb5e8c;border-color:rgba(251,94,140,.55);background:rgba(251,94,140,.14)}
.fav.on svg{fill:#fb5e8c;stroke:#fb5e8c;animation:favPop .32s cubic-bezier(.2,.7,.3,1.6)}
@keyframes favPop{0%{transform:scale(.55)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.card-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-cat{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cy-2);padding:5px 10px;border-radius:8px;border:1px solid var(--line-2);background:rgba(34,211,238,.06)}
.card-name{font-size:16.5px;font-weight:700;letter-spacing:-.01em;min-height:2.1em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.card-desc{color:var(--muted);font-size:13px;line-height:1.5;min-height:39px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.card-desc.is-empty{visibility:hidden}
.price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 9px;margin-top:auto;min-height:32px}
.price-row.is-promo{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:54px}
.price-label{font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.price-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;min-width:0}
.price-line-de .price-old{font-size:13.5px}
.price-line-por{align-items:center}
.price-line-por .price-label{color:var(--cy-2)}
.price-from{font-size:11.5px;color:var(--muted);white-space:nowrap}
.price-now{font-family:'Space Grotesk';font-size:21px;font-weight:700;color:var(--txt);white-space:nowrap}
.price-old{font-size:13px;color:var(--muted);text-decoration:line-through;white-space:nowrap}
.card-cta{margin-top:6px;width:100%;padding:13px;border-radius:12px;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;border:0;
  color:#04111f;background:var(--grad);box-shadow:0 12px 26px -16px rgba(34,211,238,.8);transition:.2s}
.card-cta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.card-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(59,130,246,.9)}
.card-cta.ghost{color:var(--txt);background:rgba(255,255,255,.04);border:1px solid var(--line-2);box-shadow:none}
.card-cta.ghost:hover{border-color:var(--cy);background:rgba(34,211,238,.08)}

/* ===================================================================
   FEATURES STRIP
   =================================================================== */
.feat-band{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(11,17,36,.6),rgba(7,10,20,.4))}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.feat{display:flex;gap:15px;padding:32px 26px;border-right:1px solid var(--line)}
.feat:last-child{border-right:0}
.feat-ic{width:48px;height:48px;border-radius:13px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-2);background:rgba(34,211,238,.07)}
.feat-ic svg{width:23px;height:23px;fill:none;stroke:var(--cy-2);stroke-width:1.6}
.feat:nth-child(2) .feat-ic{background:rgba(59,130,246,.08)}.feat:nth-child(2) .feat-ic svg{stroke:#7eb0ff}
.feat:nth-child(3) .feat-ic{background:rgba(139,92,246,.08)}.feat:nth-child(3) .feat-ic svg{stroke:var(--vi-2)}
.feat:nth-child(4) .feat-ic{background:rgba(34,211,238,.07)}
.feat b{font-size:15px;font-weight:700}
.feat p{margin:5px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}

/* ===================================================================
   CLUBE + NEWSLETTER
   =================================================================== */
.duo{display:grid;grid-template-columns:1fr 1.3fr;gap:22px}
.panel-card{position:relative;border-radius:var(--radius-lg);border:1px solid var(--line-2);overflow:hidden;padding:34px;
  background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(139,92,246,.08));box-shadow:var(--shadow)}
.panel-card.dark{background:linear-gradient(180deg,var(--card-2),var(--card))}
.club-head{display:flex;align-items:center;gap:14px}
.club-ic{width:54px;height:54px;border-radius:15px;flex:none;display:grid;place-items:center;background:rgba(34,211,238,.1);border:1px solid var(--line-2)}
.club-ic svg{width:27px;height:27px;fill:none;stroke:var(--cy-2);stroke-width:1.5}
.panel-card h3{font-size:23px}
.panel-card p{color:var(--txt-2);font-size:14px;margin:8px 0 0}
.news-form{display:flex;gap:10px;margin-top:20px}
.news-form input{flex:1;background:var(--bg-2);border:1.5px solid var(--line-2);border-radius:13px;color:var(--txt);padding:14px 16px;font-size:14.5px;font-family:inherit}
.news-form input:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 4px rgba(34,211,238,.12)}

/* ===================================================================
   FOOTER
   =================================================================== */
.foot{position:relative;z-index:2;border-top:1px solid var(--line);margin-top:40px;padding:56px 0 0;
  background:linear-gradient(180deg,transparent,rgba(8,12,24,.7))}
/* min-width:0 nas colunas: sem isso o min-content de um filho (a fileira de
   redes sociais) empurrava a coluna 1fr alem da tela em telas de ~320px. */
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px}
.foot-grid>*{min-width:0}
.foot-brand{display:flex;align-items:center;gap:12px;font-family:'Space Grotesk';font-weight:700;font-size:18px}
.foot-brand img{height:36px}
.foot-about{color:var(--txt-2);font-size:13.5px;max-width:300px;margin:16px 0}
/* wrap: os 3 botoes de rede social nao cabem lado a lado abaixo de ~360px */
.foot-soc{display:flex;flex-wrap:wrap;gap:10px}
.foot-soc a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:11px;border:1px solid var(--line-2);
  font-size:13px;font-weight:600;color:var(--txt-2);transition:.18s}
.foot-soc a:hover{transform:translateY(-2px);border-color:var(--cy);color:var(--txt)}
.foot-soc svg{width:16px;height:16px}
.foot-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 16px;font-family:'Inter'}
/* icone + rotulo: flex alinha o SVG com a linha de texto e o gap fica igual
   pra todos, inclusive na coluna de categorias que usa emoji. */
.foot-col a{display:flex;align-items:center;gap:9px;color:var(--txt-2);font-size:13.5px;padding:6px 0;transition:.15s}
.foot-col a svg{flex:0 0 auto;opacity:.65;transition:opacity .15s,color .15s}
.foot-col a:hover svg{opacity:1;color:var(--cy-2)}
.foot-emoji{flex:0 0 auto;width:15px;text-align:center;font-size:13px;line-height:1}
.foot-col a:hover{color:var(--cy-2);transform:translateX(3px)}
.foot-tags{display:flex;gap:8px;margin-top:14px}
.foot-tags span{padding:5px 11px;border-radius:8px;font-size:11px;font-weight:700;letter-spacing:.04em}
.foot-bottom{border-top:1px solid var(--line);padding:22px 0;display:flex;align-items:center;justify-content:center;text-align:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12.5px}

/* ===================================================================
   CART DRAWER
   =================================================================== */
.backdrop{position:fixed;inset:0;background:rgba(4,6,14,.66);backdrop-filter:blur(3px);z-index:100;opacity:0;visibility:hidden;transition:.3s}
.backdrop.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:418px;max-width:92vw;z-index:101;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--panel),var(--bg-2));border-left:1px solid var(--line-2);
  transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);box-shadow:-30px 0 80px rgba(0,0,0,.6)}
.drawer.on{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 18px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:19px}
.drawer-items{flex:1;overflow:auto;padding:16px 22px;display:flex;flex-direction:column;gap:14px}
.ci{display:flex;gap:13px;align-items:center}
.ci img,.ci .ci-ph{width:64px;height:64px;border-radius:12px;object-fit:cover;background:#0a1224;flex:none}
.ci .ci-ph{display:grid;place-items:center;color:#2a3a5e}
.ci-info{flex:1;min-width:0}
.ci-info b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-price{color:var(--cy-2);font-weight:700;font-size:14px;margin-top:2px}
.qty{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line-2);border-radius:9px;overflow:hidden;margin-top:6px}
.qty button{width:26px;height:26px;background:rgba(255,255,255,.04);border:0;color:var(--txt);cursor:pointer;font-size:15px}
.qty button:hover{background:rgba(34,211,238,.15)}
.qty span{min-width:30px;text-align:center;font-size:13px;font-weight:700}
.ci-del{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px}
.ci-del:hover{color:#fb5e8c}
.ci-del svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.drawer-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted);padding:30px;text-align:center}
.drawer-empty svg{width:54px;height:54px;fill:none;stroke:var(--line-2);stroke-width:1.2}
.drawer-foot{padding:20px 22px;border-top:1px solid var(--line)}
.drawer-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.drawer-total strong{font-family:'Space Grotesk';font-size:24px}

/* ===================================================================
   MOBILE NAV
   =================================================================== */
.mobnav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;height:64px;
  background:linear-gradient(180deg,rgba(11,17,36,.92),rgba(7,10,20,.98));backdrop-filter:blur(16px);border-top:1px solid var(--line-2)}
.mobnav-in{display:flex;height:100%}
.mobnav a,.mobnav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);font-size:10.5px;font-weight:700;background:none;border:0;cursor:pointer;position:relative}
.mobnav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
.mobnav a.active{color:var(--cy-2)}
.mn-badge{position:absolute;top:7px;right:50%;margin-right:-22px;min-width:17px;height:17px;border-radius:9px;background:var(--grad);
  color:#04111f;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px}

/* ===================================================================
   TOASTS
   =================================================================== */
.toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:10px;align-items:center}
.toast{display:flex;align-items:center;gap:11px;padding:14px 20px;border-radius:13px;background:var(--panel);border:1px solid var(--line-2);
  color:var(--txt);font-size:14px;font-weight:600;box-shadow:var(--shadow);border-left:3px solid var(--cy);animation:toastIn .35s cubic-bezier(.34,1.4,.6,1)}
.toast svg{width:20px;height:20px;fill:none;stroke:var(--cy-2);stroke-width:2}
@keyframes toastIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ===================================================================
   REVEAL ON SCROLL
   =================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===================================================================
   TWEAKS PANEL
   =================================================================== */
/* O botão "Estilo" agora mora dentro da câmara de impressão (.hud-mini, ao
   lado dos chips Material/Status) em vez de flutuar fixo sobre a página —
   por isso é mais um chip do vidro escuro fixo do HUD (ver .hud-chip) do
   que um elemento que segue o tema: cor de texto fixa clara, não
   var(--txt), senão ficaria escura sobre esse vidro escuro no tema claro. */
.tweak-fab{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:12px;
  border:1px solid var(--line-2);background:rgba(13,19,38,.6);backdrop-filter:blur(8px);
  color:#eaf0fb;font-weight:700;font-size:12.5px;cursor:pointer;white-space:nowrap;transition:.2s}
.tweak-fab:hover{border-color:var(--cy)}
.tweak-fab svg{width:15px;height:15px;fill:none;stroke:var(--cy-2);stroke-width:1.8}
/* O painel continua fixo/flutuante (não faz sentido prender ele dentro da
   câmara), só ancorado no canto inferior direito da tela em vez de perto
   do antigo FAB. */
.tweak-panel{position:fixed;right:20px;bottom:20px;z-index:121;width:288px;border-radius:18px;border:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--panel),var(--bg-2));backdrop-filter:blur(18px);box-shadow:var(--shadow);
  padding:18px;transform:translateY(12px) scale(.97);opacity:0;visibility:hidden;transform-origin:bottom right;transition:.24s cubic-bezier(.34,1.3,.6,1)}
.tweak-panel.on{opacity:1;visibility:visible;transform:none}
.tweak-panel h4{font-size:14px;display:flex;align-items:center;justify-content:space-between}
.tweak-panel h4 button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:18px;line-height:1}
.tweak-sec{margin-top:16px}
.tweak-sec>span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.seg{display:flex;gap:6px;margin-top:9px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:11px;padding:4px}
.seg button{flex:1;padding:8px 6px;border-radius:8px;border:0;background:none;color:var(--txt-2);font-size:12px;font-weight:700;cursor:pointer;transition:.16s}
.seg button.on{color:#04111f;background:var(--grad)}
.tw-swatches{display:flex;gap:8px;margin-top:9px}
.tw-swatches button{width:34px;height:34px;border-radius:10px;border:2px solid transparent;cursor:pointer;transition:.16s}
.tw-swatches button.on{border-color:#fff;transform:scale(1.06)}
.tw-range{width:100%;margin-top:10px;accent-color:var(--cy)}

/* O banner de cookies (.cookie-consent, store-privacy.css) é fixed/bottom e
   tem z-index bem maior — sem isso ele cobre o painel de estilo por cima
   (mesmo canto). Enquanto o banner existir (classe no body, ver
   store-cookie-consent.js), sobe o painel pra cima dele. */
body.has-cookie-banner .tweak-panel{bottom:100px}

/* ===================================================================
   RESPONSIVO
   =================================================================== */
@media (max-width:1080px){
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .feat:nth-child(2){border-right:0}
  .feat{border-bottom:1px solid var(--line)}
  .duo{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* O atalho de admin (so aparece logado como admin) e o item menos essencial da
   barra: some antes do menu, para o nav caber em telas de 1280. O painel segue
   acessivel por /dashboard. */
@media (max-width:1360px){
  .head-actions .admin-only{display:none}
}
/* A barra comporta os 7 itens do menu acima de ~1260px (marca + nav + acoes).
   Abaixo disso o menu vai pro burger: e melhor trocar de padrao do que deixar os
   rotulos quebrando em duas linhas dentro de uma barra de altura fixa.
   Mantido em sincronia com store-bridge.css (.nav.is-open) e store-visual.js. */
@media (max-width:1260px){
  .nav{display:none}
  .burger{display:grid}
}
@media (max-width:920px){
  .hero-grid-2{grid-template-columns:1fr;gap:30px}
  .print-chamber{min-height:380px}
  .head-cta span{display:none}
  .side-tag{display:none}
  /* Aqui sim a marca cede: com a barra reduzida a marca + acoes, truncar o nome
     e melhor do que empurrar os botoes pra fora da tela (estourava em 375px). */
  .brand{flex:0 1 auto;min-width:0}
}
@media (max-width:680px){
  .wrap{padding:0 18px}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .hero-feats{grid-template-columns:1fr}
  .section{padding:54px 0}
  .mobnav{display:block}
  body{padding-bottom:64px}
  .head-actions .admin-only{display:none}
  /* redundante com o head-cta (que vira só ícone aqui) — some pra abrir espaço no header */
  .head-account-icon{display:none}
  /* A .mobnav (barra inferior) já traz "Conta": manter o head-cta aqui era o
     terceiro atalho pra mesma tela e estourava o header em telas de 375px. */
  .head-cta{display:none}
  .trust-in{justify-content:flex-start;gap:14px}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .hud{width:150px}
  .tweak-panel{bottom:74px}
  /* banner de cookies quebra em 2-3 linhas nessa largura, fica bem mais alto */
  body.has-cookie-banner .tweak-panel{bottom:150px}
  /* header apertado: reduz o respiro entre marca e ações e o padding interno */
  .head-in{gap:12px;padding:0 14px}
  .head-actions{gap:8px}
}
@media (max-width:440px){
  .prod-grid{grid-template-columns:1fr}
  .hero h1{font-size:42px}
  /* marca menor pra caber com folga ao lado das ações do header */
  .brand{font-size:16px;gap:8px}
  .brand img{height:30px}
  /* recupera os ~6px que faltavam pra "EGGYS 3D LAB" caber inteiro em 375px;
     abaixo disso o text-overflow da .brand>span segue como rede de seguranca */
  .head-in{gap:10px;padding:0 12px}
  .icon-btn{width:40px;height:40px}
  .icon-btn svg{width:18px;height:18px}
  .hud{width:132px}
  /* Só os chips Material/Status (decorativos) somem aqui; o botão Estilo, que é
     funcional, continua visível. Antes o .hud-mini inteiro sumia (escondia o
     Estilo junto). */
  .hud-mini .hud-chip{display:none}
}

/* ===================================================================
   PÁGINAS INTERNAS
   =================================================================== */
.page-head{position:relative;z-index:2;padding:34px 0 6px}
.crumbs{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);margin-bottom:14px;flex-wrap:wrap}
.crumbs a:hover{color:var(--cy-2)}
.crumbs svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.page-head h1{font-size:clamp(30px,4vw,46px)}
.page-head .ph-sub{color:var(--txt-2);margin:10px 0 0;font-size:15px;max-width:560px}

/* ---------- catálogo com sidebar ---------- */
.shop-layout{display:grid;grid-template-columns:268px minmax(0,1fr);gap:26px;align-items:start;position:relative;z-index:2}
.filters{position:sticky;top:96px;border-radius:var(--radius-lg);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--card-2),var(--card));padding:22px;box-shadow:var(--shadow)}
.filters h3{font-size:16px;display:flex;align-items:center;gap:9px;margin-bottom:16px}
.filters h3 svg{width:18px;height:18px;fill:none;stroke:var(--cy-2);stroke-width:1.8}
.fgroup{padding:18px 0;border-top:1px solid var(--line)}
.fgroup:first-of-type{border-top:0;padding-top:0}
.fgroup>span{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:13px}
.fopt{display:flex;align-items:center;gap:11px;padding:7px 0;cursor:pointer;font-size:13.5px;color:var(--txt-2);transition:.15s}
.fopt:hover{color:var(--txt)}
.fopt .cb{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line-2);flex:none;display:grid;place-items:center;transition:.15s}
.fopt .cb svg{width:12px;height:12px;fill:none;stroke:#04111f;stroke-width:3;opacity:0}
.fopt input{display:none}
.fopt input:checked+.cb{background:var(--grad);border-color:transparent}
.fopt input:checked+.cb svg{opacity:1}
.fopt .ct{margin-left:auto;font-size:12px;color:var(--muted)}
.frange{margin-top:6px}
.frange-vals{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--cy-2);margin-bottom:8px}
.frange input{width:100%;accent-color:var(--cy)}
.fstars{display:flex;gap:3px;color:#f5b942}
.fstars svg{width:15px;height:15px;fill:currentColor;stroke:none}
.fswatches{display:flex;gap:9px;flex-wrap:wrap}
.fswatches button{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-2);cursor:pointer;transition:.15s}
.fswatches button:hover{transform:scale(1.12);border-color:#fff}
.shop-main-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.shop-count{font-size:14px;color:var(--muted)}
.shop-count b{color:var(--txt)}
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px}
.pagination button,.pagination a{min-width:42px;height:42px;border-radius:11px;border:1px solid var(--line-2);background:rgba(255,255,255,.02);
  color:var(--txt-2);font-weight:700;font-size:14px;display:grid;place-items:center;cursor:pointer;transition:.16s;padding:0 12px}
.pagination .on{color:#04111f;background:var(--grad);border-color:transparent}
.pagination button:hover:not(.on){border-color:var(--cy);color:var(--txt)}
.card-media .ph-obj{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(120% 100% at 50% 30%,rgba(34,211,238,.08),#070b16)}
.card-media .ph-obj svg{width:96px;height:96px;fill:none;stroke:var(--cy);stroke-width:.9;opacity:.55;filter:drop-shadow(0 0 10px rgba(34,211,238,.5))}

/* ---------- detalhe do produto ---------- */
.pd-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:start;position:relative;z-index:2}
.pd-gallery{position:sticky;top:96px}
.pd-main{border-radius:var(--radius-lg);border:1px solid var(--line);overflow:hidden;aspect-ratio:1/1;
  background:radial-gradient(120% 100% at 50% 0,#0d1730,#070b16);position:relative}
.pd-main img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:flex;gap:12px;margin-top:14px}
.pd-thumb{width:78px;height:78px;border-radius:14px;overflow:hidden;border:2px solid var(--line-2);cursor:pointer;background:#0a1224;transition:.15s}
.pd-thumb.on,.pd-thumb:hover{border-color:var(--cy)}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-info .card-cat{font-size:11.5px}
.pd-info h1{font-size:clamp(26px,3.4vw,38px);margin:14px 0 12px}
.pd-rating{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:13.5px;color:var(--muted)}
.pd-rating .stars{display:flex;gap:2px;color:#f5b942}
.pd-rating .stars svg{width:17px;height:17px;fill:currentColor;stroke:none}
.pd-price{display:flex;align-items:baseline;gap:12px;margin:6px 0 22px}
.pd-price.is-promo{flex-direction:column;align-items:flex-start;gap:6px}
.pd-price-line{display:flex;align-items:baseline;gap:10px}
.pd-price-line>span:first-child{font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pd-price-line.por>span:first-child{color:var(--cy-2)}
.pd-price .now{font-family:'Space Grotesk';font-size:36px;font-weight:700}
.pd-price .old{font-size:18px;color:var(--muted);text-decoration:line-through}
.pd-price .off{padding:5px 11px;border-radius:9px;font-size:12px;font-weight:800;color:#04111f;background:var(--grad)}
.pd-desc{color:var(--txt-2);font-size:15px;line-height:1.7;margin-bottom:24px}
.vlabel{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:0 0 12px}
.vopts{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:22px}
.vopt{position:relative;display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border-radius:13px;border:1.5px solid var(--line-2);
  background:rgba(255,255,255,.025);cursor:pointer;transition:.16s;font-size:14px;font-weight:600;color:var(--txt)}
.vopt:hover{border-color:var(--cy);transform:translateY(-2px)}
.vopt.sel{border-color:var(--cy);background:rgba(34,211,238,.1);box-shadow:0 0 0 1px var(--cy)}
.vopt .sw{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.2)}
.pd-buy{display:flex;gap:12px;align-items:stretch;margin-bottom:24px}
.qsel{display:inline-flex;align-items:center;border:1.5px solid var(--line-2);border-radius:13px;overflow:hidden}
.qsel button{width:46px;height:100%;background:rgba(255,255,255,.03);border:0;color:var(--txt);font-size:20px;cursor:pointer}
.qsel button:hover{background:rgba(34,211,238,.14)}
.qsel span{min-width:46px;text-align:center;font-weight:700;font-size:16px}
.pd-trust{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:24px;border-top:1px solid var(--line)}
.pd-trust .pt{display:flex;gap:11px;align-items:flex-start}
.pd-trust .pt svg{width:22px;height:22px;fill:none;stroke:var(--cy-2);stroke-width:1.6;flex:none}
.pd-trust .pt b{font-size:13.5px;display:block}
.pd-trust .pt span{font-size:12px;color:var(--muted)}
.pd-specs{margin-top:30px;border-radius:var(--radius-lg);border:1px solid var(--line);background:linear-gradient(180deg,var(--card-2),var(--card));overflow:hidden}
.pd-specs .srow{display:flex;justify-content:space-between;padding:14px 20px;border-top:1px solid var(--line);font-size:14px}
.pd-specs .srow:first-child{border-top:0}
.pd-specs .srow .sk{color:var(--muted)}

/* ---------- checkout ---------- */
.co-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start;position:relative;z-index:2}
.steps{display:flex;align-items:center;gap:0;margin-bottom:28px}
.step{display:flex;align-items:center;gap:11px;flex:1}
.step .sn{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;font-size:14px;
  border:2px solid var(--line-2);background:var(--panel);color:var(--muted)}
.step.on .sn{border-color:transparent;background:var(--grad);color:#04111f}
.step.done .sn{border-color:var(--cy);background:rgba(34,211,238,.14);color:var(--cy-2)}
.step .st{font-size:13.5px;font-weight:700;color:var(--txt-2)}
.step.on .st{color:var(--txt)}
.step.done .st{color:var(--txt-2)}
.step .bar{flex:1;height:2px;background:var(--line-2);margin:0 12px;border-radius:2px}
.step.on .bar,.step.done .bar{background:var(--grad)}
.co-card{border-radius:var(--radius-lg);border:1px solid var(--line);background:linear-gradient(180deg,var(--card-2),var(--card));padding:26px;margin-bottom:20px}
.co-card h3{font-size:18px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.co-card h3 svg{width:20px;height:20px;fill:none;stroke:var(--cy-2);stroke-width:1.8}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--txt-2);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:var(--bg-2);border:1.5px solid var(--line-2);border-radius:12px;color:var(--txt);
  padding:13px 15px;font-size:14.5px;font-family:inherit;transition:.16s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 4px rgba(34,211,238,.12)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pay-opts{display:flex;flex-direction:column;gap:12px}
.pay{display:flex;align-items:center;gap:14px;padding:16px;border-radius:14px;border:1.5px solid var(--line-2);cursor:pointer;transition:.16s}
.pay:hover{border-color:var(--cy)}
.pay.sel{border-color:var(--cy);background:rgba(34,211,238,.07)}
.pay .pico{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(34,211,238,.06)}
.pay .pico svg{width:22px;height:22px;fill:none;stroke:var(--cy-2);stroke-width:1.7}
.pay b{font-size:14.5px}
.pay span{font-size:12.5px;color:var(--muted)}
.pay .pr{margin-left:auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2)}
.pay.sel .pr{border-color:var(--cy);background:radial-gradient(circle,var(--cy) 40%,transparent 45%)}
.summary{position:sticky;top:96px;border-radius:var(--radius-lg);border:1px solid var(--line-2);background:linear-gradient(180deg,var(--card-2),var(--card));padding:24px;box-shadow:var(--shadow)}
.summary h3{font-size:17px;margin-bottom:18px}
.sitem{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.sitem:first-of-type{border-top:0}
.sitem img,.sitem .sph{width:56px;height:56px;border-radius:11px;object-fit:cover;background:#0a1224;flex:none}
.sitem .sph{display:grid;place-items:center;color:#2a3a5e}
.sitem .si{flex:1;min-width:0}
.sitem .si b{font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sitem .si span{font-size:12px;color:var(--muted)}
.sitem .sp{font-weight:700;font-size:14px;color:var(--cy-2)}
.sline{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:var(--txt-2)}
.stotal{display:flex;justify-content:space-between;align-items:center;padding:16px 0 4px;border-top:1px solid var(--line);margin-top:10px}
.stotal strong{font-family:'Space Grotesk';font-size:26px}
.coupon{display:flex;gap:10px;margin:14px 0}
.coupon input{flex:1;background:var(--bg-2);border:1.5px solid var(--line-2);border-radius:11px;color:var(--txt);padding:12px 14px;text-transform:uppercase;letter-spacing:.5px;font-size:14px}
.coupon button{padding:0 18px;border-radius:11px;border:1px solid rgba(34,211,238,.4);background:rgba(34,211,238,.12);color:var(--cy-2);font-weight:700;cursor:pointer}

/* ---------- conta / acompanhar ---------- */
.acct-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:26px;align-items:start;position:relative;z-index:2}
/* min-width:0 nas colunas: sem isso a coluna não encolhe abaixo do min-content
   do .acct-nav (fileira de abas com nowrap), e o overflow-x:auto dele nunca
   chega a valer — a página inteira esticava além da tela no mobile. */
.acct-grid>*{min-width:0}
.acct-side{border-radius:var(--radius-lg);border:1px solid var(--line);background:linear-gradient(180deg,var(--card-2),var(--card));padding:22px;position:sticky;top:96px}
.acct-user{display:flex;align-items:center;gap:13px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:14px}
.acct-av{width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--grad);color:#04111f;font-weight:800;font-size:20px;font-family:'Space Grotesk'}
.acct-user b{font-size:15px;display:block}
.acct-user span{font-size:12.5px;color:var(--muted)}
.acct-nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;color:var(--txt-2);font-size:14px;font-weight:600;transition:.15s;cursor:pointer}
.acct-nav a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.acct-nav a:hover{background:rgba(255,255,255,.04);color:var(--txt)}
.acct-nav a.on{background:rgba(34,211,238,.1);color:var(--cy-2)}
.order-card{border-radius:var(--radius-lg);border:1px solid var(--line);background:linear-gradient(180deg,var(--card-2),var(--card));padding:20px 22px;margin-bottom:16px}
.order-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.order-top .oid{font-family:'Space Grotesk';font-weight:700}
.order-top .od{font-size:12.5px;color:var(--muted)}
.ostatus{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:9px;font-size:12px;font-weight:700}
.ostatus.prod{background:rgba(139,92,246,.14);color:#c4b5fd}
.ostatus.sent{background:rgba(34,211,238,.14);color:#67e8f9}
.ostatus.done{background:rgba(52,211,153,.14);color:#6ee7b7}
.order-items{display:flex;gap:10px;flex-wrap:wrap;color:var(--txt-2);font-size:13.5px}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.kpi{border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(180deg,var(--card-2),var(--card));padding:18px}
.kpi b{font-family:'Space Grotesk';font-size:28px;display:block}
.kpi span{font-size:12.5px;color:var(--muted)}

/* timeline acompanhar */
.track-box{max-width:680px;margin:0 auto;position:relative;z-index:2}
.track-search{display:flex;gap:12px;margin-bottom:30px}
.track-search input{flex:1;background:var(--bg-2);border:1.5px solid var(--line-2);border-radius:13px;color:var(--txt);padding:15px 18px;font-size:15px;letter-spacing:.5px}
.track-search input:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 4px rgba(34,211,238,.12)}
.timeline{position:relative;padding-left:8px}
.tl{display:flex;gap:18px;padding-bottom:6px}
.tl-rail{display:flex;flex-direction:column;align-items:center}
.tl-dot{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;border:2px solid var(--line-2);background:var(--panel);color:var(--muted);transition:.2s}
.tl-dot svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}
.tl-line{width:2px;flex:1;background:var(--line-2);margin:4px 0;min-height:30px}
.tl.done .tl-dot{border-color:transparent;background:var(--grad);color:#04111f}
.tl.done .tl-line{background:var(--grad)}
.tl.cur .tl-dot{border-color:var(--cy);color:var(--cy-2);box-shadow:0 0 0 5px rgba(34,211,238,.15)}
.tl-body{padding-bottom:30px}
.tl-body b{font-size:15.5px}
.tl-body p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.tl-body .tt{font-size:12px;color:var(--cy-2);font-weight:600}

/* ---------- sobre ---------- */
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:40px 0}
.astat{text-align:center;padding:26px 16px;border-radius:var(--radius-lg);border:1px solid var(--line);background:linear-gradient(180deg,var(--card-2),var(--card))}
.astat b{font-family:'Space Grotesk';font-size:clamp(30px,4vw,44px);display:block}
.astat span{font-size:13px;color:var(--muted)}
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proc{position:relative;border-radius:var(--radius-lg);border:1px solid var(--line);background:linear-gradient(180deg,var(--card-2),var(--card));padding:28px;overflow:hidden}
.proc .pnum{font-family:'Space Grotesk';font-size:54px;font-weight:700;line-height:1;background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.5}
.proc h3{font-size:19px;margin:8px 0 8px}
.proc p{color:var(--txt-2);font-size:14px}
/* Icone da etapa no canto do card. Fica aqui (e nao no minime.css) porque
   /sobre tambem usa .proc e nao carrega o CSS das paginas MINI.
   .proc ja e position:relative/overflow:hidden — nao precisou mexer no HTML. */
.proc-ic{position:absolute;top:22px;right:22px;color:var(--cy);opacity:.35;pointer-events:none;transition:opacity .3s,transform .3s}
.proc:hover .proc-ic{opacity:.75;transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.proc:hover .proc-ic{transform:none}}
.about-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;position:relative;z-index:2}
.about-hero .imgbox{border-radius:var(--radius-lg);border:1px solid var(--line-2);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow)}
.about-hero .imgbox img{width:100%;height:100%;object-fit:cover}

/* ---------- contato ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:30px;align-items:start;position:relative;z-index:2}
.contact-info .ci-row{display:flex;gap:15px;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-info .ci-row .cic{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(34,211,238,.07)}
.contact-info .ci-row .cic svg{width:22px;height:22px;fill:none;stroke:var(--cy-2);stroke-width:1.7}
.contact-info .ci-row b{font-size:15px}
.contact-info .ci-row span{font-size:13.5px;color:var(--muted)}
.faq{margin-top:30px}
.faq-item{border-bottom:1px solid var(--line);padding:18px 0}
.faq-item summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--cy-2);font-size:22px;font-weight:400}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin:12px 0 0;color:var(--txt-2);font-size:14px}

@media (max-width:920px){
  /* alinhado ao breakpoint padrão de tablet (920px) — antes era 980px, uma
     faixa estreita onde o nav já virava hambúrguer mas esses grids ainda
     ficavam em 2 colunas apertadas */
  .shop-layout,.pd-grid,.co-grid,.acct-grid,.about-hero,.contact-grid{grid-template-columns:1fr}
  .filters,.pd-gallery,.summary,.acct-side{position:static}
  .about-stats{grid-template-columns:repeat(2,1fr)}
  .proc-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .pd-trust{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:1fr}
}

/* ===================================================================
   LOADER 3D (carregamento + transição entre páginas)
   Cubo isométrico impresso camada a camada com o nome da marca.
   =================================================================== */
.ldr-overlay{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  background:radial-gradient(120% 90% at 50% 35%,#0a1226,#05070f 70%);
  opacity:1;transition:opacity .55s ease,visibility .55s}
.ldr-overlay::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(34,211,238,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.05) 1px,transparent 1px);
  background-size:42px 42px;mask-image:radial-gradient(60% 60% at 50% 45%,#000,transparent 75%);-webkit-mask-image:radial-gradient(60% 60% at 50% 45%,#000,transparent 75%)}
.ldr-overlay.hide{opacity:0;visibility:hidden;pointer-events:none}
.ldr-3d{perspective:760px;position:relative;z-index:1}
.ldr-stage{position:relative;width:150px;height:150px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(0);
  animation:ldrSpin 7s linear infinite}
@keyframes ldrSpin{from{transform:rotateX(58deg) rotateZ(0)}to{transform:rotateX(58deg) rotateZ(360deg)}}
.ldr-layer{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px;border-radius:8px;
  border:2px solid var(--cy);background:linear-gradient(135deg,rgba(34,211,238,.20),rgba(139,92,246,.14));
  box-shadow:0 0 18px rgba(34,211,238,.45),inset 0 0 14px rgba(34,211,238,.18);
  transform:translateZ(calc((var(--i) - 3.5) * 16px));opacity:0;
  animation:ldrBuild 2.2s ease-in-out infinite;animation-delay:calc(var(--i) * 0.13s)}
.ldr-layer:nth-child(even){border-color:var(--vi);box-shadow:0 0 18px rgba(139,92,246,.45),inset 0 0 14px rgba(139,92,246,.18)}
@keyframes ldrBuild{0%{opacity:0;transform:translateZ(calc((var(--i) - 3.5) * 16px)) scale(.55)}
  20%{opacity:1;transform:translateZ(calc((var(--i) - 3.5) * 16px)) scale(1)}
  76%{opacity:1;transform:translateZ(calc((var(--i) - 3.5) * 16px)) scale(1)}
  92%,100%{opacity:0;transform:translateZ(calc((var(--i) - 3.5) * 16px)) scale(1.05)}}
.ldr-nozzle{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#fff;
  box-shadow:0 0 16px 5px var(--cy);transform:translateZ(70px);animation:ldrNoz 2.2s ease-in-out infinite}
@keyframes ldrNoz{0%{transform:translateZ(-56px)}50%{transform:translateZ(60px)}100%{transform:translateZ(-56px)}}
.ldr-word{position:relative;z-index:1;display:flex;align-items:center;gap:13px;white-space:nowrap;font-family:'Space Grotesk';font-weight:700;
  font-size:26px;letter-spacing:.01em;color:var(--txt)}
.ldr-word svg{height:40px;width:auto;filter:drop-shadow(0 0 12px rgba(34,211,238,.5))}
.ldr-word b{font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ldr-bar{position:relative;z-index:1;width:220px;height:5px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.ldr-bar i{position:absolute;left:0;top:0;height:100%;width:40%;border-radius:4px;background:var(--grad);
  box-shadow:0 0 14px rgba(34,211,238,.7);animation:ldrBar 1.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes ldrBar{0%{left:-42%}100%{left:102%}}
.ldr-tag{position:relative;z-index:1;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-top:-14px}
.ldr-tag span{display:inline-block;animation:ldrDots 1.4s steps(4) infinite;overflow:hidden;vertical-align:bottom;width:1.4em;text-align:left}
@keyframes ldrDots{0%{width:0}100%{width:1.4em}}
@media (prefers-reduced-motion:reduce){.ldr-stage,.ldr-layer,.ldr-nozzle,.ldr-bar i,.ldr-tag span{animation-duration:.001s;animation-iteration-count:1}.ldr-layer{opacity:1}}

/* Tema claro: o fundo do loader era um azul-marinho fixo (não seguia o tema) e
   nozzle/barra eram brancos — ficavam desordenados sobre um overlay escuro
   por cima de uma página clara. Ajusta o overlay e os elementos brancos. */
[data-theme="light"] .ldr-overlay{background:radial-gradient(120% 90% at 50% 35%,#eef2ff,#f8fafc 70%)}
[data-theme="light"] .ldr-overlay::before{background-image:linear-gradient(rgba(8,145,178,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(8,145,178,.08) 1px,transparent 1px)}
[data-theme="light"] .ldr-nozzle{background:#0f172a}
[data-theme="light"] .ldr-bar{background:rgba(15,23,42,.08)}

/* Tema claro: a câmara de impressão (hero da home) tinha fundo escuro fixo
   e a névoa 3D (fog) do Three.js continuava escura via JS (ver
   store-hero.js/setTheme) — ficava uma caixa escura destoando da página
   clara. O rótulo do piso também precisa escurecer pra continuar legível.
   Fundo quase transparente e SEM blur (blur transformava a rede de cubos
   do #bgfx atrás da câmara numa mancha "gelo" borrada) — só um tingimento
   bem leve, deixando os cubos nítidos por trás e reduzindo a sensação de
   caixa sólida. Borda/sombra também mais discretas por isso.*/
[data-theme="light"] .print-chamber{
  background:radial-gradient(120% 90% at 60% 20%,rgba(8,145,178,.06),transparent 55%),linear-gradient(180deg,rgba(238,242,255,.16),rgba(221,230,245,.12));
  border-color:rgba(34,211,238,.22);
  box-shadow:none;
}
[data-theme="light"] .chamber-floorlabel{color:rgba(30,41,59,.45)}

/* Os cards flutuantes dentro da câmara (painel HUD, chips Material/Status e o
   botão Estilo) usam o mesmo vidro escuro translúcido rgba(13,19,38,.6) nos
   DOIS temas (texto claro fixo) — por escolha visual, para lerem como o HUD
   de uma impressora real, deixando os cubos aparecerem por trás. Sem override
   de tema claro aqui de propósito. */

/* ===================================================================
   KIDS THEME — Tema Personalizado para Categoria Brinquedos/Infantil
   Visual lúdico claro/vibrante + ótima legibilidade dos textos
   =================================================================== */
.kids-theme-hero {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(236, 72, 153, 0.14) 50%, rgba(59, 130, 246, 0.16) 100%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  padding: 24px 28px;
  margin-bottom: 24px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.kids-theme-hero::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(236, 72, 153, 0.08) 55%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.kids-hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.kids-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f59e0b, #ec4899);
  color: #fff;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}
.kids-hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
}
.kids-hero-title span {
  background: linear-gradient(90deg, #fcd34d, #f472b6, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kids-hero-sub {
  color: #eaf0fb;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 16px 0;
  max-width: 720px;
}
.kids-reassurance-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.kids-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e2e8f0;
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.kids-tag:hover {
  transform: translateY(-2px);
  border-color: #f59e0b;
}
.kids-tag.tag-safe { border-color: rgba(16, 185, 129, 0.55); color: #6ee7b7; }
.kids-tag.tag-age  { border-color: rgba(245, 158, 11, 0.55); color: #fde047; }
.kids-tag.tag-strong { border-color: rgba(59, 130, 246, 0.55); color: #93c5fd; }
.kids-tag.tag-eco  { border-color: rgba(236, 72, 153, 0.55); color: #f472b6; }

/* Acentos visuais quando o tema kids está ativo */
body[data-store-theme="kids"] .cat-chip.active {
  background: linear-gradient(135deg, #f59e0b, #ec4899) !important;
  border-color: #f59e0b !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4) !important;
}
body[data-store-theme="kids"] .prod-card:hover {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 16px 36px -12px rgba(245, 158, 11, 0.22);
}


/* Ícone ao lado do título de página (institucionais: termos, privacidade, acompanhar) */
.h1-ic{vertical-align:-3px;margin-right:10px;color:var(--cy-2);opacity:.85}
@media (max-width:560px){.h1-ic{width:20px;height:20px;margin-right:7px}}