/* ==========================================================================
   Catálogo de produtos: cards de linha, filtro e grid
   --------------------------------------------------------------------------
   Extraído do <style> inline de pages/produtos/index.html em 28/08 para ser
   reaproveitado pelas páginas de linha (tortas/, bolos/, ...). Quem monta o
   conteúdo é js/catalogo.js, a partir de assets/data/catalogo.json.
   ========================================================================== */

/* §02: Cards grandes de categoria (herói da página) */
.prd-cats { background: var(--surface-page); }
.prd-cats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}
@media (min-width: 601px) and (max-width: 1024px) {
  .prd-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .prd-cats__grid { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto; }
}

.prd-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-almost-black);
  background: var(--color-warm-beige);
  isolation: isolate;
  transition: transform 400ms var(--ease-out-expo), box-shadow 400ms var(--ease-out-expo);
}
.prd-cat-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 24px 60px rgba(26,10,8,0.25), var(--glow-gold);
}
/* Área de mídia quadrada. Até 09/09 toda foto aqui usava object-fit:contain,
   porque o acervo mistura retrato (601x900) e paisagem (900x601): um recorte
   com cover decepava metade do produto em qualquer foto vertical (tortelete,
   slice cake). Mas contain tem o problema oposto, moldura vazia: uma foto
   601x900 pinta só 285x427 dentro do quadro de 427x427, sobrando ~142px
   de bege dos dois lados; uma 900x601 sobra o mesmo em cima e embaixo. É
   por isso que as capas pareciam desalinhadas entre si, cada orientação
   deixando respiro num eixo diferente.

   A correção ficou de origem, não de CSS: js/catalogo.js agora carrega,
   pra cada uma das seis linhas, um derivado (prefixo capa- em
   assets/img/catalogo/) já recortado no quadrado 1:1 desta moldura, com o
   produto inteiro e respiro decidido olhando a foto. Esse recorte pré-feito
   é quem recebe cover, na classe .prd-cat-card__img--capa logo abaixo: cover
   preenche o quadro inteiro sem sobra e sem cortar nada, porque o corte já
   foi escolhido, não decidido pelo navegador. As fotos que só aparecem no
   hover/toque (2ª a 4ª da galeria) continuam no hero original do produto,
   sem recorte prévio, por isso continuam com contain: cobri-las também
   pediria um derivado por foto, fora do escopo desta rodada. */
.prd-cat-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f4ede4;
}
/* Galeria: fotos empilhadas na mesma moldura, trocando por opacidade (nunca
   por troca de src, sem salto de layout). js/catalogo.js monta uma por
   produto representativo da linha e alterna a classe .is-active. */
.prd-cat-card__img {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 500ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
}
.prd-cat-card__img.is-active { opacity: 1; z-index: 1; }
/* A capa (1ª foto, is-active por padrão) já vem recortada no quadrado da
   moldura: aqui é seguro preencher com cover, sem cortar o produto, porque
   o enquadramento foi decidido no derivado, não neste object-fit. */
.prd-cat-card__img--capa { object-fit: cover; }
/* Sem zoom na foto ativa ao passar o mouse: um scale() aqui empurraria a
   imagem pra fora da moldura e recortaria justamente a borda do produto que
   o §02 existe pra não cortar. O feedback de hover fica só no cartão
   inteiro (translateY + scale acima). */

/* Indicador visual de quantas fotos existem na linha, decorativo, não
   recebe clique (o botão .prd-cat-card__navphoto cobre a área inteira). */
.prd-cat-card__dots {
  position: absolute;
  left: 50%; bottom: var(--space-md);
  transform: translateX(-50%);
  z-index: 2;
  display: flex; gap: 6px;
  pointer-events: none;
}
.prd-cat-card__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(251,245,239,0.55);
  box-shadow: 0 0 0 1px rgba(26,10,8,0.25);
  transition: background 250ms var(--ease-out-expo), transform 250ms var(--ease-out-expo);
}
.prd-cat-card__dot.is-active { background: var(--color-off-white); transform: scale(1.3); }

