/* =========================================================================
   VYTAPUR — PRODUCT.CSS
   Styles de la page produit (le cœur de la conversion).
   Mobile-first : on stylise d'abord pour mobile, puis on ajuste desktop.
   ========================================================================= */

.vp-container--narrow { max-width: var(--vp-container-narrow); margin-inline: auto; padding-inline: var(--vp-space-4); }
.vp-text-center { text-align: center; }

.vp-eyebrow {
  font-family: var(--vp-font-display);
  font-size: var(--vp-fs-xs);
  font-weight: var(--vp-fw-semibold);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--vp-gold);
  margin-bottom: var(--vp-space-2);
}

.vp-section-title {
  font-size: var(--vp-fs-2xl);
  margin-bottom: var(--vp-space-2);
}

.vp-section-sub {
  color: var(--vp-text-muted);
  font-size: var(--vp-fs-base);
  margin-bottom: var(--vp-space-6);
}

.vp-stars { color: var(--vp-gold); letter-spacing: 2px; }

/* -------------------------------------------------------------------------
   1. HERO PRODUIT
   ------------------------------------------------------------------------- */

.vp-product-hero { padding: var(--vp-space-8) 0; background: var(--vp-cream); }

.vp-product-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vp-space-6);
  align-items: center;
}

.vp-product-hero__image { text-align: center; }

.vp-product-hero__img {
  max-width: 320px;
  margin-inline: auto;
  border-radius: var(--vp-radius-lg);
  box-shadow: var(--vp-shadow-lg);
}

.vp-product-hero__placeholder {
  width: 220px; height: 220px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--vp-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 64px;
  box-shadow: var(--vp-shadow-md);
}

/* --- Galerie produit (image principale + miniatures) --- */
.vp-gallery { max-width: 380px; margin-inline: auto; }

.vp-gallery__main {
  position: relative;
  border-radius: var(--vp-radius-lg);
  overflow: hidden;
  box-shadow: var(--vp-shadow-lg);
  background: var(--vp-white);
  aspect-ratio: 1 / 1;
}

.vp-gallery__main-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.vp-gallery__main-img[hidden] { display: none; }

.vp-gallery__thumbs {
  display: flex;
  gap: var(--vp-space-2);
  margin-top: var(--vp-space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.vp-gallery__thumb {
  width: 56px; height: 56px;
  border-radius: var(--vp-radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--vp-white);
  opacity: 0.7;
  transition: opacity var(--vp-transition), border-color var(--vp-transition);
}

.vp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vp-gallery__thumb:hover { opacity: 1; }

.vp-gallery__thumb.is-active {
  opacity: 1;
  border-color: var(--vp-green-vital);
}

.vp-product-hero__title { font-size: var(--vp-fs-3xl); margin-bottom: var(--vp-space-3); }

.vp-product-hero__accroche-ar {
  font-family: var(--vp-font-ar-display);
  font-size: var(--vp-fs-lg);
  color: var(--vp-green-forest);
  margin-bottom: var(--vp-space-2);
}

.vp-product-hero__accroche-fr {
  color: var(--vp-text-muted);
  font-size: var(--vp-fs-base);
  margin-bottom: var(--vp-space-4);
}

.vp-product-hero__rating {
  display: flex; align-items: center; gap: var(--vp-space-2);
  margin-bottom: var(--vp-space-5);
  font-size: var(--vp-fs-sm);
  color: var(--vp-text-muted);
}

.vp-btn--lg { padding: var(--vp-space-4) var(--vp-space-8); font-size: var(--vp-fs-lg); }
.vp-btn--full { width: 100%; }

.vp-hero-mini-trust {
  list-style: none; margin: var(--vp-space-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--vp-space-4);
  font-size: var(--vp-fs-xs);
  color: var(--vp-text-muted);
}

/* -------------------------------------------------------------------------
   2. OFFRES (1 / 2 / 3 unités)
   ------------------------------------------------------------------------- */

.vp-offers { padding: var(--vp-space-10) 0; }

.vp-offers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vp-space-4);
  max-width: 900px;
  margin-inline: auto;
}

@media (min-width: 700px) {
  .vp-offers__grid { grid-template-columns: repeat(3, 1fr); }
}

.vp-offer-card { display: block; cursor: pointer; position: relative; }
.vp-offer-card input { position: absolute; opacity: 0; }

.vp-offer-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--vp-space-5);
  border: 2px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
  background: var(--vp-white);
  transition: border-color var(--vp-transition), transform var(--vp-transition), box-shadow var(--vp-transition);
}

