/**
 * Smart River — fiche produit : base (KAN-26)
 *
 * Template : catalog/product.tpl (#main.sr-product), catalog/_partials/product-cover-thumbnails.tpl,
 * catalog/_partials/product-images-modal.tpl (#product-modal).
 * Chargé uniquement sur la page produit (config/theme.yml > assets > css > product).
 * Règles limitées à #main.sr-product : la modale d'aperçu rapide (.quickview), ajoutée hors de #main,
 * n'est pas concernée même quand elle s'ouvre depuis la fiche (accessoires).
 *
 * Mise en page, galerie, badges, modale d'agrandissement, accessoires.
 * Les autres blocs ont leur propre fichier : product-info, product-prices, product-variants,
 * product-add-to-cart, product-tabs, product-share, product-responsive (KAN-27 à KAN-35).
 *
 * Variables --sr-pp-* : communes à toute la fiche produit, réutilisées par ces fichiers.
 */

#main.sr-product {
  --sr-pp-accent: var(--sr-theme-primary, #1b7d36);
  --sr-pp-accent-soft: var(--sr-product-selection-bg, color-mix(in srgb, var(--sr-pp-accent) 9%, transparent));
  --sr-pp-accent-glow: color-mix(in srgb, var(--sr-pp-accent) 45%, transparent);
  --sr-pp-energy: var(--sr-theme-accent, #c6f432);
  --sr-pp-ink: var(--sr-product-ink, #0c1522);
  --sr-pp-text: var(--sr-theme-text, #1f2328);
  --sr-pp-muted: var(--sr-theme-muted, #6b7280);
  --sr-pp-border: var(--sr-product-border, #e8e8ec);
  --sr-pp-surface: var(--sr-theme-surface, #ffffff);
  --sr-pp-media-bg: var(--sr-product-media-bg, #f4f8f1);
  --sr-pp-danger: var(--sr-product-danger, #d92d20);
  --sr-pp-success: var(--sr-product-success, #1a7f4b);
  --sr-pp-warning: var(--sr-product-warning, #9a5b00);
  --sr-pp-on-accent: var(--sr-product-on-accent, #ffffff);
  --sr-pp-soft-bg: var(--sr-product-soft-bg, #fafbf9);
  --sr-pp-description-text: var(--sr-product-description-text, #404650);
  --sr-pp-radius: 20px;
  --sr-pp-radius-sm: 10px;
  --sr-pp-radius-pill: 999px;
  --sr-pp-gap: 3rem;
  --sr-pp-sticky-top: 4.75rem; /* sous la barre de navigation collante (51 px) */
  --sr-pp-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sr-pp-transition: 0.2s ease;

  font-family: var(--sr-pp-font);
  color: var(--sr-pp-text);
}

body#product #wrapper {
  background: var(--sr-product-page-bg, #ffffff);
}

/* Wide product layout on desktop. */
@media (min-width: 992px) {
  body#product #wrapper > .container {
    width: 100%;
    max-width: 1680px;
    padding-right: 32px;
    padding-left: 32px;
  }
}

/* ------------------------------------------------------------------ mise en page : galerie | informations */

#main.sr-product .product-container {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--sr-pp-gap);
  align-items: start;
  margin: 0 0 3rem;
}

#main.sr-product .product-container::before,
#main.sr-product .product-container::after {
  content: none;
}

#main.sr-product .product-container > .sr-product__gallery,
#main.sr-product .product-container > .sr-product__info {
  width: auto;
  max-width: none;
  padding: 0;
}

/* la galerie reste visible pendant qu'on lit les informations et les onglets */
#main.sr-product .sr-product__gallery {
  position: sticky;
  top: var(--sr-pp-sticky-top);
}

/* ------------------------------------------------------------------ galerie */

#main.sr-product .sr-product__gallery .page-content {
  position: relative;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* Override Classic's #product #content limit of 452px. */
#main.sr-product .sr-product__gallery #content {
  width: 100%;
  max-width: none;
}

#main.sr-product .images-container {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

#main.sr-product .product-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 2.5rem;
  overflow: hidden;
  border-radius: var(--sr-pp-radius);
  background: var(--sr-product-media-bg, #f7f8f7);
}

#main.sr-product .product-cover picture {
  display: contents;
}

#main.sr-product .product-cover img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  background: transparent;
  mix-blend-mode: normal;
  transition: transform 0.4s ease;
}

#main.sr-product .product-cover:hover img {
  transform: scale(1.03);
}

/* « Agrandir » : pastille au lieu du voile plein écran de l'ancien thème */
#main.sr-product .product-cover .layer {
  top: auto;
  right: 1rem;
  bottom: 1rem;
  left: auto;
  width: auto;
  height: auto;
  padding: 0.5rem 0.875rem;
  border-radius: var(--sr-pp-radius-pill);
  background: color-mix(in srgb, var(--sr-pp-surface) 95%, transparent);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--sr-pp-ink) 50%, transparent);
  color: var(--sr-pp-text);
  font-size: 0.8125rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(0.375rem);
  transition: opacity var(--sr-pp-transition), transform var(--sr-pp-transition), color var(--sr-pp-transition);
  cursor: zoom-in;
}

#main.sr-product .product-cover .layer::after {
  content: "Agrandir";
  margin-left: 0.25rem;
}

