/* =============================================================
   HYDRODIV — Product page (refonte D-compact 2026-05-11)
   Disposition éditoriale asymétrique :
   - Galerie large à gauche (1.5fr) avec photo plafonnée à la fenêtre
   - Carte d'achat blanche à droite (1fr) qui chevauche la photo
   - Titre en Fraunces serif
   - Eyebrow éditorial + specs strip + réassurance dans la carte
   - Description courte déplacée APRÈS le bloc d'achat
   ============================================================= */

/* Import Fraunces (serif éditorial) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&display=swap');

/* ---------- 1. Fond blanc pur absolu (2026-05-19) ----------
   Couvre tous les cas : body.has-hd-chrome (qui porte l'aurora sur la home)
   ne doit JAMAIS poser ses gradients sur la fiche produit. */
body.page-product,
body.has-hd-chrome.page-product,
body.has-hd-chrome[class*="page-product"] {
  background-color: #FFFFFF !important;
  background-image: none !important;
  background: #FFFFFF !important;
}
body.page-product #hd-starfield,
body.page-product .hd-star { display: none !important; }
/* Les orbs aurora restent visibles sur produit (atténués via opacity dans home.css) */
body.page-product .hd-top { background: rgba(255,255,255,.86); }
/* 2026-05-21 : .hd-info reste blanc partout (parité home), override retiré. */

/* ---------- 2. Wrapper ---------- */
body.page-product #content-wrapper {
  max-width: 1380px;
  margin: 0 auto;
  padding: 28px var(--hd-pad, clamp(20px, 4vw, 64px)) 80px;
}
body.page-product #content {
  padding: 0 !important;
  background: transparent !important;
}

/* ---------- 3. Grid équilibré : 50/50 image + titre+puces — refonte 2026-05-19
   Plus de chevauchement, plus de smoky shadow. Le CTA achat s'étend plein
   largeur en-dessous via .product-actions-band (réorganisé par JS). */
body.page-product .product-detail-primary {
  margin-bottom: 48px !important;
}
body.page-product .product-detail-primary .product-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 0 !important;
  align-items: start;
}
@media (min-width: 992px) {
  body.page-product .product-detail-primary .product-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }
}
body.page-product .product-detail-primary .product-images,
body.page-product .product-detail-primary .product-info {
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}

