/* ============================================================
   BILHART'S — Página de produto (/produtos/:slug)
   Só o que é específico desta página. Fundo, tipografia, botões,
   .wrap, .sec, .eyebrow, .label, .arrows, .media e o sistema de
   animação vêm de tokens.css + style.css.
   ============================================================ */

.pd {
  /* altura da nav fixa, usada nas âncoras e nos sticky */
  --nav-h: 78px;
  /* respiro vertical das seções, mais curto que o padrão do site */
  --sec-y: clamp(52px, 6vw, 88px)
}

/* âncoras param abaixo da nav */
.pd [id] {
  scroll-margin-top: calc(var(--nav-h) + 14px)
}

/* o verde do WhatsApp é o mesmo já usado no botão flutuante (style.css) */
.btn-wa {
  --wa-green: #25D366;
  background: var(--wa-green);
  border-color: var(--wa-green);
  color: #FFF
}

.btn-wa:hover {
  background: #1FBF5B;
  border-color: #1FBF5B
}

.btn-wa svg {
  flex: none;
  margin-right: 2px;
  vertical-align: -3px
}

/* Filho de grid tem `min-width:auto` por padrão e não encolhe abaixo do
   min-content — foi isso que estourou a largura em 320px. */
.pdclaro-grid > *,
.pdcalc > *,
.pdficha-grid > *,
.pdfaq-grid > *,
.pdlead-box > *,
.pdmodos-grid > *,
.pddep-grid > * {
  min-width: 0
}

/* ================= 1. CAPA ================= */
.pdcapa {
  position: relative;
  min-height: clamp(520px, 90dvh, 760px);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 60px) 0 clamp(40px, 5vw, 72px);
  overflow: hidden
}

.pdcapa-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(.92) brightness(.72) contrast(1.04);
  transform: scale(1.04)
}

/* horizontal escurece o lado do texto; vertical funde a base no --bg
   para a próxima seção emendar sem costura */
.pdcapa-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg,
      rgba(var(--bg-rgb), .93) 0%,
      rgba(var(--bg-rgb), .70) 30%,
      rgba(var(--bg-rgb), .22) 56%,
      rgba(var(--bg-rgb), 0) 78%),
    linear-gradient(0deg,
      var(--bg) 1%,
      rgba(var(--bg-rgb), .10) 40%,
      rgba(var(--bg-rgb), .30) 100%)
}

.pdcapa-in {
  position: relative;
  z-index: 2
}

.pdcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 12.5px;
  color: var(--dim);
  margin-bottom: 18px
}

.pdcrumb a {
  color: var(--mut);
  transition: color .4s var(--ease)
}

.pdcrumb a:hover {
  color: var(--cream)
}

.pdcapa .eyebrow {
  margin-bottom: 14px
}

.pdcapa h1 {
  max-width: 16ch
}

.pdresumo {
  margin-top: 18px;
  max-width: 54ch;
  font-size: clamp(15px, 1.2vw, 17.5px);
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: #CFC7BE
}

.pdacoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px
}

/* ================= 2. FOTOS ================= */
.pdfotos {
  padding: var(--sec-y) 0 clamp(40px, 4vw, 64px)
}

.pdfotos .head-row {
  margin-bottom: clamp(24px, 2.6vw, 36px)
}

/* Trilho de largura total (não usa .wrap). Rola só no eixo X — o
   overflow-y:hidden mata o scroll vertical que reprovou a versão anterior.
   Sem scroll-snap: o laço infinito (§1 do produto.js) reposiciona o
   scrollLeft na virada e o snap do navegador brigaria com esse ajuste. */
.pdf4 {
  display: flex;
  gap: 20px;
  padding: 0 20px 16px;          /* o 16 é o respiro até a barra */
  overflow-x: auto;
  overflow-y: hidden;
  overflow-anchor: none;         /* senão o trilho abre deslocado */
  overscroll-behavior-x: contain;
  cursor: grab;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--tan) var(--bg)
}

/* Chrome, Edge e Safari não leem scrollbar-color: precisa das partes */
.pdf4::-webkit-scrollbar {
  height: 6px
}

.pdf4::-webkit-scrollbar-track {
  background: var(--bg)          /* mesmo fundo da página */
}

.pdf4::-webkit-scrollbar-thumb {
  background: var(--tan);
  border-radius: 3px
}

