/* ============================================================
   VARIÁVEIS — troque aqui as cores, fontes e tempos
   ============================================================ */
:root {
  /* --- Identidade original (Manual de Cores, seção 2): não alterar na logo --- */
  --brand-logo-light: #F9F9F9;
  --brand-logo-gold: #C2A158;
  --brand-logo-silver: #989A9C;

  /* --- Interface (Manual, seção 3 e tokens da seção 8) --- */
  --ui-canvas: #F7F6F2;          /* fundo do site */
  --ui-surface: #FFFFFF;         /* cards */
  --ui-surface-subtle: #F0EEE9;
  --ui-ink: #252A2D;             /* texto principal */
  --ui-ink-secondary: #53595B;   /* texto secundário */
  --ui-header: #292D30;          /* grafite: único fundo aprovado para a logo de 3 cores */
  --ui-ink-inverse: #F9F9F9;     /* texto sobre o grafite */
  --ui-divider: #CFCDC7;         /* linhas decorativas */
  --ui-control-border: #777B78;  /* bordas de botões e campos */
  --accent-brand: #C2A158;       /* dourado: só decoração ou sobre o grafite (5,64:1) */
  --accent-action: #86672D;      /* dourado funcional: texto de ação em fundo claro */
  --accent-action-hover: #705322;
  --focus-on-light: #1D5D8F;
  --focus-on-dark: #F9F9F9;

  /* --- Papéis usados pela animação (apontam para os tokens acima) --- */
  --accent: var(--ui-header);          /* fundo do loader e da barra do topo */
  --accent-text: var(--ui-ink-inverse);/* texto grande sobre o grafite (13,19:1) */
  --accent-soft: var(--accent-brand);  /* textos pequenos e linhas finas sobre o grafite */
  --bg: var(--ui-canvas);              /* fundo da página */
  --text: var(--ui-ink);               /* texto da página */
  --line: var(--ui-divider);
  color-scheme: light;

  /* Fontes */
  --font-display: "Inter Tight", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Curvas de animação (easing).
     expo   → começa muito rápido e freia devagar (bom para textos subindo)
     smooth → acelera e desacelera de forma marcada (bom para blocos grandes) */
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-smooth: cubic-bezier(0.5, 0, 0, 1);
  --ease-soft: cubic-bezier(0.215, 0.61, 0.355, 1);

  /* Atraso entre um item e o próximo (efeito cascata) */
  --stagger: 0.1s;

  /* Multiplicador de tempo. O botão "Câmera lenta" muda para 4. */
  --speed: 1;

  --gutter: clamp(12px, 1.6vw, 24px);

  /* NAVBAR E LOGO: tamanho pela LARGURA da tela (nunca pela altura, senão
     um tablet em pé ganhava a maior logo do site).
     --topbar-h = altura da barra · --logo-h = altura da logo
     Regra: a logo ocupa uns 2/3 da barra e sobra um respiro de pelo menos
     25% da altura dela em cima e embaixo, mais que a altura das minúsculas
     (o manual pede respiro "proporcional à altura da letra principal").
     A logo nunca fica menor que 44px de altura: abaixo disso o "Móveis"
     prateado começa a se perder. */
  --topbar-h: 84px;      /* notebook e computador */
  --logo-h: 56px;
  --logo-nudge: -3px;    /* alinhamento óptico: o "peso" da logo fica embaixo
                            (base da casa + palavras), então ela sobe um pouco */
}
/* monitor grande */
@media (min-width: 1600px) and (hover: hover) and (pointer: fine) {
  :root { --topbar-h: 92px; --logo-h: 62px; }
}
/* tablet (toque) e janelas estreitas */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) {
  :root { --topbar-h: 72px; --logo-h: 48px; --logo-nudge: -2px; }
}
/* celular: barra mais fina (sobra mais foto no feed), mesma logo de 48px */
@media (max-width: 767.98px) {
  :root { --topbar-h: 68px; }
}

/* Foco visível (Manual 6.5): azul no claro, off-white no grafite */
:where(a, button):focus-visible {
  outline: 3px solid var(--focus-on-light);
  outline-offset: 3px;
}
.topbar :where(a, button):focus-visible { outline-color: var(--focus-on-dark); }

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

/* Trava o scroll enquanto o loader está na tela */
body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }

.small {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.big {
  font-weight: 800;
  font-size: clamp(18px, 2.1vw, 30px);
  line-height: 0.95;
  text-transform: uppercase;
  text-align: center;
}
.big--narrow { max-width: 23ch; }

/* ============================================================
   LOADER
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  height: 100svh;
  display: flex;
  align-items: center;
  background: var(--accent);
  color: var(--accent-text);
  overflow: hidden;
  user-select: none;
}

/* Grid de 3 linhas. O GSAP anima grid-template-rows depois
   (as linhas de cima e de baixo encolhem, a do meio cresce). */
.loader__inner {
  width: 100%;
  display: grid;
  grid-template-rows: 22vh 22vh 22vh;
  opacity: 0;
  transition: opacity calc(0.5s * var(--speed)) var(--ease-smooth);
}
.loader.is-ready .loader__inner { opacity: 1; }

.loader__row {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  overflow: hidden;
}

.loader__row--top {
  grid-auto-flow: column;
  place-items: center;
  gap: var(--gutter);
  padding-inline: var(--gutter);
}
.loader__row--top > .small { white-space: nowrap; }
/* Fileira de ícones da entrada */
.loader__icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(14px, 3vw, 40px);
  padding-inline: var(--gutter);
}
.loader__icons img {
  display: block;
  height: clamp(36px, 6vh, 64px);
  width: auto;
}

.loader__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(50vw, 520px);
}

/* --- As linhas finas -------------------------------------------
   Cada row tem uma linha no topo (::before). A última também tem
   uma embaixo (::after). Começam com scaleX(0) — largura zero — e
   "desenham" até scaleX(1), uma depois da outra (--i × stagger). */
