/* =========================================================================
   JP DROP — sistema visual
   Minimalista. Fundo: gradiente entre #080776 e #000000.
   Azul #1A2EB4: só detalhes de apoio (bordas, divisórias, barrinhas dos títulos).
   Branco #FFFFFF: o que precisa de destaque (títulos, preços, botões).
   Tipografia: Gontserrat Black nos títulos, Futura no texto (Jost onde a Futura não está
   instalada) e Chalk nas notinhas "de giz".
   ========================================================================= */

/* Fonte Chalk (os detalhes "de giz"), a mesma do portfólio.
   Ela não tem acento, então o unicode-range faz as letras acentuadas
   usarem a fonte normal. Por isso só uso ela em textos sem acento. */
/* Gontserrat Black (títulos) — derivada da Montserrat, licença SIL OFL 1.1
   (fontes/Gontserrat - OFL.txt): uso comercial liberado e com todos os acentos.
   Geométrica e bem pesada, a mais próxima do "JP" da logo entre as opções livres. */
@font-face {
  font-family: "Gontserrat";
  src: url("/fontes/Gontserrat-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Chalk";
  src: url("/fontes/chalk.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0020-007E, U+2018-201D;
}

/* ---------- Tokens ---------- */
:root {
  /* Cor — marca */
  --navy: #080776;
  --black: #000000;
  --blue: #1a2eb4;
  --white: #ffffff;

  /* Cor — papéis */
  --text: var(--white);
  --text-2: rgba(255, 255, 255, .74);   /* texto corrido */
  --text-3: rgba(255, 255, 255, .58);   /* metadados */
  --line: rgba(26, 46, 180, .55);       /* divisórias discretas */
  --line-strong: var(--blue);           /* bordas de controles */
  --surface: rgba(26, 46, 180, .14);    /* poços de imagem, campos */
  --surface-2: rgba(26, 46, 180, .28);  /* hover */
  --disabled-bg: rgba(255, 255, 255, .07);
  --disabled-text: rgba(255, 255, 255, .38);
  --danger: #ff7d88;
  --grad-hero: linear-gradient(118deg, var(--navy) 0%, #04034a 28%, var(--black) 64%);
  --grad-down: linear-gradient(180deg, var(--black) 0%, var(--navy) 100%);
  --grad-up: linear-gradient(180deg, var(--navy) 0%, var(--black) 72%);
  --grad-panel: linear-gradient(180deg, var(--navy) 0%, var(--black) 46%);

  /* Superfícies planas (sem vidro): fundo escuro translúcido + borda azul discreta */
  --plano-bg: rgba(0, 0, 12, .6);
  --plano-borda: rgba(26, 46, 180, .7);

  /* Tipo */
  /* Futura vem no Mac e no iPhone; Jost (Google Fonts) é a versão livre inspirada nela */
  --font: 'Futura', 'Futura PT', 'Jost', 'Century Gothic', system-ui, sans-serif;
  /* geométrica e pesada, em caixa alta, como o "JP" da logo */
  --font-titulo: 'Gontserrat', 'Futura', 'Jost', system-ui, sans-serif;
  --font-giz: 'Chalk', 'Comic Sans MS', cursive;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-display: clamp(2.75rem, 6.4vw, 5.75rem);

  /* Espaço */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: clamp(16px, 4.4vw, 56px);
  --max: 1360px;
  --header-h: 72px;

  /* Forma */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;

  /* Sombra */
  --shadow-pop: 0 18px 50px -18px rgba(0, 0, 0, .8);
  --shadow-drawer: -30px 0 80px -30px rgba(0, 0, 0, .9);
  --glow: 0 0 0 4px rgba(26, 46, 180, .55);

  /* Movimento */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .16s;
  --t-med: .32s;
  --t-slow: .7s;

  color-scheme: dark;
  font-family: var(--font);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--black); }
body { margin: 0; min-width: 320px; background: var(--black); color: var(--text); font-size: var(--fs-md); line-height: 1.55; overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }
body.drawer-open, body.menu-open { overflow: hidden; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-family: var(--font); font-weight: 700; letter-spacing: -.005em; }
ul, ol { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
button, a, select, label { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
::selection { color: var(--white); background: var(--blue); }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link:focus { width: auto; height: auto; clip: auto; z-index: 200; left: 16px; top: 12px; padding: 12px 16px; background: var(--white); color: var(--black); border-radius: var(--r-sm); }
.icone { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.display-title { font-family: var(--font-titulo); font-size: clamp(1.8rem, 4vw, 3.4rem); font-weight: 900; line-height: 1.1; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }

/* ---------- Botões ---------- */
.button { position: relative; min-height: 48px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), filter var(--t-fast), transform var(--t-fast) var(--ease-out); }
.button .icone { transition: transform var(--t-med) var(--ease-out); }
.button:active:not(:disabled) { transform: scale(.98); }
.button-lg { min-height: 56px; padding: 0 28px; font-size: var(--fs-md); }
/* Ação principal: branco (destaque máximo) */
.button-primary { background: var(--white); color: var(--black); }
.button-primary:hover:not(:disabled) { filter: brightness(.92); }
.button-primary:hover:not(:disabled) .icone { transform: translateX(3px); }
/* Ação de apoio: azul */
.button-ghost, .button-outline { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .55); }
.button-ghost:hover, .button-outline:hover { border-color: var(--white); background: rgba(255, 255, 255, .06); }
.button:disabled { background: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed; border-color: transparent; box-shadow: none; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-weight: 700; font-size: var(--fs-sm); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--blue); transition: text-decoration-color var(--t-fast); }
.text-link:hover { text-decoration-color: var(--white); }
.icon-button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: transparent; font-size: 20px; transition: background-color var(--t-fast); }
.icon-button:hover { background: var(--blue); }

/* ---------- Botão com seta (button-02, o mesmo dos botões do portfólio) ----------
   No hover o .inner diminui e o .circle com a seta aparece na direita.
   Aqui os dois são brancos: o botão é o destaque da seção. */
.botao-seta { position: relative; display: inline-flex; align-items: center; min-width: 300px; height: 56px; color: var(--black); font-weight: 700; font-size: var(--fs-md); text-decoration: none; border-radius: var(--r-pill); }
.botao-seta .inner, .botao-seta .circle { display: flex; align-items: center; justify-content: center; height: 56px; border-radius: var(--r-pill); background-color: var(--white); text-wrap: nowrap; transition: all .5s cubic-bezier(.165, .84, .44, 1); }
.botao-seta .inner { position: relative; z-index: 1; /* fica por cima do círculo */ width: 100%; gap: 10px; padding-inline: 24px; }
.botao-seta .circle { position: absolute; right: 0; width: 56px; scale: 0; transform-origin: left center; color: var(--blue); }
.botao-seta .circle span { display: grid; place-items: center; width: 100%; height: 100%; transform: translateX(-100%); /* a seta entra um pouquinho depois do círculo */ transition: all .3s cubic-bezier(.165, .84, .44, 1) .1s; }
.botao-seta .circle .icone { width: 22px; height: 22px; stroke-width: 2.2; }
/* versão de contorno: o texto fica branco sobre o fundo, o círculo continua branco */
.botao-seta-contorno { color: var(--white); }
.botao-seta-contorno .inner { background-color: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
/* só em telas com mouse */
@media (hover: hover) {
  .botao-seta:hover .inner { width: calc(100% - 60px); }
  .botao-seta:hover .circle { scale: 1; }
  .botao-seta:hover .circle span { transform: translateX(0); }
  .botao-seta-contorno:hover .inner { box-shadow: inset 0 0 0 1px var(--white); }
}
.botao-seta:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

/* ---------- Link animado (Skiper 40, link 5 — o mesmo do portfólio) ----------
   O fundo azul entra da esquerda e a setinha aparece. */
.link-animado { position: relative; display: inline-flex; align-items: center; justify-self: start; padding: 2px 8px; margin-left: -8px; color: var(--white); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; isolation: isolate; /* deixa o fundo animado atrás do texto */ transition: color .3s cubic-bezier(.4, 0, .2, 1); }
.link-animado::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.4, 0, .2, 1); pointer-events: none; }
.link-seta { width: .55em; height: .55em; margin-left: .6em; opacity: 0; transform: translateX(-4px) rotate(45deg); transition: all .3s cubic-bezier(.4, 0, .2, 1); }
.link-animado:hover::before, .link-animado:focus-visible::before { transform: scaleX(1); }
.link-animado:hover .link-seta, .link-animado:focus-visible .link-seta { opacity: 1; transform: translateX(0) rotate(45deg); }

