/* HoneyKiss, página de produto.

   Boa parte daqui veio do bloco "CAIXA DE COMPRA" que estava estacionado em
   home.css desde que a seção #comprar saiu da home. Aquele comentário dizia
   que os estilos ficavam guardados esperando destino: é este. Os pedaços que
   não sobreviveram à mudança (.swatch e .pack, que trocavam fragrância e kit
   dentro de uma página só) foram apagados junto com o shop.js, porque agora
   cada produto tem a sua própria página e a troca virou navegação. */

.pdp{padding-block:clamp(1.5rem,4vw,3rem) clamp(3rem,6vw,5rem)}

/* Migalha de pão: numa página de produto alcançada por busca, é o único
   indício de onde a pessoa está dentro da loja. */
.pdp__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  font-size:var(--fs-micro);color:var(--color-muted);margin-bottom:1.5rem}
.pdp__crumbs a{color:var(--color-muted);transition:color var(--dur) var(--ease)}
.pdp__crumbs a:hover{color:var(--color-primary)}
.pdp__crumbs span[aria-current]{color:var(--color-ink)}

.offer__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
/* min-width:0 é obrigatório, não enfeite. Item de grid nasce com
   min-width:auto, e aí o conteúdo mais largo de dentro ALARGA a coluna em vez
   de rolar: o trilho do "Veja em ação" esticava a coluna de 714 para 834px,
   nunca transbordava e as duas setas ficavam desabilitadas para sempre. */
.offer__grid > *{min-width:0}

/* Galeria: foto principal e duas menores lado a lado, como na referência. */
.gallery__thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem;margin-top:.85rem}
.thumb{border:2px solid transparent;border-radius:var(--radius-md);overflow:hidden;padding:0;
  transition:border-color var(--dur) var(--ease)}
.thumb[aria-current="true"]{border-color:var(--color-primary)}

/* Quem fica preso é a GALERIA, não a coluna de compra.

   A razão é de altura: a coluna de compra passou a ser muito mais alta que a
   galeria depois que ganhou "costumam levar junto", "veja em ação" e as cinco
   abas. Elemento preso que é mais alto que a tela quase não gruda, porque
   quase nunca cabe inteiro; a galeria, que é baixa, gruda de verdade. O efeito
   é o da referência: as fotos acompanham a leitura da coluna e só voltam a
   subir quando o texto ao lado acaba.

   O topo de 110px dá folga para o cabeçalho, que reaparece ao rolar para cima
   e passaria por cima das fotos sem essa margem. */
.pdp__gallery{position:sticky;top:110px}
.buybox h1{font-family:var(--font-display);font-weight:600;line-height:1.1;
  font-size:clamp(2rem,1.4rem + 2.2vw,3rem)}