/* Seule la carte RÉELLEMENT cochée est mise en évidence (bordure verte + ombre).
   On utilise ~ (frère suivant, peu importe la distance) plutôt que +
   car la carte "featured" a un badge intercalé entre l'input et le contenu. */
.vp-offer-card input:checked ~ .vp-offer-card__inner {
  border-color: var(--vp-green-vital);
  box-shadow: var(--vp-shadow-md);
  transform: translateY(-2px);
}

/* La carte "featured" garde juste son badge doré ; sa bordure suit la même règle que les autres. */

.vp-offer-card__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--vp-gold); color: var(--vp-white);
  font-size: 11px; font-weight: var(--vp-fw-semibold);
  padding: 3px 12px; border-radius: var(--vp-radius-full);
  white-space: nowrap; z-index: 2;
}

.vp-offer-card__qty { font-family: var(--vp-font-display); font-weight: var(--vp-fw-semibold); color: var(--vp-text); margin-bottom: var(--vp-space-2); }
.vp-offer-card__price { font-family: var(--vp-font-display); font-size: var(--vp-fs-3xl); font-weight: var(--vp-fw-extra); color: var(--vp-green-forest); }
.vp-offer-card__price small { font-size: var(--vp-fs-base); font-weight: var(--vp-fw-medium); }
.vp-offer-card__shipping { font-size: var(--vp-fs-xs); color: var(--vp-text-muted); margin-top: var(--vp-space-2); }
.vp-offer-card__shipping--free { color: var(--vp-success); font-weight: var(--vp-fw-semibold); }
.vp-offer-card__unit { font-size: var(--vp-fs-xs); color: var(--vp-text-muted); margin-top: var(--vp-space-1); }

.vp-offer-card__save {
  display: inline-block; margin-top: var(--vp-space-2);
  background: var(--vp-promo-bg); color: var(--vp-promo-text);
  font-size: var(--vp-fs-xs); font-weight: var(--vp-fw-semibold);
  padding: 2px 10px; border-radius: var(--vp-radius-sm);
}

/* -------------------------------------------------------------------------
   3. FORMULAIRE COD
   ------------------------------------------------------------------------- */

.vp-cod-form-section { padding: var(--vp-space-8) 0; background: var(--vp-cream); }

.vp-cod-form-card {
  background: var(--vp-white);
  border-radius: var(--vp-radius-lg);
  padding: var(--vp-space-6);
  box-shadow: var(--vp-shadow-md);
}

.vp-form-row { margin-bottom: var(--vp-space-4); }

.vp-form-row label {
  display: block;
  font-family: var(--vp-font-display);
  font-size: var(--vp-fs-sm);
  font-weight: var(--vp-fw-medium);
  color: var(--vp-ink);
  margin-bottom: var(--vp-space-2);
}

.vp-form-row input, .vp-form-row textarea {
  width: 100%;
  padding: var(--vp-space-3);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-sm);
  font-family: var(--vp-font-body);
  font-size: var(--vp-fs-base);
  color: var(--vp-ink);
  background: var(--vp-white);
}

.vp-form-row input:focus, .vp-form-row textarea:focus {
  outline: none;
  border-color: var(--vp-green-vital);
}

.vp-cod-form__summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--vp-space-4);
  background: var(--vp-cream);
  border-radius: var(--vp-radius-sm);
  margin-bottom: var(--vp-space-5);
  font-family: var(--vp-font-display);
}

.vp-cod-form__summary strong { color: var(--vp-green-forest); font-size: var(--vp-fs-xl); }

.vp-cod-form__reassure {
  text-align: center;
  font-size: var(--vp-fs-xs);
  color: var(--vp-text-muted);
  margin-top: var(--vp-space-4);
  margin-bottom: 0;
}

.vp-cod-form__success {
  text-align: center;
  padding: var(--vp-space-6);
  background: var(--vp-success-bg);
  border-radius: var(--vp-radius-lg);
  color: var(--vp-success);
}

/* -------------------------------------------------------------------------
   4. BÉNÉFICES
   ------------------------------------------------------------------------- */

.vp-benefits { padding: var(--vp-space-10) 0; }

.vp-benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vp-space-5);
}

@media (min-width: 700px) {
  .vp-benefits__grid { grid-template-columns: repeat(3, 1fr); }
}

.vp-benefit-card {
  text-align: center;
  padding: var(--vp-space-5);
  background: var(--vp-cream);
  border-radius: var(--vp-radius-lg);
}

