/* ════════════════════════════════════════════════════════════
   PREMIUM PRODUCT PAGE
════════════════════════════════════════════════════════════ */
:root {
    --product-media-h-mobile: 370px;
}

[data-scroll-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
[data-scroll-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}



@keyframes shimmerBar {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}
@keyframes glowPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.12); }
}
@keyframes goldSweep {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
}
@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes marqueeShineSweep {
    0%   { left: -60%; }
    100% { left: 120%; }
}
@keyframes stockPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}
@keyframes shimmerLoad {
    0%   { opacity: 0.35; }
    50%  { opacity: 1; }
    100% { opacity: 0.35; }
}
@keyframes liveBlip {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.75); }
}
@keyframes featureGlow {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50%       { opacity: 0.6; transform: scale(1.1); }
}
@keyframes ctaShimmerGold {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes boxGlowPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(184,146,90,0.12), 0 3px 14px rgba(0,0,0,0.06); }
    50%       { box-shadow: 0 0 22px rgba(184,146,90,0.22), 0 6px 24px rgba(0,0,0,0.10); }
}
@keyframes borderRun {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes scanLine {
    0%   { top: 0; opacity: 0.6; }
    100% { top: 100%; opacity: 0; }
}
@keyframes iconSpin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.15); }
    100% { transform: rotate(360deg) scale(1); }
}
@keyframes modalIn {
    0%   { opacity: 0; transform: translateY(28px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes badgePop {
    0%   { transform: scale(0.7) rotate(-10deg); opacity: 0; }
    70%  { transform: scale(1.12) rotate(3deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes rowGlow {
    0%, 100% { background-color: transparent; }
    50%       { background-color: rgba(184,146,90,0.05); }
}


/* ═══════════════════════════════
   STICKY FIX — ordre critique
═══════════════════════════════ */
@media (min-width: 769px) {
    .product-section {
        padding: 10px 10px !important;
    }
    .product-section {
        overflow: visible !important;
    }
    .product-layout {
        overflow: visible !important;
        align-items: flex-start !important;
    }
    body,
    .container {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }
    .product-media {
        position: sticky !important;
        top: 185px !important;
        align-self: flex-start !important;
        
    }
    .product-layout {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 10px !important;
    }
}

.product-section {
    padding: 2px 0px 4px;
}


/* ════════════════════════════
   PRODUCT SECTION WRAPPER
════════════════════════════ */
.product-section {
    position: relative;
    background: #ffffff;
    overflow: hidden;
    isolation: isolate;
}
.product-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(184,146,90,0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184,146,90,0.055) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}
.product-layout {
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 1;
    overflow: visible !important;
    align-items: flex-start !important;
}


/* ════════════════════════════
   PRODUCT MEDIA
════════════════════════════ */
.product-media {
    width: 60%;
    position: relative;
    display: flex;
    gap: 0px;
}


.thumbnails {
    width: 88px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: 490px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.thumbnails::-webkit-scrollbar { display: none; }

/* Cartes fantômes (skeleton) tant que les vraies thumbnails ne sont pas
   encore injectées en JS — même principe que .main-image-slider::before,
   pour que le bloc garde sa taille/forme dès le premier rendu. */
.thumbnails:not(:has(.thumbnail-item))::before {
    content: '';
    display: block;
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background: linear-gradient(100deg,
        rgba(184,146,90,0.06) 30%,
        rgba(184,146,90,0.14) 50%,
        rgba(184,146,90,0.06) 70%
    );
    background-size: 200% 100%;
    animation: goldSweep 1.6s linear infinite;
    box-shadow:
        0 88px 0 0 rgba(184,146,90,0.10),
        0 176px 0 0 rgba(184,146,90,0.07);
}

.thumbnail-item {
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s ease;
    flex-shrink: 0;
    position: relative;
}

/* Placeholder logo affiché par-dessus une vidéo média tant qu'elle n'a pas
   fini de charger (voir revealVideoWhenReady dans script.js) — système
   autonome, séparé de .bbw-card-preload-logo (cards produits).
   Sélecteur composé (.main-image/.thumbnail-item .bbw-video-placeholder-logo)
   plutôt que la seule classe : le placeholder est un <img>, donc la règle
   générique .main-image img, .main-image video (plus loin dans ce fichier,
   spécificité classe+élément) l'écraserait sinon silencieusement. */
.main-image .bbw-video-placeholder-logo,
.thumbnail-item .bbw-video-placeholder-logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 20%;
    box-sizing: border-box;
    background: rgba(250,248,245,0.96);
    z-index: 5;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.35s ease;
    border-radius: inherit;
}
.bbw-video-placeholder-logo.is-loaded {
    opacity: 0;
}
.thumbnail-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(184,146,90,0.08), rgba(26,26,26,0.04));
    opacity: 0;
    transition: opacity 0.25s;
}
.thumbnail-item:hover::after { opacity: 1; }
.thumbnail-item:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(184,146,90,0.22);
}
.thumbnail-item img:not(.bbw-card-preload-logo),
.thumbnail-item video {
    width: 84px !important;
    height: 84px !important;
    object-fit: contain;
    border: 2px solid rgba(184,146,90,0.18);
    border-radius: 12px;
    transition: border-color 0.25s ease;
    display: block;
    background: rgba(255,255,255,0.90);
}
/* Vidéo en vignette : toujours cover, pas de bandes vides — voir la même
   règle sur .main-image video pour l'image principale. */
.thumbnail-item video {
    object-fit: cover;
}
.thumbnail-item.active img:not(.bbw-card-preload-logo),
.thumbnail-item.active video {
    border: 2px solid var(--bbw-gold);
    box-shadow: 0 0 0 3px rgba(184,146,90,0.16);
}


.main-image-slider {
    flex: 1;
    position: relative;
    height: 490px;
    min-height: 490px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.92) 0%,
        rgba(253,249,244,0.97) 100%
    );
    border: 1px solid rgba(184,146,90,0.28);
    box-shadow:
        0 4px 24px rgba(184,146,90,0.10),
        0 1px 0 rgba(255,255,255,0.80) inset,
        0 12px 36px rgba(0,0,0,0.07);
}
.main-image-slider:not(:has(.main-image))::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(184,146,90,0.06) 30%,
        rgba(184,146,90,0.14) 50%,
        rgba(184,146,90,0.06) 70%
    );
    background-size: 200% 100%;
    animation: goldSweep 1.6s linear infinite;
}
/* ── Pile de cartes en profondeur ──────────────────────────────
   .active reste la source de vérité pour le JS existant (zoom loupe,
   modal, etc. lisent tous .main-image.active img) ; data-depth pilote
   uniquement le rendu visuel de l'empilement, en plus de .active.
   Les cartes non-actives se réduisent en petites vignettes empilées
   dans le coin bas-gauche, par-dessus l'image active (cf. référence). */
.main-image {
    display: block;
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    transition: bottom 0.45s cubic-bezier(0.4,0,0.2,1),
                transform 0.45s cubic-bezier(0.4,0,0.2,1),
                opacity 0.45s cubic-bezier(0.4,0,0.2,1),
                width 0.45s cubic-bezier(0.4,0,0.2,1),
                height 0.45s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
}
.main-image.active,
.main-image[data-depth="0"] {
    z-index: 3;
    opacity: 1;
    width: 78%;
    height: 100%;
    bottom: 0;
    left: 22%;
    transform: translate3d(0,0,0);
    pointer-events: auto;
}
.main-image[data-depth="1"] {
    z-index: 2;
    opacity: 1;
    width: 30%;
    height: 42%;
    bottom: 0;
    left: 0;
    transform: translate3d(0, 0, 0);
}
.main-image[data-depth="2"] {
    z-index: 1;
    opacity: 1;
    width: 30%;
    height: 42%;
    bottom: 0;
    left: 0;
    transform: translate3d(calc(30% + 10px), 0, 0);
}
.main-image[data-depth="hidden"] {
    z-index: 0;
    opacity: 0;
    width: 30%;
    height: 42%;
    bottom: 0;
    left: 0;
    transform: translate3d(calc(30% + 10px), 0, 0);
}

/* Média actif = vidéo : elle remplit toute la carte, sans pile de cartes
   empilées par-dessus (cet effet n'a de sens que pour comparer des photos). */
.main-image-slider--video-active .main-image.active,
.main-image-slider--video-active .main-image[data-depth="0"] {
    width: 100%;
    left: 0;
}
.main-image-slider--video-active .main-image[data-depth="1"],
.main-image-slider--video-active .main-image[data-depth="2"] {
    opacity: 0;
    pointer-events: none;
}
.main-image img,
.main-image video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.08s linear;
    will-change: transform;
    background: rgba(255,255,255,0.95);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
/* La vidéo doit toujours remplir complètement la carte, quel que soit son
   ratio d'origine — contrairement aux images (object-fit:contain ci-dessus,
   pour ne jamais rogner un produit), une vidéo n'a pas besoin de rester
   entièrement visible : cover évite les bandes vides en haut/bas. */
.main-image video {
    object-fit: cover;
}
/* Le downscale d'une image ~900px vers les ~30% de largeur des cartes
   empilees peut flouter le rendu sur mobile (compositing du navigateur) —
   sans re-telecharger une image plus lourde, on desactive juste le layer
   GPU separe (will-change) sur ces etats reduits pour forcer un rendu net. */
.main-image[data-depth="1"] img,
.main-image[data-depth="2"] img,
.main-image[data-depth="hidden"] img,
.main-image[data-depth="1"] video,
.main-image[data-depth="2"] video,
.main-image[data-depth="hidden"] video {
    will-change: auto;
}
/* Tant que la vidéo n'a pas fini de charger, on désactive aussi son
   will-change : ce layer de composition GPU peut sinon passer au-dessus du
   placeholder logo malgré son z-index (voir revealVideoWhenReady). */
.main-image.bbw-video-loading video {
    will-change: auto;
}

/* ── Micro-glissement de la page entière à chaque changement d'image :
   un léger mouvement d'ensemble (galerie + colonne infos produit) qui
   revient à sa place, pour accompagner la transition sans la rendre
   brutale/statique. ── */
@keyframes mediaShiftPulse {
    0%   { transform: translateX(0); }
    35%  { transform: translateX(var(--media-shift-x, -4px)); }
    100% { transform: translateX(0); }
}
.product-layout.media-shift {
    animation: mediaShiftPulse 0.32s cubic-bezier(0.4,0,0.2,1);
}


.slider-shimmer-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(184,146,90,0.5) 30%,
        rgba(232,188,106,0.75) 50%,
        rgba(184,146,90,0.5) 70%,
        transparent 100%);
    background-size: 200% 100%;
    animation: goldSweep 2.8s linear infinite;
    z-index: 6;
    border-radius: 2px 2px 0 0;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: var(--bbw-gold);
    background: rgba(253,249,244,0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    width: 38px; height: 38px;
    display: flex;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    z-index: 10;
    border: 1px solid rgba(184,146,90,0.28);
}
.slider-arrow:hover {
    background: #fff;
    box-shadow: 0 6px 24px rgba(184,146,90,0.28);
    transform: translateY(-50%) scale(1.1);
    color: #b07d28;
}
.prev { left: 10px; }
.next { right: 10px; }

.product-badge {
    position: absolute;
    top: 14px; left: 14px;
    background: #15110E;
    color: var(--bbw-gold);
    padding: 5px 16px;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgba(184,146,90,0.45);
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    z-index: 5;
    animation: floatY 3s ease-in-out infinite;
}

/* ════════════════════════════
   STOCK IMAGE BADGE — coin superieur droit de l'image principale.
   Couleur/texte suivent exactement les memes paliers que la barre de
   stock (#pp-stock-label/.pp-stock-bar-fill, voir initStockBar()) —
   meme logique anderson/francenel, memes couleurs de reference.
════════════════════════════ */
.pp-stock-image-badge {
    position: absolute;
    top: 14px; right: 14px;
    color: #fdfaf5;
    padding: 5px 16px;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    z-index: 5;
    border: 1px solid rgba(255,255,255,0.25);
}
.pp-stock-image-badge.stock--high        { background: #16a34a; }
.pp-stock-image-badge.stock--medium      { background: var(--bbw-gold); color: #15110E; }
.pp-stock-image-badge.stock--medium-low  { background: #d97706; }
.pp-stock-image-badge.stock--low         { background: #dc2626; }
.pp-stock-image-badge.stock--critical    { background: #b91c1c; }

@media (max-width: 768px) {
  .pp-stock-image-badge {
    font-size: 0.50rem;
    padding: 3px 10px;
    top: 8px;
    right: 8px;
  }
}


@media (max-width: 768px) {
  .product-badge {
    font-size: 0.50rem;
    padding: 3px 10px;
    top: 8px;
    left: 8px;
  }
}

/* ════════════════════════════
   LIKE / DISLIKE WIDGET — sous .product-badge, coin superieur gauche
   de l'image principale. 2 boutons empiles (pouce haut = like positif,
   pouce bas = like negatif), avec le compteur au-dessus de chaque icone.
════════════════════════════ */
.product-like-widget,
.product-like-skel {
    position: absolute;
    top: 52px; left: 14px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Widget réel masqué tant que get-likes n'a pas répondu (script.js retire
   is-skeleton du widget et le skeleton lui-même à ce moment). */
.product-like-widget {
    display: none;
}
.product-like-widget.is-loaded {
    display: flex;
}
.product-like-skel.is-loaded {
    display: none;
}

.product-like-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #fdfaf5;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

.product-like-count {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #15110E;
    text-shadow: none;
}

.product-like-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(21,17,14,0.55);
    border: 1px solid rgba(255,255,255,0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.product-like-btn:hover .product-like-icon {
    transform: scale(1.08);
}

.product-like-btn--like.active .product-like-icon {
    background: var(--bbw-gold);
    border-color: var(--bbw-gold);
    color: #15110E;
}

.product-like-btn--dislike.active .product-like-icon {
    background: #dc2626;
    border-color: #dc2626;
    color: #fdfaf5;
}

@media (max-width: 768px) {
  .product-like-widget,
  .product-like-skel {
    top: 38px;
    left: 8px;
    gap: 6px;
  }
  .product-like-count {
    font-size: 0.56rem;
  }
  .product-like-icon {
    width: 24px;
    height: 24px;
    font-size: 0.68rem;
  }
}

/* ════════════════════════════
   LIKE / DISLIKE WIDGET — SKELETON
   Même forme exacte que les vrais boutons (cercle 30px/24px + petite
   barre pour le compteur), affiché pendant le chargement de get-likes.
   .skel-shimmer = animation partagée (style.css) réutilisée telle quelle.
════════════════════════════ */
.product-like-skel-count {
    width: 14px;
    height: 8px;
    border-radius: 3px;
}

.product-like-skel-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}

@media (max-width: 768px) {
  .product-like-skel-icon {
    width: 24px;
    height: 24px;
  }
  .product-like-skel-count {
    width: 12px;
    height: 7px;
  }
}

.pp-mobile-zoom-btn {
  display: none;
}

@media (max-width: 768px) {
  .pp-mobile-zoom-btn {
    display: flex;
    position: absolute;
    top: 38px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(184,146,90,0.35);
    color: #15110E;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .pp-mobile-zoom-btn svg {
    flex-shrink: 0;
  }
}


/* ════════════════════════════
   PRODUCT CONTENT
   → Même fond ivoire, bordure or comme jrgq-gallery-stats-strip
════════════════════════════ */
.product-content {
    width: calc(40% - 1rem);
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    /* border: 1px solid rgba(184,146,90,0.28); */
    border-radius: 22px;
    padding: 22px 18px 12px !important;
    box-sizing: border-box;
    box-shadow:
        0 4px 24px rgba(184,146,90,0.10),
        0 1px 0 rgba(255,255,255,0.80) inset;
    overflow: visible !important;
}
.product-content > * {
    margin-bottom: 14px !important;
}


/* ════════════════════════════
   BADGE VERIFY
════════════════════════════ */
.bbw-title-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 2px;
    cursor: default;
    animation: badgePop 0.6s cubic-bezier(0.22,1,0.36,1) forwards;
    vertical-align: middle;
}
.bbw-title-badge-svg {
    width: 18px;
    height: 18px;
    fill: var(--bbw-gold);
    filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.89));
    transition: transform 0.35s ease, filter 0.35s ease;
    display: block;
}
.bbw-title-badge:hover .bbw-title-badge-svg {
    transform: rotate(20deg) scale(1.18);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
}
.bbw-title-badge .cls-1 {
    fill-rule: evenodd;
}


/* ════════════════════════════
   TITLE BLOCK
════════════════════════════ */
.paul-title-block {
    margin: 0;
    padding: 0;
}
.paul-title-block1 { width: 100%; }

@media (max-width: 768px) {
    .paul-title-block { margin-top: -18px !important; }
}

.paul-main-title {
    font-family: var(--font-display, Georgia, serif);
    color: var(--bbw-black);
    font-size: 20px;
    font-weight: 700;
    text-align: left;
    margin: 0;
    padding: 0;
    line-height: 1.18;
    display: inline;
}

.paul-title-underline {
    display: none;
}


/* ════════════════════════════
   STAR RATING
   → Conteneur style jrgq-gallery-stats-strip
════════════════════════════ */
.unique-star-rating-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    overflow-x: hidden;
}
.star-rating-border-block1 {
    width: 100% !important;
    max-width: 100%;
    padding: 9px 14px;
    border-radius: 14px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    box-shadow:
        0 4px 24px rgba(184,146,90,0.10),
        0 1px 0 rgba(255,255,255,0.80) inset;
    /* border: 1px solid rgba(184,146,90,0.28); */
    overflow: visible !important;
}
.unique-stars {
    display: flex;
    gap: var(--unique-gap);
    cursor: pointer;
    flex-shrink: 0;
    --unique-star-color: #dcdce6 !important;
    --unique-background-color: #00B67A !important;
    --unique-icon-size: 20px !important;
    --unique-gap: 2px !important;
    --unique-star-bg-padding: 2px;
    --unique-star-bg-radius: 4px;
}
.unique-rating-text {
    font-size: 20px !important;
    color: var(--bbw-black) !important;
    font-weight: bold;
    margin: 0 6px 0 4px;
    cursor: pointer;
    line-height: 1.3;
}
.unique-reviews {
    margin-right: 3px !important;
    font-size: 20px;
    color: var(--bbw-black);
    border: none;
    cursor: pointer;
    font-weight: bold;
    line-height: 1.3;
    flex-shrink: 1;
}
.unique-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--unique-icon-size, 26px);
    height: var(--unique-icon-size, 26px);
    position: relative;
    flex-shrink: 0;
    background: var(--unique-star-color, #dcdce6);
    border-radius: var(--unique-star-bg-radius, 4px);
    overflow: hidden;
}
.unique-star::before {
    content: '★';
    color: #fff;
    position: relative;
    line-height: 1; font-weight: 900;
    font-size: calc(var(--unique-icon-size, 26px) * 0.62);
}
.unique-star.full {
    background: var(--unique-background-color, #00B67A);
}
.unique-star.half {
    background: var(--unique-star-color, #dcdce6);
}
.unique-star.half::after {
    content: '';
    position: absolute; left: 0; top: 0;
    width: 50%; height: 100%;
    background: var(--unique-background-color, #00B67A);
    z-index: 0;
}
.unique-star.half::before {
    z-index: 1;
}
.unique-truck {
    width: var(--truck-size) !important;
    height: var(--truck-size) !important;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center; justify-content: center;
    cursor: pointer;
    --truck-color: var(--bbw-black);
    --truck-size: 20px;
}
.unique-truck svg { fill: var(--truck-color) !important; }
.unique-truck-wrapper { position: relative; }
.unique-truck-tooltip {
    position: absolute;
    bottom: calc(100% + 6px); right: -10px;
    background: #15110E;
    color: var(--bbw-gold);
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid rgba(184,146,90,0.40);
    white-space: normal; max-width: 200px;
    line-height: 1.4; text-align: center;
    pointer-events: none; z-index: 9 !important;
    opacity: 0; visibility: hidden;
    transition: opacity 0.18s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.20);
}
.unique-truck-wrapper:hover .unique-truck-tooltip,
.unique-truck-wrapper:focus .unique-truck-tooltip {
    opacity: 1; visibility: visible;
}
@media (max-width: 480px) {
    .unique-star-rating-container { gap: 5px; }
    .unique-reviews, .unique-rating-text { font-size: 15px !important; }
    .unique-stars { --unique-icon-size: 16px !important; }
}


/* ════════════════════════════
   FEATURED FEATURES BLOCK
════════════════════════════ */
@keyframes fc-border-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.fc-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
    padding: 2px 1px;
    flex-wrap: nowrap;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    border-radius: 18px;
    /* border: 1px solid rgba(184,146,90,0.28); */
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    box-shadow:
        0 4px 24px rgba(184,146,90,0.10),
        0 1px 0 rgba(255,255,255,0.80) inset;
    overflow: hidden;
}
.fc-block::-webkit-scrollbar { display: none; }

.fc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 4px;
    position: relative;
    border-right: 1px solid rgba(184,146,90,0.15);
    transition: background 0.28s ease;
}
.fc-item:hover {
    background: rgba(184,146,90,0.04);
}
.fc-item:last-child {
    border-right: none;
}

.fc-ring {
    width: clamp(52px, 13vw, 72px);
    height: clamp(52px, 13vw, 72px);
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg,
        rgba(184,146,90,0.55),
        rgba(26,26,26,0.30),
        rgba(184,146,90,0.40)
    );
}
.fc-ring-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.fc-ring-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.fc-label {
    font-size: clamp(10px, 2.6vw, 12px);
    font-weight: 700;
    color: rgba(30,15,5,0.72);
    text-align: center;
    letter-spacing: 0.01em;
    width: 100%;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
}