.loader__row::before,
.loader__row:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent-soft);
  transform: scaleX(0);
  transition: transform calc(0.75s * var(--speed)) var(--ease-smooth),
              opacity calc(1s * var(--speed)) var(--ease-smooth);
  transition-delay: calc((var(--stagger) * var(--i) + 0.1s) * var(--speed));
}
.loader__row::before { top: 0; }
.loader__row:last-child::after { bottom: 0; transition-delay: calc((var(--stagger) * 3 + 0.1s) * var(--speed)); }

.loader.is-ready .loader__row::before,
.loader.is-ready .loader__row:last-child::after { transform: scaleX(1); }

/* Quando o título começa a crescer, a linha de cima e a de baixo
   (as das bordas) somem. Ficam só as duas que contornam o título. */
.loader.hide-edges .loader__row:first-child::before,
.loader.hide-edges .loader__row:last-child::after { opacity: 0; }

/* --- Título / logo ---------------------------------------------- */
.loader__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(18px, 2.1vw, 30px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: font-size;
}
/* Logo em imagem: segue o tamanho da fonte (0.8em).
   Começa num tamanho legível e o GSAP aumenta o font-size depois. */
.loader__title:has(img) { font-size: clamp(56px, 7vw, 96px); }
.loader__title img { height: 0.8em; width: auto; display: block; }

/* Máscara manual para imagens (o SplitText faz a mesma coisa nos textos) */
.mask { display: block; overflow: hidden; }

/* --- Texto revelado por máscara ---------------------------------
   O SplitText transforma cada linha em:
     <div class="line-mask"> (overflow: hidden)
       <div class="line">texto</div>
     </div>
   A .line começa 110% para baixo, escondida pela máscara,
   e sobe para 0 quando o loader ganha a classe .is-animated. */
.loader .line {
  transform: translateY(110%);
}
.loader.is-animated .line {
  transform: translateY(0);
  transition: transform calc(1.15s * var(--speed)) var(--ease-expo);
  transition-delay: calc(var(--stagger) * var(--index) * var(--speed));
}

/* --- Textos pequenos: só fade ----------------------------------- */
[data-reveal] {
  opacity: 0;
  transition: opacity calc(0.75s * var(--speed)) var(--ease-soft);
}
.loader.is-animated [data-reveal] {
  opacity: 1;
  transition-delay: calc((var(--stagger) * var(--i) + 0.5s) * var(--speed));
}

/* ============================================================
   PÁGINA
   ============================================================ */
.page {
  position: relative;
  height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.topbar {
  flex: none;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: var(--accent);
  color: var(--accent-text);
}
.topbar__logo {
  display: block;
  /* o ajuste óptico vai no link inteiro: a .mask em volta da imagem corta
     o que passa dela, e subir só a imagem cortaria o telhado da casa */
  translate: 0 var(--logo-nudge);
}
.topbar__logo img {
  display: block;
  /* largura = altura × proporção da arte (1300 × 362 → 3,59). No celular
     com zoom ou numa tela muito estreita ela encolhe para caber na barra:
     100vw − margens da barra (16) − gutter (24) − padding do link (16) */
  width: min(calc(var(--logo-h) * 3.59), calc(100vw - 56px));
  height: auto;
}

.page__inner {
  flex: 1;
  min-height: 0;
}

/* Fileira horizontal de cards (rola para o lado) */
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 20vw, 340px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.cards::-webkit-scrollbar { display: none; }

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--gutter);
  padding: var(--gutter);
  background: var(--ui-surface);
  border-left: 1px solid var(--line);
}
.card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ui-ink-secondary);
}
.card__meta { display: grid; gap: 4px; }
.card__cat {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ui-ink-secondary);
}
.card__name {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ui-ink);
}
/* Ação em dourado funcional: #86672D sobre branco = 5,26:1 */
.card__cta {
  margin-top: 6px;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-action);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.card__cta:hover { color: var(--accent-action-hover); }

/* Wrapper da imagem: o GSAP anima o clip-path dele
   de inset(50%) (um ponto no centro) até inset(0%) (inteira). */
.card__media {
  align-self: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  max-width: 100%;
  background: var(--ui-surface-subtle);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 767px) {
  .loader__inner { grid-template-rows: 22svh 22svh 22svh; }
  .loader__center { width: auto; }
  .loader__icons { gap: 14px; }
  .loader__icons img { height: 36px; }
  .loader__row--top > .small { font-size: 10px; }
  .big { font-size: 18px; }
  .cards { grid-auto-columns: 50vw; }
}

/* Acessibilidade: quem pede menos movimento ("reduzir movimento" no sistema)
   não vê a animação ao abrir. Isso é tratado no main.js. */


/* ============================================================
   VERSÃO GLASS (glassmorphism)
   Tudo daqui para baixo sobrescreve a versão sólida.
   Receita do vidro: fundo semitransparente + backdrop-filter: blur()
   + borda clara bem fina + um brilho interno no topo.
   O vidro só aparece se houver algo atrás para desfocar:
   no loader é o .ambient; na navbar são os cards passando por baixo.
   ============================================================ */
:root {
  --glass-tint: rgba(41, 45, 48, 0.38);        /* painéis do loader (fundo escuro atrás) */
  --glass-tint-nav: rgba(41, 45, 48, 0.88);    /* navbar: fundo claro atrás, precisa ser mais opaca
                                                   (88% mantém branco 9:1, dourado 3,9:1 e prata 3,4:1
                                                   mesmo com um card branco passando por baixo) */
  --glass-border: rgba(249, 249, 249, 0.12);
  --glass-highlight: rgba(249, 249, 249, 0.10);
  --glass-blur: 22px;
  --glass-radius: 20px;
}