#main.sr-product .product-cover:hover .layer,
#main.sr-product .product-cover .layer:focus-visible {
  opacity: 1;
  transform: none;
}

#main.sr-product .product-cover .layer:hover {
  color: var(--sr-pp-accent);
}

#main.sr-product .product-cover .layer .zoom-in {
  color: inherit;
  font-size: 1.125rem;
}

/* miniatures d'images */
#main.sr-product .images-container .js-qv-mask {
  width: 100%;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

#main.sr-product .images-container .js-qv-mask::-webkit-scrollbar {
  display: none;
}

#main.sr-product .images-container .product-images {
  display: flex;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* une seule image : pas de rangée de miniatures */
#main.sr-product .images-container .product-images:has(> li:only-child) {
  display: none;
}

#main.sr-product .images-container .product-images > li.thumb-container {
  display: block;
  flex: 0 0 auto;
}

#main.sr-product .images-container .product-images > li.thumb-container .thumb {
  width: 5rem;
  height: 5rem;
  margin: 0;
  padding: 0.375rem;
  border: 2px solid var(--sr-pp-border);
  border-radius: var(--sr-pp-radius-sm);
  background: var(--sr-pp-media-bg);
  object-fit: contain;
  cursor: pointer;
  transition: border-color var(--sr-pp-transition), transform var(--sr-pp-transition);
}

#main.sr-product .images-container .product-images > li.thumb-container .thumb:hover {
  border-color: var(--sr-pp-energy);
  transform: translateY(-2px);
}

#main.sr-product .images-container .product-images > li.thumb-container .thumb.selected {
  border-color: var(--sr-pp-accent);
}

/* flèches de défilement de l'ancien thème : remplacées par le défilement natif */
#main.sr-product .scroll-box-arrows {
  display: none !important;
}

/* ------------------------------------------------------------------ badges (mêmes règles que les miniatures) */

#main.sr-product .sr-product__gallery .product-flags {
  top: 1.25rem;
  left: 1.25rem;
  z-index: 3;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  width: auto;
  max-width: calc(100% - 2.5rem);
  gap: 0.375rem;
}

#main.sr-product .sr-product__gallery .product-flags li.product-flag {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0.3125rem 0.625rem;
  overflow: hidden;
  border-radius: var(--sr-pp-radius-pill);
  background: var(--sr-pp-ink);
  box-shadow: 0 4px 10px -6px color-mix(in srgb, var(--sr-pp-ink) 60%, transparent);
  color: var(--sr-pp-on-accent);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#main.sr-product .sr-product__gallery .product-flags li.product-flag.new {
  background: var(--sr-pp-energy);
  color: var(--sr-pp-ink);
}

#main.sr-product .sr-product__gallery .product-flags li.product-flag.discount,
#main.sr-product .sr-product__gallery .product-flags li.product-flag.discount-amount,
#main.sr-product .sr-product__gallery .product-flags li.product-flag.discount-percentage,
#main.sr-product .sr-product__gallery .product-flags li.product-flag.on-sale {
  order: 0;
  width: fit-content;
  background: var(--sr-pp-danger);
  text-align: left;
}

#main.sr-product .sr-product__gallery .product-flags li.product-flag.online-only {
  position: static;
  order: 10;
}

#main.sr-product .sr-product__gallery .product-flags li.product-flag.online-only::before {
  margin: 0 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1;
}

/* doublons masqués : « Promo ! » si la remise chiffrée est affichée ; « Rupture de stock » (déjà indiqué par la disponibilité) */
#main.sr-product .sr-product__gallery .product-flags:has(.discount, .discount-percentage, .discount-amount) li.product-flag.on-sale,
#main.sr-product .sr-product__gallery .product-flags li.product-flag.out_of_stock {
  display: none;
}