/* ---------- 4. Eyebrow éditorial ---------- */
body.page-product .product-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6B7280;
  margin: 0 0 18px;
}
body.page-product .product-eyebrow .cat { color: #6B7280; }
body.page-product .product-eyebrow .num { color: #1F2D7D; font-weight: 500; }
body.page-product .product-eyebrow::before {
  content: "—";
  color: #9CA3AF;
}

/* ---------- 5. Galerie : fond BLANC + hauteur plafonnée ---------- */
body.page-product .images-container { text-align: left !important; }
body.page-product .images-container .product-cover {
  background: #FFFFFF !important;
  border-radius: 18px;
  border: 1px solid #E5E7EB;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1 !important;
  max-height: 620px;
  height: auto;
  box-shadow: none !important;
  filter: none !important;
}
/* Override theme custom.css : retire le mix-blend + drop-shadow qui
   amplifient la fumée du JPG source. Retire aussi la bordure or interne. */
body.page-product .images-container .product-cover img,
body.page-product .images-container .product-cover .js-qv-product-cover {
  mix-blend-mode: normal !important;
  filter: none !important;
  -webkit-filter: none !important;
}
body.page-product .images-container .product-cover::before {
  display: none !important;
}
body.page-product .images-container .product-cover::after {
  display: none !important;
}
/* Sticky : l'image suit le scroll tant que la colonne droite (longue) défile.
   Évite l'effet "image minuscule à côté d'une colonne géante". */
@media (min-width: 992px) {
  body.page-product .product-images {
    position: sticky !important;
    top: 100px;
    align-self: start;
  }
}
body.page-product .images-container .product-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  padding: clamp(8px, 1.2vw, 18px) !important;
  border: none !important;
  background: transparent !important;
}
body.page-product .images-container .product-cover .layer {
  opacity: 0;
  transition: opacity .25s ease;
  background: rgba(255,255,255,0);
  cursor: zoom-in;
}
body.page-product .images-container .product-cover:hover .layer {
  opacity: 1;
  background: rgba(255,255,255,0.12);
}

/* Miniatures HORIZONTALES sous la photo, fond BLANC */
body.page-product .product-images {
  padding: 18px 0 0 !important;
}
body.page-product .product-images .owl-carousel {
  justify-content: flex-start !important;
  gap: 12px;
}
body.page-product .thumb-container,
body.page-product .js-thumb-container {
  width: 88px !important;
  height: 88px !important;
  flex: 0 0 88px;
  background: #FFFFFF !important;
  border-radius: 10px;
  border: 1.5px solid #E5E7EB;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, transform .2s;
  padding: 6px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
body.page-product .thumb,
body.page-product .js-thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
body.page-product .thumb-container:hover,
body.page-product .thumb.selected,
body.page-product .js-thumb.js-thumb-selected {
  border-color: #1F2D7D !important;
  transform: translateY(-1px);
}

/* ---------- 6. Colonne info — refonte 2026-05-19 ----------
   Plus de chevauchement, plus de box-shadow épaisse (effet "fumée").
   Fond blanc plat, bordure douce, le contenu respire à côté de l'image. */
body.page-product .product-info {
  background: #FFFFFF;
  border: none;
  border-radius: 0;
  padding: 8px 0 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  position: static !important;
  z-index: auto !important;
}
@media (min-width: 992px) {
  body.page-product .product-info {
    padding: 12px 0 0 !important;
  }
}

/* Image cover : ombre TRÈS légère, pas de "fumée" */
body.page-product .images-container .product-cover {
  box-shadow: none !important;
  filter: none !important;
}
body.page-product .images-container .product-cover::before,
body.page-product .images-container .product-cover::after {
  display: none !important;
}

/* ---------- 7. Titre pleine largeur AU-DESSUS de la grille (refonte 2026-05-19) ---------- */
body.page-product .product-detail-head {
  margin: 0 0 32px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--hd-rule, #EAEAEC);
  text-align: center;
}
body.page-product .product-detail-head .product-eyebrow {
  margin-bottom: 12px;
}
body.page-product h1.product-title,
body.page-product .product-title {
  font-family: "Fraunces", ui-serif, Georgia, serif !important;
  font-size: clamp(2.6rem, 5vw, 4rem) !important;
  font-weight: 400 !important;
  font-variation-settings: "opsz" 90, "SOFT" 30, "WONK" 0 !important;
  letter-spacing: -0.024em !important;
  line-height: 1.12 !important;
  color: #0A0E2A !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 2.5vw, 32px) !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  max-width: none !important;
}
/* Traits horizontaux de part et d'autre du titre, au même niveau */
body.page-product .product-title::before,
body.page-product .product-title::after {
  content: "";
  flex: 1 1 0;
  height: 2px;
  background: #1F2D7D;
}

/* Sous-titre descriptif (ancien titre Amazon, riche en mots-clés) */
body.page-product .product-subtitle {
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.4;
  color: #5A6173;
  margin: 0.9rem auto 0 auto;
  max-width: none;
  width: 100%;
  text-align: center;
}

/* ---------- 8. Specs strip (sous le titre) ---------- */
body.page-product .product-specs-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid #E5E7EB;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B7280;
}
body.page-product .product-specs-strip > span:not(:last-child)::after {
  content: "·";
  margin-left: 10px;
  color: #9CA3AF;
}

/* ---------- 9. Prix compact ---------- */
body.page-product .product-prices {
  margin: 0 0 20px !important;
  padding: 0 0 20px !important;
  border-top: none !important;
  border-bottom: 1px solid #E5E7EB !important;
  position: static !important;
}
body.page-product .current-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
}
body.page-product .current-price .price,
body.page-product .product-price {
  font-family: "Inter", sans-serif !important;
  font-size: clamp(1.7rem, 2.4vw, 2.15rem) !important;
  font-weight: 300 !important;
  color: #1F2D7D !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
}
body.page-product .tax-label {
  font-family: "JetBrains Mono", monospace;
  font-size: .66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B7280;
}
body.page-product .product-discount .regular-price {
  text-decoration: line-through;
  color: #9CA3AF;
  font-size: 1rem;
}
body.page-product .discount-percentage,
body.page-product .has-discount .discount {
  background: #8DC641 !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 3px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .08em;
}
body.page-product .shipping-delivery-label {
  margin-top: 8px;
  font-size: .82rem;
  color: #2C3258;
}

/* ---------- 10. Variantes compactes (couleur en pastilles XL) ---------- */
body.page-product .product-information { padding-left: 0 !important; }
body.page-product .product-variants {
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
}
body.page-product .product-variants > .product-variants-item {
  display: block !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  border: none !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
body.page-product .product-variants > .product-variants-item:last-child {
  margin-bottom: 0 !important;
}

/* Référence : ligne discrète */
body.page-product .product-reference.product-variants-item,
body.page-product .product-manufacturer.product-variants-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.06em;
  color: #6B7280;
  border-bottom: 1px dashed #E5E7EB !important;
  padding: 0 0 10px !important;
  margin-bottom: 14px !important;
}
body.page-product .product-reference .control-label,
body.page-product .product-manufacturer .control-label {
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-weight: 400 !important;
  font-size: .66rem !important;
  color: #6B7280 !important;
}
body.page-product .product-reference .control-item,
body.page-product .product-manufacturer .control-item {
  color: #0A0E2A !important;
  font-weight: 500 !important;
  font-size: .82rem !important;
}