/* ---------- Título de seção (como no portfólio: barrinha embaixo) ---------- */
.titulo-secao { font-family: var(--font-titulo); font-size: clamp(1.7rem, 3.6vw, 3rem); font-weight: 900; line-height: 1.15; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.titulo-secao::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 16px; border-radius: var(--r-pill); background: var(--blue); }

/* ---------- Notas "de giz" (fonte Chalk) ---------- */
.giz { font-family: var(--font-giz); font-weight: 400; letter-spacing: .02em; }
.giz-nota { display: inline-block; margin-left: 12px; color: rgba(255, 255, 255, .85); font-size: .62em; text-transform: none; letter-spacing: .01em; transform: rotate(-3deg) translateY(-.2em); white-space: nowrap; }

/* ---------- Cabeçalho ---------- */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); color: var(--white); border-bottom: 1px solid var(--line); }
/* O desfoque fica num pseudo-elemento: backdrop-filter no próprio header prenderia o menu mobile (position: fixed) dentro dele. */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.header-inner { height: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: flex-start; gap: var(--s-5); }
.brand { display: flex; align-items: center; height: 100%; flex: 0 0 auto; margin-right: auto; transition: opacity var(--t-med) var(--ease-out); }
.brand img { width: auto; height: 42px; object-fit: contain; transition: opacity var(--t-fast); }
.brand:hover img { opacity: .82; }
.main-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.main-nav > a { position: relative; padding: 8px 0; color: var(--text-2); font-size: var(--fs-sm); font-weight: 550; text-decoration: none; transition: color var(--t-fast); }
.main-nav > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--white); transform: scaleX(0); transform-origin: right; transition: transform var(--t-med) var(--ease-out); }
.main-nav > a:hover { color: var(--white); }
.main-nav > a:hover::after { transform: scaleX(1); transform-origin: left; }
.cart-trigger { height: 44px; padding: 0 6px 0 14px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--plano-borda); border-radius: var(--r-pill); background: var(--plano-bg); color: var(--white); font-size: var(--fs-sm); font-weight: 600; transition: background-color var(--t-fast), border-color var(--t-fast); }
.cart-trigger:hover { background-color: rgba(26, 46, 180, .55); border-color: rgba(255, 255, 255, .35); }
.cart-trigger .cart-count { border-radius: var(--r-pill); }
.cart-count { min-width: 28px; height: 28px; padding: 0 6px; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--white); color: var(--black); font-size: var(--fs-xs); font-weight: 750; font-variant-numeric: tabular-nums; }
.cart-count.bump { animation: bump .5s var(--ease-out); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 100% { transform: scale(1); } }
.header-mobile-actions { display: none; align-items: center; gap: var(--s-2); }
.menu-toggle { width: 44px; height: 44px; position: relative; border: 1px solid var(--plano-borda); border-radius: var(--r-pill); background: var(--plano-bg); }
.menu-toggle span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--white); transition: transform var(--t-med) var(--ease-out); }
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 25px; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--grad-hero); color: var(--white); isolation: isolate; }
.hero::before { /* luz de estúdio atrás do tênis */ content: ""; position: absolute; z-index: -1; width: min(1000px, 120vw); aspect-ratio: 1; right: -20%; top: 50%; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(26, 46, 180, .5), rgba(26, 46, 180, .1) 55%, transparent 100%); pointer-events: none; }
.hero-grid { max-width: calc(var(--max) + var(--gutter) * 2); min-height: min(calc(100svh - var(--header-h)), 860px); margin-inline: auto; padding: clamp(40px, 7vh, 88px) var(--gutter) clamp(48px, 8vh, 96px); display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--s-6); }
.hero-copy { position: relative; z-index: 2; max-width: 680px; }
.hero-giz { margin-bottom: var(--s-4); color: rgba(255, 255, 255, .85); font-size: clamp(1.25rem, 1.8vw, 1.7rem); transform: rotate(-2deg); transform-origin: left; }
.hero-title { font-family: var(--font-titulo); font-size: clamp(2.6rem, 6.3vw, 6.3rem); font-weight: 900; line-height: 1.04; letter-spacing: .01em; text-transform: uppercase; }
.hero-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-line:nth-child(2) { color: transparent; -webkit-text-stroke: 1.5px var(--white); }
@supports not (-webkit-text-stroke: 1px white) { .hero-line:nth-child(2) { color: var(--white); } }
.hero-description { max-width: 34ch; margin-top: var(--s-6); color: var(--text-2); font-size: clamp(1rem, 1.25vw, 1.1875rem); line-height: 1.6; }
.hero-actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero-oferta { margin-top: var(--s-4); display: flex; align-items: center; gap: 10px; color: var(--white); font-size: var(--fs-md); font-weight: 600; }
.hero-oferta:empty { display: none; }
.hero-oferta::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px rgba(26, 46, 180, .7); }

/* Fundo do topo (como na referência): o tênis em tons de azul, grande e cortado pela
   borda, parado; manchas de meio-tom (pontos que mudam de tamanho) em azul.
   Tudo é decoração atrás do texto, por isso fica num bloco só, com pointer-events: none. */
.hero-fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-fundo img { position: absolute; display: block; max-width: none; height: auto; user-select: none; }
.fundo-canto { right: -4%; top: -10%; width: min(40vw, 580px); opacity: .6; }
.fundo-mancha { left: 30%; bottom: -22%; width: min(72vw, 1100px); opacity: .75; }
.fundo-tenis { right: -7%; bottom: -20%; width: min(56vw, 880px); transform: rotate(-12deg); opacity: .9; /* mais escuro e menos contraste: fica atrás, como parte do fundo */ filter: brightness(.72) contrast(.92) drop-shadow(0 40px 60px rgba(0, 0, 0, .6)); }
.motion-ok .fundo-tenis { animation: fundo-entra 1.4s var(--ease-out) .1s both; }
.motion-ok .fundo-mancha, .motion-ok .fundo-canto { animation: fundo-aparece 1.6s var(--ease-out) .3s both; }
@keyframes fundo-entra { from { opacity: 0; transform: translate(40px, 30px) rotate(-12deg); } }
@keyframes fundo-aparece { from { opacity: 0; } }