/* Avisos com marcador colorido, no lugar das antigas etiquetas em pílula. */
.pdp__flags{display:flex;flex-direction:column;gap:.45rem;margin-top:1.25rem}
.pdp__flags li{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-small)}
.pdp__flags i{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.pdp__flags i[data-cor="mel"]{background:var(--color-honey)}
.pdp__flags i[data-cor="verde"]{background:#3FA96A}

.pdp__tamanho{margin-top:.85rem;font-size:var(--fs-small);color:var(--color-muted)}
.pdp__rating{display:flex;align-items:center;gap:.45rem;margin-top:.5rem;font-size:var(--fs-small)}
.pdp__rating svg{width:15px;height:15px;fill:var(--color-primary);flex-shrink:0}
.pdp__desc{margin-top:1.25rem;color:var(--color-muted);line-height:1.7}

.price{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-block:1.25rem .35rem}
.price__now{font-family:var(--font-btn);font-size:2rem;font-weight:800;line-height:1}
/* Sem .price__was nem selo "economize": não existe preço anterior real.
   Ver o cabeçalho de js/data/products.js. */
.price__terms{font-size:var(--fs-small);color:var(--color-muted)}

/* Grade de variações. Cada peça é um LINK para a página daquele produto, não
   um botão: o destino é outro endereço, e link é o que permite abrir em nova
   aba, copiar o endereço e ser seguido por buscador. O atual não é link
   nenhum, para não existir clique que leva à página onde já se está. */
.flavors{margin-top:1.75rem}
.flavors__title{font-family:var(--font-btn);font-size:12px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;margin-bottom:.85rem}
.flavors__grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.6rem}
.flavor{display:block;border:2px solid transparent;border-radius:var(--radius-sm);
  overflow:hidden;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.flavor:hover{border-color:var(--color-border);transform:translateY(-2px)}
.flavor[aria-current="page"]{border-color:var(--color-ink)}
.flavor .frame{border-radius:calc(var(--radius-sm) - 3px)}

/* Nas peças pequenas o rótulo do placeholder não cabe: em 52px ele viraria
   borrão. Fica só o fundo estampado, que já sinaliza foto ausente. */
.frame--tile::after{display:none !important}

fieldset{border:0;padding:0;margin:1.75rem 0 0}
legend{padding:0;margin-bottom:.75rem;font-family:var(--font-btn);font-size:12px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase}

.qty-row{display:grid;grid-template-columns:auto 1fr;gap:.75rem;margin-top:1.5rem}
.qty{display:flex;align-items:center;border:2px solid var(--color-border);border-radius:var(--radius-pill);height:var(--btn-h)}
.qty button{width:44px;height:100%;display:grid;place-items:center;font-size:1.1rem}
.qty button:hover{color:var(--color-primary)}
.qty input{width:40px;height:100%;text-align:center;border:0;background:transparent;
  font-family:var(--font-btn);font-weight:700;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.pdp__status:empty{display:none}
.pdp__status{margin-top:.75rem;font-size:var(--fs-small);color:var(--color-muted)}

.trustrow{display:grid;gap:.85rem;margin-block:1.5rem}
.trustrow div{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-small);color:var(--color-ink)}
.trustrow svg{width:20px;height:20px;fill:none;stroke:var(--color-ink);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ---------- Compre junto ----------
   Título centralizado, miniaturas ligadas por "+" e um botão de largura cheia
   com o total no próprio rótulo, como na referência. O total vive no botão e
   não numa linha à parte: é a informação que decide o clique.

   Sem risco separando esta parte da anterior. A referência não tem nenhum
   nessa coluna; o espaçamento é que separa os blocos. */
.fbt{margin-top:2rem;text-align:center}
.fbt__title{font-family:var(--font-btn);font-size:1.0625rem;font-weight:700;
  margin-bottom:1rem}
.fbt__row{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:1.1rem}
.fbt__item{width:88px;flex-shrink:0}
.fbt__item .frame{border-radius:var(--radius-sm)}
.fbt__plus{font-family:var(--font-btn);font-size:1.1rem;color:var(--color-muted);flex-shrink:0}

/* A seção "Veja em ação" (trilho de vídeos verticais) foi retirada por não
   existir mídia 9:16. O CSS dela saiu junto para não ficar órfão; volta com a
   seção quando houver os vídeos. */

/* ---------- Abas retráteis ----------
   Reaproveitam .acc__* de components.css e o js/components/accordion.js, os
   mesmos das dúvidas da home. */
.pdp__tabs{margin-top:2rem}
/* Ingredientes em destaque: nome em negrito e a função logo depois, para dar
   para bater o olho e entender para que serve cada um. */
.pdp__ingredientes{margin:0 0 1rem;padding-left:1.1rem;list-style:disc}
.pdp__ingredientes li{margin-bottom:.5rem;line-height:1.6}

/* ---------- Depoimentos ----------
   Fundo creme e serifada dourada, como na referência. */
.deps{background:var(--color-cream);padding-block:clamp(3rem,6vw,4.5rem)}
.deps__title{font-family:var(--font-display);font-weight:700;text-align:center;
  color:var(--color-honey-ink);font-size:clamp(1.5rem,1.1rem + 1.6vw,2rem);margin-bottom:2.5rem}
.deps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,2rem)}
.dep{text-align:center;color:var(--color-honey-ink)}
.dep__foto{width:min(200px,100%);margin:0 auto 1rem}
.dep__foto .frame{border-radius:var(--radius-pill)}
/* Estrelas vazadas, e não preenchidas: enquanto não houver avaliação real,
   cinco estrelas cheias afirmariam uma nota que ninguém deu. A forma do bloco
   fica, o conteúdo entra com os dados verdadeiros. */
.dep__estrelas{display:flex;justify-content:center;align-items:center;gap:3px;margin-bottom:.6rem}
.dep__estrelas svg{width:14px;height:14px;fill:none;stroke:var(--color-gold-light);stroke-width:1.4}
.dep__estrelas .ph{margin-left:.4rem}
.dep__titulo{font-family:var(--font-btn);font-weight:700;font-size:var(--fs-small);margin-bottom:.5rem}
.dep__texto{font-size:13px;line-height:1.6;margin-bottom:.75rem}
.dep__nome{font-size:13px;font-weight:500}

/* ---------- Avaliações ----------
   Reaproveita os cartões .review de components.css, os mesmos da home. O que
   muda é só o arranjo: lá é um trilho que rola para o lado, aqui são colunas.

   O escalonamento vem de column-count, não de grid: com colunas o navegador
   distribui os cartões por altura sozinho, que é justamente o efeito de
   mosaico da referência. Em grid, cartões de alturas diferentes deixariam
   buracos alinhados. */
.prevs__faixa{background:var(--color-bar);padding-block:clamp(1.5rem,3vw,2.25rem)}
.prevs__title{font-family:var(--font-display);font-weight:600;text-align:center;
  font-size:clamp(1.375rem,1.1rem + 1.2vw,1.875rem);line-height:1.2}

.prevs{padding-block:clamp(2rem,4vw,3rem) clamp(3rem,6vw,4.5rem)}
.prevs__head{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:clamp(1.5rem,3vw,2rem)}
.prevs__resumo{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-small)}
/* Estrelas vazadas pelo mesmo motivo dos depoimentos: cinco cheias afirmariam
   uma nota que ninguém deu ainda. */
