/* =====================================================================
   Vitrine estilo loja premium + tema claro/escuro.
   Carregado por último. O tema escuro é o visual neon que já existia;
   o tema claro troca as variáveis e ajusta o que tinha cor fixa.
   ===================================================================== */

/* ---------------- Botão de tema ---------------- */
.theme-btn { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto;
  color: var(--text); background: transparent; border: 1px solid var(--line); transition: background .2s, border-color .2s; }
.theme-btn:hover { border-color: var(--neon); }
.theme-btn .i-sun { display: none; }
[data-theme="dark"] .theme-btn .i-sun { display: block; }
[data-theme="dark"] .theme-btn .i-moon { display: none; }
.header-inner { gap: 18px; }
.nav { margin-right: 6px; }
.header-inner > .theme-btn:last-child { margin-left: auto; } /* páginas sem menu */

/* ---------------- Ajustes gerais (os dois temas) ---------------- */
:root { --tile: radial-gradient(120% 90% at 50% 35%, #1b2850 0%, #111a35 55%, #0c132a 100%); }
.btn { border-radius: 999px; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); letter-spacing: -.035em; }
.section-title p { font-size: 1.08rem; max-width: 640px; margin-inline: auto; }
.shot figcaption, .setup-tile figcaption { color: #fff; }
.shot-story span { color: #ffc23d; }
.lightbox { color: #eef1f8; }
.lb-nav, .lb-close { color: #eef1f8; }

/* ---------------- Prateleira de produtos (carrossel) ---------------- */
.shelf-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.shelf-head h2 { margin: 0; }
.shelf-head h2 small { display: block; font-size: .5em; font-weight: 600; color: var(--muted); letter-spacing: -.01em; margin-top: 6px; }
.shelf .carousel-track { gap: 20px; padding: 18px 4px 30px; }
.pcard { flex: 0 0 clamp(268px, 27vw, 340px); scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 28px; overflow: hidden;
  cursor: pointer; outline: none; border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--neon-line) border-box; box-shadow: var(--neon-glow);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.pcard:hover, .pcard:focus-visible { transform: translateY(-6px); box-shadow: var(--neon-glow-hover); }
.pcard-media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--tile); }
.pcard-media img { position: absolute; inset: 30px; width: calc(100% - 60px); height: calc(100% - 60px); object-fit: contain; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .35));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1); user-select: none; -webkit-user-drag: none; }
.pcard:hover .pcard-media img { transform: scale(1.05); }
.pcard-media.is-photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.pcard-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.eyebrow { font-size: .76rem; font-weight: 700; letter-spacing: .02em; color: var(--neon); }
.pcard h3 { font-size: 1.22rem; margin: 0; letter-spacing: -.02em; }
.pcard .headline { margin: 0; color: var(--muted); font-size: .95rem; }
.dots { display: flex; gap: 7px; margin-top: 6px; }
.dot { width: 13px; height: 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .12); }
.pcard-foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pcard-foot .price strong { font-size: 1.12rem; }
.pcard-foot .btn { padding: 9px 18px; font-size: .88rem; white-space: nowrap; }

/* ---------------- Página do produto ---------------- */
.modal { width: min(1120px, 100% - 24px); border-radius: 28px; scrollbar-width: none; }
/* rola com o mouse ou o dedo, sem mostrar a barra */
.modal::-webkit-scrollbar, .drawer-content::-webkit-scrollbar { display: none; }
.drawer-content { scrollbar-width: none; }
.pd { grid-template-columns: 1.1fr .9fr; }
.pd-gallery { position: relative; background: var(--tile); display: flex; flex-direction: column; }
.pd-stage { position: relative; aspect-ratio: 1; overflow: hidden; }
.pd-stage img { position: absolute; inset: 48px; width: calc(100% - 96px); height: calc(100% - 96px); object-fit: contain; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .35)); animation: pdIn .45s ease; }
.pd-stage.is-photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
@keyframes pdIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.pd-tag { position: absolute; left: 16px; top: 16px; z-index: 1; font-size: .74rem; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  color: var(--text); background: color-mix(in srgb, var(--card) 82%, transparent); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.pd-tag.is-preview { border-color: rgba(168, 85, 247, .6); }
.pd-thumbs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 0 16px 20px; }
.pd-thumb { position: relative; width: 64px; height: 64px; border-radius: 16px; padding: 0; overflow: hidden; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.pd-thumb img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
.pd-thumb.is-photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-thumb:hover { transform: translateY(-2px); }
.pd-thumb.active { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon); }
.pd-info { padding: 40px 36px; gap: 16px; }
.pd-info h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.03em; }
.pd-headline { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.opt-values.round { gap: 12px; }
.sw { width: 34px; height: 34px; border-radius: 999px; padding: 0; cursor: pointer; border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .1); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .2s, transform .2s; }
.sw:hover { transform: scale(1.08); }
.sw.active { outline-color: var(--neon); }
.opt-btn { border-radius: 999px; padding: 9px 16px; }
.pd-info .price.big strong { font-size: 1.9rem; letter-spacing: -.02em; }
.pd-note { margin: 0; font-size: .82rem; color: var(--muted); }