/* Entrada orquestrada: título sobe, tênis desce e flutua */
.motion-ok .hero-line { animation: line-in .9s var(--ease-out) both; }
.motion-ok .hero-line:nth-child(2) { animation-delay: .08s; }
.motion-ok .hero-line:nth-child(3) { animation-delay: .16s; }
.motion-ok .hero-giz, .motion-ok .hero-description, .motion-ok .hero-oferta, .motion-ok .hero-actions { animation: fade-up .8s var(--ease-out) .35s both; }
@keyframes line-in { from { clip-path: inset(0 0 100% 0); transform: translateY(40%); } to { clip-path: inset(0 0 -10% 0); transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Faixa de princípios ---------- */
.principles { background: var(--black); color: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.principles-inner { max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); }
.principles li { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-5) 0; }
.principles li + li { padding-left: var(--s-5); border-left: 1px solid var(--line); }
.principles li > .icone { width: 22px; height: 22px; margin-top: 2px; color: var(--white); }
.principles h2 { font-size: var(--fs-md); font-weight: 700; letter-spacing: 0; }
.principles p { margin-top: 2px; color: var(--text-2); font-size: var(--fs-sm); }

/* ---------- Seções ---------- */
.catalog { position: relative; isolation: isolate; background: var(--grad-down); padding-block: clamp(64px, 9vw, 128px); }
.how { position: relative; isolation: isolate; background: var(--black); padding-block: clamp(64px, 9vw, 128px); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-6); margin-bottom: clamp(32px, 4vw, 56px); }
.section-aside { max-width: 34ch; color: var(--text-2); font-size: var(--fs-md); }
.reveal { opacity: 1; }
.motion-ok .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.motion-ok .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Catálogo: ferramentas ---------- */
.catalog-toolbar { display: grid; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid transparent; transition: border-color var(--t-fast), background-color var(--t-fast); }
@media (min-width: 900px) {
  .catalog-toolbar { position: sticky; top: var(--header-h); z-index: 20; }
  .catalog-toolbar.is-stuck { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01)), rgba(0, 0, 10, .55); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border-bottom-color: var(--line); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
}
.catalog-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); }
.search-box { position: relative; display: flex; align-items: center; }
.search-box .icone { position: absolute; left: 16px; color: var(--text-3); pointer-events: none; }
.search-box input { width: 100%; height: 52px; padding: 0 16px 0 48px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: rgba(0, 0, 0, .45); color: var(--white); font-size: var(--fs-md); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.search-box input::placeholder { color: var(--text-3); }
.search-box input:focus { outline: none; border-color: var(--white); box-shadow: var(--glow); }
.select-wrap { position: relative; display: flex; align-items: center; }
.select-wrap select { -webkit-appearance: none; appearance: none; height: 52px; padding: 0 44px 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: rgba(0, 0, 0, .45); color: var(--white); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.select-wrap select option { background: #05043a; color: var(--white); }
.select-wrap select:focus { outline: none; border-color: var(--white); box-shadow: var(--glow); }
.select-wrap .icone { position: absolute; right: 14px; pointer-events: none; color: var(--text-2); }
.catalog-filter-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.filters { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.filters::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; min-height: 40px; padding: 0 16px; border: 1px solid var(--plano-borda); border-radius: var(--r-pill); background: var(--plano-bg); color: var(--white); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; scroll-snap-align: start; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.filter-chip:hover { background-color: rgba(26, 46, 180, .5); }
.filter-chip.active { background: var(--white); border-color: var(--white); color: var(--black); }
.filter-chip .chip-count { margin-left: 6px; color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.filter-chip.active .chip-count { color: rgba(0, 0, 0, .55); }
.switch { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 40px; height: 24px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--blue); transition: background-color var(--t-med) var(--ease-out); }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .7); transition: transform var(--t-med) var(--ease-out), background-color var(--t-med); }
.switch input:checked + .switch-track { background: var(--blue); }
.switch input:checked + .switch-track::after { transform: translateX(16px); background: var(--white); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--white); outline-offset: 3px; }
.catalog-meta { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin: var(--s-4) 0 var(--s-5); color: var(--text-3); font-size: var(--fs-sm); }
.clear-filters { min-height: 44px; padding: 0; border: 0; background: none; color: var(--white); font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 4px; }
.clear-filters:hover { text-decoration-color: var(--white); }
.demo-notice { margin-top: var(--s-4); padding: 12px 16px; border-left: 3px solid var(--white); background: var(--surface); font-size: var(--fs-sm); }

/* ---------- Cards de produto ---------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.product-card { position: relative; display: flex; flex-direction: column; height: 100%; min-width: 0; cursor: pointer; }
.product-media { position: relative; aspect-ratio: 1; isolation: isolate; }
/* tilt card (Bencho, o mesmo do portfólio): a rotação, a sombra e o brilho são feitos no componentes/tilt.js */
.tlt-card { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-md); background: var(--surface); }
.tlt-sheen { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; }
.product-image-link { position: absolute; inset: 0; display: block; }
.product-media img.media-primary, .product-media img.media-secondary { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--t-slow) var(--ease-out), transform 1.2s var(--ease-out); }
.product-media img.media-secondary { opacity: 0; }
.img-loading { background: linear-gradient(100deg, rgba(26, 46, 180, .14) 30%, rgba(26, 46, 180, .32) 50%, rgba(26, 46, 180, .14) 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (hover: hover) and (pointer: fine) {
  .product-card.has-secondary:hover .product-media img.media-secondary { opacity: 1; }
  .product-card:hover .product-name-link { text-decoration-color: var(--white); }
}
.badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: 650; line-height: 1; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-ready { background: var(--white); color: var(--black); }
.badge-order { background: rgba(26, 46, 180, .55); color: var(--white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%); }
.badge-order::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.product-media .badge { position: absolute; z-index: 2; left: 10px; top: 10px; pointer-events: none; border-radius: var(--r-pill); }
.demo-tag { position: absolute; z-index: 2; right: 10px; top: 10px; padding: 5px 8px; background: #fff3c4; color: #5c4600; font-size: 11px; font-weight: 700; border-radius: var(--r-xs); }
.product-info { flex: 1; display: flex; flex-direction: column; gap: 4px; padding-top: 14px; }
.product-kicker { color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; }
.product-card h3 { font-family: var(--font); font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.product-name-link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color var(--t-fast); }
.product-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 2px; color: var(--text-3); font-size: var(--fs-sm); }
.swatches { display: inline-flex; align-items: center; gap: 4px; }
.swatches .swatch { width: 12px; height: 12px; }
.swatch-more { margin-left: 2px; font-size: var(--fs-xs); font-weight: 600; }
.swatch { display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.product-card-condition { font-size: var(--fs-sm); color: var(--text-3); }
.product-stock { font-size: var(--fs-sm); color: var(--white); font-weight: 600; }
.product-bottom { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); /* margin-top: auto empurra preço e botão para a base do card */ }
.product-price { font-size: var(--fs-lg); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--white); }
.quick-button { min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border: 1px solid var(--white); border-radius: var(--r-pill); background: var(--white); color: var(--black); font-size: var(--fs-sm); font-weight: 700; transition: filter var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
.quick-button .icone { transition: transform var(--t-med) var(--ease-out); }
.quick-button:hover:not(:disabled) { filter: brightness(.9); }
.quick-button:disabled { color: var(--disabled-text); background: var(--disabled-bg); border-color: transparent; cursor: not-allowed; }
.product-card-demo .product-media { outline: 1px dashed #c9a700; outline-offset: -1px; }

/* Estado vazio */
.empty-catalog { grid-column: 1 / -1; padding: clamp(40px, 7vw, 88px) var(--s-5); display: grid; justify-items: center; gap: var(--s-3); text-align: center; border: 1px dashed var(--blue); border-radius: var(--r-md); background: rgba(0, 0, 0, .35); }
.empty-catalog h3 { font-size: var(--fs-lg); font-weight: 600; }
.empty-catalog p { max-width: 44ch; color: var(--text-2); }
.empty-actions { margin-top: var(--s-3); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.empty-state-logo { width: 120px; }

/* Callout de ajuda */
.help-callout { margin-top: clamp(48px, 6vw, 80px); padding: clamp(24px, 3vw, 40px); display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); background: var(--plano-bg); border: 1px solid var(--plano-borda); color: var(--white); border-radius: 20px; }
.help-callout h3 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.015em; }
.help-callout p { margin-top: 4px; color: var(--text-2); }

/* ---------- História ---------- */
.story { position: relative; isolation: isolate; background: var(--grad-up); color: var(--white); padding-block: clamp(72px, 10vw, 144px); overflow: hidden; }
.story-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.story-mark { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: radial-gradient(circle at 50% 45%, rgba(26, 46, 180, .45), transparent 62%); }
.story-logo { position: relative; z-index: 1; width: 64%; height: auto; filter: drop-shadow(0 24px 40px rgba(26, 46, 180, .7)); }
.story-content { display: grid; gap: var(--s-5); max-width: 60ch; }
.story-content h2 { font-size: clamp(1.45rem, 2.8vw, 2.3rem); }
.story-content p { color: var(--text-2); font-size: var(--fs-lg); line-height: 1.65; }
.story-content .text-link { justify-self: start; }

/* ---------- Como pedir ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--white); }
.steps li { position: relative; padding: var(--s-6) var(--s-6) var(--s-6) 0; display: grid; align-content: start; gap: var(--s-3); }
.steps li + li { padding-left: var(--s-6); border-left: 1px solid var(--line); }
.step-no { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: var(--white); font-weight: 750; font-size: var(--fs-md); }
.steps h3 { margin-top: var(--s-3); font-family: var(--font-titulo); font-size: var(--fs-lg); font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
.steps p { color: var(--text-2); max-width: 32ch; }
.delivery-note { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); display: flex; align-items: center; gap: var(--s-3); border: 1px solid var(--plano-borda); background: var(--plano-bg); border-radius: 16px; font-size: var(--fs-sm); color: var(--text-2); }
.delivery-note .icone { width: 22px; height: 22px; color: var(--white); }

/* ---------- Rodapé ---------- */
.site-footer { position: relative; isolation: isolate; background: linear-gradient(0deg, var(--navy) 0%, var(--black) 100%); color: var(--white); padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-6); padding-bottom: var(--s-8); }
.footer-brand img { width: 140px; height: auto; }
.footer-brand-col p { margin-top: var(--s-4); color: var(--text-2); font-size: var(--fs-sm); }
.footer-nav { display: grid; align-content: start; gap: 4px; }
.footer-nav h2 { margin-bottom: 8px; color: var(--text-3); font-size: var(--fs-sm); font-weight: 500; }
.footer-nav a { position: relative; justify-self: start; padding: 4px 8px; margin-left: -8px; font-weight: 600; text-decoration: none; isolation: isolate; }
.footer-nav a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.footer-nav a:hover::before, .footer-nav a:focus-visible::before { transform: scaleX(1); }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); padding-block: var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--text-3); }
.footer-base small { font-size: var(--fs-xs); }
.footer-base a { color: var(--text-2); }

