/* Product Page Styles */
.product-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.product-gallery {
  display: flex;
  flex-direction: column;
}

.main-image-container {
  margin-bottom: 1rem;
}

#main-image {
  /* FIX : l'image portait son propre cadre (border + radius) À L'INTÉRIEUR
     de la carte .main-image-container (glass.css) qui a déjà bordure,
     radius et overflow:hidden → double cadre décalé, coins « décentrés ».
     Le cadre appartient au conteneur ; l'image est pleine, en block
     (l'inline créait un jeu de ligne de base qui décalait le bas). */
  display: block;
  width: 100%;

  /* FIX bandes vides : la combinaison `max-height: 500px` + `object-fit:
     contain` donnait à la BOÎTE de l'élément un ratio (522/500 = 1,04) qui ne
     correspondait plus à celui de la photo dès que le plafond s'activait.
     `contain` centrait alors l'image dedans en laissant apparaître le fond
     translucide du cadre sur les côtés : 11px sur une image carrée, jusqu'à
     94px sur un portrait 2:3. Invisible sur les photos à fond blanc, criant
     sur les photos colorées. Les images paysage n'étaient jamais concernées
     (leur hauteur n'atteint pas le plafond).
     Sans plafond de hauteur, la boîte reprend exactement le ratio de l'image :
     il n'y a plus rien à « contenir », donc plus aucune bande, quel que soit
     le format — et sans jamais rogner. Le cadre s'adapte à la photo, et non
     l'inverse.
     NB : une photo très allongée en hauteur produira donc un cadre haut. La
     lightbox (clic sur l'image) reste en `contain`, elle n'est pas affectée. */
  height: auto;
}

.thumbnail-container {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  /* FIX : l'ombre des vignettes (active/hover) était coupée net par
     l'overflow du conteneur → marge intérieure pour lui laisser la place
     (l'ombre porte ~6px d'offset + 16px de flou vers le bas). */
  padding: 8px 8px 20px;
}

.thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.thumbnail:hover,
.thumbnail.active {
  border-color: #007bff;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.product-header h1 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.product-category {
  margin-bottom: 1rem;
}

.category-tag {
  display: inline-block;
  background: #f8f9fa;
  color: #6c757d;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.product-stock {
  margin-bottom: 1rem;
  font-weight: 500;
}