/* --- Fundo do loader: grafite com brilhos que se movem devagar --- */
.loader {
  background: linear-gradient(160deg, #292D30 0%, #1F2326 55%, #171B20 100%);
}
.ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ambient span {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  animation: glass-drift calc(22s * var(--speed)) ease-in-out infinite alternate;
  will-change: transform;
}
/* Gradientes radiais em vez de filter: blur() — mesmo efeito, bem mais leve */
.ambient span:nth-child(1) {
  left: -22vmax; top: -28vmax;
  background: radial-gradient(circle, rgba(194, 161, 88, 0.28), transparent 62%);
}
.ambient span:nth-child(2) {
  right: -26vmax; bottom: -32vmax;
  background: radial-gradient(circle, rgba(152, 154, 156, 0.20), transparent 62%);
  animation-duration: calc(28s * var(--speed));
  animation-delay: -6s;
}
.ambient span:nth-child(3) {
  left: 38%; top: 30%;
  width: 46vmax; height: 46vmax;
  background: radial-gradient(circle, rgba(194, 161, 88, 0.16), transparent 60%);
  animation-duration: calc(34s * var(--speed));
  animation-delay: -12s;
}
@keyframes glass-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(12vw, 8vh) scale(1.15); }
  100% { transform: translate(-8vw, 14vh) scale(0.95); }
}

/* --- As três faixas: sem caixas, só o conteúdo sobre o fundo animado --- */
.loader__inner {
  position: relative;            /* fica por cima do .ambient */
}
.loader__row {
  /* As faixas surgem subindo um pouco, uma depois da outra */
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity calc(0.8s * var(--speed)) var(--ease-smooth),
              transform calc(1.1s * var(--speed)) var(--ease-expo);
  transition-delay: calc(var(--stagger) * var(--i) * var(--speed));
}
.loader.is-ready .loader__row { opacity: 1; transform: none; }
.loader__row::before,
.loader__row:last-child::after { display: none; }

/* --- Navbar de vidro flutuante --- */
.topbar {
  position: absolute;
  z-index: 10;
  top: 12px;
  left: 12px;
  right: 12px;
  border-radius: 18px;
  background: var(--glass-tint-nav);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 12px 40px rgba(37, 42, 45, 0.18);
}
/* Os cards começam por baixo da navbar, para o vidro ter o que desfocar */
.card { padding-top: calc(var(--topbar-h) + 12px + var(--gutter)); }

@media (max-width: 767px) {
  .topbar { top: 8px; left: 8px; right: 8px; border-radius: 14px; }
  /* os painéis têm margem, então sobra menos largura para os 7 ícones */
  .loader__icons { gap: 10px; }
  .loader__icons img { height: 30px; }
  .card { padding-top: calc(var(--topbar-h) + 8px + var(--gutter)); }
}

/* Navegador sem backdrop-filter: usa o grafite sólido (fica igual à versão sólida) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--ui-header); }
}


/* ============================================================
   VERSÃO FOTO: imagem da loja por baixo, overlay de vidro por cima
   ============================================================ */
