/* ═══════════════════════════════════════════════════════════
   FICHE PRODUIT CUBX — v2.5.0
   100% variables CSS — zéro couleur hexadécimale en dur
   ═══════════════════════════════════════════════════════════ */

/* ── Nouvelles variables locales page produit ── */
:root {
  --cubx-pp-card-bg:      var(--h2j-bg-card, #ffffff);
  --cubx-pp-card-border:  var(--h2j-border, #e5e7eb);
  --cubx-pp-card-radius:  var(--cubx-radius, 8px);
  --cubx-pp-card-pad:     20px;
  --cubx-pp-gap:          14px;
  --cubx-sticky-bar-enabled: 0;
  --cubx-pp-gallery-w:    48%;   /* largeur panneau image gauche */
}

.cubx-pp {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px 56px;
}

.cubx-pp-breadcrumb {
  margin-bottom: 12px;
  padding-left: calc(var(--cubx-burger-width, 44px) + 8px);
}

@media (min-width: 901px) {
  .cubx-pp-breadcrumb { padding-left: 0; }
}

/* .cubx-pp__top — remplacé par layout hero (gallery-col fixed + info-col margin) */
.cubx-pp__top { display: contents; }

/* =======================================================================
   CUBX HERO LAYOUT — Compensation pleine largeur
   Quand le hero gallery est actif (homepage, catégorie, produit),
   tout élément hors du wrapper hero doit être compensé vers la droite.
   body.cubx-hero-active est ajouté par ecosystem (homepage/cat via Smarty,
   produit via inline script dans hookDisplayHeader).
   ======================================================================= */
body.cubx-hero-active .footer-container,
body.cubx-hero-active .js-footer,
body.cubx-hero-active #footer,
body.cubx-hero-active .cubx-pp-below {
  margin-left: var(--cubx-pp-gallery-w, 48%);
}

@media (max-width: 900px) {
  body.cubx-hero-active .footer-container,
  body.cubx-hero-active .js-footer,
  body.cubx-hero-active #footer,
  body.cubx-hero-active .cubx-pp-below {
    margin-left: 0;
  }
}

/* Zone sous l'article — compense l'image fixed gauche */
.cubx-pp-below {
  padding: 0 32px 32px;
}

@media (max-width: 900px) {
  .cubx-pp-below { padding: 0 16px 24px; }
}

/* ─────────────────────────────────────────────────────────
   LAYOUT PAGE PRODUIT — Hero pattern
   Image gauche fixed 100vh, colonne droite scrollable
   Même architecture que le hero panel homepage/catégorie
   ───────────────────────────────────────────────────────── */

body#product .cubx-pp {
  max-width: none;
  padding: 0;
}

.cubx-pp__layout {
  position: relative;
  min-height: 100vh;
}

.cubx-pp__gallery-col {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--cubx-pp-gallery-w, 48%);
  height: 100vh;
  z-index: 10;
  overflow: hidden;
  background: var(--h2j-bg-light);
}

.cubx-pp__info-col {
  margin-left: var(--cubx-pp-gallery-w, 48%);
  min-height: 100vh;
  position: relative;
  z-index: 5;
  padding: 24px 32px 56px;
  box-sizing: border-box;
  background: var(--h2j-bg-light);
}

@media (max-width: 900px) {
  .cubx-pp__gallery-col {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 70vw;
    z-index: auto;
  }
  .cubx-pp__info-col {
    margin-left: 0;
    padding: 16px 16px 48px;
  }
}

.cubx-pp__gallery-col .cubx-gallery {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.cubx-gallery__main {
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

.cubx-gallery__zoom {
  width: 100%;
  height: 100%;
  overflow: hidden;
  line-height: 0;
  cursor: default;
}

.cubx-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: var(--cubx-pp-fit, cover);
  object-position: var(--cubx-pp-pos, center center);
  background: var(--h2j-bg-light);
  display: block;
  /* B&W product : --cubx-nb-product=1 active grayscale, hover restaure la couleur */
  filter: var(--cubx-pp-grayscale, grayscale(0%))
          grayscale(calc(var(--cubx-nb-product, 0) * 100%));
  mix-blend-mode: var(--cubx-pp-blend, normal);
  transition: opacity 0.25s ease, filter 0.35s ease;
  cursor: zoom-in;
}

/* Hover : restaure la couleur si B&W actif */
.cubx-pp__gallery-col:hover .cubx-gallery__img {
  filter: var(--cubx-pp-grayscale, grayscale(0%)) grayscale(0%);
}

.cubx-gallery__no-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--h2j-bg-light);
  color: var(--h2j-border);
}

/* Overlay + watermark sur l'image gauche */
.cubx-gallery__main::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cubx-pp-overlay, transparent);
  pointer-events: none;
  z-index: 1;
}

/* Bouton zoom */
.cubx-gallery__zoom-btn {
  all: unset;
  cursor: pointer;
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  color: var(--h2j-text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  backdrop-filter: blur(4px);
  transition: background .15s, transform .15s;
  opacity: 0;
}

.cubx-gallery__main:hover .cubx-gallery__zoom-btn {
  opacity: 1;
}

.cubx-gallery__zoom-btn:hover {
  background: rgba(255,255,255,1);
  transform: scale(1.08);
}

@media (max-width: 900px) {
  .cubx-gallery__zoom-btn { opacity: 1; }
}

/* Lightbox plein écran */
.cubx-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.cubx-lightbox--open {
  display: flex;
  animation: cubxLbFadeIn .2s ease;
}

@keyframes cubxLbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cubx-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  cursor: default;
  box-shadow: 0 8px 48px rgba(0,0,0,0.6);
  transform-origin: center;
  transition: transform 0.1s ease;
  user-select: none;
}

.cubx-lightbox__close {
  all: unset;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  transition: background .15s;
}

