/**
 * Lin Teas - Fiche Produit Premium
 * Style inspiré Palais des Thés - Intégré à l'infrastructure existante
 */

/* ==========================================================================
   Variables CSS spécifiques fiche produit
   ========================================================================== */

:root {
  /* Variables héritées du style existant + nouvelles */
  --font-primary: 'Playfair Display', serif;
  --font-secondary: 'Inter', sans-serif;

  /* Couleur rouge cinabre premium pour accents - évoque l'authenticité chinoise */
  --color-accent: #B85450;
  --color-accent-light: #C86B66;
  --color-accent-dark: #A04A45;

  /* Couleurs de base héritées */
  --color-white: #FFFFFF;
  --color-primary: #7FB3A3;
  --color-secondary: #A8D0C6;
  --color-text: #2C3E50;
  --color-text-light: #5D6D7E;
  --color-text-muted: #85929E;
  --color-gray: #BDC3C7;
  --color-gray-light: #ECF0F1;
  --color-cream: #FDFEFE;

  /* Espacements système */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;

  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Ombres */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);

  /* Transitions */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Variables navigation */
  --nav-height: 80px;
  --dropdown-max-width: 1200px;
  --dropdown-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

/* ==========================================================================
   Navigation Premium avec Dropdowns (identique au catalogue)
   ========================================================================== */

.premium-nav {
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--nav-height);
}

.premium-nav .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* Logo amélioré */
.premium-nav .nav-logo a {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
  transition: var(--transition);
}

.premium-nav .nav-logo .logo {
  height: 45px;
  width: auto;
}

.premium-nav .nav-logo .logo-text {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary);
  display: none;
}

@media (min-width: 1024px) {
  .premium-nav .nav-logo .logo-text {
    display: block;
  }
}

/* Menu principal avec dropdowns */
.premium-nav .nav-menu {
  display: flex;
  list-style: none;
  gap: var(--spacing-lg);
  margin: 0;
  padding: 0;
}

.premium-nav .nav-item {
  position: relative;
}

.premium-nav .nav-item > a {
  display: flex;
  align-items: center;
  height: var(--nav-height);
  padding: 0 var(--spacing-sm);
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
  transition: var(--transition);
  border-bottom: 3px solid transparent;
}

.premium-nav .nav-item > a:hover,
.premium-nav .nav-item > a.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.premium-nav .nav-item.has-dropdown > a::after {
  content: '▾';
  margin-left: 0.5rem;
  font-size: 0.8rem;
  transition: var(--transition);
}

.premium-nav .nav-item.has-dropdown:hover > a::after {
  transform: rotate(180deg);
}

/* Dropdown menus */
.dropdown-menu {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  width: 100%;
  max-width: var(--dropdown-max-width);
  margin: 0 auto;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--dropdown-shadow);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 1001;
}

.premium-nav .nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.dropdown-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
}

/* Dropdown spécial pour boutique avec 6 sections en 3 colonnes */
.nav-item.active .dropdown-content {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.dropdown-section {
  padding: var(--spacing-sm);
}

.dropdown-section h4 {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--spacing-xs);
}

.dropdown-link {
  display: block;
  padding: var(--spacing-xs) 0;
  color: var(--color-text-light);
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--transition);
}

.dropdown-link:hover {
  color: var(--color-primary);
  padding-left: var(--spacing-xs);
}

/* Actions utilisateur améliorées */
.premium-nav .nav-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.premium-nav .nav-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  text-decoration: none;
  color: var(--color-text);
  transition: var(--transition);
  border-radius: var(--radius-sm);
  position: relative;
}

.premium-nav .nav-icon:hover {
  color: var(--color-accent);
  background: linear-gradient(135deg, rgba(184, 84, 80, 0.1), rgba(201, 106, 97, 0.1));
}

.premium-nav .nav-icon svg {
  stroke: currentColor;
}

.premium-nav .nav-icon .icon-label {
  font-size: 0.75rem;
  font-weight: 500;
}

/* Badge panier amélioré pour accessibilité */
.premium-nav .cart-count {
  position: absolute;
  top: -2px;
  right: 8px;
  background: #D32F2F; /* Rouge plus contrasté */
  color: var(--color-white);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border: 2px solid var(--color-white);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Menu hamburger mobile */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs);
  color: var(--color-text);
  transition: var(--transition);
}