.pdf4::-webkit-scrollbar-thumb:hover {
  background: #D8AA71
}

.pdf4.drag {
  cursor: grabbing
}

/* 4 por tela: (100% - 3*20px) / 4 */
.pdf4 figure {
  flex: 0 0 calc(25% - 15px);
  aspect-ratio: 4/5;             /* as fotos são 1080×1350 */
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg3)
}

.pdf4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out)
}

.pdf4 figure:hover img {
  transform: scale(1.05)
}

.pdf4 figure:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 3px
}

/* ================= 3. PNG SOBRE FUNDO CLARO ================= */
.pdclaro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 3.6vw, 60px)
}

/* único bloco claro da página: a inversão é proposital */
.pdclaro-foto {
  padding: clamp(26px, 3vw, 48px);
  border-radius: var(--r);
  background: var(--cream)
}

.pdclaro-foto img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .28))
}

.pdclaro-txt h2 {
  margin-bottom: 20px;
  color: var(--cream)
}

.pdclaro-txt p {
  margin-bottom: 16px;
  max-width: 52ch
}

.pdclaro-txt p:last-child {
  margin-bottom: 0
}

/* ================= 4. VÍDEO ================= */
.pdvideo h2 {
  margin: 14px 0 clamp(24px, 2.6vw, 34px)
}

.pdvthumb {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg3);
  cursor: pointer
}

.pdvthumb>img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pdvthumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0
}

.pdvthumb .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  padding-left: 4px;
  border-radius: 50%;
  background: rgba(var(--bg-rgb), .62);
  backdrop-filter: blur(8px);
  color: var(--cream);
  transition: background .4s var(--ease), color .4s var(--ease)
}

.pdvthumb:hover .play {
  background: var(--tan);
  color: var(--bg)
}

.pdvtit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px clamp(18px, 2vw, 30px) 22px;
  background: linear-gradient(0deg, rgba(var(--bg-rgb), .92), transparent);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: var(--fw-light);
  color: var(--txt)
}

.pdvthumb:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 3px
}

/* ================= 5. UMA MESA, TRÊS USOS ================= */
.pdmodos .head-row {
  margin-bottom: clamp(24px, 2.6vw, 36px)
}

.pdmodos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px)
}

.pdmodo-foto {
  display: block;
  aspect-ratio: 4/5;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg3)
}

.pdmodo-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pdmodo-n {
  display: block;
  margin: 16px 0 8px;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--tan)
}

.pdmodo h3 {
  font-size: clamp(19px, 1.5vw, 22px);
  color: var(--cream);
  margin-bottom: 8px
}

.pdmodo p {
  font-size: 14.5px;
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--mut)
}

/* ================= 6. CABE NO MEU ESPAÇO ================= */
.pdmedidas h2 {
  margin: 14px 0 clamp(24px, 2.6vw, 34px)
}

.pdcalc {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(24px, 2.8vw, 40px);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r)
}

.pdcalc-ajuda {
  font-size: 14px;
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--mut);
  margin-bottom: 20px
}

.pdcalc-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px
}

/* ---- campos (usados também no formulário) ---- */
.pdcampo {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.pdcampo label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim)
}

.pdcampo input,
.pdcampo textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  background: transparent;
  color: var(--txt);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: var(--fw-light);
  transition: border-color .4s var(--ease)
}

.pdcampo textarea {
  resize: vertical;
  min-height: 76px
}

.pdcampo input:focus,
.pdcampo textarea:focus {
  outline: none;
  border-color: var(--tan)
}

.pdcampo input:focus-visible,
.pdcampo textarea:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 2px
}

.pdcalc-guia {
  font-size: 14.5px;
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--mut)
}

.pdcalc-topo {
  padding: 16px 18px;
  margin-bottom: 18px;
  border: 1px solid rgba(var(--tan-rgb), .45);
  border-radius: var(--r);
  background: rgba(var(--tan-rgb), .07)
}

.pdcalc-topo b {
  display: block;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: var(--fw-medium);
  color: var(--cream);
  margin-bottom: 4px
}

.pdcalc-topo span {
  font-size: 13.5px;
  font-weight: var(--fw-light);
  color: var(--mut)
}

.pdcalc-lista {
  list-style: none
}

.pdcalc-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: var(--fw-light);
  color: var(--mut)
}