.loader__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;     /* mantém o letreiro da fachada no quadro */
  /* zoom lento enquanto a entrada roda: dá vida à foto */
  animation: photo-zoom calc(14s * var(--speed)) var(--ease-soft) both;
}
@keyframes photo-zoom {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

/* Overlay de vidro.
   - backdrop-filter desfoca LEVEMENTE a foto (3px): a fachada continua
     reconhecível, mas perde detalhe suficiente para não brigar com a logo;
   - o grafite fica concentrado numa elipse atrás do conteúdo (logo, ícones,
     slogan) e bem mais leve no resto da tela, onde a fachada aparece.
   Ajuste a força nas duas variáveis abaixo. */
:root {
  --scrim-center: 0.80;   /* atrás do conteúdo */
  --scrim-edge: 0.22;     /* resto da tela */
  --scrim-rx: 38%;        /* largura da elipse escura (metade) */
  --scrim-ry: 70%;        /* altura da elipse: cobre dos ícones até o slogan */
}
@media (max-width: 767px) {
  :root { --scrim-rx: 80%; --scrim-ry: 60%; }   /* no celular o conteúdo ocupa quase toda a largura */
}
.loader__glass {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  backdrop-filter: blur(3px) saturate(115%);
  background:
    radial-gradient(ellipse var(--scrim-rx) var(--scrim-ry) at 50% 50%,
      rgba(31, 35, 38, var(--scrim-center)) 0%,
      rgba(31, 35, 38, var(--scrim-center)) 55%,
      rgba(31, 35, 38, var(--scrim-edge)) 100%),
    linear-gradient(rgba(23, 27, 32, 0.18), rgba(23, 27, 32, 0.18));
}

/* Reforço de leitura: sombra suave atrás de logo, ícones e slogan */
.loader__title img,
.loader__icons img {
  filter: drop-shadow(0 2px 14px rgba(15, 17, 19, 0.65));
}
.loader .big { text-shadow: 0 2px 16px rgba(15, 17, 19, 0.7); }

/* Brilhos mais suaves aqui, para não clarear demais o centro */
.ambient span { opacity: 0.6; }

/* Sem backdrop-filter: escurece mais para compensar a falta do desfoque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .loader__glass { background: rgba(31, 35, 38, 0.92); }
}


/* ============================================================
   VERSÃO TRANSIÇÃO: a foto vira o fundo sólido antes do zoom
   O .loader__solid é o mesmo degradê grafite da versão glass.
   Começa com opacity 0; o GSAP leva até 1 (veja playExit no main.js).
   ============================================================ */
.loader__solid {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(160deg, #292D30 0%, #1F2326 55%, #171B20 100%);
}

/* ============================================================
   VITRINE (galeria do estudo study-one) no lugar dos cards
   A galeria precisa de rolagem vertical (o ScrollTrigger "pina" a
   galeria e converte a rolagem em movimento horizontal), então a
   página deixa de ter altura fixa.
   ============================================================ */
body { background: var(--color-bg); }
.page {
  height: auto;
  display: block;
  background: var(--color-bg);
}
.page__inner { flex: none; min-height: 0; }

/* A navbar de vidro fica presa no topo enquanto a galeria anda.
   (Durante a entrada a .page está deslocada pelo GSAP e o "fixed" se
   comporta como "absolute" dentro dela; no fim o transform é removido.) */
.topbar { position: fixed; z-index: 30; }

/* Abertura da vitrine: espaço em cima para a navbar de vidro (fixa) não cobrir o texto */
.demoIntro {
  padding-top: calc(var(--topbar-h) + 12px + 32px + env(safe-area-inset-top, 0px));
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
}

/* Respiro entre a navbar (fixa, de vidro) e a galeria:
   as fotos começam ABAIXO da navbar, então a etiqueta com nome e preço
   (que fica no alto de cada foto) nunca fica escondida atrás dela.
   --nav-space = topo da navbar + altura dela + um respiro. */
:root { --nav-space: calc(12px + var(--topbar-h) + 12px + env(safe-area-inset-top, 0px)); }
@media (max-width: 767px) {
  :root { --nav-space: calc(8px + var(--topbar-h) + 10px + env(safe-area-inset-top, 0px)); }
}
.hScroll { padding-top: var(--nav-space); }
.hScroll__slide {
  height: calc(100vh - var(--nav-space));
  height: calc(100svh - var(--nav-space));
}

/* ============================================================
   FUNDO "VITRINE DA LOJA": foto de vitrine + overlay da entrada
   Uma camada FIXA atrás da página inteira:
   - por baixo, a foto de uma vitrine de loja (img/vitrine.webp);
   - por cima, o mesmo degradê grafite do fim da entrada (.loader__solid),
     só que semitransparente, para a vitrine aparecer;
   - e os brilhos dourado/prata suaves da versão glass.
   Ela aparece na abertura e no espaço sob a navbar, e a navbar de vidro
   desfoca essa foto. Por ser fixa, a foto fica parada enquanto a
   página rola, como uma vitrine.
   Contraste medido sobre os pixels reais atrás do texto (desktop e celular):
   título branco >= 6,7:1; textos menores >= 5,6:1 (opacidade .85).
   ============================================================ */
.page {
  isolation: isolate;          /* o ::before com z-index -1 fica dentro da página */
  background: transparent;
}
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(194, 161, 88, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 45% at 85% 90%, rgba(152, 154, 156, 0.14), transparent 70%),
    /* mais escuro atrás do título (no alto), mais leve nas bordas (moldura) */
    radial-gradient(ellipse 44% 30% at 50% 30%, rgba(31, 35, 38, 0.74) 0%, rgba(31, 35, 38, 0.60) 55%, rgba(23, 27, 32, 0.40) 100%);
}
/* A foto da vitrine fica numa camada própria, inteira (com a moldura).
   No celular entra a versão vertical da mesma vitrine. */
.page::after {
  /* Enquadramento da foto:
     --vitrine-zoom: largura da foto em relação à tela (115% corta parte
                     da parede das laterais);
     --vitrine-top:  onde fica o topo da foto. Calculado para que o trilho
                     superior da moldura apareça inteiro logo abaixo da
                     navbar, com um pedaço da parede acima dele. */
  --vitrine-zoom: 115%;
  --vitrine-top: calc(var(--nav-space) - 12px - 1.5vw);
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url("img/vitrine.webp");
  background-repeat: no-repeat;
  background-size: var(--vitrine-zoom) auto;
  background-position: 50% var(--vitrine-top);
  background-color: #2B2E31;   /* pedra, caso a tela seja mais alta que a foto */
}
@media (max-width: 767px) {
  .page::after {
    background-image: url("img/vitrine-mobile.webp");
    --vitrine-top: calc(var(--nav-space) - 10px - 8vw);
  }
}

/* A abertura ocupa a METADE de cima da tela: aparecem a parede, o trilho
   superior e as laterais da moldura, e a galeria começa perto do meio da
   vitrine, como se as fotos estivessem dentro dela.
   Ajuste o 52svh para a galeria começar mais acima ou mais abaixo. */
.demoIntro {
  min-height: 52vh;
  min-height: 52svh;
  place-content: center;
}
.demoIntro,
.hScroll { background: transparent; }
.demoIntro p { opacity: 0.85; }

/* ============================================================
   NAVBAR DE VIDRO SOFISTICADA
   Como as fotos da galeria começam ABAIXO da navbar, por baixo dela só
   passa o fundo "vitrine" (foto + grafite). Então ela pode ser bem
   mais transparente e mostrar a vitrine refratada.

   Camadas, de baixo para cima:
   1. backdrop-filter: desfoca, satura e clareia um pouco o que está atrás;
   2. background: grafite semitransparente + reflexo branco vertical
      + granulado (ruído SVG) que imita vidro fosco;
   3. ::before: borda em degradê (luz no alto à esquerda, dourado embaixo);
   4. ::after: reflexo de luz que segue o mouse (variáveis --mx / --my,
      atualizadas no main.js);
   5. box-shadow: brilho interno no topo, sombra interna na base e
      sombra externa em duas camadas (perto + longe).
   ============================================================ */
.topbar {
  --nav-tint: rgba(41, 45, 48, 0.50);
  --nav-radius: 20px;
  isolation: isolate;
  border: 0;
  border-radius: var(--nav-radius);
  background:
    /* sombra suave só atrás da logo: mantém a prata de "Móveis" legível */
    /* (--logo-scrim-x acompanha a logo: 0% = esquerda; no celular, 50% = centro) */
    radial-gradient(ellipse 340px 150% at var(--logo-scrim-x, 0%) 50%, rgba(17, 20, 23, 0.84), rgba(17, 20, 23, 0.42) 60%, transparent 88%),
    linear-gradient(180deg, rgba(249, 249, 249, 0.10) 0%, rgba(249, 249, 249, 0.02) 45%, rgba(0, 0, 0, 0.06) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    var(--nav-tint);
  /* vidro levemente fumê: escurece um pouco o que está atrás */
  -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(0.9);
  backdrop-filter: blur(26px) saturate(170%) brightness(0.9);
  box-shadow:
    inset 0 1px 0 rgba(249, 249, 249, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 2px 6px rgba(0, 0, 0, 0.18),
    0 18px 50px rgba(0, 0, 0, 0.30);
}
.topbar > * { position: relative; z-index: 1; }   /* conteúdo acima dos reflexos */

/* Borda em degradê: um "anel" de 1px feito com máscara */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(249, 249, 249, 0.45) 0%,
    rgba(249, 249, 249, 0.10) 35%,
    rgba(249, 249, 249, 0.06) 65%,
    rgba(194, 161, 88, 0.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Reflexo que segue o mouse (no celular fica parado no canto esquerdo) */
.topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* parado: do lado direito, longe da logo; no desktop segue o mouse */
  background: radial-gradient(320px circle at var(--mx, 78%) var(--my, -40%),
    rgba(249, 249, 249, 0.09), rgba(249, 249, 249, 0.03) 40%, transparent 70%);
  opacity: 0.7;
  transition: opacity 0.4s var(--ease-soft);
  pointer-events: none;
}
.topbar.is-lit::after { opacity: 1; }

/* Links: pílula de vidro no hover + traço dourado */
/* --- Logo no centro + atalhos da loja ---------------------------------
   Grade de 5 colunas:  atalho | atalho | LOGO | atalho | atalho
   As 4 colunas dos atalhos têm SEMPRE a mesma largura (minmax(0, 280px):
   o conteúdo não consegue alargar a coluna) e cada atalho fica no meio
   da sua coluna: os dois lados ficam espelhados e a logo, no centro.
   O limite de 280px só aparece em monitor grande: lá os ícones não
   fogem para as pontas da barra (a grade fica centralizada). */
.topbar {
  --logo-scrim-x: 50%; /* a sombra que protege a logo fica no centro */
  display: grid;
  /* max-content: a logo recebe primeiro a largura inteira; os atalhos dividem o resto */
  grid-template-columns: repeat(2, minmax(0, 280px)) max-content repeat(2, minmax(0, 280px));
  justify-content: center;
  align-items: center;
  justify-items: center;
  column-gap: 4px;
}
/* coluna do meio fixa: no celular os atalhos somem e a logo continua no centro */
.topbar__logo { grid-column: 3; padding: 0 clamp(8px, 1.4vw, 24px); }

/* Atalho = só o ícone (a frase fica na dica do mouse e no aria-label).
   --ico = tamanho dos ícones; --stars = largura das estrelas em "ícones". */
.topbar__item {
  --ico: 32px;
  --stars: 3.4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px;            /* com um ícone só, o hover vira um círculo */
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ui-ink-inverse);
  transition: background-color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.topbar__item a { color: inherit; }

/* Ícones em linha (Tabler Icons), na cor do texto */
.topbar__ico {
  flex: none;
  width: var(--ico);
  height: var(--ico);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 0.3s var(--ease-soft);
}

/* Maps e Waze: dois ícones lado a lado, cada um é um link */
.topbar__item--visit { gap: 10px; }
.topbar__icoLink { display: grid; place-items: center; }

/* Estrelas do Google: base apagada + camada dourada cortada na nota
   (o desenho é 5 × 1: largura = --stars × o ícone, altura = 1/5 disso) */
.topbar__stars { flex: none; width: calc(var(--ico) * var(--stars)); height: calc(var(--ico) * var(--stars) / 5); }
.topbar__starsBase { fill: rgba(249, 249, 249, 0.26); }
.topbar__starsFill { fill: var(--accent-brand); }

/* Hover: pílula de vidro com traço dourado embaixo; o ícone fica dourado */
@media (hover: hover) and (pointer: fine) {
  .topbar__item:hover {
    background: rgba(249, 249, 249, 0.08);
    border-color: rgba(249, 249, 249, 0.14);
    border-bottom-color: var(--accent-brand);
  }
  a.topbar__item:hover .topbar__ico,
  .topbar__icoLink:hover .topbar__ico { color: var(--accent-brand); }
}

/* Telas menores: ícones um pouco menores, para caber nas colunas */
@media (max-width: 1239.98px) { .topbar__item { --ico: 28px; } }
@media (max-width: 1023.98px) { .topbar__item { --ico: 24px; --stars: 2.4; gap: 6px; padding: 8px; } }

@media (max-width: 767px) {
  /* celular: só a logo na barra, no centro (os atalhos não cabem) */
  .topbar { --nav-radius: 16px; }
  .topbar__item { display: none; }
}

/* Sem backdrop-filter: grafite sólido */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { --nav-tint: var(--ui-header); }
}

/* ============================================================
   DICA DE MOUSE NA VITRINE (só computador) — veja js/clients-selection.js
   Uma luz pequena sobre a foto cortada de cada lado da galeria, com uma
   setinha: ‹ na anterior (esquerda) e › na próxima (direita). Avisa que
   dá para andar só deixando o mouse nelas.

   Mistura duas ideias:
   - vidro PRESSIONADO: um disco de vidro claro e fosco, "afundado", como
     a tela no ponto em que o dedo aperta (sombra interna em cima, luz
     interna embaixo, aro claro);
   - luz / aura: o próprio disco é claro (parece aceso) e tem um halo
     suave em volta, branco por dentro e dourado da marca por fora, que
     respira devagar; a seta dá um passinho para o lado em que a galeria
     vai andar.
   Por ser claro com seta grafite, funciona em foto clara E escura.

   O JS (initHoverAdvance) cria as duas luzes, põe a distância da borda
   em --x e liga a classe .is-on: só com a galeria parada e nunca na foto
   que está sob o mouse. No celular/tablet elas nem são criadas.
   ============================================================ */
.hScroll__hint {
  --x: 64px;      /* distância do centro da luz até a borda da tela (o JS ajusta) */
  --size: 44px;
  --nudge: -2px;  /* para onde a seta dá o passinho: esquerda na anterior */
  position: absolute;
  z-index: 3;
  top: calc(var(--nav-space) + (100% - var(--nav-space)) / 2); /* meio das fotos */
  left: var(--x);
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  color: var(--ui-ink); /* seta grafite */
  /* vidro claro e fosco: mais aceso um pouco abaixo do meio (luz difusa) */
  background: radial-gradient(circle at 50% 62%,
    rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.30) 70%, rgba(255, 255, 255, 0.22));
  -webkit-backdrop-filter: blur(12px) saturate(140%) brightness(1.12);
          backdrop-filter: blur(12px) saturate(140%) brightness(1.12);
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.24),         /* sombra interna em cima: afundado */
    inset 0 -2px 4px rgba(255, 255, 255, 0.75),  /* luz interna embaixo */
    0 0 0 1px rgba(255, 255, 255, 0.55);         /* aro do vidro */
  opacity: 0;
  scale: 0.8;
  transition: opacity 0.6s var(--ease-soft), scale 0.8s var(--ease-expo);
  pointer-events: none; /* o mouse "atravessa": quem recebe é a foto */
}
.hScroll__hint--next {
  --nudge: 2px;
  left: auto;
  right: var(--x);
  translate: 50% -50%;
}
.hScroll__hint.is-on { opacity: 1; scale: 1; }