/* ════════════════════════════
   VALUE PROPS — description courte + 3 mini-badges (test A/B, product1
   uniquement pour l'instant — à dupliquer sur les autres pages si le
   résultat convertit bien).
════════════════════════════ */
.pp-value-props {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 4px;
}
.pp-value-props__desc {
    font-family: var(--font-body, sans-serif);
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(21,17,14,0.72);
    margin: 0;
}
.pp-value-props__desc strong {
    color: var(--bbw-black);
    font-weight: 700;
}
.pp-value-props__grid {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    border-radius: 14px;
    box-shadow:
        0 4px 24px rgba(184,146,90,0.10),
        0 1px 0 rgba(255,255,255,0.80) inset;
    overflow: hidden;
}
.pp-value-props__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 10px;
    border-right: 1px solid rgba(184,146,90,0.18);
    min-width: 0;
}
.pp-value-props__item:last-child { border-right: none; }
.pp-value-props__item i {
    color: var(--bbw-gold);
    font-size: 1.05rem;
    flex-shrink: 0;
}
.pp-value-props__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.pp-value-props__text strong {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bbw-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-value-props__text span {
    font-size: 10px;
    color: rgba(21,17,14,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 640px) {
    .pp-value-props__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 10px 6px;
    }
    .pp-value-props__item i { font-size: 0.95rem; }
    .pp-value-props__text strong { font-size: 10px; white-space: normal; }
    .pp-value-props__text span { font-size: 8.5px; white-space: normal; }
}


/* ════════════════════════════
   TRUST STRIP
   → Style jrgq-gallery-stats-strip
════════════════════════════ */
.pp-trust-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    padding: 9px 14px;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    border-radius: 14px;
    /* border: 1px solid rgba(184,146,90,0.28); */
    box-shadow:
        0 4px 24px rgba(184,146,90,0.10),
        0 1px 0 rgba(255,255,255,0.80) inset;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
}
.pp-trust-strip::-webkit-scrollbar { display: none; }

.pp-trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.73rem;
    font-weight: 700;
    color: rgba(30,15,5,0.75);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.pp-trust-item i { color: var(--bbw-gold); font-size: 0.78rem; }
.pp-trust-sep {
    color: rgba(184,146,90,0.35);
    font-size: 1rem;
    flex-shrink: 0;
    font-weight: 300;
}

/* Variante agrandie — utilisée quand le bloc est déplacé en bas de page
   (après le FAQ), où il a plus d'espace et peut se permettre d'être plus
   visible. */
.pp-trust-strip--lg {
    padding: 14px 20px;
    gap: 9px;
    border-radius: 16px;
}
.pp-trust-strip--lg .pp-trust-item {
    font-size: 0.92rem;
    gap: 7px;
}
.pp-trust-strip--lg .pp-trust-item i { font-size: 1rem; }
.pp-trust-strip--lg .pp-trust-sep { font-size: 1.2rem; }


/* ════════════════════════════
   COLLECTION CTA
   → Bouton or premium plein, forte incitation au clic,
     invite à explorer la collection de ce produit
════════════════════════════ */
.pp-collection-cta {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin: 16px 0 0;
    padding: 18px 24px;
    background: linear-gradient(180deg, #ffffff 0%, #fdfaf4 100%);
    border: 1px solid var(--bbw-gold-border-hi);
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.9) inset,
        0 14px 30px rgba(184,146,90,0.22),
        0 4px 12px rgba(0,0,0,0.06),
        0 1px 0 rgba(255,255,255,0.9) inset;
    color: var(--bbw-gold);
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    animation: ppCollectionPulse 2.6s ease-in-out infinite;
    transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.pp-collection-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(184,146,90,0.08) 0%, rgba(255,255,255,0) 45%);
    pointer-events: none;
    z-index: 0;
}
.pp-collection-cta::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 55%;
    background: linear-gradient(100deg, transparent 20%, rgba(232,188,106,0.55) 48%, rgba(255,224,160,0.75) 50%, rgba(232,188,106,0.55) 52%, transparent 80%);
    left: -70%;
    pointer-events: none;
    z-index: 0;
}
.pp-collection-cta:hover {
    animation-play-state: paused;
    transform: translateY(-3px) scale(1.015);
    border-color: var(--bbw-gold-vivid);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.9) inset,
        0 20px 40px rgba(184,146,90,0.32),
        0 6px 16px rgba(0,0,0,0.09),
        0 1px 0 rgba(255,255,255,0.9) inset;
}
.pp-collection-cta:hover::after {
    animation: ppCollectionShimmer 1s ease forwards;
}
@keyframes ppCollectionShimmer {
    from { left: -70%; }
    to   { left: 120%; }
}
@keyframes ppCollectionPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.9) inset,
            0 14px 30px rgba(184,146,90,0.22),
            0 4px 12px rgba(0,0,0,0.06),
            0 1px 0 rgba(255,255,255,0.9) inset;
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.9) inset,
            0 14px 34px rgba(184,146,90,0.4),
            0 4px 12px rgba(0,0,0,0.06),
            0 1px 0 rgba(255,255,255,0.9) inset;
    }
}
.pp-collection-cta:active { transform: translateY(-1px) scale(1); }
.pp-collection-cta__label {
    position: relative;
    z-index: 1;
}
.pp-collection-cta__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bbw-gold-vivid);
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(.22,1,.36,1);
    animation: ppCollectionArrowNudge 1.6s ease-in-out infinite;
}
.pp-collection-cta__arrow svg {
    display: block;
}
@keyframes ppCollectionArrowNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
.pp-collection-cta:hover .pp-collection-cta__arrow {
    animation-play-state: paused;
    transform: translateX(7px);
}

@media (max-width: 640px) {
    .pp-collection-cta {
        padding: 15px 16px;
        font-size: 0.86rem;
        letter-spacing: 0.03em;
        gap: 9px;
    }
}


/* ════════════════════════════
   MARQUEE
   → Fond noir de marque, or antique — ton éditorial sobre
════════════════════════════ */
.pp-marquee-wrap {
    overflow: hidden;
    white-space: nowrap;
    background: #15110E;
    border-radius: 12px;
    padding: 0;
    position: relative;
    box-shadow:
        0 6px 22px rgba(21,17,14,0.22),
        inset 0 0 0 1px rgba(184,146,90,0.22);
    border: 1px solid rgba(184,146,90,0.28);
}
/* Fondus latéraux discrets pour un défilement qui s'éteint aux bords */
.pp-marquee-wrap::before,
.pp-marquee-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 56px;
    z-index: 3;
    pointer-events: none;
}
.pp-marquee-wrap::before {
    left: 0;
    background: linear-gradient(90deg, #15110E, rgba(21,17,14,0));
}
.pp-marquee-wrap::after {
    right: 0;
    background: linear-gradient(-90deg, #15110E, rgba(21,17,14,0));
}
.pp-marquee-shine {
    position: absolute;
    top: 0; bottom: 0;
    width: 90px;
    background: linear-gradient(90deg,
        transparent,
        rgba(184,146,90,0.06) 50%,
        transparent);
    animation: marqueeShineSweep 11s ease-in-out infinite;
    pointer-events: none; z-index: 2;
    border-radius: 12px;
}
.pp-marquee-track {
    display: inline-flex;
    white-space: nowrap;
    animation: marqueeScroll 34s linear infinite;
}
.pp-marquee-wrap:hover .pp-marquee-track,
.pp-marquee-wrap:hover .pp-marquee-shine {
    animation-play-state: paused;
}
.pp-marquee-track span {
    display: inline-block;
    color: #B8925A;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 36px;
    padding: 0 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* ════════════════════════════
   PRICE
   → Conteneur style jrgq-gallery-stats-strip
════════════════════════════ */
.compare-price {
    text-decoration: line-through;
    color: rgba(21,17,14,0.38);
    margin-right: 8px;
    font-size: 1.15rem !important;
    font-family: var(--font-body, sans-serif);
    font-weight: 500;
}
.current-price {
    color: var(--bbw-black);
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: -0.01em;
    font-family: var(--font-display, Georgia, serif);
}
.product-price-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 16px;
}
.product-price-wrapper::-webkit-scrollbar { display: none; }
.product-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    font-size: 1.6rem;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    border-radius: 14px;
    padding: 8px 16px;
    box-shadow:
        0 4px 24px rgba(184,146,90,0.10),
        0 1px 0 rgba(255,255,255,0.80) inset;
    /* border: 1px solid rgba(184,146,90,0.28); */
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    position: relative;
    overflow: hidden;
}

.price-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.product-discount-badge {
    background: #F6EFE5;
    color: var(--bbw-gold);
    border: 1px solid var(--bbw-gold);
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 0.83rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    letter-spacing: 0.06em;
    flex-shrink: 0;
    display: inline-block;
    position: static !important;
    animation: floatY 3.5s ease-in-out infinite;
}


/* ════════════════════════════
   STOCK BAR
   → Style jrgq-gallery-stats-strip
════════════════════════════ */
.pp-stock-block {
    padding: 10px 16px;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    /* border: 1px solid rgba(184,146,90,0.28); */
    border-radius: 14px;
    box-shadow:
        0 4px 24px rgba(184,146,90,0.10),
        0 1px 0 rgba(255,255,255,0.80) inset;
}
.pp-stock-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bbw-black);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.pp-stock-label .pp-stock-qty { font-weight: 800; font-size: 14px; }
.pp-stock-label.stock--high   .pp-stock-qty { color: #16a34a; }
.pp-stock-label.stock--medium .pp-stock-qty { color: var(--bbw-gold); }
.pp-stock-label.stock--low    .pp-stock-qty { color: #dc2626; }

.pp-stock-bar-track {
    width: 100%; height: 7px;
    background: rgba(184,146,90,0.12);
    border-radius: 999px;
    overflow: hidden;
}
.pp-stock-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    overflow: hidden;
}
.pp-stock-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; left: -60%; bottom: 0; width: 60%;
    background: rgba(255,255,255,0.35);
    animation: shimmerBar 1.8s ease-in-out infinite;
}
.pp-stock-bar-fill.stock--high {
    background: linear-gradient(90deg, #16a34a, #22c55e);
}
.pp-stock-bar-fill.stock--medium {
    background: linear-gradient(90deg, var(--bbw-gold), var(--bbw-gold-light));
}
.pp-stock-bar-fill.stock--low {
    background: linear-gradient(90deg, #dc2626, #ef4444);
    animation: stockPulse 1.4s ease-in-out infinite;
}
.pp-stock-hint {
    font-size: 11px;
    color: rgba(30,15,5,0.42);
    margin-top: 6px;
    letter-spacing: 0.02em;
}
.pp-stock-block.loading .pp-stock-bar-fill {
    width: 30% !important;
    background: rgba(184,146,90,0.18) !important;
    animation: shimmerLoad 1.2s linear infinite;
}
.pp-stock-block.error { display: none; }

/* ════════════════════════════
   REASSURANCE ROW — merges the stock bar + live-viewers strip
   into one compact card instead of two stacked boxes.
════════════════════════════ */
.pp-reassurance-row {
    display: flex;
    align-items: stretch;
    padding: 10px 16px;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    /* border: 1px solid rgba(184,146,90,0.28); */
    border-radius: 14px;
    box-shadow:
        0 4px 24px rgba(184,146,90,0.10),
        0 1px 0 rgba(255,255,255,0.80) inset;
}
.pp-reassurance-row .pp-stock-block,
.pp-reassurance-row .live-viewers p {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}
.pp-reassurance-row .pp-stock-block {
    flex: 1 1 50%;
    padding-right: 16px;
    border-right: 1px solid rgba(184,146,90,0.22);
}
.pp-reassurance-row .live-viewers { flex: 1 1 50%; }
.pp-reassurance-row .live-viewers p { padding-left: 16px; }
.pp-reassurance-row .live-viewers p::before { display: none; }

@media (max-width: 640px) {
    .pp-reassurance-row { flex-direction: column; gap: 12px; }
    .pp-reassurance-row .pp-stock-block {
        padding-right: 0;
        border-right: none;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(184,146,90,0.22);
    }
    .pp-reassurance-row .live-viewers p { padding-left: 0; }
}


.pp-stock-label.stock--medium-low .pp-stock-qty { color: #d97706; }
.pp-stock-label.stock--critical   .pp-stock-qty { color: #b91c1c; }

.pp-stock-bar-fill.stock--medium-low {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}
.pp-stock-bar-fill.stock--critical {
    background: linear-gradient(90deg, #b91c1c, #dc2626);
    animation: stockPulse 1.4s ease-in-out infinite;
}

/* ════════════════════════════
   BUNDLE
   → Style jrgq-gallery-stats-strip sur conteneur
   → Boutons premium noir/or
════════════════════════════ */
.bundle-save-container {
    width: 100%; max-width: 100%;
    padding: 18px 14px 12px;
    margin-bottom: 14px !important;
    /* border: 1px solid rgba(184,146,90,0.28) !important; */
    border-radius: 20px !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    box-shadow:
        0 4px 24px rgba(184,146,90,0.10),
        0 1px 0 rgba(255,255,255,0.80) inset;
    position: relative;
    overflow: hidden;
}


.bundle-title {
    text-align: center;
    font-size: 13px !important;
    color: rgba(30,15,5,0.80) !important;
    font-weight: 800;
    margin-bottom: 10px; margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    display: flex;
    align-items: center; justify-content: center;
    gap: 10px;
}
.title-decoration {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184,146,90,0.45));
    min-width: 30px; max-width: 100px;
}
.title-decoration.right {
    background: linear-gradient(90deg, rgba(184,146,90,0.45), transparent);
}

.bundle-option {
    border: 1.5px solid rgba(184,146,90,0.22) !important;
    border-left: 3px solid rgba(184,146,90,0.35) !important;
    border-radius: 12px;
    margin-bottom: 8px;
    padding: 4px 6px;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    background: rgba(255,255,255,0.75);
}
.bundle-option:hover {
    border-color: rgba(184,146,90,0.55) !important;
    background: rgba(253,249,244,0.92);
    transform: translateY(-1px);
}
.bundle-option.active {
    border-color: var(--bbw-gold) !important;
    border-left-color: var(--bbw-gold) !important;
    background: rgba(253,249,244,0.96);
    box-shadow: 0 0 0 3px rgba(184,146,90,0.12), 0 6px 18px rgba(0,0,0,0.07);
    transform: translateY(-1px);
}
.bundle-option.duo-with-badge.active { border-left-color: var(--bbw-rose, #6E2439) !important; }
.bundle-option.trio-with-badge.active { border-left-color: var(--bbw-black, #15110E) !important; }

/* Indicateur radio custom — masque le radio natif, dessine un rond
   propre à la place (le radio natif reste dans le DOM/fonctionnel,
   juste visuellement caché). */
.bundle-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 19px; height: 19px;
    margin: 0 14px 0 6px;
    flex-shrink: 0;
    border: 1.5px solid rgba(184,146,90,0.45);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: border-color 0.22s ease;
}
.bundle-option input[type="radio"]:checked {
    border-color: var(--bbw-gold);
    border-width: 5px;
}
.bundle-option label {
    display: flex;
    align-items: center;
    width: 100%; margin-top: 0px !important;
    cursor: pointer;
    padding: 6px 4px;
}
.bundle-content {
    display: flex;
    margin-bottom: 0 !important;
    flex-direction: column;
    flex: 1;
}
.bundle-name {
    font-family: var(--font-display, Georgia, serif);
    font-weight: 700;
    margin: 2px 8px 4px;
    font-size: 16.5px;
    color: var(--bbw-black);
    letter-spacing: 0.005em;
}
.bundle-name i {
    color: var(--bbw-gold);
    font-size: 0.85em;
    margin-left: 4px;
}
.bundle-description {
    font-size: 10.5px; font-weight: 700;
    border-radius: 20px !important;
    margin: 0 4px !important;
    padding: 3px 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: inline-block;
    width: fit-content;
}
.single-description { color: var(--bbw-gold) !important; background: rgba(184,146,90,0.10) !important; }
.duo-description    { color: #fff !important; background: linear-gradient(135deg, var(--bbw-rose, #6E2439), var(--bbw-rose-light, #9C3A52)) !important; }
.trio-description   { color: var(--bbw-gold-light, #e8bc6a) !important; background: linear-gradient(135deg, var(--bbw-black, #15110E), #3a2e26) !important; }

.bundle-price {
    font-family: var(--font-display, Georgia, serif);
    font-weight: 700;
    font-size: 17px;
    color: var(--bbw-black);
    white-space: nowrap;
    padding-right: 10px;
    margin-left: auto;
}
.original-price {
    font-size: 13px;
    color: rgba(30,15,5,0.35);
    text-decoration: line-through;
    margin-left: 5px;
    font-weight: 500;
}
.bundle-badge {
    position: absolute;
    top: -10px; right: 12px;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 12px; z-index: 2;
}
.duo-badge  {
    background: linear-gradient(135deg, var(--bbw-rose, #6E2439), var(--bbw-rose-light, #9C3A52));
    color: #fff;
    box-shadow: 0 3px 10px rgba(110,36,57,0.28);
}
.trio-badge {
    background: linear-gradient(135deg, var(--bbw-black, #15110E), #3a2e26);
    color: var(--bbw-gold-light, #e8bc6a);
    box-shadow: 0 3px 10px rgba(21,17,14,0.28);
}

.variant-row {
    display: flex; align-items: center;
    gap: 4px; margin: 0;
}
.variant-preview {
    flex-shrink: 0; display: flex;
    align-items: center; margin-bottom: 0 !important;
}
.variant-preview img {
    width: 58px; height: 58px;
    border-radius: 12px;
    border: 1.5px solid rgba(184,146,90,0.22);
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.variant-grid {
    display: flex; flex-wrap: wrap;
    gap: 5px; flex: 1;
}
.variant-grid > div {
    flex: 1 1 45%; min-width: 45%; max-width: 50%;
    padding: 0 4px; box-sizing: border-box;
}
.variant-grid label {
    display: block; margin: 4px 0;
    font-size: 12px; font-weight: 700;
    color: rgba(30,15,5,0.55); letter-spacing: 0.03em;
}
.variant-grid select {
    width: 100%; padding: 7px;
    border: 1px solid rgba(184,146,90,0.25);
    border-radius: 10px;
    font-size: 12px; color: var(--bbw-black);
    background-color: rgba(255,255,255,0.80);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.variant-grid select:focus {
    outline: none;
    border-color: var(--bbw-gold);
    box-shadow: 0 0 0 3px rgba(184,146,90,0.12);
}
.pair-title {
    display: block;
    color: var(--bbw-black); font-size: 13px;
    font-weight: 700; margin-bottom: 6px;
    letter-spacing: 0.02em;
}


.bundle-add-btn {
    margin-top: 12px; width: 100%;
    padding: 12px;
    background: #15110E;
    color: var(--bbw-gold);
    font-size: 13px; font-weight: 800;
    border: 1.5px solid rgba(184,146,90,0.50);
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    letter-spacing: 0.08em;
    box-shadow: 0 4px 18px rgba(0,0,0,0.22);
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}
.bundle-add-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -70%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(184,146,90,0.12), transparent);
    animation: shimmerBar 2.8s ease-in-out infinite;
    border-radius: 100px;
}
.bundle-add-btn:hover {
    background: var(--bbw-black);
    color: var(--bbw-gold-light);
    border-color: rgba(184,146,90,0.75);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.bundle-selection {
    transition: all 0.22s ease;
    overflow: hidden;
    display: none;
    padding: 8px;
    background: rgba(253,249,244,0.50);
    border-radius: 0 0 14px 14px;
}

@media screen and (max-width: 400px) {
    .variant-row { flex-direction: row !important; align-items: center; gap: 2px !important; }
    .variant-grid { flex-wrap: nowrap !important; gap: 2px !important; }
    .variant-grid > div { flex: 1 1 auto !important; min-width: auto !important; max-width: none !important; padding: 0 3px !important; }
    .variant-grid select { font-size: 12px !important; padding: 5px 0 !important; }
}


/* ════════════════════════════
   UPSELL BLOCK
════════════════════════════ */
.p2-upsell-block {
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    /* border: 1px solid rgba(184,146,90,0.28); */
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    box-shadow:
        0 4px 24px rgba(184,146,90,0.10),
        0 1px 0 rgba(255,255,255,0.80) inset;
}


.p2-upsell-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 16px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--bbw-black);
    letter-spacing: 0.03em;
}
.p2-upsell-collapsible.is-open .p2-upsell-header {
    padding-bottom: 6px;
}
.p2-upsell-header i {
    color: var(--bbw-gold);
    font-size: 0.90rem;
}
.p2-upsell-header > span:not([class]) {
    font-size: 1.05rem;
    font-weight: 800;
}

/* ── Collapsible dédié à ce bloc, indépendant du système générique
   .bbw-collapsible : le client ouvre/ferme lui-même le kit upsell.
   Fermé par défaut, header cliquable, chevron qui tourne. ── */
.p2-upsell-toggle {
    cursor: pointer;
    user-select: none;
}
.p2-upsell-chevron {
    flex-shrink: 0;
    font-size: 0.78rem !important;
    transition: transform 0.30s cubic-bezier(0.4,0,0.2,1);
}
.p2-upsell-collapsible.is-open .p2-upsell-chevron {
    transform: rotate(180deg);
}
.p2-upsell-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}
.p2-upsell-collapsible.is-open .p2-upsell-body {
    max-height: none;
}
.p2-upsell-save-badge {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: #F6EFE5;
    color: var(--bbw-gold);
    border: 1px solid var(--bbw-gold);
    padding: 3px 10px;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.14);
}
.p2-upsell-sub {
    font-size: 0.74rem;
    color: rgba(30,15,5,0.48);
    padding: 0 16px 12px;
    margin: 0;
}

.p2-upsell-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(184,146,90,0.06);
}
.p2-upsell-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.80);
    transition: background 0.25s ease;
    cursor: pointer;
}
.p2-upsell-item:hover {
    background: rgba(253,249,244,0.95);
}

.p2-upsell-check-wrap { flex-shrink: 0; }
.p2-upsell-check { display: none; }
.p2-upsell-check-label {
    width: 20px; height: 20px;
    border-radius: 6px;
    border: 1.5px solid rgba(184,146,90,0.30);
    display: flex;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.22s ease;
    background: rgba(255,255,255,0.90);
    position: relative;
}
.p2-upsell-check-label::after {
    content: '✓';
    font-size: 11px; font-weight: 700;
    color: #fff; opacity: 0;
    transition: opacity 0.2s;
}
.p2-upsell-check:checked + .p2-upsell-check-label {
    background: #15110E;
    border-color: #15110E;
    box-shadow: 0 0 8px rgba(0,0,0,0.18);
}
.p2-upsell-check:checked + .p2-upsell-check-label::after {
    opacity: 1;
    color: var(--bbw-gold);
}

.p2-upsell-img-wrap {
    width: 44px; height: 44px;
    border-radius: 10px; overflow: hidden;
    flex-shrink: 0;
    background: rgba(253,249,244,0.80);
    border: 1px solid rgba(184,146,90,0.20);
}
.p2-upsell-img-wrap img {
    width: 44px; height: 44px;
    object-fit: cover; display: block;
    border-radius: 10px;
}

.p2-upsell-info {
    flex: 1;
    display: flex; flex-direction: column;
    gap: 2px; min-width: 0;
}
.p2-upsell-info strong {
    font-size: 0.80rem; font-weight: 700;
    color: var(--bbw-black); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p2-upsell-info span {
    font-size: 0.70rem;
    color: rgba(30,15,5,0.45);
    line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.p2-upsell-price-col {
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 1px; flex-shrink: 0;
}
.p2-upsell-old {
    font-size: 0.68rem;
    color: rgba(30,15,5,0.30);
    text-decoration: line-through;
}
.p2-upsell-new {
    font-size: 0.84rem; font-weight: 700;
    color: var(--bbw-gold);
}

.p2-upsell-footer {
    padding: 14px 16px;
    border-top: 1px solid rgba(184,146,90,0.12);
    display: flex; align-items: center;
    gap: 12px;
    background: rgba(253,249,244,0.60);
}
.p2-upsell-total-row {
    display: flex; align-items: center;
    gap: 6px; font-size: 0.78rem;
    color: rgba(30,15,5,0.48); flex-shrink: 0;
}
.p2-upsell-total-row strong {
    font-size: 1.0rem; font-weight: 700;
    color: var(--bbw-black);
}


.p2-upsell-add-btn {
    flex: 1;
    padding: 11px 14px;
    background: #15110E;
    color: var(--bbw-gold);
    border: 1.5px solid rgba(184,146,90,0.50);
    border-radius: 0;
    font-size: 0.80rem; font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex; align-items: center;
    justify-content: center; gap: 7px;
    transition: all 0.28s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.16);
    position: relative; overflow: hidden;
}
.p2-upsell-add-btn::before {
    content: '';
    position: absolute; top: 0; left: -70%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(184,146,90,0.12), transparent);
    animation: shimmerBar 2.8s 0.4s ease-in-out infinite;
}
.p2-upsell-add-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}
.p2-upsell-add-btn:not(:disabled):hover {
    background: var(--bbw-black);
    color: var(--bbw-gold-light);
    border-color: rgba(184,146,90,0.75);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.p2-upsell-add-btn.added {
    background: #0f3320;
    color: #86efac;
    border-color: #22c55e;
    box-shadow: 0 4px 14px rgba(34,197,94,0.22);
}


/* ════════════════════════════
   LIVE VIEWERS
   → Style jrgq-gallery-stats-strip
════════════════════════════ */
.live-viewers {
    color: var(--bbw-black);
    font-weight: 700;
    width: 100%; max-width: 100%;
}
.live-viewers p {
    font-size: 14px;
    line-height: 1.5;
    padding: 9px 14px;
    border-radius: 12px;
    width: 100%; max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center; gap: 10px;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    border: 1px solid rgba(184,146,90,0.28);
    box-shadow:
        0 4px 24px rgba(184,146,90,0.10),
        0 1px 0 rgba(255,255,255,0.80) inset;
    color: var(--bbw-black) !important;
    position: relative; overflow: hidden;
}

.live-viewers p::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--bbw-gold), #b07d28);
    border-radius: 0 2px 2px 0;
}
.live-viewers .eye-icon {
    color: var(--bbw-gold) !important;
    display: inline-flex; align-items: center;
    animation: glowPulse 2.5s ease-in-out infinite;
}
.live-text { display: inline; font-size: 14px; }
#live-count-example {
    font-size: 17px;
    color: var(--bbw-gold);
    font-weight: 900;
}


/* ════════════════════════════
   DELIVERY INFO
════════════════════════════ */
.delivery-info {
    color: #166534;
    margin: 0 !important;
    padding: 8px 14px !important;
    line-height: 1.2 !important;
    font-size: 15px !important;
    border-radius: 12px;
}
.delivery-border-block1 {
    width: 100%; max-width: 100%;
    margin: 0 !important;
    margin-top: 6px !important;
    margin-bottom: -2px !important;
    background: linear-gradient(135deg, rgba(240,253,244,0.95), rgba(220,252,231,0.80));
    /* border: 1px solid rgba(34,197,94,0.22) !important; */
    border-radius: 12px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 10px rgba(22,163,74,0.07);
    position: relative; overflow: hidden;
}
.delivery-border-block1::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #22c55e, #16a34a);
    border-radius: 0;
}
.delivery-info strong,
.delivery-info .delivery-date {
    font-weight: 700;
    margin: 0 4px 0 0 !important;
}
.delivery-info strong { color: #15803d; font-size: 15px !important; }
.delivery-info .delivery-date { color: var(--bbw-gold); font-size: 15px !important; }
#delivery-text {
    margin: 0 !important; padding: 0 !important;
    font-size: 15px !important;
    visibility: hidden;
}


/* ════════════════════════════
   PRODUCT OPTIONS
════════════════════════════ */
.product-options { margin: 14px 0; }
.product-options label {
    display: block; margin-bottom: 5px;
    font-weight: 700; color: rgba(30,15,5,0.55);
    font-size: 13px; letter-spacing: 0.04em;
    text-transform: uppercase;
}
#size-select {
    width: 200px; max-width: 200px;
    padding: 10px 14px;
    font-size: 15px;
    border: 1px solid rgba(184,146,90,0.28);
    border-radius: 12px;
    background-color: rgba(255,255,255,0.85);
    box-shadow: 0 2px 10px rgba(184,146,90,0.08);
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23B8925A" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color: var(--bbw-black);
    font-weight: 500;
}
#size-select:focus {
    border-color: var(--bbw-gold); outline: none;
    box-shadow: 0 0 0 3px rgba(184,146,90,0.14);
}
@media (max-width: 640px) {
    #size-select { width: 140px; max-width: 140px; }
}
.color-swatches {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.swatch {
    width: 38px; height: 38px;
    border-radius: 50%;
    cursor: pointer;
    border: 2.5px solid rgba(184,146,90,0.30);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.10);
    position: relative;
}
.swatch:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 16px rgba(184,146,90,0.28);
}
.swatch.active {
    border-color: #15110E;
    border-width: 3px;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.10);
    transform: scale(1.1);
}
.color-swatches .swatch {
    position: relative;
    cursor: pointer;
}
.color-swatches .swatch::after {
    content: attr(data-color);
    position: absolute;
    top: -42px;
    left: 50%;
    transform: translateX(calc(-50% + var(--tooltip-shift, 0px)));
    background: #15110E;
    color: var(--bbw-gold);
    font-size: 13px;
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid rgba(184,146,90,0.40);
    white-space: nowrap;
    opacity: 0; visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none; z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.20);
}
.color-swatches .swatch:hover::after {
    opacity: 1; visibility: visible; top: -48px;
}
.color-swatches .swatch::before {
    content: '';
    position: absolute; top: -8px; left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #15110E;
    opacity: 0; visibility: hidden;
    transition: all 0.2s ease;
}
.color-swatches .swatch:hover::before {
    opacity: 1; visibility: visible;
}