.pdcalc-lista li b {
  font-weight: var(--fw-medium);
  color: var(--txt)
}

.pdcalc-lista li em {
  font-style: normal;
  margin-left: auto;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim)
}

.pdcalc-lista li.ok b {
  color: var(--cream)
}

.pdcalc-lista li.ok .mk {
  color: var(--tan)
}

.pdcalc-lista li.nao {
  opacity: .5
}

.pdcalc-lista .mk {
  flex: none;
  width: 14px;
  text-align: center;
  color: var(--dim)
}

/* ================= 7. FICHA TÉCNICA ================= */
.pdficha h2 {
  margin: 14px 0 clamp(24px, 2.6vw, 34px)
}

.pdficha-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start
}

.pdbloco+.pdbloco {
  margin-top: clamp(26px, 2.8vw, 40px)
}

.pdbloco h3 {
  color: var(--tan);
  font-size: 15px;
  font-weight: 700;
  /* tracking menor: no corpo maior a .label padrão fica espaçada demais */
  letter-spacing: .16em;
  margin-bottom: 14px
}

.pdlista {
  list-style: none
}

.pdlista li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: var(--fw-light);
  line-height: 1.65;
  color: var(--txt)
}

.pdcheck {
  flex: none;
  margin-top: 5px;
  color: var(--tan)
}

.pdmais {
  flex: none;
  width: 13px;
  margin-top: 1px;
  text-align: center;
  color: var(--dim)
}

.pdlista-pv li b {
  color: var(--cream);
  font-weight: var(--fw-medium)
}

.pdlista-pv li span {
  color: var(--mut)
}

.pdnota {
  margin-top: 12px;
  max-width: 52ch;
  font-size: 14.5px;
  font-weight: var(--fw-light);
  line-height: 1.75;
  color: var(--mut)
}

.pdobs {
  margin-top: 14px;
  max-width: 52ch;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--dim)
}

/* o recorte aqui não tem moldura: é só a peça sobre o fundo */
.pdficha-foto {
  position: sticky;
  top: calc(var(--nav-h) + 20px)
}

.pdficha-foto img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .5))
}

/* ================= 8. A MARCA DOS CAMPEÕES ================= */
.pddep h2 {
  margin: 14px 0 clamp(24px, 2.6vw, 34px)
}

.pddep-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 24px)
}

.pddep-card {
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden
}

.pddep-foto {
  display: block;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--bg3)
}

.pddep-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%
}

.pddep-card q {
  display: block;
  padding: 18px 18px 0;
  font-size: 14.5px;
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--txt)
}

.pddep-card b {
  padding: 16px 18px 0;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--cream)
}

.pddep-card small {
  padding: 3px 18px 18px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim)
}

/* ================= 9. ANTES DE DECIDIR ================= */
.pdfaq-grid {
  display: grid;
  grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start
}

.pdfaq-lado {
  position: sticky;
  top: calc(var(--nav-h) + 24px)
}

.pdfaq-lado h2 {
  margin: 14px 0 16px
}

.pdfaq-lista details {
  border-bottom: 1px solid var(--line);
  /* a altura é animada por JS (§7 do produto.js): sem o clip o texto
     escaparia para fora do item enquanto a sanfona abre */
  overflow: hidden
}

.pdfaq-lista summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: var(--fw-medium);
  letter-spacing: -.015em;
  color: var(--cream)
}

.pdfaq-lista summary::-webkit-details-marker {
  display: none
}

.pdfaq-lista summary i {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line2);
  border-radius: 50%;
  font-style: normal;
  font-size: 15px;
  color: var(--tan);
  transition: transform .4s var(--ease), border-color .4s var(--ease)
}

.pdfaq-lista details[open] summary i {
  transform: rotate(45deg);
  border-color: var(--tan)
}

.pdfaq-lista summary:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 3px
}

.pdfaq-resp {
  padding: 0 0 20px
}

.pdfaq-resp p {
  max-width: 62ch;
  font-size: 14.5px;
  font-weight: var(--fw-light);
  line-height: 1.8;
  color: var(--mut)
}

.pdfaq-resp a {
  color: var(--tan);
  border-bottom: 1px solid rgba(var(--tan-rgb), .4)
}

/* ================= 10. SEM COMPROMISSO ================= */
.pdlead-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  padding: clamp(26px, 3vw, 48px);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r)
}