/* ---------------- Portfólio com peças recortadas ---------------- */
.slide-media.is-cut { background: var(--tile) padding-box, var(--neon-line) border-box; }
.slide-media.is-cut img { object-fit: contain; padding: 26px; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .35)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.slide:hover .slide-media.is-cut img { transform: scale(1.05); }

@media (max-width: 900px) {
  .theme-btn { margin-left: auto; }
  .cart-btn { margin-left: 0; }
  .pcard { flex-basis: 78%; }
  .pd { grid-template-columns: 1fr; }
  .pd-stage { aspect-ratio: auto; height: 46vh; }
  .pd-stage img { inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); }
  .pd-info { padding: 22px 20px 26px; }
}

/* =====================================================================
   TEMA CLARO
   ===================================================================== */
:root[data-theme="light"] {
  --bg: #f5f5f7;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-2: #f5f5f7;
  --line: rgba(0, 0, 0, .1);
  --text: #1d1d1f;
  --muted: #6e6e73;
  --brand: #f26b00;
  --brand-2: #b45309;
  --blue: #0071e3;
  --ok: #15803d;
  --danger: #d70015;
  --shadow: 0 18px 40px rgba(0, 0, 0, .08);
  --glow: 0 0 0 1px rgba(242, 107, 0, .3), 0 10px 30px rgba(0, 0, 0, .08);
  --neon: #f26b00;
  --neon-line: linear-gradient(rgba(0, 0, 0, .06), rgba(0, 0, 0, .06));
  --neon-glow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
  --neon-glow-hover: 0 22px 44px rgba(0, 0, 0, .12);
  --tile: radial-gradient(120% 90% at 50% 30%, #ffffff 0%, #f6f6f8 60%, #ececf0 100%);
  color-scheme: light;
}
[data-theme="light"] body { background: var(--bg); }
[data-theme="light"] body::before { display: none; }
[data-theme="light"] .topbar { background: #fff; color: var(--text); font-weight: 600; border-bottom: 1px solid var(--line); }
[data-theme="light"] .header { background: rgba(251, 251, 253, .82); backdrop-filter: saturate(180%) blur(20px); }
[data-theme="light"] .header::after { background: var(--line); box-shadow: none; opacity: 1; }
[data-theme="light"] .hero { background: transparent; }
[data-theme="light"] .section-alt { background: #fff; border-block: 0; }
[data-theme="light"] .section-title h2::after { box-shadow: none; background: linear-gradient(90deg, #ff8a1f, #a855f7); }
[data-theme="light"] .kicker { text-shadow: none; }
[data-theme="light"] .hero h1 .grad { filter: none; }
[data-theme="light"] .grad { background: linear-gradient(90deg, #f26b00, #c2410c 60%, #9333ea); -webkit-background-clip: text; background-clip: text; }

/* botões */
[data-theme="light"] .btn-primary { background: linear-gradient(135deg, #ff8a1f, #ffb43d); color: #1a1205; box-shadow: 0 8px 22px rgba(255, 138, 31, .32); }
[data-theme="light"] .btn-primary:hover { box-shadow: 0 12px 28px rgba(255, 138, 31, .45); }
[data-theme="light"] .btn-ghost { color: var(--text); background: rgba(0, 0, 0, .03); border: 1px solid rgba(0, 0, 0, .14); }
[data-theme="light"] .btn-ghost:hover { border-color: var(--neon); box-shadow: none; background: rgba(242, 107, 0, .06); }
[data-theme="light"] .icon-btn:hover { background: rgba(0, 0, 0, .05); }
[data-theme="light"] .cart-btn { border-color: var(--line); }
[data-theme="light"] .pill { background: rgba(242, 107, 0, .08); border-color: rgba(242, 107, 0, .25); }
[data-theme="light"] .swatch { border-color: rgba(0, 0, 0, .15); }
[data-theme="light"] .finish-dots button.active { background: rgba(0, 0, 0, .05); }

/* cartões e contornos: sem neon, com sombra suave; o gradiente aparece só ao passar o mouse */
[data-theme="light"] .card:hover, [data-theme="light"] .pcard:hover, [data-theme="light"] .slide:hover .slide-media,
[data-theme="light"] .setup-tile:hover, [data-theme="light"] .shot:hover {
  background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, rgba(255, 138, 31, .75), rgba(168, 85, 247, .6)) border-box; }
[data-theme="light"] .slide:hover .slide-media.is-cut, [data-theme="light"] .pcard:hover .pcard-media {
  background: var(--tile) padding-box, linear-gradient(135deg, rgba(255, 138, 31, .75), rgba(168, 85, 247, .6)) border-box; }
[data-theme="light"] .pcard-media img, [data-theme="light"] .slide-media.is-cut img { filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .16)); }
[data-theme="light"] .pd-stage img { filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .16)); }
[data-theme="light"] .pd-stage.is-photo img, [data-theme="light"] .pcard-media.is-photo img { filter: none; }
[data-theme="light"] .band { background: linear-gradient(#fff, #fff) padding-box, var(--neon-line) border-box; }
[data-theme="light"] .printer-frame { background: var(--tile) padding-box, var(--neon-line) border-box; box-shadow: var(--neon-glow); }
[data-theme="light"] .printer-plate { background: linear-gradient(90deg, #c9ccd4, #e4e6eb, #c9ccd4); }
[data-theme="light"] .badge { background: rgba(255, 255, 255, .9); color: var(--brand-2); border-color: rgba(180, 83, 9, .3); }
[data-theme="light"] .slide-media img.fit, [data-theme="light"] .setup-tile img.fit { background: #fff; }
/* fotos inteiras na galeria (quadro, antes e depois): fundo do tema e legenda embaixo, sem cobrir a imagem */
.shot img.fit { background: transparent; padding: 14px 14px 58px; }
.shot:has(> img.fit) figcaption { background: none; color: var(--text); padding: 0 18px 16px; }
[data-theme="light"] .slide figcaption { color: var(--text); }
[data-theme="light"] .pd-tag { background: rgba(255, 255, 255, .85); }
[data-theme="light"] .dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
[data-theme="light"] .sw { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }

/* abas e filtros: pílula escura quando ativa */
[data-theme="light"] .tab { background: #fff; border-color: rgba(0, 0, 0, .1); }
[data-theme="light"] .tab small { background: rgba(0, 0, 0, .06); }
[data-theme="light"] .tab.active { background: #1d1d1f; color: #fff; border-color: #1d1d1f; box-shadow: none; }
[data-theme="light"] .tab.active small { background: linear-gradient(135deg, #ff8a1f, #a855f7); }
[data-theme="light"] .chip { background: #fff; border-color: rgba(0, 0, 0, .12); }
[data-theme="light"] .chip.active { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }
[data-theme="light"] .carousel-btn { color: var(--text); background: rgba(255, 255, 255, .94); border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
[data-theme="light"] .carousel-btn:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }
[data-theme="light"] .pf-note.is-warning { color: #6b21a8; background: rgba(168, 85, 247, .07); box-shadow: none; }
[data-theme="light"] .setup-list li { box-shadow: none; }

/* painéis */
[data-theme="light"] .modal::backdrop { background: rgba(0, 0, 0, .32); }
[data-theme="light"] .modal-close { background: rgba(255, 255, 255, .9); }
[data-theme="light"] .overlay { background: rgba(0, 0, 0, .28); }
[data-theme="light"] .drawer { border-left: 1px solid var(--line); box-shadow: -20px 0 50px rgba(0, 0, 0, .12); }
[data-theme="light"] .custom-note { color: #9a3412; background: rgba(242, 107, 0, .07); border-color: rgba(242, 107, 0, .25); }
[data-theme="light"] .hint { background: rgba(180, 83, 9, .08); }
[data-theme="light"] .pay:has(input:checked) { background: rgba(242, 107, 0, .06); box-shadow: none; }
[data-theme="light"] .toast { background: #1d1d1f; color: #fff; }
[data-theme="light"] .page p, [data-theme="light"] .page li, [data-theme="light"] .cookie-banner p { color: #424245; }
[data-theme="light"] .footer { background: #fff; }

/* Mark 85 no tema claro: só o vídeo do Jarvis continua escuro */
[data-theme="light"] .mark85 { background: radial-gradient(700px 500px at 18% 30%, rgba(56, 189, 248, .10), transparent 65%),
  radial-gradient(700px 500px at 90% 70%, rgba(220, 38, 38, .08), transparent 65%); }
[data-theme="light"] .mk-copy .kicker { color: #dc2626; text-shadow: none; }
[data-theme="light"] .mk-specs li { box-shadow: 0 6px 18px rgba(220, 38, 38, .08); }
[data-theme="light"] .mk-specs b { background: linear-gradient(90deg, #dc2626, #b45309); -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .mk-note { color: #991b1b; background: rgba(220, 38, 38, .06); }
[data-theme="light"] #mkTrack .slide-media { box-shadow: 0 8px 22px rgba(220, 38, 38, .1); }

/* carrinho: miniatura recortada */
.line img.is-cut { object-fit: contain; background: var(--tile); padding: 4px; }