/* ------------------------------------------------------------------ modale d'agrandissement (#product-modal) */

#main.sr-product #product-modal .modal-dialog {
  width: calc(100% - 2rem);
  max-width: 56rem;
}

#main.sr-product #product-modal .modal-content {
  overflow: hidden;
  border-radius: var(--sr-pp-radius);
  background: var(--sr-pp-surface);
  box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--sr-pp-ink) 55%, transparent);
}

#main.sr-product #product-modal .modal-dialog {
  margin: 4.5rem auto 2rem;
}

/* image, légende puis rangée de miniatures (l'ancien thème place les miniatures à droite) */
#main.sr-product #product-modal .modal-content .modal-body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

#main.sr-product #product-modal .modal-content .modal-body .thumbnails {
  width: 100%;
  padding-top: 0.25rem;
}

#main.sr-product #product-modal figure {
  display: flex;
  flex-direction: column;
  margin: 0;
}

#main.sr-product #product-modal figure picture {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--sr-pp-energy) 28%, transparent) 0%, transparent 70%),
    var(--sr-pp-media-bg);
}

#main.sr-product #product-modal .modal-content .modal-body .product-cover-modal {
  max-height: 56vh;
  width: auto;
  background: transparent;
  mix-blend-mode: multiply;
  object-fit: contain;
}

#main.sr-product #product-modal .modal-content .modal-body .image-caption {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--sr-pp-border);
  color: var(--sr-pp-muted);
  font-size: 0.875rem;
}

#main.sr-product #product-modal .modal-content .modal-body .image-caption p {
  margin: 0;
  color: inherit;
}

#main.sr-product #product-modal .modal-content .modal-body .mask {
  max-height: none;
  margin: 0;
  padding: 0 1.5rem 1.25rem;
  overflow-x: auto;
}

#main.sr-product #product-modal .modal-content .modal-body .product-images {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

#main.sr-product #product-modal .modal-content .modal-body .product-images:has(> li:only-child) {
  display: none;
}

#main.sr-product #product-modal .modal-content .modal-body .product-images img {
  width: 4.5rem;
  height: 4.5rem;
  padding: 0.25rem;
  border: 2px solid var(--sr-pp-border);
  border-radius: var(--sr-pp-radius-sm);
  background: var(--sr-pp-media-bg);
  object-fit: contain;
}

#main.sr-product #product-modal .modal-content .modal-body .product-images img:hover {
  border: 2px solid var(--sr-pp-accent);
}

/* ------------------------------------------------------------------ accessoires (miniatures : product-miniatures.css) */

#main.sr-product .product-accessories {
  margin: 0 0 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--sr-pp-border);
}

#main.sr-product .sr-product__section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1.25rem;
  color: var(--sr-pp-text);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
}

#main.sr-product .sr-product__section-title::before {
  content: "";
  width: 4px;
  height: 1.375rem;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sr-pp-accent), var(--sr-pp-energy));
}

#main.sr-product .product-accessories .products {
  justify-content: flex-start;
}

/* ------------------------------------------------------------------ tablette / mobile (base ; détail : product-responsive.css, KAN-34) */

@media (max-width: 991px) {
  #main.sr-product {
    --sr-pp-gap: 2rem;
  }
}

@media (max-width: 767px) {
  /* minmax(0, …) : une longue rangée de miniatures ne doit pas élargir la colonne (débordement horizontal) */
  #main.sr-product .product-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  /* une seule colonne : la galerie ne reste plus fixée */
  #main.sr-product .sr-product__gallery {
    position: static;
  }

  #main.sr-product .product-cover {
    padding: 1.5rem;
    border-radius: 16px;
  }

  /* pas de survol au doigt : la pastille « Agrandir » reste visible */
  #main.sr-product .product-cover .layer {
    opacity: 1;
    transform: none;
  }

  #main.sr-product .images-container .product-images > li.thumb-container .thumb {
    width: 4rem;
    height: 4rem;
  }

  #main.sr-product .sr-product__section-title {
    font-size: 1.1875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main.sr-product * {
    transition: none !important;
  }
}

/* Shared Home Builder brands strip, after the product's other content. */
.sr-product__brands { width: 100%; min-width: 0; margin: 48px 0 24px; }
@media (max-width: 767px) { .sr-product__brands { margin-top: 32px; } }