/* Botão que cobre a moldura inteira e troca a foto: nunca abre a categoria.
   É a área de mídia que "rouba" o toque/clique de propósito: o cartão
   continua sendo o link (título, descrição e CTA seguem abrindo a linha),
   só a foto responde ao toque/clique/hover como controle próprio. */
.prd-cat-card__navphoto {
  position: absolute; inset: 0;
  z-index: 3;
  width: 100%; height: 100%;
  background: transparent;
  border: 0; padding: 0; margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Link "esticado" que cobre o cartão inteiro (ver js/catalogo.js/montaCats):
   é ele que abre a linha, não mais o cartão em si (que virou <div>). Fica
   ATRÁS do botão de foto (z-index menor) então, na área de mídia, o botão
   ganha o clique primeiro; no resto do cartão, cai direto aqui. */
.prd-cat-card__stretch {
  position: absolute; inset: 0;
  z-index: 1;
}
/* Anel de duas cores no foco: metade clara, metade escura, então aparece
   tanto sobre foto clara quanto sobre foto escura na moldura, o que um
   único tom (o off-white antigo, quase invisível sobre o próprio fundo
   bege do cartão) não garantia. */
.prd-cat-card__navphoto:focus-visible,
.prd-cat-card__stretch:focus-visible {
  outline: 2px solid var(--color-almost-black);
  outline-offset: -4px;
  box-shadow: 0 0 0 4px var(--color-off-white);
}

/* Botão de pausa do giro automático (rodada 09/09: giro passou a trocar
   sozinho a cada 3s, então precisa de uma forma explícita e acessível de
   parar, além do hover/foco que já pausa como complemento). Fica no canto
   oposto aos dots, acima do botão .prd-cat-card__navphoto (z-index maior)
   pra não perder o clique pra área de troca de foto por toque. */
.prd-cat-card__pause {
  position: absolute;
  top: var(--space-md); right: var(--space-md);
  z-index: 4;
  width: 40px; height: 40px; /* alvo de toque >= 40 px */
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(26,10,8,0.55);
  backdrop-filter: blur(8px);
  color: var(--color-off-white);
  border: 0; border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms var(--ease-out-expo), opacity 200ms var(--ease-out-expo);
}
.prd-cat-card__pause:hover { background: rgba(26,10,8,0.75); }
.prd-cat-card__pause:focus-visible {
  outline: 2px solid var(--color-off-white);
  outline-offset: 2px;
}
/* Os dois ícones (pausar/retomar) ficam empilhados; só um aparece por vez,
   conforme .is-paused no próprio botão, sem trocar o innerHTML a cada clique. */
.prd-cat-card__pause-icon { display: none; }
.prd-cat-card__pause-icon--pause { display: block; }
.prd-cat-card__pause.is-paused .prd-cat-card__pause-icon--pause { display: none; }
.prd-cat-card__pause.is-paused .prd-cat-card__pause-icon--play { display: block; }

.prd-cat-card__content {
  min-height: 240px;
  /* padding horizontal reduzido em relação ao vertical: dá mais largura pro
     título de uma palavra só (Sobremesas, Industrial) sem mexer no respiro
     entre os blocos internos */
  padding: var(--space-2xl) var(--space-lg);
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xl);
  background: var(--color-warm-beige);
}
.prd-cat-card__count {
  display: inline-flex;
  background: rgba(107,66,38,0.08);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-burgundy);
  align-self: flex-start;
  border: 1px solid rgba(107,66,38,0.18);
}
.prd-cat-card h3 {
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  /* clamp(2.5rem,4vw,3.5rem) transbordava "Sobremesas" a partir de 1025px
     (o corte no card 3x2 volta a valer aí) até 1440px: até 36px de texto
     passando do card, cortado pelo overflow:hidden do cartão. Testado em
     1025/1080/1150/1200/1300/1366/1440/1920px contra as seis linhas: este
     clamp fica com folga em todas. */
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 0.92; letter-spacing: -0.01em;
  color: var(--color-almost-black);
  margin: 0 0 var(--space-md);
  /* rede de segurança: nunca cortar por overflow, só quebrar linha, e só no
     meio da palavra se não houver outro jeito (nome de linha é palavra única) */
  overflow-wrap: break-word;
  word-break: break-word;
}
.prd-cat-card p {
  font-family: var(--font-body);
  font-size: 0.95rem; font-weight: 500;
  line-height: 1.45;
  color: var(--color-burgundy); opacity: 0.85;
  margin: 0 0 var(--space-md);
  max-width: 36ch;
}
/* Era um texto sublinhado (borda inferior de 1px) dentro do card inteiro já
   clicável, e a chamada de ação ficava discreta demais para quem não passa o
   mouse por cima. Virou um botão visível, cor sólida, sem trocar a tag: só
   a aparência do rótulo mudou (o span em si nunca foi o link, ver
   .prd-cat-card__stretch acima). */