/* ---------- WhatsApp flutuante ---------- */
.whatsapp-float { position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); min-height: 52px; padding: 0 18px 0 16px; display: inline-flex; align-items: center; gap: 10px; border-radius: var(--r-pill); background: var(--plano-bg), rgba(0, 0, 20, .35); color: var(--white); border: 1px solid var(--plano-borda); font-size: var(--fs-sm); font-weight: 650; text-decoration: none; transition: transform var(--t-med) var(--ease-out), background-color var(--t-fast), bottom var(--t-med) var(--ease-out); }
.whatsapp-float .icone { width: 22px; height: 22px; color: #3ddc84; }
.whatsapp-float:hover { transform: translateY(-2px); background: var(--plano-bg), rgba(26, 46, 180, .6); }
body.drawer-open .whatsapp-float { opacity: 0; pointer-events: none; }

/* ---------- Carrinho ---------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity var(--t-med) var(--ease-out), visibility 0s; }
.drawer-backdrop.hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-med) var(--ease-out), visibility 0s var(--t-med); }
.cart-drawer { position: fixed; z-index: 90; top: 0; right: 0; bottom: 0; width: min(460px, 100%); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(8, 7, 118, .72) 0%, rgba(0, 0, 0, .82) 46%); border-left: 1px solid var(--plano-borda); box-shadow: var(--shadow-drawer); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); transition: transform .45s var(--ease-out), visibility 0s; }
.cart-drawer.hidden { transform: translateX(100%); visibility: hidden; transition: transform .45s var(--ease-out), visibility 0s .45s; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.02em; }
.drawer-head h2 span { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.cart-items { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s-5); }
.cart-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-5); border-bottom: 1px solid var(--line); animation: fade-up .4s var(--ease-out) both; }
.cart-item > img, .cart-item > .image-placeholder { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface); }
.cart-item-info { display: grid; gap: 4px; min-width: 0; }
.cart-item-top { display: flex; justify-content: space-between; gap: var(--s-3); align-items: start; }
.cart-item h3 { font-size: var(--fs-md); font-weight: 700; line-height: 1.25; }
.cart-item-category, .cart-unit { color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.cart-variant { color: var(--text-2); font-size: var(--fs-sm); }
.quantity-row { margin-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.line-total { font-weight: 750; font-variant-numeric: tabular-nums; color: var(--white); }
.quantity-control { display: inline-flex; align-items: center; height: 40px; border: 1px solid var(--blue); border-radius: var(--r-sm); }
.quantity-control button { width: 40px; height: 100%; border: 0; background: none; font-size: 18px; transition: background-color var(--t-fast); }
.quantity-control button:hover:not(:disabled) { background: var(--surface-2); }
.quantity-control button:disabled { color: var(--disabled-text); cursor: not-allowed; }
.quantity-control span { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.remove-item { min-height: 32px; padding: 0; border: 0; background: none; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.remove-item:hover { color: var(--danger); }
.stock-limit-note { color: var(--text-3); font-size: var(--fs-xs); }
.cart-empty { padding: var(--s-8) 0; display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.cart-empty h3 { font-size: var(--fs-lg); font-weight: 600; }
.cart-empty p { color: var(--text-2); max-width: 30ch; margin-bottom: var(--s-3); }
.empty-bag { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--blue); background: var(--surface); color: var(--white); }
.empty-bag .icone { width: 28px; height: 28px; }
.cart-footer { display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(0, 0, 0, .35); }
.cart-promo { margin: 0; padding: 8px 12px; border: 1px dashed rgba(255, 255, 255, .28); border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-xs); line-height: 1.4; }
.cart-desconto { display: flex; justify-content: space-between; gap: var(--s-3); color: #7ee2a8; font-size: var(--fs-sm); font-weight: 600; }
.cart-desconto[hidden], .cart-promo[hidden] { display: none; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; }
.cart-total span { color: var(--text-2); font-size: var(--fs-sm); }
.cart-total strong { font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.checkout-button { width: 100%; }
.checkout-button .icone { width: 20px; height: 20px; }
.continue-shopping { min-height: 44px; border: 0; background: none; font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 4px; }
.continue-shopping:hover { text-decoration-color: var(--white); }
.cart-contact-note { color: var(--danger); font-size: var(--fs-sm); }
.cart-disclaimer { color: var(--text-3); font-size: var(--fs-xs); line-height: 1.5; text-align: center; }

/* Voo até o carrinho */
.fly-thumb { position: fixed; z-index: 120; width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); pointer-events: none; box-shadow: 0 0 0 2px var(--white), var(--shadow-pop); }

/* ---------- Toast ---------- */
.toast { position: fixed; z-index: 130; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); width: max-content; max-width: min(560px, calc(100vw - 32px)); padding: 12px 12px 12px 18px; display: flex; align-items: center; gap: var(--s-4); background: #05043a; border: 1px solid var(--plano-borda); color: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-pop); font-size: var(--fs-sm); font-weight: 550; opacity: 0; visibility: hidden; transform: translate(-50%, 16px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility var(--t-med); }
.toast.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--white); }
.toast.toast-error::before { background: var(--danger); }
.toast.toast-success::before { background: #3ddc84; }
.toast-action { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--white); color: var(--black); font-size: var(--fs-sm); font-weight: 650; }

/* ---------- Imagens: fallback ---------- */
.image-placeholder { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 8px; background: var(--surface); color: var(--text-3); font-size: 11px; font-weight: 650; }
.placeholder-logo { width: 46%; max-width: 140px; opacity: .6; }
.product-media .image-placeholder { position: absolute; inset: 0; }

