/**
 * heleneriu.fr - Product Page Styles
 * Artisan Luxury Theme - Pages Produit
 * 
 * Architecture: ITCSS Layer 5 - Page-specific Components
 * Updated: 2026-01-15
 */

/* ══════════════════════════════════════════
   PRODUCT PAGE LAYOUT
   ══════════════════════════════════════════ */

#product {
  padding: var(--space-8) 0 var(--space-16);
}

.product-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (max-width: 991px) {
  .product-container {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ══════════════════════════════════════════
   PRODUCT GALLERY
   ══════════════════════════════════════════ */

.product-gallery,
.images-container {
  position: sticky;
  top: var(--space-8);
}

/* Main Image */
.product-cover {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--color-neutral-100) 0%,
    var(--color-neutral-50) 100%
  );
  aspect-ratio: 1;
  margin-bottom: var(--space-4);
}

.product-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-6);
  transition: transform var(--duration-slow) var(--ease-out);
}

.product-cover:hover img {
  transform: scale(1.05);
}

/* Zoom Indicator */
.product-cover .layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  cursor: zoom-in;
}

.product-cover:hover .layer {
  opacity: 1;
}

.product-cover .layer i,
.product-cover .layer .zoom-icon {
  color: var(--color-neutral-0);
  font-size: var(--text-3xl);
}

/* Product Flags on Image */
.product-cover .product-flags {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 2;
}

.product-cover .product-flag {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.product-cover .product-flag.new {
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
  color: var(--color-neutral-0);
}

.product-cover .product-flag.on-sale {
  background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-600));
  color: var(--color-neutral-0);
}

/* Thumbnails Gallery */
.product-images,
.js-qv-product-images {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding: var(--space-2);
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-300) transparent;
}

.product-images::-webkit-scrollbar {
  height: 6px;
}

.product-images::-webkit-scrollbar-thumb {
  background: var(--color-primary-300);
  border-radius: var(--radius-full);
}

.thumb-container,
.product-images li {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  background: var(--color-neutral-100);
}

.thumb-container:hover,
.product-images li:hover {
  border-color: var(--color-primary-300);
  transform: scale(1.05);
}

.thumb-container.selected,
.thumb-container.active,
.product-images li.selected {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px var(--color-primary-200);
}

.thumb-container img,
.product-images li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-1);
}

/* ══════════════════════════════════════════
   PRODUCT INFORMATION
   ══════════════════════════════════════════ */

.product-information {
  padding: var(--space-2) 0;
}

/* Product Title */
#product h1,
.product-information h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: var(--font-bold);
  color: var(--color-neutral-950);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-tight);
}

/* Product Reference */
.product-reference,
.product-manufacturer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  margin-bottom: var(--space-4);
}

.product-reference label,
.product-manufacturer label {
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
}

/* Short Description */
.product-description-short,
#product-description-short {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-neutral-200);
}

.product-description-short p {
  margin-bottom: var(--space-3);
}

.product-description-short ul {
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
}

.product-description-short li {
  margin-bottom: var(--space-2);
  position: relative;
}

.product-description-short li::marker {
  color: var(--color-primary-400);
}

/* ══════════════════════════════════════════
   PRODUCT PRICES
   ══════════════════════════════════════════ */

.product-prices {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: linear-gradient(
    135deg,
    var(--color-primary-50) 0%,
    var(--color-neutral-50) 100%
  );
  border-radius: var(--radius-xl);
}

.product-prices .current-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.product-prices .current-price-value,
.product-prices .price {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-primary-600);
  line-height: 1;
}

.product-prices .regular-price {
  font-size: var(--text-xl);
  font-weight: var(--font-regular);
  color: var(--color-neutral-400);
  text-decoration: line-through;
}

.product-prices .discount {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-neutral-0);
  background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-600));
  border-radius: var(--radius-md);
}

/* Tax Info */
.product-prices .tax-shipping-delivery-label {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  margin-top: var(--space-2);
}

/* Unit Price */
.product-prices .product-unit-price {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
}

/* ══════════════════════════════════════════
   PRODUCT VARIANTS
   ══════════════════════════════════════════ */

.product-variants {
  margin-bottom: var(--space-6);
}

.product-variants > .product-variants-item {
  margin-bottom: var(--space-5);
}

.product-variants .control-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-800);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Color Selector */
.product-variants .color-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-variants .color-group li {
  list-style: none;
}

.product-variants .color-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.product-variants .color-group .color {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-neutral-0);
  box-shadow: 0 0 0 2px var(--color-neutral-200);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-spring);
}