.prevs__stars{display:flex;gap:2px}
.prevs__stars svg{width:16px;height:16px;fill:none;stroke:var(--color-gold-light);stroke-width:1.4}

.prevs__grid{column-count:3;column-gap:clamp(1rem,2vw,1.5rem)}
.prevs__grid .review{display:inline-block;width:100%;
  margin-bottom:clamp(1rem,2vw,1.5rem);border-radius:var(--radius-md)}
.prevs__grid .review__body{padding:1.25rem}
.prevs__grid .review__name{font-size:1rem}
.prevs__grid .review__date{font-size:12px;color:var(--color-muted)}
.prevs__grid .review__text{font-size:14px;margin-top:.3rem}
.prevs__grid .review__stars svg{fill:none;stroke:var(--color-gold-light);stroke-width:1.4}

.prevs__status:empty{display:none}
.prevs__status{margin-top:1rem;font-size:13px;color:var(--color-muted);text-align:center}

/* ---------- Você também pode gostar ---------- */
.also{padding-block:clamp(3rem,6vw,4.5rem)}

@media (max-width:900px){
  .offer__grid{grid-template-columns:1fr;gap:2rem}
  /* Empilhado não existe coluna irmã para acompanhar: presa, a galeria
     cobriria o texto que vem logo abaixo dela. */
  .pdp__gallery{position:static}
  .flavors__grid{grid-template-columns:repeat(6,1fr)}
  .deps__grid{grid-template-columns:repeat(2,1fr);gap:2rem}
  .prevs__grid{column-count:2}
}
@media (max-width:520px){
  .flavors__grid{grid-template-columns:repeat(4,1fr)}
  .prevs__grid{column-count:1}
  .prevs__head{flex-direction:column;align-items:flex-start}
}