/* Card avatar (40x40) de la couleur en hover — mobile uniquement, et
   seulement quand swatch_scroll_mobile:"no" (body.bbw-swatch-avatar-on,
   cf. script.js). Placée au-dessus du tooltip nom existant (::after,
   top:-42px/-48px) pour ne jamais le chevaucher. Masquée par défaut sur
   toutes tailles d'écran — activée uniquement dans le bloc @media mobile
   ci-dessous, jamais sur desktop même si la classe est présente sur body. */
.swatch-avatar {
    display: none;
    position: absolute;
    top: -96px;
    left: 50%;
    transform: translateX(calc(-50% + var(--tooltip-shift, 0px)));
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--bbw-gold);
    box-shadow: 0 4px 12px rgba(0,0,0,0.24);
    opacity: 0; visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none; z-index: 10;
}
@media (max-width: 768px) {
    body.bbw-swatch-avatar-on .swatch-avatar {
        display: block;
    }
    body.bbw-swatch-avatar-on .color-swatches .swatch:hover .swatch-avatar {
        opacity: 1; visibility: visible; top: -102px;
    }
}

.swatch-extra {
    display: none;
}
.color-swatches.swatches-expanded .swatch-extra {
    display: block;
}
.swatch-toggle {
    width: 38px; height: 38px;
    border-radius: 50%;
    cursor: pointer;
    border: 2.5px solid rgba(184,146,90,0.30);
    background: rgba(255,255,255,0.90);
    color: #15110E;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s ease, background 0.25s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.10);
    padding: 0;
}
.swatch-toggle:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 16px rgba(184,146,90,0.28);
    background: rgba(184,146,90,0.10);
}


/* ════════════════════════════
   ADD TO CART / BUY NOW
════════════════════════════ */
.quantity-add-wrapper {
    width: 100%;
    padding: 14px !important;
    background: linear-gradient(160deg, #fdfbf8 0%, #f6f0e6 100%);
    border: none;
    border-radius: 18px;
    box-shadow:
        0 10px 30px rgba(21,17,14,0.06),
        0 1px 0 rgba(255,255,255,0.9) inset;
    box-sizing: border-box;
}
.quantity-add {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.quantity-add__row {
    display: flex; gap: 10px; align-items: stretch;
    width: 100%;
}
.quantity-add__row .add-to-cart.cta,
.quantity-add__row .buy-now.cta,
.quantity-add__row .buy-paypal.cta {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
}


/* ── Sélecteur de quantité — pilule segmentée, relief nacré ── */
.quantity-add-wrapper .quantity {
    display: flex; align-items: stretch; gap: 0;
    border: 1px solid rgba(184,146,90,0.30);
    padding: 0; border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fdf9f3 100%);
    box-shadow:
        0 0 0 5px #ffffff,
        0 4px 14px rgba(184,146,90,0.14),
        0 1px 0 rgba(255,255,255,0.95) inset,
        0 -1px 0 rgba(184,146,90,0.08) inset;
    flex-shrink: 0;
    overflow: hidden;
}
.quantity-add-wrapper .quantity button {
    background: transparent;
    color: var(--bbw-gold);
    border: none;
    padding: 10px 15px; cursor: pointer;
    border-radius: 0; font-weight: 700;
    font-size: 17px;
    transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
    flex-shrink: 0;
    box-shadow: none;
}
.quantity-add-wrapper .quantity button:first-child {
    border-right: 1px solid rgba(184,146,90,0.22);
}
.quantity-add-wrapper .quantity button:last-child {
    border-left: 1px solid rgba(184,146,90,0.22);
}
.quantity-add-wrapper .quantity button:hover {
    background: rgba(184,146,90, 0.10);
    color: var(--bbw-gold);
    transform: none;
    box-shadow: none;
}
.quantity-add-wrapper .quantity input {
    width: 50px; text-align: center;
    border: none; font-size: 17px; font-weight: 700;
    background: transparent; color: var(--bbw-black);
}


/* ── ADD TO CART — laqué noir, liseré or, relief bombé ── */
button.add-to-cart.cta {
    background: linear-gradient(180deg, #211a15 0%, #15110E 55%, #0d0a07 100%) !important;
    color: var(--bbw-gold-light) !important;
    font-size: 14px !important;
    padding: 15px 22px !important;
    cursor: pointer; flex-shrink: 0 !important;
    width: auto !important; min-width: fit-content !important;
    border-radius: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    border: 1px solid rgba(184,146,90,0.65) !important;
    box-shadow:
        0 0 0 5px #ffffff,
        0 10px 26px rgba(0,0,0,0.30),
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 -2px 4px rgba(0,0,0,0.35) inset !important;
    transition: all 0.32s cubic-bezier(0.4,0,0.2,1) !important;
    white-space: nowrap;
    position: relative; overflow: hidden;
    text-transform: uppercase;
}
button.add-to-cart.cta::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 100%);
    pointer-events: none;
    border-radius: 13px 13px 0 0;
}
button.add-to-cart.cta::after {
    content: '';
    position: absolute; top: -50%; left: -70%;
    width: 45%; height: 200%;
    background: linear-gradient(90deg, transparent, rgba(184,146,90,0.16), transparent);
    transform: skewX(-20deg);
    animation: shimmerBar 3s ease-in-out infinite;
}
button.add-to-cart.cta:hover {
    background: linear-gradient(180deg, #2a221b 0%, #1a1510 55%, #100c08 100%) !important;
    color: var(--bbw-gold-light) !important;
    border-color: rgba(184,146,90,0.90) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow:
        0 0 0 5px #ffffff,
        0 16px 36px rgba(0,0,0,0.34),
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 -2px 4px rgba(0,0,0,0.35) inset !important;
}


/* ── BUY NOW — or métallique brossé, relief bombé ── */
button.buy-now.cta {
    background: linear-gradient(180deg,
        #f3d78e 0%,
        var(--bbw-gold-light) 22%,
        var(--bbw-gold) 55%,
        #a9761f 100%
    ) !important;
    background-size: 200% auto !important;
    color: #241a08 !important;
    font-size: 14px !important;
    padding: 15px 22px !important;
    cursor: pointer; flex-shrink: 0 !important;
    width: auto !important; min-width: fit-content !important;
    border-radius: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em !important;
    border: 1px solid rgba(120,84,20,0.45) !important;
    box-shadow:
        0 0 0 5px #ffffff,
        0 10px 26px rgba(184,146,90,0.42),
        0 1px 0 rgba(255,255,255,0.55) inset,
        0 -2px 4px rgba(120,84,20,0.30) inset !important;
    transition: all 0.32s cubic-bezier(0.4,0,0.2,1) !important;
    animation: ctaShimmerGold 3.5s linear infinite !important;
    white-space: nowrap;
    text-transform: uppercase;
    position: relative; overflow: hidden;
}
button.buy-now.cta::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 100%);
    pointer-events: none;
    border-radius: 13px 13px 0 0;
}
button.buy-now.cta::after {
    content: '';
    position: absolute; top: -50%; left: -70%;
    width: 45%; height: 200%;
    background: rgba(255,255,255,0.30);
    transform: skewX(-20deg);
    animation: shimmerBar 3s 1s ease-in-out infinite;
}
button.buy-now.cta:hover {
    background-position: right center !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow:
        0 0 0 5px #ffffff,
        0 16px 38px rgba(184,146,90,0.54),
        0 1px 0 rgba(255,255,255,0.65) inset,
        0 -2px 4px rgba(120,84,20,0.30) inset !important;
    color: #0e0803 !important;
}