/* Labels variantes (couleur, taille…) */
body.page-product .product-variants-item .control-label {
  display: block !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: .7rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #6B7280 !important;
  margin-bottom: 10px !important;
  font-weight: 400 !important;
  width: 100% !important;
}
body.page-product .product-variants-item .control-item {
  width: 100% !important;
  padding: 0 !important;
}
body.page-product .product-variants-item ul.color-list,
body.page-product .product-variants-item ul.radio-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: flex-start !important;
}

/* Pastilles couleur XL avec anneau navy au survol/sélection */
body.page-product .color-list .input-container {
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  position: relative;
}
body.page-product .color-list .input-color {
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  width: 100% !important;
  height: 100% !important;
}
body.page-product .color-list .color {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  display: block;
  box-shadow:
    inset 0 0 0 2px #FFFFFF,
    0 0 0 1.5px #D5D8DE;
  transition: box-shadow .2s ease, transform .2s ease;
}
body.page-product .color-list .input-color:checked + .color,
body.page-product .color-list .input-container:hover .color {
  box-shadow:
    inset 0 0 0 2px #FFFFFF,
    0 0 0 2px #1F2D7D;
  transform: scale(1.04);
}
body.page-product .radio-list .input-container { margin: 0 !important; }
body.page-product .radio-list .radio-label {
  border: 1.5px solid #B5BAC4;
  border-radius: 999px;
  padding: 8px 16px !important;
  font-size: .86rem;
  font-weight: 500;
  background: #FFFFFF;
  color: #0A0E2A;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
body.page-product .radio-list .input-radio:checked + .radio-label {
  border-color: #1F2D7D;
  background: #1F2D7D;
  color: #fff;
}

/* ---------- 11. Add-to-cart row (qté + bouton compact) ---------- */
body.page-product .product-add-to-cart {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
body.page-product .product-add-to-cart .product-quantity {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 12px;
  position: static !important;
}
body.page-product .product-add-to-cart .qty {
  margin: 0 !important;
  flex: 0 0 auto;
}
body.page-product .qty .input-group {
  border: 1.5px solid #B5BAC4;
  border-radius: 999px;
  overflow: hidden;
  background: #FFFFFF;
  height: 52px;
  min-width: 110px;
  display: flex;
  align-items: center;
}
body.page-product .qty input,
body.page-product .qty #quantity_wanted {
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 1rem !important;
  width: 56px !important;
  height: 100% !important;
  padding: 0 !important;
  -moz-appearance: textfield;
}
body.page-product .qty input::-webkit-outer-spin-button,
body.page-product .qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.page-product .qty .btn-touchspin,
body.page-product .bootstrap-touchspin .btn {
  background: transparent !important;
  border: none !important;
  color: #2C3258 !important;
  padding: 0 14px !important;
  box-shadow: none !important;
  height: 100% !important;
  font-size: 1.1rem !important;
}
body.page-product .product-add-to-cart .add {
  flex: 1 1 auto;
  align-items: stretch !important;
  display: flex !important;
  flex-direction: column;
}
body.page-product #add-to-cart {
  display: block;
  width: 100%;
}
body.page-product .add-to-cart {
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 24px !important;
  font-size: .98rem !important;
  font-weight: 500 !important;
  font-family: "Inter", sans-serif !important;
  letter-spacing: 0.02em;
  height: 52px;
  background: #0A0E2A !important;
  border: 1.5px solid #0A0E2A !important;
  color: #fff !important;
  border-radius: 999px !important;
  transition: all .2s ease;
  box-shadow: 0 8px 20px -8px rgba(10,14,42,.4);
}
body.page-product .add-to-cart:hover {
  background: #1F2D7D !important;
  border-color: #1F2D7D !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px rgba(31,45,125,.5);
}
body.page-product .add-to-cart .icon-shopping-basket-round {
  margin-right: 10px !important;
}
body.page-product .product-add-to-cart .add .js-product-availability,
body.page-product .product-add-to-cart .add .product-availability-date {
  width: 100%;
  margin-top: 12px !important;
  font-family: "JetBrains Mono", monospace;
  font-size: .76rem;
  letter-spacing: 0.04em;
  font-weight: 400 !important;
}

/* ---------- 12. Bandeau réassurance dans la carte ---------- */
body.page-product .product-reassurance-strip {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #E5E7EB;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}
body.page-product .product-reassurance-strip .reassurance-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .85rem;
  color: #2C3258;
  line-height: 1.3;
}
body.page-product .product-reassurance-strip .reassurance-item::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #8DC641 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2L4.8 8.5L9.5 3.5'/></svg>") center/12px no-repeat;
}

