/* ==========================================================================
   GLAMWEL LABORATOIRES - Fiche produit FRAGRANCE
   Construit uniquement a partir des variables et des conventions de site.css
   (typographies, couleurs, espacements, points de rupture 760 / 1120).
   ========================================================================== */

/* Le header opaque de cette page vient de page.css (.page-solid-header). */

/* ==========================================================================
   FOND BLANC DE LA FICHE PRODUIT
   Les autres pages alternent ivoire et beige d'une section a l'autre. La
   fiche produit, elle, se tient d'un bout a l'autre sur du blanc : la classe
   page-blanche est posee sur le body par ProductController.
   ========================================================================== */

.page-blanche,
.page-blanche .product-detail,
.page-blanche .landing-stack,
.page-blanche .trust,
.page-blanche .product-related,
.page-blanche .newsletter { background: var(--white); }

/* Le haut de page suit, sinon le header tranche sur le contenu. */
.page-blanche .site-header { background: rgba(255, 255, 255, .96); }

/* html porte son propre fond : sans cela, l'elan de defilement laisse
   apparaitre l'ivoire au-dela du contenu. */
html:has(> .page-blanche) { background: var(--white); }

.product-detail {
  padding-top: calc(var(--header-height) + 34px);
  padding-bottom: 70px;
  background: var(--ivory);
}

/* FIL D'ARIANE */
.product-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 28px;
  color: #81786e;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.product-breadcrumb a { transition: color 250ms ease; }
.product-breadcrumb a:hover { color: var(--black); }
.product-breadcrumb span[aria-hidden] { color: var(--sand); }
.product-breadcrumb .current { color: var(--black); }

/* MISE EN PAGE */
.product-detail-grid {
  display: grid;
  gap: 34px;
}

.product-detail-media {
  position: relative;
  aspect-ratio: .82;
  overflow: hidden;
  background: #e5ded4;
}