/* ── PayPal — nacré ivoire, liseré or, sobre et distinct des 2 autres ── */
button.buy-paypal.cta {
    background: linear-gradient(180deg, #ffffff 0%, #fbf6ec 100%) !important;
    color: #003087 !important;
    font-size: 14px !important;
    padding: 15px 16px !important;
    cursor: pointer; flex-shrink: 0 !important;
    border-radius: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    border: 1px solid rgba(184,146,90,0.40) !important;
    box-shadow:
        0 0 0 5px #ffffff,
        0 8px 22px rgba(21,17,14,0.10),
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 -2px 4px rgba(184,146,90,0.10) inset !important;
    transition: all 0.32s cubic-bezier(0.4,0,0.2,1) !important;
    white-space: nowrap;
    position: relative;
}
button.buy-paypal.cta svg { flex-shrink: 0; }
button.buy-paypal.cta:hover {
    background: linear-gradient(180deg, #ffffff 0%, #f6efe0 100%) !important;
    border-color: rgba(184,146,90,0.65) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow:
        0 0 0 5px #ffffff,
        0 14px 30px rgba(21,17,14,0.14),
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 -2px 4px rgba(184,146,90,0.10) inset !important;
}
button.buy-paypal.cta.is-loading {
    opacity: 0.6 !important;
    cursor: wait !important;
    pointer-events: none;
}
@media (max-width: 768px) {
    .quantity-add-wrapper { padding: 10px !important; border-radius: 15px; }
    button.add-to-cart.cta { padding: 12px 14px !important; font-size: 12px !important; border-radius: 11px !important; }
    button.buy-now.cta     { padding: 12px 14px !important; font-size: 12px !important; border-radius: 11px !important; }
    button.buy-paypal.cta  { padding: 12px 12px !important; font-size: 12px !important; border-radius: 11px !important; }
    .quantity-add-wrapper .quantity { border-radius: 10px; }
}

/* ── Trust icons sous les boutons de paiement — même style que le footer
   (.bbw-footer__pay-icon), en plus compact. Une seule ligne, scroll
   horizontal si ça déborde plutôt que de wrapper. ── */
.pp-trust-payment-icons {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.pp-trust-payment-icons::-webkit-scrollbar { display: none; }

.pp-trust-payment-icon {
    font-size: 16px;
    background: #ffffff;
    border: 1px solid rgba(184,146,90,0.35);
    border-radius: 5px;
    padding: 3px 6px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pp-trust-payment-icon.fa-cc-visa       { color: #1a1f71; }
.pp-trust-payment-icon.fa-cc-mastercard { color: #eb001b; }
.pp-trust-payment-icon.fa-cc-amex       { color: #007bc1; }
.pp-trust-payment-icon.fa-cc-paypal     { color: #003087; }
.pp-trust-payment-icon.fa-apple-pay     { color: #000000; }
.pp-trust-payment-icon.fa-btc           { color: #f7931a; }


/* ════════════════════════════
   BENEFITS BLOCK
════════════════════════════ */
.pp-benefits-block {
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    /* border: 1px solid rgba(184,146,90,0.28); */
    border-radius: 18px;
    box-shadow:
        0 4px 24px rgba(184,146,90,0.10),
        0 1px 0 rgba(255,255,255,0.80) inset;
    overflow: hidden;
    position: relative;
}

.pp-benefits-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184,146,90,0.40), transparent);
    pointer-events: none;
}
.pp-benefits-header {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 16px;
    background: #15110E;
    color: var(--bbw-gold);
    font-size: 0.74rem; font-weight: 800;
    letter-spacing: 0.10em; text-transform: uppercase;
}
.pp-benefits-header i { color: #86efac; font-size: 0.90rem; }
.pp-benefits-list { list-style: none; margin: 0; padding: 4px 0; }
.pp-benefits-list li {
    display: flex; align-items: flex-start;
    gap: 10px; padding: 8px 16px;
    font-size: 0.84rem; color: rgba(30,15,5,0.72);
    line-height: 1.55;
    border-bottom: 1px solid rgba(184,146,90,0.08);
    transition: background 0.2s ease, transform 0.2s ease;
}
.pp-benefits-list li:last-child { border-bottom: none; }
.pp-benefits-list li:hover {
    background: rgba(253,249,244,0.80);
    transform: translateX(3px);
}
.pp-benefits-list li i {
    color: #22c55e; font-size: 0.82rem;
    flex-shrink: 0; margin-top: 2px;
    filter: drop-shadow(0 0 4px rgba(34,197,94,0.25));
}


/* ════════════════════════════
   SIZE CHART TRIGGER
   → Premium noir/or cohérent
════════════════════════════ */
.size-chart-paul-guide-wrapper {
    position: relative;
    width: 100%;
}
.size-chart-paul-guide-border-1 {
    width: 100%; max-width: 100%;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: #15110E;
    /* border: 1px solid rgba(184,146,90,0.50); */
    border-radius: 0 !important;
    box-sizing: border-box !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 18px rgba(0,0,0,0.20);
}
/* .size-chart-paul-guide-border-1::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1.5px;
    background: linear-gradient(270deg, var(--bbw-gold), rgba(255,255,255,0.15), var(--bbw-gold-light), var(--bbw-gold));
    background-size: 300% 300%;
    animation: borderRun 3.5s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
} */
.size-chart-paul-guide-border-1::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 35%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(184,146,90,0.08), transparent);
    animation: shimmerBar 2.8s ease-in-out infinite;
    pointer-events: none;
    border-radius: 0;
}
.size-chart-paul-guide-border-1:hover {
    background: var(--bbw-black);
    border-color: rgba(184,146,90,0.75);
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.26);
}
.size-chart-paul-guide-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px !important;
    user-select: none;
    position: relative;
    z-index: 1;
}
.size-chart-paul-guide-text {
    color: var(--bbw-gold);
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.size-chart-paul-guide-icon {
    width: 20px; height: 20px;
    color: var(--bbw-gold) !important;
    margin-left: 10px;
    flex-shrink: 0;
    display: inline-block;
    filter: drop-shadow(0 0 4px rgba(184,146,90,0.50));
    transition: transform 0.4s ease;
}
.size-chart-paul-guide-toggle:hover .size-chart-paul-guide-icon {
    animation: iconSpin 0.8s ease-in-out forwards;
}
.pp-size-guide-compact.size-chart-paul-guide-border-1 {
    padding: 8px 14px;
    margin-bottom: 8px;
}
.pp-size-guide-compact .size-chart-paul-guide-text {
    font-size: 12.5px !important;
}
.pp-size-guide-compact .size-chart-paul-guide-icon {
    width: 16px; height: 16px;
}

.size-chart-paul-guide-icon svg {
    width: 100% !important;
    height: 100% !important;
    fill: currentColor !important;
    display: block;
}


/* ════════════════════════════
   OVERLAY
════════════════════════════ */
.size-chart-paul-guide-overlay {
    position: fixed !important;
    inset: 0 !important;
    display: none;
    z-index: 999 !important;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.4s ease-out;
}
.size-chart-paul-guide-overlay.active {
    opacity: 1;
    display: block !important;
}


/* ════════════════════════════
   MODAL SIZE CHART
════════════════════════════ */
.size-chart-paul-guide-modal {
    position: fixed !important;
    inset: 0 !important;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
.size-chart-paul-guide-modal.active {
    opacity: 1;
    visibility: visible;
    display: flex !important;
}
.modal-paul-guide-content {
    position: relative;
    width: 95%;
    max-width: 500px;
    max-height: 86vh;
    background: linear-gradient(170deg, #fdf9f4 0%, #faf4ec 60%, #f9f2e8 100%);
    border-radius: 20px;
    padding: 28px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
    animation: modalIn 0.42s cubic-bezier(0.22,1,0.36,1) forwards;
    border: 1px solid rgba(184,146,90,0.28);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.18),
        0 4px 24px rgba(184,146,90,0.12);
}
.modal-paul-guide-content::-webkit-scrollbar { display: none; }
.modal-paul-guide-content::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(270deg, var(--bbw-gold), rgba(255,255,255,0.10), var(--bbw-gold-light), var(--bbw-gold));
    background-size: 300% 300%;
    animation: borderRun 3s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}
.modal-paul-guide-content::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(184,146,90,0.20), transparent);
    animation: scanLine 4s linear infinite;
    pointer-events: none;
    z-index: 1;
}
.modal-paul-guide-content .modal-paul-guide-close,
.modal-paul-guide-content > * {
    position: relative;
    z-index: 2;
}
.modal-paul-guide-close {
    position: absolute;
    top: -12px !important;
    right: 5px !important;
    width: 32px; height: 32px;
    min-width: 32px; min-height: 32px;
    font-size: 18px;
    cursor: pointer;
    color: var(--bbw-gold);
    line-height: 1;
    font-weight: 600;
    background: #15110E;
    border-radius: 50%;
    display: flex;
    align-items: center; justify-content: center;
    flex-shrink: 0;
    z-index: 10;
    border: 1px solid rgba(184,146,90,0.40);
    box-shadow: 0 4px 12px rgba(0,0,0,0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.modal-paul-guide-close:hover {
    transform: scale(1.12) rotate(8deg);
    background: var(--bbw-black);
    box-shadow: 0 6px 20px rgba(0,0,0,0.30);
}
.modal-paul-guide-title {
    text-align: left;
    margin: 0 0 16px 0 !important;
    font-weight: 700;
    font-size: 20px;
    padding-right: 44px;
    line-height: 1.3;
    color: var(--bbw-black);
}
.modal-paul-guide-title strong { color: var(--bbw-gold); }
.modal-paul-guide-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 14px !important;
}
.modal-paul-guide-image { flex: 0 0 42%; max-width: 42%; }
.modal-paul-guide-image img {
    max-width: 100%; height: auto; display: block;
    border: 1px solid rgba(184,146,90,0.28);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.modal-paul-guide-side-text {
    flex: 1; line-height: 1.65;
    color: rgba(30,15,5,0.68);
    font-size: 13px;
    word-wrap: break-word; overflow-wrap: break-word;
}
.modal-paul-guide-side-text strong { color: var(--bbw-black); }
.modal-paul-guide-side-text.truncated {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    padding-right: 4px;
}
.modal-paul-guide-side-text.truncated::before {
    content: '';
    position: absolute;
    right: 0; bottom: 0;
    width: 88px; height: 1.4em;
    background: linear-gradient(90deg, transparent, #faf4ec 60%);
    pointer-events: none;
}
.modal-paul-guide-side-text.truncated::after {
    content: 'More...';
    position: absolute;
    right: 0; bottom: 0;
    font-weight: 700;
    color: var(--bbw-gold);
    pointer-events: none;
}
.modal-paul-guide-side-text.expanded { cursor: pointer; }
.modal-paul-guide-bold-title {
    margin: 14px 0 8px 0 !important;
    font-size: 15px; font-weight: 800;
    color: var(--bbw-black);
    display: flex; align-items: center;
    gap: 7px; letter-spacing: 0.03em;
    position: relative; padding-left: 12px;
}
.modal-paul-guide-bold-title::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 80%;
    background: linear-gradient(180deg, var(--bbw-gold), #b07d28);
    border-radius: 4px;
}


.modal-paul-guide-detailed-text table {
    width: 100%; border-collapse: collapse;
    margin-top: 10px; font-size: 13px;
    border-radius: 10px; overflow: hidden;
}
.modal-paul-guide-detailed-text table thead tr {
    background: #15110E;
}
.modal-paul-guide-detailed-text table thead tr th {
    border: 1px solid rgba(184,146,90,0.25);
    padding: 10px 8px; text-align: left;
    font-weight: 700; color: var(--bbw-gold);
    letter-spacing: 0.04em;
}
.modal-paul-guide-detailed-text table td {
    border: 1px solid rgba(184,146,90,0.10);
    padding: 9px 8px; color: rgba(30,15,5,0.72);
    background: rgba(255,255,255,0.70) !important;
}
.modal-paul-guide-detailed-text table td strong { color: var(--bbw-black); }
.modal-paul-guide-detailed-text table tbody tr {
    transition: all 0.25s ease;
}
.modal-paul-guide-detailed-text table tbody tr:nth-child(even) {
    background-color: rgba(253,249,244,0.80) !important;
}
.modal-paul-guide-detailed-text table tbody tr:hover td {
    background: rgba(184,146,90,0.06) !important;
    color: var(--bbw-black);
}
.modal-paul-guide-detailed-text h3 {
    color: var(--bbw-black); font-size: 14px; font-weight: 700;
    margin: 16px 0 8px 0;
    display: flex; align-items: center;
    gap: 7px; letter-spacing: 0.03em;
    padding-left: 12px; position: relative;
}
.modal-paul-guide-detailed-text h3::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 80%;
    background: linear-gradient(180deg, var(--bbw-gold), #b07d28);
    border-radius: 4px;
}
.modal-paul-guide-detailed-text h3::after {
    content: '';
    position: absolute; bottom: -4px; left: 12px;
    height: 1.5px; width: 60px;
    background: linear-gradient(90deg, rgba(184,146,90,0.45), transparent);
    border-radius: 2px;
}
.modal-paul-guide-detailed-text ul {
    padding-left: 18px; margin: 8px 0;
}
.modal-paul-guide-detailed-text ul li {
    color: rgba(30,15,5,0.68); font-size: 13px;
    line-height: 1.7; margin-bottom: 4px; position: relative;
}
.modal-paul-guide-detailed-text ul li::marker { color: var(--bbw-gold); }
.modal-paul-guide-detailed-text ul li strong { color: var(--bbw-black); }

@media (max-width: 768px) {
    .modal-paul-guide-content {
        width: 96%; padding: 20px;
        border-radius: 16px; max-height: 88vh;
    }
    .modal-paul-guide-title { font-size: 17px; margin-bottom: 12px !important; padding-right: 40px; }
    .modal-paul-guide-bold-title { font-size: 13px; }
    .modal-paul-guide-image { flex: 0 0 46%; max-width: 46%; }
    .modal-paul-guide-side-text { font-size: 12px; }
    .modal-paul-guide-detailed-text table { font-size: 11px; overflow-x: auto; display: block; }
    .modal-paul-guide-detailed-text table th,
    .modal-paul-guide-detailed-text table td { padding: 6px 8px; }
}


/* ════════════════════════════
   STORIES
   → Fond ivoire, label couleur ivoire
════════════════════════════ */
.paul-story-block-block1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: -3px 0 !important;
    padding: 2px !important;
    border: none !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    position: relative;
}
.paul_story_bloc__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(72px, 22vw);
    gap: clamp(14px, 4vw, 22px);
    justify-content: flex-start;
    align-items: center;
    padding: 6px 4px 10px;
    margin: 2px 0;
    width: 100%; max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.paul_story_bloc__grid::-webkit-scrollbar { display: none; }

@media (max-width: 480px) {
    .paul_story_bloc__grid {
        grid-auto-columns: minmax(64px, 26vw);
        gap: clamp(16px, 5vw, 22px);
        padding: 4px 2px 10px;
    }
}
@media (min-width: 768px) {
    .paul_story_bloc__grid {
        grid-auto-columns: minmax(80px, 16vw);
        gap: 20px;
    }
}

.paul_story_item {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
    cursor: pointer;
    scroll-snap-align: center;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.paul_story_item:hover { transform: scale(1.06); }

.paul_story_item p {
    color: rgba(30,15,5,0.68);
    font-size: clamp(10px, 2.5vw, 12px);
    margin: 0;
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    width: 100%; text-align: center;
    overflow: hidden; text-overflow: ellipsis;
    aspect-ratio: unset;
}
.paul_story_item:hover p { color: var(--bbw-gold); }

.paul_story_video {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 50%; display: block;
    border: 2.5px solid rgba(184,146,90,0.28);
    box-shadow:
        0 4px 16px rgba(0,0,0,0.10),
        0 0 0 3px rgba(184,146,90,0.08);
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.paul_story_item:hover .paul_story_video {
    box-shadow:
        0 8px 24px rgba(0,0,0,0.15),
        0 0 0 4px rgba(184,146,90,0.22);
    border-color: var(--bbw-gold);
}

.paul_story_popup {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 95%; max-width: 420px;
    z-index: 10000;
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}
.paul_story_popup.open {
    opacity: 1; visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) translateY(0);
}
.paul_story_popup__content {
    position: relative; width: 95%; max-width: 420px;
    aspect-ratio: 9/16; max-height: 80vh;
    border-radius: 16px;
    border: 1.5px solid rgba(184,146,90,0.45);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.38);
}
@media (max-width: 767px) {
    .paul_story_popup__content { max-height: 80vh !important; }
}
.paul_story_slider { width: 100%; height: 100%; position: relative; }
.paul_story_fullvideo {
    width: 100% !important; height: 100% !important;
    object-fit: cover; position: absolute; top: 0; left: 0;
    opacity: 0; visibility: hidden; transition: opacity 0.4s ease;
}
.paul_story_fullvideo.active { opacity: 1; visibility: visible; }

.paul_story_popup__close {
    position: absolute; top: 12px; right: 12px;
    background: #15110E;
    border: 1px solid rgba(184,146,90,0.40);
    border-radius: 50%;
    width: 32px; height: 32px;
    cursor: pointer; z-index: 10;
    display: grid; place-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.28);
    transition: transform 0.2s ease;
}
.paul_story_popup__close:hover {
    transform: scale(1.12) rotate(8deg);
    background: var(--bbw-black);
}
.paul_story_popup__close svg { width: 18px; height: 18px; }
.paul_story_popup__close path { fill: var(--bbw-gold); }
.paul_story_slider::before, .paul_story_slider::after {
    content: ''; position: absolute; top: 0;
    width: 50%; height: 100%;
    cursor: pointer; z-index: 5;
}
.paul_story_slider::before { left: 0; }
.paul_story_slider::after  { right: 0; }

.paul_story_overlay {
    position: fixed !important; inset: 0 !important;
    display: none; z-index: 9999 !important;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0; transition: opacity 0.4s ease-out;
}
.paul_story_overlay.active { opacity: 1; display: block !important; }





/* ════════════════════════════
   ACCORDION
   → Style ivoire et noir/or cohérent
════════════════════════════ */
.paul-details-accordion {
    display: flex; flex-direction: column; gap: 6px;
}
.paul-accordion-block1 {
    background: transparent;
    padding: 2px 0; margin-bottom: -3px; margin-top: -3px;
}
.accordion-item {
    border-radius: 16px;
    overflow: visible; 
    box-shadow: 0 3px 14px rgba(0,0,0,0.05);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.accordion-item:hover {
    box-shadow: 0 8px 24px rgba(184,146,90,0.12);
    transform: translateY(-1px);
}
.accordion-summary {
    cursor: pointer; user-select: none;
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%; text-align: left;
    font-weight: 700;
    transition: background 0s, color 0s, opacity 0.18s;
    padding: 14px 18px;
    /* border: 1px solid rgba(184,146,90,0.20); */
    border-radius: 16px;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    color: var(--bbw-black);
    font-size: 14px;
    box-sizing: border-box;
}
.accordion-summary:hover {
    background: rgba(253,249,244,0.95);
    border-color: rgba(184,146,90,0.35);
}
details[open] > .accordion-summary {
    background: #15110E !important;
    color: var(--bbw-gold) !important;
    border-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
details[open] > .accordion-summary .custom-icon { color: var(--bbw-gold) !important; }
details[open] > .accordion-summary .toggle-icon {
    transform: rotate(45deg);
    color: var(--bbw-gold) !important;
    background: rgba(184,146,90,0.15);
}
.summary-content {
    display: flex; align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.accordion-title-text {
    flex: 1; font-size: 14px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.custom-icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; border-radius: 9px;
    width: 28px; height: 22px;
    background: rgba(184,146,90,0.10);
    color: var(--bbw-gold);
}
.custom-icon svg { width: 100%; height: 100%; fill: currentColor; }
.toggle-icon {
    line-height: 1;
    width: 28px; height: 28px;
    min-width: 28px; 
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 20px;
    color: rgba(30,15,5,0.35);
    background: rgba(184,146,90,0.10);
}
.accordion-panel {
    padding: 14px 18px 16px;
    /* border: 1px solid rgba(184,146,90,0.14); */
    border-top: none;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    line-height: 1.68; font-size: 14px;
    color: rgba(30,15,5,0.68);
    background: rgba(253,249,244,0.60);
}
@media (max-width: 749px) {
    .accordion-summary { padding: 13px 14px; }
    .accordion-panel { padding: 12px 14px 14px; }
}


/* ════════════════════════════
   IMAGE SLIDER (paul-images)
════════════════════════════ */
.paul-images-block {
    width: 100%; overflow: hidden;
    padding: 0; margin: 0;
}
.images-slider-wrapper { position: relative; width: 100%; overflow: hidden; }
.images-slider-track {
    display: flex; gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 3px 10px;
}
.images-slider-track::-webkit-scrollbar { display: none; }
.slide-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 64%; max-width: 280px;
    box-sizing: border-box;
    border-radius: 20px; overflow: hidden;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    border: 1px solid rgba(184,146,90,0.20);
    box-shadow: 0 4px 20px rgba(184,146,90,0.08);
    transition: all 0.32s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column;
    position: relative;
}
.slide-item::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(184,146,90,0.45), transparent);
    opacity: 0;
    transition: opacity 0.28s;
}
.slide-item:hover::before { opacity: 1; }
.slide-item:hover {
    box-shadow: 0 16px 40px rgba(184,146,90,0.16);
    border-color: rgba(184,146,90,0.40);
    transform: translateY(-6px);
}
.image-wrapper {
    width: 100%; overflow: hidden;
    background: rgba(253,249,244,0.60);
    line-height: 0; flex-shrink: 0;
}
.slide-image {
    width: 100%; height: 190px !important;
    object-fit: cover !important; display: block;
    transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.slide-item:hover .slide-image { transform: scale(1.07); }
.slide-title {
    font-size: 14px; font-weight: 800;
    color: var(--bbw-black);
    padding: 12px 14px 3px; line-height: 1.3;
    letter-spacing: 0.01em;
}
.slide-text {
    font-size: 12px; color: rgba(30,15,5,0.48);
    padding: 0 14px 14px; line-height: 1.6;
}
@media (min-width: 768px) {
    .slide-item { width: calc((100% - 16px) / 2.2); max-width: none; }
    .slide-image { height: 195px !important; }
}
@media (min-width: 1025px) {
    .slide-item { width: calc((100% - 48px) / 2); max-width: none; }
    .slide-image { height: 195px !important; }
}


/* ════════════════════════════
   FAQ
   → Style ivoire + bordure or
════════════════════════════ */
.paul-faq-block {
    display: flex; flex-direction: column;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    border-radius: 22px; overflow: hidden;
    padding: 0; margin: 0 0 8px 0;
    /* border: 1px solid rgba(184,146,90,0.28); */
    box-shadow:
        0 4px 24px rgba(184,146,90,0.10),
        0 1px 0 rgba(255,255,255,0.80) inset;
    position: relative; width: 100%;
    box-sizing: border-box;
}

.paul-faq-block::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184,146,90,0.45), transparent);
    z-index: 1;
    pointer-events: none;
}
.faq-item {
    border-bottom: 1px solid rgba(184,146,90,0.10) !important;
    transition: background 0.18s ease;
    width: 100%; box-sizing: border-box;
}
.faq-item:last-child { border-bottom: none !important; }
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-question {
    cursor: pointer; user-select: none;
    display: flex; align-items: center;
    justify-content: space-between;
    width: 100%; padding: 14px 18px;
    text-align: left; font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
    min-height: 54px; font-size: 14px;
    color: var(--bbw-black); background: transparent;
    gap: 12px; box-sizing: border-box;
}
.faq-question:hover { background: rgba(184,146,90,0.04); }
details[open] > .faq-question {
    background: #15110E;
    color: var(--bbw-gold);
}
.question-text {
    flex: 1; line-height: 1.45;
    font-size: 14px; font-weight: 700;
    min-width: 0;
}
.chevron {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; min-width: 26px;
    border-radius: 50%;
    background: rgba(184,146,90,0.10);
    transform: rotate(0deg);
    transition: transform 0.30s cubic-bezier(0.4,0,0.2,1), background 0.2s ease;
    font-weight: 700; font-size: 18px;
    color: var(--bbw-gold); flex-shrink: 0; line-height: 1;
}
details[open] .chevron {
    transform: rotate(90deg);
    background: rgba(184,146,90,0.16);
    color: var(--bbw-gold);
}
.faq-answer {
    padding: 13px 18px 15px;
    line-height: 1.68; font-size: 13px;
    color: rgba(30,15,5,0.68);
    background: rgba(253,249,244,0.60);
    border-top: 1px solid rgba(184,146,90,0.08);
    width: 100%; box-sizing: border-box; overflow: hidden;
}
@media (max-width: 749px) {
    .faq-question { padding: 12px 14px; font-size: 13px; }
    .faq-answer   { padding: 11px 14px 13px; }
}


/* ════════════════════════════
   MOBILE LAYOUT
════════════════════════════ */
@media (max-width: 768px) {
    html, body { overflow-x: hidden !important; width: 100% !important; }
    .product-layout {
        flex-direction: column;
        width: 100% !important; max-width: 100% !important;
        padding: 2px !important; margin: 0 !important; gap: 10px;
    }
    .product-media {
        width: 100% !important; max-width: 100% !important;
        flex-direction: column-reverse;
        gap: 6px; margin: 0 !important;
        overflow: hidden !important; box-sizing: border-box !important;
        position: relative !important; top: auto !important;
        padding-right: 4px !important;
    }
    .thumbnails {
        flex-direction: row; width: 100%;
        max-height: none; overflow-x: auto; overflow-y: hidden;
    }
    .thumbnail-item { flex: 0 0 auto; }
    .thumbnail-item img { width: 80px !important; height: 80px !important; }
    .main-image-slider { width: 100%; border-radius: 16px; }
    .main-image-slider {
        height: var(--product-media-h-mobile) !important;
        min-height: var(--product-media-h-mobile) !important;
        max-height: var(--product-media-h-mobile) !important;
    }
    .product-media.sticky-media-mobile:not(.thumbs-mobile-horizontal) .thumbnails {
        height: var(--product-media-h-mobile) !important;
        min-height: var(--product-media-h-mobile) !important;
        max-height: var(--product-media-h-mobile) !important;
    }
    .main-image img:not(.bbw-video-placeholder-logo),
    .product-media.sticky-media-mobile .main-image img:not(.bbw-video-placeholder-logo) {
        object-fit: cover !important;
    }
    .product-content {
        width: 100% !important; max-width: 100% !important;
        margin: 0 !important; padding: 18px 8px 8px !important;
        box-sizing: border-box !important;
        border-radius: 16px !important;
    }
    .product-content > * { max-width: 100% !important; box-sizing: border-box !important; }
    .paul-main-title { font-size: 16px; }
}


/* ════════════════════════════
   WISHLIST
════════════════════════════ */
.size-wrapper {
    display: flex; align-items: center;
    gap: 16px; width: 100%; max-width: 300px;
}
.wishlist-icon-product {
    cursor: pointer; color: var(--bbw-gold);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.wishlist-icon-product:hover {
    transform: scale(1.18);
    filter: drop-shadow(0 4px 8px rgba(184,146,90,0.35));
}
.wishlist-icon-product svg {
    width: 28px; height: 28px;
    transition: fill 0.3s ease, stroke 0.3s ease;
}
.wishlist-icon-product.added svg {
    fill: var(--bbw-gold);
    stroke: var(--bbw-gold);
}

/* ════════════════════════════
   SIZE / PRODUCT GUIDE — inline link, next to the wishlist icon
   (compact trigger only; the modal it opens is untouched).
════════════════════════════ */
.pp-size-guide-inline {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    vertical-align: middle;
}
.pp-size-guide-inline .size-chart-paul-guide-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.pp-size-guide-inline .size-chart-paul-guide-text {
    font-family: var(--font-body, sans-serif);
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(21,17,14,0.68);
    text-decoration: underline;
    text-underline-offset: 2px;
    letter-spacing: 0.01em;
}
.pp-size-guide-inline .size-chart-paul-guide-icon {
    width: 15px;
    height: 15px;
    color: var(--bbw-gold) !important;
    margin-left: 0;
    flex-shrink: 0;
    display: inline-flex;
    filter: none;
}
.pp-size-guide-inline .size-chart-paul-guide-toggle:hover .size-chart-paul-guide-text {
    color: var(--bbw-gold);
}
.pp-size-guide-inline .size-chart-paul-guide-toggle:hover .size-chart-paul-guide-icon {
    animation: iconSpin 0.8s ease-in-out forwards;
}


/* ════════════════════════════
   PP-WAVE-SEPARATOR
   → Adapté au fond ivoire
════════════════════════════ */
.pp-wave-separator {
    width: 100%;
    line-height: 0;
    pointer-events: none;
    overflow: hidden;
    margin: 2px 0;
    flex-shrink: 0;
    --wave-gold: var(--bbw-gold);
    --wave-ivory: #f0e8d8;
    --wave-gold-opacity: 0.08;
    --wave-ivory-opacity: 0.55;
}
.pp-wave-separator svg {
    display: block; width: 100%; height: 12px;
}
.pp-wave-separator .wave-path-gold {
    fill: var(--wave-gold);
    opacity: var(--wave-gold-opacity);
}
.pp-wave-separator .wave-path-rose {
    fill: var(--wave-ivory);
    opacity: var(--wave-ivory-opacity);
}


/* ════════════════════════════════════════════════
   THUMBNAILS LAYOUT — DESKTOP
════════════════════════════════════════════════ */
.product-media.thumbs-desktop-vertical-left {
    flex-direction: row;
}
.product-media.thumbs-desktop-vertical-left .thumbnails {
    flex-direction: column;
    width: 100px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    order: 0;
}
.product-media.thumbs-desktop-vertical-left .main-image-slider {
    flex: 1;
    order: 1;
}

.product-media.thumbs-desktop-horizontal-below {
    flex-direction: column;
}
.product-media.thumbs-desktop-horizontal-below .thumbnails {
    flex-direction: row;
    width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    order: 1;
    padding-top: 0px;
}
.product-media.thumbs-desktop-horizontal-below .main-image-slider {
    width: 100%;
    order: 0;
}
.product-media.thumbs-desktop-horizontal-below .thumbnail-item {
    flex-shrink: 0;
}
.product-media.thumbs-desktop-horizontal-below .thumbnail-item img {
    width: 90px !important;
    height: 90px !important;
}
.product-media.thumbs-desktop-horizontal-below .thumbnails:not(:has(.thumbnail-item))::before {
    width: 90px;
    height: 90px;
    box-shadow:
        98px 0 0 0 rgba(184,146,90,0.10),
        196px 0 0 0 rgba(184,146,90,0.07);
}

/* ════════════════════════════════════════════════
   THUMBNAILS LAYOUT — MOBILE
════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .product-media {
        flex-direction: column !important;
    }
    .product-media .main-image-slider {
        order: 0 !important;
        width: 100% !important;
    }
    .product-media .thumbnails {
        order: 1 !important;
        flex-direction: row !important;
        width: 100% !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-shrink: 0 !important;
        gap: 6px !important;
    }
    .product-media .thumbnail-item {
        flex-shrink: 0;
    }
    .product-media .thumbnail-item img {
        width: 80px !important;
        height: 80px !important;
    }

    
    .product-media.thumbs-mobile-horizontal {
        flex-direction: column;
    }
    .product-media.thumbs-mobile-horizontal .main-image-slider {
        order: 0;
        width: 100%;
    }
    .product-media.thumbs-mobile-horizontal .thumbnails {
        order: 1;
        flex-direction: row;
        width: 100%;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        flex-shrink: 0;
        gap: 6px;
    }
    .product-media.thumbs-mobile-horizontal .thumbnail-item {
        flex-shrink: 0;
    }
    .product-media.thumbs-mobile-horizontal .thumbnail-item img {
        width: 80px !important;
        height: 80px !important;
    }
    .product-media.thumbs-mobile-horizontal .thumbnails:not(:has(.thumbnail-item))::before {
        width: 80px;
        height: 80px;
        box-shadow:
            94px 0 0 0 rgba(184,146,90,0.10),
            188px 0 0 0 rgba(184,146,90,0.07);
    }


    .product-media.thumbs-mobile-vertical-left {
        flex-direction: row !important;
        align-items: flex-start;
    }
    .product-media.thumbs-mobile-vertical-left .thumbnails {
        flex-direction: column !important;
        width: 66px !important;
        max-height: 370px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        flex-shrink: 0 !important;
        order: 0 !important;
        gap: 6px !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .product-media.thumbs-mobile-vertical-left .thumbnails::-webkit-scrollbar {
        display: none;
    }
    .product-media.thumbs-mobile-vertical-left .thumbnail-item {
        flex-shrink: 0;
    }
    .product-media.thumbs-mobile-vertical-left .thumbnail-item img {
        width: 60px !important;
        height: 60px !important;
    }
    .product-media.thumbs-mobile-vertical-left .main-image-slider {
        flex: 1 !important;
        order: 1 !important;
        min-width: 0;
        width: auto !important;
    }
}



/* ════════════════════════════════════════════════
   PRODUCTS-MEDIA STICKY — MOBILE
════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .product-media.sticky-media-mobile {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 120px !important;
    z-index: 50 !important;
    align-self: flex-start !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #ffe1a9 !important;
    border-radius: 10px !important;
  }
  /* Hauteur gérée par la règle groupée dans le bloc MOBILE LAYOUT
     (utilise var(--product-media-h-mobile)). */

  .product-layout,
  .product-section,
  body,
  html {
    overflow: visible !important;
    overflow-x: hidden !important;
  }
}





/* ════════════════════════════════════════════════════════════
   BBW HEART BANNER
════════════════════════════════════════════════════════════ */
@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.22); }
}

