/* Detalhes do Produto v2.86 — Fiel ao Figma e PDF de Revisão */
.pd-page {
  background: #FCF8F3;
  color: #241919;
  font: 400 16px/1.5 Rubik, Arial, sans-serif;
  padding: 0 0 90px;
}
.pd-page * {
  box-sizing: border-box;
}
.pd-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 126px 20px 0;
}
.pd-page h1,
.pd-page h2,
.pd-page h3 {
  font-family: 'DIN Pro', Arial, sans-serif;
  color: #241919;
  letter-spacing: 0;
}

/* SESSÃO 1: MIGALHA DE PÃO E O PRODUTO */
.pd-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 14px/1.3 Rubik, Arial, sans-serif;
  color: #241919;
  margin: 12px 0 35px;
}
.pd-crumb a {
  color: #241919 !important;
  text-decoration: none;
  font-weight: 400;
}
.pd-crumb a:hover {
  text-decoration: underline;
}
.pd-crumb-sep {
  color: #241919;
}
.pd-crumb-current {
  color: #241919;
  font-weight: 600;
}

.pd-top {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(34px, 4.5vw, 68px);
  align-items: start;
}
.pd-pack {
  height: 460px;
  background: #F8EDE3;
  border-radius: 28px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.pd-pack::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: #F4DCC7;
  clip-path: ellipse(78% 73% at 50% 100%);
  border-radius: 0 0 28px 28px;
  z-index: 0;
}
.pd-pack > img:first-child {
  display: block;
  max-width: 76%;
  width: auto;
  height: 78%;
  max-height: 365px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 12px 12px rgba(40, 23, 13, 0.12));
}
.pd-decor {
  position: absolute !important;
  right: -32px;
  bottom: -27px;
  width: 110px !important;
  height: 110px !important;
  object-fit: contain;
  z-index: 3 !important;
}

/* Pequeno título acima do nome: #241919 com 50% de opacidade e peso regular */
.pd-eyebrow {
  color: rgba(36, 25, 25, 0.5) !important;
  font: 400 14px/1.2 Rubik, Arial, sans-serif !important;
  text-transform: uppercase;
  margin: 0 0 8px;
}
/* Nome do produto: 32px e 23px de espaço abaixo */
.pd-intro h1 {
  font-size: 32px !important;
  line-height: 1.12;
  color: #D52518;
  margin: 0 0 23px !important;
}
/* Texto descritivo com linha divisória e 30px de espaço acima e abaixo */
.pd-intro > p:not(.pd-eyebrow) {
  max-width: 470px;
  font-size: 16px;
  line-height: 1.45;
  color: #241919;
  margin: 0 0 30px !important;
  padding-bottom: 30px !important;
  border-bottom: 1px solid rgba(36, 25, 25, 0.12);
}

/* Títulos GRAMATURAS e EMBALAGENS em 14px */
.pd-intro h3 {
  font: 700 14px/1.2 'DIN Pro', Arial, sans-serif !important;
  color: #241919;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 10px !important;
}
#pd-label-packs {
  margin-top: 20px !important;
}
.pd-grams,
.pd-packs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* Tags estáticas sem stroke, fundo #FBEDE0, fonte 14px e tudo na cor #241919 */
.pd-static-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  background: #FBEDE0 !important;
  color: #241919 !important;
  padding: 7px 13px;
  border-radius: 7px;
  min-height: 34px;
  font: 400 14px/1 Rubik, Arial, sans-serif !important;
  white-space: nowrap;
}

/* Botão COMPRAR com fonte 16px e ícone do WhatsApp maior */
.pd-buy {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 470px;
  margin-top: 28px;
  padding: 12px 20px;
  text-decoration: none;
  background: #D52518;
  color: #FCF8F3;
  border-radius: 9px;
  font: 700 16px/1 'DIN Pro', Arial, sans-serif !important;
  text-align: center;
}
.pd-buy:hover {
  background: #b81d12;
}
.pd-whatsapp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pd-whatsapp-icon svg {
  width: 21px !important;
  height: 21px !important;
}

/* SESSÃO 2: SOBRE O PRODUTO */
.pd-about {
  margin-top: 86px;
}
/* Título principal 24px com linha separadora abaixo */
.pd-about h2 {
  font-size: 24px !important;
  color: #D52518;
  margin: 0 0 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(36, 25, 25, 0.12);
}
/* Títulos menores em 20px */
.pd-about h3 {
  font-size: 20px !important;
  color: #241919;
  margin: 26px 0 10px !important;
}
/* Textos em 16px */
.pd-about p {
  max-width: 1080px;
  font: 400 16px/1.55 Rubik, Arial, sans-serif !important;
  color: #241919;
  margin: 0;
}
.pd-desc-para {
  display: block;
}
.pd-desc-para + .pd-desc-para {
  margin-top: 16px;
}
.pd-all-line {
  display: block;
  margin-bottom: 4px;
}
.pd-all-strong {
  display: block;
  font-weight: 600 !important;
  color: #241919;
}