.mobile-menu-toggle:hover {
  color: var(--color-accent);
}

.mobile-menu-toggle svg {
  stroke: currentColor;
}

/* Responsive navigation */
@media (max-width: 1024px) {
  .premium-nav .nav-menu {
    display: none;
  }

  .mobile-menu-toggle {
    display: block;
  }

  .premium-nav .nav-actions .icon-label {
    display: none;
  }

  .dropdown-content {
    grid-template-columns: 1fr;
  }

  .dropdown-menu {
    width: 300px;
  }
}

/* ==========================================================================
   Navigation Breadcrumb
   ========================================================================== */

.breadcrumb-nav {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-light);
  padding: var(--spacing-sm) 0;
}

.breadcrumb {
  display: flex;
  list-style: none;
  gap: var(--spacing-xs);
  font-size: 0.9rem;
  margin: 0;
  padding: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: '›';
  margin-left: var(--spacing-xs);
  color: var(--color-text-muted);
}

.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition);
}

.breadcrumb a:hover {
  color: var(--color-accent);
}

.breadcrumb .current {
  color: var(--color-text-muted);
}

/* ==========================================================================
   Page Produit
   ========================================================================== */

.product-page {
  padding: var(--spacing-lg) 0;
  background: var(--color-cream);
}

.product-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  align-items: start;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .product-main {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .product-page {
    padding: var(--spacing-md) 0;
  }

  /* Onglets responsive */
  .details-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
  }

  .tab-btn {
    flex: 1;
    min-width: 120px;
    padding: var(--spacing-sm);
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   Layout Principal 2 Colonnes (50% / 50%)
   ========================================================================== */

.product-main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

/* MOCKUP EXACT: Layout compact avec gap réduit */
.product-layout-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px; /* Mockup exact: 32px entre colonnes */
  align-items: start;
}

.product-gallery-column {
  position: sticky;
  top: calc(var(--nav-height) + 16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 100%;
}

.product-info-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 100%;
}

/* Responsive: 1 colonne sur tablette et mobile */
@media (max-width: 1024px) {
  .product-layout-two-columns {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .product-gallery-column {
    position: relative;
    top: 0;
  }
}

/* ==========================================================================
   Galerie Images
   ========================================================================== */

.product-gallery {
  position: relative;
}

/* WooCommerce gallery mapping to premium styles */
.woocommerce-product-gallery {
  position: relative;
  width: 100%;
  max-width: 100%;
}
.woocommerce-product-gallery__wrapper {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1; /* carré exact comme le mockup */
}
/* MOCKUP EXACT: Galerie avec bordure dashed verte + fond vert clair */
.product-gallery{
  position:relative;
}
.product-gallery .woocommerce-product-gallery.images,
.woocommerce-product-gallery.images{
  width:100% !important;
  max-width:none !important;
  background:#E8F3ED !important; /* Fond vert clair mockup */
  border:2px dashed #7BA888 !important; /* Bordure tiretée verte */
  border-radius:12px !important;
  padding:20px !important;
  position:relative !important;
}
.product-gallery .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__wrapper{
  width:100% !important;
  max-width:none !important;
  aspect-ratio:1;
  border-radius:8px;
  overflow:hidden;
  position:relative !important;
}
.product-gallery .woocommerce-product-gallery__image,
.product-gallery .woocommerce-product-gallery__image a,
.product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  cursor:pointer !important;
  pointer-events:auto !important;
}

/* Assure que l'image principale remplit l'espace carré */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image a {
  display: block;
  width: 100%;
  height: 100%;
}
.product-gallery-main-image .wp-post-image,
.woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Bande de miniatures (compat WooCommerce) */
.product-gallery-thumbnails,
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  gap: var(--spacing-xs);
  overflow-x: auto;
  padding: var(--spacing-xs) 0;
}
.product-gallery-thumbnails .thumbnail-item img,
.woocommerce div.product div.images .flex-control-thumbs li img {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  flex-shrink: 0;
}
.product-gallery-thumbnails .thumbnail-item img:hover,
.product-gallery-thumbnails .thumbnail-item.active img,
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  border-color: var(--color-primary);
  transform: scale(1.05);
}