.bbw-heart-banner {
    width: 100%;
    background: #15110E;
    border-top: 1px solid rgba(184,146,90, 0.35);
    border-bottom: 1px solid rgba(184,146,90, 0.35);
    overflow: hidden;
    position: relative;
    padding: 10px 0;
}
.bbw-heart-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184,146,90,0.55), transparent);
    pointer-events: none;
}
.bbw-heart-banner::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184,146,90,0.55), transparent);
    pointer-events: none;
}

.bbw-heart-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: nowrap;
    padding: 0 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.bbw-heart-banner__icon {
    color: var(--bbw-gold);
    font-size: 14px;
    flex-shrink: 0;
    animation: heartPulse 2.2s ease-in-out infinite;
}
.bbw-heart-banner__icon:last-child {
    animation-delay: 1.1s;
}

.bbw-heart-banner__text {
    font-size: 13px;
    font-weight: 600;
    color: rgba(253, 249, 244, 0.90);
    text-align: center;
    letter-spacing: 0.03em;
    line-height: 1.45;
    flex: 1;
    min-width: 0;
}

@media (max-width: 480px) {
    .bbw-heart-banner__text { font-size: 12px; }
    .bbw-heart-banner__inner { gap: 10px; }
}


/* ════════════════════════════════════════════════════════════
   BBW SOUL MESSAGE
════════════════════════════════════════════════════════════ */
@keyframes soulGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184,146,90, 0); }
    50%       { box-shadow: 0 0 18px 4px rgba(184,146,90, 0.10); }
}

.bbw-soul-message {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.90) 0%,
        rgba(253, 249, 244, 0.95) 100%
    );
    border: 1px solid rgba(184,146,90, 0.28);
    border-left: 3px solid var(--bbw-gold);
    border-radius: 16px;
    box-shadow:
        0 4px 24px rgba(184,146,90, 0.10),
        0 1px 0 rgba(255, 255, 255, 0.80) inset;
    position: relative;
    overflow: hidden;
    animation: soulGlow 4s ease-in-out infinite;
}
.bbw-soul-message::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184,146,90, 0.35), transparent);
    pointer-events: none;
}

.bbw-soul-message__icon {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--bbw-gold);
    margin-top: 2px;
    filter: drop-shadow(0 2px 6px rgba(184,146,90, 0.40));
    animation: heartPulse 3s ease-in-out infinite;
}

.bbw-soul-message__text {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(30, 15, 5, 0.72);
    margin: 0;
    font-style: italic;
}
.bbw-soul-message__text strong {
    color: var(--bbw-black);
    font-style: normal;
}
.bbw-soul-message__text em {
    color: var(--bbw-gold);
    font-weight: 600;
}

@media (max-width: 480px) {
    .bbw-soul-message { padding: 13px 14px; gap: 10px; }
    .bbw-soul-message__text { font-size: 13px; }
}

/* Variante compacte — utilisée comme accroche courte sous le titre produit,
   plutôt qu'un gros bloc séparé. Mêmes classes, juste plus discrète. */
.pp-tagline-compact {
    padding: 0;
    gap: 8px;
    background: none;
    border: none;
    box-shadow: none;
    animation: none;
    margin-top: -6px;
}
.pp-tagline-compact::before { display: none; }
.pp-tagline-compact .bbw-soul-message__icon {
    font-size: 15px;
    margin-top: 3px;
    animation: none;
}
.pp-tagline-compact .bbw-soul-message__text {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(21, 17, 14, 0.62);
}



/* ═══════════════════════════════════════════════
   BBW4LIFE — CUSTOM REQUEST BANNER
═══════════════════════════════════════════════ */

@keyframes bbw-cb-fade-in {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes bbw-cb-shimmer-run {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes bbw-cb-quote-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(184,146,90,0); }
  50%       { text-shadow: 0 0 18px rgba(184,146,90,0.25); }
}
@keyframes bbw-cb-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.6; }
}
@keyframes bbw-cb-diamond-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes bbw-cb-img-float {
  0%, 100% { transform: scale(1.04) translateY(0); }
  50%       { transform: scale(1.06) translateY(-4px); }
}
@keyframes bbw-cb-overlay-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.92; }
}


.bbw-custom-banner {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(184,146,90,0.35);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.28),
    0 0 0 1px rgba(184,146,90,0.12) inset;
  margin: 3px 0;
  isolation: isolate;
}


.bbw-cb-images {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 0;
}

.bbw-cb-img {
  flex: 1;
  overflow: hidden;
}

.bbw-cb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  animation: bbw-cb-img-float 8s ease-in-out infinite;
  filter: brightness(0.55) saturate(0.8);
  display: block;
}

.bbw-cb-img--right img {
  animation-delay: 1.5s;
}


.bbw-cb-img--left::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent,
    rgba(184,146,90,0.40),
    transparent
  );
  z-index: 2;
}


.bbw-cb-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(0,0,0,0.72) 0%,
      rgba(10,6,2,0.80) 50%,
      rgba(0,0,0,0.72) 100%
    );
  z-index: 1;
  animation: bbw-cb-overlay-pulse 6s ease-in-out infinite;
}


.bbw-cb-shimmer-top,
.bbw-cb-shimmer-bottom {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  z-index: 3;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(184,146,90,0.60) 30%,
    rgba(232,188,106,0.90) 50%,
    rgba(184,146,90,0.60) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: bbw-cb-shimmer-run 3s linear infinite;
}
.bbw-cb-shimmer-top    { top: 0;    border-radius: 20px 20px 0 0; }
.bbw-cb-shimmer-bottom { bottom: 0; border-radius: 0 0 20px 20px; animation-delay: 1.5s; }


.bbw-cb-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  gap: 10px;
  text-align: center;
}


.bbw-cb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bbw-gold);
  opacity: 0;
  animation: bbw-cb-fade-in 0.7s ease 0.2s forwards;
}

.bbw-cb-eyebrow-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bbw-gold);
  animation: bbw-cb-dot-pulse 2s ease-in-out infinite;
}
.bbw-cb-eyebrow-dot:last-child {
  animation-delay: 1s;
}


.bbw-cb-quote {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(16px, 3.2vw, 22px);
  font-weight: 700;
  font-style: italic;
  color: #ffffff;
  margin: 0;
  padding: 0;
  line-height: 1.35;
  letter-spacing: 0.01em;
  opacity: 0;
  animation:
    bbw-cb-fade-in 0.8s ease 0.45s forwards,
    bbw-cb-quote-glow 4s ease-in-out 1.5s infinite;
}


.bbw-cb-sub {
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 500;
  color: rgba(253,249,244,0.72);
  margin: 0;
  line-height: 1.55;
  letter-spacing: 0.04em;
  opacity: 0;
  animation: bbw-cb-fade-in 0.8s ease 0.75s forwards;
}

.bbw-cb-br { display: none; }


.bbw-cb-line {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: bbw-cb-fade-in 0.7s ease 1s forwards;
}

.bbw-cb-line span {
  display: block;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(184,146,90,0.60)
  );
}
.bbw-cb-line span:last-child {
  background: linear-gradient(90deg,
    rgba(184,146,90,0.60),
    transparent
  );
}

.bbw-cb-diamond {
  font-style: normal;
  font-size: 9px;
  color: var(--bbw-gold);
  animation: bbw-cb-diamond-spin 6s linear infinite;
  display: inline-block;
  filter: drop-shadow(0 0 4px rgba(184,146,90,0.50));
}

/* ══════════════════════
   WAVE DIVIDERS — meme style noir/ivoire que .bbw-finale-wave
   (section "Thank you" du footer), bande noire au-dessus/en-dessous
   de .bbw-custom-banner.
══════════════════════ */
.bbw-wave-sep--banner-in,
.bbw-wave-sep--banner-out {
  position: relative;
  width: 100%;
  background: var(--bbw-black);
  line-height: 0;
  pointer-events: none;
}
.bbw-wave-sep--banner-in svg,
.bbw-wave-sep--banner-out svg { display: block; width: 100%; }
.bbw-wave-sep--banner-in path,
.bbw-wave-sep--banner-out path { fill: #fdfaf5; }

.bbw-wave-sep--banner-in { height: 64px; margin-bottom: 3px; }
.bbw-wave-sep--banner-in svg { height: 64px; }
.bbw-wave-sep--banner-out { height: 46px; margin-top: 3px; }
.bbw-wave-sep--banner-out svg { height: 46px; }

@media (max-width: 768px) {
  .bbw-wave-sep--banner-in { height: 40px; }
  .bbw-wave-sep--banner-in svg { height: 40px; }
  .bbw-wave-sep--banner-out { height: 30px; }
  .bbw-wave-sep--banner-out svg { height: 30px; }
}

/* ══════════════════════
   RESPONSIVE MOBILE
══════════════════════ */
@media (max-width: 768px) {
  .bbw-custom-banner {
    height: 200px;
    border-radius: 16px;
    margin: 1px 0;
  }

  .bbw-cb-content {
    gap: 8px;
    padding: 0 16px;
  }

  .bbw-cb-eyebrow {
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .bbw-cb-quote {
    font-size: clamp(14px, 4.5vw, 18px);
  }

  .bbw-cb-sub {
    font-size: 11px;
  }

  .bbw-cb-br { display: inline; }

  .bbw-cb-line span {
    width: 36px;
  }
}

@media (max-width: 400px) {
  .bbw-cb-quote {
    font-size: 14px;
  }
  .bbw-cb-sub {
    font-size: 10.5px;
  }
}




/* ════════════════════════════════════════════════
   PRODUCT SHARE BUTTON & POPUP
════════════════════════════════════════════════ */
.pp-share-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,0.72);
  border: 1.5px solid rgba(184,146,90,0.50);
  color: var(--bbw-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pp-share-btn:hover {
  background: #000;
  border-color: var(--bbw-gold);
  transform: scale(1.10);
  box-shadow: 0 6px 20px rgba(184,146,90,0.35);
}
.pp-share-btn svg {
  flex-shrink: 0;
}

.pp-media-counter {
  position: absolute;
  bottom: 60px;
  right: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.30);
  color: rgba(255,255,255,0.92);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

.pp-media-counter__current {
  color: #fff;
}

.pp-media-counter__total {
  color: rgba(255,255,255,0.60);
}


.pp-share-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 999990;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.pp-share-overlay.active {
  opacity: 1;
  visibility: visible;
}


.pp-share-modal {
  position: relative;
  width: 92%;
  max-width: 380px;
  background: linear-gradient(135deg, rgba(255,255,255,0.97) 0%, rgba(253,249,244,0.99) 100%);
  border: 1px solid rgba(184,146,90,0.30);
  border-radius: 22px;
  padding: 24px 20px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.22), 0 4px 24px rgba(184,146,90,0.12);
  animation: ppShareIn 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes ppShareIn {
  0%   { opacity:0; transform: translateY(24px) scale(0.95); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}


.pp-share-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #000;
  border: 1px solid rgba(184,146,90,0.40);
  color: var(--bbw-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
  z-index: 2;
}
.pp-share-close:hover {
  transform: scale(1.12) rotate(8deg);
}


.pp-share-header {
  margin-bottom: 18px;
}
.pp-share-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--bbw-black);
  margin-bottom: 12px;
  padding-right: 30px;
}
.pp-share-title-row svg {
  color: var(--bbw-gold);
  flex-shrink: 0;
}


.pp-share-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(253,249,244,0.80);
  border: 1px solid rgba(184,146,90,0.20);
  border-radius: 12px;
}
.pp-share-preview img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(184,146,90,0.20);
  flex-shrink: 0;
}
.pp-share-preview-info {
  flex: 1;
  min-width: 0;
}
.pp-share-preview-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--bbw-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.pp-share-preview-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--bbw-gold);
  margin-top: 2px;
}
.pp-share-preview-badge {
  font-size: 10px;
  font-weight: 700;
  background: #000;
  color: var(--bbw-gold);
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid rgba(184,146,90,0.40);
  white-space: nowrap;
  flex-shrink: 0;
}


.pp-share-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.pp-share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 6px;
  border-radius: 14px;
  border: 1px solid rgba(184,146,90,0.15);
  background: rgba(255,255,255,0.80);
  cursor: pointer;
  transition: all 0.22s ease;
  font-size: 11px;
  font-weight: 600;
  color: rgba(30,15,5,0.70);
  letter-spacing: 0.02em;
}
.pp-share-option:hover {
  border-color: rgba(184,146,90,0.40);
  background: rgba(253,249,244,0.95);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  color: var(--bbw-black);
}
.pp-share-option.pp-copied {
  border-color: #22c55e;
  background: rgba(34,197,94,0.06);
  color: #16a34a;
}

.pp-share-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease;
}
.pp-share-option:hover .pp-share-icon {
  transform: scale(1.10);
}

.pp-share-icon--copy      { background: #f0f0f0; color: #555; }
.pp-share-icon--whatsapp  { background: #25D366; color: #fff; }
.pp-share-icon--facebook  { background: #1877F2; color: #fff; }
.pp-share-icon--instagram { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }
.pp-share-icon--pinterest { background: #E60023; color: #fff; }
.pp-share-icon--email     { background: #555; color: #fff; }


.pp-share-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #000;
  color: var(--bbw-gold);
  border: 1px solid rgba(184,146,90,0.40);
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}
.pp-share-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 480px) {
  .pp-share-modal { padding: 20px 14px 16px; }
  .pp-share-grid  { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pp-share-icon  { width: 38px; height: 38px; }
  .pp-share-option { font-size: 10px; padding: 10px 4px; }
}




/* ════════════════════════════════════════════════════════════
   MINI PRODUCT SLIDER — REDESIGN PREMIUM
════════════════════════════════════════════════════════════ */

@keyframes mps-title-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes mps-card-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes wishlist-confirm {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.5); }
    100% { transform: scale(1.15); }
}
@keyframes wishlist-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.30); }
    100% { transform: scale(1); }
}

#mini-product-slider {
    padding: 0px;
    background: linear-gradient(170deg, #fdf9f4 0%, #faf4ec 55%, #f9f2e8 100%);
    border-top: 1px solid rgba(184,146,90,0.14);
    position: relative;
    overflow: hidden;
}

#mini-product-slider::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(184,146,90,0.07) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}
#mini-product-slider::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(184,146,90,0.05) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

#mini-product-slider .section-title {
    text-align: center;
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 700;
    color: var(--bbw-black);
    margin-bottom: 18px;
    letter-spacing: -0.2px;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}