.product-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail-title {
  margin-bottom: 18px;
  font-family: var(--serif);
  font-size: clamp(38px, 8vw, 62px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .95;
}

/* SOUS-TITRE (dbo_product.subtitle) : une ligne courte et appuyee, entre le
   titre et la description. */
.product-detail-subtitle {
  max-width: 470px;
  margin-bottom: 10px;
  color: var(--black);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.6;
}

.product-detail-info .purchase-block { margin-top: 28px; }

/* QUANTITE */
.quantity-field { margin-top: 20px; }

.quantity-label {
  display: block;
  margin-bottom: 8px;
  color: #81786e;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Le selecteur .quantity-control est partage avec le panier : voir page.css. */

/* ACTIONS */
.purchase-actions {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.purchase-actions .buy-button { margin-top: 0; }

.buy-button-secondary {
  border-color: var(--black);
  background: transparent;
  color: var(--black);
}

.buy-button-secondary:hover {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

.buy-button:disabled {
  cursor: default;
  border-color: var(--sand);
  background: var(--sand);
  color: var(--warm-white);
  transform: none;
}

.buy-button-secondary:disabled {
  background: transparent;
  color: var(--sand);
}

/* DISPONIBILITE */
.stock-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Sous le titre : celui-ci porte deja la marge qui les separe. */
.product-detail-title + .stock-status { margin-top: 0; margin-bottom: 20px; }

.stock-in { color: #4b7a52; }
.stock-out { color: #a33f36; }

.stock-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

/* ==========================================================================
   SECTIONS DESCRIPTIVES (dbo_product)
   Le contenu vient du back-office et arrive en HTML : on encadre sa mise en
   forme pour qu'il reste dans la typographie du site.
   ========================================================================== */

.product-sections { background: var(--warm-white); }

.product-section + .product-section {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.product-section-title {
  margin-bottom: 20px;
  font-family: var(--serif);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1;
}

.product-section-body {
  max-width: 760px;
  color: #686159;
  font-size: 14px;
  line-height: 1.9;
}

.product-section-body p + p,
.product-section-body ul,
.product-section-body ol { margin-top: 14px; }

.product-section-body ul,
.product-section-body ol { padding-left: 20px; }

.product-section-body li { margin-bottom: 7px; }
.product-section-body li::marker { color: var(--gold); }

.product-section-body b,
.product-section-body strong { color: var(--black); font-weight: 600; }

.product-section-body h2,
.product-section-body h3,
.product-section-body h4 {
  margin-top: 22px;
  margin-bottom: 8px;
  color: var(--black);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
}

.product-section-body img {
  height: auto;
  margin: 18px 0;
}

.product-section-body a {
  border-bottom: 1px solid currentColor;
  color: var(--gold);
}

.product-section-body table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.product-section-body td,
.product-section-body th {
  padding: 9px 10px;
  border: 1px solid var(--line);
  text-align: left;
}

@media (min-width: 760px) {
  .product-section + .product-section { margin-top: 54px; padding-top: 54px; }
}

/* AUTRES PARFUMS */
.product-related { background: var(--warm-white); }
.product-related-head { margin-bottom: 42px; }

/* TABLET */
@media (min-width: 760px) {
  .product-detail {
    padding-top: calc(var(--header-height) + 48px);
    padding-bottom: 100px;
  }

  .product-detail-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 46px;
  }

  .purchase-actions { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* DESKTOP */
@media (min-width: 1120px) {
  .product-detail {
    padding-top: calc(var(--header-height) + 64px);
    padding-bottom: 126px;
  }

  .product-detail-grid {
    grid-template-columns: 1.05fr .95fr;
    /* Haut aligne sur le visuel : centre, le titre flottait au milieu de
       l'image des que la colonne de droite etait plus courte. */
    align-items: start;
    gap: 74px;
  }

  .product-detail-subtitle { font-size: 14px; }
}

/* ==========================================================================
   CONTENU D'UN PACK
   Les articles qui composent le lot, au-dessus du bloc d'achat. L'intitule
   reprend celui des declinaisons : meme nature d'information.
   ========================================================================== */

.pack-contenu { margin-top: 26px; }

.pack-liste {
  display: grid;
  gap: 14px;
  list-style: none;
}

.pack-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color 250ms ease;
}

.pack-item:hover { border-color: var(--black); }

.pack-item-image {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  overflow: hidden;
  background: #e5ded4;
}

.pack-item-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.pack-item-nom {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--black);
  font-size: 11px;
  line-height: 1.5;
}

/* Une ligne : l'article, puis les declinaisons offertes au choix. */
.pack-ligne {
  display: grid;
  gap: 8px;
}

.pack-choix { padding-left: 2px; }

/* Le bouton radio porte l'etat ; seule l'etiquette se voit. */
.pack-choix .declinaison-option { cursor: pointer; }
.pack-choix .pack-choix-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pack-choix .declinaison-option:focus-within { border-color: var(--black); color: var(--black); }

.pack-item-quantite {
  flex: 0 0 auto;
  color: #81786e;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  white-space: nowrap;
}

/* ==========================================================================
   DECLINAISONS
   ========================================================================== */

.product-declinaisons { margin-top: 26px; }

.declinaison-groupe + .declinaison-groupe { margin-top: 18px; }

.declinaison-label {
  display: block;
  margin-bottom: 9px;
  color: #81786e;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.declinaison-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.declinaison-option {
  padding: 9px 14px;
  border: 1px solid var(--line);
  color: #4a443d;
  font-size: 11px;
  letter-spacing: .04em;
  transition: border-color 250ms ease, background 250ms ease, color 250ms ease;
}

.declinaison-option:hover { border-color: var(--black); color: var(--black); }

.declinaison-option.is-active {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

/* PASTILLES DE COULEUR
   Posees quand chaque option porte une couleur (list_product.attr_couleur).
   La couleur arrive par --pastille, calculee cote serveur. */
.declinaison-pastilles { gap: 11px; }

.declinaison-pastille {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--pastille, var(--sand));
  /* Le filet interieur evite qu'une teinte tres claire disparaisse sur
     l'ivoire du fond. */
  box-shadow: inset 0 0 0 1px rgba(16, 16, 15, .18);
  transition: transform 250ms ease;
}

.declinaison-pastille:hover { transform: scale(1.08); }

/* Option retenue : un anneau noir detache de la pastille, pour rester
   visible quelle que soit la teinte. */
.declinaison-pastille.is-active {
  box-shadow:
    inset 0 0 0 1px rgba(16, 16, 15, .18),
    0 0 0 2px var(--ivory),
    0 0 0 3px var(--black);
}

/* Coche blanche sur teinte foncee, noire sur teinte claire : c'est le role
   que tenait couleur.claire_couleur dans l'ancien back-office. */
.declinaison-pastille-coche {
  width: 11px;
  height: 6px;
  border-bottom: 1.5px solid var(--white);
  border-left: 1.5px solid var(--white);
  opacity: 0;
  transform: rotate(-45deg) translate(1px, -2px);
  transition: opacity 200ms ease;
}

.declinaison-pastille.is-active .declinaison-pastille-coche { opacity: 1; }

.declinaison-pastille[data-claire="1"] .declinaison-pastille-coche {
  border-bottom-color: var(--black);
  border-left-color: var(--black);
}

/* Le nom de l'option retenue : la couleur seule ne doit pas porter
   l'information. */
.declinaison-choisie {
  margin-top: 11px;
  color: var(--black);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ==========================================================================
   RUBRIQUES DESCRIPTIVES
   Elles vivent dans la colonne de droite, sous le module d'achat : la liste
   des titres, puis le contenu de celui qui est retenu.
   ========================================================================== */

.product-rubriques {
  display: grid;
  gap: 26px;
  margin-top: 34px;
}

.product-rubriques-nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.product-rubrique {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0 15px;
  border-bottom: 1px solid var(--line);
  color: #70685f;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  text-align: left;
  text-transform: uppercase;
  transition: color 250ms ease;
}

.product-rubrique:hover { color: var(--black); }
.product-rubrique.is-active { color: var(--black); }

/* Signe + / - : la barre verticale s'efface sur la rubrique ouverte. */
.product-rubrique-signe {
  position: relative;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}

.product-rubrique-signe::before,
.product-rubrique-signe::after {
  position: absolute;
  background: currentColor;
  content: "";
  transition: opacity 250ms ease, transform 250ms ease;
}

.product-rubrique-signe::before { top: 4px; left: 0; width: 9px; height: 1px; }
.product-rubrique-signe::after { top: 0; left: 4px; width: 1px; height: 9px; }

.product-rubrique.is-active .product-rubrique-signe::after {
  opacity: 0;
  transform: scaleY(0);
}

.product-rubrique-panel[hidden] { display: none; }

.product-rubrique-heading {
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: clamp(26px, 4.4vw, 36px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.05;
}

/* ==========================================================================
   GALERIE PRODUIT
   Miniatures a gauche de l'image principale, sur sa hauteur exacte. Au-dela
   de ce que la colonne peut montrer, elle defile et les fleches paraissent.
   ========================================================================== */
/*
 * Le rail est sorti du flux et cale sur les bords du conteneur. C'est ce qui
 * lui donne exactement la hauteur de l'image principale : en flux, ses neuf
 * vignettes imposeraient leur propre hauteur et la colonne depasserait le
 * visuel. La reserve de place se fait par le padding gauche.
 */
.product-gallery {
  position: relative;
  /* Element de grille : sans cela son min-width: auto laisserait la bande
     de miniatures imposer sa largeur et deborder l ecran en mobile. */
  min-width: 0;
}

/* La reserve de place pour le rail n'a lieu d'etre que s'il existe : sans
   miniatures, l'image principale part du bord du conteneur. */
.product-gallery.has-rail { padding-left: 86px; }

.product-gallery .product-detail-media { width: 100%; }

.gallery-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 74px;
  gap: 6px;
}

.gallery-thumbs {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 0;          /* sans quoi le contenu impose sa hauteur */
  overflow-y: auto;
  list-style: none;
  scrollbar-width: none;  /* la barre est remplacee par les fleches */
}

.gallery-thumbs::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .gallery-thumbs { scroll-behavior: smooth; }
}

.gallery-thumb {
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: .82;
  background: #e5ded4;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color 250ms ease, opacity 250ms ease;
}

.gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb:hover { border-color: var(--sand); }
.gallery-thumb.is-active { border-color: var(--black); }

/* L attribut hidden doit l emporter : la regle de l agent utilisateur
   ([hidden]{display:none}) a la meme specificite que .gallery-arrow et
   serait battue par l ordre de declaration. */
.gallery-arrow[hidden] { display: none; }

.gallery-arrow {
  display: grid;
  flex-shrink: 0;
  height: 22px;
  place-items: center;
  background: none;
  border: 1px solid var(--line);
  color: #4a443d;
  cursor: pointer;
  transition: border-color 250ms ease, color 250ms ease;
}

.gallery-arrow:hover { border-color: var(--black); color: var(--black); }

/* Borne atteinte : la fleche reste en place mais cesse d inviter au clic. */
.gallery-arrow:disabled { color: var(--sand); cursor: default; }
.gallery-arrow:disabled:hover { border-color: var(--line); color: var(--sand); }

.gallery-arrow span {
  width: 7px;
  height: 7px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
}

.gallery-arrow[data-galerie-vers="-1"] span { transform: translateY(2px) rotate(-135deg); }
.gallery-arrow[data-galerie-vers="1"] span { transform: translateY(-2px) rotate(45deg); }

/* Sous 760px la colonne de gauche mangerait la largeur de l'image : les
   miniatures passent en bande horizontale sous le visuel. */
@media (max-width: 759px) {
  .product-gallery {
    display: flex;
    flex-direction: column;
  }

  /* Meme specificite que la regle qui la pose, sinon la reserve subsiste. */
  .product-gallery.has-rail { padding-left: 0; }

  /* Le rail suit l'image, quel que soit son rang dans le document. */
  .gallery-rail {
    position: static;
    flex-direction: row;
    align-items: stretch;
    width: auto;
    min-width: 0;          /* sans quoi les vignettes imposent leur largeur */
    margin-top: 10px;
    order: 2;
  }

  .gallery-thumbs {
    flex-direction: row;
    min-width: 0;          /* autorise la bande a etre plus etroite que son contenu */
    overflow-x: auto;
    overflow-y: hidden;
  }

  .gallery-thumb { width: 66px; flex-shrink: 0; }

  .gallery-arrow { width: 22px; height: auto; }
  .gallery-arrow[data-galerie-vers="-1"] span { transform: translateX(2px) rotate(135deg); }
  .gallery-arrow[data-galerie-vers="1"] span { transform: translateX(-2px) rotate(-45deg); }
}

/* ==========================================================================
   DESCRIPTION SOUS LE TITRE
   Meme typographie que les rubriques, mais bornee a quelques lignes pour ne
   pas repousser le bloc d'achat. product.js revele le lien "Lire la suite"
   et pose .is-tronque quand le texte est reellement coupe.
   ========================================================================== */

.product-detail-description {
  margin-top: 16px;
  max-width: 54ch;
}

.product-detail-description-corps { overflow: hidden; }

.product-detail-description:not(.is-open) .product-detail-description-corps {
  max-height: 7.8em;
}

/* Le degrade signale la coupe. Il n'est pose que sur un texte tronque. */
.product-detail-description.is-tronque:not(.is-open) .product-detail-description-corps {
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}

.product-detail-description-corps > *:first-child { margin-top: 0; }
.product-detail-description-corps > *:last-child { margin-bottom: 0; }

.description-more { margin-top: 12px; }
.description-more[hidden] { display: none; }

/* ==========================================================================
   ENCADRE D'ACHAT
   Prix, quantite, boutons et disponibilite reunis dans un cadre, sur la
   fiche produit comme sur la landing page (meme partiel).
   ========================================================================== */

/* L'encadre porte desormais la separation : le filet du bloc, herite de
   fragrance.css, ferait doublon avec sa bordure. */
.purchase-block:has(.purchase-card) {
  padding-top: 0;
  border-top: 0;
}

.purchase-card {
  padding: 20px 18px;
  border: 1px solid var(--line);
  background: var(--white);
}

/* Prix a gauche, quantite a droite des que la largeur le permet. */
.purchase-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
}

.purchase-price { min-width: 0; }
.purchase-card .quantity-field { margin-top: 0; }
.purchase-card .purchase-actions { margin-top: 18px; }

@media (min-width: 760px) {
  .purchase-card { padding: 24px 22px; }
}

/* ==========================================================================
   BARRE D'ACHAT MOBILE
   Sous 760px, les commandes d'achat restent a portee pendant la lecture de
   la fiche. Elle s'efface quand le module d'achat lui-meme est a l'ecran.
   ========================================================================== */

.buy-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  border-top: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 -6px 24px rgba(16, 16, 15, .08);
  transform: translateY(100%);
  transition: transform 320ms var(--ease);
}

.buy-bar.is-visible { transform: translateY(0); }

/* Le site respecte partout la demande de moins d'animations. */
@media (prefers-reduced-motion: reduce) {
  .buy-bar { transition: none; }
}

.buy-bar-inner {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}

.buy-bar-quantity { flex: 0 0 auto; }

/* Valeur seule : la saisie au clavier reste celle du module d'achat, pour
   ne pas avoir deux champs portant la meme quantite. */
.buy-bar-value {
  display: grid;
  min-width: 30px;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
}

/* Les deux boutons se partagent la place restante. Le libelle peut passer
   sur deux lignes plutot que deborder sur un petit ecran. */
.buy-bar .buy-button {
  width: auto;
  min-width: 0;
  min-height: 46px;
  flex: 1 1 0;
  margin-top: 0;
  justify-content: center;
  padding: 10px 8px;
  font-size: 8px;
  letter-spacing: .1em;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
}

/* Au-dela de 760px la colonne d'achat est toujours proche : la barre n'a
   plus de raison d'etre. */
@media (min-width: 760px) {
  .buy-bar { display: none; }
}

/* ==========================================================================
   RANG DE L'IMAGE
   ========================================================================== */

.product-media-counter {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, .88);
  color: var(--black);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1;
}