/* =========================================================================
   Meio-tom pelo site (identidade dos posts da JP DROP)
   Pontinhos azuis que mudam de tamanho, em SVG (fotos/fundo/). Cada seção recebe
   um formato diferente, sempre atrás do conteúdo (z-index -1 dentro de uma seção
   com isolation) e com pouca intensidade, para marcar sem poluir.
   ========================================================================= */
.catalog::before, .story::before, .story::after, .how::before, .site-footer::before,
.product-page-root::before, .cart-drawer::before, .help-callout::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background-repeat: no-repeat; background-size: contain;
}
/* catálogo: canto no alto à direita */
.catalog::before { top: 0; right: 0; width: min(46vw, 620px); aspect-ratio: 1; background-image: url("/fotos/fundo/meio-tom-canto.svg"); background-position: top right; opacity: .7; }
/* história: mancha redonda atrás da logo e canto espelhado embaixo à direita */
.story::before { left: -6%; top: 50%; width: min(56vw, 760px); aspect-ratio: 1; transform: translateY(-50%); background-image: url("/fotos/fundo/meio-tom-circulo.svg"); opacity: .65; }
.story::after { right: 0; bottom: 0; width: min(36vw, 480px); aspect-ratio: 1; background-image: url("/fotos/fundo/meio-tom-canto.svg"); background-position: bottom right; transform: scaleY(-1); opacity: .5; }
/* como comprar: faixa diagonal à direita */
.how::before { right: -12%; top: 4%; width: min(70vw, 980px); aspect-ratio: 3 / 2; background-image: url("/fotos/fundo/meio-tom-mancha.svg"); opacity: .55; }
/* rodapé: faixa que cresce para baixo */
.site-footer::before { left: 0; right: 0; bottom: 0; height: min(18vw, 240px); background-image: url("/fotos/fundo/meio-tom-faixa.svg"); background-size: 100% 100%; opacity: .65; }
/* página do produto: canto no alto à direita */
.product-page-root::before { top: 0; right: 0; width: min(46vw, 600px); aspect-ratio: 1; background-image: url("/fotos/fundo/meio-tom-canto.svg"); background-position: top right; opacity: .6; }
/* carrinho e o aviso "Não encontrou?": um toque discreto */
.cart-drawer::before { top: 0; right: 0; width: 260px; aspect-ratio: 1; background-image: url("/fotos/fundo/meio-tom-canto.svg"); background-position: top right; opacity: .5; }
.help-callout { position: relative; isolation: isolate; overflow: hidden; }
/* os pontinhos podem passar da borda da seção: cortamos só na horizontal.
   overflow: clip (e não hidden) não cria área de rolagem, então a barra de
   filtros "sticky" do catálogo continua funcionando. */
.catalog, .how, .site-footer, .product-page-root { overflow-x: clip; }
.help-callout::before { right: -60px; top: 50%; width: 360px; aspect-ratio: 1; transform: translateY(-50%); background-image: url("/fotos/fundo/meio-tom-circulo.svg"); opacity: .6; }
@media (max-width: 900px) {
  .catalog::before, .product-page-root::before { width: 78vw; }
  .story::before { width: 120vw; left: -30%; top: 22%; }
  .how::before { width: 140vw; right: -50%; }
  .help-callout::before { width: 260px; right: -90px; }
}

/* =========================================================================
   Janela de escolha (cor e tamanho a partir do card)
   Computador: janela no centro. Celular: folha que sobe de baixo, com o botão
   de adicionar sempre visível no rodapé dela.
   ========================================================================= */