.product-variants .color-group .color:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--color-primary-300);
}

.product-variants .color-group input:checked + .color {
  box-shadow: 0 0 0 3px var(--color-primary-500);
  transform: scale(1.1);
}

/* Size/Variant Buttons */
.product-variants .input-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.product-variants .input-container label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-700);
  background: var(--color-neutral-0);
  border: 2px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.product-variants .input-container label:hover {
  border-color: var(--color-primary-300);
  background: var(--color-primary-50);
}

.product-variants .input-container input:checked + label {
  border-color: var(--color-primary-500);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-weight: var(--font-semibold);
}

/* Dropdown Select */
.product-variants select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-neutral-800);
  background: var(--color-neutral-0);
  border: 2px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.product-variants select:hover {
  border-color: var(--color-primary-300);
}

.product-variants select:focus {
  outline: none;
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

/* ══════════════════════════════════════════
   QUANTITY & ADD TO CART
   ══════════════════════════════════════════ */

.product-quantity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.product-quantity .qty {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.product-quantity .qty .btn-touchspin,
.product-quantity .bootstrap-touchspin-down,
.product-quantity .bootstrap-touchspin-up {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  background: var(--color-neutral-100);
  border: none;
  cursor: pointer;
  color: var(--color-neutral-600);
  font-size: var(--text-xl);
  transition: all var(--duration-fast) var(--ease-out);
}

.product-quantity .qty .btn-touchspin:hover,
.product-quantity .bootstrap-touchspin-down:hover,
.product-quantity .bootstrap-touchspin-up:hover {
  background: var(--color-primary-100);
  color: var(--color-primary-600);
}

.product-quantity #quantity_wanted {
  width: 70px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--color-neutral-200);
  border-right: 1px solid var(--color-neutral-200);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
}

.product-quantity #quantity_wanted:focus {
  outline: none;
}

/* Add to Cart Button */
.product-add-to-cart .add-to-cart,
.add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-5) var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-neutral-0);
  background: linear-gradient(
    135deg,
    var(--color-primary-500) 0%,
    var(--color-primary-600) 100%
  );
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.product-add-to-cart .add-to-cart::before,
.add-to-cart::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--color-primary-600) 0%,
    var(--color-primary-700) 100%
  );
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.product-add-to-cart .add-to-cart:hover::before,
.add-to-cart:hover::before {
  opacity: 1;
}

.product-add-to-cart .add-to-cart:hover,
.add-to-cart:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl), var(--shadow-primary);
}

.product-add-to-cart .add-to-cart:active,
.add-to-cart:active {
  transform: translateY(-1px);
}

.product-add-to-cart .add-to-cart span,
.add-to-cart span {
  position: relative;
  z-index: 1;
}

.product-add-to-cart .add-to-cart i,
.add-to-cart i {
  position: relative;
  z-index: 1;
  font-size: var(--text-xl);
}

/* Disabled State */
.product-add-to-cart .add-to-cart:disabled,
.add-to-cart:disabled {
  background: var(--color-neutral-300);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ══════════════════════════════════════════
   PRODUCT ACTIONS (Wishlist, Share)
   ══════════════════════════════════════════ */

.product-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-neutral-200);
  margin-top: var(--space-6);
}

.product-actions button,
.product-actions a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.product-actions button:hover,
.product-actions a:hover {
  color: var(--color-primary-600);
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
}

/* Wishlist Heart */
.product-actions .wishlist-button-add:hover {
  color: var(--color-error);
  background: var(--color-error-light);
  border-color: var(--color-error);
}

/* ══════════════════════════════════════════
   PRODUCT AVAILABILITY
   ══════════════════════════════════════════ */

.product-availability {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.product-availability i {
  font-size: var(--text-lg);
}

.product-availability.in-stock {
  color: var(--color-success);
}

.product-availability.out-of-stock {
  color: var(--color-error);
}

.product-availability.last-items {
  color: var(--color-warning);
}

/* Stock Indicator */
#product-availability {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
}

#product-availability.product-available {
  background: var(--color-success-light);
  color: var(--color-success);
}

#product-availability.product-unavailable {
  background: var(--color-error-light);
  color: var(--color-error);
}

#product-availability.product-last-items {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

/* ══════════════════════════════════════════
   PRODUCT TABS / DESCRIPTION
   ══════════════════════════════════════════ */