.vp-benefit-card__icon { font-size: 32px; display: block; margin-bottom: var(--vp-space-3); }
.vp-benefit-card__title { font-size: var(--vp-fs-lg); margin-bottom: var(--vp-space-2); }
.vp-benefit-card__text { font-size: var(--vp-fs-sm); color: var(--vp-text-muted); margin: 0; }

/* -------------------------------------------------------------------------
   5. INGRÉDIENTS
   ------------------------------------------------------------------------- */

.vp-ingredients { padding: var(--vp-space-10) 0; background: var(--vp-cream); }

.vp-ingredients__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vp-space-4);
  max-width: 700px;
  margin-inline: auto;
}

@media (min-width: 600px) {
  .vp-ingredients__grid { grid-template-columns: repeat(2, 1fr); }
}

.vp-ingredient-card {
  display: flex;
  align-items: flex-start;
  gap: var(--vp-space-3);
  background: var(--vp-white);
  padding: var(--vp-space-4);
  border-radius: var(--vp-radius-md);
}

.vp-ingredient-card__dot {
  width: 10px; height: 10px;
  background: var(--vp-green-vital);
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.vp-ingredient-card__name { font-size: var(--vp-fs-base); margin-bottom: 2px; }
.vp-ingredient-card__role { font-size: var(--vp-fs-sm); color: var(--vp-text-muted); margin: 0; }

.vp-ingredients__free-from {
  text-align: center;
  margin-top: var(--vp-space-6);
  font-size: var(--vp-fs-sm);
  color: var(--vp-green-forest);
  font-weight: var(--vp-fw-medium);
}

/* -------------------------------------------------------------------------
   6. AVIS
   ------------------------------------------------------------------------- */

.vp-reviews { padding: var(--vp-space-10) 0; }

.vp-reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vp-space-4);
}

@media (min-width: 700px) {
  .vp-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}

.vp-review-card {
  padding: var(--vp-space-5);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-lg);
}

.vp-review-card__text { font-size: var(--vp-fs-base); color: var(--vp-text); margin: var(--vp-space-2) 0; font-style: italic; }
.vp-review-card__author { font-family: var(--vp-font-display); font-size: var(--vp-fs-sm); font-weight: var(--vp-fw-semibold); color: var(--vp-green-forest); margin: 0; }

/* -------------------------------------------------------------------------
   7. FAQ
   ------------------------------------------------------------------------- */

.vp-faq { padding: var(--vp-space-10) 0; background: var(--vp-cream); }

.vp-faq__list { display: flex; flex-direction: column; gap: var(--vp-space-3); }

.vp-faq-item {
  background: var(--vp-white);
  border-radius: var(--vp-radius-md);
  padding: var(--vp-space-4) var(--vp-space-5);
}

.vp-faq-item summary {
  font-family: var(--vp-font-display);
  font-weight: var(--vp-fw-semibold);
  cursor: pointer;
  color: var(--vp-green-forest);
}

.vp-faq-item p { margin: var(--vp-space-3) 0 0; color: var(--vp-text-muted); font-size: var(--vp-fs-sm); }

/* -------------------------------------------------------------------------
   8. CTA FINAL
   ------------------------------------------------------------------------- */

.vp-final-cta {
  padding: var(--vp-space-10) 0;
  background: linear-gradient(150deg, var(--vp-green-forest), var(--vp-green-deep));
  color: var(--vp-white);
}

.vp-final-cta__title { color: var(--vp-white); font-size: var(--vp-fs-3xl); }
.vp-final-cta__sub { font-family: var(--vp-font-ar-display); font-size: var(--vp-fs-lg); color: var(--vp-gold-light); margin-bottom: var(--vp-space-5); }
.vp-final-cta__whatsapp { margin-top: var(--vp-space-5); font-size: var(--vp-fs-sm); opacity: 0.85; }
.vp-final-cta__whatsapp a { color: var(--vp-gold-light); font-weight: var(--vp-fw-semibold); }

/* -------------------------------------------------------------------------
   DESKTOP : hero en 2 colonnes
   ------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .vp-product-hero__grid { grid-template-columns: 1fr 1.2fr; }
  .vp-product-hero__image { order: 1; }
  .vp-product-hero__content { order: 2; }
}

/* Espace en bas de page sur mobile pour ne pas être masqué par le sticky CTA */
@media (max-width: 899px) {
  .vp-product-page { padding-bottom: 70px; }
}