.cubx-lightbox__close:hover {
  background: rgba(255,255,255,0.25);
}

.cubx-lightbox__nav {
  all: unset;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  transition: background .15s;
  z-index: 1;
}

.cubx-lightbox__nav--prev { left: 20px; }
.cubx-lightbox__nav--next { right: 20px; }
.cubx-lightbox__nav:hover { background: rgba(255,255,255,0.28); }

.cubx-lightbox__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  pointer-events: none;
}

.cubx-gallery__watermark {
  position: absolute;
  bottom: 12px;
  right: 14px;
  z-index: 2;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  pointer-events: none;
  user-select: none;
  mix-blend-mode: screen;
}

/* Flags sur l'image — droite par défaut pour éviter le burger */
.cubx-gallery__flags {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: flex; flex-direction: column; gap: 5px;
  list-style: none; margin: 0; padding: 0;
  pointer-events: none;
  align-items: flex-end;
}

.cubx-gallery__flag {
  display: inline-block; padding: 3px 9px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: var(--cubx-accent);
}

.cubx-gallery__flag--new       { background: var(--h2j-success); }
.cubx-gallery__flag--on-sale,
.cubx-gallery__flag--discount  { background: var(--cubx-accent); }
.cubx-gallery__flag--out_of_stock { background: var(--h2j-text-light); }

/* Badges thème CUBX — colonne gauche */
.cubx-gallery__badges {
  position: absolute; bottom: 16px; left: 16px; z-index: 2;
  display: flex; flex-direction: column; gap: 5px;
  list-style: none; margin: 0; padding: 0;
  pointer-events: none;
  align-items: flex-start;
}

.cubx-gallery__badge {
  display: inline-block; padding: 4px 10px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff;
}