.prd-cat-card__link {
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-almost-black);
  background: var(--color-off-white);
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  align-self: flex-start;
  transition: background 300ms var(--ease-out-expo), gap 300ms var(--ease-out-expo), color 300ms var(--ease-out-expo);
}
/* :focus-visible não pode ficar em .prd-cat-card: quem recebe foco agora é o
   link esticado dentro dele (.prd-cat-card__stretch), não o cartão em si.
   :has() lê o foco de um filho pra reagir aqui, no rótulo visível. */
.prd-cat-card:hover .prd-cat-card__link,
.prd-cat-card:has(.prd-cat-card__stretch:focus-visible) .prd-cat-card__link {
  gap: var(--space-md);
  background: var(--color-orange-accent);
  color: var(--color-off-white);
}

/* §03: Filtro + busca */
.prd-filter {
  padding: var(--space-2xl) 0;
  background: var(--color-warm-beige);
  border-top: 1px solid rgba(107,66,38,0.12);
  border-bottom: 1px solid rgba(107,66,38,0.12);
}
.prd-filter__inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.prd-chips {
  display: flex; gap: var(--space-sm); flex-wrap: wrap;
}
.prd-subchips {
  display: flex; gap: var(--space-sm); flex-wrap: wrap;
  margin: 0 0 var(--space-xl);
}
.prd-chip--sub { font-size: 0.78rem; }

/* filtro de tamanho comercial em Tortas (CP-055): mesmo componente de chip,
   criado por js/catalogo.js e inserido antes de #prd-grid, a página de linha
   não tem uma seção de filtro no HTML, então o próprio JS monta o espaço. */
.prd-tamchips {
  display: flex; gap: var(--space-sm); flex-wrap: wrap;
  margin: 0 0 var(--space-xl);
}
.prd-tamchips:empty { display: none; }
.prd-chip {
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-almost-black);
  background: transparent;
  border: 1px solid rgba(26,10,8,0.2);
  padding: 8px 16px;
  min-height: 40px; /* alvo de toque >= 40 px (varredura de 14/10) */
  display: inline-flex; align-items: center;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 300ms var(--ease-out-expo);
}
.prd-chip:hover { border-color: var(--color-almost-black); }
.prd-chip.is-active {
  background: var(--color-almost-black);
  color: var(--color-off-white);
  border-color: var(--color-almost-black);
}
.prd-search {
  flex: 1; min-width: 240px;
  display: flex; align-items: center;
  background: var(--color-off-white);
  border: 1px solid rgba(26,10,8,0.12);
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 18px;
  gap: var(--space-sm);
}
.prd-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 500;
  color: var(--color-almost-black);
  padding: 6px 0;
  min-height: 40px; /* campo com 29 px de altura útil: alvo de toque >= 40 px */
}
.prd-search input::placeholder { color: rgba(26,10,8,0.5); }
.prd-search button {
  background: var(--color-orange-accent);
  color: var(--color-off-white);
  border: 0; cursor: pointer;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 300ms var(--ease-spring);
}
.prd-search button:hover { transform: scale(1.08); box-shadow: var(--glow-orange); }

