/* ==========================================================================
   MARCA — Center Móveis aplicada à vitrine e à página de produto
   --------------------------------------------------------------------------
   Carregado DEPOIS de base.css / clients-selection.css / product.css.
   Só troca os tokens (variáveis) para as cores do Manual de Cores:
   - fundo e vidro no grafite da marca (#292D30 / #171B20), sem o roxo original;
   - botão "cheio" (filtro ativo, adicionar ao carrinho) no dourado original
     #C2A158 com texto #252A2D (5,89:1, combinação aprovada no manual);
   - fonte Inter Tight, a mesma da animação de entrada.
   ========================================================================== */
:root {
  --color-bg: #171B20;
  --color-text: #F9F9F9;
  --color-muted: rgb(249 249 249 / .72);
  --color-hairline: rgb(249 249 249 / .14);

  --glass-bg: rgb(41 45 48 / .38);
  --glass-bg-hover: rgb(249 249 249 / .16);
  --glass-border: rgb(249 249 249 / .22);
  --glass-highlight: rgb(249 249 249 / .28);
  --glass-fallback: rgb(41 45 48 / .9);

  --glass-icon: rgb(249 249 249 / .94);
  --glass-solid-bg: #C2A158;
  --glass-solid-fg: #252A2D;

  --font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Painéis com texto (carrinho, compartilhar): grafite mais opaco */
.glassPanel { --glass-bg: rgb(41 45 48 / .82); }

/* Escurecimento atrás dos painéis no tom da marca */
.overlay { background: rgb(23 27 32 / .5); }

/* --------------------------------------------------------------------------
   Página do produto: logo da loja no topo
   A logo de 3 cores só vai sobre grafite: a pílula de vidro é bem opaca
   (88%) para manter o contraste mesmo com a foto clara desfocada atrás.
   -------------------------------------------------------------------------- */
.topbar__brand {
  --glass-bg: rgb(41 45 48 / .88);
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
}
/* 36px: abaixo de ~32px as minúsculas da logo ficam com menos de 6px e o
   "Móveis" prateado some (antes era 28px: minúsculas de 5px) */
.topbar__brand img { height: 36px; width: auto; }

@media (max-width: 480px) {
  /* no celular sobra pouco espaço: o botão Vitrine fica só com a seta */
  .productPage .topbar > a[data-action="back"] span { display: none; }
  .productPage .topbar > a[data-action="back"] { width: 44px; padding: 0; }
  .topbar__brand { padding: 0 12px; }
  .topbar__brand img { height: 34px; }   /* antes 24px: minúsculas de 4px */
}

/* "Minha lista" no topo do produto: com o texto no computador (o ícone de
   lista é menos conhecido que o de carrinho); no celular, só o ícone */
.topbar__listLabel { display: none; }
@media (min-width: 960px) {
  .topbar__listLabel { display: inline; }
}

/* Aviso nos produtos fictícios */
.productCard__demo {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgb(194 161 88 / .45);
  background: rgb(194 161 88 / .12);
  color: #F9F9F9;
  font-size: 13px;
  line-height: 1.4;
}

/* Tons escuros que vinham fixos no roxo do estudo original → grafite da marca */
.ambient::after {
  background: linear-gradient(180deg, rgb(23 27 32 / .3), rgb(23 27 32 / .7));
}
.productCard { --glass-bg: rgb(41 45 48 / .6); }   /* ficha: mais opaca, tem texto */
.stage::after {
  background: linear-gradient(0deg, rgb(23 27 32 / .6), rgb(23 27 32 / 0));
}

/* Etiqueta de nome + preço nas fotos da vitrine:
   - o nome herdava a cor escura de texto da página → força o branco;
   - vidro mais opaco (78%), porque fica sobre fotos claras.
   Pior caso (foto branca atrás): nome 7:1, preço ~4,6:1. */
.hScroll__tag {
  --glass-bg: rgb(41 45 48 / .78);
  color: var(--color-text);
}

/* Diferenciais (lista) e texto do cliente na ficha do produto */
.productCard__highlights {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.productCard__highlights li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-muted);
}
.productCard__highlights li::before {   /* marcador dourado */
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C2A158;
}
.productCard__details {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-hairline);
}
.productCard__details h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
}
.productCard__details p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-muted);
}
.productCard__details strong { color: var(--color-text); font-weight: 600; }