/* ---------- 13. Description courte = PUCES en colonne droite (refonte 2026-05-21 v4) ----------
   Layout 2026-05-21 : la colonne droite contient les puces PUIS le prix.
   Le bloc Achat (.product-actions) + réassurance vivent désormais en colonne
   gauche sous la galerie (.product-buy-block) — les `order` ci-dessous restent
   en place comme garde-fou si le markup réinjecte ces éléments. */
body.page-product .product-information {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px;
}
body.page-product .product-information > .product-description-short,
body.page-product .product-information .product-description-short,
body.page-product #product-description-short-1,
body.page-product [id^="product-description-short-"],
body.page-product .product-description-short {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  order: 1 !important;
  margin: 4px 0 0 !important;
  padding: 18px 20px !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 14px !important;
  font-size: .95rem !important;
  line-height: 1.55 !important;
  color: var(--hd-ink-soft, #2C3258) !important;
}
body.page-product .product-information .product-prices { order: 2 !important; }
body.page-product .product-information .product-actions { order: 3 !important; }
body.page-product .product-information .product-reassurance-strip { order: 4 !important; }

/* Puces — sans tick, police lisible (refonte 2026-05-19) */
body.page-product .product-description-short > p {
  position: relative;
  margin: 0 !important;
  padding: 12px 0 !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: #1A2138 !important;
  font-style: normal !important;
  border-bottom: 1px solid #F1F3F6;
}
body.page-product .product-description-short > p:last-child { border-bottom: none; }
body.page-product .product-description-short > p::before { display: none !important; }
body.page-product .product-description-short > p:first-child {
  padding: 4px 0 16px 0 !important;
  margin: 0 0 4px !important;
  border-bottom: 1px solid #E5E7EB;
  font-size: 1.06rem !important;
  font-weight: 500;
  line-height: 1.55;
  color: #0A0E2A !important;
}
/* Libellés en gras (EFFICACITÉ RADICALE, RECHARGEABLE…) — navy lisible, pas mono */
body.page-product .product-description-short > p > b:first-child,
body.page-product .product-description-short > p > span:first-child b {
  display: inline;
  font-family: "Inter", -apple-system, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--hd-navy, #1F2D7D) !important;
  margin-right: 4px;
  text-decoration: none !important;
}
body.page-product .product-description-short > p > span[style*="underline"] {
  text-decoration: none !important;
}
body.page-product .product-description-short *[style*="font-family"] {
  font-family: inherit !important;
}
/* ---------- 14. Tabs (description longue / specs) en pleine largeur ---------- */
body.page-product .product-detail-secondary {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 24px;
  padding: clamp(28px, 4vw, 56px);
  margin-top: 56px !important;
}
body.page-product .product-tabs,
body.page-product .tabs {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
body.page-product .nav-tabs {
  border-bottom: 1px solid #E5E7EB !important;
  margin-bottom: 28px;
  display: flex;
  gap: 36px;
  background: transparent;
  padding: 0;
}
body.page-product .nav-tabs .nav-link {
  color: #6B7280 !important;
  background: transparent !important;
  border: none !important;
  padding: 14px 0 !important;
  font-family: "Inter", sans-serif;
  font-size: .96rem;
  font-weight: 500;
  position: relative;
  transition: color .2s;
}
body.page-product .nav-tabs .nav-link.active { color: #0A0E2A !important; }
body.page-product .nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 2px;
  background: #1F2D7D;
}
body.page-product .tab-pane {
  font-size: 1rem;
  line-height: 1.7;
  color: #2C3258;
}
body.page-product .product-features dl {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: 12px 24px;
}
body.page-product .product-features dt {
  font-family: "JetBrains Mono", monospace;
  font-size: .74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B7280;
  border-top: 1px solid #E5E7EB;
  padding-top: 14px;
  font-weight: 400;
}
body.page-product .product-features dd {
  font-size: .96rem;
  color: #0A0E2A;
  border-top: 1px solid #E5E7EB;
  padding-top: 14px;
  margin: 0;
}

/* ---------- 15. Indicateur stock ---------- */
body.page-product .product-availability {
  font-family: "JetBrains Mono", monospace;
  font-size: .8rem;
  letter-spacing: 0.04em;
  margin-top: 8px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.page-product .product-availability::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
body.page-product .product-availability.product-available { color: #6FA02C; }

/* ---------- 16. Page header / breadcrumb caché (déjà désactivé en TPL) ---------- */
body.page-product .breadcrumb,
body.page-product #breadcrumb { display: none; }