/* ============================================================
   _template-europeu — responsivo (desktop-first, igual à referência)
   Breakpoints: 991px (tablet), 767px (mobile L), 479px (mobile P)
   ============================================================ */

@media (max-width:991px){
  .heading{font-size:26px}
  .product-card-name-text{text-align:center;font-size:24px;padding-right:20px}

  /* product card -> 2 colunas: [imagem | nota] e depois USP/desconto/CTA full-width */
  .product-card-grid{grid-template-columns:1fr 1fr;gap:12px}
  .pc-cell-usp,.pc-cell-discount,.pc-cell-cta{grid-column:span 2}
  .pc-cell-discount{flex-direction:row;justify-content:center;gap:6px;flex-wrap:wrap}
  .product-image{max-width:200px}
  .product-card-mobile-cta{display:block}
  .cta-button-ranking{font-size:20px}
  .cta-button-review{font-size:22px}

  /* review: imagem em cima, linhas critério|barra abaixo */
  .review-grid{flex-direction:column;align-items:stretch}
  .review-grid-img{flex:none;max-width:200px;margin:0 auto}

  /* testimonials empilham */
  .customer-reviews{grid-template-columns:1fr}
}

@media (max-width:767px){
  body{font-size:16px}
  .review-container h2{font-size:24px}
  .review-container h3{font-size:20px}

  /* cada critério: emoji+texto acima, barra abaixo */
  .review-row{grid-template-columns:1fr;gap:4px}
}

@media (max-width:479px){
  .heading{font-size:22px}

  /* product card -> coluna única */
  .product-card-grid{grid-template-columns:1fr}
  .pc-cell-usp,.pc-cell-discount,.pc-cell-cta{grid-column:span 1}
  .ingredients-badges{gap:16px}
  .cta-button-ranking,.cta-button-review{font-size:18px;letter-spacing:1px}
}