.cubx-gallery__badge--new   { background: var(--h2j-info, #3b82f6); }
.cubx-gallery__badge--used  { background: #f97316; } /* v2.5.190 — occasion (orange) */
.cubx-gallery__badge--refurbished { background: #3b82f6; } /* v2.5.190 — reconditionné (bleu) */
.cubx-gallery__badge--top   { background: var(--cubx-pill-bestseller, #f59e0b); }
/* v2.5.87 — Badges stock 3 états avec couleurs theme-driven.
   Injecté dynamiquement par theme.js (syncGalleryStockBadge) selon
   le statut h2jstock : in_stock | low_stock | out_of_stock.
   Forme rectangulaire (border-radius 3px) cohérente avec les autres
   badges, pas de pill arrondi. */
.cubx-gallery__badge--stock {
  font-size: 10px;
  padding: 4px 10px;
  letter-spacing: .05em;
}
.cubx-gallery__badge--stock-in_stock {
  background: var(--cubx-pill-positive, var(--h2j-success, #10b981));
}
.cubx-gallery__badge--stock-low_stock {
  background: var(--cubx-pill-attention, var(--h2j-warning, #f59e0b));
}
.cubx-gallery__badge--stock-out_of_stock {
  background: var(--cubx-pill-negative, var(--h2j-error, #ef4444));
}

/* ── Miniatures cubes — colonne droite, avant le titre ──
   v2.5.148 :
     - Mode standard (≤8 images) : flex-wrap simple, layout existant.
     - Mode --many (>8 images) : grille figée à 2 lignes max + scroll
       horizontal du wrapper, avec dégradé fade sur le bord droit pour
       signaler qu'il y a plus d'images en swipant.
   Hauteur 2 lignes : 2 * 56px (thumb) + 6px (gap) = 118px.
*/
.cubx-pp__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

/* Mode "beaucoup d'images" : 2 lignes figées + scroll horizontal */
.cubx-pp__thumbs--many {
  /* Grid pour faire 2 lignes propres : auto-flow column génère des colonnes
     successives, chaque colonne contient au plus 2 cellules (grâce à
     grid-template-rows). Le wrapper scroll horizontalement. */
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 56px 56px;
  grid-auto-columns: 56px;
  gap: 6px;
  /* Hauteur fixée à 2 lignes pour ne pas pousser le contenu */
  height: calc(56px * 2 + 6px);
  /* Scroll horizontal */
  overflow-x: auto;
  overflow-y: hidden;
  /* Cacher la scrollbar tout en gardant la fonctionnalité */
  scrollbar-width: thin;
  scrollbar-color: var(--h2j-border) transparent;
  /* Snap scroll pour aligner les colonnes au scroll (UX plus propre) */
  scroll-snap-type: x proximity;
  /* Position relative pour positionner le dégradé fade en pseudo-élément
     sur le wrapper parent. On utilise un wrapper avec ::after, mais comme
     il y a un overflow scroll, on doit ruser : on pose le fade via un
     pseudo-élément sur le parent .cubx-pp__info-col... non, plus simple :
     on utilise `mask-image` directement sur le scroller qui s'auto-applique
     en bord droit selon scroll position. Mais mask-image cache le contenu,
     on veut juste l'estomper visuellement. Solution choisie :
     position relative sur ce conteneur + un élément fade-overlay sticky
     positionné à droite via un pseudo placé dans le grid en dernière col.
     Mais le plus simple et fiable est mask-image, qui estompe via opacité. */
  -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black calc(100% - 30px), transparent 100%);
}

/* Webkit scrollbar customisée (Chrome/Safari/Edge) */
.cubx-pp__thumbs--many::-webkit-scrollbar {
  height: 4px;
}
.cubx-pp__thumbs--many::-webkit-scrollbar-track {
  background: transparent;
}
.cubx-pp__thumbs--many::-webkit-scrollbar-thumb {
  background: var(--h2j-border);
  border-radius: 2px;
}
.cubx-pp__thumbs--many::-webkit-scrollbar-thumb:hover {
  background: var(--h2j-text-light);
}

/* Snap chaque thumb au scroll en mode --many */
.cubx-pp__thumbs--many .cubx-pp__thumb {
  scroll-snap-align: start;
}

.cubx-pp__thumb {
  all: unset;
  cursor: pointer;
  display: block;
  width: 56px;
  height: 56px;
  border: 2px solid transparent;
  border-radius: var(--cubx-pp-card-radius);
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color .15s, box-shadow .15s;
  line-height: 0;
}

.cubx-pp__thumb:hover,
.cubx-pp__thumb--on {
  border-color: var(--cubx-accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cubx-accent) 25%, transparent);
}

.cubx-pp__thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--h2j-bg-light);
}

/* .cubx-pp__info-sticky — colonne droite scroll libre, plus de sticky interne */
.cubx-pp__info-sticky {
  display: flex;
  flex-direction: column;
  gap: var(--cubx-pp-gap);
}

/* ── Cards ── */
.cubx-pp-card {
  background: var(--cubx-pp-card-bg);
  border: 1px solid var(--cubx-pp-card-border);
  border-radius: var(--cubx-pp-card-radius);
  padding: var(--cubx-pp-card-pad);
}

.cubx-pp-card--identity { display: flex; flex-direction: column; gap: 10px; }

.cubx-pp__identity-grid {
  display: block;
}

.cubx-pp__identity-grid--with-logo {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 0 16px;
  align-items: start;
}

.cubx-pp__identity-left { min-width: 0; }

.cubx-pp__identity-right {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 2px;
}

.cubx-pp__brand-link { display: block; line-height: 0; }

.cubx-pp__brand-img {
  max-width: 150px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .85;
  transition: opacity .15s;
}

.cubx-pp__brand-img:hover { opacity: 1; }

.cubx-pp__ref-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cubx-pp__brand-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cubx-accent);
}

.cubx-pp__flags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.cubx-pp__flag { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--cubx-accent); }
.cubx-pp__flag--new { background: var(--h2j-success); }
.cubx-pp__flag--on-sale, .cubx-pp__flag--discount { background: var(--cubx-accent); }

.cubx-pp__title { font-size: clamp(18px, 2.2vw, 24px); font-weight: 700; color: var(--h2j-text); line-height: 1.25; margin: 0; }

.cubx-pp__ratings { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cubx-pp__stars { display: flex; gap: 1px; line-height: 1; }
.cubx-pp__star { color: var(--h2j-border); font-size: 15px; }
.cubx-pp__star--on { color: var(--h2j-warning); }
.cubx-pp__ratings-count, .cubx-pp__ratings-empty { color: var(--h2j-text-light); text-decoration: none; font-size: 12px; }
.cubx-pp__ratings-count:hover, .cubx-pp__ratings-empty:hover { color: var(--cubx-accent); text-decoration: underline; }

.cubx-pp__ref { font-size: 12px; color: var(--h2j-text-light); margin: 0; }
.cubx-pp__ref-label { font-weight: 600; color: var(--h2j-text); margin-right: 3px; }

.cubx-pp__excerpt { font-size: 13px; line-height: 1.6; color: var(--h2j-text); }
.cubx-pp__excerpt ul { padding-left: 18px; margin: 6px 0 0; }
.cubx-pp__excerpt li { margin-bottom: 4px; }
.cubx-pp__excerpt p:last-child { margin-bottom: 0; }

/* Card prix */
.cubx-pp-card--price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 16px 20px; }
.cubx-pp__price { font-size: 28px; font-weight: 800; color: var(--cubx-accent); line-height: 1; }
.cubx-pp__price-regular { font-size: 15px; color: var(--h2j-text-light); text-decoration: line-through; }
.cubx-pp__price-badge { display: inline-flex; align-items: center; padding: 2px 8px; background: var(--cubx-accent); color: #fff; border-radius: 4px; font-size: 12px; font-weight: 700; }
.cubx-pp__tax { font-size: 11px; color: var(--h2j-text-light); align-self: flex-end; margin-bottom: 2px; }

/* Card ATC */
.cubx-pp-card--atc { display: flex; flex-direction: column; gap: 16px; }

/* v2.5.88 — Espace entre les variantes (taille/couleur) et le bloc qty+ATC.
   Avant : .cubx-atc__variants était juste au-dessus du .cubx-atc__row sans
   marge, ce qui collait visuellement. Maintenant on affére le wrapper avec
   un padding-bottom + border-bottom subtil pour bien séparer les 2 zones. */
.cubx-atc__variants {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cubx-pp-card-border);
  margin-bottom: 4px;
}
.cubx-atc__variant-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cubx-atc__variant-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--h2j-text);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
  max-width: 140px;
}
.cubx-atc__variant-value { font-weight: 700; color: var(--cubx-accent); letter-spacing: 0; text-transform: none; }
.cubx-atc__variant-sep { color: var(--h2j-border); font-weight: 300; }
.cubx-atc__swatches,
.cubx-atc__variant-btns {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;  /* v2.5.86 — pills collés à droite, pas étirés */
}

/* ============================================================
   v2.5.89 — SWATCHES COULEUR : design rectangulaire pill compact
   Même échelle que les variant-btn (height 32, min-width 44, padding 6x10).
   Plus de forme ronde — design CUBX = rectangulaires partout.
   Si pas de html_color_code ni texture, le label texte (nom couleur)
   reste lisible à l'intérieur (fallback affichage cubx-swatch__txt).
   ============================================================ */
.cubx-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 32px;
  padding: 0 10px;
  border-radius: 4px;
  cursor: pointer;
  border: 1.5px solid var(--h2j-border);
  outline: none;
  outline-offset: 0;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  position: relative;
  background-clip: padding-box;
  font-size: 12px;
  font-weight: 600;
  color: var(--h2j-text);
  /* Couleur appliquée via style inline depuis product-variants.tpl */
}

/* Quand le swatch a une couleur de fond réelle, on cache le texte interne
   (données accessibilité dans .sr-only). Le pill est alors une pastille
   color-only. Le span .cubx-swatch__txt n'est rendu que pour le fallback. */
.cubx-swatch__txt {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  line-height: 1;
}

.input-color:checked + .cubx-swatch {
  border-color: var(--cubx-accent);
  box-shadow: 0 0 0 1px var(--cubx-accent);
}

.input-color:disabled + .cubx-swatch,
.input-color[disabled] + .cubx-swatch {
  opacity: .35;
  cursor: not-allowed;
}

.input-color:disabled + .cubx-swatch::after,
.input-color[disabled] + .cubx-swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(0,0,0,.25) 4px,
    rgba(0,0,0,.25) 5px
  );
}