#mini-product-slider .section-title::after {
    content: '';
    display: block;
    width: 44px;
    height: 2.5px;
    background: linear-gradient(90deg, var(--bbw-gold), var(--bbw-gold-light), var(--bbw-gold));
    background-size: 200% 100%;
    margin: 8px auto 0;
    border-radius: 3px;
    animation: mps-title-shimmer 3s linear infinite;
}

#mini-product-slider .slider-container {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#mini-product-slider .slider-container::before,
#mini-product-slider .slider-container::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 50px;
    z-index: 2;
    pointer-events: none;
}
#mini-product-slider .slider-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(253,249,244,0.95), transparent);
}
#mini-product-slider .slider-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(253,249,244,0.95), transparent);
}

#mini-product-slider .product-slider {
    display: flex;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 6px 18px 16px;
}
#mini-product-slider .product-slider::-webkit-scrollbar { display: none; }


#mini-product-slider .product-item {
    flex: 0 0 calc((100% - 4 * 14px) / 5);
    text-align: center;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.92);
    border-radius: 18px;
    box-shadow:
        0 2px 12px rgba(184,146,90,0.08),
        0 1px 0 rgba(255,255,255,0.90) inset;
    padding: 10px 10px 12px;
    border: 1px solid rgba(184,146,90,0.16);
    transition:
        box-shadow 0.30s cubic-bezier(0.4,0,0.2,1),
        transform 0.30s cubic-bezier(0.4,0,0.2,1),
        border-color 0.30s;
    position: relative;
    overflow: hidden;
}

#mini-product-slider .product-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.5px;
    background: linear-gradient(90deg, var(--bbw-gold), var(--bbw-gold-light), var(--bbw-gold));
    background-size: 200% 100%;
    border-radius: 18px 18px 0 0;
    animation: mps-card-shimmer 3s linear infinite;
    opacity: 0;
    transition: opacity 0.30s;
}
#mini-product-slider .product-item:hover::before { opacity: 1; }

#mini-product-slider .product-item::after {
    content: '';
    position: absolute;
    bottom: -36px; right: -36px;
    width: 110px; height: 110px;
    background: radial-gradient(circle, rgba(184,146,90,0.07) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    transition: opacity 0.30s;
    opacity: 0;
}
#mini-product-slider .product-item:hover::after { opacity: 1; }

#mini-product-slider .product-item:hover {
    box-shadow:
        0 10px 30px rgba(184,146,90,0.16),
        0 2px 8px rgba(184,146,90,0.10);
    transform: translateY(-5px);
    border-color: rgba(184,146,90,0.32);
}

@media (max-width: 768px) {
    #mini-product-slider .product-item {
        flex: 0 0 calc((100% - 1 * 10px) / 2);
    }
    #mini-product-slider .product-slider { gap: 10px !important; }
}

#mini-product-slider .product-image {
    position: relative;
    width: 100%;
}

#mini-product-slider .mini-media-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(184,146,90,0.04);
}

#mini-product-slider .mini-media-image {
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: none;
    margin: 0 auto;
    transition: transform 0.36s cubic-bezier(0.4,0,0.2,1);
}
#mini-product-slider .mini-media-image.active { display: block; }
#mini-product-slider .product-item:hover .mini-media-image.active {
    transform: scale(1.04);
}

#mini-product-slider .mini-media-slider-prev,
#mini-product-slider .mini-media-slider-next {
    display: flex !important;
    width: 26px; height: 26px;
    align-items: center; justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
    background: rgba(253,249,244,0.96);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(184,146,90,0.20);
    transition: background 0.20s, box-shadow 0.20s, transform 0.20s;
    color: var(--bbw-gold);
    border: 1px solid rgba(184,146,90,0.28);
    font-size: 13px;
}
#mini-product-slider .mini-media-slider-prev:hover,
#mini-product-slider .mini-media-slider-next:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(184,146,90,0.30);
    transform: translateY(-50%) scale(1.10);
}
#mini-product-slider .mini-media-slider-prev { left: 6px; }
#mini-product-slider .mini-media-slider-next { right: 6px; }
#mini-product-slider .mini-media-slider-prev::before { content: '\2190'; }
#mini-product-slider .mini-media-slider-next::before { content: '\2192'; }

#mini-product-slider .mini-discount-badge {
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    background: #F6EFE5 !important;
    color: var(--bbw-gold) !important;
    padding: 3px 9px !important;
    font-size: 10px !important;
    border-radius: 100px !important;
    z-index: 3 !important;
    font-weight: 700 !important;
    font-family: var(--font-body, sans-serif) !important;
    letter-spacing: 0.06em !important;
    border: 1px solid var(--bbw-gold) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
}

#mini-product-slider .mini-wishlist-icon {
    position: absolute;
    bottom: 7px;
    left: 7px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    z-index: 2;
    background: rgba(253,249,244,0.96);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 2px 8px rgba(184,146,90,0.18),
        0 1px 0 rgba(255,255,255,0.90) inset;
    border: 1px solid rgba(184,146,90,0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#mini-product-slider .mini-wishlist-icon:hover {
    transform: scale(1.20);
    box-shadow: 0 4px 16px rgba(184,146,90,0.30);
    border-color: rgba(184,146,90,0.55);
}

#mini-product-slider .mini-wishlist-icon .wishlist-icon-empty {
    display: block;
    width: 14px;
    height: 14px;
    stroke: var(--bbw-gold);
    fill: none;
    stroke-width: 2;
    transition: stroke 0.20s ease;
}
#mini-product-slider .mini-wishlist-icon:hover .wishlist-icon-empty {
    stroke: #b07d28;
}

#mini-product-slider .mini-wishlist-icon .wishlist-icon-filled {
    display: none;
    width: 14px;
    height: 14px;
    fill: var(--bbw-gold);
    stroke: none;
}

#mini-product-slider .mini-wishlist-icon.added .wishlist-icon-empty  { display: none; }
#mini-product-slider .mini-wishlist-icon.added .wishlist-icon-filled { display: block; }
#mini-product-slider .mini-wishlist-icon.added {
    background: rgba(184,146,90,0.10);
    border-color: rgba(184,146,90,0.35);
    box-shadow: 0 2px 10px rgba(184,146,90,0.20);
    animation: wishlist-confirm 0.45s ease forwards;
    transform: scale(1.15);
}

/* Bouton panier — coin haut-droit, même système que .pdp-grid-card__cart
   (bouton .add-to-cart rond, doré) mais positionné/dimensionné pour ce
   slider compact au lieu du bas-droite de la grille pleine taille. */
#mini-product-slider .mini-cart-btn {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 28px;
    height: 28px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bbw-gold, #B8925A);
    color: var(--bbw-black, #15110E);
    border: 1px solid rgba(184,146,90,0.45);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(184,146,90,0.30);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
#mini-product-slider .mini-cart-btn:hover {
    background: var(--bbw-black, #15110E);
    color: var(--bbw-gold-light, #e8bc6a);
    transform: scale(1.15);
    box-shadow: 0 4px 16px rgba(184,146,90,0.40);
}

#mini-product-slider .product-info {
    margin-top: 9px !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    text-align: center !important;
    width: 100% !important;
    z-index: 2 !important;
}

#mini-product-slider .product-price {
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--font-body, sans-serif) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: baseline !important;
    gap: 5px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
}

#mini-product-slider .current-price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--bbw-black) !important;
    letter-spacing: 0.01em;
}

#mini-product-slider .compare-price {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: rgba(30,15,5,0.38) !important;
    text-decoration: line-through !important;
}




 

/* Pages BBW Features (design "Vote For This Design", identifiées par
   .bbw-heart-banner — présent uniquement sur ces 38 pages) : le sanaica
   banner est masqué par défaut au niveau CSS, AVANT tout JS, pour garantir
   zéro flash quel que soit le setting sanaica_banner.show_on_bbw_features.
   Le JS (initSanaicaBanner dans script.js) le réaffiche explicitement
   seulement si ce setting vaut "yes" — voir script.js. */
body:has(.bbw-heart-banner) #sanaica-banner-paul {
    display: none;
}

#sanaica-banner-paul {
    position: relative;
    height: 90px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: -20px;
    margin-top: 0;
    padding-bottom: 20px;
}
@media (max-width: 768px) {
    #sanaica-banner-paul { margin-bottom: -15px !important; }
}
#sanaica-banner-paul .sanaica-banner-paul-slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}
#sanaica-banner-paul .sanaica-banner-paul-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
    z-index: 4;
}
#sanaica-banner-paul .sanaica-banner-paul-slide.active {
    opacity: 1;
    z-index: 2;
}
#sanaica-banner-paul .sanaica-banner-paul-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#sanaica-banner-paul .sanaica-banner-paul-placeholder {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    z-index: 5;
    transition: opacity 0.5s ease;
}
#sanaica-banner-paul .sanaica-banner-paul-title {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -40%);
    opacity: 0;
    color: #f00b76;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    text-shadow: 0 2px 4px #15110E;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 3;
    line-height: 1.2;
    transition: all 1.5s ease-in-out;
}
#sanaica-banner-paul .sanaica-banner-paul-slide.active .sanaica-banner-paul-title {
    transform: translate(-50%, -50%);
    opacity: 1;
}
#sanaica-banner-paul .sanaica-banner-paul-indicators {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 6;
}
#sanaica-banner-paul.image-mode .sanaica-banner-paul-indicators { bottom: 25px; }
#sanaica-banner-paul .sanaica-banner-paul-indicator {
    cursor: pointer;
    transition: all 0.35s ease;
    background: #f3f3f3;
    opacity: 0.7;
}
#sanaica-banner-paul .sanaica-banner-paul-indicator.active {
    background: var(--bbw-gold, #B8925A);
    opacity: 1;
    transform: scale(1.2);
}
.sanaica-banner-paul-indicators.dots .sanaica-banner-paul-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.sanaica-banner-paul-video-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.sanaica-banner-paul-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sanaica-video-sound-toggle {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.5);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sanaica-video-sound-toggle svg {
    width: calc(50px * 0.52);
    height: calc(50px * 0.52);
    fill: #ffffff;
    display: none;
}
.sanaica-video-sound-toggle .sound-off { display: block; }
.sanaica-video-sound-toggle:not(.muted) .sound-on { display: block; }
.sanaica-video-sound-toggle:not(.muted) .sound-off { display: none; }
@media (max-width: 768px) {
    #sanaica-banner-paul { height: 70px !important; }
    .sanaica-banner-paul-indicators.dots .sanaica-banner-paul-indicator { width: 10px; height: 10px; }
    #sanaica-banner-paul.image-mode .sanaica-banner-paul-indicators { bottom: 25px;}

    
#sanaica-banner-paul {
    margin-bottom: -35px;
    margin-top: 0;
    padding-bottom: 20px;
}
    }
@media (max-width: 480px) {
    #sanaica-banner-paul .sanaica-banner-paul-title { padding: 0.5rem 0rem; font-size: 18px; width: 100%; }
}
#sanaica-banner-paul .sanaica-banner-paul-slider-container,
#sanaica-banner-paul .sanaica-banner-paul-slide,
#sanaica-banner-paul .sanaica-banner-paul-title { pointer-events: none; }
#sanaica-banner-paul .sanaica-banner-paul-indicators,
.sanaica-video-sound-toggle { pointer-events: auto; }
 
.sanaica-banner-paul-image[src]:not([src=""]) {
  display: block !important;
}


/* ════════════════════════════════════════════════════════════
   BUY X GET X WIDGET — sous le bloc bundle, dans le flux normal
   de la page (plus superposé sur la bannière). Même identité
   visuelle claire que .bundle-save-container. Connecté au panier
   réel (script.js), toutes les valeurs viennent de
   settings.cart_drawer (promo_buy_quantity/promo_get_quantity).
════════════════════════════════════════════════════════════ */
.bbw-bxgx-widget {
    width: 100%;
    box-sizing: border-box;
    margin: 14px 0 0;
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.90) 0%,
        rgba(253,249,244,0.95) 100%
    );
    box-shadow:
        0 4px 24px rgba(184,146,90,0.10),
        0 1px 0 rgba(255,255,255,0.80) inset;
}
.bbw-bxgx-widget__title {
    margin: 0 0 4px;
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.15;
    color: var(--bbw-black, #15110E);
    transition: color 0.3s ease;
}
.bbw-bxgx-widget.is-unlocked .bbw-bxgx-widget__title {
    color: var(--bbw-black, #15110E);
}
.bbw-bxgx-widget__subtitle {
    margin: 0 0 12px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--bbw-gold, #c9963e);
}
.bbw-bxgx-widget__bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bbw-bxgx-widget__bar-track {
    position: relative;
    flex: 1;
    height: 8px;
    border-radius: 100px;
    background: rgba(184,146,90,0.14);
    overflow: visible;
}
.bbw-bxgx-widget__bar-fill {
    position: relative;
    height: 100%;
    width: 0%;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--bbw-gold, #c9963e), var(--bbw-gold-light, #e8bc6a));
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.bbw-bxgx-widget__bar-tooltip {
    position: absolute;
    top: -24px;
    right: -4px;
    transform: translateX(50%);
    background: var(--bbw-black, #15110E);
    color: var(--bbw-gold-light, #e8bc6a);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.bbw-bxgx-widget__bar-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 6px;
    border: 4px solid transparent;
    border-top-color: var(--bbw-black, #15110E);
}
.bbw-bxgx-widget.is-active .bbw-bxgx-widget__bar-tooltip {
    opacity: 1;
}
.bbw-bxgx-widget__pct {
    flex-shrink: 0;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 800;
    color: var(--bbw-gold, #c9963e);
    min-width: 34px;
    text-align: right;
}
.bbw-bxgx-widget__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}
.bbw-bxgx-widget__count {
    flex-shrink: 0;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 800;
    color: var(--bbw-black, #15110E);
}
.bbw-bxgx-widget__msg {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 11.5px;
    line-height: 1.35;
    color: rgba(30,15,5,0.62);
    text-align: right;
}

@media (max-width: 768px) {
    .bbw-bxgx-widget {
        padding: 13px 14px;
        border-radius: 14px;
    }
    .bbw-bxgx-widget__title {
        font-size: 15px;
        margin-bottom: 3px;
    }
    .bbw-bxgx-widget__subtitle {
        font-size: 10px;
        margin-bottom: 9px;
    }
    .bbw-bxgx-widget__bar-track { height: 6px; }
    .bbw-bxgx-widget__bar-tooltip {
        top: -21px;
        font-size: 9px;
        padding: 2px 6px;
    }
    .bbw-bxgx-widget__pct { font-size: 11px; min-width: 28px; }
    .bbw-bxgx-widget__foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        margin-top: 8px;
    }
    .bbw-bxgx-widget__count { font-size: 11.5px; }
    .bbw-bxgx-widget__msg { font-size: 10.5px; text-align: left; }
}


.scrolling-text-group-section {
    width: 100%;
    overflow: hidden;
    background-color: #a50f85;
    padding: 0;
    z-index: 5;
    position: relative;
}
.scroll-container { width: 100%; }
.scroll-content {
    display: flex;
    white-space: nowrap;
    animation: scroll 20s linear infinite;
}
.scroll-content span {
    font-size: 1.3rem;
    color: #ffe3ec;
    margin-right: 2rem;
    font-weight: 600;
    padding: 0.5rem;
    text-transform: uppercase;
    line-height: 1;
}
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
@media (max-width: 768px) {
    .scroll-content { animation: scroll 15s linear infinite; }
    .scroll-content span { font-size: 1rem; margin-right: 1rem; }
}
 

#main-image-slider {
    position: relative;
    overflow: visible;
}
#main-image-slider .main-image {
    overflow: hidden;
    cursor: crosshair;
}
#main-image-slider .slider-arrow {
    position: absolute !important;
    z-index: 9999 !important;
    pointer-events: all;
}

/* ════════════════════════════
   MAGNIFIER ZOOM (desktop, Amazon-style) — l'image principale reste fixe,
   une loupe suit la souris et un panneau agrandi s'ouvre a droite,
   superpose sur la colonne d'info produit (pas au-dessus, au meme niveau).
════════════════════════════ */
.bbw-zoom-lens {
    position: fixed;
    width: 170px;
    height: 170px;
    border: 1px solid rgba(184,146,90,0.65);
    background: rgba(253,249,244,0.30);
    box-shadow: 0 0 0 1px rgba(21,17,14,0.10), 0 4px 18px rgba(21,17,14,0.18);
    pointer-events: none;
    z-index: 400;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}
.bbw-zoom-lens.is-active { opacity: 1; visibility: visible; }

.bbw-zoom-pane {
    position: fixed;
    background-repeat: no-repeat;
    background-color: #fdfaf5;
    border: 1px solid rgba(184,146,90,0.30);
    border-radius: 16px;
    box-shadow:
        0 24px 64px rgba(21,17,14,0.28),
        0 1px 0 rgba(255,255,255,0.70) inset;
    z-index: 400;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.bbw-zoom-pane.is-active { opacity: 1; visibility: visible; }

@media (max-width: 1099px) {
    .bbw-zoom-lens, .bbw-zoom-pane { display: none !important; }
}


.media-zoom-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    align-items: center;
    justify-content: center;
}
.media-zoom-modal.active { display: flex; }
.modal-zoom-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
}
#modal-zoom-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.25s ease;
    user-select: none;
    transform-origin: 50% 50%;
}
.modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 45px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
}
.modal-close:hover { color: #ff69b4; }

/* Badge indiquant qu'on peut recliquer sur l'image pour zoomer davantage.
   Mobile uniquement ; masqué dès que l'image est zoomée (scale > 1, cf.
   #media-zoom-modal.mz-zoomed-in) — même règle que le panneau quick-buy. */
.mz-zoom-badge {
    display: none;
}
@media (max-width: 768px) {
    .mz-zoom-badge {
        display: block;
        position: absolute;
        top: 20px;
        left: 12px;
        max-width: 130px;
        background: rgba(21,17,14,0.65);
        border: 1.5px solid rgba(184,146,90,0.55);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-align: center;
        line-height: 1.3;
        padding: 6px 10px;
        border-radius: 100px;
        z-index: 10001;
        opacity: 1;
        transition: opacity 0.18s ease;
        pointer-events: none;
    }
    #media-zoom-modal.mz-zoomed-in .mz-zoom-badge {
        opacity: 0;
    }
}

/* Flèches de navigation manuelle dans le zoom plein écran mobile — même
   fonction que le swipe déjà présent (mz-quickbuy.js, initSwipeBetweenImages),
   juste un déclencheur alternatif pour les clients qui préfèrent taper.
   Design volontairement différent des flèches .slider-arrow du slider
   principal (cercle plein ivoire) : ici un simple chevron sur verre
   dépoli sombre, cohérent avec le fond noir du modal. Masquées pendant
   le zoom (même règle que .mz-zoom-badge) — le swipe/clic sert alors à
   déplacer l'image zoomée, pas à changer d'image. */
.mz-nav-arrow {
    display: none;
}
@media (max-width: 768px) {
    .mz-nav-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: rgba(21,17,14,0.40);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(255,255,255,0.22);
        color: rgba(255,255,255,0.85);
        cursor: pointer;
        z-index: 10001;
        opacity: 1;
        transition: opacity 0.18s ease, background 0.18s ease;
    }
    .mz-nav-arrow:hover,
    .mz-nav-arrow:active {
        background: rgba(21,17,14,0.60);
        color: #15110E;
    }
    .mz-nav-arrow svg {
        width: 16px;
        height: 16px;
    }
    .mz-nav-prev { left: 10px; }
    .mz-nav-next { right: 10px; }
    #media-zoom-modal.mz-zoomed-in .mz-nav-arrow {
        opacity: 0;
        pointer-events: none;
    }
}

/* ================================================================
   MEDIA ZOOM — QUICK BUY MOBILE
   Panneau quantité/add-to-cart/taille/couleur affiché sous l'image en
   plein écran (#media-zoom-modal), mobile uniquement. Piloté par
   src/... mz-quickbuy (voir products.js) qui synchronise ces champs
   avec les vrais champs de .product-section — pas de logique panier
   dupliquée ici, uniquement de la présentation.
================================================================ */
.mz-quickbuy {
    display: none;
}
@media (max-width: 768px) {
    .mz-quickbuy {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10002;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, rgba(21,17,14,0) 0%, rgba(21,17,14,0.92) 30%, rgba(21,17,14,0.97) 100%);
        opacity: 1;
        transition: opacity 0.18s ease;
    }
    /* Masqué pendant que l'image est zoomée (scale > 1) — dans cet état
       seule l'image et le bouton fermer doivent rester visibles. Classe
       posée par mz-quickbuy.js sur #media-zoom-modal. */
    #media-zoom-modal.mz-zoomed-in .mz-quickbuy {
        opacity: 0;
        pointer-events: none;
    }
}

.mz-quickbuy__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}
.mz-quickbuy__row + .mz-quickbuy__row {
    margin-top: 10px;
}
.mz-quickbuy__row--selects {
    align-items: flex-end;
}