.product-tabs,
.tabs {
  margin-top: var(--space-12);
  background: var(--color-neutral-0);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.product-tabs .nav-tabs,
.tabs .nav-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-neutral-200);
  padding: 0 var(--space-4);
  background: var(--color-neutral-50);
  overflow-x: auto;
}

.product-tabs .nav-tabs .nav-item,
.tabs .nav-tabs .nav-item {
  list-style: none;
}

.product-tabs .nav-tabs .nav-link,
.tabs .nav-tabs .nav-link {
  display: block;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-out);
}

.product-tabs .nav-tabs .nav-link:hover,
.tabs .nav-tabs .nav-link:hover {
  color: var(--color-primary-600);
}

.product-tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link.active {
  color: var(--color-primary-600);
  border-bottom-color: var(--color-primary-500);
  background: var(--color-neutral-0);
}

.product-tabs .tab-content,
.tabs .tab-content {
  padding: var(--space-6);
}

.product-tabs .tab-pane,
.tabs .tab-pane {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
}

.product-tabs .tab-pane h2,
.product-tabs .tab-pane h3 {
  font-family: var(--font-display);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-4);
}

.product-tabs .tab-pane p {
  margin-bottom: var(--space-4);
}

.product-tabs .tab-pane ul {
  padding-left: var(--space-5);
  margin-bottom: var(--space-4);
}

.product-tabs .tab-pane li {
  margin-bottom: var(--space-2);
}

/* ══════════════════════════════════════════
   PRODUCT FEATURES TABLE
   ══════════════════════════════════════════ */

.product-features {
  margin: var(--space-6) 0;
}

.product-features h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-4);
}

.data-sheet,
.product-features dl {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.data-sheet dt,
.data-sheet .name {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  background: var(--color-neutral-50);
  border-bottom: 1px solid var(--color-neutral-200);
}

.data-sheet dd,
.data-sheet .value {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  background: var(--color-neutral-0);
  border-bottom: 1px solid var(--color-neutral-200);
}

.data-sheet dt:last-of-type,
.data-sheet .name:last-child,
.data-sheet dd:last-of-type,
.data-sheet .value:last-child {
  border-bottom: none;
}

/* ══════════════════════════════════════════
   RELATED PRODUCTS
   ══════════════════════════════════════════ */

.product-accessories,
.crossselling-products,
.featured-products {
  margin-top: var(--space-16);
  padding: var(--space-8);
  background: var(--color-neutral-50);
  border-radius: var(--radius-2xl);
}

.product-accessories h2,
.crossselling-products h2,
.featured-products h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
  text-align: center;
  margin-bottom: var(--space-8);
  position: relative;
}

.product-accessories h2::after,
.crossselling-products h2::after,
.featured-products h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-primary-400),
    var(--color-accent-400)
  );
  border-radius: var(--radius-full);
  margin: var(--space-4) auto 0;
}

.product-accessories .products,
.crossselling-products .products,
.featured-products .products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-6);
}

/* ══════════════════════════════════════════
   MOBILE RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width: 991px) {
  .product-gallery,
  .images-container {
    position: static;
  }
  
  .product-cover {
    border-radius: var(--radius-xl);
  }
  
  #product h1 {
    font-size: var(--text-2xl);
  }
  
  .product-prices .current-price-value {
    font-size: var(--text-3xl);
  }
  
  .product-quantity {
    flex-direction: column;
    align-items: stretch;
  }
  
  .product-quantity .qty {
    justify-content: center;
  }
  
  .product-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 575px) {
  #product {
    padding: var(--space-4) 0 var(--space-8);
  }
  
  .product-tabs .nav-tabs {
    padding: 0;
  }
  
  .product-tabs .nav-tabs .nav-link {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
  }
  
  .product-tabs .tab-content {
    padding: var(--space-4);
  }
  
  .data-sheet {
    grid-template-columns: 1fr;
  }
  
  .data-sheet dt,
  .data-sheet .name {
    border-bottom: none;
    padding-bottom: var(--space-1);
  }
  
  .data-sheet dd,
  .data-sheet .value {
    padding-top: 0;
  }
}

/* ══════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════ */

