/* NAKÁ — componentes próprios da loja, sobre o design system "classical".
   Fica fora de assets/ds/ porque assets/ds/ é gerado; este arquivo é de autoria
   do projeto. Ligado no <helmet> das páginas da loja, depois de ds/styles.css. */

/* ------------------------------------------------------ escala tipográfica */

/* Razão 1.25 (terça maior) a partir de 17px, oito degraus.
   Em rem, não px, para que a escala acompanhe o tamanho de fonte que a pessoa
   configurou no navegador — o público é 30+ e parte dele aumenta a fonte.
   Os cinco degraus de display são fluidos entre 375px e 1180px de viewport:
   um título de 65px não cabe num telefone, e é a escala que responde por isso.

              telefone   desktop
   small         14        14
   body          17        17
   lead          21        21
   4             23        27
   3             26        33
   2             30        41
   1             34        52
   display       38        65                                              */
:root {
  --type-small: 0.875rem;
  --type-body: 1.0625rem;
  --type-lead: 1.3125rem;
  --type-4: clamp(1.4375rem, 1.321rem + 0.50vw, 1.6875rem);
  --type-3: clamp(1.625rem, 1.421rem + 0.87vw, 2.0625rem);
  --type-2: clamp(1.875rem, 1.555rem + 1.37vw, 2.5625rem);
  --type-1: clamp(2.125rem, 1.601rem + 2.24vw, 3.25rem);
  --type-display: clamp(2.375rem, 1.589rem + 3.35vw, 4.0625rem);

  /* Entrelinha por registro: quanto maior o corpo, mais apertada a leitura. */
  --leading-display: 1.05;
  --leading-heading: 1.2;
  --leading-lead: 1.45;
  --leading-body: 1.6;
}

/* Os cinco degraus de cima são território do Cormorant. Como toda posição de
   título no site repete a mesma tripla (família + peso + corpo), ela vira uma
   classe: o `style` da marcação fica só com o que é daquele lugar. */
.t-display,
.t-1,
.t-2,
.t-3,
.t-4,
.t-5,
.t-wordmark {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
}

.t-display { font-size: var(--type-display); line-height: var(--leading-display); }
.t-1 { font-size: var(--type-1); line-height: 1.1; }
.t-2 { font-size: var(--type-2); line-height: 1.15; }
.t-3 { font-size: var(--type-3); line-height: var(--leading-heading); }
.t-4 { font-size: var(--type-4); line-height: 1.25; }

/* O degrau em que as duas famílias se encostam: .t-5 é o Cormorant no seu
   piso (nome da peça, nome da categoria), .t-lead é o Manrope no seu teto
   (subtítulo de herói). Mesmo corpo, vozes diferentes. */
.t-5 { font-size: var(--type-lead); line-height: 1.25; }
.t-lead { font-size: var(--type-lead); line-height: var(--leading-lead); }

.t-wordmark { font-size: var(--type-4); letter-spacing: 0.08em; }

/* --------------------------------------------------- pontos de quebra
   Quatro valores, e só eles. Cada um responde por uma decisão:

   1080   a grade de peças passa de 4 para 3 colunas
    900   layouts de duas colunas colapsam (filtros, ficha do produto)
    700   a nav quebra em duas linhas, o rodapé empilha, a grade vai a 2
    480   o respiro lateral aperta e o formulário empilha

   Antes de escrever um quinto, verifique se um destes não resolve.       */

/* ------------------------------------------------------------ estrutura */

/* Mora aqui, e não no <style> de cada página, porque precisa de media query
   e o <style> do <helmet> é carregado depois deste arquivo — uma regra lá
   venceria a daqui por ordem de fonte. */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

@media (max-width: 480px) {
  .container { padding-inline: var(--space-4); }
}

/* Fio de seção. Recuo igual ao do .container, para o traço parar onde o texto
   para em vez de encostar na borda da tela. O recuo é padding e o fundo é
   recortado no content-box — um `max-width` menor desalinharia o fio do
   conteúdo em telas largas. */
.hr-page {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--space-6);
  height: 1px;
  border: 0;
  box-sizing: border-box;
  background: var(--color-divider);
  background-clip: content-box;
}

@media (max-width: 480px) {
  .hr-page { padding-inline: var(--space-4); }
}

/* Cabeçalho ---------------------------------------------------------- */

.site-nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.site-nav-links {
  display: flex;
  gap: var(--space-6);
  justify-self: center;
}

.site-nav-actions {
  display: flex;
  gap: var(--space-2);
  justify-self: end;
}

@media (max-width: 700px) {
  /* São três links. Escondê-los atrás de um botão custaria um toque e um
     estado para poupar uma linha — então eles descem para a segunda linha,
     partidos pelo mesmo fio que separa as seções. Marca e ícones ficam na
     primeira, ao alcance do polegar. */
  .site-nav {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-3);
    padding-inline: var(--space-4);
  }
  .site-nav-actions { grid-column: 2; grid-row: 1; }
  .site-nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    gap: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-divider);
  }
}

