/**
 * ==========================================================================
 * HELENERIU.FR — fixes-product.css
 * ==========================================================================
 * Product page specific fixes.
 * Loaded ONLY on page_name == 'product'.
 * ==========================================================================
 */

/* ==========================================================================
   1. PRODUCT FLAGS - Stacking context
   ========================================================================== */

.product-images-column {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.images-container,
.product-cover {
  position: relative !important;
  z-index: auto !important;
}

.product-images-column .product-flags,
.product-images-column > #content > .product-flags,
#product .product-flags.js-product-flags {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 3 !important;
  right: auto !important;
  bottom: auto !important;
  max-width: 140px !important;
}

.product-flags .product-flag {
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
  margin-bottom: 4px !important;
}

@media (max-width: 767.98px) {
  .product-images-column .product-flags,
  .product-images-column > #content > .product-flags,
  #product .product-flags.js-product-flags {
    top: 5px !important;
    left: 5px !important;
  }
  .product-images-column #content {
    position: relative !important;
  }
  .product-images-column #content > .product-flags {
    position: absolute !important;
    top: 60px !important;
    left: 10px !important;
    z-index: 3 !important;
  }
}


/* ==========================================================================
   2. SWATCHES (color/variant selectors)
   ========================================================================== */

.product-variants .color-list,
.product-variants [class*="couleurs"],
.color-picker,
.variant-selector {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin: 1rem 0 !important;
}

.product-variants .color-list input[type="radio"] + span,
.color-swatch,
.variant-option {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 36px !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8125rem !important;
  border: 1px solid #d0c8c0 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.product-variants input[type="radio"]:checked + span,
.color-swatch.selected,
.variant-option.selected {
  background: #8b7355 !important;
  color: #ffffff !important;
  border-color: #8b7355 !important;
  font-weight: 500 !important;
}

.product-variants input[type="radio"]:hover + span,
.color-swatch:hover,
.variant-option:hover {
  border-color: #8b7355 !important;
  background: #faf8f5 !important;
}

.product-variants .current-color,
.selected-variant-label {
  font-size: 0.875rem !important;
  color: #8b7355 !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
}


/* ==========================================================================
   3. GUIDE HERO
   ========================================================================== */

.guide-hero {
  background: linear-gradient(135deg, #8b7355 0%, #6d5a44 100%) !important;
  color: #ffffff !important;
}

.guide-hero h1,
.guide-hero h2,
.guide-hero h3,
.guide-hero p {
  color: #ffffff !important;
}


/* ==========================================================================
   4. WCAG - Availability & Disabled button
   ========================================================================== */

.availability-badge-inline,
span.availability-badge-inline,
#product-availability .availability-badge-inline {
  background: #e8ddd0 !important;
  background-color: #e8ddd0 !important;
  color: #4a3928 !important;
  border: 1px solid #c9b99a !important;
}

.availability-badge-inline.out-of-stock,
.availability-badge-inline.in-stock {
  background: #e8ddd0 !important;
  color: #4a3928 !important;
}

.availability-badge-inline .stock-icon {
  color: #4a3928 !important;
}

.add-to-cart[disabled],
.add-to-cart:disabled,
.btn-primary[disabled],
.btn-primary:disabled,
button.add-to-cart[disabled],
.btn-add-to-cart[disabled],
.btn-add-to-cart:disabled,
.btn-add-to-cart.out-of-stock,
button.btn-add-to-cart.out-of-stock {
  background: #8b7355 !important;
  background-color: #8b7355 !important;
  color: #fff !important;
  border-color: #8b7355 !important;
  opacity: 0.65 !important;
  cursor: not-allowed !important;
}