/* Aura: halo de luz em volta do disco. É sombra EXTERNA, então não cobre o
   vidro; o dourado da marca entra bem fraco, no halo de fora */
.hScroll__hint::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    0 0 16px 5px rgba(255, 255, 255, 0.38),
    0 0 40px 12px rgba(194, 161, 88, 0.20);
  animation: hintAura 3.2s var(--ease-soft) infinite;
}
.hScroll__hint svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: hintNudge 3.2s var(--ease-soft) infinite;
}
/* apagada: as animações ficam paradas (não gastam nada) */
.hScroll__hint:not(.is-on)::after,
.hScroll__hint:not(.is-on) svg { animation-play-state: paused; }

@keyframes hintAura {
  0%, 100% { opacity: 0.45; scale: 0.94; }
  50%      { opacity: 1;    scale: 1.06; }
}
@keyframes hintNudge {
  0%, 100% { translate: 0 0; }
  50%      { translate: var(--nudge) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hScroll__hint { scale: 1; transition: opacity 0.4s linear; }
  .hScroll__hint::after,
  .hScroll__hint svg { animation: none; }
}

/* ============================================================
   FILTRO DA VITRINE — veja js/filter-sheet.js
   - Vidro ESCURO (o grafite da navbar): ícone e texto legíveis sobre
     qualquer foto, clara ou escura.
   - Tela larga com mouse (computador/notebook, 1440 px ou mais): todos
     os botões com ícone + nome, lado a lado. Com as 11 categorias + "Todos"
     a barra tem ~1390 px: abaixo de 1440 ela não caberia (o teste
     "filtro (tela larga, 1440)" confere). Mais categorias? Suba este número
     aqui, no js/filter-sheet.js e no README.
   - Celular, tablet e telas estreitas: a faixa some e fica UM botão com
     a categoria atual, que abre um painel com todas as categorias.
   ============================================================ */
.galleryFilter__glass {
  --glass-bg: rgba(28, 31, 34, 0.64);
  -webkit-backdrop-filter: blur(22px) saturate(160%) brightness(0.9);
          backdrop-filter: blur(22px) saturate(160%) brightness(0.9);
}

/* --- Tela larga: todos os nomes abertos, ícones maiores --- */
@media (min-width: 1440px) and (hover: hover) and (pointer: fine) {
  .galleryFilter__btn { height: 48px; padding: 0 16px 0 14px; font-size: 14px; }
  .galleryFilter__icon { width: 24px; height: 24px; stroke-width: 1.8; }
  .galleryFilter__label { grid-template-columns: 1fr; }
  .galleryFilter__label > span { padding-left: 8px; }
}

/* --- Modo compacto: só o botão da categoria atual --- */
.galleryFilter__toggle {
  display: none;
  align-items: center;
  gap: 10px;
  width: min(340px, calc(100vw - 56px));
  height: 52px;
  padding: 0 16px 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ui-ink-inverse);
  font: 800 16px/1 var(--font-family);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s var(--ease-soft);
}
.galleryFilter__toggleIcon { display: grid; }
.galleryFilter__toggle .galleryFilter__icon { width: 26px; height: 26px; stroke-width: 1.8; }
.galleryFilter__toggleName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galleryFilter__toggleCount {
  margin-left: auto;
  color: rgba(249, 249, 249, 0.8);
  font-size: 14px;
  font-weight: 400;
}
.galleryFilter__chevron {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 0.3s var(--ease-soft);
}
.galleryFilter__toggle[aria-expanded="true"] .galleryFilter__chevron { rotate: 180deg; }
.galleryFilter__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .galleryFilter__toggle:hover { background: var(--glass-bg-hover); }
}