/* Rodapé ------------------------------------------------------------- */

.site-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 700px) {
  .site-footer { grid-template-columns: 1fr; }
}

/* Listagem com filtros ----------------------------------------------- */

.shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 900px) {
  /* Os filtros passam a abrir a página em vez de ocupar uma coluna. */
  .shop-layout { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* O espaçamento entre grupos vem do gap, não de margem em cada um — assim a
   mesma marcação serve à coluna e à faixa. */
.shop-filters {
  display: grid;
  gap: var(--space-5);
}

.shop-filters > hr { margin: 0; }

@media (max-width: 900px) {
  /* Empilhados numa coluna só, os quatro grupos viram uma parede de quinze
     linhas antes do primeiro produto. Lado a lado, viram quatro — e o fio
     que os separava na vertical não tem mais função. */
  .shop-filters {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-6);
  }
  .shop-filters > hr { display: none; }
  .shop-filters > div:first-child { grid-column: 1 / -1; }
}

/* Ficha do produto --------------------------------------------------- */

.pdp-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.pdp-media {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: var(--space-2);
  align-items: start;
}

.pdp-thumbs { display: grid; gap: var(--space-2); }

@media (max-width: 900px) {
  /* A ficha corre abaixo da foto, e a tira de miniaturas vai para baixo
     dela: numa coluna estreita, 76px tomados da lateral custam mais do que
     uma linha a mais. */
  .pdp-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .pdp-media { grid-template-columns: 1fr; }
  .pdp-thumbs {
    grid-row: 2;
    grid-auto-flow: column;
    grid-auto-columns: 76px;
    justify-content: start;
    overflow-x: auto;
  }
}

/* Cadastro de e-mail ------------------------------------------------- */

.newsletter-form {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

@media (max-width: 480px) {
  /* Campo e botão lado a lado pedem ~445px; abaixo disso eles empilham. */
  .newsletter-form { flex-direction: column; align-items: center; }
}

/* ---------------------------------------------------------------- grade */

/* Quatro colunas de peças que degradam até duas no telefone. A galeria de
   moda pede duas colunas no telefone, não uma: a comparação lado a lado é
   parte de como a peça é escolhida. */
.piece-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8) var(--space-4);
}

@media (max-width: 1080px) {
  .piece-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  .piece-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-3); }
}

/* ----------------------------------------------------------- a etiqueta */

.piece {
  display: block;
  text-decoration: none;
  color: inherit;
}

.piece-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  /* fundo enquanto a foto carrega — evita o buraco branco na grade */
  background: var(--color-surface);
}

/* image-slot já é display:block; position:relative no seu :host */
.piece-frame image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* A segunda foto vive por cima, transparente, e aparece no hover/foco.
   Sem escala, sem deslocamento: a peça não se mexe, ela se mostra de outro
   ângulo. */
.piece-alt {
  opacity: 0;
  transition: opacity 420ms ease;
}

.piece:hover .piece-alt,
.piece:focus-visible .piece-alt {
  opacity: 1;
}

/* O fio de que o nome e o preço ficam pendurados. É o mesmo fio que separa
   as seções do site — o card não inventa um device novo. */
.piece-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
  transition: border-color 300ms ease;
}

.piece:hover .piece-label,
.piece:focus-visible .piece-label {
  border-top-color: var(--color-accent);
}

/* Cormorant no seu piso — ver .t-5. */
.piece-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--type-lead);
  line-height: 1.25;
}

/* Mesmo corpo e mesma família do nome: os dois formam uma linha de registro,
   não um título com legenda. Algarismos tabulares porque numa grade os preços
   se leem em coluna. */
.piece-price {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--type-lead);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
  color: var(--color-neutral-700);
}

/* neutral-700, não 600: sobre --color-bg o 600 dá 3,85:1 e não passa AA em
   13px. A hierarquia aqui vem do corpo, não do contraste. */
.piece-color {
  margin: var(--space-1) 0 0;
  font-size: var(--type-small);
  line-height: var(--leading-lead);
  color: var(--color-neutral-700);
}

/* Só renderizado quando é verdade. Texto, não pílula. */
.piece-note {
  margin: var(--space-1) 0 0;
  font-size: var(--type-small);
  line-height: var(--leading-lead);
  color: var(--color-accent-700);
}

@media (max-width: 700px) {
  /* Na coluna estreita nome e preço não cabem lado a lado sem quebrar feio. */
  .piece-label {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  /* Um degrau abaixo na escala, não um valor avulso. */
  .piece-name,
  .piece-price { font-size: var(--type-body); }
}

@media (prefers-reduced-motion: reduce) {
  .piece-alt,
  .piece-label { transition: none; }
}