.cubx-swatch:hover { outline-color: var(--h2j-text-light); }

/* swatches container : redondant avec variant-btns plus haut, on ajuste juste le gap */
.cubx-atc__swatches { gap: 8px; }

/* ============================================================
   v2.5.89 — VARIANT BUTTONS pills compacts
   Réduction de l'échelle (img1 v2.5.88 était trop gros) :
   font 12, padding 6x14, min-width 44, height 32.
   Box-shadow externe au :checked pour effet ring rose.
   ============================================================ */
.cubx-variant-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 32px;
  padding: 0 14px;
  border: 1.5px solid var(--h2j-border);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--h2j-text);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
  background: #fff;
}

.input-radio:checked + .cubx-variant-btn {
  border-color: var(--cubx-accent);
  color: var(--cubx-accent);
  background: #fff;
  box-shadow: 0 0 0 1px var(--cubx-accent);
  font-weight: 700;
}

.input-radio:disabled + .cubx-variant-btn,
.cubx-variant-btn--off {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: currentColor;
}

.cubx-variant-btn:hover:not(.cubx-variant-btn--off) { border-color: var(--h2j-text-light); }

/* ============================================================
   v2.5.86 — ATC ROW : qty à gauche + ATC pleine largeur à droite
   Pattern img3 : qty compact à gauche, bouton Add to cart /
   Out of stock prend tout l'espace restant via flex:1.
   Inverse de la v2.5.85 (column) qui mettait qty au-dessus.
   ============================================================ */
.cubx-atc__form { display: contents; }
.cubx-atc__row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: stretch;
}
.cubx-atc__row > .cubx-qty {
  flex-shrink: 0;
}
.cubx-atc__row > #add-to-cart {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.cubx-atc__row > #add-to-cart > .cubx-atc__btn {
  width: 100%;
  flex: 1 1 auto;
}

.cubx-qty { display: flex; align-items: stretch; border: 1.5px solid var(--h2j-border); border-radius: var(--cubx-pp-card-radius); overflow: hidden; flex-shrink: 0; }
.cubx-qty__btn { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 38px; height: 48px; color: var(--h2j-text-light); transition: color .15s, background .15s; }
.cubx-qty__btn svg { width: 16px; height: 16px; }
.cubx-qty__btn:hover { color: var(--cubx-accent); background: var(--h2j-bg-light); }
.cubx-qty__input { width: 46px; height: 48px; border: none; border-left: 1px solid var(--h2j-border); border-right: 1px solid var(--h2j-border); text-align: center; font-size: 15px; font-weight: 600; color: var(--h2j-text); background: transparent; outline: none; -moz-appearance: textfield; }
.cubx-qty__input::-webkit-inner-spin-button, .cubx-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; }

.cubx-atc__btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-height: 48px; padding: 0 20px; background: var(--cubx-accent); color: #fff; border-radius: var(--cubx-pp-card-radius); font-size: 14px; font-weight: 700; letter-spacing: .02em; transition: background .15s, box-shadow .15s, transform .1s; user-select: none; position: relative; overflow: hidden; }
.cubx-atc__icon { width: 19px; height: 19px; flex-shrink: 0; }
.cubx-atc__btn:hover:not(:disabled) { background: var(--cubx-accent-2); box-shadow: 0 4px 18px color-mix(in srgb, var(--cubx-accent) 35%, transparent); }
.cubx-atc__btn:active:not(:disabled) { transform: scale(.98); }
.cubx-atc__btn:disabled { background: var(--h2j-border); color: var(--h2j-text-light); cursor: not-allowed; }

.cubx-atc__spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: cubxSpin .65s linear infinite; }
.cubx-atc__btn.is-loading .cubx-atc__label, .cubx-atc__btn.is-loading .cubx-atc__icon { display: none; }
.cubx-atc__btn.is-loading .cubx-atc__spinner { display: block; }
@keyframes cubxSpin { to { transform: rotate(360deg); } }

.cubx-atc__avail { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 7px 10px; border-radius: calc(var(--cubx-pp-card-radius) - 2px); margin: 0; }
.cubx-atc__avail--available { color: var(--h2j-success); background: color-mix(in srgb, var(--h2j-success) 10%, transparent); }
.cubx-atc__avail--last_remaining_items { color: var(--h2j-warning); background: color-mix(in srgb, var(--h2j-warning) 10%, transparent); }
.cubx-atc__avail--unavailable { color: var(--h2j-error); background: color-mix(in srgb, var(--h2j-error) 8%, transparent); }