/* "not all and (...)" = tudo que NÃO é tela larga com mouse */
@media not all and (min-width: 1440px) and (hover: hover) and (pointer: fine) {
  .galleryFilter__btn { display: none; }        /* os originais ficam escondidos */
  .galleryFilter__toggle { display: flex; }
}

/* --- O painel com todas as categorias --- */
.filterSheet[hidden] { display: none; }
.filterSheet { position: fixed; inset: 0; z-index: 80; }
.filterSheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 27, 32, 0.55);
  opacity: 0;
  touch-action: none;
  transition: opacity 0.3s var(--ease-soft);
}
.filterSheet__panel {
  --glass-bg: rgba(28, 31, 34, 0.82);
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  max-width: 560px;
  /* nunca mais alto que a tela (celular deitado): rola por dentro */
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 auto;
  padding: 10px 14px 16px;
  border-radius: 26px;
  color: var(--ui-ink-inverse);
  transform: translateY(calc(100% + 24px));
  transition: transform 0.45s var(--ease-expo);
}
.filterSheet.is-open .filterSheet__backdrop { opacity: 1; }
.filterSheet.is-open .filterSheet__panel { transform: none; }

/* alça + título: também é por onde se arrasta para fechar */
.filterSheet__head {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 4px 4px 12px;
  touch-action: none;
  cursor: grab;
}
.filterSheet__grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(249, 249, 249, 0.35); }
.filterSheet__title { justify-self: start; margin: 0; font: 800 18px/1.2 var(--font-family); }