.pdlead-txt h2 {
  margin: 14px 0 16px;
  color: var(--cream)
}

.pdlead-confia {
  list-style: none;
  margin-top: 22px
}

.pdlead-confia li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  font-size: 13.5px;
  font-weight: var(--fw-light);
  color: var(--mut)
}

.pdlead-confia li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1px;
  background: var(--tan)
}

.pdlead-form form {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.pdlead-btn {
  width: 100%;
  justify-content: center;
  margin-top: 4px
}

.pdlead-ok {
  padding: 24px 0
}

.pdlead-ok b {
  display: block;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: var(--fw-medium);
  color: var(--cream);
  margin-bottom: 10px
}

.pdlead-ok p {
  font-size: 14.5px;
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--mut);
  margin-bottom: 16px
}

.pdlead-ok a {
  color: var(--tan);
  border-bottom: 1px solid rgba(var(--tan-rgb), .4)
}

/* ================= 11. MODELOS DA MESMA LINHA ================= */
.pdrel .head-row {
  margin-bottom: clamp(24px, 2.6vw, 36px)
}

.pdrel .pgrid {
  grid-template-columns: repeat(4, 1fr)
}

/* ================= BARRA FIXA DO MOBILE ================= */
.pdbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: none;              /* só existe no mobile, ver media query */
  align-items: center;
  gap: 14px;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: rgba(var(--bg-rgb), .94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .5s var(--ease-out)
}

.pdbar.on {
  transform: none
}

/* o texto cede espaço; o botão não encolhe nem quebra linha */
.pdbar .nm {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.pdbar .nm b {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--cream);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pdbar .nm span {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pdbar .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 11px 16px;
  font-size: 12.5px
}

/* ================= LIGHTBOX ================= */
.pdlb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(44px, 6vw, 72px) clamp(12px, 3vw, 40px);
  background: rgba(6, 5, 5, .95);
  backdrop-filter: blur(10px)
}

.pdlb[hidden] {
  display: none
}

.pdlb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r)
}

.pdlb-x {
  position: absolute;
  top: clamp(12px, 2vw, 22px);
  right: clamp(12px, 3vw, 40px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  background: transparent;
  color: var(--cream);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease)
}

.pdlb-x:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--bg)
}

.pdlb-x:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 2px
}

body.pdlb-on {
  overflow: hidden
}

/* ================= RESPONSIVO ================= */
@media(max-width:1100px) {

  /* 3 por tela: (100% - 2*20px) / 3 */
  .pdf4 figure {
    flex-basis: calc(33.333% - 13.34px)
  }

  .pdficha-grid,
  .pdfaq-grid {
    grid-template-columns: 1fr
  }

  .pdficha-foto,
  .pdfaq-lado {
    position: static
  }

  .pdficha-foto {
    order: -1;
    max-width: 520px;
    margin-inline: auto
  }

  .pddep-grid,
  .pdrel .pgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:900px) {

  .pdclaro-grid,
  .pdcalc,
  .pdlead-box {
    grid-template-columns: 1fr
  }
}

@media(max-width:860px) {

  /* 2 por tela: (100% - 20px) / 2 */
  .pdf4 figure {
    flex-basis: calc(50% - 10px)
  }

  .pdmodos-grid {
    grid-template-columns: 1fr
  }

  .pdbar {
    display: flex
  }

  /* o rodapé não pode ficar coberto pela barra */
  footer {
    padding-bottom: 86px
  }

  /* o botão flutuante do WhatsApp colidiria com a barra fixa: nesta página
     ele sai de cena no mobile, já que a barra oferece a mesma ação */
  .wa {
    display: none
  }
}

@media(max-width:560px) {

  /* 1 por tela, com espia da seguinte */
  .pdf4 figure {
    flex-basis: calc(100% - 60px)
  }

  .pdcalc-campos {
    grid-template-columns: 1fr
  }

  .pddep-grid,
  .pdrel .pgrid {
    grid-template-columns: 1fr
  }

  .pdacoes .btn {
    flex: 1 1 auto;
    justify-content: center
  }
}

/* ================= MOVIMENTO REDUZIDO ================= */
@media(prefers-reduced-motion:reduce) {

  .pdf4 figure:hover img,
  .pdfaq-lista details[open] summary i {
    transform: none
  }

  .pdbar {
    transition: none
  }
}