.product-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.product-options {
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

.color-options h3,
.option-selectors h3 {
  margin-bottom: 0.5rem;
  color: #333;
}

.color-selector {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.color-option {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ddd;
  transition: transform 0.2s ease;
}

.color-option:hover {
  transform: scale(1.1);
}

/* Carte option — harmonisée avec le conteneur produit (mêmes rayons,
   bordure et ombre douces). Remplace l'ancien style inline du pug
   (border #e6e6e6 / radius 4px) et le hover gris plein. */
.option-group {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.option-group:hover {
  background-color: #fff;
  border-color: #d6d9de;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Tables internes des options (en-tête prix, description, stock, quantité) */
.option-group .option-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.option-group .option-table th,
.option-group .option-table td {
  padding: 4px 0;
  font-size: 0.95rem;
}

.option-group .option-table th {
  font-size: 1rem;
}

/* La pastille couleur reste alignée à droite sans casser la ligne */
.option-group .color-option {
  display: inline-block;
  margin-left: auto;
}

.option-details {
  display: flex;
  gap: 1rem;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: #666;
}

.quantity-selector h3 {
  margin-bottom: 0.5rem;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}


#quantity-input {
  width: 60px;
  padding: 0.5rem;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.add-to-cart {
  margin-top: 1rem;
}


/* Badges */
.product-badges {
  display: flex;
  flex-direction: row;
  /* FIX : 4 badges × 220px + gaps ≈ 930px sans wrap → débordement entre
     769px (fin du mode colonne) et ~950px, réparti des DEUX côtés par le
     justify-content:center du parent (partie gauche inatteignable).
     Le wrap fait passer les cartes en 2×2 puis 1 colonne naturellement. */
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  gap: 1rem;
}

.badge {
  display: flex;
  flex-direction: column;
  width: 220px;
  align-items: flex-start;
  /* padding: 1rem; */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.badge-icon {
  font-size: 1.4rem;
  color: #007bff;
  margin-bottom: 0.5rem;
}

.badge-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.25rem;
}

.badge-description {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
}


/* Responsive Design */
@media (max-width: 768px) {
  .product-container {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .product-header h1 {
    font-size: 1.5rem;
  }

  .product-price .discounted-price {
    font-size: 1.2rem;
  }

  .thumbnail-container {
    justify-content: flex-start;
  }

  .thumbnail {
    width: 60px;
    height: 60px;
  }

  .product-badges {
    flex-direction: column;
  }

  .badge {
    width: 100%;

  }
}

/* Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-container {
  animation: fadeIn 0.5s ease-out;
}





/* Dark mode */
@media (prefers-color-scheme: dark) {
  .product-container {
    background: #1c1f24;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #2d323b;
  }

  .thumbnail {
    border-color: #3a404a;
  }

  .thumbnail:hover,
  .thumbnail.active {
    border-color: #4da6ff;
  }

  .product-header h1 {
    color: #f0f4f8;
  }

  .product-category .category-tag {
    background: #2d323b;
    color: #bdc3c7;
  }

  .product-description {
    color: #dfe6e9;
  }

  /* Pricing */
  .original-price {
    color: #7d8b9b;
  }

  .discounted-price {
    color: #ff6b6b;
  }

  .regular-price {
    color: #f0f4f8;
  }

  /* .discount-badge {
    background: #e74c3c;
    color: white;
  } */

  /* Options & controls */
  .color-option {
    border-color: #3a404a;
  }

  .color-option:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px rgba(77, 166, 255, 0.3);
  }

  .option-group {
    background: #252930;
    border: 1px solid #2d323b;
  }

  .option-group:hover {
    background-color: #2a2f37;
    border-color: #3a404a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  .option-details {
    color: #bdc3c7;
  }

  .quantity-controls {
    border: 1px solid #2d323b;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    background: #1c1f24;
  }

  #quantity-input {
    background: #1c1f24;
    border: 1px solid #3a404a;
    color: #f0f4f8;
  }

  /* NB : `.add-to-cart` est le conteneur du bouton, pas le bouton —
     l'ancien padding ici faisait déborder le fond autour du CTA en
     mode sombre. Le bouton `.btn-add-to-cart` gère ses propres
     styles (theme.css / glass.css). */

  /* Stock status */
  .product-stock {
    color: #bdc3c7;
  }

  /* Responsive adjustments in dark mode */
  @media (max-width: 768px) {
    .product-container {
      background: #1c1f24;
    }

    .thumbnail {
      width: 50px;
      height: 50px;
    }
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .product-badges {
    padding: 1rem;
  }

  .badge {
    background: #2d323b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  .badge:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }

  .badge-icon {
    color: #4da6ff;
  }

  .badge-title {
    color: #f0f4f8;
  }

  .badge-description {
    color: #dfe6e9;
  }
}
/* --------------------------------------------------------------------------
   Prix au kg (articles vendus au poids, product.soldByKg)
   Note globale sous Dimension (p) et ligne par option dans les tableaux
   (span). Volontairement plus visible que du texte grisé : c'est une info
   d'achat pour le client. Le prix affiché tient compte de la remise en cours.
   -------------------------------------------------------------------------- */
.price-per-kg {
  display: inline-block;
  font-weight: 700;
  font-size: 0.95em;
  color: var(--holi-violet, #a855f7);
  background: rgba(168, 85, 247, 0.10);
  border-radius: 999px;
  padding: 2px 10px;
  margin-top: 4px;
}

@media (prefers-color-scheme: dark) {
  .price-per-kg {
    color: #c99aff;
    background: rgba(168, 85, 247, 0.18);
  }
}

/* --------------------------------------------------------------------------
   Lightbox photos produit (DESKTOP uniquement, >= 769px — sur mobile les
   photos sont déjà quasi plein écran). Overlay fixé au-dessus de tout,
   contenant un Very Simple Slider en mode fullscreen. Ouvert au clic sur
   l'image principale (curseur zoom-in), fermé par la croix / clic hors
   photo / Échap (géré en JS dans product.pug).
   -------------------------------------------------------------------------- */
#product-lightbox {
  display: none;
}

@media (min-width: 769px) {
  .main-image-container img {
    cursor: zoom-in;
  }

  #product-lightbox.open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(10, 11, 18, 0.92);
  }

  /* Le slider VSP occupe tout l'overlay ; l'image est contenue (jamais
     rognée) et le fond du slide reste transparent pour laisser voir le
     voile sombre — cliquer ce fond referme le lightbox. */
  #product-lightbox .slider-container,
  #product-lightbox .slider,
  #product-lightbox .slide {
    width: 100%;
    height: 100%;
    background: transparent;
  }

  #product-lightbox .slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: default;
  }

  #product-lightbox-close {
    position: absolute;
    top: 16px;
    right: 22px;
    z-index: 1002;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  #product-lightbox-close:hover {
    background: var(--brand-cta, #ff3d77);
    transform: scale(1.08);
  }
}