/* Card dispo */
.cubx-pp-card--avail { padding: 0; overflow: hidden; }
.cubx-avail__row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.cubx-avail__row + .cubx-avail__row { border-top: 1px solid var(--cubx-pp-card-border); }
.cubx-avail__icon { flex-shrink: 0; color: var(--h2j-text-light); display: flex; }
.cubx-avail__icon svg { width: 20px; height: 20px; }
.cubx-avail__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cubx-avail__text strong { font-size: 13px; font-weight: 600; color: var(--h2j-text); }
.cubx-avail__text span { font-size: 11px; color: var(--h2j-text-light); }
.cubx-avail__badge { flex-shrink: 0; display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cubx-avail__badge--ok { background: color-mix(in srgb, var(--h2j-success) 12%, transparent); color: var(--h2j-success); }
.cubx-avail__badge--order { background: color-mix(in srgb, var(--h2j-warning) 12%, transparent); color: var(--h2j-warning); }
.cubx-avail__badge--ko { background: color-mix(in srgb, var(--h2j-error) 10%, transparent); color: var(--h2j-error); }
.cubx-avail__stores { border-top: 1px solid var(--cubx-pp-card-border); }

/* Card réassurance */
.cubx-pp-card--reassurance { padding: 14px 16px; }
.cubx-pp__reassurance { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cubx-pp__reassurance-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 13px; color: var(--h2j-text); border-bottom: 1px solid var(--cubx-pp-card-border); }
.cubx-pp__reassurance-item:last-child { border-bottom: none; }
.cubx-pp__reassurance-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--cubx-accent); }

/* Card partage */
.cubx-pp-card--share { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.cubx-pp__share-label { font-size: 11px; font-weight: 700; color: var(--h2j-text-light); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.cubx-pp__share-links { display: flex; gap: 7px; flex-wrap: wrap; }

/* Boutons partage H2JSocial — style DS */
.cubx-share {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--cubx-share-color, var(--h2j-border));
  color: var(--cubx-share-color, var(--h2j-text-light));
  background: transparent; text-decoration: none;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}

.cubx-share svg { width: 14px; height: 14px; }
.cubx-share:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--cubx-share-color, var(--cubx-accent)) 12%, transparent);
}

/* Bouton QR */
.cubx-pp__qr-btn {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--h2j-border);
  border-radius: var(--cubx-pp-card-radius);
  font-size: 12px; font-weight: 600;
  color: var(--h2j-text-light);
  transition: border-color .15s, color .15s;
}
.cubx-pp__qr-btn:hover { border-color: var(--cubx-accent); color: var(--cubx-accent); }

/* ==========================================================================
   SHAREGATE — Barre de partage produit (native h2jecosystem v2.15.6)
   Reproduit fidèlement le rendu h2jtools sharegate avec les classes DS.
   ========================================================================== */

.cubx-pp-card--share { padding: 10px 16px 12px; }

/* Override hover-fade opacity sur le sharegate produit — départ à 1, fade au hover */
.cubx-pp-card--share .h2j-social-hover-fade .h2j-social-icon { opacity: 1; }
.cubx-pp-card--share .h2j-social-hover-fade .h2j-social-icon:hover { opacity: .6; }

.h2j-sharegate { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }

.h2j-share-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--h2j-text-light);
  width: 100%;
  text-align: center;
  margin-bottom: 2px;
}

.h2j-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.h2j-share-btn {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  text-decoration: none;
  flex-shrink: 0;
}

.h2j-share-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #fff;
  transition: opacity .15s, transform .15s;
}

/* Formes */
.h2j-social-shape-square  .h2j-share-btn-icon { border-radius: 4px; }
.h2j-social-shape-round   .h2j-share-btn-icon { border-radius: 50%; }
.h2j-social-shape-rounded .h2j-share-btn-icon { border-radius: 8px; }

/* Tailles */
.h2j-social-size-sm .h2j-share-btn-icon { width: 24px; height: 24px; }
.h2j-social-size-md .h2j-share-btn-icon { width: 32px; height: 32px; }
.h2j-social-size-lg .h2j-share-btn-icon { width: 40px; height: 40px; }
.h2j-social-size-xl .h2j-share-btn-icon { width: 48px; height: 48px; }

/* Style mono — fond uniforme (noir ou couleur réseau selon h2j-social-icon-color-*) */
.h2j-social-style-mono .h2j-share-btn-icon { background: var(--h2j-text); }
.h2j-social-style-mono.h2j-social-icon-color-brand .h2j-share-btn-icon {
  background: var(--cubx-accent);
}

/* Style color — couleur réseau via inline style */
.h2j-social-style-color .h2j-share-btn-icon { /* fond via style inline */ }