@keyframes priceHighlight {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.product-prices:hover .current-price-value {
  animation: priceHighlight var(--duration-slow) var(--ease-spring);
}

/* Add to cart success animation */
@keyframes addedToCart {
  0% { transform: scale(1); }
  30% { transform: scale(0.95); }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.add-to-cart.added {
  animation: addedToCart var(--duration-normal) var(--ease-spring);
  background: linear-gradient(
    135deg,
    var(--color-success) 0%,
    var(--color-success) 100%
  );
}

/* Thumbnail slide animation */
.product-images li {
  animation: fadeInUp var(--duration-fast) var(--ease-out) both;
}

.product-images li:nth-child(1) { animation-delay: 0ms; }
.product-images li:nth-child(2) { animation-delay: 50ms; }
.product-images li:nth-child(3) { animation-delay: 100ms; }
.product-images li:nth-child(4) { animation-delay: 150ms; }
.product-images li:nth-child(5) { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  .product-images li,
  .product-prices:hover .current-price-value,
  .add-to-cart.added {
    animation: none;
  }
}

/* ══════════════════════════════════════════

/* ══════════════════════════════════════════
   PRODUCT PAGE FIXES - v2
   ══════════════════════════════════════════ */

/* Hide skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: var(--space-4);
  background: var(--color-primary-500);
  color: white;
  z-index: 9999;
}

/* Product flags positioning */
#product .product-flags,
.product-flags {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Make sure image container is relative */
#product .images-container,
#product .product-cover {
  position: relative;
}

/* Larger thumbnails */
#product .product-images li,
.product-images .thumb-container {
  width: 100px;
  height: 100px;
  border: 2px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration-fast) var(--ease-out);
}

#product .product-images li:hover,
.product-images .thumb-container:hover {
  border-color: var(--color-primary-400);
  transform: scale(1.05);
}

#product .product-images li.selected,
.product-images .thumb-container.selected {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px var(--color-primary-200);
}

/* Better product title */
#product h1.product-title,
.product-title-block h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-neutral-950);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

/* Price section enhancement */
#product .product-prices {
  background: linear-gradient(135deg, var(--color-primary-50), var(--color-neutral-50));
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-6);
}

#product .current-price-value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-primary-600);
}

/* Social sharing cleanup */
.social-sharing {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-neutral-200);
  margin-top: var(--space-4);
}

.social-sharing span {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
}

.social-sharing a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-neutral-100);
  color: var(--color-neutral-600);
  transition: all var(--duration-fast) var(--ease-out);
}

.social-sharing a:hover {
  background: var(--color-primary-100);
  color: var(--color-primary-600);
}

/* Hide duplicate share sections */
.share-buttons-list,
#product .social-sharing ~ .social-sharing {
  display: none;
}

/* Product tabs enhancement */
#product .nav-tabs {
  border-bottom: 2px solid var(--color-neutral-200);
  margin-bottom: 0;
}

#product .nav-tabs .nav-link {
  font-family: var(--font-display);
  font-weight: var(--font-medium);
  padding: var(--space-4) var(--space-6);
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  color: var(--color-neutral-600);
  transition: all var(--duration-fast) var(--ease-out);
}

#product .nav-tabs .nav-link:hover {
  color: var(--color-primary-600);
}

#product .nav-tabs .nav-link.active {
  color: var(--color-primary-600);
  border-bottom-color: var(--color-primary-500);
  background: transparent;
}

#product .tab-content {
  padding: var(--space-6);
  background: var(--color-neutral-0);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border: 1px solid var(--color-neutral-200);
  border-top: none;
}

/* Reference styling */
#product .product-reference {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  margin-bottom: var(--space-3);
}

/* ══════════════════════════════════════════
   PRODUCT PAGE CLEANUP - v3
   ══════════════════════════════════════════ */

/* Hide duplicate share list */
#product .social-sharing ~ ul,
#product .share-buttons-list,
#product .social-sharing + .social-sharing,
.product-share ul {
  position: absolute !important; top: 180px !important; left: 30px !important; z-index: 100 !important;
}

/* Keep only the button version of share */
.product-share .social-sharing {
  display: flex !important;
}

/* Product flags back on image */
#product .product-flags {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 100 !important;
}

#product .images-container {
  position: relative !important;
}

#product .product-flag {
  display: inline-block !important;
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

#product .product-flag.discount,
#product .product-flag.on-sale {
  background: linear-gradient(135deg, #e86a3d, #d44f26);
  color: white;
}

#product .product-flag.new {
  background: linear-gradient(135deg, #8b7355, #6d5a42);
  color: white;
}

/* Garanties section cleaner */
.product-reassurance {
  background: var(--color-neutral-50);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}

.product-reassurance h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
}

.product-reassurance li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-neutral-700);
}

/* Comments section */
#product-comments-list,
.product-comments {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-neutral-200);
}