body.escolhendo { overflow: hidden; }
.escolha { width: min(520px, calc(100vw - 32px)); max-height: min(88dvh, 780px); padding: 0; border: 1px solid var(--plano-borda); border-radius: 20px; background: linear-gradient(180deg, #0a0980 0%, #03022e 38%, #000 100%); color: var(--white); overflow: hidden; }
.escolha[open] { display: flex; flex-direction: column; animation: escolha-abre .35s var(--ease-out); }
.escolha::backdrop { background: rgba(0, 0, 10, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes escolha-abre { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.escolha-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4) var(--s-5) var(--s-3); display: grid; gap: var(--s-5); }
.escolha-topo { display: flex; justify-content: flex-end; align-items: center; margin-bottom: calc(var(--s-3) * -1); }
.escolha-alca { display: none; }
.escolha-fechar { width: 40px; height: 40px; border-radius: 50%; border-color: var(--plano-borda); }
.escolha-produto { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.escolha-foto { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-md); background: var(--surface); }
.escolha-foto img { width: 100%; height: 100%; object-fit: cover; }
.escolha-info { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.escolha-info h2 { font-size: var(--fs-lg); line-height: 1.2; }
.escolha-preco { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.escolha .choice-group legend { margin-bottom: var(--s-2); }
.escolha-acoes { flex-shrink: 0; display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(0, 0, 0, .55); }
.escolha-acoes .button { width: 100%; }
.escolha-detalhes { justify-self: center; padding: 6px; color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 4px; }
.escolha-detalhes:hover { color: var(--white); }
@media (max-width: 600px) {
  .escolha { width: 100%; max-width: 100%; max-height: 90dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; border-bottom: 0; }
  .escolha[open] { animation: escolha-sobe .38s var(--ease-out); }
  @keyframes escolha-sobe { from { transform: translateY(100%); } }
  .escolha-corpo { padding: var(--s-2) var(--s-4) var(--s-3); gap: var(--s-4); }
  .escolha-topo { justify-content: space-between; }
  .escolha-alca { display: block; width: 44px; height: 4px; margin-left: calc(50% - 22px); border-radius: var(--r-pill); background: rgba(255, 255, 255, .3); }
  .escolha-produto { grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-3); }
  .escolha-acoes { padding-inline: var(--s-4); }
}

/* =========================================================================
   Pagamento (mesma janela da escolha de opções: folha no celular)
   ========================================================================= */
.checkout { width: min(560px, calc(100vw - 32px)); }
.checkout-form { display: contents; }
.checkout-titulo { margin-top: calc(var(--s-3) * -1); font-family: var(--font-titulo); font-size: var(--fs-xl); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
.checkout-status { display: flex; align-items: center; gap: var(--s-3); color: var(--text-2); padding-block: var(--s-5); }
.checkout-giro { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--blue); border-top-color: var(--white); animation: giro 0.8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.checkout-itens { display: grid; gap: 8px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(0, 0, 0, .35); font-size: var(--fs-sm); }
.checkout-itens li { display: flex; justify-content: space-between; gap: var(--s-3); }
.checkout-itens .checkout-desconto { color: #7ee2a8; font-weight: 600; }
.checkout-desconto small { color: var(--text-3); font-weight: 400; }
.checkout-itens strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.checkout-tag { margin-left: 4px; color: var(--text-3); font-style: normal; font-size: var(--fs-xs); }
.checkout-grupo { margin: 0; padding: 0; border: 0; display: grid; gap: var(--s-2); min-width: 0; }
.checkout-grupo legend { padding: 0; margin-bottom: var(--s-2); font-weight: 700; font-size: var(--fs-sm); }
.campo { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--text-2); min-width: 0; }
.campo small { color: var(--text-3); }
.campo input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: rgba(0, 0, 0, .45); color: var(--white); font-size: 16px; /* 16px evita o zoom do iPhone ao focar */ transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.campo input:focus { outline: none; border-color: var(--white); box-shadow: var(--glow); }
.campo input::placeholder { color: var(--text-3); }
.checkout-teste { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border: 1px dashed #ffd166; border-radius: var(--r-md); color: #ffe7a3; font-size: var(--fs-sm); line-height: 1.45; }
.checkout-teste strong { color: #ffd166; }
.campo .campo-erro { color: #ff8a8a; font-size: var(--fs-xs); line-height: 1.4; }
.campo .campo-erro:empty { display: none; }
.campo.invalido input { border-color: #ff6b6b; }
.campo.invalido input:focus { box-shadow: 0 0 0 3px rgba(255, 107, 107, .25); }
.campo.buscando input { background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); background-size: 200% 100%; animation: campo-busca 1s linear infinite; }
@keyframes campo-busca { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.campos-endereco { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-2); }
.campos-endereco .campo-largo { grid-column: 1 / -1; }
.campo-cidade { margin: 0; align-content: start; }
.campo-cidade strong { display: flex; align-items: center; height: 48px; color: var(--white); font-weight: 600; }
.opcao { position: relative; display: flex; align-items: flex-start; gap: var(--s-3); padding: 14px var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(0, 0, 0, .3); cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.opcao:hover { border-color: var(--blue); }
.opcao.marcada { border-color: var(--white); background: rgba(26, 46, 180, .28); }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao:has(input:focus-visible) { outline: 2px solid var(--white); outline-offset: 2px; }
.opcao-marca { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--text-2); display: grid; place-items: center; }
.opcao.marcada .opcao-marca { border-color: var(--white); }
.opcao.marcada .opcao-marca::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--white); }
.opcao-texto { display: grid; gap: 2px; }
.opcao-texto strong { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.opcao-texto small { color: var(--text-3); font-size: var(--fs-xs); line-height: 1.4; }
.checkout-nota { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.checkout-seguro { color: var(--text-3); font-size: var(--fs-xs); line-height: 1.45; text-align: center; }
.checkout-ok { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-md); }
.checkout-ok-icone { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #3ddc84; color: var(--black); }
.checkout-ok-icone .icone { width: 24px; height: 24px; stroke-width: 2.4; }
.escolha-acoes .button[href] { text-decoration: none; }
@media (max-width: 600px) {
  .checkout { width: 100%; }
  .campos-endereco { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   Página do produto
   ========================================================================= */
.product-page-root { position: relative; isolation: isolate; background: linear-gradient(180deg, var(--navy) 0, var(--black) 560px); min-height: 70vh; }
.product-detail-wrap { max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding: var(--s-5) var(--gutter) clamp(64px, 8vw, 120px); }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-5); color: var(--text-3); font-size: var(--fs-sm); }
.breadcrumbs a { color: var(--white); font-weight: 600; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 4px; }
.product-detail-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; }
.product-gallery-column { position: sticky; top: calc(var(--header-h) + 20px); min-width: 0; }
.product-gallery { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s-3); }

/* Carrossel arrastável (dedo ou mouse), com encaixe por foto */
.gallery-viewport { position: relative; grid-column: 2; grid-row: 1; min-width: 0; }
.gallery-track { display: flex; aspect-ratio: 1; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px rgba(26, 46, 180, .35); cursor: grab; -webkit-overflow-scrolling: touch; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track.dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.gallery-track.dragging img { pointer-events: none; }
.gallery-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.gallery-slide > button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery-track.dragging .gallery-slide > button { cursor: grabbing; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.gallery-slide-video { background: var(--black); }
.gallery-slide-video video { width: 100%; height: 100%; object-fit: contain; }
.video-erro-msg { display: none; position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px; background: var(--black); border: 1px solid var(--blue); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.video-erro .video-erro-msg { display: block; }
.gallery-arrow { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; border: 1px solid var(--plano-borda); border-radius: 50%; background: var(--plano-bg); color: var(--white); opacity: 0; transition: opacity var(--t-med), background-color var(--t-fast); }
.gallery-arrow:hover:not(:disabled) { background-color: rgba(26, 46, 180, .55); }
.gallery-arrow:disabled { opacity: 0 !important; pointer-events: none; }
.gallery-arrow.prev { left: 12px; }
.gallery-arrow.next { right: 12px; }
.gallery-viewport:hover .gallery-arrow, .gallery-arrow:focus-visible { opacity: 1; }
.gallery-counter { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 11px; border-radius: var(--r-pill); background: var(--plano-bg); border: 1px solid var(--plano-borda); color: var(--white); font-size: var(--fs-xs); font-weight: 650; font-variant-numeric: tabular-nums; pointer-events: none; }
.gallery-dots { position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translateX(-50%); display: flex; gap: 6px; padding: 7px 9px; border-radius: var(--r-pill); background: var(--plano-bg); border: 1px solid var(--plano-borda); pointer-events: none; }
.gallery-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: width var(--t-med) var(--ease-out), background-color var(--t-fast); }
.gallery-dots i.ativo { width: 18px; border-radius: 3px; background: var(--white); }
.gallery-zoom-hint { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--plano-bg); border: 1px solid var(--plano-borda); color: var(--white); pointer-events: none; }
.gallery-thumbnails { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--s-2); max-height: 100%; overflow-y: auto; scrollbar-width: none; }
.gallery-thumbnails::-webkit-scrollbar { display: none; }
.gallery-thumb { position: relative; flex: 0 0 auto; width: 76px; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); opacity: .55; transition: opacity var(--t-fast), border-color var(--t-fast); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.active { opacity: 1; border-color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }
.play-badge { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: var(--white); }

.product-buy-panel { display: grid; gap: var(--s-4); padding-top: var(--s-2); }
.product-overline { color: var(--text-3); font-size: var(--fs-sm); font-weight: 600; }
.product-buy-panel h1 { /* nome do produto: Futura, que tem acento e lê melhor que a fonte de bloco */ font-family: var(--font); font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.product-demo-notice { padding: 8px 12px; background: #fff3c4; color: #5c4600; font-size: var(--fs-sm); font-weight: 600; border-radius: var(--r-xs); }
.product-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
.product-buy-panel .product-price { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; }
.product-condition { color: var(--text-3); font-size: var(--fs-sm); }
.product-condition strong { color: var(--white); font-weight: 650; }
.product-short-description { color: var(--text-2); line-height: 1.65; max-width: 60ch; }
.product-variant-controls { display: grid; gap: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.choice-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice-group legend { padding: 0; margin-bottom: var(--s-3); font-size: var(--fs-sm); font-weight: 700; }
.choice-group legend span { margin-left: 6px; color: var(--text-3); font-weight: 500; }
.choice-options { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choice-button { position: relative; min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(0, 0, 0, .35); color: var(--white); font-size: var(--fs-sm); font-weight: 600; transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out); }
.choice-button:hover:not(:disabled) { border-color: var(--blue); background: var(--surface-2); }
.choice-button:active:not(:disabled) { transform: scale(.96); }
.choice-button.selected { border-color: var(--white); box-shadow: inset 0 0 0 1px var(--white); background: rgba(26, 46, 180, .35); }
.size-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
.size-options .choice-button { justify-content: center; padding: 0 8px; font-variant-numeric: tabular-nums; }
.size-options .choice-button.selected { background: var(--white); color: var(--black); }
.choice-button:disabled { color: var(--disabled-text); background: var(--disabled-bg); border-color: transparent; cursor: not-allowed; text-decoration: line-through; }
.choice-button.selected .swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 0 2px var(--black), 0 0 0 3px var(--white); }
.variant-message { color: var(--text-3); font-size: var(--fs-sm); }
.variant-message.error { color: var(--danger); font-weight: 600; }
.purchase-quantity { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); font-size: var(--fs-sm); font-weight: 700; }
.purchase-quantity .quantity-control { height: 48px; }
.purchase-quantity .quantity-control button { width: 48px; }
.buy-actions { display: grid; gap: var(--s-2); }
.product-add-button { width: 100%; }
.product-add-button.added { background: var(--blue); color: var(--white); }
.product-cart-link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--blue); border-radius: var(--r-sm); background: transparent; font-size: var(--fs-sm); font-weight: 650; transition: background-color var(--t-fast); }
.product-cart-link:hover { background: var(--blue); }
.product-cart-link span { min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--white); color: var(--black); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.product-buy-note { color: var(--text-3); font-size: var(--fs-xs); }
.product-promo { padding: 10px 14px; border: 1px solid var(--plano-borda, rgba(255, 255, 255, .18)); border-left: 3px solid var(--white); border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; }
.product-facts { display: grid; border-top: 1px solid var(--line); }
.product-facts details { border-bottom: 1px solid var(--line); }
.product-facts summary { min-height: 56px; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); font-weight: 700; list-style: none; cursor: pointer; }
.product-facts summary::-webkit-details-marker { display: none; }
.product-facts summary .icone { color: var(--white); transition: transform var(--t-med) var(--ease-out); }
.product-facts details[open] summary .icone { transform: rotate(45deg); }
.product-facts .fact-body { padding-bottom: var(--s-5); color: var(--text-2); line-height: 1.65; display: grid; gap: var(--s-3); }
.product-facts details[open] .fact-body { animation: fade-up .35s var(--ease-out); }
.product-facts ul { list-style: disc; padding-left: 1.2em; }
.product-facts .text-link { justify-self: start; }

.help-callout-product { margin-top: clamp(48px, 6vw, 88px); }
.related-products { margin-top: clamp(64px, 8vw, 112px); }
.related-products .section-heading { align-items: center; }
.related-products h2 { font-size: clamp(1.3rem, 2.4vw, 2rem); }

.product-zoom { width: min(1100px, 100vw); max-width: 100vw; max-height: 100dvh; padding: 0; border: 0; background: transparent; overflow: visible; }
.product-zoom::backdrop { background: rgba(0, 0, 10, .92); }
.product-zoom[open] { animation: fade-up .3s var(--ease-out); }
.zoom-image { width: 100%; max-height: 90dvh; object-fit: contain; border-radius: var(--r-sm); }
.zoom-close { position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--blue); border-radius: 50%; background: rgba(0, 0, 0, .7); color: var(--white); font-size: 24px; }

.product-not-found { max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding: clamp(80px, 12vw, 160px) var(--gutter); display: grid; gap: var(--s-5); justify-items: start; }
.product-not-found h1 { font-family: var(--font); font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 700; line-height: 1.08; }
.product-not-found p { color: var(--text-2); max-width: 44ch; }

/* =========================================================================
   Responsivo
   ========================================================================= */
@media (max-width: 1100px) {
  .product-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); }
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .brand img { height: 36px; }
  .header-mobile-actions { display: flex; }
  .main-nav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; padding: var(--s-6) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: stretch; gap: 0; background: linear-gradient(180deg, rgba(8, 7, 118, .7), rgba(0, 0, 0, .85) 60%); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility var(--t-med); overflow-y: auto; }
  .main-nav.nav-open { opacity: 1; visibility: visible; transform: none; }
  .main-nav > a { padding: 18px 0; color: var(--white); font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; border-bottom: 1px solid var(--line); }
  .main-nav > a::after { display: none; }
  .main-nav.nav-open > a { animation: fade-up .45s var(--ease-out) both; }
  .main-nav.nav-open > a:nth-child(2) { animation-delay: .05s; }
  .main-nav.nav-open > a:nth-child(3) { animation-delay: .1s; }
  .main-nav > .cart-trigger { display: none; }
  .cart-trigger-mobile { padding: 0 4px 0 10px; gap: 6px; }

  .hero-grid { grid-template-columns: 1fr; min-height: 0; align-items: start; gap: var(--s-4); padding-top: var(--s-5); padding-bottom: var(--s-6); }
  /* no celular o tênis fica atrás do texto, mais apagado: o topo não precisa de espaço só para ele */
  .fundo-tenis { width: 96vw; right: -40%; top: 6%; bottom: auto; opacity: .5; }
  .fundo-mancha { left: -20%; width: 150vw; bottom: -4%; }
  .fundo-canto { width: 70vw; opacity: .4; }
  .hero::before { right: -40%; top: 72%; }
  /* faixa de entregas compacta: três colunas, só ícone e título */
  .principles-inner { grid-template-columns: repeat(3, 1fr); }
  .principles li, .principles li + li { flex-direction: column; align-items: center; gap: 6px; padding: var(--s-3) 6px; text-align: center; border-left: 0; }
  .principles li + li { border-left: 1px solid var(--line); }
  .principles li > .icone { width: 20px; height: 20px; margin: 0; }
  .principles h2 { font-size: .78rem; line-height: 1.25; }
  .principles p { display: none; }

  .section-heading { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .catalog { padding-top: var(--s-6); }
  .catalog .section-heading { margin-bottom: var(--s-3); }
  .catalog .section-aside { display: none; }
  .story-grid { grid-template-columns: 1fr; }
  .story-mark { max-width: 360px; width: 100%; }
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: var(--s-5) 0; border-left: 0; }
  .steps li + li { border-top: 1px solid var(--line); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }

  .product-detail-grid { grid-template-columns: 1fr; }
  .product-gallery-column { position: static; margin-inline: calc(var(--gutter) * -1); }
  .product-gallery { grid-template-columns: 1fr; gap: var(--s-2); }
  .gallery-viewport { grid-column: 1; }
  .gallery-track { border-radius: 0; box-shadow: none; cursor: auto; }
  .gallery-arrow { display: none; }
  .gallery-thumbnails { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; padding-inline: var(--gutter); }
  .gallery-thumb { width: 64px; }
  .help-callout { flex-direction: column; align-items: flex-start; }
  .buy-actions { position: sticky; bottom: 0; z-index: 5; margin-inline: calc(var(--gutter) * -1); padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--plano-borda); background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), rgba(0, 0, 10, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
  body.on-product .whatsapp-float { bottom: calc(88px + env(safe-area-inset-bottom)); }
}