.main-image {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-sm);
  aspect-ratio: 1;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.product-image:hover {
  transform: scale(1.02);
}

/* Badges horizontaux sur l'image - style Palais des Thés */
.product-badges-overlay {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  z-index: 2;
  max-width: calc(100% - 2 * var(--spacing-sm));
}

.product-badges {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  z-index: 2;
}

.badge {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-white);
  backdrop-filter: blur(10px);
}

.badge-bio {
  background: linear-gradient(135deg, #4CAF50, #66BB6A);
}

.badge-premium {
  background: linear-gradient(135deg, var(--color-gold), #F4D03F);
}

.badge-site {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.thumbnail-gallery {
  display: flex;
  gap: var(--spacing-xs);
  overflow-x: auto;
  padding: var(--spacing-xs) 0;
}

.thumbnail {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  flex-shrink: 0;
}

.thumbnail:hover,
.thumbnail.active {
  border-color: var(--color-primary);
  transform: scale(1.05);
}

/* ==========================================================================
   Informations Produit
   ========================================================================== */

.product-info {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* En-tête produit épuré - titre et rating sur une ligne */
.product-header-clean {
  margin-bottom: var(--spacing-none);
}

.title-rating-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.title-section {
  flex: 1;
}

.rating-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-xs);
  flex-shrink: 0;
}

.rating-section .stars {
  display: flex;
  gap: 2px;
}

.rating-section .rating-text {
  font-size: 0.85rem;
  color: var(--color-text-light);
  white-space: nowrap;
}

.product-header {
  margin-bottom: var(--spacing-xs);
}

.product-category {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.category-link {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
  font-size: 0.9rem;
}

.origin-tag {
  background: var(--color-gray-light);
  padding: 0.25rem var(--spacing-sm);
  border-radius: 12px;
  font-size: 0.8rem;
  color: var(--color-text-light);
}

/* Titre produit – MOCKUP EXACT: noir, 36px (2rem), Playfair Display */
.product-title,
.product-header .product-title,
.product-header-premium .product_title.entry-title{
  font-family:"Playfair Display", Georgia, serif !important;
  font-size:2rem !important; /* 36px exact mockup */
  font-weight:700 !important; /* Bold comme mockup */
  line-height:1.25 !important;
  color:#1A1A1A !important; /* Noir charbon, pas doré */
  margin:0 0 8px 0 !important; /* Espacement réduit mockup */
}

/* Subtitle compact */
.product-subtitle{
  font-style:italic;
  font-size:15px;
  color:#6B7280;
  margin:0 0 12px 0 !important;
  line-height:1.4;
}

/* Header compact */
.product-header{
  margin-bottom:12px !important;
}
/* Titre H1 WooCommerce aligne9 au mockup */
.product-header-premium .product_title.entry-title{font-family:"Playfair Display", serif!important;color:#D3AE27;font-weight:600;line-height:1.2;font-size:2.625rem;margin:0 0 var(--spacing-xs)}


/* Bande de miniatures – forcer l’affichage en ligne sous l’image */
.woocommerce div.product div.images .flex-control-thumbs{
  display:flex !important;
  flex-wrap:nowrap;
  gap:var(--spacing-xs);
  margin-top:var(--spacing-xs);
  padding:var(--spacing-xs) 0;
}
.woocommerce div.product div.images .flex-control-thumbs li{list-style:none;width:64px;height:64px;flex:0 0 auto;}
.woocommerce div.product div.images .flex-control-thumbs li img{width:100%;height:100%;object-fit:cover;border-radius:8px;border:2px solid var(--color-gray-light);transition:var(--transition);}
.woocommerce div.product div.images .flex-control-thumbs li img:hover{transform:scale(1.03);}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active{border-color:#7FB3A3;box-shadow:0 0 0 2px rgba(127,179,163,.25);}




.product-subtitle {
  font-style: italic;
  color: var(--color-text-light);
  font-size: 1rem;
  margin-bottom: var(--spacing-sm);
}

/* MOCKUP EXACT: Thumbnails 70px, bordure arrondie, hover vert */
ol.flex-control-nav.flex-control-thumbs,
.flex-control-thumbs{
  display:flex!important;
  gap:8px; /* var(--spacing-xs) = 8px */
  overflow-x:auto;
  padding:8px 0;
  list-style:none;
  margin:12px 0 0;
  background:transparent;
  border:0;
  pointer-events:auto !important;
}
ol.flex-control-nav.flex-control-thumbs li,
.flex-control-thumbs li{
  width:70px!important; /* Mockup exact */
  height:70px!important;
  float:none!important;
  flex:0 0 auto!important;
  cursor:pointer !important;
  pointer-events:auto !important;
}
ol.flex-control-nav.flex-control-thumbs img,
.flex-control-thumbs img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
  border:2px solid #E0E0E0; /* Gris clair mockup */
  transition:all 0.3s ease;
  cursor:pointer !important;
  pointer-events:auto !important;
}
ol.flex-control-nav.flex-control-thumbs img:hover,
.flex-control-thumbs img:hover{
  transform:scale(1.05);
  border-color:#7BA888;
}
ol.flex-control-nav.flex-control-thumbs img.flex-active,
.flex-control-thumbs img.flex-active{
  border-color:#7BA888; /* Vert sauge mockup */
  box-shadow:0 0 0 2px rgba(123,168,136,.25);
}

/* Assurer clic lightbox (loupe) au-dessus de l'image */
.woocommerce div.product div.images, .woocommerce div.product div.images figure{position:relative}
.woocommerce div.product a.woocommerce-product-gallery__trigger{position:absolute;top:10px;right:10px;z-index:5;background:rgba(255,255,255,.9);border-radius:999px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.woocommerce div.product div.images .flex-direction-nav{display:none!important}


/* MOCKUP EXACT: Bouton "Ajouter au panier" rouge bordeaux avec icône */
.product-premium .single_add_to_cart_button,
.add-to-cart-btn-primary,
.single_add_to_cart_button.add-to-cart-btn-primary,
.woocommerce div.product form.cart .button.single_add_to_cart_button{
  background:#C55A5A!important; /* Rouge mockup exact */
  border:none!important;
  color:#fff!important;
  border-radius:12px!important;
  padding:14px 32px!important;
  min-width:320px;
  font-weight:600!important;
  font-size:16px!important;
  box-shadow:0 4px 16px rgba(197,90,90,.3)!important;
  transition:all .3s ease!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  cursor:pointer!important;
}
.product-premium .single_add_to_cart_button:hover,
.add-to-cart-btn-primary:hover,
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover{
  background:#B04848!important;
  transform:translateY(-2px)!important;
  box-shadow:0 6px 20px rgba(197,90,90,.4)!important;
}

/* Icône panier dans le bouton - DÉSACTIVÉ (utilise SVG dans le HTML) */
/* .single_add_to_cart_button::before{
  content:"🛒";
  font-size:18px;
} */

/* MOCKUP EXACT: Wrapper quantité + label */
.product-premium .quantity,
.quantity-selector-inline{
  display:flex;
  align-items:center;
  gap:12px;
}
.quantity-selector-inline label,
.product-premium .quantity label{
  font-weight:600;
  font-size:14px;
  color:#374151;
  margin:0;
}

/* MOCKUP EXACT: Input quantité - DÉSACTIVÉ (géré par product-premium-elements.css) */
/* Les styles sont maintenant dans product-premium-elements.css pour éviter les conflits */
/* .product-premium .quantity .qty,
.product-premium .quantity input[type="number"],
.qty-input,
.quantity-controls input[type="number"]{
  width:80px!important;
  height:48px!important;
  border:2px solid #7BA888!important;
  border-radius:8px!important;
  text-align:center!important;
  font-weight:600!important;
  font-size:16px!important;
  background:#fff!important;
  margin:0!important;
} */

/* MOCKUP EXACT: Boutons +/- - DÉSACTIVÉ (géré par product-premium-elements.css) */
/* Les styles sont maintenant dans product-premium-elements.css pour éviter les conflits */
/* .qty-btn,
.product-premium .quantity-controls button,
.quantity-controls .qty-btn{
  width:48px!important;
  height:48px!important;
  border:2px solid #7BA888!important;
  border-radius:8px!important;
  background:#fff!important;
  cursor:pointer!important;
  transition:all .3s ease!important;
  font-size:20px!important;
  font-weight:600!important;
  color:#7BA888!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.qty-btn:hover,
.product-premium .quantity-controls button:hover,
.quantity-controls .qty-btn:hover{
  background:#7BA888!important;
  color:#fff!important;
} */

/* MOCKUP EXACT: Stock en vert/rouge */
.product-premium p.stock{
  color:#7BA888; /* Vert sauge mockup */
  font-weight:600;
  font-size:14px;
  margin:0 0 8px 0;
}
.product-premium p.stock.out-of-stock{
  color:#DC2626; /* Rouge bordeaux mockup */
}

/* MOCKUP EXACT: Icônes d'information sous la galerie (Grid 2x2) */
.product-info-icons{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  margin-top:16px;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 1;
}
.info-icon-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px;
  background:#F3F4F6; /* Gris clair mockup */
  border-radius:8px;
  font-size:14px;
  color:#374151; /* Gris foncé mockup */
}
.info-icon-item .info-icon{
  font-size:20px;
  flex-shrink:0;
}
.info-icon-item .info-label{
  font-size:13px;
  line-height:1.3;
}

/* MOCKUP EXACT: Description courte avec bordure gauche verte */
.product-description-short {
  background: #F9FAFB; /* Gris très clair mockup */
  border-left: 4px solid #7BA888; /* Bordure gauche verte mockup */
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.product-description-short p {
  font-size: 15px;
  line-height: 1.6;
  color: #374151; /* Gris foncé mockup */
  margin: 0;
}

/* Section packaging (wrapper pour le formulaire add-to-cart) */
.packaging-selection {
  margin-bottom: var(--spacing-lg);
}
/* Masquer les sélecteurs WooCommerce natifs (remplacés par UI premium) */
.variations,
.variations select,
.variations td,
.variations th {
  display: none !important;
}


@media (max-width: 768px) {
  .product-title {
    font-size: 1.75rem;
  }

  .product-subtitle {
    font-size: 0.9rem;
  }
}

.product-rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.stars {
  display: flex;
  gap: 2px;
}

.star {
  color: var(--color-gray);
  font-size: 1.2rem;
}

.star.filled {
  color: var(--color-accent);
}

.rating-text {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ==========================================================================
   Section Prioritaire d'Achat (Above the fold)
   ========================================================================== */

.purchase-priority-section {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  border: 2px solid var(--color-accent);
  margin-bottom: var(--spacing-md);
}

/* Affichage du prix principal */
.price-display {
  text-align: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-gray-light);
}

.current-price {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-accent);
  font-family: var(--font-primary);
}

.price-unit {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-left: var(--spacing-xs);
}

/* Sélecteur de packaging compact */
.packaging-selector-compact h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.packaging-options-inline {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

@media (max-width: 480px) {
  .packaging-options-inline {
    grid-template-columns: 1fr;
  }
}

.packaging-option {
  background: var(--color-gray-light);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  position: relative;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.packaging-option:hover {
  border-color: var(--color-primary);
  background: var(--color-white);
}

.packaging-option.selected {
  border-color: var(--color-accent);
  background: linear-gradient(135deg, rgba(184, 84, 80, 0.05), rgba(201, 106, 97, 0.05));
}

.packaging-option.selected::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 6px;
  width: 18px;
  height: 18px;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.option-name {
  display: block;
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.option-price {
  display: block;
  font-weight: 700;
  color: var(--color-accent);
  font-size: 1rem;
}

.option-badge {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-secondary);
  color: var(--color-white);
  padding: 0.2rem 0.4rem;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.option-badge.discount {
  background: var(--color-accent);
}

/* Contrôles d'achat - compact */
.purchase-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

@media (max-width: 480px) {
  .purchase-controls {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}

.quantity-selector-inline {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.quantity-selector-inline label {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.9rem;
}

.quantity-controls {
  display: flex;
  align-items: center;
  border: 2px solid var(--color-gray);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  overflow: hidden;
}

.qty-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--color-white);
  color: var(--color-primary);
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: var(--transition);
}

.qty-btn:hover {
  background: var(--color-gray-light);
  color: var(--color-accent);
}

.qty-input {
  width: 50px;
  height: 36px;
  border: none;
  text-align: center;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-white);
}

.qty-input:focus {
  outline: none;
  background: var(--color-gray-light);
}

/* Bouton d'ajout au panier principal - style compact optimisé */

/* Bouton d'ajout au panier principal - optimisé pour une ligne */
.add-to-cart-btn-primary {
  flex: 1;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  min-width: 200px;
}

.add-to-cart-btn-primary:hover {
  background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.add-to-cart-btn-primary .btn-icon {
  font-size: 1.2rem;
}

.add-to-cart-btn-primary .btn-total {
  font-weight: 700;
  margin-left: auto;
}
/* CTA + stock + quantit styliss aux couleurs du thme */
.woocommerce div.product p.stock{
  color:#7FB3A3; /* vert Lin Teas */
  font-weight:600;
  margin: var(--spacing-sm) 0;
}
.woocommerce div.product p.stock.out-of-stock{color:#B85450;}

.purchase-controls{display:flex;align-items:center;gap:var(--spacing-md);margin:var(--spacing-sm) 0 var(--spacing-md);}
/* Styles quantity-controls désactivés - gérés par product-premium-elements.css */
/* .purchase-controls .quantity-controls{display:flex;align-items:center;gap:4px;}
.purchase-controls .qty-input{width:72px;height:44px;border:2px solid #7FB3A3;border-radius:10px;text-align:center;font-weight:600;}
.purchase-controls .qty-btn{width:40px;height:40px;border-radius:10px;border:2px solid #BDC3C7;background:#fff;cursor:pointer;} */

/* Forcer le style du bouton Woo par-dessus les styles par dfaut */
.add-to-cart-btn-primary,
.single_add_to_cart_button.add-to-cart-btn-primary,
.woocommerce div.product form.cart .button.single_add_to_cart_button.add-to-cart-btn-primary{
  background:#B85450 !important;
  border:2px solid #B85450 !important;
  color:#fff !important;
  border-radius:14px;
  padding:12px 20px;
  box-shadow:0 6px 16px rgba(184,84,80,.25);
  transition:all .2s ease;
}
.add-to-cart-btn-primary:hover,
.single_add_to_cart_button.add-to-cart-btn-primary:hover{
  background:#a44845 !important;
  border-color:#a44845 !important;
  transform:translateY(-2px);

}

@media (max-width: 768px) {
  /* Badges responsive sur image */
  .product-badges-overlay {
    flex-wrap: wrap;
    gap: 4px;
  }

  .product-badges-overlay .badge {
    padding: 4px 8px;
    font-size: 0.7rem;
  }

  /* Bouton responsive */
  .add-to-cart-btn-primary {
    width: 100%;
    min-width: auto;
    padding: var(--spacing-md);
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .add-to-cart-btn-primary {
    width: 100%;
    padding: var(--spacing-md);
    font-size: 0.95rem;
  }

  /* Badges extra small sur image */
  .product-badges-overlay .badge {
    padding: 3px 6px;
    font-size: 0.65rem;
  }

  /* Layout principal responsive */
  .product-main {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  /* Section caractéristiques responsive */
  .product-features-section {
    margin-bottom: var(--spacing-sm);
  }

  /* Caractéristiques en 1 colonne sur mobile */
  .feature-grid-compact {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }

  /* Rating responsive */
  .title-rating-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .rating-section {
    align-items: flex-start;
  }
}

/* ==========================================================================
   OPTIMISATIONS LAYOUT ÉPURÉ - NOUVELLES SECTIONS
   ========================================================================== */

/* Description repositionnée au-dessus du packaging */
.product-description-top {
  margin-bottom: var(--spacing-none);
}

.product-description-top .product-summary-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-light);
  padding: var(--spacing-sm);
  background: var(--color-gray-light);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
  margin: 0;
}

/* Section packaging épurée */
.packaging-selection-clean {
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

/* Section caractéristiques simplifiée */
.product-features-section {
  margin-bottom: var(--spacing-md);
}

.feature-grid-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.feature-item-compact {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.9rem;
  color: var(--color-text);
  padding: var(--spacing-xs);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-light);
  transition: var(--transition);
}

.feature-item-compact:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.feature-item-compact .feature-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

/* Styles de description déplacés dans .product-description-top */

/* Icônes SVG dans boutons */
.add-to-cart-btn-primary .btn-icon {
  stroke: currentColor;
  flex-shrink: 0;
}

.action-btn-compact svg {
  stroke: currentColor;
}

/* Actions secondaires compactes */
.secondary-actions-compact {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
}

.action-btn-compact {
  width: 40px;
  height: 40px;
  border: 2px solid var(--color-gray);
  background: var(--color-white);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--color-text-light);
}

.action-btn-compact:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: linear-gradient(135deg, rgba(184, 84, 80, 0.05), rgba(201, 106, 97, 0.05));
}

/* ==========================================================================
   Caractéristiques Compactes (Priorité 2)
   ========================================================================== */

.product-features-compact {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

.feature-grid-inline {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

@media (max-width: 480px) {
  .feature-grid-inline {
    grid-template-columns: 1fr;
  }
}

.feature-item-compact {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  background: var(--color-gray-light);
  border-radius: var(--radius-sm);
}

.feature-item-compact .feature-icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
}

.feature-item-compact .feature-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
}

/* ==========================================================================
   Description Compacte (Priorité 3)
   ========================================================================== */

.product-summary-compact {
  background: var(--color-gray-light);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
}

.product-summary-compact p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0;
}

/* ==========================================================================
   Description et Caractéristiques
   ========================================================================== */

.product-summary {
  background: var(--color-gray-light);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  border-left: 4px solid var(--color-primary);
}

.product-summary p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

.product-features {
  margin-bottom: var(--spacing-lg);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

@media (max-width: 480px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

.feature-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.feature-icon {
  font-size: 1.5rem;
  width: 40px;
  text-align: center;
}

.feature-content strong {
  display: block;
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.9rem;
}

.feature-content span {
  color: var(--color-text-light);
  font-size: 0.85rem;
}

/* ==========================================================================
   Sélecteur de Packaging (Intégré)
   ========================================================================== */

.packaging-selector-container {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-lg);
}

.packaging-selector-container h3 {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.linteas-packaging-selector .packaging-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

@media (max-width: 768px) {
  .linteas-packaging-selector .packaging-grid {
    grid-template-columns: 1fr;
  }
}

.packaging-card {
  background: var(--color-white);
  border: 2px solid var(--color-gray);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  text-align: center;
}

.packaging-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.packaging-card.selected {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, rgba(127, 179, 163, 0.05), rgba(168, 208, 198, 0.05));
  box-shadow: var(--shadow-md);
}

.packaging-card.selected::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

.packaging-visual {
  margin-bottom: var(--spacing-sm);
  position: relative;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.package-icon svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.package-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.package-badge.default {
  background: var(--color-secondary);
  color: var(--color-white);
}

.package-badge.discount {
  background: var(--color-accent);
  color: var(--color-white);
}

.package-name {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
  font-size: 1rem;
}

.final-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
  display: block;
}

.unit-price,
.packaging-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: block;
  margin-top: 0.25rem;
}

.savings {
  font-size: 0.8rem;
  color: var(--color-accent);
  font-weight: 600;
  display: block;
  margin-top: 0.25rem;
}

/* ==========================================================================
   Contrôles de quantité et ajout panier
   ========================================================================== */

.quantity-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--color-gray-light);
  border-radius: var(--radius-sm);
}

.quantity-controls {
  display: flex;
  align-items: center;
  border: 2px solid var(--color-gray);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  overflow: hidden;
}

.qty-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--color-white);
  color: var(--color-primary);
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: var(--transition);
}

.qty-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.qty-input {
  width: 60px;
  height: 40px;
  border: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  background: var(--color-white);
}

.add-to-cart-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: center;
}