.mz-quickbuy__qty {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    border: 1.5px solid rgba(184,146,90,0.40);
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    padding: 4px;
    box-sizing: border-box;
}
.mz-quickbuy__qty button {
    flex-shrink: 0;
    background: rgba(184,146,90,0.18);
    color: var(--bbw-gold, #B8925A);
    border: none;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mz-quickbuy__qty button:hover {
    background: rgba(184,146,90,0.30);
}
.mz-quickbuy__qty input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    text-align: center;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.mz-quickbuy__add {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
}

/* Ligne des 3 éléments (size 40% / color 40% / aperçu image 20%) — quand
   size ou color est absent pour le produit (mz-quickbuy.js masque le
   .mz-quickbuy__field correspondant), les flex-basis des éléments restants
   s'ajustent automatiquement via flex-grow pour occuper l'espace libéré. */
.mz-quickbuy__field {
    flex: 1 1 40%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mz-quickbuy__field label {
    color: rgba(255,255,255,0.72);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mz-quickbuy__field select {
    width: 100%;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(184,146,90,0.40);
    color: #fff;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 14px;
    font-weight: 500;
    box-sizing: border-box;
}
.mz-quickbuy__field select option {
    color: #15110E;
}

/* Aperçu de l'image couleur — 3e élément sur la même ligne que les 2
   selects (20% de la largeur), affiché quand une couleur est choisie. */
.mz-quickbuy__color-preview {
    display: none;
    flex: 0 0 20%;
    max-width: 20%;
    aspect-ratio: 1 / 1;
    width: auto;
    height: auto;
    border-radius: 8px;
    border: 1.5px solid rgba(184,146,90,0.55);
    object-fit: cover;
    box-sizing: border-box;
}
.mz-quickbuy__color-preview.is-visible {
    display: block;
}



.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}
.popup.show { display: flex; }
.popup-content {
    background: rgb(245, 245, 245);
    max-width: 300px;
    width: 90%;
    border-radius: 24px;
    padding: 5px 15px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    animation: popupPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popupPop {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.popup.success .popup-content { border-top: 8px solid #10b981; }
.popup.error .popup-content { border-top: 8px solid #ef4444; }
.popup-icon { font-size: 50px; margin-bottom: 12px; display: block; }
.popup-title { font-size: 22px; font-weight: 700; margin: 8px 0 12px; color: #111; }
.popup-message { font-size: 15.5px; line-height: 1.5; color: #444; margin-bottom: 20px; }
.popup-close-btn {
    background: #10b981;
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}
.popup.error .popup-close-btn { background: #ef4444; }
.popup-close-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}
 


@media (max-width: 768px) {
    .product-media {
        width: calc(100% + 20px);
        margin-left: -10px;
        margin-right: -10px;
    }
}




/* ═══════════════════════════════════════
   STICKY ATC BAR
═══════════════════════════════════════ */

.sticky-atc {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1.5px solid rgba(184,146,90, 0.30);
    box-shadow: 0 -6px 32px rgba(184,146,90, 0.10);
    transform: translateY(110%);
    transition: transform 0.42s cubic-bezier(.22, 1, .36, 1);
    padding: 10px 0;
}

.sticky-atc.visible {
    transform: translateY(0);
}

/* ═══════════════════════════════════════
   STICKY ATC — TEASER REPLIABLE (mobile uniquement)
   Ajoutée dynamiquement par script.js, jamais sur les pages BBW Features
   (69-75 / 98-110). Le panneau .sticky-atc lui-même n'est pas modifié —
   seuls ces 2 nouveaux éléments (barre + bouton replier) sont ajoutés
   autour de lui.
═══════════════════════════════════════ */
.sticky-atc-teaser {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9989;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bbw-black), var(--bbw-black-soft));
    border-top: 1.5px solid var(--bbw-gold-border-hi);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
    cursor: pointer;
    transform: translateY(110%);
    transition: transform 0.42s cubic-bezier(.22, 1, .36, 1);
    animation: satcTeaserGlow 2.8s ease-in-out infinite;
}

.sticky-atc-teaser.visible {
    transform: translateY(0);
}

/* Léger halo doré qui respire — attire l'œil sans être criard */
@keyframes satcTeaserGlow {
    0%, 100% { box-shadow: 0 -6px 24px rgba(0,0,0,0.18); }
    50%      { box-shadow: 0 -6px 28px rgba(0,0,0,0.18), 0 0 18px var(--bbw-gold-glow-hi); }
}

/* Reflet lumineux qui balaie la barre en diagonale, en boucle */
.sticky-atc-teaser::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(232,188,106,0.22), transparent);
    animation: satcTeaserShine 3.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes satcTeaserShine {
    0%   { left: -60%; }
    55%  { left: 130%; }
    100% { left: 130%; }
}

.sticky-atc-teaser__title {
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bbw-gold-light);
    display: inline-block;
    animation: satcTeaserSway 2.8s ease-in-out infinite;
}

@keyframes satcTeaserSway {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(5px); }
}

.sticky-atc-teaser__icon {
    color: var(--bbw-gold-light);
    font-size: 14px;
    display: inline-flex;
    transform-origin: center;
    animation: satcTeaserBounce 1.9s ease-in-out infinite;
}

@keyframes satcTeaserBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    30%      { transform: scale(1.22) rotate(-8deg); }
    50%      { transform: scale(1.05) rotate(6deg); }
    70%      { transform: scale(1.15) rotate(0deg); }
}

.sticky-atc-teaser__toggle {
    position: absolute;
    right: 12px;
    bottom: 9px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bbw-gold-pale-mid);
    border: 1px solid var(--bbw-gold-border-hi);
    border-radius: 50%;
    color: var(--bbw-gold-light);
    font-size: 11px;
    padding: 0;
    pointer-events: none; /* le clic est géré par la barre entière */
    animation: satcTogglePulse 2.8s ease-in-out infinite;
}

@keyframes satcTogglePulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--bbw-gold-glow); }
    50%      { box-shadow: 0 0 0 5px transparent; }
}

.sticky-atc__collapse-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(21,17,14,0.06);
    border: 1px solid var(--bbw-gold-border);
    border-radius: 50%;
    color: var(--bbw-black);
    font-size: 11px;
    padding: 0;
    z-index: 2;
    cursor: pointer;
}

/* Fonctionnalité mobile uniquement, comme demandé — jamais sur desktop */
@media (min-width: 769px) {
    .sticky-atc-teaser,
    .sticky-atc__collapse-btn {
        display: none !important;
    }
}

.sticky-atc__inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 20px;
}

.sticky-atc__product {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sticky-atc__img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 10px;
    border: 1.5px solid rgba(184,146,90, 0.35);
    flex-shrink: 0;
    transition: opacity 0.25s ease;
}

.sticky-atc__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sticky-atc__title {
    font-size: 13px;
    font-weight: 600;
    color: #15110E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.sticky-atc__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbw-gold);
}

.sticky-atc__price-row {
    display: flex;
    align-items: center;
}

.sticky-atc__compare-price {
    text-decoration: line-through;
    color: rgba(21,17,14,0.38);
    font-size: 11px;
    font-weight: 500;
    margin-left: 4px;
}

.sticky-atc__wishlist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 6px;
    color: rgba(21,17,14,0.55);
    cursor: pointer;
    vertical-align: middle;
}

.sticky-atc__wishlist .wishlist-icon-filled { display: none; }

.sticky-atc__wishlist.active {
    color: var(--bbw-gold);
}
.sticky-atc__wishlist.active .wishlist-icon-empty  { display: none; }
.sticky-atc__wishlist.active .wishlist-icon-filled { display: inline-block; }

.sticky-atc__discount-badge {
    display: none;
    margin-left: 6px;
    padding: 1px 5px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--bbw-gold);
    background: #F6EFE5;
    border: 1px solid var(--bbw-gold);
    border-radius: 2px;
    white-space: nowrap;
}

.sticky-atc__like-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

.sticky-atc__like-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    border-radius: 50px;
    background: rgba(21,17,14,0.08);
    border: 1px solid rgba(21,17,14,0.15);
    padding: 2px 5px;
    cursor: pointer;
    color: #15110E;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sticky-atc__like-btn:hover {
    transform: scale(1.06);
}

.sticky-atc__like-btn svg {
    flex-shrink: 0;
}

.sticky-atc__like-count {
    font-size: 8px;
    font-weight: 700;
    color: #15110E;
    line-height: 1;
}

.sticky-atc__like-btn--like.active {
    background: var(--bbw-gold);
    border-color: var(--bbw-gold);
}

.sticky-atc__like-btn--dislike.active {
    background: #dc2626;
    border-color: #dc2626;
}
.sticky-atc__like-btn--dislike.active .sticky-atc__like-count {
    color: #fdfaf5;
}

.sticky-atc__product::after {
    content: '';
    display: block;
    width: 1px;
    height: 36px;
    background: rgba(184,146,90, 0.25);
    margin-left: 10px;
}

.sticky-atc__selectors {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    flex-wrap: wrap;
}

.satc-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.satc-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(21, 17, 14, 0.55);
    white-space: nowrap;
}

.satc-color-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.satc-swatches {
    display: flex;
    gap: 5px;
}

.satc-swatches::-webkit-scrollbar {
    display: none;
}

.satc-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 0 0 1.5px rgba(45, 26, 14, 0.15);
}

.satc-swatch:hover {
    transform: scale(1.15);
}

.satc-swatch.active {
    border-color: var(--bbw-gold);
    box-shadow: 0 0 0 2px var(--bbw-gold);
    transform: scale(1.12);
}

.satc-color-name {
    font-size: 12px;
    font-weight: 500;
    color: rgba(21, 17, 14, 0.72);
    min-width: 0;
    max-width: 55px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.satc-select {
    height: 34px;
    padding: 0 10px;
    border: 1.5px solid rgba(184,146,90, 0.30);
    border-radius: 8px;
    font-size: 13px;
    color: #15110E;
    background: #fffdf9;
    cursor: pointer;
    transition: border-color 0.2s ease;
    outline: none;
    min-width: 110px;
}

.satc-select:focus {
    border-color: var(--bbw-gold);
}

.satc-qty {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid rgba(184,146,90, 0.30);
    border-radius: 8px;
    overflow: hidden;
}

.satc-qty-btn {
    width: 30px;
    height: 34px;
    background: rgba(184,146,90, 0.08);
    border: none;
    font-size: 16px;
    color: var(--bbw-gold);
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.satc-qty-btn:hover {
    background: rgba(184,146,90, 0.18);
}

#satc-qty-val {
    min-width: 30px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #15110E;
    user-select: none;
}

.sticky-atc__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    height: 44px;
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    color: var(--bbw-gold-light);
    border: 1.5px solid rgba(184,146,90, 0.70);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 4px 14px rgba(184,146,90, 0.25);
}

.sticky-atc__btn:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 208, 128, 1);
    color: #f5d080;
    box-shadow: 0 6px 20px rgba(184,146,90, 0.40);
}

.sticky-atc__btn:active {
    transform: scale(0.97);
}

.sticky-atc__btn i {
    font-size: 15px;
}

.sticky-atc__btn.added {
    background: linear-gradient(135deg, #22a06b 0%, #1a8a57 100%);
    border-color: rgba(34, 160, 107, 0.60);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(34, 160, 107, 0.35);
}

.sticky-atc__actions {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

/* Casseur de ligne mobile (cf. @media max-width:768px) : sans effet sur
   desktop où le sticky bar reste une seule ligne horizontale. */
#sticky-atc-linebreak {
    display: none;
}

.sticky-atc__btn--buy {
    background: linear-gradient(135deg, var(--bbw-gold) 0%, #a67c3d 100%);
    color: #15110E;
    border-color: rgba(184,146,90, 0.70);
}

.sticky-atc__btn--buy:hover {
    color: #15110E;
    border-color: rgba(245, 208, 128, 1);
}

/* ════════════════════════
   RESPONSIVE
════════════════════════ */

@media (max-width: 900px) {
    .sticky-atc__title { max-width: 120px; }
    .sticky-atc__inner { gap: 12px; }
    .sticky-atc__selectors { gap: 12px; }
    .sticky-atc__btn { padding: 0 18px; font-size: 13px; }
}

@media (max-width: 768px) {
    .sticky-atc { padding: 10px 0 14px !important; }
    .sticky-atc__inner { flex-flow: row wrap !important; align-items: stretch !important; gap: 10px !important; padding: 0 14px !important; }
    .sticky-atc__product { justify-content: flex-start !important; flex-basis: 100% !important; order: 1 !important; }
    .sticky-atc__product::after { display: none !important; }
    .sticky-atc__title { max-width: 200px !important; }

    .sticky-atc__selectors { display: contents !important; }
    .satc-field { flex: 1 !important; min-width: 130px !important; }
    #satc-color-field, #satc-size-field { order: 2 !important; flex: 0 1 auto !important; min-width: 0 !important; max-width: 100% !important; }
    .satc-select { min-width: 0 !important; width: 100% !important; }

    /* BBW Features (plans_available:no) : le sticky bar devient un simple
       bouton Request, sans color/size/qty ni Buy Now — display:contents
       ci-dessus écraserait sinon le display:none inline posé par le JS.
       La classe est posée directement sur #sticky-atc en JS (et non sur un
       ancêtre) car #sticky-atc est hors de .product-section dans le DOM. */
    #sticky-atc.bbw-featured-request-mode .sticky-atc__selectors,
    #sticky-atc.bbw-featured-request-mode #satc-color-field,
    #sticky-atc.bbw-featured-request-mode #satc-size-field,
    #sticky-atc.bbw-featured-request-mode .satc-field--qty,
    #sticky-atc.bbw-featured-request-mode #sticky-atc-linebreak,
    #sticky-atc.bbw-featured-request-mode #satc-buy-btn {
        display: none !important;
    }

    /* Casseur de ligne : force Qty + Buy Now à toujours démarrer sur une
       nouvelle ligne, même quand Color(+Size) est étroit (ex: une seule
       couleur) et laisserait sinon de la place pour tout tenir ensemble
       sur la même ligne, écrasant Buy Now. */
    #sticky-atc-linebreak {
        display: block !important;
        flex-basis: 100% !important;
        width: 0 !important;
        height: 0 !important;
        order: 2 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .satc-field--qty { flex: 0 0 auto !important; min-width: 0 !important; order: 3 !important; }

    .sticky-atc__actions { display: contents !important; }
    #satc-add-btn { order: 4 !important; flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
    #satc-buy-btn { order: 5 !important; flex-basis: 100% !important; }

    .sticky-atc__btn { width: 100% !important; justify-content: center !important; height: 46px !important; font-size: 15px !important; }

    .satc-color-field--overflow .satc-color-wrap {
        overflow: hidden;
        max-width: 150px;
    }

    .satc-swatches {
        overflow-x: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        max-width: none;
        flex-shrink: 0;
        scroll-snap-type: x mandatory;
        padding: 4px 0;
    }

    .satc-swatches.overflow-active {
        overflow-x: auto;
        max-width: calc(3 * 22px + 2 * 5px);
    }

    .satc-swatches::-webkit-scrollbar {
        display: none;
    }

    .satc-swatch {
        scroll-snap-align: start;
    }
}

@media (max-width: 400px) {
    .satc-swatch { width: 20px; height: 20px; }
    .sticky-atc__img { width: 40px; height: 40px; }

    .satc-swatches.overflow-active {
        max-width: calc(3 * 20px + 2 * 5px);
    }
}


body:has(.product-section) .bbw-footer {
    margin-bottom: 60px !important;
}

@media (max-width: 768px) {
    /* Espace par défaut (aucune barre sticky ATC visible) */
    body:has(.product-section) .bbw-footer {
        margin-bottom: 10px !important;
    }
  
    body:has(.product-section):has(.sticky-atc-teaser.visible) .bbw-footer {
        margin-bottom: 40px !important;
    }

    body:has(.product-section):has(.sticky-atc.visible) .bbw-footer {
        margin-bottom: 220px !important;
    }
}



.is-product-page:not(:has(.product-section.bbw-featured-request-mode)) .bbw-footer {
    padding-bottom: 60px !important;
}

@media (max-width: 768px) {
    .is-product-page:not(:has(.product-section.bbw-featured-request-mode)) .bbw-footer {
        padding-bottom: 10px !important;
    }
}


/* ════════════════════════════════════════════════
   RECENTLY VIEWED SECTION — FOND IVOIRE DORÉ ULTRA PREMIUM
════════════════════════════════════════════════ */
.rv-section {
  padding: 15px 20px 10px;
  background: #fdfcf9;
  position: relative;
  overflow: hidden;
}

.rv-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(184,146,90,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,146,90,0.04) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
  z-index: 0;
}

.rv-section::after {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,146,90,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}


.rv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  padding: 0 2px;
}

.rv-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rv-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #a07820;
  opacity: 0.85;
}

.rv-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 22px;
  font-weight: 700;
  color: #15110E;
  margin: 0;
  line-height: 1;
}

.rv-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rv-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(160,114,28,0.35);
  background: rgba(184,146,90,0.10);
  color: #8a6018;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.20s ease;
  flex-shrink: 0;
  line-height: 1;
}

.rv-nav-btn:hover {
  background: var(--bbw-gold);
  color: #fff;
  border-color: var(--bbw-gold);
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(184,146,90,0.40);
}

.rv-clear-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(30,14,2,0.12);
  background: transparent;
  color: rgba(30,14,2,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.20s ease;
  flex-shrink: 0;
  line-height: 1;
}

.rv-clear-btn:hover {
  background: rgba(220,38,38,0.10);
  border-color: rgba(220,38,38,0.35);
  color: #dc2626;
  transform: scale(1.08);
}


.rv-slider-wrap {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.rv-track {
  display: flex;
  gap: 12px;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  cursor: grab;
  user-select: none;
}

.rv-track:active { cursor: grabbing; }

/* ════════════════════
   CARD — ivoire nacré
════════════════════ */
.rv-card {
  flex: 0 0 calc(25% - 9px);
  min-width: 0;
  background: rgba(255, 252, 242, 0.92);
  border: 1px solid rgba(184,146,90,0.28);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.28s ease,
              border-color 0.28s ease;
  position: relative;
  box-shadow:
    0 2px 12px rgba(160,114,28,0.10),
    0 1px 3px rgba(0,0,0,0.05);
  backdrop-filter: blur(4px);
}

.rv-card:hover {
  transform: translateY(-5px) scale(1.012);
  border-color: rgba(184,146,90,0.60);
  box-shadow:
    0 16px 42px rgba(160,114,28,0.18),
    0 4px 14px rgba(0,0,0,0.08),
    0 0 0 1px rgba(184,146,90,0.18);
}


.rv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--bbw-gold),
    var(--bbw-gold-light),
    var(--bbw-gold),
    transparent
  );
  opacity: 0;
  transition: opacity 0.30s ease;
  z-index: 10;
}
.rv-card:hover::before { opacity: 1; }


.rv-card__img-wrap {
  position: relative;
  width: 100%;
  padding-top: 90%;
  overflow: hidden;
  background: #f2e8d0;
  flex-shrink: 0;
}

.rv-card__img,
.rv-card__img-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.36s ease, transform 0.48s cubic-bezier(0.4,0,0.2,1);
}

.rv-card__img        { opacity: 0; }
.rv-card__img-hover  { opacity: 1; }

.rv-card:hover .rv-card__img       { opacity: 1; transform: scale(1.05); }
.rv-card:hover .rv-card__img-hover { opacity: 0; }

.rv-card__img.rv-no-hover         { opacity: 1; }
.rv-card:hover .rv-card__img.rv-no-hover { transform: scale(1.05); }


.rv-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #000;
  color: var(--bbw-gold);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid rgba(184,146,90,0.45);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index: 2;
  white-space: nowrap;
}


.rv-card__discount {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #F6EFE5;
  color: var(--bbw-gold);
  border: 1px solid var(--bbw-gold);
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 100px;
  letter-spacing: 0.04em;
  z-index: 2;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(184,146,90,0.35);
}


.rv-card__body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  background: rgba(255, 252, 242, 0.97);
}


.rv-card__title {
  font-size: 0.74rem;
  font-weight: 700;
  color: #15110E;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}


.rv-card__stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rv-card__stars-icons {
  display: flex;
  gap: 1px;
}

.rv-card__star {
  color: var(--bbw-gold);
  font-size: 0.70rem;
  line-height: 1;
}

.rv-card__star.empty {
  color: rgba(184,146,90,0.25);
}

.rv-card__rating-num {
  font-size: 0.66rem;
  font-weight: 600;
  color: rgba(30,14,2,0.40);
  margin-left: 2px;
}


.rv-card__prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.rv-card__price {
  font-size: 0.86rem;
  font-weight: 800;
  color: #8a6018;
  font-family: var(--font-display, Georgia, serif);
  letter-spacing: 0.02em;
}

.rv-card__compare {
  font-size: 0.70rem;
  color: rgba(30,14,2,0.28);
  text-decoration: line-through;
}

.rv-card__discount-inline {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--bbw-gold);
  background: #F6EFE5;
  border: 1px solid var(--bbw-gold);
  border-radius: 100px;
  padding: 1px 6px;
  letter-spacing: 0.04em;
}


.rv-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 7px 10px;
  background: #000;
  color: var(--bbw-gold);
  border: 1.5px solid rgba(184,146,90,0.60);
  border-radius: 8px;
  font-family: var(--font-body, sans-serif);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.22s ease;
  margin-top: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  overflow: hidden;
  position: relative;
}

.rv-card__btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(184,146,90,0.16), transparent);
  transition: left 0.48s ease;
  pointer-events: none;
}

.rv-card__btn:hover::before {
  left: 130%;
}