/* --------------------------------------------------------------------------
   Página do produto no CELULAR / TABLET EM PÉ (abaixo de 960px, onde a
   foto fica em cima e a ficha embaixo)
   - logo centralizada no topo;
   - compartilhar sai do topo e vai para a ficha, ao lado do nome do
     produto (aviãozinho);
   - embaixo, "Vitrine" no lugar do compartilhar.
   No computador (960px+) continua como antes.
   -------------------------------------------------------------------------- */
.productCard__shareTop,
.productCard__back { display: none; }

@media (max-width: 959.98px) {
  /* 3 colunas com as pontas iguais: a do meio (logo) fica no centro exato */
  .productPage .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .productPage .topbar > a[data-action="back"] { justify-self: start; }
  .productPage .topbar__brand { justify-self: center; }
  .productPage .topbar__end { justify-self: end; }
  .productPage .topbar__share { display: none; }

  /* Compartilhar no canto direito da ficha, na altura da 1ª linha do nome.
     float: o nome contorna o botão (não passa por baixo dele) e as linhas
     seguintes voltam a usar a largura toda. A margem de cima negativa
     centraliza o botão (44px) na 1ª linha do nome. */
  .productCard__shareTop {
    display: inline-flex;
    float: right;
    margin: -8px -4px 6px 12px;
  }
  .productCard__shareTop .icon { width: 21px; height: 21px; }
  /* nome de uma linha só: o preço começa abaixo do botão, não ao lado */
  .productCard__price { clear: right; }

  /* Embaixo: adicionar ao carrinho + voltar para a vitrine */
  .productCard__share { display: none; }
  .productCard__back { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   GALERIA DO PRODUTO: FOTO INTEIRA em celular e tablet
   No computador a foto "preenche" o palco (object-fit: cover): lá o corte
   é pequeno (5–7%). Em celular e tablet o palco é estreito/vertical e o
   preenchimento cortava 14–36% do móvel, além de a barra de miniaturas e
   a ficha cobrirem a base da foto.
   Aqui a foto aparece INTEIRA (object-fit: contain) dentro de uma "área
   segura": abaixo dos botões do topo e acima da barra de miniaturas.
   Em volta aparece a mesma foto, grande e desfocada (.ambient), que a
   página já usa de fundo.
     --fit-top    espaço reservado em cima (botões do topo)
     --fit-bottom espaço reservado embaixo (barra de miniaturas)
     --fit-x      margem nas laterais
   Vale para telas abaixo de 960px e para qualquer aparelho de toque
   (inclusive tablet deitado, que usa o layout de computador).
   -------------------------------------------------------------------------- */
@media (max-width: 959.98px), (hover: none) and (pointer: coarse) {
  .stage {
    --fit-top: calc(16px + 44px + 14px + env(safe-area-inset-top, 0px));
    --fit-bottom: calc(52px + 56px + 10px);
    --fit-x: 12px;
  }
  .stage__item {
    inset: auto;
    top: var(--fit-top);
    left: var(--fit-x);
    width: calc(100% - 2 * var(--fit-x));
    height: calc(100% - var(--fit-top) - var(--fit-bottom));
    object-fit: contain;
    /* sombra que segue o contorno da foto (não da caixa) */
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.35));
  }
  /* a foto não encosta mais na borda: não precisa dissolver a borda */
  .stage__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* Celular / tablet em pé: palco com 68% da tela (como antes), um pouco
   mais nos celulares altos. Mais que isso empurra a ficha para baixo e o
   preço fica escondido atrás dos botões "Adicionar ao carrinho / Vitrine"
   (medido: com 76%, o preço sumia no iPhone 13 e no Pixel 5). */
@media (max-width: 959.98px) {
  .stage {
    height: max(68vh, calc(100vh - 230px));
    height: max(68svh, calc(100svh - 230px));
  }
}

/* Tablet deitado (layout de computador com toque): reservas desse layout */
@media (min-width: 960px) and (hover: none) and (pointer: coarse) {
  .stage {
    --fit-top: calc(16px + 44px + 20px + env(safe-area-inset-top, 0px));
    --fit-bottom: calc(var(--edge) + 56px + 14px);
    --fit-x: 20px;
  }
}