@media (max-width: 600px) {
  .hero-title { font-size: clamp(2.1rem, 12vw, 3.3rem); }
  .hero-line:nth-child(2) { -webkit-text-stroke-width: 1.2px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--s-5); }
  .hero-actions .botao-seta { min-width: 0; height: 50px; font-size: var(--fs-sm); }
  .hero-actions .botao-seta .inner, .hero-actions .botao-seta .circle { height: 50px; }
  .hero-actions .botao-seta .inner { padding-inline: 12px; }
  .hero-description { margin-top: var(--s-4); font-size: .95rem; }
  .hero-giz { margin-bottom: var(--s-2); font-size: 1.1rem; }
  .hero-oferta { font-size: var(--fs-sm); }
  .help-callout .botao-seta { width: 100%; min-width: 0; }
  .catalog-tools { grid-template-columns: minmax(0, 1fr) 128px; gap: 8px; }
  .search-box input, .select-wrap select { height: 46px; }
  .select-wrap select { width: 100%; padding-right: 34px; padding-left: 12px; }
  .catalog-toolbar { gap: var(--s-3); padding-block: var(--s-2); }
  .catalog-filter-row { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .catalog-meta { margin: var(--s-2) 0 var(--s-3); min-height: 36px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .product-card h3 { font-size: var(--fs-md); }
  .product-price { font-size: var(--fs-md); }
  .product-meta .meta-sizes { display: none; }
  .product-bottom { flex-direction: column; align-items: stretch; gap: 8px; }
  .quick-button { justify-content: center; }
  .product-media .badge { left: 6px; top: 6px; height: 22px; padding: 0 7px; font-size: 11px; }
  .whatsapp-float { width: 52px; padding: 0; justify-content: center; }
  .whatsapp-float span { display: none; }
  .toast { left: 16px; right: 16px; width: auto; max-width: none; transform: translateY(16px); bottom: calc(84px + env(safe-area-inset-bottom)); }
  .toast.visible { transform: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 80px minmax(0, 1fr); }
  .cart-item > img, .cart-item > .image-placeholder { width: 80px; height: 80px; }
  .drawer-head, .cart-items, .cart-footer { padding-inline: var(--s-4); }
}

@media (max-width: 360px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* Celular / toque: palco mais leve */
@media (hover: none), (max-width: 900px) {
}

/* Redução de movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  :root { scroll-behavior: auto; }
  .motion-ok .reveal { opacity: 1; transform: none; }
}

/* Evita que conteúdo largo (chips, selects) estique as grades no celular */
.catalog-toolbar > *, .catalog-filter-row, .filters, .product-info { min-width: 0; }

/* ==========================================================================
   Black November: faixa no topo, seção com contagem e vitrine, escolha do brinde
   ========================================================================== */
.bn-barra { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 38px; padding: 8px var(--gutter); background: #000; color: var(--white); border-bottom: 1px solid var(--line); font-size: var(--fs-xs, .78rem); letter-spacing: .02em; text-align: center; text-decoration: none; font-variant-numeric: tabular-nums; }
.bn-barra[hidden] { display: none; }
.bn-barra strong { font-family: var(--font-titulo); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.bn-barra b { font-weight: 700; color: var(--white); }
.bn-barra:hover { background: #05044a; }
.bn-ponto { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
.motion-ok .bn-ponto { animation: bn-pulso 1.6s ease-out infinite; }
@keyframes bn-pulso { 70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

.bn { position: relative; isolation: isolate; overflow-x: clip; background: radial-gradient(120% 90% at 85% 0%, #0b0a8f 0%, #03022e 45%, #000 100%); color: var(--white); padding-block: clamp(48px, 7vw, 96px); border-bottom: 1px solid var(--line); }
.bn[hidden], body.on-product .bn { display: none; }
.bn::before { content: ""; position: absolute; inset: auto -80px -120px auto; width: 420px; height: 420px; background: url("/fotos/fundo/meio-tom-circulo.svg") center / contain no-repeat; opacity: .35; z-index: -1; pointer-events: none; }
.bn-inner, .bn-vitrine { max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.bn-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.bn-topo { display: grid; gap: var(--s-3); justify-items: start; }
.bn-selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--plano-borda); border-radius: 999px; background: rgba(0, 0, 0, .4); font-size: var(--fs-xs, .78rem); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.bn-titulo { font-family: var(--font-titulo); font-weight: 900; font-size: clamp(2.6rem, 8vw, 6rem); line-height: .92; letter-spacing: -.01em; text-transform: uppercase; }
.bn-chamada { font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 600; color: var(--text-2); }
.bn-chamada strong { color: var(--white); }
.bn-texto { max-width: 52ch; color: var(--text-2); line-height: 1.55; }
.bn-timer { display: grid; gap: var(--s-3); padding: clamp(20px, 3vw, 32px); border: 1px solid var(--plano-borda); border-radius: 20px; background: rgba(0, 0, 0, .45); }
.bn-timer-rotulo { color: var(--text-3); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.bn-relogio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.bn-relogio span { display: grid; justify-items: center; gap: 4px; padding: 14px 4px; border-radius: 12px; background: rgba(26, 46, 180, .22); border: 1px solid rgba(26, 46, 180, .6); }
.bn-relogio b { font-family: var(--font-titulo); font-weight: 900; font-size: clamp(1.8rem, 4.4vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.bn-relogio small { color: var(--text-3); font-size: var(--fs-xs, .78rem); text-transform: uppercase; letter-spacing: .06em; }
.bn-timer-fim { color: var(--text-3); font-size: var(--fs-sm); }
.bn-vitrine { margin-top: clamp(32px, 5vw, 56px); }
.bn-vitrine-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.bn-vitrine-topo h3 { font-family: var(--font-titulo); font-weight: 900; font-size: clamp(1.2rem, 2.4vw, 1.6rem); text-transform: uppercase; }
.bn-vitrine-topo p { color: var(--text-3); font-size: var(--fs-sm); }
.bn-brindes { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(170px, 18vw, 210px); align-items: start; gap: var(--s-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--s-3); scrollbar-width: thin; }
.bn-card { scroll-snap-align: start; display: grid; gap: 6px; }
.bn-card-foto { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: #fff; }
.bn-card-foto img { width: 100%; height: 100%; object-fit: cover; }
.bn-card-nome { font-weight: 700; font-size: var(--fs-sm); }
.bn-card-op { color: var(--text-3); font-size: var(--fs-xs, .78rem); line-height: 1.4; }
.bn-card-op strong { color: var(--text-2); font-weight: 600; }
.bn-cores { display: flex; flex-wrap: wrap; gap: 4px; }
.bn-cor { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid transparent; background: transparent; cursor: pointer; }
.bn-cor i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.bn-cor[aria-pressed="true"] { border-color: var(--white); }
.bn-cor:focus-visible { outline: 2px solid var(--white); outline-offset: 1px; }
.bn-card-cor { color: var(--text-2); font-size: var(--fs-xs, .78rem); }
.bn-card-cor span { color: var(--white); font-weight: 600; }
.bn-card-cor small { color: var(--text-3); }

.cart-bn { margin: 0; padding: 8px 12px; border-radius: var(--r-sm); background: rgba(26, 46, 180, .25); border: 1px solid var(--plano-borda); color: var(--text-2); font-size: var(--fs-xs, .78rem); line-height: 1.4; }
.cart-bn[hidden] { display: none; }
.product-promo-bn { border-left-color: var(--blue); background: rgba(26, 46, 180, .18); }

.bn-escolha { display: grid; gap: var(--s-3); }
.bn-escolha legend small { color: var(--text-3); font-weight: 400; }
.bn-escolha.invalido .bn-lista, .bn-escolha.invalido .bn-ops { outline: 1px solid #ff6b6b; outline-offset: 4px; border-radius: 12px; }
.bn-escolha .campo-erro { color: #ff8a8a; font-size: var(--fs-xs, .78rem); }
.bn-escolha .campo-erro:empty { display: none; }
.bn-lista { display: flex; gap: var(--s-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 2px 6px; scrollbar-width: none; }
.bn-lista::-webkit-scrollbar { display: none; }
.bn-brinde { position: relative; flex: 0 0 84px; scroll-snap-align: start; display: grid; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, .3); cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.bn-brinde input, .bn-chip input { position: absolute; opacity: 0; pointer-events: none; }
.bn-brinde-foto { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #fff; }
.bn-brinde-foto img { width: 100%; height: 100%; object-fit: cover; }
.bn-brinde-nome { font-size: .7rem; font-weight: 600; line-height: 1.2; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bn-brinde.marcada { border-color: var(--white); background: rgba(26, 46, 180, .35); }
.bn-brinde:has(input:focus-visible), .bn-chip:has(input:focus-visible) { outline: 2px solid var(--white); outline-offset: 2px; }
.bn-dica { color: var(--text-3); font-size: var(--fs-xs); }
.bn-escolhido { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: 8px; border: 1px solid var(--white); border-radius: 12px; background: rgba(26, 46, 180, .3); }
.bn-escolhido-texto { display: grid; gap: 2px; min-width: 0; }
.bn-escolhido-texto strong { font-size: var(--fs-sm); }
.bn-escolhido-texto small { color: var(--text-2); font-size: var(--fs-xs); }
.bn-trocar { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); color: var(--white); font-size: var(--fs-xs); font-weight: 600; background: transparent; cursor: pointer; }
.bn-trocar:hover { background: rgba(255, 255, 255, .1); }
.bn-ops { display: grid; gap: var(--s-3); }
.bn-op-nome { font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.bn-op-nome strong { color: var(--white); }
.bn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bn-chip { position: relative; cursor: pointer; }
.bn-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong, rgba(255, 255, 255, .3)); border-radius: 999px; font-size: var(--fs-sm); color: var(--text-2); }
.bn-chip.marcada span { background: var(--white); border-color: var(--white); color: #000; font-weight: 600; }

@media (max-width: 760px) {
  .bn-inner { grid-template-columns: 1fr; }
  .bn-barra .bn-barra-extra { display: none; }
  .bn-relogio span { padding: 10px 2px; }
  .bn-brindes { grid-auto-columns: 46%; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}