/* SESSÃO 3: TABELA NUTRICIONAL */
.pd-nutrition {
  margin-top: 80px;
}
.pd-nutrition h2 {
  font-size: 24px !important;
  color: #241919;
  margin: 0 0 18px !important;
}
.pd-nutri-layout {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(220px, 1fr);
  gap: clamp(35px, 5vw, 80px);
  align-items: center;
}
/* Seletor de gramatura em barra escura como no modelo */
.pd-nutri-choices {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #241919;
  color: #FCF8F3;
  border-radius: 8px;
  padding: 0 24px;
  min-height: 44px;
  margin-bottom: 6px;
}
.pd-nutri-choices > span {
  font: 400 16px/1 Rubik, Arial, sans-serif;
  color: #FCF8F3;
}
.pd-nutri-choices > div {
  display: flex;
  align-items: center;
  gap: 32px;
  background: transparent;
  padding: 0;
}
.pd-nutri-gram {
  position: relative;
  border: 0;
  background: transparent !important;
  color: #FCF8F3 !important;
  padding: 12px 6px;
  min-width: 0;
  cursor: pointer;
  font: 600 16px/1 Rubik, Arial, sans-serif;
}
.pd-nutri-gram.active {
  color: #FFCA26 !important;
}
.pd-nutri-gram.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #FFCA26;
  border-radius: 3px 3px 0 0;
}

.pd-nutri-sheet {
  padding: 0;
  background: transparent;
  border: 0;
  max-width: none;
}
.pd-nutrition-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.pd-nutrition-real {
  border-collapse: collapse;
  width: 100%;
  font: 400 16px/1.35 Rubik, Arial, sans-serif !important;
  color: #241919;
}
.pd-nutrition-real td,
.pd-nutrition-real tbody th {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(36, 25, 25, 0.1);
  font-size: 16px !important;
}
/* Coluna de componente com peso medium (500) e restante regular (400) */
.pd-nutrition-real tbody th {
  text-align: left;
  font-weight: 500 !important;
}
.pd-nutrition-real td {
  text-align: center;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums;
}
.pd-nutrition-real .pd-serving th,
.pd-nutrition-real .pd-serving td {
  background: transparent;
  font-weight: 500 !important;
  font-size: 16px !important;
}

/* Nota abaixo da tabela: 16px com cor #241919 em 50% */
#pd-nutrition-note {
  display: block;
  color: rgba(36, 25, 25, 0.5) !important;
  font: 400 16px/1.4 Rubik, Arial, sans-serif !important;
  margin-top: 14px;
}

/* Imagem do produto rotacionada e centralizada à tabela */
.pd-side-pack {
  width: 100%;
  max-width: 280px;
  max-height: 350px;
  object-fit: contain;
  justify-self: center;
  align-self: center;
  transform: rotate(-7deg);
  margin: 0;
  filter: drop-shadow(0 14px 18px rgba(36, 25, 25, 0.12));
}

/* SESSÃO 4: PREPARE DO JEITO CERTO */
.pd-preparacao {
  margin-top: 86px;
}
.pd-preparacao h2 {
  font-size: 24px !important;
  color: #241919;
  margin: 0 0 22px !important;
}
.pd-prep {
  margin: 0 0 44px;
}
/* Títulos dos aparelhos: peso regular (400) e tamanho 20px */
.pd-prep > h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 20px/1.2 Rubik, Arial, sans-serif !important;
  color: #241919;
  margin: 0 0 26px !important;
}
.pd-prep-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #F36C00;
  width: 24px;
  height: 24px;
}
.pd-prep-head-icon .pd-prep-svg {
  width: 24px;
  height: 24px;
  display: block;
}
.pd-prep-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.pd-prep-grid > div.pd-prep-step {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: transparent;
  border-radius: 0;
  padding: 18px 8px 10px 26px;
  min-height: 150px;
}
/* Números de fundo ajustados conforme o modelo */
.pd-prep-step::before {
  content: attr(data-step);
  position: absolute;
  z-index: -1;
  left: -4px;
  top: -6px;
  font: 700 104px/0.85 'DIN Pro', Arial, sans-serif;
  color: #F5E8DC;
  pointer-events: none;
}
.pd-prep-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: #F36C00;
  background: transparent;
  margin-bottom: 6px;
}
.pd-prep-icon .pd-prep-svg {
  width: 32px;
  height: 32px;
  color: #F36C00;
  display: block;
}
.pd-prep-icon .material-symbols-rounded {
  font-size: 28px;
  color: #F36C00;
}
/* Subtítulos dos passos em 20px e texto em 16px */
.pd-prep-grid b {
  display: block;
  font: 700 20px/1.2 'DIN Pro', Arial, sans-serif !important;
  color: #241919;
  margin: 4px 0 8px;
}
.pd-prep-grid p {
  margin: 0;
  font: 400 16px/1.35 Rubik, Arial, sans-serif !important;
  color: #241919;
}
.pd-storage {
  display: none !important;
}