.rv-card__btn:hover {
  background: var(--bbw-gold);
  color: #000;
  border-color: var(--bbw-gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(184,146,90,0.40);
}

.rv-card__btn svg {
  flex-shrink: 0;
  transition: transform 0.20s ease;
}

.rv-card__btn:hover svg {
  transform: translateX(3px);
}

/* ════════════════════
   RESPONSIVE
════════════════════ */
@media (max-width: 1024px) {
  .rv-card {
    flex: 0 0 calc(33.333% - 8px);
  }
}

@media (max-width: 768px) {
  .rv-section {
    padding: 12px 10px 10px;
  }

  .rv-title { font-size: 18px; color: #15110E; }
  .rv-nav-btn { display: none; }

  .rv-track { gap: 10px; }

  .rv-card {
    flex: 0 0 calc(50% - 5px);
    border-radius: 12px;
  }

  .rv-card__img-wrap {
    padding-top: 78%;
  }

  .rv-card__body {
    padding: 8px 10px 10px;
    gap: 4px;
  }

  .rv-card__title {
    font-size: 0.68rem;
  }

  .rv-card__badge {
    font-size: 0.50rem;
    padding: 2px 6px;
    top: 6px;
    left: 6px;
  }

  .rv-card__discount {
    font-size: 0.50rem;
    padding: 2px 5px;
    top: 6px;
    right: 6px;
  }

  .rv-card__price {
    font-size: 0.78rem;
  }

  .rv-card__btn {
    font-size: 0.62rem;
    padding: 6px 8px;
    letter-spacing: 0.05em;
  }
}

/* ═══════════════════════════════════════
   BBW4LIFE — WAVE DIVIDER
═══════════════════════════════════════ */
.bbw-wave-divider {
  width: 100%;
  line-height: 0;
  overflow: hidden;
  background: #15110E !important;
  padding: 10px 0px;
  margin-top: 0px;
}

.bbw-wave-divider svg {
  display: block;
  width: 100%;
  height: 60px;
}




.bbw-featured-request-mode .quantity-add-wrapper { display: none !important; }
.bbw-featured-request-mode .bbw-request-section  { display: block !important; }

.bbw-featured-request-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 24px;
  background: linear-gradient(135deg, var(--bbw-rose, #6E2439), var(--bbw-black, #15110E));
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
}
.bbw-featured-request-btn:hover { opacity: 0.88; }


/* ════════════════════════════════════════════════════════════
   BBW REQUEST SECTION
════════════════════════════════════════════════════════════ */
@keyframes requestPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184,146,90, 0.20); }
    50%       { box-shadow: 0 0 0 8px rgba(184,146,90, 0); }
}
@keyframes wand {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25%       { transform: rotate(-12deg) scale(1.12); }
    75%       { transform: rotate(12deg) scale(1.12); }
}

.bbw-request-section {
    padding: 5px 0;
    background: linear-gradient(170deg,
        #fdf9f4 0%,
        #faf4ec 60%,
        #f9f2e8 100%
    );
    border-top: 1px solid rgba(184,146,90, 0.15);
    position: relative;
    overflow: hidden;
}
.bbw-request-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184,146,90,0.35), transparent);
    pointer-events: none;
}

.bbw-request-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.bbw-request-label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(30, 15, 5, 0.65);
    text-align: center;
    line-height: 1.45;
    padding-bottom: 20px;
}
.bbw-request-label i {
    color: var(--bbw-gold);
    font-size: 16px;
    flex-shrink: 0;
    animation: wand 3.5s ease-in-out infinite;
}


.bbw-request-section--personalized {
    background: linear-gradient(170deg, #0d0803 0%, var(--bbw-black) 100%);
    border-top: 1px solid rgba(184,146,90, 0.25);
}
.bbw-request-section--personalized .bbw-request-label {
    color: rgba(253, 249, 244, 0.70);
}


.my-product-section { width: 100%; }
.my-product-section .container { display: flex; align-items: center; justify-content: center; }


.my-product-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    background: #15110E;
    color: var(--bbw-gold);
    border: 1.5px solid rgba(184,146,90, 0.55);
    border-radius: 100px;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    font-family: var(--font-body, sans-serif);
    transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.24);
    position: relative;
    overflow: hidden;
    text-align: left;
    animation: requestPulse 3.5s ease-in-out infinite;
}
.my-product-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(184,146,90, 0.10), transparent);
    animation: shimmerBar 2.8s ease-in-out infinite;
    border-radius: 100px;
}
.my-product-btn:hover {
    background: var(--bbw-black);
    border-color: rgba(184,146,90, 0.85);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.30);
}

.my-product-btn__icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(184,146,90, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    border: 1px solid rgba(184,146,90, 0.28);
}
.my-product-btn__icon i { animation: wand 3s ease-in-out infinite; }

.my-product-btn__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.my-product-btn__text strong {
    font-size: 15px;
    color: var(--bbw-gold-light);
    font-weight: 800;
    display: block;
}
.my-product-btn__text small {
    font-size: 12px;
    color: rgba(184,146,90, 0.60);
    font-weight: 500;
    display: block;
}

.my-product-btn__arrow {
    font-size: 20px;
    color: rgba(184,146,90, 0.55);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.my-product-btn:hover .my-product-btn__arrow {
    transform: translateX(4px);
    color: var(--bbw-gold);
}

@media (max-width: 600px) {
    .my-product-btn {
        padding: 12px 18px;
        gap: 12px;
        border-radius: 18px;
    }
    .my-product-btn__text strong { font-size: 14px; }
    .my-product-btn__text small  { font-size: 11px; }
    .my-product-btn__icon { width: 36px; height: 36px; }
}


@media (max-width: 640px) {

    .satc-swatches {
        flex-shrink: 0 !important;
    }
    .satc-color-name {
        flex-shrink: 0 !important;
        overflow: visible !important;
        white-space: nowrap !important;
        font-size: 11px !important;
        max-width: none !important;
    }
}


/* ════════════════════════════════════════════════════════════
   PDP GRID SECTION — "More To Love" product grid (below mini slider)
   Shell is static HTML; .pdp-grid is populated dynamically via JS.
════════════════════════════════════════════════════════════ */

.pdp-grid-section {
    padding: 46px 24px 60px;
    background: linear-gradient(170deg, #fdf9f4 0%, #faf4ec 55%, #f9f2e8 100%);
    border-top: 1px solid rgba(184,146,90,0.14);
    position: relative;
    overflow: hidden;
}

.pdp-grid-section::before {
    content: '';
    position: absolute;
    top: -90px; left: -90px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(184,146,90,0.06) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

.pdp-grid-title {
    text-align: center;
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(22px, 3.4vw, 32px);
    font-weight: 700;
    color: var(--bbw-black);
    margin: 0 0 30px;
    letter-spacing: -0.2px;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}
.pdp-grid-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 2.5px;
    background: linear-gradient(90deg, var(--bbw-gold), var(--bbw-gold-light), var(--bbw-gold));
    background-size: 200% 100%;
    margin: 10px auto 0;
    border-radius: 3px;
    animation: mps-title-shimmer 3s linear infinite;
}

.pdp-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    max-width: 1280px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .pdp-grid-section { padding: 34px 14px 44px; }
    .pdp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

/* ── Card ─────────────────────────────────────────────────── */

.pdp-grid-card {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(184,146,90,0.18);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 2px 12px rgba(184,146,90,0.08),
        0 1px 0 rgba(255,255,255,0.90) inset;
    transition:
        box-shadow 0.30s cubic-bezier(0.4,0,0.2,1),
        transform 0.30s cubic-bezier(0.4,0,0.2,1),
        border-color 0.30s;
    position: relative;
}

.pdp-grid-card:hover {
    box-shadow:
        0 12px 30px rgba(184,146,90,0.16),
        0 2px 8px rgba(184,146,90,0.10);
    transform: translateY(-5px);
    border-color: rgba(184,146,90,0.34);
}

.pdp-grid-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.1;
    overflow: hidden;
    background: rgba(184,146,90,0.05);
}

.pdp-grid-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.pdp-grid-card:hover .pdp-grid-card__img {
    transform: scale(1.05);
}

/* Discount badge — top-left */
.pdp-grid-card__discount {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: #F6EFE5;
    color: var(--bbw-gold);
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 100px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    border: 1px solid var(--bbw-gold);
}

/* Text badge — own row above the image, e.g. "⚡ Speedy Shipping" */
.pdp-grid-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin: 10px 0 -2px 10px;
    background: var(--bbw-gold-pale, rgba(184,146,90,0.14));
    color: var(--bbw-black, #15110E);
    font-family: var(--font-body, sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid rgba(184,146,90,0.30);
    white-space: nowrap;
}
.pdp-grid-card__badge i {
    color: var(--bbw-gold);
    font-size: 10px;
}

/* Wishlist icon — top-right overlay circle (reuses .mini-wishlist-icon behaviour) */
.pdp-grid-card .pdp-grid-card__wishlist,
.pdp-grid-card .mini-wishlist-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(253,249,244,0.96);
    border-radius: 50%;
    border: 1px solid rgba(184,146,90,0.28);
    box-shadow:
        0 2px 8px rgba(184,146,90,0.18),
        0 1px 0 rgba(255,255,255,0.90) inset;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.pdp-grid-card .pdp-grid-card__wishlist:hover,
.pdp-grid-card .mini-wishlist-icon:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 16px rgba(184,146,90,0.30);
    border-color: rgba(184,146,90,0.55);
}
.pdp-grid-card .mini-wishlist-icon .wishlist-icon-empty {
    width: 15px;
    height: 15px;
    stroke: var(--bbw-gold);
    fill: none;
    stroke-width: 2;
    transition: stroke 0.20s ease;
}
.pdp-grid-card .mini-wishlist-icon:hover .wishlist-icon-empty {
    stroke: #b07d28;
}
.pdp-grid-card .mini-wishlist-icon .wishlist-icon-filled {
    display: none;
    width: 15px;
    height: 15px;
    fill: var(--bbw-gold);
    stroke: none;
}
.pdp-grid-card .mini-wishlist-icon.added .wishlist-icon-empty  { display: none; }
.pdp-grid-card .mini-wishlist-icon.added .wishlist-icon-filled { display: block; }
.pdp-grid-card .mini-wishlist-icon.added {
    background: rgba(184,146,90,0.10);
    border-color: rgba(184,146,90,0.35);
    box-shadow: 0 2px 10px rgba(184,146,90,0.20);
    transform: scale(1.12);
}

/* Cart button — bottom-right overlay circle, gold/ivoire */
.pdp-grid-card .pdp-grid-card__cart,
.pdp-grid-card .add-to-cart {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bbw-gold, #B8925A);
    color: var(--bbw-black, #15110E);
    border: 1px solid rgba(184,146,90,0.45);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(184,146,90,0.30);
    cursor: pointer;
    font-size: 14px;
    transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.pdp-grid-card .pdp-grid-card__cart:hover,
.pdp-grid-card .add-to-cart:hover {
    background: var(--bbw-black, #15110E);
    color: var(--bbw-gold-light, #e8bc6a);
    transform: scale(1.10);
    box-shadow: 0 6px 18px rgba(184,146,90,0.40);
}

/* ── Body: title + prices ─────────────────────────────────── */

.pdp-grid-card__body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pdp-grid-card__title {
    font-family: var(--font-body, sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bbw-black);
    line-height: 1.35;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    transition: color 0.20s ease;
}
.pdp-grid-card__title:hover {
    color: var(--bbw-rose, #6E2439);
}

.pdp-grid-card__prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    flex-wrap: wrap;
}

.pdp-grid-card__price {
    font-family: var(--font-body, sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--bbw-black);
    letter-spacing: 0.01em;
}

.pdp-grid-card__compare {
    font-family: var(--font-body, sans-serif);
    font-size: 12px;
    font-weight: 400;
    color: rgba(30,15,5,0.38);
    text-decoration: line-through;
}

.pdp-grid-card__discount-text {
    font-family: var(--font-body, sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: var(--bbw-rose, #6E2439);
}

/* ── Color swatches row — mirrors the collection-slider variant thumbs ── */
.pdp-grid-card__swatches {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    flex-wrap: wrap;
}
.pdp-grid-card__swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 1.5px solid rgba(184,146,90,0.25);
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    transition: border-color 0.20s ease, transform 0.20s ease;
}
.pdp-grid-card__swatch:hover {
    transform: scale(1.10);
}
.pdp-grid-card__swatch.active {
    border-color: var(--bbw-gold, #B8925A);
    border-width: 2px;
}

@media (max-width: 768px) {
    .pdp-grid-card__body { padding: 11px 11px 13px; }
    .pdp-grid-card__title { font-size: 12.5px; }
    .pdp-grid-card__price { font-size: 14px; }
    .pdp-grid-card .pdp-grid-card__cart,
    .pdp-grid-card .add-to-cart { width: 32px; height: 32px; font-size: 12px; }
    .pdp-grid-card .pdp-grid-card__wishlist,
    .pdp-grid-card .mini-wishlist-icon { width: 26px; height: 26px; }
    .pdp-grid-card__swatch { width: 19px; height: 19px; }
}

/* ════════════════════════════════════════════════════════════
   PP IMAGE BLOCK — bloc image seule, fond blanc, sans bordure.
   Placé au-dessus du bundle et/ou en dessous de l'upsell selon la
   page produit. Pleine largeur, hauteur automatique (ratio naturel
   de l'image).
════════════════════════════════════════════════════════════ */
.pp-image-block {
    width: 100%;
    background: #ffffff;
    border: none;
    margin: 0;
}
/* ════════════════════════════════════════════════════════════
   PP FIRST-BLOCKS SKELETON — placeholder affiché au premier
   chargement (ou refresh) de la page produit, le temps que
   products.js remplise .product-content (titre, prix, etc. sont
   posés en textContent, donc aucun élément DOM n'y apparaît
   jamais vide — un vrai skeleton HTML statique est donc requis
   ici, contrairement aux grilles/carrousels qui se remplissent
   par innerHTML). Couvre les 6 premiers blocs : titre, tagline,
   avis, prix, arguments produit, offres bundle. Retiré par JS
   (skeleton.js) dès que le titre réel est posé. ════════════════ */
/* Les blocs ci-dessous contiennent du texte écrit EN DUR dans le HTML
   statique (tagline, étoiles, value-props, offres bundle, bloc stock —
   pas remplis en JS comme le titre/prix), donc le navigateur les peint
   dès le parsing du DOM, bien avant que skeleton.js (qui n'agit qu'au
   DOMContentLoaded, chargé en fin de <body>) n'ait la moindre chance de
   les masquer. .pp-reassurance-row (bloc stock "Checking availability…")
   n'a pas de data-scroll-reveal et se retrouvait donc visible dès le
   début, chevauchant visuellement le skeleton au-dessus de lui qui
   occupe une hauteur différente des vrais 6 blocs masqués — on l'inclut
   ici pour qu'il apparaisse en même temps que le reste, pas avant.
   On cache tout par défaut en CSS pur (donc dès le premier paint, sans
   dépendre du timing JS) et on ne les révèle qu'une fois .product-content
   marqué .pp-fbs-ready par skeleton.js (initFirstBlocksSkeleton), dans
   tous ses chemins de sortie. Filet de sécurité : si JS est
   indisponible/bloqué, .pp-fbs-ready n'est jamais posée — le <noscript>
   ci-dessous republie une règle plus forte qui republie ces blocs, pour
   ne jamais les laisser cachés pour toujours en l'absence de JS. */
.product-content:not(.pp-fbs-ready) .bbw-soul-message,
.product-content:not(.pp-fbs-ready) .unique-star-rating-container,
.product-content:not(.pp-fbs-ready) .pp-value-props,
.product-content:not(.pp-fbs-ready) .bundle-save-container,
.product-content:not(.pp-fbs-ready) .pp-reassurance-row {
    display: none !important;
}

.pp-first-blocks-skel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 14px;
}
.pp-first-blocks-skel .skel-line { margin: 0; }

.pp-fbs-title .skel-line { height: 22px; width: 88%; }
.pp-fbs-title .skel-line + .skel-line { margin-top: 8px; width: 56%; }

.pp-fbs-tagline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.6);
}
.pp-fbs-tagline .skel-circle { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; }
.pp-fbs-tagline .skel-line { flex: 1; height: 12px; }

.pp-fbs-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.6);
}
.pp-fbs-rating .skel-line { height: 16px; width: 96px; margin: 0 !important; }
.pp-fbs-rating .skel-line--sm { height: 12px; width: 70px; }

.pp-fbs-price {
    padding: 8px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.6);
}
.pp-fbs-price .skel-line { height: 26px; width: 120px; }

.pp-fbs-value-props {
    display: flex;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.6);
}
.pp-fbs-value-props .pp-fbs-vp-item {
    flex: 1;
    padding: 14px 10px;
    border-right: 1px solid rgba(184,146,90,0.14);
}
.pp-fbs-value-props .pp-fbs-vp-item:last-child { border-right: none; }
.pp-fbs-value-props .skel-line { height: 10px; }
.pp-fbs-value-props .skel-line + .skel-line { margin-top: 6px; width: 80%; height: 8px; }

.pp-fbs-bundles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pp-fbs-bundle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    border-radius: 12px;
    border: 1.5px solid rgba(184,146,90,0.14);
    background: rgba(255,255,255,0.6);
}
.pp-fbs-bundle-row .skel-circle { width: 19px; height: 19px; flex-shrink: 0; border-radius: 50%; }
.pp-fbs-bundle-row .pp-fbs-bundle-text { flex: 1; }
.pp-fbs-bundle-row .skel-line { height: 11px; width: 55%; }
.pp-fbs-bundle-row .skel-line + .skel-line { margin-top: 6px; width: 80%; height: 9px; }
.pp-fbs-bundle-row .skel-line--price { height: 16px; width: 46px; margin: 0 !important; }

@media (max-width: 768px) {
    .pp-first-blocks-skel { gap: 11px; margin-bottom: 11px; }
    .pp-fbs-title .skel-line { height: 18px; }
    .pp-fbs-tagline { padding: 11px 13px; }
    .pp-fbs-value-props { flex-direction: column; }
    .pp-fbs-value-props .pp-fbs-vp-item {
        border-right: none;
        border-bottom: 1px solid rgba(184,146,90,0.14);
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
    }
    .pp-fbs-value-props .pp-fbs-vp-item:last-child { border-bottom: none; }
    .pp-fbs-value-props .skel-line { flex: 1; margin: 0 !important; }
    .pp-fbs-value-props .skel-line + .skel-line { display: none; }
    .pp-fbs-bundle-row { padding: 12px 10px; }
}

/* ── PP LOWER-BLOCKS SKELETON — suite du skeleton ci-dessus : couvre le
   reste de .product-content sous le bloc stock (options taille/couleur,
   quantité + CTA, icônes paiement, livraison, upsell, accordéons infos
   produit, FAQ, trust strip, lien collection). Même mécanisme exact :
   masqué par défaut en CSS pur tant que .product-content n'a pas
   .pp-fbs-ready, révélé par skeleton.js. ── */
.product-content:not(.pp-fbs-ready) .product-options,
.product-content:not(.pp-fbs-ready) .quantity-add-wrapper,
.product-content:not(.pp-fbs-ready) .pp-trust-payment-icons,
.product-content:not(.pp-fbs-ready) .delivery-info,
.product-content:not(.pp-fbs-ready) .p2-upsell-block,
.product-content:not(.pp-fbs-ready) .paul-details-accordion,
.product-content:not(.pp-fbs-ready) .paul-faq-block,
.product-content:not(.pp-fbs-ready) .pp-trust-strip,
.product-content:not(.pp-fbs-ready) .pp-collection-cta {
    display: none !important;
}

.pp-lower-blocks-skel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 14px;
}
.pp-lower-blocks-skel .skel-line { margin: 0; }

.pp-fbs-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pp-fbs-options .skel-line--label { height: 9px; width: 90px; }
.pp-fbs-options .skel-line--select { height: 40px; width: 200px; border-radius: 12px; }
.pp-fbs-options .pp-fbs-swatches { display: flex; gap: 10px; }
.pp-fbs-options .skel-circle { width: 38px; height: 38px; border-radius: 50%; }

.pp-fbs-quantity-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.pp-fbs-quantity-row .skel-line--qty { height: 44px; width: 96px; border-radius: 12px; margin: 0 !important; flex-shrink: 0; }
.pp-fbs-quantity-row .skel-line--cta { flex: 1; height: 44px; border-radius: 12px; margin: 0 !important; }

.pp-fbs-payment-icons { display: flex; gap: 6px; justify-content: center; }
.pp-fbs-payment-icons .skel-line--icon { width: 34px; height: 22px; border-radius: 5px; margin: 0 !important; }

.pp-fbs-delivery { padding: 8px 14px; border-radius: 12px; background: rgba(220,252,231,0.5); }
.pp-fbs-delivery .skel-line { height: 13px; width: 75%; }

.pp-fbs-upsell { padding: 14px 16px; border-radius: 20px; background: rgba(255,255,255,0.6); }
.pp-fbs-upsell .skel-line { height: 12px; width: 65%; }

.pp-fbs-accordion-rows,
.pp-fbs-faq-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pp-fbs-accordion-row,
.pp-fbs-faq-row {
    padding: 14px 18px;
    border-radius: 16px;
    background: rgba(255,255,255,0.6);
}
.pp-fbs-accordion-row .skel-line,
.pp-fbs-faq-row .skel-line { height: 12px; width: 70%; }

.pp-fbs-trust-strip { display: flex; justify-content: center; }
.pp-fbs-trust-strip .skel-line { height: 12px; width: 220px; }

.pp-fbs-collection-cta .skel-line { height: 44px; border-radius: 12px; }

@media (max-width: 768px) {
    .pp-lower-blocks-skel { gap: 11px; margin-bottom: 11px; }
    .pp-fbs-options .skel-line--select { width: 140px; }
}

.pp-image-block img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}