/* Style color — fond couleur réseau via data-network */
.h2j-social-style-color .h2j-share-btn[data-network="facebook"]  .h2j-share-btn-icon { background: #1877F2; }
.h2j-social-style-color .h2j-share-btn[data-network="twitter"]   .h2j-share-btn-icon { background: #000000; }
.h2j-social-style-color .h2j-share-btn[data-network="linkedin"]  .h2j-share-btn-icon { background: #0A66C2; }
.h2j-social-style-color .h2j-share-btn[data-network="pinterest"] .h2j-share-btn-icon { background: #E60023; }
.h2j-social-style-color .h2j-share-btn[data-network="whatsapp"]  .h2j-share-btn-icon { background: #25D366; }
.h2j-social-style-color .h2j-share-btn[data-network="telegram"]  .h2j-share-btn-icon { background: #0088CC; }
.h2j-social-style-color .h2j-share-btn[data-network="reddit"]    .h2j-share-btn-icon { background: #FF4500; }
.h2j-social-style-color .h2j-share-btn[data-network="email"]     .h2j-share-btn-icon { background: #EA4335; }
.h2j-social-style-color .h2j-share-btn[data-network="copylink"]  .h2j-share-btn-icon { background: #64748b; }
.h2j-social-style-color .h2j-share-btn[data-network="qrcode"]    .h2j-share-btn-icon { background: #1e293b; }

/* Style outline */
.h2j-social-style-outline .h2j-share-btn-icon {
  background: transparent;
  border: 1.5px solid currentColor;
}

/* Style ghost */
.h2j-social-style-ghost .h2j-share-btn-icon {
  background: transparent;
  opacity: .7;
}

/* Action buttons (copy, qr, email) — fond neutre */
.h2j-share-btn-icon--action {
  background: var(--h2j-bg-card, #f1f5f9) !important;
  color: var(--h2j-text) !important;
}

/* Effets hover */
.h2j-social-hover-glow .h2j-share-btn:hover .h2j-share-btn-icon {
  opacity: .82;
  transform: scale(1.08);
}
.h2j-social-hover-lift .h2j-share-btn:hover .h2j-share-btn-icon {
  transform: translateY(-2px);
}
.h2j-social-hover-fade .h2j-share-btn:hover .h2j-share-btn-icon {
  opacity: .7;
}

/* SVG icon sizing */
.h2j-share-btn-icon svg {
  display: block;
  width: 55%;
  height: 55%;
}

/* Thème light (défaut CUBX) */
.h2j-social-theme-light .h2j-share-title { color: var(--h2j-text-light); }
.cubx-pp-card--alert-me { padding: 10px 14px; }
.cubx-alert-me { margin: 0; }
.cubx-alert-me__row { display: flex; align-items: center; gap: 8px; }
.cubx-alert-me__icon { flex-shrink: 0; color: var(--h2j-warning, #f59e0b); }
.cubx-alert-me__email { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1.5px solid var(--h2j-border); border-radius: 6px; font-size: 13px; color: var(--h2j-text); background: transparent; outline: none; transition: border-color .15s; }
.cubx-alert-me__email:focus { border-color: var(--cubx-accent); }
.cubx-alert-me__submit { all: unset; cursor: pointer; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; background: var(--cubx-accent); color: #fff; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; flex-shrink: 0; transition: opacity .15s; }
.cubx-alert-me__submit:hover { opacity: .85; }
}

/* ── Zone basse linéaire ──
   v2.5.88 : Description / Technical sheet / Reviews / Accessories sont rendus
   dans des .cubx-pp-card avec trait accent rose sous le titre, pour rester
   visuellement cohérents avec le bloc identité / prix / ATC plus haut.
   Les anciennes règles .cubx-pp-section sont conservées en fallback / légacy.
*/
.cubx-pp__bottom { display: flex; flex-direction: column; }
.cubx-pp-section { border-top: 1px solid var(--cubx-pp-card-border); padding: 40px 0; }
.cubx-pp-section__title { font-size: 20px; font-weight: 700; color: var(--h2j-text); margin: 0 0 24px; display: flex; align-items: center; gap: 10px; }
.cubx-pp-section__title-count { font-size: 15px; font-weight: 400; color: var(--h2j-text-light); }

/* === v2.5.88 — Cards basses (Description / Tech sheet / Reviews / Accessories) ===
   Même fond/border/radius que les cards d'identité + prix + ATC,
   avec un trait accent rose plein-largeur sous le titre. */
.cubx-pp-card--description,
.cubx-pp-card--features,
.cubx-pp-card--reviews,
.cubx-pp-card--accessories {
  margin-top: var(--cubx-pp-gap, 14px);
  padding: 24px 22px;
}

.cubx-pp-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--h2j-text);
  margin: 0 0 18px;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--cubx-accent);
  letter-spacing: .01em;
}
.cubx-pp-card__title-count {
  font-size: 14px;
  font-weight: 500;
  color: var(--h2j-text-light);
}
.cubx-pp__description { font-size: 15px; line-height: 1.7; color: var(--h2j-text); max-width: 820px; }
.cubx-pp__description h2, .cubx-pp__description h3 { font-weight: 700; margin-top: 28px; color: var(--h2j-text); }
.cubx-pp__description ul, .cubx-pp__description ol { padding-left: 22px; }
.cubx-pp__description li { margin-bottom: 6px; }
.cubx-pp__reviews-empty { color: var(--h2j-text-light); font-size: 14px; font-style: italic; }

.cubx-pp__accessories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .cubx-pp__accessories-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .cubx-pp__accessories-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Barre sticky bottom v2.5.92 — avec déclinaisons inline + qty stepper ── */
.cubx-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--cubx-sticky-z, 900);
  background: var(--cubx-sticky-bg, #ffffff);
  border-top: var(--cubx-sticky-border, 1px solid var(--h2j-border));
  box-shadow: 0 -4px 24px rgba(0,0,0,.09);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.cubx-sticky-bar--on { transform: translateY(0); }

.cubx-sticky-bar__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 20px;
  flex-wrap: nowrap;
}

.cubx-sticky-bar__thumb {
  flex-shrink: 0;
  width: 40px;
  height: 54px;
  object-fit: cover;
  border-radius: calc(var(--cubx-pp-card-radius) - 2px);
}

.cubx-sticky-bar__meta {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 220px;
}
.cubx-sticky-bar__name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--h2j-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cubx-sticky-bar__price {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--cubx-accent);
}

/* === Variants inline (proxies) === */
.cubx-sticky-bar__variants {
  display: flex;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.cubx-sticky-bar__variants[aria-hidden="true"] { display: none; }

.cubx-sticky-bar__variant-group {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: nowrap;
}

/* Bouton variant taille (texte) */
.cubx-sticky-bar__variant-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 32px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--h2j-text);
  background: var(--h2j-bg-light, #f8fafc);
  border: 1px solid var(--h2j-border);
  border-radius: 4px;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
  box-sizing: border-box;
}
.cubx-sticky-bar__variant-btn:hover:not(:disabled) {
  background: #fff;
  border-color: var(--cubx-accent);
}
.cubx-sticky-bar__variant-btn--on {
  background: #fff;
  border-color: var(--cubx-accent);
  box-shadow: 0 0 0 2px var(--cubx-accent-2, var(--cubx-accent));
  z-index: 1;
}
.cubx-sticky-bar__variant-btn--off {
  opacity: .35;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Bouton variant couleur (swatch carré mini) */
.cubx-sticky-bar__variant-btn--color {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border: 1px solid var(--h2j-border);
  background-clip: padding-box;
  position: relative;
}
.cubx-sticky-bar__variant-btn--color.cubx-sticky-bar__variant-btn--on {
  box-shadow: 0 0 0 2px var(--cubx-accent-2, var(--cubx-accent));
}

/* === Qty stepper compact === */
.cubx-sticky-bar__qty.cubx-qty {
  flex-shrink: 0;
  /* Hérite des styles .cubx-qty existants mais on compacte la hauteur */
  height: 32px;
}
.cubx-sticky-bar__qty .cubx-qty__btn {
  height: 32px;
  width: 28px;
}
.cubx-sticky-bar__qty .cubx-qty__input {
  height: 32px;
  width: 36px;
  font-size: 13px;
}

/* === Bouton ATC === */
.cubx-sticky-bar__btn {
  flex-shrink: 0;
  min-width: 160px;
  font-size: 14px;
  height: 40px;
  padding: 0 18px;
}
.cubx-sticky-bar__btn-label { display: inline; }

/* v2.5.93 — 2 labels : long visible sur desktop, court masqué par défaut. */
.cubx-sticky-bar__btn-label--long  { display: inline; }
.cubx-sticky-bar__btn-label--short { display: none; }

/* === Mobile : wrap 2 lignes === */
@media (max-width: 768px) {
  .cubx-sticky-bar__inner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }
  .cubx-sticky-bar__thumb {
    display: none;
  }
  /* v2.5.94 — Pattern B : déclis EN HAUT centrées / nom+prix+bouton EN BAS.
     L'ordre flex permet à l'utilisateur de vérifier sa sélection puis
     d'agir avec le bouton ATC en bas, plus accessible au pouce. */
  .cubx-sticky-bar__variants {
    flex-basis: 100%;
    order: 1;          /* en haut */
    gap: 12px;
    justify-content: center;  /* centré horizontalement */
  }
  .cubx-sticky-bar__variant-group {
    gap: 4px;
  }
  /* v2.5.124 — Pattern unifié sticky bar mobile (raffinement v2.5.122) :
     nom+prix à GAUCHE, bouton ATC à DROITE, sur la MÊME LIGNE, **même quand
     le nom du produit est très long**.

     Bug v2.5.122 : avec flex: 1 1 auto + max-width calc(100% - 150px), un nom
     long (ex. "Mixgliss Eau - Lub - Sans Parfum 150ml") faisait gonfler la
     flex-line car le contenu interne (.cubx-sticky-bar__name) avait un
     intrinsic-width supérieur au max-width — le browser respectait l'intrinsic
     plutôt que le max-width quand flex-basis: auto. Résultat : btn forcé en wrap
     sur ligne 2.

     Fix v2.5.124 : flex: 1 1 0 (basis à 0 au lieu de auto), min-width: 0,
     overflow: hidden. Le meta part de largeur 0 et grandit uniquement dans
     l'espace dispo après le btn. L'ellipsis sur .cubx-sticky-bar__name fait
     le reste pour les noms longs. */
  .cubx-sticky-bar__meta {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(100% - 150px);
    overflow: hidden;
    order: 2;
  }
  /* v2.5.93 — Qty stepper masqué en mobile (qty=1 par défaut, l'utilisateur
     remonte s'il veut une autre quantité — cas rare). Le bouton ATC garde
     toute la place. */
  .cubx-sticky-bar__qty.cubx-qty {
    display: none;
  }
  /* v2.5.124 — Bouton ATC : largeur fixe (~140-150px) aligné à droite,
     reste sur la même ligne que meta même avec nom long. Pattern uniforme
     avec ou sans déclis. flex 0 0 auto pour qu'il NE s'étire PAS et NE
     wrap PAS sur une ligne 2. */
  .cubx-sticky-bar__btn {
    flex: 0 0 auto;
    min-width: 140px;
    width: auto;
    padding: 0 16px;
    height: 44px;          /* HIG/Material : cible tactile minimum 44pt */
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    order: 3;              /* en ligne avec meta, côté droit */
  }
  /* Bascule des labels : court visible, long masqué */
  .cubx-sticky-bar__btn-label--long  { display: none; }
  .cubx-sticky-bar__btn-label--short { display: inline; }
}

/* Très petit mobile */
@media (max-width: 360px) {
  .cubx-sticky-bar__variant-btn {
    height: 26px;
    min-width: 28px;
    padding: 0 6px;
    font-size: 11px;
  }
  .cubx-sticky-bar__variant-btn--color {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }
}

/* ── Utilitaires ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* ── Animations entrée cards ── */
@keyframes cubxFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.cubx-pp__info-sticky .cubx-pp-card { animation: cubxFadeUp .3s ease both; }
.cubx-pp__info-sticky .cubx-pp-card:nth-child(1) { animation-delay: .04s; }
.cubx-pp__info-sticky .cubx-pp-card:nth-child(2) { animation-delay: .08s; }
.cubx-pp__info-sticky .cubx-pp-card:nth-child(3) { animation-delay: .12s; }
.cubx-pp__info-sticky .cubx-pp-card:nth-child(4) { animation-delay: .16s; }
.cubx-pp__info-sticky .cubx-pp-card:nth-child(5) { animation-delay: .20s; }
.cubx-pp__info-sticky .cubx-pp-card:nth-child(6) { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .cubx-pp__info-sticky .cubx-pp-card, .cubx-gallery__img, .cubx-atc__btn, .cubx-sticky-bar { animation: none; transition: none; }
}

/* ============================================================================
 * v2.5.149 — Sprint 2 PP : Items similaires + Déjà vus
 *
 * Wrappers .cubx-pp-card--carousel + .cubx-pp-card--similar / --recently-viewed
 * englobent un rendu complet .hb-bestsellers-ranked > .hb-products-grid > .hb-product
 * (style 100% hérité de h2jhomeblocks.css). On a juste à :
 *   1. Neutraliser le padding interne de .cubx-pp-card pour que la grille colle
 *      aux bords (le wrapper .hb-bestsellers-ranked gère lui-même son spacing)
 *   2. Masquer le placeholder Déjà vus tant qu'il n'est pas hydraté (évite
 *      l'affichage d'une carte vide avec juste le bord arrondi)
 *   3. Donner un peu de marge supérieure pour séparer du bloc précédent
 *      (accessoires PS natifs ou réassurance)
 *   4. **v2.5.150 fix design** : aligner le STYLE DU TITRE sur celui des autres
 *      .cubx-pp-card__title de la fiche produit ("Description", "Technical sheet",
 *      "Customer reviews") — minuscules + trait rose CUBX dessous, aligné à gauche.
 *      À la place du gros titre uppercase centré du contexte catégorie.
 *
 * Le rendu interne (grille, badges, info-band hover, rating widget, cart-btn)
 * reste piloté par h2jhomeblocks.css — RIEN à redupliquer.
 * ============================================================================ */
.cubx-pp-card--carousel {
  /* On laisse le wrapper .hb-bestsellers-ranked piloter son propre padding
     (il a déjà 16-20px de padding sur le titre + ses gaps internes). */
  padding: 0;
  overflow: hidden; /* coupe les coins arrondis pour que la grille suive */
  margin-top: 24px;
}

/* Placeholder Déjà vus invisible tant que le JS n'a pas injecté de HTML.
   :empty matche un élément SANS contenu (ni text node ni enfant). Dès que
   theme.js fait placeholder.innerHTML = data.html, :empty ne matche plus
   et la section apparaît. */
.cubx-pp-card--recently-viewed:empty {
  display: none;
}

/* On ajoute le padding habituel d'une .cubx-pp-card pour que le titre
   et la grille respirent comme dans les autres cards (Description,
   Technical sheet, Customer reviews). */
.cubx-pp-card--carousel .hb-bestsellers-ranked {
  padding: 20px 24px;
}

/* ====================================================================
   Titre : on réplique INTÉGRALEMENT le style de .cubx-pp-card__title
   (vu live : 18px / 700 / minuscules / trait rose 2px / aligné à gauche
   / pas de bg / pas d'uppercase / pas de letter-spacing).
   Le wrapper .cubx-pp-card--carousel garantit que ces overrides ne
   touchent QUE nos carrousels PP — le rendu catégorie reste intact.
   ==================================================================== */
.cubx-pp-card--carousel .hb-bestsellers-ranked__title {
  /* Match à l'identique avec .cubx-pp-card__title */
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--cubx-text, #1a1a1a);
  text-align: left;
  /* Trait rose CUBX (équivalent à var(--cubx-accent) qui vaut #ff4081 ici) */
  border-bottom: 2px solid var(--cubx-accent, #ff4081);
  padding: 0 0 12px 0;
  margin: 0 0 20px 0;
  background: none;
  /* Garde la même typo Heading que les autres titres PP */
  font-family: inherit;
  line-height: 1.3;
}

/* Mobile : on conserve les mêmes proportions, juste un peu moins de padding
   sur le wrapper pour gagner en largeur utile (les cards font 50% chacune). */
@media (max-width: 768px) {
  .cubx-pp-card--carousel {
    margin-top: 18px;
  }
  .cubx-pp-card--carousel .hb-bestsellers-ranked {
    padding: 16px 16px;
  }
  .cubx-pp-card--carousel .hb-bestsellers-ranked__title {
    font-size: 16px;
    margin-bottom: 16px;
  }
}

/* ============================================================================
 * v2.5.151 — Fix sticky ATC qui masque le contenu en bas de fiche produit
 *
 * PROBLÈME :
 * .cubx-sticky-bar a position:fixed; bottom:0; height:~69px; z-index:900
 * Donc en permanence sur fiche produit, les 69 derniers pixels du contenu
 * sont recouverts par le sticky bar. Avec l'arrivée des carrousels Items
 * similaires + Déjà vus en bas (v2.5.149), le souci devient visible :
 * la 2e ligne de cards est partiellement cachée par le sticky.
 *
 * FIX :
 * On ajoute un padding-bottom sur body.page-product égal à la hauteur du
 * sticky bar + une petite respiration (16px). Comme ça le scroll peut
 * descendre suffisamment pour que TOUT le contenu soit visible au-dessus
 * du sticky bar.
 *
 * iOS SAFE AREA :
 * On ajoute env(safe-area-inset-bottom) pour les iPhones avec home indicator
 * (la barre noire en bas qui peut elle-même recouvrir le sticky bar).
 * Pas de fallback explicite nécessaire : env() retourne 0 sur les browsers
 * qui ne supportent pas, donc le calc reste correct.
 *
 * SCOPE :
 * Uniquement body.page-product car le sticky bar n'existe QUE sur la fiche
 * produit (cf. cubx-core.js qui le mount uniquement quand .page-product est
 * présent). Sur les autres pages, body padding-bottom reste à 0 — pas de
 * régression.
 *
 * RESPONSIVE :
 * Le sticky bar fait 69px desktop ET mobile (audit v2.5.150). On utilise
 * la même valeur partout, pas besoin de média query.
 * ============================================================================ */
body.page-product {
  /* Hauteur sticky bar mesurée + 16px respiration + safe-area iOS */
  padding-bottom: calc(69px + 16px + env(safe-area-inset-bottom, 0px));
}