/* SESSÃO 5: CONHEÇA OS PRODUTOS QUEIJO MAIS */
.pd-others {
  margin: 90px 0 0;
  text-align: center;
}
.pd-others h2 {
  font-size: 32px !important;
  color: #241919;
  margin: 0 0 12px !important;
}
.pd-others > p {
  font: 400 16px/1.42 Rubik, Arial, sans-serif !important;
  color: #241919;
  /* max-width: 720px; */
  margin: 0 auto 120px !important;
}
.pd-other-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.pd-other-card {
  position: relative;
  overflow: visible !important;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  padding: 200px 28px 26px !important;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  text-align: left;
  color: #241919;
}
/* Cruz (+) ao fundo dos cards dos produtos */
.pd-other-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  background-image: url('../assets/elemento-laranja.svg');
  background-repeat: no-repeat;
  background-size: 380px auto;
  background-position: calc(100% + 130px) calc(100% + 80px);
  opacity: 0.05;
  z-index: 0;
}
/* Foto do produto com a parte superior para fora do card */
.pd-other-pack {
  position: absolute !important;
  top: -58px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: 246px !important;
  width: auto !important;
  object-fit: contain !important;
  z-index: 2 !important;
}
.pd-other-body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pd-other-body h3 {
  font: 700 22px/1.15 'DIN Pro', Arial, sans-serif !important;
  color: #241919;
  margin: 0 0 10px !important;
}
.pd-other-body p {
  font: 400 15px/1.32 Rubik, Arial, sans-serif !important;
  color: #241919;
  margin: 0 0 18px !important;
}
.pd-other-body p strong {
  font-weight: 700;
}
.pd-other-btn {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  background: #D52518;
  color: #FCF8F3 !important;
  border-radius: 10px;
  text-decoration: none;
  font: 700 15px/1 'DIN Pro', Arial, sans-serif !important;
  text-transform: uppercase;
}
.pd-other-btn:hover {
  background: #b81d12;
}

/* RESPONSIVO TABLET E MOBILE */
@media (max-width: 900px) {
  .pd-container {
    padding-top: 106px;
  }
  .pd-top {
    gap: 30px;
  }
  .pd-pack {
    height: 380px;
  }
  .pd-nutri-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pd-prep-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .pd-page {
    padding-bottom: 60px;
  }
  .pd-container {
    padding: 98px 18px 0;
  }
  .pd-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .pd-pack {
    height: 350px;
  }
  .pd-decor {
    width: 74px !important;
    height: 74px !important;
    right: -8px;
    bottom: -16px;
  }
  .pd-nutri-choices {
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .pd-nutri-choices > div {
    gap: 18px;
  }
  .pd-nutrition-real td,
  .pd-nutrition-real tbody th {
    padding: 9px 6px;
    font-size: 14px !important;
  }
  .pd-side-pack {
    display: none;
  }
  .pd-prep-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pd-container {
    display: flex;
    flex-direction: column;
  }
  .pd-crumb { order: 1; }
  .pd-top { order: 2; }
  .pd-about { order: 3; }
  .pd-preparacao { order: 4; } /* Preparação sobe para a 4ª posição */
  .pd-nutrition { order: 5; }  /* Nutrição desce para a 5ª posição */
  .pd-others { order: 6; }
  /* CARROSSEL MOBILE - OUTROS PRODUTOS */
  .pd-other-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    
    /* Truque para o pacote (que tem top negativo) não ser cortado pelo overflow do carrossel */
    padding-top: 65px;
    margin-top: -65px;
    padding-bottom: 24px;
    
    scrollbar-width: none; /* Oculta a barra no Firefox */
    -webkit-overflow-scrolling: touch;
  }
  .pd-other-grid::-webkit-scrollbar {
    display: none; /* Oculta a barra no Chrome/Safari */
  }
  
  .pd-other-card {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: center;
  }

  /* ESTILOS DOS QUADRADINHOS DE NAVEGAÇÃO */
  .pd-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: -10px auto 40px; /* Posiciona logo abaixo dos cards */
  }
  .pd-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 0;
    padding: 0;
    background: #D52518;
    opacity: 0.28;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .pd-dot.is-active {
    opacity: 1;
  }
}