/* Policy sections - simpler */
.product-quantities,
.product-additional-info p {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  margin: var(--space-2) 0;
}

/* Hide duplicate social sharing (list version) */
.social-sharing {
  position: absolute !important; top: 180px !important; left: 30px !important; z-index: 100 !important;
}

/* Keep the nice button version */
.social-sharing-section {
  display: block !important;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-neutral-200);
  margin-top: var(--space-4);
}

.social-sharing-section .social-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-3);
}

.social-sharing-section .social-buttons {
  display: flex;
  gap: var(--space-2);
}

.social-sharing-section .social-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.social-sharing-section .social-btn:hover {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

/* ══════════════════════════════════════════
   PRODUCT FLAGS - Fix Position Inside Image
   ══════════════════════════════════════════ */

/* Reset any absolute positioning that escapes container */
#product .product-flags,
.page-product .product-flags,
body#product .product-flags {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure image container is the positioning context */
#product .images-container,
#product .product-cover,
.page-product .images-container,
.page-product .product-cover {
  position: relative !important;
  overflow: visible;
}

/* Move flags inside the product-cover specifically */
#product .product-cover .product-flags {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
}

/* If flags are outside product-cover, hide and recreate effect */
#product > .product-flags,
.images-container > .product-flags,
.product-images-column > .product-flags {
  position: absolute !important;
  top: 100px !important;
  left: 30px !important;
}

/* ========================================

/* ========================================

/* ========================================
  display: none !important;
}

/* Force product flags visibility with explicit colors */
.product-flags li.product-flag {
  background: #8b7355 !important;
  color: #ffffff !important;
}

.product-flags li.product-flag.on-sale {
  background: #c45a3b !important;
}

.product-flags li.product-flag.discount {
  background: #6b5a47 !important;
}


/* ========================================
   PRODUCT FLAGS - Ultra-specific selectors
======================================== */

#product .product-images-column,
body.product .product-images-column {
  position: relative !important;
}

#product .product-images-column > ul.product-flags,
body.product .product-images-column > ul.product-flags,
section#main .product-images-column ul.product-flags {
  position: absolute !important;
  top: 95px !important;
  left: 15px !important;
  z-index: 999 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#product ul.product-flags li.product-flag,
body.product ul.product-flags li.product-flag,
section#main ul.product-flags li.product-flag {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 8px 16px !important;
  font-family: var(--font-display, Georgia), serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25) !important;
  width: fit-content !important;
  background: #8b7355 !important;
  color: #fff !important;
}

#product li.product-flag.on-sale,
body.product li.product-flag.on-sale {
  background: #c45a3b !important;
  color: #fff !important;
}

#product li.product-flag.discount,
body.product li.product-flag.discount {
  background: #6b5a47 !important;
  color: #fff !important;
}

/* Hide native PrestaShop blockreassurance (duplicate) */
.blockreassurance_product,
.block-reassurance,
#blockreassurance,
div[class*='blockreassurance'] {
  display: none !important;
}

/* Hide duplicate native social sharing (causes overlap) */
.social-sharing {
  display: none !important;
}

/* Keep only the custom social-sharing-section */
.social-sharing-section {
  display: block !important;
}

/* Hide ps_checkout payment logos (duplicate - we have custom one) */
#ps_checkout-payment-method-logos,
.ps_checkout-payment-method-logos,
[id*='ps_checkout'][id*='payment'],
.ps-checkout-payment-method-logos {
  display: none !important;
}

/* ══════════════════════════════════════════
   PRODUCT PAGE LAYOUT REORDER
   Bouton panier juste après le prix
   ══════════════════════════════════════════ */

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

.product-info-column .product-information {
  display: flex;
  flex-direction: column;
}

/* Actions (variantes + panier) en premier dans product-information */
.product-information .product-actions {
  order: -1;
  margin-bottom: var(--space-6);
}

/* Description courte après les actions */
.product-information > .product-description {
  order: 0;
}

/* Onglets à la fin */
.product-information .tabs {
  order: 1;
}

/* Badge disponibilité inline à côté du prix */
.availability-badge-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: var(--space-3);
  padding: 0.25rem 0.75rem;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
  vertical-align: middle;
}

.availability-badge-inline.in-stock {
  background: rgba(34, 139, 34, 0.1);
  color: #228b22;
  border: 1px solid rgba(34, 139, 34, 0.3);
}

.availability-badge-inline.out-of-stock {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.3);
}

.availability-badge-inline .stock-icon {
  font-size: 0.875rem;
}