/* §04: Grid catálogo completo */
.prd-catalog { background: var(--surface-page); padding: var(--space-3xl) 0 var(--space-4xl); }
.prd-catalog__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap; gap: var(--space-md);
}
.prd-catalog__title {
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.015em;
  margin: 0;
}
.prd-catalog__count {
  font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 500;
  color: var(--color-burgundy);
  opacity: 0.75;
}
.prd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}
/* Varredura de 14/10: com 3 colunas a partir de 801 px o card caía para 220 px
   (820) e 228 px (844x390); 2 colunas valem até 899 px. Em 481-540 px os dois
   cards ficavam com ~212 px: 1 coluna vale até 540 px. minmax(0,1fr) em todos
   para o texto longo não empurrar a coluna. */
@media (max-width: 1100px) { .prd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px)  { .prd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px)  { .prd-grid { grid-template-columns: minmax(0, 1fr); } }

.prd-item {
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
}
.prd-item__media {
  position: relative;
  /* 1:1 equilibra as duas orientações do acervo (82 capas em retrato, 80 em
     paisagem): o produto em retrato ocupa 50% mais área do que em 4:3 e o em
     paisagem mantém a mesma largura. */
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-warm-beige);
}
/* Moldura estável (rodada de 14/10/2026). Cada foto é uma camada que ocupa a
   mesma caixa 4:3. A foto nítida usa contain: o produto aparece inteiro, sem
   esticar e sem cortar. O espaço que o contain deixa livre (fotos verticais
   numa caixa horizontal e vice-versa) é preenchido por uma cópia desfocada da
   própria foto (::before, variável --bg), não por uma cor chapada, então não
   surgem barras. A capa fica sempre a 100%; a camada alternativa entra por
   cima e sai por cima, sem passar por um instante vazio. */
/* Moldura por produto (web.moldura, rodada 14/10 parte 2). Produto alongado: a caixa da foto é 4:3
   (paisagem) ou 3:2 (ampla), a MESMA nos dois estados (inteira e fatia/outra vista), e os derivados
   são recortes reais do original nessa proporção, com o produto inteiro. A moldura só muda de
   altura; a margem inferior reserva o mesmo espaço de um card 1:1, então o título e o texto
   ficam alinhados com os vizinhos da linha da grade. Sem barras nem fundo desfocado. */
.prd-item__media--paisagem { aspect-ratio: 4 / 3; margin-bottom: 25% }
.prd-item__media--ampla { aspect-ratio: 3 / 2; margin-bottom: 33.333% }
.prd-item__layer { position: absolute; inset: 0; display: block; overflow: hidden; }
.prd-item__layer::before {
  content: ''; position: absolute; inset: 0;
  /* 100% 100%: a cópia desfocada ocupa a moldura inteira e as bordas dela
     coincidem com as bordas da foto, sem faixa de outra cor ao lado do produto. */
  background: var(--bg) 0 0 / 100% 100% no-repeat;
  transform: scale(1.08);
  filter: blur(20px) saturate(1.05);
}
/* Recortes com fundo transparente (web.margemNormalizada): sem cópia desfocada, que viraria uma nuvem escura em volta do produto. */
.prd-item__media--recorte .prd-item__layer::before { display: none; }
.prd-item__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* Correção de 14/10: todos os derivados do card são quadrados 1:1 recortados do original,
     então cover preenche a moldura sem faixa. A cópia desfocada (::before) fica só como
     reserva, coberta por completo pela foto. */
  object-fit: cover;
  object-position: center;
}
.prd-item__layer--capa { z-index: 1; }
.prd-item__layer--alt { z-index: 2; opacity: 0; transition: opacity 380ms var(--ease-out-expo); background: var(--color-warm-beige); }
.prd-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.prd-item__link { display: block; color: inherit; text-decoration: none; }
.prd-item__link:focus-visible { outline: 3px solid var(--color-orange-accent); outline-offset: 5px; border-radius: var(--radius-lg); }
.prd-item__toggle {
  position: absolute; right: 10px; top: 10px; z-index: 4;
  min-height: 44px; min-width: 44px;
  border: 1px solid rgba(255,255,255,.5); border-radius: 22px;
  padding: 0 16px; background: #321e17; color: #fff;
  font: 600 13px var(--font-body); cursor: pointer;
}
.prd-item__toggle:focus-visible { outline: 3px solid var(--color-orange-accent); outline-offset: 2px; }
.prd-item__toggle[aria-pressed="true"] { background: var(--color-orange-accent); border-color: var(--color-orange-accent); }
.prd-item.is-alt .prd-item__layer--alt { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .prd-item__layer--alt { transition: none; } }
@media (hover: hover) and (pointer: fine) { .prd-item__toggle { display: none; } }
.prd-subcategories {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px; margin-block: 24px;
}
.prd-subcategories[hidden], .prd-grid[hidden], .prd-subchips[hidden] { display: none; }
.prd-subcategory {
  display: grid; text-align: left; padding: 0 0 22px; overflow: hidden;
  border: 1px solid rgba(107,66,38,.2); border-radius: var(--radius-lg);
  background: var(--color-off-white); color: var(--color-almost-black);
  font: inherit; cursor: pointer;
}
.prd-subcategory img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: var(--color-warm-beige); }
.prd-subcategory strong { font: 700 clamp(22px,2vw,30px) var(--font-display); padding: 22px 22px 8px; }
.prd-subcategory span { padding-inline: 22px; font-size: 14px; }
.prd-subcategory:hover, .prd-subcategory:focus-visible { border-color: var(--color-orange-accent); outline: 2px solid var(--color-orange-accent); outline-offset: 3px; }
@media (max-width: 768px) { .prd-subcategories { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } .prd-subcategory strong { font-size: 20px; padding: 16px 14px 6px; } .prd-subcategory span { padding-inline: 14px; } }
@media (max-width: 420px) { .prd-subcategories { grid-template-columns: 1fr; } }