@media (min-width: 576px) {
  .add-to-cart-section {
    flex-direction: row;
    justify-content: space-between;
  }
}

.add-to-cart-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  min-width: 200px;
  justify-content: center;
}

.add-to-cart-btn:hover {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.cart-total-preview {
  text-align: center;
}

.total-label {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}

.cart-total {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* ==========================================================================
   Actions secondaires
   ========================================================================== */

.product-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-sm);
  color: var(--color-text-light);
  text-decoration: none;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
}

.action-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(127, 179, 163, 0.05);
}

/* ==========================================================================
   Détails produit avec onglets
   ========================================================================== */

.product-details {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: var(--spacing-xxl);
}

.details-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-gray);
  overflow-x: auto;
}

.tab-btn {
  padding: var(--spacing-md) var(--spacing-lg);
  border: none;
  background: none;
  color: var(--color-text-light);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.tab-btn:hover,
.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: rgba(127, 179, 163, 0.05);
}

.tab-content {
  display: none;
  padding: var(--spacing-xl);
}

.tab-content.active {
  display: block;
}

.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-xl);
}

@media (max-width: 768px) {
  /* Tabs Navigation - Scroll horizontal sur mobile */
  .details-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */

    /* Sticky tabs sur mobile */
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;

    /* Indicateur de scroll visuel */
    background: linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,1) 5%,
      rgba(255,255,255,1) 95%,
      rgba(255,255,255,0) 100%
    );
    padding: 0 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }

  /* Masquer la scrollbar sur Webkit */
  .details-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Tabs buttons - Zones tactiles optimisées (min 44x44px) */
  .tab-btn {
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 1rem 1.25rem; /* Augmenté pour meilleure zone tactile */
    font-size: 0.875rem;
    min-height: 44px; /* Zone tactile minimale iOS */
    display: flex;
    align-items: center;
  }

  /* Contenu des tabs */
  .tab-content {
    padding: 1.5rem 1rem;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile très petit (< 480px) */
@media (max-width: 480px) {
  .tab-btn {
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
  }

  .tab-content {
    padding: 1.25rem 0.75rem;
  }
}

.content-main h3 {
  font-family: var(--font-primary);
  font-size: 1.8rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

.content-main h4 {
  font-size: 1.2rem;
  color: var(--color-text);
  margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}

.content-main p {
  margin-bottom: var(--spacing-md);
  line-height: 1.7;
  color: var(--color-text-light);
}

.product-specs {
  list-style: none;
  padding: 0;
}

.product-specs li {
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-gray);
  color: var(--color-text-light);
}

.product-specs li:last-child {
  border-bottom: none;
}

.info-card {
  background: var(--color-gray-light);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

.info-card h4 {
  font-size: 1.1rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.info-card ul {
  list-style: none;
  padding: 0;
}

.info-card li {
  padding: 0.25rem 0;
  color: var(--color-text-light);
  position: relative;
  padding-left: 1.2rem;
}

.info-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: bold;
}

/* ==========================================================================
   Notes de dégustation
   ========================================================================== */

.tasting-notes h3 {
  font-family: var(--font-primary);
  font-size: 1.8rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
}

.note-category {
  margin-bottom: var(--spacing-lg);
}

.note-category h4 {
  font-size: 1.2rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.note-tag {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.note-tag.primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.note-tag.secondary {
  background: var(--color-gray-light);
  color: var(--color-text-light);
  border: 1px solid var(--color-gray);
}

.intensity-bars {
  margin-top: var(--spacing-lg);
}

.intensity-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.intensity-label {
  min-width: 100px;
  font-weight: 500;
  color: var(--color-text);
}

.intensity-bar {
  flex: 1;
  height: 8px;
  background: var(--color-gray);
  border-radius: 4px;
  overflow: hidden;
}

.intensity-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: var(--transition);
}

.intensity-value {
  min-width: 80px;
  font-size: 0.9rem;
  color: var(--color-text-light);
}

/* ==========================================================================
   Produits recommandés
   ========================================================================== */

.related-products {
  margin-top: var(--spacing-xxl);
}

.related-products h2 {
  font-family: var(--font-primary);
  font-size: 2rem;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.related-products .products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.related-products .product-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.related-products .product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.related-products .card-image {
  position: relative;
  overflow: hidden;
  height: 200px;
}

.related-products .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.related-products .product-card:hover .card-image img {
  transform: scale(1.05);
}

.related-products .card-badges {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
}

.related-products .card-content {
  padding: var(--spacing-md);
}

.related-products .card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
}

.related-products .card-price {
  color: var(--color-text-light);
  font-size: 0.9rem;
}

.related-products .card-price strong {
  color: var(--color-primary);
  font-size: 1.1rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Media query supprimé - règles déplacées vers le media query principal ligne 1899 */