.filterSheet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.filterSheet__tile {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: 98px;
  padding: 12px 6px;
  border: 1px solid rgba(249, 249, 249, 0.12);
  border-radius: 16px;
  background: rgba(249, 249, 249, 0.07);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s var(--ease-soft), color 0.25s var(--ease-soft);
}
.filterSheet__tile .galleryFilter__icon { width: 30px; height: 30px; stroke-width: 1.7; }
.filterSheet__name { font: 800 15px/1.15 var(--font-family); }
.filterSheet__count { color: rgba(249, 249, 249, 0.8); font: 400 12.5px/1.2 var(--font-family); }
.filterSheet__tile.is-active {
  border-color: transparent;
  background: var(--glass-solid-bg);
  color: var(--glass-solid-fg);
}
.filterSheet__tile.is-active .filterSheet__count { color: rgba(37, 42, 45, 0.85); }
.filterSheet__tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .filterSheet__tile:not(.is-active):hover { background: rgba(249, 249, 249, 0.14); }
}
@media (max-width: 359.98px) {
  .filterSheet__name { font-size: 14px; }
  .filterSheet__tile { min-height: 90px; }
}
/* Celular deitado (tela baixa e larga): 4 colunas e quadradinhos mais
   baixos, para as 12 opções caberem sem rolar */