/* Hover troca capa → fatia só onde existe ponteiro de verdade com hover real
   (mouse/trackpad). No touch, um botão separado troca a foto; o link continua abrindo
   a página do produto. */
@media (hover: hover) and (pointer: fine) {
  .prd-item:hover .prd-item__media--troca .prd-item__layer--alt,
  .prd-item:focus-within .prd-item__media--troca .prd-item__layer--alt { opacity: 1; }
}
.prd-item__desc {
  font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 500;
  line-height: 1.5; margin: var(--space-xs) 0 0;
  color: var(--color-almost-black); opacity: 0.72;
}
.prd-item__cat {
  position: absolute; top: var(--space-md); left: var(--space-md);
  z-index: 3;
  background: rgba(26,10,8,0.7);
  backdrop-filter: blur(8px);
  color: var(--color-off-white);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.prd-item__tag {
  position: absolute; top: var(--space-md); right: var(--space-md);
  z-index: 3;
  background: var(--color-orange-accent);
  color: var(--color-off-white);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.prd-item__name {
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  font-size: 1.15rem; line-height: 1.15; letter-spacing: -0.01em;
  margin: var(--space-md) 0 4px;
  color: var(--color-almost-black);
  /* -webkit-line-clamp corta a última linha no meio da palavra (testado:
     "Coberto com calda" virou "Coberto com cald…"), não serve pro requisito
     de nunca cortar no meio da palavra. Sem overflow:hidden a quebra de
     linha é sempre por palavra inteira; min-height reserva o espaço de 2
     linhas (o nome mais longo do acervo tem 34 caracteres e cabe nelas), e
     um nome raro que precisasse de 3 só deixa o card um pouco mais alto. */
  min-height: calc(2 * 1.15em);
}
.prd-item__sub {
  font-family: var(--font-body);
  font-size: 0.8rem; font-weight: 500;
  line-height: 1.3;
  color: var(--color-burgundy);
  opacity: 0.7;
  margin: 0;
  /* mesma razão do .prd-item__name: quebra de linha em vez de clamp, pra
     nunca cortar uma palavra no meio */
  min-height: 1.3em;
}
.prd-item.is-hidden { display: none; }

/* --- acréscimos da carga via JSON (28/08) --------------------------------- */

/* a régua de chips passa dos 7 rótulos no mobile: rola na horizontal em vez
   de quebrar em três fileiras */
@media (max-width: 700px) {
  .prd-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .prd-chips::-webkit-scrollbar { display: none; }
  .prd-chip { flex: 0 0 auto; }
}

.prd-chip__n {
  font-size: 12px;
  opacity: 0.6;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* 3 dos 165 produtos ainda não têm foto tratada: o card mostra a moldura em
   vez de puxar a foto de outro produto */
.prd-item__media--vazia {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(107,66,38,0.25);
}
.prd-item__media--vazia span {
  font-family: var(--font-body);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-burgundy); opacity: 0.55;
}

.prd-empty {
  grid-column: 1 / -1;
  padding: var(--space-3xl) 0;
  text-align: center;
  font-family: var(--font-body);
  color: var(--color-burgundy);
}

.prd-more {
  display: flex; justify-content: center;
  margin-top: var(--space-2xl);
}

/* --- faixas narrativas da listagem (§05 a §07 do catálogo) ------------------ */
a, button, input { touch-action: manipulation; }

/* §05: Como trabalhamos (faixa narrativa) */
.prd-craft { background: var(--surface-dark); color: var(--color-off-white); padding: var(--space-4xl) 0; }
.prd-craft__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}
@media (max-width: 900px) { .prd-craft__grid { grid-template-columns: 1fr; } }
.prd-craft__image {
  aspect-ratio: 4/5;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.prd-craft__image img { width: 100%; height: 100%; object-fit: cover; }
.prd-craft h2 { margin-bottom: var(--space-lg); }
.prd-craft__stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(251,245,239,0.15);
}
.prd-craft__stat strong {
  display: block;
  font-family: var(--font-display); font-weight: 900;
  font-size: 2.5rem; letter-spacing: -0.025em; line-height: 1;
  color: var(--color-orange-accent);
  margin-bottom: 4px;
}
.prd-craft__stat span {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
  color: var(--color-off-white); opacity: 0.6; line-height: 1.4;
}

/* §06: Onde encontrar (faixa B2C) */
.prd-where {
  background: var(--color-warm-beige);
  padding: var(--space-3xl) 0;
  position: relative; overflow: hidden;
}
.prd-where__inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
@media (max-width: 900px) { .prd-where__inner { grid-template-columns: 1fr; text-align: left; } }
.prd-where h2 {
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 0.9; letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}
.prd-where p {
  font-family: var(--font-body);
  font-size: 1.05rem; line-height: 1.5;
  color: var(--color-burgundy);
  max-width: 56ch; margin: 0;
}

/* §07: CTA empresas (faixa final) */
.prd-b2b {
  background: var(--surface-dark); color: var(--color-off-white);
  padding: var(--space-3xl) 0;
  border-top: 1px solid rgba(251,245,239,0.08);
}
.prd-b2b__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-xl); flex-wrap: wrap;
}
.prd-b2b__text { max-width: 60ch; }
.prd-b2b__text p.ta-eyebrow { color: var(--color-orange-accent); }
.prd-b2b__text h3 {
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  letter-spacing: -0.015em; margin: 4px 0 0;
  color: var(--color-off-white);
  text-wrap: balance;
}

/* Cartões de linha (§02): sem animação sob preferência de movimento
   reduzido. js/catalogo.js já corta o giro automático inteiro nesse caso
   (podeGirar() checa reduzMovimento() e a foto volta pra 0, a capa curada,
   assim que a preferência muda) — aqui é só a parte visual: a foto ainda
   troca ao clicar/tocar (ação explícita da pessoa), só a transição de
   opacidade fica instantânea; o hover deixa de varrer a galeria sozinho; e
   o cartão deixa de subir e ganhar sombra ao passar o mouse, o mesmo
   tratamento que .reveal* já recebe em animations.css. O botão de pausa
   some: sem giro automático rodando, não há o que pausar. */
@media (prefers-reduced-motion: reduce) {
  .prd-cat-card,
  .prd-cat-card__img,
  .prd-cat-card__dot {
    transition: none;
  }
  .prd-cat-card:hover {
    transform: none;
    box-shadow: none;
  }
  .prd-cat-card__pause {
    display: none;
  }
}