@media (max-height: 520px) and (min-width: 480px) {
  .filterSheet__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filterSheet__tile { min-height: 64px; padding: 8px 6px; gap: 4px; }
  .filterSheet__tile .galleryFilter__icon { width: 24px; height: 24px; }
  .filterSheet__head { gap: 6px; padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .filterSheet__panel { transform: none; opacity: 0; transition: opacity 0.2s linear; }
  .filterSheet.is-open .filterSheet__panel { opacity: 1; }
  .galleryFilter__chevron { transition: none; }
}

/* ============================================================
   "MINHA LISTA" FLUTUANTE (vitrine) — o painel é do js/cart-ui.js
   A loja não vende pelo site: o cliente lê "lista" (no código as classes
   continuam .cartFab / cart). Botão de vidro no canto de baixo, à direita,
   NA MESMA LINHA da barra de filtro (o mesmo vidro escuro). O contador
   dourado aparece quando há itens (o cart-ui.js preenche o [data-cart-count]).
   - a partir de 600px vira uma pílula com o texto "Minha lista": o ícone
     de lista é menos conhecido que o de carrinho;
   - celular (até 599px): a barra de categorias vai para a esquerda e o
     carrinho fica ao lado dela, como uma "doca": nada se sobrepõe;
   - telas maiores: a barra continua no centro e o carrinho no canto. Se
     a barra com os nomes ficar larga a ponto de encostar no carrinho, o
     main.js põe a classe .is-raised e ele sobe para logo acima dela.
   A página do produto não usa: lá o carrinho fica no topo.
   ============================================================ */
.cartFab {
  --fab: 56px;
  --glass-bg: rgba(28, 31, 34, 0.64);
  position: fixed;
  z-index: 21; /* acima da barra de filtro (20) */
  right: max(24px, env(safe-area-inset-right, 0px));
  /* centro na mesma altura do centro da barra de filtro (64px de altura) */
  bottom: calc(var(--filter-bottom, 24px) + 4px + env(safe-area-inset-bottom, 0px));
  width: var(--fab);
  height: var(--fab);
  min-width: var(--fab);
  padding: 0;
  border-radius: 50%;
  color: var(--ui-ink-inverse);
  -webkit-backdrop-filter: blur(22px) saturate(160%) brightness(0.9);
          backdrop-filter: blur(22px) saturate(160%) brightness(0.9);
  transition: bottom 0.4s var(--ease-soft), background-color 0.3s var(--ease-soft);
}
.cartFab .icon { width: 24px; height: 24px; }
/* contador dourado "pendurado" no canto do botão */
.cartFab .badge {
  position: absolute;
  top: -3px;
  right: -3px;
  box-shadow: 0 0 0 2px rgba(23, 27, 32, 0.9);
}
/* Texto "Minha lista": só a partir de 600px (no celular a doca não tem
   espaço; lá ficam o ícone e o contador) */
.cartFab__label { display: none; }
@media (min-width: 600px) {
  .cartFab {
    width: auto;
    gap: 10px;
    padding: 0 22px 0 18px;
    border-radius: 999px;
  }
  .cartFab__label {
    display: inline;
    font: 700 15px/1 var(--font-family);
    letter-spacing: 0;
  }
}
.cartFab.is-raised {
  bottom: calc(var(--filter-bottom, 24px) + 64px + 12px + env(safe-area-inset-bottom, 0px));
}
@media (hover: hover) and (pointer: fine) {
  .cartFab:hover { --glass-bg: rgba(52, 56, 60, 0.74); }
}
@media (max-width: 599.98px) {
  .cartFab { right: max(16px, env(safe-area-inset-right, 0px)); }
  /* "doca": barra de categorias à esquerda, carrinho à direita
     (100vw − margens 32 − carrinho 56 − respiro 10 − vidro da barra 12) */
  .galleryFilter { left: max(16px, env(safe-area-inset-left, 0px)); transform: none; }
  .galleryFilter__toggle { width: calc(100vw - 110px); }
}
/* celular estreito: a barra perde largura para o carrinho, então o botão
   aperta os respiros e a letra (cabe "Todos os produtos" em 360px) */
@media (max-width: 399.98px) {
  .galleryFilter__toggle { gap: 8px; padding: 0 12px; font-size: 15px; }
}
@media (max-width: 359.98px) {
  .galleryFilter__toggleMore { display: none; } /* fica só "Todos" */
}
@media (prefers-reduced-motion: reduce) {
  .cartFab { transition: none; }
}

/* ============================================================
   VOLTA À VITRINE NA MESMA VISITA (sem a entrada) — veja main.js
   O <head> do index.html marca .is-quick-start antes de desenhar a
   página: o loader nem aparece e a vitrine surge INTEIRA, de uma vez.
   Sem esmaecer de propósito: com a página começando transparente, o
   fundo aparecia sozinho por um instante (a "piscada" na volta).
   ============================================================ */
.is-quick-start #loader { display: none; }

/* ============================================================
   FEED ESTILO REELS (celular e tablet) — veja js/feed.js
   Só vale com a classe .is-feed no <html>, que o feed.js põe
   quando o aparelho é de toque. No computador nada disto se aplica.
   ============================================================ */

/* A cor do fundo de cada produto vira uma propriedade "animável":
   assim ela muda suavemente quando a foto do carrossel troca. */
@property --tone {
  syntax: "<color>";
  inherits: true;
  initial-value: #292D30;
}

/* A página em si não rola: quem rola é o feed (contêiner fixo).
   Isso evita a barra do navegador aparecendo e sumindo no celular. */
.is-feed,
.is-feed body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
.is-feed .page { min-height: 100vh; min-height: 100svh; }
.is-feed .hScroll { display: none; }        /* a vitrine horizontal fica só no computador */

:root {
  /* espaço reservado embaixo para a barra de filtro */
  --filter-space: calc(var(--filter-bottom, 24px) + 70px + env(safe-area-inset-bottom, 0px));
}

.feed {
  position: fixed;
  inset: 0;
  z-index: 5;                               /* abaixo da navbar (30) e do filtro (20) */
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;            /* cada item encaixa no topo */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.feed::-webkit-scrollbar { display: none; }
.feed > * { scroll-snap-align: start; }

/* Abertura dentro do feed: continua transparente (a vitrine aparece atrás) */
.feed__intro { background: transparent; }

/* --- Um produto: tela inteira, dividida em faixas ---------------------
   [espaço da navbar] [fotos] [ficha] [espaço do filtro]              */
.feed__item {
  position: relative;
  height: 100%;
  scroll-snap-stop: always;                 /* um produto por gesto, sem pular */
  display: grid;
  grid-template-rows: var(--nav-space) minmax(0, 1fr) auto var(--filter-space);
  background-color: #171B20;
  background-image:
    linear-gradient(180deg, rgba(17, 20, 23, 0.55) 0%, transparent 22%, transparent 70%, rgba(17, 20, 23, 0.7) 100%),
    radial-gradient(130% 85% at 50% 42%, color-mix(in srgb, var(--tone) 55%, #171B20) 0%, #171B20 80%);
  transition: --tone 0.6s ease;
}
.feed__item[hidden] { display: none; }

/* Carrossel de fotos: rolagem horizontal nativa com encaixe */
.feed__track {
  grid-row: 2;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.feed__track::-webkit-scrollbar { display: none; }
.feed__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: center;
  display: grid;
  place-items: center;
  padding: 10px 16px;
  -webkit-tap-highlight-color: transparent;
}
/* A foto aparece inteira (sem cortar o móvel), sobre o tom dela mesma */
.feed__photo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Rodapé: bolinhas + ficha de vidro --------------------------------- */
.feed__meta {
  grid-row: 3;
  display: grid;
  gap: 10px;
  width: min(100%, 560px);
  justify-self: center;
  padding: 0 16px 10px;
}
.feed__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.feed__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(249, 249, 249, 0.35);
  transition: width 0.3s var(--ease-soft), background-color 0.3s var(--ease-soft);
}
.feed__dots span.is-active { width: 18px; border-radius: 3px; background: #F9F9F9; }

.feed__info {
  --glass-bg: rgba(41, 45, 48, 0.66);       /* ficha com texto: vidro mais opaco */
  display: grid;
  gap: 4px;
  padding: 14px 14px 14px 16px;
  border-radius: 18px;
  color: #F9F9F9;
  -webkit-tap-highlight-color: transparent;
}
.feed__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(249, 249, 249, 0.75);
}
.feed__name {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.feed__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.feed__price { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.feed__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #C2A158;                      /* dourado da marca + texto escuro: 5,89:1 */
  color: #252A2D;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.feed__cta .icon { width: 16px; height: 16px; stroke-width: 2; }

/* Dica de gesto no 1º produto: logo acima das bolinhas.
   Começa invisível; .is-showing (posta pelo feed.js quando o produto entra
   na tela) faz ela aparecer e "balançar"; .is-hidden some com ela. */
.feed__meta { position: relative; }
.feed__hint {
  --glass-bg: rgba(41, 45, 48, 0.72);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  color: #F9F9F9;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-soft);
}
.feed__hint.is-showing { opacity: 1; animation: feed-hint 1.6s var(--ease-soft) 0.4s 3 both; }
.feed__hint.is-hidden { opacity: 0; animation: none; }
@keyframes feed-hint {
  0%, 100% { translate: 0 0; }
  50% { translate: -12px 0; }
}

/* Cartão final */
.feed__end { place-items: center; grid-template-rows: 1fr; }
.feed__endBox {
  --glass-bg: rgba(41, 45, 48, 0.7);
  display: grid;
  justify-items: center;
  gap: 16px;
  margin: 0 16px;
  padding: 28px 24px;
  border-radius: 24px;
  color: #F9F9F9;
  text-align: center;
}
.feed__endText { margin: 0; font-size: 17px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .feed__item { transition: none; }
  .feed__hint { animation: none; }
}