/* ================================================================
   BBW4LIFE — CART DRAWER — ULTRA PREMIUM LUMIÈRE
================================================================ */

/* Police Fraunces/Inter chargée via <link> dans src/components/head.html
   (injecté sur chaque page) — l'@import ici était redondant et
   bloquait le rendu de style.css le temps du round-trip réseau vers
   Google Fonts. Supprimé pour accélérer le premier rendu. */



:root {

  /* ═══════════════════════════════════════
     BBW4LIFE — BRAND COLORS (core)
     → déplacées dans /tokens.css (chargé avant ce fichier)
  ═══════════════════════════════════════ */

  /* ═══════════════════════════════════════
     HERO BANNER
  ═══════════════════════════════════════ */
  --hero-height-desktop:      300px;
  --hero-height-mobile:       300px;
  --hero-thumb-size-desktop:  52px;
  --hero-thumb-size-mobile:   42px;
  --hero-thumb-gap:           12px;
  --hero-btn-bg:              var(--bbw-gold);
  --hero-btn-color:           #000000;
  --hero-btn-hover-bg:        var(--bbw-gold-vivid);
  --hero-text-color:          var(--bbw-white);
  --hero-dot-inactive:        var(--bbw-mist);
  --hero-dot-active:          var(--bbw-gold-vivid);
  --hero-transition:          0.55s cubic-bezier(0.4, 0, 0.2, 1);

  /* ═══════════════════════════════════════
     AI CHATBOT
  ═══════════════════════════════════════ */
  --cf-rose:          var(--bbw-rose);
  --cf-rose-light:    var(--bbw-rose-light);
  --cf-gold:          var(--bbw-gold-light);
  --cf-white:         var(--bbw-white);
  --cf-bg:            #fdf8f5;
  --cf-surface:       var(--bbw-white);
  --cf-text:          #1e1a1c;
  --cf-muted:         #8e7e85;
  --cf-border:        rgba(201, 150, 62, 0.15);
  --cf-shadow:        0 20px 60px rgba(107, 52, 96, 0.22), 0 8px 24px rgba(0,0,0,0.10);
  --cf-radius:        20px;
  --cf-radius-msg:    18px;
  --cf-gradient:      linear-gradient(135deg, var(--bbw-rose) 0%, #7b3f6e 100%);

  /* ═══════════════════════════════════════
     GLOBAL UI
  ═══════════════════════════════════════ */
  --green:            #22a06b;
  --charcoal:         var(--bbw-black-soft);
  --slate:            #42383e;
  --mist:             #8a7a82;
  --mist-light:       #b8adb3;

  --border:           rgba(201, 150, 62, 0.09);
  --border-mid:       rgba(201, 150, 62, 0.18);

  --shadow-soft:      0 2px 16px rgba(0,0,0,0.15);
  --shadow-mid:       0 6px 28px rgba(0,0,0,0.20);
  --shadow-lift:      0 14px 50px rgba(0,0,0,0.25);
  --shadow-glow:      0 0 36px rgba(201, 150, 62, 0.30);

  --radius-xs:        4px;
  --radius-sm:        8px;
  --radius-md:        16px;
  --radius-lg:        26px;
  --radius-xl:        40px;
  --radius-full:      100px;

  /* --font-display / --font-body → déplacées dans /tokens.css */
  --font-script:      'Alex Brush', cursive;

  --section-pad:      48px;
  --section-pad-sm:   28px;
  --section-gap:      15px;

  --transition:       all 0.30s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  all 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}




html {
  overflow-x: hidden !important;
}


body {
  margin: 0;
  padding: 0;
  background: #fdfcf9;
  overflow-x: hidden !important;
}

/* ═══════════════════════════════════════════════
   BBW SCRIPT ACCENT — touche calligraphique
   À utiliser avec parcimonie : mots isolés / courtes
   accroches uniquement, jamais de gros blocs de texte.
═══════════════════════════════════════════════ */
.bbw-script {
  font-family: var(--font-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1;
}



/* ═══════════════════════════════════════════════
   STORY CIRCLES SECTION — BBW4LIFE Premium
═══════════════════════════════════════════════ */

.story-circles-section {
  width: 100%;
  overflow: hidden;
  padding: 36px 0 12px;
  background: #fff;
  position: relative;
}

.story-circles-eyebrow {
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bbw-gold);
  margin-bottom: 18px;
}

.story-circles-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 6px 20px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.story-circles-track::-webkit-scrollbar { display: none; }

/* Story rows Femme/Homme (home, au-dessus de BBW Features) : pas
   d'eyebrow au-dessus (retiré), donc moins de padding-top que la
   section #story-circles d'origine qui en a un. */
#story-row-women,
#story-row-men {
  padding-top: 10px;
}


.story-circles-section:not(.anim--marquee) .story-circles-track {
  justify-content: flex-start;
  padding-left: max(24px, calc((100vw - (90px * var(--sc-count, 7) + 18px * (var(--sc-count, 7) - 1))) / 2));
  padding-right: 24px;
}

@media (min-width: 769px) {
  .story-circles-section:not(.anim--marquee) .story-circles-track {
    justify-content: flex-start;  
    padding-left: 20px;
    padding-right: 20px;
  }
}


.story-circles-section.anim--marquee .story-circles-track {
  justify-content: flex-start;
  overflow: hidden;
  padding: 6px 0 10px;
  flex-wrap: nowrap;
  width: 100%;
  display: flex;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}
.story-circles-section.anim--marquee .story-circles-track:hover .story-circles-marquee-inner {
  animation-play-state: paused;
}

.story-circles-marquee-inner {
  display: flex;
  gap: 18px;
  animation: sc-marquee-scroll var(--sc-marquee-duration, 100s) linear infinite;
  will-change: transform;
  flex-shrink: 0;
}
.story-circles-marquee-inner:nth-child(2) {
  margin-left: 18px;
}
@keyframes sc-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-100% - 18px)); }
}

/* Sens inverse du marquee (défilement vers la droite) — utilisé par
   story_row_women / story_row_men via marquee_direction: "right".
   cf. buildRow() dans script.js. */
.story-circles-section.marquee--right .story-circles-marquee-inner {
  animation-name: sc-marquee-scroll-right;
}
@keyframes sc-marquee-scroll-right {
  0%   { transform: translateX(calc(-100% - 18px)); }
  100% { transform: translateX(0); }
}


.story-circle-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  scroll-snap-align: start;
  width: 90px;
  animation: sc-entrance 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes sc-entrance {
  from { opacity: 0; transform: translateY(16px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}


.story-circle-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(
    #0d0d0d   0deg,
    #4a4a4a  60deg,
    #1f1f1f 120deg,
    #6e6e6e 180deg,
    #111111 240deg,
    #3a3a3a 300deg,
    #0d0d0d 360deg
  );
  transition: box-shadow 0.3s ease;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.story-circle-ring::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
  z-index: 0;
  transition: inset 0.3s ease;
}

/* ════════════════════════════════
   BORDER STYLES
════════════════════════════════ */


.story-circles-section.border--conic_noir .story-circle-ring {
  background: conic-gradient(
    #0d0d0d   0deg,
    #4a4a4a  60deg,
    #1f1f1f 120deg,
    #6e6e6e 180deg,
    #111111 240deg,
    #3a3a3a 300deg,
    #0d0d0d 360deg
  );
}
.story-circles-section.border--conic_noir .story-circle-ring::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    transparent   0deg,
    rgba(255,255,255,0.30) 60deg,
    transparent  120deg,
    rgba(255,255,255,0.12) 200deg,
    transparent  280deg
  );
  z-index: 2;
  pointer-events: none;
  animation: sc-shimmer 4s linear infinite;
}
@keyframes sc-shimmer {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


.story-circles-section.border--solid .story-circle-ring {
  background: var(--sc-border-color, #c0385e);
  padding: var(--sc-border-size, 3px);
}
.story-circles-section.border--solid .story-circle-ring::after { display: none; }


.story-circles-section.border--gradient_rgb .story-circle-ring {
  background: conic-gradient(
    #ff6b6b, #ffd93d, #6bcb77,
    #4d96ff, #c77dff, #ff6b6b
  );
  padding: var(--sc-border-size, 3px);
  animation: sc-rgb-spin 4s linear infinite;
}
.story-circles-section.border--gradient_rgb .story-circle-ring::after { display: none; }
@keyframes sc-rgb-spin {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}


.story-circles-section.border--dashed .story-circle-ring {
  background: transparent;
  padding: 0;
  border: var(--sc-border-size, 3px) dashed var(--sc-border-color, #c0385e);
  box-shadow: none;
}
.story-circles-section.border--dashed .story-circle-ring::before { inset: 0; }
.story-circles-section.border--dashed .story-circle-ring::after  { display: none; }
.story-circles-section.border--dashed .story-circle-img { border-radius: 50%; }


.story-circles-section.border--dotted .story-circle-ring {
  background: transparent;
  padding: 0;
  border: var(--sc-border-size, 3px) dotted var(--sc-border-color, #c9963e);
  box-shadow: none;
}
.story-circles-section.border--dotted .story-circle-ring::before { inset: 0; }
.story-circles-section.border--dotted .story-circle-ring::after  { display: none; }
.story-circles-section.border--dotted .story-circle-img { border-radius: 50%; }


.story-circles-section.border--double .story-circle-ring {
  background: transparent;
  padding: 0;
  border: var(--sc-border-size, 4px) double var(--sc-border-color, #c9963e);
  box-shadow:
    0 0 0 2px var(--sc-border-color, #c9963e),
    inset 0 0 0 2px var(--sc-border-color, #c9963e);
}
.story-circles-section.border--double .story-circle-ring::before { inset: 6px; }
.story-circles-section.border--double .story-circle-ring::after  { display: none; }
.story-circles-section.border--double .story-circle-img { border-radius: 50%; }


.story-circles-section:not(.anim--spin) .story-circle-item:hover .story-circle-ring {
  box-shadow:
    0 8px 28px rgba(0,0,0,0.38),
    0 0 0 4px rgba(0,0,0,0.08),
    0 0 18px 2px rgba(0,0,0,0.15);
}
.story-circles-section:not(.anim--spin) .story-circle-item:hover .story-circle-ring::before {
  inset: 2px;
}
.story-circles-section.border--dashed .story-circle-item:hover .story-circle-ring,
.story-circles-section.border--dotted .story-circle-item:hover .story-circle-ring { transform: scale(1.12); }
.story-circles-section.border--gradient_rgb .story-circle-item:hover .story-circle-ring {
  animation-play-state: paused;
}

.story-circle-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  position: relative;
  z-index: 1;
  display: block;
}


.story-circle-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--bbw-black);
  text-align: center;
  max-width: 86px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
  position: relative;
  z-index: 10;
}
.story-circle-item:hover .story-circle-label {
  color: var(--bbw-gold);
}


.story-circle-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1a1a, #555);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  animation: sc-pulse-dot 2s ease-in-out infinite;
}
@keyframes sc-pulse-dot {
  0%, 100% { transform: scale(1);   opacity: 0.65; }
  50%       { transform: scale(1.6); opacity: 1; box-shadow: 0 0 8px rgba(0,0,0,0.45); }
}

/* ════════════════════════════════
   ANIMATIONS
════════════════════════════════ */


.story-circles-section.anim--float .story-circle-ring {
  animation: sc-float 3.2s ease-in-out infinite;
}
@keyframes sc-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}


.story-circles-section.anim--pulse .story-circle-ring {
  animation: sc-pulse 2.2s ease-in-out infinite;
}
@keyframes sc-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 2px 10px rgba(0,0,0,0.22); }
  50%       { transform: scale(1.07); box-shadow: 0 8px 24px rgba(0,0,0,0.40), 0 0 0 8px rgba(0,0,0,0.06); }
}


.story-circles-section.anim--bounce .story-circle-ring {
  animation: sc-bounce 1.8s ease-in-out infinite;
}
@keyframes sc-bounce {
  0%, 100% { transform: translateY(0); }
  45%       { transform: translateY(-10px); }
  60%       { transform: translateY(-5px); }
  75%       { transform: translateY(-10px); }
}


.story-circles-section.anim--glow .story-circle-ring {
  animation: sc-glow-noir 2.4s ease-in-out infinite alternate;
}
@keyframes sc-glow-noir {
  from { box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
  to   { box-shadow: 0 8px 30px rgba(0,0,0,0.50), 0 0 0 6px rgba(0,0,0,0.08); }
}


.story-circles-section.anim--spin .story-circle-ring {
  animation: sc-spin-ring 6s linear infinite;
}
.story-circles-section.anim--spin .story-circle-item:hover .story-circle-ring {
  animation-play-state: paused;
}

.story-circles-section.anim--spin .story-circle-ring::before {
  animation: sc-spin-counter 6s linear infinite;
}
.story-circles-section.anim--spin .story-circle-img {
  animation: sc-spin-counter 6s linear infinite;
}
@keyframes sc-spin-ring {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes sc-spin-counter {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}


.story-circles-section.anim--wave .story-circle-item .story-circle-ring {
  animation: sc-wave 2s ease-in-out infinite;
}
.story-circles-section:not(.anim--marquee) .story-circle-item:nth-child(1)  .story-circle-ring { animation-delay: 0s;    }
.story-circles-section:not(.anim--marquee) .story-circle-item:nth-child(2)  .story-circle-ring { animation-delay: 0.15s; }
.story-circles-section:not(.anim--marquee) .story-circle-item:nth-child(3)  .story-circle-ring { animation-delay: 0.30s; }
.story-circles-section:not(.anim--marquee) .story-circle-item:nth-child(4)  .story-circle-ring { animation-delay: 0.45s; }
.story-circles-section:not(.anim--marquee) .story-circle-item:nth-child(5)  .story-circle-ring { animation-delay: 0.60s; }
.story-circles-section:not(.anim--marquee) .story-circle-item:nth-child(6)  .story-circle-ring { animation-delay: 0.75s; }
.story-circles-section:not(.anim--marquee) .story-circle-item:nth-child(7)  .story-circle-ring { animation-delay: 0.90s; }
.story-circles-section:not(.anim--marquee) .story-circle-item:nth-child(8)  .story-circle-ring { animation-delay: 1.05s; }
.story-circles-section:not(.anim--marquee) .story-circle-item:nth-child(9)  .story-circle-ring { animation-delay: 1.20s; }
.story-circles-section:not(.anim--marquee) .story-circle-item:nth-child(10) .story-circle-ring { animation-delay: 1.35s; }
@keyframes sc-wave {
  0%, 100% { transform: translateY(0); }
  25%       { transform: translateY(-10px); }
  75%       { transform: translateY(4px); }
}


.story-circles-section.anim--shake .story-circle-ring {
  animation: sc-shake 3s ease-in-out infinite;
}
@keyframes sc-shake {
  0%, 85%, 100%  { transform: rotate(0deg); }
  87%  { transform: rotate(-6deg); }
  89%  { transform: rotate(6deg); }
  91%  { transform: rotate(-5deg); }
  93%  { transform: rotate(5deg); }
  95%  { transform: rotate(-3deg); }
  97%  { transform: rotate(3deg); }
}


.story-circles-section:not(.anim--marquee):not(.anim--wave) .story-circle-item:nth-child(1)  .story-circle-ring { animation-delay: 0s;    }
.story-circles-section:not(.anim--marquee):not(.anim--wave) .story-circle-item:nth-child(2)  .story-circle-ring { animation-delay: 0.18s; }
.story-circles-section:not(.anim--marquee):not(.anim--wave) .story-circle-item:nth-child(3)  .story-circle-ring { animation-delay: 0.36s; }
.story-circles-section:not(.anim--marquee):not(.anim--wave) .story-circle-item:nth-child(4)  .story-circle-ring { animation-delay: 0.54s; }
.story-circles-section:not(.anim--marquee):not(.anim--wave) .story-circle-item:nth-child(5)  .story-circle-ring { animation-delay: 0.72s; }
.story-circles-section:not(.anim--marquee):not(.anim--wave) .story-circle-item:nth-child(6)  .story-circle-ring { animation-delay: 0.90s; }
.story-circles-section:not(.anim--marquee):not(.anim--wave) .story-circle-item:nth-child(7)  .story-circle-ring { animation-delay: 1.08s; }
.story-circles-section:not(.anim--marquee):not(.anim--wave) .story-circle-item:nth-child(8)  .story-circle-ring { animation-delay: 1.26s; }
.story-circles-section:not(.anim--marquee):not(.anim--wave) .story-circle-item:nth-child(9)  .story-circle-ring { animation-delay: 1.44s; }
.story-circles-section:not(.anim--marquee):not(.anim--wave) .story-circle-item:nth-child(10) .story-circle-ring { animation-delay: 1.62s; }


@media (max-width: 600px) {
  .story-circle-item  { width: 74px; }
  .story-circle-ring  { width: 66px; height: 66px; }
  .story-circle-label { font-size: 10px; max-width: 70px; }
  .story-circles-track { gap: 12px; padding: 6px 12px 10px; }
  .story-circles-section:not(.anim--marquee) .story-circles-track {
    padding-left: 16px;
    padding-right: 16px;
  }
  .story-circles-marquee-inner { gap: 12px; }
  .story-circles-marquee-inner:nth-child(2) { margin-left: 12px; }
}



.bbw-hero-banner {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  height: var(--hero-height-desktop);
  overflow: hidden;
  background: var(--bbw-black);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  isolation: isolate;
}


.bbw-hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 25;
  opacity: 0.030;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: overlay;
}


.bbw-hero-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--bbw-gold-border-hi);
  z-index: 30;
}


.bbw-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 70% at -5%  60%,  rgba(110, 36, 57, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 100% 20%,  rgba(184, 146, 90, 0.14) 0%, transparent 60%);
}


.bbw-hero__orb {
  display: none;
}


.bbw-hero__particles {
  display: none;
}


.bbw-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bbw-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  opacity: 0;
  transition: opacity var(--hero-transition);
  pointer-events: none;
}

.bbw-hero__media img.bbw-hero--active { opacity: 1; }

.bbw-hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bbw-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, rgba(21,17,14,0.93) 0%, rgba(21,17,14,0.60) 40%, rgba(21,17,14,0.10) 70%, rgba(21,17,14,0.25) 100%);
  z-index: 2;
}


.bbw-hero__content {
  position: relative;
  z-index: 10;
  padding: 14px 68px;
  max-width: 640px;
  color: var(--hero-text-color);
}

.bbw-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bbw-gold-vivid);
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(18px);
  animation: bbwHeroFadeUp 0.65s 0.05s cubic-bezier(0.22,1,0.36,1) forwards;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.bbw-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--bbw-gold-border-hi);
  flex-shrink: 0;
}

.bbw-hero__title {
  font-family: var(--font-body);
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  margin-bottom: 6px;
  opacity: 0;
  transform: translateY(18px);
  animation: bbwHeroFadeUp 0.65s 0.18s cubic-bezier(0.22,1,0.36,1) forwards;
}

.bbw-hero__subtitle {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 42px);
  font-weight: 600;
  font-style: italic;
  line-height: 1.05;
  margin-bottom: 10px;
  color: var(--bbw-white);
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(18px);
  animation: bbwHeroFadeUp 0.70s 0.30s cubic-bezier(0.22,1,0.36,1) forwards;
}

.bbw-hero__subtitle em {
  font-style: italic;
  color: var(--bbw-gold-vivid);
  position: relative;
}

.bbw-hero__text {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.1vw, 14px);
  color: rgba(255,255,255,0.68);
  line-height: 1.4;
  margin-bottom: 10px;
  max-width: 46ch;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  animation: bbwHeroFadeUp 0.65s 0.44s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes bbwHeroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.bbw-hero--anim-reset {
  opacity: 0 !important;
  transform: translateY(16px) !important;
  animation: none !important;
}

.bbw-hero--anim-play {
  animation: bbwHeroFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) forwards !important;
}


.bbw-hero__countdown {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(18px);
  animation: bbwHeroFadeUp 0.65s 0.56s cubic-bezier(0.22,1,0.36,1) forwards;
}

.bbw-hero__cd-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(21,17,14,0.72);
  border: 1px solid var(--bbw-gold-border);
  border-radius: 4px;
  padding: 6px 12px;
  min-width: 48px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.3s ease;
}

.bbw-hero__cd-block:hover {
  border-color: var(--bbw-gold);
}

.bbw-hero__cd-num {
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 600;
  color: var(--bbw-white);
  line-height: 1;
  letter-spacing: 0.02em;
}

.bbw-hero__cd-label {
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bbw-gold);
  margin-top: 3px;
}

.bbw-hero__cd-sep {
  font-size: 18px;
  font-weight: 300;
  color: var(--bbw-gold-border-hi);
  margin-bottom: 10px;
  align-self: center;
}


.bbw-hero__btn-wrap {
  opacity: 0;
  transform: translateY(18px);
  animation: bbwHeroFadeUp 0.65s 0.70s cubic-bezier(0.22,1,0.36,1) forwards;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.bbw-hero__btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bbw-black);
  background: var(--bbw-gold);
  border: 1px solid var(--bbw-gold);
  border-radius: 2px;
  padding: 11px 30px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}

.bbw-hero__btn:hover {
  background: transparent;
  color: var(--bbw-gold-vivid);
  border-color: var(--bbw-gold-vivid);
}

.bbw-hero__btn:active {
  transform: translateY(1px);
}

.bbw-hero__btn--added {
  background: transparent !important;
  color: var(--bbw-gold-vivid) !important;
  border-color: var(--bbw-gold-vivid) !important;
  pointer-events: none;
}


.bbw-hero__thumbs {
  position: absolute;
  z-index: 10;
  display: flex;
  gap: var(--hero-thumb-gap);
}

.bbw-hero__thumbs.bbw-thumbs--right {
  flex-direction: column;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
}

.bbw-hero__thumbs.bbw-thumbs--left {
  flex-direction: column;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
}

.bbw-hero__thumb {
  width: var(--hero-thumb-size-desktop);
  height: var(--hero-thumb-size-desktop);
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.15);
  opacity: 0.48;
  transition: opacity 0.38s ease, border-color 0.38s ease, transform 0.38s ease;
  flex-shrink: 0;
}

.bbw-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.38s ease;
}

.bbw-hero__thumb.bbw-hero--active,
.bbw-hero__thumb:hover {
  opacity: 1;
  border-color: var(--bbw-gold-vivid);
  transform: scale(1.08);
}

.bbw-hero__thumb:hover img {
  transform: scale(1.08);
}


.bbw-hero__dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.bbw-hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: 1px solid var(--bbw-gold-border);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
  padding: 0;
}

.bbw-hero__dot.bbw-hero--active {
  background: var(--bbw-gold-vivid);
  width: 22px;
  border-radius: 4px;
  border-color: var(--bbw-gold-vivid);
}


@media (max-width: 767px) {
  .bbw-hero-banner {
    height: var(--hero-height-mobile);
    align-items: flex-end;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .bbw-hero__media::after {
    background:
      linear-gradient(to top, rgba(6,4,7,0.94) 0%, rgba(6,4,7,0.50) 55%, rgba(6,4,7,0.05) 100%),
      linear-gradient(270deg, rgba(212,80,108,0.05) 0%, transparent 40%);
  }

  /* Sur mobile, le conteneur est bien plus étroit que haut : object-fit
     cover recadre surtout en largeur. Recentrer légèrement vers la
     gauche évite de couper le sujet (souvent cadré côté gauche sur les
     photos hero) hors de la zone visible. */
  .bbw-hero__media img {
    object-position: 30% 20%;
  }

  .bbw-hero__content {
    padding: 0 16px 14px;
    max-width: 100%;
  }

  .bbw-hero__eyebrow { font-size: 9px; margin-bottom: 4px; }
  .bbw-hero__title   { font-size: 10px; margin-bottom: 3px; }

  .bbw-hero__subtitle {
    font-size: clamp(15px, 5vw, 19px);
    margin-bottom: 5px;
  }

  .bbw-hero__text {
    font-size: 11px;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .bbw-hero__countdown {
    gap: 5px;
    margin-bottom: 8px;
  }

  .bbw-hero__cd-block {
    padding: 4px 8px;
    min-width: 36px;
    border-radius: 6px;
  }

  .bbw-hero__cd-num  { font-size: 16px; }
  .bbw-hero__cd-sep  { font-size: 14px; margin-bottom: 8px; }
  .bbw-hero__btn     { font-size: 11px; padding: 8px 20px; }

  .bbw-hero__thumbs {
    flex-direction: row !important;
    top: auto !important;
    transform: none !important;
    left: 50% !important;
    right: auto !important;
    bottom: 12px;
    transform: translateX(-50%) !important;
  }

  .bbw-hero__thumbs.bbw-thumbs--mobile-top {
    bottom: auto !important;
    top: 12px !important;
    transform: translateX(-50%) !important;
  }

  .bbw-hero__thumb {
    width: var(--hero-thumb-size-mobile);
    height: var(--hero-thumb-size-mobile);
    border-radius: 50%;
  }

  .bbw-hero__dots {
    bottom: auto;
    top: 50%;
    left: auto;
    right: 12px;
    transform: translateY(-50%);
    flex-direction: column;
  }
}
#bbwHeroVideoPlaceholder {
  opacity: 1 !important;
  z-index: 3 !important;
  transition: opacity 0.5s ease !important;
  position: absolute !important;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 8%;
}

@media (max-width: 767px) {
  #bbwHeroVideoPlaceholder {
    object-position: 30% 20%;
  }
}



/* ================================================================
   PRODUCT CAROUSEL — surcharge éditoriale (bbwpg-section--v2)
   Base .bbwpg-* définie dans src/components/header.css — on ne
   touche pas ce fichier, on surcharge via une classe additive.
================================================================ */
.bbwpg-section--v2 {
  background: linear-gradient(160deg, #fdfaf5 0%, #f9f4ea 100%) !important;
}

.bbwpg-section--v2::before,
.bbwpg-section--v2::after {
  background: linear-gradient(90deg, transparent 0%, var(--bbw-gold-border-hi) 50%, transparent 100%) !important;
}

.bbwpg-section--v2 .bbwpg-orb--1 {
  background: radial-gradient(circle, rgba(184,146,90,0.30), transparent 70%) !important;
}
.bbwpg-section--v2 .bbwpg-orb--2 {
  background: radial-gradient(circle, rgba(110,36,57,0.18), transparent 70%) !important;
}

.bbwpg-section--v2 .bbwpg-eyebrow {
  color: var(--bbw-gold) !important;
  font-family: var(--font-body) !important;
}
.bbwpg-section--v2 .bbwpg-eyebrow::before,
.bbwpg-section--v2 .bbwpg-eyebrow::after {
  background: var(--bbw-gold) !important;
}

.bbwpg-section--v2 .bbwpg-title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-style: italic;
}

.bbwpg-section--v2 .bbwpg-subtitle {
  font-family: var(--font-body) !important;
}

/* ── Carte "éditoriale" : le titre/prix/CTA flottent en surimpression
   sur la photo (scrim dégradé), plutôt qu'un bandeau blanc séparé.
   Structure DOM inchangée (img-link + body en frères), on repositionne
   juste body en overlay absolu via CSS. ── */
.bbwpg-section--v2 .bbwpg-card {
  display: block !important;
  position: relative !important;
  background: transparent !important;
  border-color: rgba(184,146,90,0.20) !important;
  box-shadow: none !important;
  border-radius: 2px !important;
}
.bbwpg-section--v2 .bbwpg-card:hover {
  border-color: var(--bbw-gold) !important;
  box-shadow: 0 20px 50px rgba(21,17,14,0.16) !important;
}

.bbwpg-section--v2 .bbwpg-card__img-wrap {
  padding-top: 138% !important;
}

.bbwpg-section--v2 .bbwpg-card__body {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  background: linear-gradient(to top, rgba(21,17,14,0.95) 0%, rgba(21,17,14,0.72) 40%, transparent 100%) !important;
  padding: 46px 18px 18px !important;
  gap: 6px !important;
}

.bbwpg-section--v2 .bbwpg-card__title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-style: italic;
  font-size: 1.05rem !important;
  color: #fff !important;
}
.bbwpg-section--v2 .bbwpg-card__title:hover {
  color: var(--bbw-gold-vivid) !important;
}

.bbwpg-section--v2 .bbwpg-card__price {
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  color: var(--bbw-gold-vivid) !important;
}
.bbwpg-section--v2 .bbwpg-card__compare {
  color: rgba(255,255,255,0.45) !important;
}

/* Badge remise : or discret plutôt que rose vif */
.bbwpg-section--v2 .bbwpg-card__discount {
  background: #F6EFE5 !important;
  color: var(--bbw-gold) !important;
  border: 1px solid var(--bbw-gold) !important;
  box-shadow: none !important;
  border-radius: 2px !important;
}
.bbwpg-section--v2 .bbwpg-card__badge {
  background: var(--bbw-black) !important;
  border-radius: 2px !important;
}

/* CTA : lien discret + flèche, pas un bouton plein */
.bbwpg-section--v2 .bbwpg-card__btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 6px !important;
  color: var(--bbw-gold) !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
}
.bbwpg-section--v2 .bbwpg-card__btn::before { display: none !important; }
.bbwpg-section--v2 .bbwpg-card__btn svg { transition: transform 0.25s ease; }
.bbwpg-section--v2 .bbwpg-card__btn:hover {
  background: transparent !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}
.bbwpg-section--v2 .bbwpg-card__btn:hover svg { transform: translateX(4px); }

.bbwpg-section--v2 .bbwpg-arrow:hover {
  transform: none !important;
}

.bbwpg-section--v2 .bbwpg-dot--active {
  box-shadow: none !important;
}

@media (max-width: 767px) {
  .bbwpg-section--v2 .bbwpg-card__body { padding: 36px 14px 14px !important; }
  .bbwpg-section--v2 .bbwpg-card__title { font-size: 0.92rem !important; }
  .bbwpg-section--v2 .bbwpg-card__price { font-size: 1rem !important; }
}


/* ================================================================
   COLLECTION MARQUEE BOOST
================================================================ */
.col-marquee-section {
  background: #000;
  padding: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border-top: 2px solid var(--col-accent);
  border-bottom: 2px solid var(--col-accent);
  margin-top: 0;
}

.col-marquee-section::before,
.col-marquee-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.col-marquee-section::before {
  left: 0;
  background: linear-gradient(to right, #faf7ef 0%, transparent 100%);
}

.col-marquee-section::after {
  right: 0;
  background: linear-gradient(to left, #f5f1e6 0%, transparent 100%);
}

.col-marquee-track {
  display: flex;
  align-items: center;
  padding: 14px 0;
  width: 100%;
}

.col-marquee-inner {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: colMarqueeScroll 50s linear infinite !important;
  will-change: transform;
}

.col-marquee-inner:hover {
  animation-play-state: paused;
}

@keyframes colMarqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.col-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 30px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--bbw-white, #F6EFE5);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s;
}

.col-marquee-item i {
  color: var(--bbw-gold, #B8925A);
  font-size: 13px;
}

.col-marquee-item:hover {
  color: var(--bbw-gold-light, #e8bc6a);
}

.col-marquee-sep {
  color: var(--bbw-gold, #B8925A);
  font-size: 11px;
  flex-shrink: 0;
  opacity: 0.5;
}

@media (max-width: 768px) {
  .col-marquee-section::before,
  .col-marquee-section::after {
    width: 60px;
  }
  .col-marquee-section {
    margin-top: 0;
  }
  .col-marquee-item {
    font-size: 11px;
    padding: 0 20px;
  }
  .col-marquee-inner {
    animation-duration: 35s !important;
  }
}

@media (max-width: 768px) {
  .col-sort {
    position: static;
  }

  .col-sort-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: calc(100vw - 48px);
    max-width: 320px;
    right: auto;
    z-index: 9999;
  }

  .col-sort-menu.open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
  }
}


.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 9999;
    pointer-events: none;
    transition: background 0.50s ease, backdrop-filter 0.50s ease;
}
.cart-overlay.active {
    background: rgba(21, 17, 14, 0.75);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    pointer-events: all;
}

/* ================================================================
   OVERLAY RÉEL derrière le cart drawer / wishlist modal.
   Injecté par widgets-loader.js (<div class="overlay">) et togglé
   par script.js via .active. N'avait aucun style — le fond ne
   s'assombrissait jamais. On l'ajoute ici (palette premium).
================================================================ */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(21, 17, 14, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: background 0.45s ease, backdrop-filter 0.45s ease, opacity 0.45s ease;
}
.overlay.active {
    background: rgba(21, 17, 14, 0.75);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    opacity: 1;
    pointer-events: all;
}

/* ================================================================
   CONTENEUR PRINCIPAL
================================================================ */
.cart-drawer {
    position: fixed;
    top: 0;
    right: -500px;
    width: 430px;
    max-width: 100vw;
    height: 100%;
    height: 100dvh;
    
    background: #faf6f0;
    box-shadow:
        -1px 0 0 rgba(201,150,62,0.25),
        -8px 0 60px rgba(13,0,26,0.35),
        -40px 0 120px rgba(13,0,26,0.18);
    transition: right 0.50s cubic-bezier(0.4,0,0.2,1);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cart-drawer.active { right: 0; }


.cart-drawer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--bbw-gold) 30%,
        var(--bbw-gold-light) 50%,
        var(--bbw-gold) 70%,
        transparent 100%);
    z-index: 100;
}


.cart-drawer::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(184,146,90,0.35) 20%,
        rgba(184,146,90,0.50) 50%,
        rgba(184,146,90,0.35) 80%,
        transparent 100%);
    z-index: 100;
}

/* ================================================================
   HEADER — INCHANGÉ
================================================================ */
.drawer-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 22px 18px;
    background: linear-gradient(135deg, #0d0d0d 0%, #1a0812 60%, #0d0d0d 100%) !important;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.drawer-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 15% 0%,
        rgba(184,146,90,0.08) 0%,
        transparent 55%);
    pointer-events: none;
    z-index: 1;
}
.drawer-header__title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
}
.cart-drawer .drawer-header .bbw-globe-badge {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}
.cart-drawer .drawer-header .bbw-globe-badge__svg { width: 100%; height: 100%; overflow: visible; }
.cart-drawer .drawer-header .bbw-globe-badge__core { transform-origin: 24px 24px; animation: bbwGlobeSpin 6s linear infinite; }
.cart-drawer .drawer-header .bbw-globe-badge__orbit { transform-origin: 24px 24px; animation: bbwGlobeSpin 8s linear infinite; }
.cart-drawer .drawer-header .bbw-globe-badge__text {
    font-size: 5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    fill: var(--bbw-gold-light, #e8bc6a);
    text-transform: uppercase;
}
@keyframes bbwGlobeSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .cart-drawer .drawer-header .bbw-globe-badge__core,
    .cart-drawer .drawer-header .bbw-globe-badge__orbit { animation: none; }
}
@media (max-width: 480px) {
    .cart-drawer .drawer-header .bbw-globe-badge { width: 54px; height: 54px; }
}
@keyframes headerLightPass {
    0%   { left: -100%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 160%; opacity: 0; }
}
/* Seul accent animé conservé sur tout le drawer : le liseré or du header */
.drawer-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(184,146,90,0.30) 20%,
        rgba(184,146,90,0.75) 50%,
        rgba(184,146,90,0.30) 80%,
        transparent 100%);
    animation: headerBorderShimmer 5s ease-in-out infinite;
}
@keyframes headerBorderShimmer {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 0.9; }
}
.drawer-header h3::before {
    content: none;
}
@keyframes headerHalo {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 1; transform: scale(1.2); }
}
.drawer-header h3 {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1.28rem;
    font-weight: 600;
    color: #F6EFE5 !important;
    margin: 0;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    text-shadow: none;
}
.drawer-header h3::after {
    content: '';
    position: absolute;
    bottom: -5px; left: 0;
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(201,150,62,0.80),
        rgba(201,150,62,0));
}
.close-drawer {
    background: rgba(201,150,62,0.08);
    border: 1px solid rgba(201,150,62,0.28);
    cursor: pointer;
    color: rgba(232,188,106,0.60);
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.30s cubic-bezier(0.4,0,0.2,1);
    line-height: 1;
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.close-drawer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center,
        rgba(201,150,62,0.20) 0%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.30s;
}
.close-drawer:hover::before { opacity: 1; }
.close-drawer:hover {
    color: #fff;
    border-color: rgba(201,150,62,0.55);
    transform: rotate(90deg);
    box-shadow:
        0 0 20px rgba(201,150,62,0.35),
        0 0 8px rgba(201,150,62,0.20) inset;
    background: rgba(201,150,62,0.15);
}

/* ================================================================
   BODY — ✦ RETOUCHE
================================================================ */
.cart-drawer__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(201,150,62,0.30) transparent;
    box-sizing: border-box;
    
    background: #faf6f0;
}
.cart-drawer__body::-webkit-scrollbar { width: 3px; }
.cart-drawer__body::-webkit-scrollbar-track { background: transparent; }
.cart-drawer__body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(201,150,62,0.50),
        rgba(201,150,62,0.35));
    border-radius: 4px;
}

/* ================================================================
   FOOTER — ✦ RETOUCHE
================================================================ */
.cart-drawer__footer {
    flex-shrink: 0;
    padding: 14px 20px 22px;
    
    background: #fffdf9;
    z-index: 2;
    position: relative;
    border-top: 1px solid rgba(201,150,62,0.14);
    box-shadow: 0 -4px 24px rgba(201,150,62,0.07);
}
.cart-drawer__footer::before {
    content: '';
    position: absolute;
    top: 0; left: 15px; right: 15px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(201,150,62,0.55),
        rgba(232,188,106,0.85),
        rgba(201,150,62,0.55),
        transparent);
}

.subtotal {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.74rem;
    
    color: #a08878;
    margin: 0 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.subtotal strong,
.subtotal .subtotal-amount {
    color: #1e1a1c;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Bandeau informatif — la reduction par quantite (settings.promos[]) sera
   appliquee au checkout, jamais soustraite du total affiche ici, pour ne
   jamais montrer un chiffre different de celui reellement facture. */
.cart-checkout-note {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bbw-gold-pale, rgba(184,146,90,0.12));
    border: 1px solid var(--bbw-gold-border, rgba(184,146,90,0.28));
    border-radius: 4px;
    padding: 9px 12px;
    margin: 0 0 12px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    color: #7a5a28;
    letter-spacing: 0.01em;
}
.cart-checkout-note i {
    color: var(--bbw-gold, #B8925A);
    font-size: 12px;
    flex-shrink: 0;
}


.checkout {
    display: block;
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg,
        var(--bbw-black) 0%,
        #221c16 50%,
        var(--bbw-black) 100%);
    color: var(--bbw-gold-light);
    border: 1px solid var(--bbw-gold-border-hi);
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
    box-shadow:
        0 6px 22px rgba(21,17,14,0.22),
        0 1px 0 rgba(255,255,255,0.06) inset;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.checkout::before {
    content: none;
}
@keyframes btnShimmer {
    0%   { left: -60%; }
    100% { left: 160%; }
}
.checkout:hover {
    background: linear-gradient(135deg, #221c16 0%, #2c251d 50%, #221c16 100%);
    border-color: var(--bbw-gold);
    color: #f3d9a6;
    transform: translateY(-2px);
    box-shadow:
        0 10px 30px rgba(21,17,14,0.30),
        0 0 0 1px var(--bbw-gold-border) inset;
}
.checkout:active { transform: translateY(0); }

/* ================================================================
   CART ITEMS — ✦ RETOUCHE
================================================================ */
.cart-items {
    padding: 14px 18px 6px;
}

.cart-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 12px;
    
    border-bottom: 1px solid rgba(201,150,62,0.14);
    border-radius: 4px;
    transition: background 0.25s, box-shadow 0.25s;
    margin-bottom: 2px;
}
.cart-item:hover {
    
    background: rgba(255, 252, 245, 0.92);
    box-shadow: 0 4px 24px rgba(201,150,62,0.14);
}
.cart-item:last-child { border-bottom: none; }

.cart-item img {
    width: 78px; height: 78px;
    object-fit: cover;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid rgba(201,150,62,0.30);
    box-shadow:
        0 4px 14px rgba(0,0,0,0.10),
        0 0 0 3px rgba(201,150,62,0.07);
    transition: all 0.30s ease;
}
.cart-item img:hover {
    border-color: rgba(201,150,62,0.65);
    box-shadow:
        0 6px 22px rgba(0,0,0,0.14),
        0 0 0 4px rgba(201,150,62,0.14);
    transform: scale(1.04);
}

.cart-item h4 {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.87rem;
    font-weight: 600;
    color: #1e1a1c;
    cursor: pointer;
    line-height: 1.45;
    margin: 0 0 3px;
    flex: 1;
    transition: color 0.22s;
}
.cart-item h4:hover { color: #c9963e; }

.cart-item p {
    font-size: 1.0rem;
    color: #1e1a1c;
    font-weight: 700;
    margin: 0 0 2px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    letter-spacing: 0.02em;
}

.item-variant {
    font-size: 0.74rem;
    
    color: #b09898;
    font-weight: 400;
    margin: 2px 0 0;
    letter-spacing: 0.03em;
}


.quantity-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.quantity {
    display: flex;
    align-items: center;
    gap: 2px;
    
    background: rgba(253, 248, 238, 0.95);
    border: 1px solid rgba(201,150,62,0.32);
    border-radius: 4px;
    padding: 2px 4px;
    backdrop-filter: blur(4px);
}

.quantity button {
    background: none;
    color: #1e1a1c;
    border: none;
    width: 28px; height: 28px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.20s;
    flex-shrink: 0;
}
.quantity button:hover {
    background: #1e1a1c;
    color: #e8bc6a;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    transform: scale(1.05);
}

.quantity span {
    font-size: 0.86rem;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
    color: #1e1a1c;
    font-family: 'DM Sans', sans-serif;
}

.remove-item {
    background: none;
    border: none;
    color: #c8b4b4;
    cursor: pointer;
    font-size: 0.80rem;
    padding: 5px 7px;
    border-radius: 7px;
    transition: all 0.22s;
    flex-shrink: 0;
    display: flex; align-items: center;
}
.remove-item:hover {
    color: #1e1a1c;
    background: rgba(0,0,0,0.06);
    transform: scale(1.12);
}

/* ================================================================
   EMPTY CART — ✦ RETOUCHE COMPLÈTE
================================================================ */
.empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 28px 48px;
    min-height: 380px;
    text-align: center;
    position: relative;
    overflow: hidden;
    
    background: linear-gradient(160deg, #fdf8f0 0%, #faf3e8 50%, #fdf6ee 100%);
}

.empty-cart::before {
    content: '';
    position: absolute;
    top: 32%; left: 50%;
    transform: translate(-50%, -50%);
    width: 280px; height: 280px;
    
    background: radial-gradient(circle,
        rgba(201,150,62,0.18) 0%,
        rgba(232,188,106,0.08) 40%,
        transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.empty-cart::after {
    content: '';
    position: absolute;
    top: 35%; left: 55%;
    transform: translate(-50%, -50%);
    width: 200px; height: 200px;
    background: radial-gradient(circle,
        rgba(245,208,128,0.12) 0%,
        transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}
@keyframes emptyHalo {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.15); }
}

.empty-cart__icon-wrap {
    position: relative;
    width: 104px; height: 104px;
    margin-bottom: 30px;
    flex-shrink: 0;
    z-index: 2;
}

.empty-cart__icon-wrap::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: rgba(184,146,90,0.55);
    border-right-color: rgba(184,146,90,0.16);
    animation: rotateSlow 16s linear infinite;
    pointer-events: none;
}
.empty-cart__icon-wrap::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-bottom-color: rgba(184,146,90,0.30);
    border-left-color: rgba(184,146,90,0.10);
    animation: rotateSlow 22s linear infinite reverse;
    pointer-events: none;
}
@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.empty-cart__icon-bg {
    width: 100%; height: 100%;
    
    background: linear-gradient(145deg,
        rgba(255,255,255,0.98) 0%,
        rgba(255,250,240,0.95) 60%,
        rgba(252,244,230,0.98) 100%);
    border-radius: 50%;
    border: 1.5px solid rgba(201,150,62,0.35);
    display: flex; align-items: center; justify-content: center;
    box-shadow:
        0 0 0 6px rgba(201,150,62,0.08),
        0 12px 40px rgba(30,26,28,0.10),
        0 4px 18px rgba(201,150,62,0.08),
        inset 0 1px 0 rgba(255,255,255,0.95),
        inset 0 0 24px rgba(201,150,62,0.10);
    position: relative;
    overflow: hidden;
}
.empty-cart__icon-bg::before {
    content: '';
    position: absolute;
    top: -30%; left: -30%;
    width: 70%; height: 70%;
    background: radial-gradient(ellipse,
        rgba(255,255,255,0.80) 0%,
        transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.empty-cart__icon {
    font-size: 2.8rem;
    line-height: 1;
    filter: drop-shadow(0 3px 8px rgba(201,150,62,0.28));
    animation: iconFloat 4s ease-in-out infinite;
    position: relative;
    z-index: 1;
}
@keyframes iconFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%       { transform: translateY(-6px) rotate(2deg); }
}

.empty-cart__badge {
    position: absolute;
    top: -2px; right: -2px;
    width: 24px; height: 24px;
    background: linear-gradient(135deg, #1e1a1c, #2a2a2a);
    border: 2px solid rgba(201,150,62,0.60);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: #e8bc6a;
    font-family: 'DM Sans', sans-serif;
    box-shadow:
        0 2px 10px rgba(0,0,0,0.35),
        0 0 0 3px rgba(201,150,62,0.14);
}
@keyframes badgePop {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.10); }
}

.empty-cart h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.60rem;
    font-weight: 700;
    
    color: #2a1f1a;
    margin: 0 0 8px;
    letter-spacing: 0.04em;
    line-height: 1.25;
    position: relative;
    z-index: 2;
}
.empty-cart h3 span { color: #c9963e; }

.empty-cart__divider {
    width: 60px; height: 1px;
    background: linear-gradient(90deg,
        transparent,
        #c9963e,
        #e8bc6a,
        #c9963e,
        transparent);
    margin: 8px auto 16px;
    position: relative;
    z-index: 2;
}
@keyframes dividerGlow {
    0%, 100% { opacity: 0.55; width: 48px; }
    50%       { opacity: 1;    width: 76px; }
}

.empty-cart p {
    font-family: 'DM Sans', sans-serif;
    
    color: #a89090;
    margin: 0 0 32px;
    font-size: 0.84rem;
    line-height: 1.65;
    max-width: 230px;
    position: relative;
    z-index: 2;
}


.empty-cart .cta,
.empty-cart__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 36px;
    background: linear-gradient(135deg,
        #0d0d0d 0%,
        #1a1a1a 50%,
        #0d0d0d 100%);
    background-size: 200% 100%;
    color: var(--bbw-gold-light);
    border: 1px solid var(--bbw-gold-border-hi);
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
    position: relative;
    overflow: hidden;
    z-index: 2;
    box-shadow:
        0 6px 22px rgba(21,17,14,0.20),
        0 1px 0 rgba(255,255,255,0.06) inset;
}
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 4px 24px rgba(201,150,62,0.20), 0 1px 0 rgba(255,255,255,0.06) inset; }
    50%       { box-shadow: 0 6px 36px rgba(201,150,62,0.40), 0 0 45px rgba(201,150,62,0.12), 0 1px 0 rgba(255,255,255,0.06) inset; }
}
.empty-cart .cta::before,
.empty-cart__cta::before {
    content: none;
}
@keyframes ctaShimmer {
    0%   { left: -75%; }
    100% { left: 150%; }
}
.empty-cart .cta:hover,
.empty-cart__cta:hover {
    background: linear-gradient(135deg, #221c16 0%, #2c251d 50%, #221c16 100%);
    border-color: var(--bbw-gold);
    color: #f3d9a6;
    transform: translateY(-2px);
    box-shadow:
        0 10px 30px rgba(21,17,14,0.30),
        0 0 0 1px var(--bbw-gold-border) inset;
}
.empty-cart .cta:active,
.empty-cart__cta:active { transform: translateY(-1px); }
.empty-cart .cta span,
.empty-cart__cta span { position: relative; z-index: 1; }
.empty-cart .cta-arrow {
    font-size: 1.0rem;
    position: relative; z-index: 1;
    transition: transform 0.30s ease;
}
.empty-cart .cta:hover .cta-arrow,
.empty-cart__cta:hover .cta-arrow { transform: translateX(5px); }

/* ================================================================
   COUNTDOWN — ✦ RETOUCHE
================================================================ */
.cart-drawer__countdown {
    
    background: linear-gradient(100deg, #fdf8f0 0%, #faf4ea 60%, #fdf8f0 100%);
    border-bottom: 1px solid rgba(201,150,62,0.12);
    padding: 10px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.cart-drawer__countdown::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(201,150,62,0.30),
        rgba(201,150,62,0.55),
        rgba(201,150,62,0.30),
        transparent);
}
.cart-drawer__countdown::after {
    content: none;
}
@keyframes cdShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.cart-drawer__countdown-text {
    
    color: #9e7060;
    font-size: 0.70rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-family: 'DM Sans', sans-serif;
    position: relative; z-index: 1;
}

.cart-drawer__countdown-time {
    color: #1e1a1c;
    font-size: 1.08rem;
    font-weight: 700;
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    letter-spacing: 0.10em;

    background: rgba(255, 252, 245, 0.95);
    border: 1px solid var(--bbw-gold-border);
    padding: 4px 16px;
    border-radius: 3px;
    min-width: 78px;
    text-align: center;
    position: relative; z-index: 1;
    box-shadow:
        0 2px 10px rgba(184,146,90,0.14),
        inset 0 1px 0 rgba(255,255,255,0.90);
}
@keyframes timePulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(201,150,62,0.14), inset 0 1px 0 rgba(255,255,255,0.90); }
    50%       { box-shadow: 0 2px 22px rgba(201,150,62,0.30), inset 0 1px 0 rgba(255,255,255,0.90); }
}

/* ================================================================
   PROGRESS BAR — ✦ RETOUCHE
================================================================ */
.cart-drawer__progress-container {
    padding: 12px 18px 10px;
    
    background: linear-gradient(180deg, #fdf8f0, #faf6f0);
    border-bottom: 1px solid rgba(201,150,62,0.10);
}
.cart-drawer__progress-message {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    
    color: #7a5060;
    margin-bottom: 9px;
    text-align: center;
    letter-spacing: 0.03em;
    font-family: 'DM Sans', sans-serif;
}
.cart-drawer__progress-message strong { color: #1e1a1c; }

.cart-drawer__progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(201,150,62,0.12);
    border-radius: 20px;
    position: relative;
    overflow: visible;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}
.cart-drawer__progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
        #1e1a1c 0%,
        #2a2a2a 60%,
        #c9963e 100%);
    border-radius: 20px;
    width: 0%;
    transition: width 0.65s cubic-bezier(0.34,1.56,0.64,1);
    position: relative;
    box-shadow:
        0 0 14px rgba(201,150,62,0.35),
        0 0 5px rgba(201,150,62,0.45);
}
.cart-drawer__progress-fill::before {
    content: none;
}
@keyframes barShimmer {
    0%   { background-position: -60px 0; }
    100% { background-position: 300px 0; }
}
.cart-drawer__progress-fill::after {
    content: '';
    position: absolute;
    right: -2px; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    background: radial-gradient(circle, var(--bbw-gold), var(--bbw-black));
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow:
        0 0 0 3px rgba(184,146,90,0.18),
        0 0 8px rgba(184,146,90,0.35);
}
@keyframes progPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(201,150,62,0.22), 0 0 10px rgba(201,150,62,0.42); }
    50%       { box-shadow: 0 0 0 6px rgba(201,150,62,0.09), 0 0 20px rgba(201,150,62,0.60); }
}
.cart-drawer__progress-truck {
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    background: linear-gradient(135deg, #1e1a1c, #2a2a2a);
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(201,150,62,0.35);
    border: 2px solid rgba(201,150,62,0.50);
}
.cart-drawer__progress-truck svg {
    width: 13px; height: 13px;
    color: #e8bc6a;
    display: block;
}

/* ================================================================
   PROMO MESSAGE — ✦ RETOUCHE
================================================================ */
.cart-promo-message {
    padding: 9px 18px;
    text-align: center;
    
    background: linear-gradient(135deg,
        rgba(201,150,62,0.07) 0%,
        rgba(255,252,245,0.90) 50%,
        rgba(201,150,62,0.04) 100%);
    border-bottom: 1px solid rgba(201,150,62,0.12);
    position: relative;
}
.cart-promo-message::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #c9963e, #e8bc6a);
    border-radius: 0 2px 2px 0;
    box-shadow: 1px 0 10px rgba(201,150,62,0.35);
}
.promo-text { font-size: 0.78rem; font-weight: 500; color: #7a5568; line-height: 1.55; font-family: 'DM Sans', sans-serif; }
.promo-text.initial  { color: #a09090; }
.promo-text.progress { color: #1e1a1c; font-weight: 600; }
.promo-text.complete { color: #22a06b; font-weight: 700; }
.promo-number        { color: #1e1a1c; font-weight: 800; font-size: 1.05em; }
.promo-text.complete .promo-number { color: #22a06b; }

/* ================================================================
   GENDER FREE-GIFT PICKER
   → Barre collapsible affichée uniquement quand promo_buy_quantity
     est atteint ; permet de choisir quel(s) cadeau(x) gratuit(s)
     (homme/femme) recevoir.
================================================================ */
.cart-gender-picker {
    display: none;
    border-bottom: 1px solid rgba(201,150,62,0.18);
    overflow: hidden;
}
.cart-gender-picker.is-visible { display: block; }

.cart-gender-picker__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 18px;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(135deg,
        rgba(201,150,62,0.12) 0%,
        rgba(255,252,245,0.95) 50%,
        rgba(201,150,62,0.08) 100%);
}
.cart-gender-picker__title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e1a1c;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 0.015em;
    line-height: 1.3;
}
.cart-gender-picker__title .promo-number {
    background: linear-gradient(90deg, var(--bbw-gold, #B8925A) 0%, var(--bbw-gold-vivid, #CBA45C) 50%, var(--bbw-gold, #B8925A) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
    font-size: 1.15em;
}

@media (max-width: 640px) {
    .cart-gender-picker__title { font-size: 0.94rem; }
}
.cart-gender-picker__chevron {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(201,150,62,0.12);
    color: #c9963e;
    font-size: 0.7rem;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.25s ease;
}
.cart-gender-picker.is-open .cart-gender-picker__chevron {
    transform: rotate(180deg);
    background: rgba(201,150,62,0.22);
}

.cart-gender-picker__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
    background: linear-gradient(155deg, #211a15 0%, #171310 55%, #0d0a07 100%);
}
.cart-gender-picker.is-open .cart-gender-picker__panel {
    max-height: 150px;
}
.cart-gender-picker__panel-inner {
    padding: 12px 18px 16px;
}
.cart-gender-picker__question {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--bbw-gold-light, #e8bc6a);
    margin: 0 0 10px;
    font-family: 'DM Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cart-gender-picker__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.cart-gender-option {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}
.gender-swatch {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2.5px solid rgba(184,146,90,0.45);
    box-shadow: 0 3px 10px rgba(0,0,0,0.35);
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
}
.gender-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cart-gender-option.active .gender-swatch {
    border-color: #e8bc6a;
    border-width: 3px;
    box-shadow: 0 0 0 4px rgba(232,188,106,0.22);
    transform: scale(1.08);
}
.cart-gender-option__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #f2ece2;
    font-family: 'DM Sans', sans-serif;
}
.cart-gender-option.active .cart-gender-option__label {
    color: #e8bc6a;
    font-weight: 800;
}

/* Variante cart.html — bloc plus haut, boules un peu plus grandes */
.cp-gender-picker.cart-gender-picker.is-open .cart-gender-picker__panel {
    max-height: 200px;
}
.cp-gender-picker .gender-swatch {
    width: 48px;
    height: 48px;
}
.cp-gender-picker .cart-gender-picker__panel-inner { padding: 16px 20px 20px; }

/* ================================================================
   BANNER SLIDER — ✦ RETOUCHE COULEURS
================================================================ */
.cart-drawer__paul-banner {
    position: relative;
    height: 100px;
    overflow: hidden;
    width: 100%;
}
.cart-drawer__paul-banner::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 55px;
    background: linear-gradient(to top,
        rgba(250, 246, 240, 0.70),
        transparent);
    z-index: 3;
    pointer-events: none;
}
.cart-drawer__paul-banner .paul-banner-slide {
    position: absolute; inset: 0;
    opacity: 0; transition: opacity 1.4s ease-in-out; z-index: 1;
}
.cart-drawer__paul-banner .paul-banner-slide.active { opacity: 1; z-index: 2; }
.cart-drawer__paul-banner .paul-banner-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-drawer__paul-banner .paul-banner-title {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) translateY(8px);
    color: #fff;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem; font-weight: 700;
    text-align: center; width: 88%;
    background: rgba(30, 15, 8, 0.65);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(201,150,62,0.35);
    padding: 6px 14px; border-radius: 4px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
    line-height: 1.3; margin: 0; opacity: 0;
    transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
    z-index: 4;
    box-shadow:
        0 4px 20px rgba(0,0,0,0.22),
        0 0 0 1px rgba(201,150,62,0.12);
}
.cart-drawer__paul-banner .paul-banner-slide.active .paul-banner-title {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}
.cart-drawer__paul-banner .paul-banner-indicators {
    position: absolute;
    bottom: 7px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 5px; z-index: 5;
}
.cart-drawer__paul-banner .paul-banner-indicator {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.40);
    cursor: pointer; transition: all 0.30s;
}
.cart-drawer__paul-banner .paul-banner-indicator.active {
    background: #c9963e;
    transform: scale(1.45);
    box-shadow: 0 0 10px rgba(201,150,62,0.75);
}


.paul-banner-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 10px;
    pointer-events: none;
}

.paul-banner-video-overlay .paul-banner-indicators {
    pointer-events: all;
}

.paul-banner-video-texts {
    position: relative;
    width: 92%;
    text-align: center;
    margin-bottom: 4px;
}

.paul-banner-video-text {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    color: #fff;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    background: rgba(30, 15, 8, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(201, 150, 62, 0.35);
    padding: 6px 14px;
    border-radius: 4px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
    line-height: 1.3;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    pointer-events: none;
}

.paul-banner-video-text.active {
    opacity: 1;
    transform: translateY(0);
    position: relative;
}


.paul-banner-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 2;
    filter: brightness(0.88) saturate(1.05);
}


.cart-drawer__paul-banner.paul-banner--video-mode {
    height: 140px;
    background: #0d0a08;
}


.cart-drawer__paul-banner {
    height: 130px;
}


#cp-paul-banner {
    height: 180px;
}


#cp-paul-banner.paul-banner--video-mode {
    height: 200px;
    background: #0d0a08;
}


#cp-paul-banner {
    margin-top: -20px !important;
    margin-bottom: -10px !important;
}

#cp-paul-banner .paul-banner-title {
    font-size: 1.15rem;
    padding: 8px 20px;
}

#cp-paul-banner .paul-banner-video-text.active {
    font-size: 1.15rem;
    padding: 8px 20px;
}

#cp-paul-banner .paul-banner-indicators {
    bottom: 6px;
}


/* ================================================================
   PROMO CODE SLIDER — inchangé
================================================================ */
.cart-drawer__promo-slider-container {
    margin: 12px 14px 6px;
}
.cart-drawer__promo-slider {
    background: linear-gradient(135deg, var(--bbw-black) 0%, #1c1510 55%, #14100c 100%);
    border: 1px solid var(--bbw-gold-border);
    border-radius: 4px;
    padding: 14px 16px 12px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 6px 28px rgba(21,17,14,0.28),
        inset 0 1px 0 rgba(255,255,255,0.05);
}
.cart-drawer__promo-slider::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--bbw-gold) 30%,
        var(--bbw-gold-light) 50%,
        var(--bbw-gold) 70%,
        transparent);
}
.cart-drawer__promo-slider::after {
    content: none;
}
@keyframes promoLightPass {
    0%   { left: -100%; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { left: 150%; opacity: 0; }
}
.cart-drawer__promo-slide        { display: none; opacity: 0; transition: opacity 0.5s; }
.cart-drawer__promo-slide.active { display: block; opacity: 1; }
.cart-drawer__promo-title {
    margin: 0 0 4px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem; font-weight: 700;
    color: #e8bc6a;
    letter-spacing: 0.04em;
    text-shadow: 0 0 16px rgba(201,150,62,0.40);
}
.cart-drawer__promo-text {
    margin: 0 0 11px;
    font-size: 0.74rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.50;
    font-family: 'DM Sans', sans-serif;
}
.cart-drawer__promo-text strong { color: rgba(255,255,255,0.78); font-weight: 600; }
.cart-drawer__promo-code-row { display: flex; align-items: center; gap: 10px; }
.cart-drawer__promo-code {
    font-size: 1.12rem; font-weight: 700;
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    color: #e8bc6a;
    background: rgba(201,150,62,0.10);
    border: 1px solid rgba(201,150,62,0.32);
    padding: 6px 14px;
    border-radius: 3px;
    letter-spacing: 0.14em;
    flex: 1; text-align: center;
    transition: all 0.25s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    text-shadow: 0 0 18px rgba(201,150,62,0.50);
}
.cart-drawer__promo-code:hover {
    background: rgba(201,150,62,0.18);
    box-shadow: 0 0 24px rgba(201,150,62,0.26), inset 0 1px 0 rgba(255,255,255,0.05);
}
.cart-drawer__promo-copy-btn {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    width: 36px; height: 36px;
    border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: all 0.25s;
}
.cart-drawer__promo-copy-btn:hover {
    background: rgba(201,150,62,0.24);
    border-color: rgba(201,150,62,0.55);
    transform: scale(1.08);
    box-shadow: 0 0 18px rgba(201,150,62,0.30);
}
.cart-drawer__promo-copy-btn svg { width: 14px; height: 14px; stroke: rgba(255,255,255,0.55); fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.22s; }
.cart-drawer__promo-copy-btn:hover svg { stroke: #e8bc6a; }
.cart-drawer__promo-copy-btn.copied svg { stroke: #22a06b; }
.cart-drawer__promo-indicators { display: flex; justify-content: center; gap: 7px; margin-top: 11px; }
.cart-drawer__promo-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    cursor: pointer; transition: all 0.28s;
}
.cart-drawer__promo-dot.active {
    background: #c9963e !important;
    transform: scale(1.40);
    box-shadow: 0 0 12px rgba(201,150,62,0.65);
}

/* ================================================================
   REVIEWS CAROUSEL — ✦ RETOUCHE
================================================================ */
.reviews-carousel {
    margin: 10px 12px;
    overflow: hidden;
    position: relative;
    height: 130px;
    border-top: 1px solid rgba(201,150,62,0.10);
    box-sizing: border-box;
}
.review-item {
    display: none; align-items: center;
    position: absolute; width: 100%; opacity: 0;
    transition: opacity 0.5s;
}
.review-item.active { display: flex; opacity: 1; }

.review-item-inner {

    background: #fffdf9;
    border: 1px solid rgba(201,150,62,0.18);
    border-radius: 4px;
    padding: 12px 14px 10px;
    width: 100%;
    box-sizing: border-box;
    box-shadow:
        0 4px 20px rgba(201,150,62,0.07),
        0 1px 0 rgba(255,255,255,0.95) inset;
    position: relative;
    overflow: hidden;
}
.review-item-inner::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #c9963e, rgba(201,150,62,0));
    border-radius: 16px 0 0 16px;
}

.review-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; width: 100%; box-sizing: border-box; }
.review-avatar {
    width: 46px !important; height: 46px !important;
    border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 1.5px solid rgba(201,150,62,0.32);
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
.review-meta { flex: 1; min-width: 0; overflow: hidden; }
.review-meta h4 { font-size: 0.80rem; font-weight: 700; margin: 0 0 2px; color: #1e1a1c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'DM Sans', sans-serif; }
.review-stars { color: #c9963e; font-size: 0.88rem; letter-spacing: 1px; line-height: 1; }
.verified-badge {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: #f0f4ff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(66,133,244,0.15);
    border: 1px solid rgba(66,133,244,0.15);
}
.verified-badge svg { display: block; }
.verified-badge i { font-size: 0.80rem; }

.review-text { font-size: 0.76rem; color: #6a4a50; font-style: italic; margin: 0 0 5px; line-height: 1.50; word-break: break-word; font-family: 'DM Sans', sans-serif; }
.review-date { font-size: 0.66rem; color: #c0a8a8; display: block; letter-spacing: 0.04em; }

/* ================================================================
   MARQUEE — inchangé
================================================================ */
.cart-marquee {
    overflow: hidden;
    background: linear-gradient(90deg, #0d0d0d 0%, #1a0812 50%, #0d0d0d 100%);
    padding: 8px 0;
    position: relative;
    border-top: 1px solid rgba(201,150,62,0.20);
    border-bottom: 1px solid rgba(201,150,62,0.20);
}
.cart-marquee::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(184,146,90,0.35),
        rgba(184,146,90,0.55),
        rgba(184,146,90,0.35),
        transparent);
}
.cart-marquee::after {
    content: none;
}
.cart-marquee .marquee-content {
    display: flex; gap: 2px;
    white-space: nowrap;
    animation: marquee 48s linear infinite;
}
.cart-marquee:hover .marquee-content {
    animation-play-state: paused;
}
.cart-marquee .marquee-content span {
    color: rgba(203, 164, 92, 0.85);
    font-size: 0.72rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    flex-shrink: 0;
    font-family: var(--font-body, 'Inter', sans-serif);
}
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ================================================================
   PAYMENT ICONS — ✦ RETOUCHE
================================================================ */
.payment-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 15px !important;
    padding: 10px 16px 14px;
    border-top: 1px solid rgba(201,150,62,0.10);
    
    background: rgba(253, 248, 240, 0.80);
}
.payment-icons i {
    font-size: 1.55rem;
    color: #000000 !important;
    transition: all 0.25s;
}
.payment-icons i:hover {
    color: #c9963e;
    filter: grayscale(0) opacity(1);
    transform: translateY(-2px);
}

/* ================================================================
   CART EXTRA
================================================================ */
.cart-extra { display: none; }
.cart-extra.active { display: block; }

/* ================================================================
   FREE BADGE — définition unique canonique plus bas (~ligne 5680,
   avec var(--bbw-gold) + hover). Ce bloc redondant est retiré pour
   éviter la double déclaration.
================================================================ */

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 480px) {
    .cart-drawer { width: 100%; right: -100%; }
    .cart-drawer__paul-banner { height: 110px; }
    .cart-drawer__paul-banner .paul-banner-title { font-size: 0.86rem; }
    .cart-drawer__countdown-time { font-size: 0.96rem; }
    .cart-item img { width: 66px; height: 66px; }
    .empty-cart { padding: 44px 22px 38px; min-height: 300px; }
    .empty-cart__icon-wrap { width: 86px; height: 86px; }
    .empty-cart h3 { font-size: 1.32rem; }
    .checkout { font-size: 0.74rem; padding: 14px; }
    .payment-icons { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; padding-bottom: 6px; }
    .payment-icons::-webkit-scrollbar { display: none; }
    .payment-icons i { flex: 0 0 auto; }
}

/* ════════════════════════════════════════
   WISHLIST MODAL — BBW4LIFE Ultra Premium
   Beauty Has No Sizes
════════════════════════════════════════ */


.wishlist-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 19990;
}
.wishlist-modal.active { display: flex; }


.wishlist-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 3, 12, 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}


.modal-content {
  background: #F6EFE5;
  border-radius: 6px;
  max-width: 460px;
  width: 95%;
  max-height: 88vh;
  text-align: left;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  border: 1px solid var(--bbw-gold-border);
  box-shadow:
    0 40px 100px rgba(21, 17, 14, 0.42),
    0 0 0 1px rgba(184, 146, 90, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.60);
  transform: scale(0.90) translateY(24px);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.32s ease;
}
.wishlist-modal.active .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}


.wishlist-modal-shimmer {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--bbw-gold) 30%,
    var(--bbw-gold-light) 50%,
    var(--bbw-gold) 70%,
    transparent 100%
  );
  border-radius: 6px 6px 0 0;
  z-index: 3;
}
@keyframes wl-modal-shimmer {
  0%   { background-position: -300% 0; }
  100% { background-position: 300% 0; }
}


.modal-content::before {
  content: '';
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%);
  width: 280px; height: 80px;
  background: radial-gradient(ellipse, rgba(201,150,62,0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}


.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 22px 16px;
  border-bottom: 1px solid rgba(201, 150, 62, 0.12);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.70) 0%, transparent 100%);
  position: relative;
  z-index: 1;
}
.wishlist-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wishlist-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(184,146,90,0.20), rgba(110,36,57,0.22));
  border: 1px solid var(--bbw-gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 16px rgba(21,17,14,0.28),
    inset 0 1px 0 rgba(255,255,255,0.10);
  flex-shrink: 0;
}
@keyframes wl-icon-pulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(192,56,94,0.20), inset 0 1px 0 rgba(255,255,255,0.90);
  }
  50% {
    box-shadow: 0 4px 28px rgba(192,56,94,0.42), 0 0 0 4px rgba(192,56,94,0.08), inset 0 1px 0 rgba(255,255,255,0.90);
  }
}

.drawer-header h3 {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 22px;
  font-weight: 700;
  color: #1a0a12;
  margin: 0 0 3px;
  letter-spacing: -0.3px;
  line-height: 1;
}
.wishlist-subtitle {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--bbw-gold);
}

.close-modal {
  width: 36px; height: 36px;
  border-radius: 3px;
  background: rgba(201, 150, 62, 0.10);
  border: 1px solid var(--bbw-gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--bbw-gold-light);
  transition: all 0.30s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.close-modal:hover {
  background: var(--bbw-rose);
  border-color: var(--bbw-rose-light);
  color: #fff;
  box-shadow: 0 4px 16px rgba(110, 36, 57, 0.42);
  transform: rotate(90deg) scale(1.08);
}


.wishlist-bar-row {
  display: flex;
  gap: 5px;
  padding: 14px 22px 0;
  flex-shrink: 0;
}
.wishlist-bar {
  flex: 1;
  height: 2.5px;
  background: rgba(201, 150, 62, 0.10);
  border-radius: 4px;
  overflow: hidden;
}
.wishlist-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--bbw-gold),
    var(--bbw-gold-light)
  );
  animation: wl-bar-grow 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wishlist-bar:nth-child(1) .wishlist-bar-fill { animation-delay: 0.08s; }
.wishlist-bar:nth-child(2) .wishlist-bar-fill { animation-delay: 0.24s; }
.wishlist-bar:nth-child(3) .wishlist-bar-fill { animation-delay: 0.40s; }
@keyframes wl-bar-grow { to { width: 100%; } }


.wishlist-items {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wishlist-items::-webkit-scrollbar { display: none; }

.wishlist-items .wishlist-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 16px;
  border-radius: 4px;
  border: 1px solid rgba(184, 146, 90, 0.16);
  background: #fffdf9;
  margin-bottom: 10px;
  transition: all 0.30s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(21, 17, 14, 0.05);
}


.wishlist-item::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(to bottom, var(--bbw-gold), var(--bbw-rose));
}


.wishlist-item::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,150,62,0.07), transparent);
  transform: skewX(-15deg);
  transition: none;
  pointer-events: none;
}
.wishlist-item:hover::after {
  left: 140%;
  transition: left 0.55s ease;
}

.wishlist-item:last-child { margin-bottom: 0; }
.wishlist-item:hover {
  border-color: rgba(184, 146, 90, 0.32);
  box-shadow:
    0 6px 20px rgba(21, 17, 14, 0.10),
    0 0 0 1px rgba(184, 146, 90, 0.12);
  transform: translateX(3px);
  background: #ffffff;
}

.wishlist-item img {
  width: 60px; height: 60px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid rgba(184, 146, 90, 0.20);
  flex-shrink: 0;
  transition: all 0.32s ease;
  box-shadow: 0 4px 12px rgba(21,17,14,0.10);
}
.wishlist-item:hover img {
  transform: scale(1.04);
  box-shadow: 0 6px 16px rgba(21, 17, 14, 0.14);
  border-color: rgba(184, 146, 90, 0.40);
}

.wishlist-item h4 {
  flex-grow: 1;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: #1a0a12;
  margin: 0 0 5px;
  line-height: 1.35;
}

.wishlist-item p {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.wishlist-item .current-price {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--bbw-rose) !important;
  -webkit-text-fill-color: var(--bbw-rose) !important;
  line-height: 1;
}
.wishlist-item .compare-price {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 11px !important;
  color: rgba(21, 17, 14, 0.38) !important;
  text-decoration: line-through;
  font-weight: 400 !important;
}


.remove-wishlist {
  background: rgba(184, 146, 90, 0.08);
  border: 1px solid rgba(184, 146, 90, 0.20);
  color: #8a6a2e;
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  margin-left: 6px;
}
.remove-wishlist:hover {
  background: var(--bbw-rose);
  color: #fff;
  border-color: var(--bbw-rose-light);
  box-shadow: 0 4px 12px rgba(110, 36, 57, 0.38);
  transform: scale(1.08);
}


.wishlist-footer {
  padding: 14px 20px 16px;
  border-top: 1px solid rgba(184, 146, 90, 0.16);
  flex-shrink: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(184,146,90,0.05) 100%);
}

.add-all-to-cart {
  width: 100%;
  padding: 15px 20px;
  background: linear-gradient(135deg, var(--bbw-black) 0%, #221c16 50%, var(--bbw-black) 100%);
  color: var(--bbw-gold-light);
  border: 1px solid var(--bbw-gold-border-hi) !important;
  cursor: pointer;
  border-radius: 3px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: all 0.32s ease;
  box-shadow: 0 6px 22px rgba(21, 17, 14, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  position: relative;
  overflow: hidden;
}

@keyframes wl-cta-glow {
  0%, 100% { box-shadow: 0 6px 24px rgba(192,56,94,0.40), 0 0 0 1px rgba(201,150,62,0.15) inset; }
  50%       { box-shadow: 0 8px 36px rgba(192,56,94,0.60), 0 0 0 1px rgba(201,150,62,0.20) inset; }
}


.add-all-to-cart::before {
  content: none;
}
@keyframes wl-btn-sweep {
  0%   { left: -100%; }
  40%  { left: 140%; }
  100% { left: 140%; }
}

.add-all-to-cart svg,
.add-all-to-cart span {
  position: relative;
  z-index: 1;
  color: var(--bbw-gold-light) !important;
}

.add-all-to-cart:hover {
  background: linear-gradient(135deg, #221c16 0%, #2c251d 50%, #221c16 100%);
  border-color: var(--bbw-gold) !important;
  box-shadow:
    0 10px 30px rgba(21, 17, 14, 0.30),
    0 0 0 1px var(--bbw-gold-border) inset;
  transform: translateY(-2px);
}
.add-all-to-cart:hover svg,
.add-all-to-cart:hover span { color: #f3d9a6 !important; }
.add-all-to-cart:active {
  transform: translateY(0);
}

.cart-icon.added { animation: wl-bounce 0.5s; }
@keyframes wl-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ── Fly to cart — vol de l'image produit vers l'icône panier ── */
.fly-to-cart {
  position: fixed;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  z-index: 99999;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 0 2px rgba(184,146,90,0.35);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  background: #fff;
}
.fly-to-cart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fly-to-cart__qty {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: var(--bbw-black, #15110E);
  color: var(--bbw-gold, #B8925A);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 6px;
}
.fly-to-cart--go {
  animation: fly-to-cart-arc 0.65s cubic-bezier(0.45, 0, 0.2, 1) forwards;
}
@keyframes fly-to-cart-arc {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  35% {
    transform:
      translate(calc(-50% + (var(--fly-dx) * 0.35)), calc(-50% + (var(--fly-dy) * 0.35) - 90px))
      scale(0.7)
      rotate(-8deg);
    opacity: 1;
  }
  75% {
    transform:
      translate(calc(-50% + (var(--fly-dx) * 0.8)), calc(-50% + (var(--fly-dy) * 0.8) - 20px))
      scale(0.35)
      rotate(6deg);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--fly-dx)), calc(-50% + var(--fly-dy))) scale(0.1) rotate(0deg);
    opacity: 0.2;
  }
}


.wishlist-share-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(184, 146, 90, 0.12);
  flex-shrink: 0;
  text-align: center;
  background: transparent;
}
.wishlist-share-label {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--bbw-gold);
  margin-bottom: 12px;
  display: block;
}
.wishlist-share-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.wishlist-share-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 150, 62, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.30s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 2px 8px rgba(30,10,20,0.08);
}
.wishlist-share-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.28s;
}
.wishlist-share-btn:hover::before { opacity: 1; }
.wishlist-share-btn:hover {
  transform: translateY(-4px) scale(1.10);
  box-shadow: 0 8px 22px rgba(30,10,20,0.18);
  border-color: transparent;
}


.wishlist-share-btn--copy { color: var(--bbw-gold, #B8925A); }
.wishlist-share-btn--copy::before { background: var(--bbw-gold, #B8925A); }
.wishlist-share-btn--copy:hover { color: #fff; }

.wishlist-share-btn--fb  { color: #1877f2; }
.wishlist-share-btn--fb::before  { background: #1877f2; }
.wishlist-share-btn--fb:hover  { color: #fff; }

.wishlist-share-btn--ig  { color: #e1306c; }
.wishlist-share-btn--ig::before  { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); }
.wishlist-share-btn--ig:hover  { color: #fff; }

.wishlist-share-btn--tw  { color: #000; }
.wishlist-share-btn--tw::before  { background: #000; }
.wishlist-share-btn--tw:hover  { color: #fff; }

.wishlist-share-btn--wa  { color: #25d366; }
.wishlist-share-btn--wa::before  { background: #25d366; }
.wishlist-share-btn--wa:hover  { color: #fff; }

.wishlist-share-btn--pi  { color: #e60023; }
.wishlist-share-btn--pi::before  { background: #e60023; }
.wishlist-share-btn--pi:hover  { color: #fff; }

/* Panneau de partage natif du téléphone — masqué par défaut, révélé en JS
   uniquement si navigator.share est disponible (cf. script.js
   initWishlistShare), même logique que .cp-share-btn--native (cart.css). */
.wishlist-share-btn--native { display: none; color: var(--bbw-plum, #6E2439); }
.wishlist-share-btn--native::before { background: var(--bbw-plum, #6E2439); }
.wishlist-share-btn--native:hover { color: #fff; }

.wishlist-share-btn i {
  position: relative;
  z-index: 1;
  font-size: 14px;
}


@media (max-width: 768px) {
  .modal-content {
    border-radius: 6px;
    max-height: 85vh;
  }

  .wishlist-items {
    padding: 12px 12px;
  }

  .wishlist-items .wishlist-item {
    padding: 10px 10px 10px 14px;
    gap: 10px;
    border-radius: 4px;
  }

  .wishlist-item img {
    width: 52px;
    height: 52px;
  }

  .remove-wishlist {
    width: 30px;
    height: 30px;
    margin-left: 4px;
  }

  .add-all-to-cart {
    padding: 13px 18px;
    font-size: 13.5px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .wishlist-modal-shimmer,
  .wishlist-bar-fill,
  .add-all-to-cart::before,
  .add-all-to-cart,
  .wishlist-icon-wrap {
    animation: none !important;
    transition: none !important;
  }
  .wishlist-bar-fill { width: 100%; }
}

/* ================================================================
   BBW4LIFE — WISHLIST MINI ICONS (Cart, Drawer Extra, Product Grid)
================================================================ */


.bbw-mini-wish {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.92);
  border: 1px solid #e4b722;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.bbw-mini-wish:hover {
  border-color: #c9963e;
  background: #fff;
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(192,56,94,0.22);
}

.bbw-mini-wish svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: all 0.22s ease;
}

.bbw-mini-wish .bbw-mw-empty {
  display: block;
}
.bbw-mini-wish .bbw-mw-filled {
  display: none;
}

.bbw-mini-wish.bbw-mw-active {
  background: #fff0f3;
  border-color: #e4b722;
  box-shadow: 0 2px 12px rgba(192,56,94,0.25);
}
.bbw-mini-wish.bbw-mw-active .bbw-mw-empty  { display: none; }
.bbw-mini-wish.bbw-mw-active .bbw-mw-filled { display: block; }


.cart-item-img-wrap,
.cp-item-img-wrap {
  position: relative;
  flex-shrink: 0;
}

.cart-item-img-wrap .bbw-mini-wish,
.cp-item-img-wrap .bbw-mini-wish {
  bottom: 4px;
  right: 4px;
  left: auto;
  transform: none;
  width: 24px;
  height: 24px;
}
.cart-item-img-wrap .bbw-mini-wish:hover,
.cp-item-img-wrap .bbw-mini-wish:hover {
  transform: scale(1.14);
}
.cart-item-img-wrap .bbw-mini-wish.bbw-mw-active,
.cp-item-img-wrap .bbw-mini-wish.bbw-mw-active {
  transform: scale(1.0);
}
.cart-item-img-wrap .bbw-mini-wish svg,
.cp-item-img-wrap .bbw-mini-wish svg {
  width: 12px;
  height: 12px;
}


.bd-product-item__media .bbw-mini-wish {
  bottom: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
}
.bd-product-item__media .bbw-mini-wish svg {
  width: 10px;
  height: 10px;
}

.p2-upsell-img-wrap .bbw-mini-wish {
  bottom: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
}
.p2-upsell-img-wrap .bbw-mini-wish svg {
  width: 9px;
  height: 9px;
}


.drawer-extra-card__img-wrap,
.cp-extra-card__img-wrap {
  position: relative;
}

.drawer-extra-card__img-wrap .bbw-mini-wish,
.cp-extra-card__img-wrap .bbw-mini-wish {
  bottom: 6px;
  left: 6px;
  top: auto;
  right: auto;
  width: 28px;
  height: 28px;
}
.drawer-extra-card__img-wrap .bbw-mini-wish svg,
.cp-extra-card__img-wrap .bbw-mini-wish svg {
  width: 13px;
  height: 13px;
}


.bbwpg-card__img-wrap {
  position: relative;
}

.bbwpg-card__img-wrap .bbw-mini-wish {
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
}
.bbwpg-card__img-wrap .bbw-mini-wish svg {
  width: 14px;
  height: 14px;
}


.fs-img-frame {
  position: relative;
}

.fs-img-frame .bbw-mini-wish {
  top: 10px;
  right: 10px;
  bottom: auto;
  left: auto;
  width: 34px;
  height: 34px;
}
.fs-img-frame .bbw-mini-wish svg {
  width: 15px;
  height: 15px;
}


.rv-card__img-wrap {
  position: relative;
}

.rv-card__img-wrap .bbw-mini-wish {
  bottom: 6px;
  right: 6px;
  top: auto;
  left: auto;
  width: 28px;
  height: 28px;
}
.rv-card__img-wrap .bbw-mini-wish svg {
  width: 13px;
  height: 13px;
}


.col-rv-card {
  position: relative;
}

.col-rv-card > .bbw-mini-wish {
  top: 8px;
  left: 8px;
  bottom: auto;
  right: auto;
  width: 28px;
  height: 28px;
}
.col-rv-card > .bbw-mini-wish svg {
  width: 13px;
  height: 13px;
}


.col-fbt-card {
  position: relative;
}

.col-fbt-card > .bbw-mini-wish {
  top: 8px;
  left: 8px;
  bottom: auto;
  right: auto;
  width: 28px;
  height: 28px;
}
.col-fbt-card > .bbw-mini-wish svg {
  width: 13px;
  height: 13px;
}

@media (max-width: 768px) {
  .bbw-mini-wish {
    width: 22px !important;
    height: 22px !important;
  }
  .bbw-mini-wish svg {
    width: 14px !important;
    height: 14px !important;
  }
}




/* ════════════════════════════════════════
   BBW4LIFE — WATERMARK IMAGE OVERLAY
════════════════════════════════════════ */
.bbw-watermark {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(20px, 5.5vw, 40px);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: rgba(80, 60, 60, 0.32);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 5;
  line-height: 1;
}


.col-card__media .bbw-watermark,
.cs-media .bbw-watermark,
.rv-card__img-wrap .bbw-watermark,
.bbwpg-card__img-wrap .bbw-watermark,
.bbw-nb-card__media .bbw-watermark {
  font-size: clamp(15px, 4vw, 25px);
}

.cart-item-img-wrap .bbw-watermark,
.cp-item-img-wrap .bbw-watermark,
.drawer-extra-card__img-wrap .bbw-watermark,
.cp-extra-card__img-wrap .bbw-watermark {
  font-size: 8px;
  bottom: 6%;
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bd-product-item__media .bbw-watermark {
  font-size: 7px;
  bottom: 6%;
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p2-upsell-img-wrap .bbw-watermark {
  font-size: 6px;
  bottom: 6%;
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
}


#main-image-slider .bbw-watermark {
  font-size: clamp(24px, 4.5vw, 46px);
  bottom: 10%;
  z-index: 5;
}


.col-rv-card {
  overflow: hidden;
  position: relative;
}

.col-rv-card .bbw-watermark {
  font-size: clamp(11px, 3vw, 18px);
  bottom: 30%;
}


.col-fbt-card {
  overflow: hidden;
  position: relative;
}

.col-fbt-card .bbw-watermark {
  font-size: clamp(11px, 3vw, 18px);
  bottom: 30%;
}


.mini-media-slider .bbw-watermark {
  font-size: clamp(11px, 3vw, 18px);
  bottom: 8%;
}

.pdp-grid-card .bbw-watermark {
  font-size: clamp(10px, 2.5vw, 15px);
  bottom: 8%;
}

.col-qv-media .bbw-watermark {
  font-size: clamp(16px, 4vw, 28px);
}

.cf-pc-img-wrap .bbw-watermark {
  font-size: clamp(9px, 2.5vw, 13px);
  bottom: 8%;
}

.modal-zoom-container .bbw-watermark {
  font-size: clamp(24px, 6vw, 46px);
  top: 70%;
  bottom: auto;
  z-index: 3;
}

@media (max-width: 768px) {
  .bbw-watermark {
    font-size: clamp(14px, 4.5vw, 22px);
  }
  #main-image-slider .bbw-watermark {
    font-size: clamp(18px, 5.5vw, 30px);
  }
  .col-rv-card .bbw-watermark,
  .col-fbt-card .bbw-watermark {
    font-size: clamp(12px, 3.5vw, 16px);
    bottom: 40%;
  }
  .mini-media-slider .bbw-watermark {
    font-size: clamp(10px, 3vw, 14px);
    bottom: 8%;
  }
  .pdp-grid-card .bbw-watermark {
    font-size: clamp(9px, 2.5vw, 12px);
    bottom: 8%;
  }
  .col-qv-media .bbw-watermark {
    font-size: clamp(13px, 4vw, 20px);
  }
  .cf-pc-img-wrap .bbw-watermark {
    font-size: clamp(8px, 2.5vw, 11px);
    bottom: 8%;
  }
}

@media (max-width: 768px) {
  .cart-item-img-wrap .bbw-watermark,
  .cp-item-img-wrap .bbw-watermark,
  .drawer-extra-card__img-wrap .bbw-watermark,
  .cp-extra-card__img-wrap .bbw-watermark {
    font-size: 7px;
    bottom: 9%;
  }
}


/* ================================================================
   BBW4LIFE — MINI LIKE/DISLIKE SUR CARTES PRODUIT
   Même palette que #product-like-widget (page produit) — icônes rondes
   sans compteur texte, coin bas-gauche pour ne jamais chevaucher les
   icônes déjà présentes sur les cartes (wishlist/quick-view en haut-
   droite, badges en haut-gauche, watermark centré en bas).
   cf. initMiniLikeDislike dans script.js.
================================================================ */
.bbw-mini-like-widget {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 6;
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.bbw-mini-like-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

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

#bbw-product-grid-featured .bbw-mini-like-count,
.imq-card .bbw-mini-like-count {
  color: #fdfaf5;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

.bbw-mini-like-btn {
  width: 22px;
  height: 22px;
  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;
  color: #fdfaf5;
  cursor: pointer;
  padding: 0;
  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;
}

.bbw-mini-like-btn:hover {
  transform: scale(1.08);
}

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

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

@media (max-width: 768px) {
  .bbw-mini-like-widget { bottom: 6px; left: 6px; gap: 4px; }
  .bbw-mini-like-btn { width: 18px; height: 18px; }
  .bbw-mini-like-btn svg { width: 10px; height: 10px; }
  .bbw-mini-like-count { font-size: 0.52rem; }
}

/* Cartes compactes (mini-slider, recently viewed, FBT, panier, wishlist) :
   icônes encore plus réduites pour rester proportionnées et responsive. */
.rv-card__img-wrap .bbw-mini-like-widget,
.col-rv-card .bbw-mini-like-widget,
.col-fbt-card .bbw-mini-like-widget,
.cart-item-img-wrap .bbw-mini-like-widget,
.cp-item-img-wrap .bbw-mini-like-widget,
.wishlist-item .bbw-mini-like-widget,
.imq-card .bbw-mini-like-widget {
  bottom: 4px;
  left: 4px;
  gap: 3px;
}

/* mini-product-slider / cart extra : wishlist deja en bas-gauche,
   like/dislike passe a droite pour ne pas se superposer. */
.mini-media-slider .bbw-mini-like-widget,
.drawer-extra-card__img-wrap .bbw-mini-like-widget,
.cp-extra-card__img-wrap .bbw-mini-like-widget {
  bottom: 4px;
  left: auto;
  right: 4px;
  gap: 3px;
}
.mini-media-slider .bbw-mini-like-col,
.rv-card__img-wrap .bbw-mini-like-col,
.col-rv-card .bbw-mini-like-col,
.col-fbt-card .bbw-mini-like-col,
.cart-item-img-wrap .bbw-mini-like-col,
.cp-item-img-wrap .bbw-mini-like-col,
.drawer-extra-card__img-wrap .bbw-mini-like-col,
.cp-extra-card__img-wrap .bbw-mini-like-col,
.wishlist-item .bbw-mini-like-col,
.imq-card .bbw-mini-like-col {
  gap: 1px;
}
.mini-media-slider .bbw-mini-like-count,
.rv-card__img-wrap .bbw-mini-like-count,
.col-rv-card .bbw-mini-like-count,
.col-fbt-card .bbw-mini-like-count,
.cart-item-img-wrap .bbw-mini-like-count,
.cp-item-img-wrap .bbw-mini-like-count,
.drawer-extra-card__img-wrap .bbw-mini-like-count,
.cp-extra-card__img-wrap .bbw-mini-like-count,
.wishlist-item .bbw-mini-like-count,
.imq-card .bbw-mini-like-count {
  font-size: 0.46rem;
}
.mini-media-slider .bbw-mini-like-btn,
.rv-card__img-wrap .bbw-mini-like-btn,
.col-rv-card .bbw-mini-like-btn,
.col-fbt-card .bbw-mini-like-btn,
.cart-item-img-wrap .bbw-mini-like-btn,
.cp-item-img-wrap .bbw-mini-like-btn,
.drawer-extra-card__img-wrap .bbw-mini-like-btn,
.cp-extra-card__img-wrap .bbw-mini-like-btn,
.wishlist-item .bbw-mini-like-btn,
.imq-card .bbw-mini-like-btn {
  width: 16px;
  height: 16px;
}
.mini-media-slider .bbw-mini-like-btn svg,
.rv-card__img-wrap .bbw-mini-like-btn svg,
.col-rv-card .bbw-mini-like-btn svg,
.col-fbt-card .bbw-mini-like-btn svg,
.cart-item-img-wrap .bbw-mini-like-btn svg,
.cp-item-img-wrap .bbw-mini-like-btn svg,
.drawer-extra-card__img-wrap .bbw-mini-like-btn svg,
.cp-extra-card__img-wrap .bbw-mini-like-btn svg,
.wishlist-item .bbw-mini-like-btn svg,
.imq-card .bbw-mini-like-btn svg {
  width: 9px;
  height: 9px;
}

/* Bundle deal (home) / upsell panier : wishlist en bas-droite (cf.
   plus haut), like/dislike en bas-gauche — formats les plus compacts
   du site vu la petite taille des vignettes (72px / 62px). */
.bd-product-item__media .bbw-mini-like-widget {
  bottom: 3px;
  left: 3px;
  gap: 2px;
}
.bd-product-item__media .bbw-mini-like-col {
  gap: 1px;
}
.bd-product-item__media .bbw-mini-like-count {
  font-size: 0.42rem;
}
.bd-product-item__media .bbw-mini-like-btn {
  width: 14px;
  height: 14px;
}
.bd-product-item__media .bbw-mini-like-btn svg {
  width: 8px;
  height: 8px;
}

.p2-upsell-img-wrap .bbw-mini-like-widget {
  bottom: 2px;
  left: 2px;
  gap: 2px;
}
.p2-upsell-img-wrap .bbw-mini-like-col {
  gap: 1px;
}
.p2-upsell-img-wrap .bbw-mini-like-count {
  font-size: 0.4rem;
}
.p2-upsell-img-wrap .bbw-mini-like-btn {
  width: 13px;
  height: 13px;
}
.p2-upsell-img-wrap .bbw-mini-like-btn svg {
  width: 7px;
  height: 7px;
}


/* ================================================================
   BBW4LIFE — CARD PRELOAD LOGO
   Logo affiché en fond de chaque card produit tant que son image réelle
   n'a pas fini de charger (cf. initCardPreloadLogo dans script.js).
================================================================ */
.bbw-card-preload-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 18%;
  box-sizing: border-box;
  background: var(--bbw-preload-bg, rgba(184,146,90,0.07));
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.bbw-card-preload-logo.is-loaded {
  opacity: 0;
}
.bbw-card-preload-logo--circular {
  border-radius: 50%;
  padding: 26%;
}
/* Wrapper généré dynamiquement autour d'une <img> isolée (ex: .bd-product-item,
   image + texte côte à côte) — reprend exactement la taille/le radius de
   l'image pour ne pas perturber le layout flex existant. */
.bbw-preload-img-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  flex-shrink: 0;
}
.bd-product-item .bbw-preload-img-wrap {
  width: 72px !important;
  height: 72px !important;
  border-radius: 2px !important;
  border: 1px solid var(--bbw-gold-border) !important;
}
.bd-product-item .bbw-preload-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* Footer — "New Gems To Discover" : même principe, l'image occupe
   toute la place dans son lien (.bbw-footer__newin-link). */
.bbw-footer__newin-link .bbw-preload-img-wrap {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 10px;
}
.bbw-footer__newin-link .bbw-preload-img-wrap img {
  width: 100% !important;
  height: 100% !important;
}

/* Spotlight — mini gallery thumbnails (.fs-thumb) : le wrapper de preload
   (span injecté par initCardPreloadLogo) reste purement structurel — flex
   + hauteur pour ne pas casser la rangée — et laisse .fs-thumb porter
   100% de son propre style (bordure, padding, fond, ombre, radius). Pas
   d'overflow:hidden ni de radius ici : ça écraserait visuellement le
   design premium de la thumbnail dès que le wrapper est en place. */
.fs-mini-gallery .bbw-preload-img-wrap {
  position: relative;
  flex: 1;
  height: 84px;
  display: block;
}
.fs-mini-gallery .bbw-preload-img-wrap img {
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 768px) {
  .fs-mini-gallery .bbw-preload-img-wrap { height: 62px; }
}


/* ================================================================
   PAUL INDICATOR & POPUP — Ultra Premium BBW4LIFE Edition
================================================================ */


@keyframes paulPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 4px 14px rgba(21,17,14,0.40),
            0 0 16px rgba(184,146,90,0.25);
    }
    50% {
        transform: scale(1.05);
        box-shadow:
            0 6px 22px rgba(21,17,14,0.45),
            0 0 26px rgba(184,146,90,0.40);
    }
}

@keyframes shimmerBar {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(220%); }
}

@keyframes borderGlow {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 1; }
}

@keyframes popupSlideIn {
    from { opacity: 0; transform: scale(0.88) translateY(24px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

@keyframes particleDrift {
    0%   { transform: translateY(0px)   rotate(0deg);   opacity: 0.5; }
    50%  { transform: translateY(-14px) rotate(180deg); opacity: 1; }
    100% { transform: translateY(0px)   rotate(360deg); opacity: 0.5; }
}

@keyframes accentSlide {
    0%   { width: 0%;  opacity: 0; }
    100% { width: 60%; opacity: 1; }
}

@keyframes pulseRing {
    0%   { transform: scale(1);    opacity: 0.7; }
    100% { transform: scale(1.65); opacity: 0; }
}

@keyframes popupFade {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(-10px); }
}

/* ================================================================
   WIDGETS DOCK — regroupe chat / cadeau / compte / navigation dans
   une colonne collée à droite. Replié par défaut (seul le toggle est
   visible) ; ouvert, les widgets s'affichent empilés à leur taille
   normale. Les enfants gardent leur position:fixed d'origine tant
   qu'ils ne sont pas déplacés en drag : on l'annule ici pour les
   ancrer dans le flux du dock (colonne), le drag existant (qui pose
   des styles inline left/bottom) reprend ensuite naturellement la
   main dès qu'un widget est déplacé, car un style inline bat toujours
   une règle de classe.
================================================================ */
#bbw-widgets-dock {
    position: fixed;
    right: 10px;
    bottom: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* Le toggle doit toujours rester tout en bas de la pile (cf. image de
   référence), quel que soit l'ordre DOM d'insertion des widgets (qui,
   eux, s'empilent au-dessus dans leur ordre naturel de haut en bas). */
#bbw-widgets-dock-toggle {
    order: 999;
}

#bbw-widgets-dock > *:not(#bbw-widgets-dock-toggle) {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    display: none !important;
}

/* Point d'interrogation — visible au repos (dock fermé), juste au-dessus
   du toggle ; masqué dès que le dock s'ouvre (cf. règle .bbw-dock--open
   plus bas), pour ne pas se mêler aux icônes déployées.
   #bbw-widgets-dock > #bbw-dock-help-icon (spécificité 2 IDs) est
   nécessaire ici — la règle générique "fermé" juste au-dessus
   (#bbw-widgets-dock > *:not(#bbw-widgets-dock-toggle)) compte 2 IDs
   elle aussi (:not(#id) compte comme un ID), donc un simple
   #bbw-dock-help-icon (1 ID) perdait face à elle malgré !important. */
#bbw-widgets-dock > #bbw-dock-help-icon {
    width: 40px;
    color: var(--bbw-gold, #B8925A);
    font-weight: 900;
    font-size: 20px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    order: 998;
    pointer-events: none;
    margin-bottom: -6px;
}

/* .bbw-dock-icon (wishlist/panier) a besoin de rester position:relative :
   leur badge (.bbw-badge, position:absolute top/right négatifs) s'ancre
   sur le PARENT positionné le plus proche — en position:static (forcé
   ci-dessus pour les autres widgets, à l'origine position:fixed), le
   badge remonte s'ancrer sur #bbw-widgets-dock (position:fixed) au lieu
   du cercle de l'icône, et atterrit hors de l'écran/du cercle. */
#bbw-widgets-dock > .bbw-dock-icon:not(#bbw-widgets-dock-toggle) {
    position: relative !important;
}

/* .bbw-dock-icon (wishlist/panier) exclu ici : leur display d'ouverture
   (flex, pour centrer le SVG dans le cercle) est fixé par la règle dédiée
   juste en dessous, pas par un revert générique qui les ramènerait au
   display natif de <div> (block). #bbw-dock-help-icon exclu aussi : il
   doit rester masqué à l'ouverture (règle dédiée plus bas), pas revenir
   à son display normal comme les autres widgets. */
#bbw-widgets-dock.bbw-dock--open > *:not(#bbw-widgets-dock-toggle):not(.bbw-dock-icon):not(#bbw-dock-help-icon) {
    display: revert !important;
}

/* Spécificité alignée (2 ID, via :not(#id) qui compte comme un ID) sur la
   règle "fermé" ci-dessus (#bbw-widgets-dock > *:not(#bbw-widgets-dock-
   toggle), display:none !important) pour que l'ouverture la batte, plus
   la classe .bbw-dock--open sur le parent pour ne s'appliquer qu'ouvert. */
#bbw-widgets-dock.bbw-dock--open > .bbw-dock-icon:not(#bbw-widgets-dock-toggle) {
    display: flex !important;
}

/* 3 IDs (#bbw-widgets-dock + .bbw-dock--open + #bbw-dock-help-icon) —
   bat clairement la règle "visible par défaut" ci-dessus (2 IDs). */
#bbw-widgets-dock.bbw-dock--open > #bbw-dock-help-icon {
    display: none !important;
}

/* Wishlist/panier réutilisent .bbw-icon-btn.icon-wrapper (header.css) tel
   quel côté comportement (clic → ouvre drawer/wishlist, badges .cart-badge/
   .wishlist-badge déjà synchronisés partout via updateBadges()) — seul
   l'habillage visuel est réadapté ici pour matcher les cercles sombres du
   dock plutôt que le style carré/doré du header. */
#bbw-widgets-dock .bbw-dock-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #1a1310 0%, var(--bbw-black) 60%, #0c0906 100%) !important;
    border: 1.5px solid var(--bbw-gold-border-hi) !important;
    color: var(--bbw-gold-light) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    box-shadow: 0 4px 16px rgba(21,17,14,0.42), 0 0 18px rgba(184,146,90,0.28) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Le SVG à l'intérieur est un élément inline-replaced : sans display:block
   explicite, certains navigateurs lui laissent un espace d'alignement de
   baseline qui décale visuellement le tracé hors du centre du cercle
   flex, contrairement aux autres icônes du dock qui n'ont pas ce souci
   (probablement car leur propre CSS d'origine fixe déjà ce point). */
#bbw-widgets-dock .bbw-dock-icon svg {
    display: block !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* header.css (.bbw-icon-btn:hover, et ses variantes @media plus petites)
   applique un fond doré clair et une taille réduite pensés pour le style
   carré/discret du header — dans le dock, ça fait apparaître un rond
   beige/clair au survol et une taille incohérente avec les autres icônes
   du dock. On force l'apparence du dock ici, à toutes les tailles d'écran. */
#bbw-widgets-dock .bbw-dock-icon:hover {
    background: linear-gradient(145deg, #2a1f18 0%, #1a1310 60%, #0c0906 100%) !important;
    border-color: var(--bbw-gold-border-hi) !important;
    color: var(--bbw-gold-light) !important;
}

#bbw-widgets-dock-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    outline: none;
    background: var(--bbw-black, #15110E);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.30);
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

/* Sans ceci, certains navigateurs (Chrome/Safari mobile en particulier)
   appliquent un fond de focus/tap par défaut sur <button> — visible ici
   comme un flash blanc au clic, qui disparaît dès qu'on clique ailleurs
   (perte du focus). Le bouton garde son propre fond noir dans tous les
   états. */
#bbw-widgets-dock-toggle:hover,
#bbw-widgets-dock-toggle:active,
#bbw-widgets-dock-toggle:focus,
#bbw-widgets-dock-toggle:focus-visible {
    background: var(--bbw-black, #15110E);
}

#bbw-widgets-dock-toggle svg {
    transition: transform 0.25s ease;
}

#bbw-widgets-dock.bbw-dock--open #bbw-widgets-dock-toggle svg {
    transform: rotate(180deg);
}

#bbw-widgets-dock-toggle:hover {
    transform: scale(1.08);
}

@keyframes popupAnim {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ================================================================
   INDICATOR WRAPPER
================================================================ */
.paul-indicator-wrapper {
    position: fixed;
    z-index: 999;
    bottom: 20px;
    right: 5px;
    transition: all 0.30s cubic-bezier(0.4,0,0.2,1);
}

@media (max-width: 768px) {
    .paul-indicator-wrapper { bottom: 15px; right: 5px; }
}


.paul-indicator-wrapper::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid rgba(184,146,90,0.45);
    animation: pulseRing 3s ease-out infinite;
    pointer-events: none;
}
.paul-indicator-wrapper::after {
    content: none;
}


.paul-indicator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(145deg, #1a1310 0%, var(--bbw-black) 60%, #0c0906 100%);
    border: 1.5px solid var(--bbw-gold-border-hi);
    border-radius: 50%;
    color: var(--bbw-gold-light);
    font-size: 20px;
    box-shadow:
        0 4px 16px rgba(21,17,14,0.42),
        0 0 18px rgba(184,146,90,0.28),
        inset 0 1px 0 rgba(255,255,255,0.10);
    animation: paulPulse 3s infinite ease-in-out;
    cursor: pointer;
    text-decoration: none;
    overflow: visible;
}


.paul-indicator::before {
    content: none;
}


.paul-tooltip {
    position: absolute;
    right: 56px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--bbw-black) 0%, #1a1310 100%);
    color: var(--bbw-gold-light);
    padding: 8px 18px;
    border-radius: 4px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
    border: 1px solid var(--bbw-gold-border);
    box-shadow:
        0 4px 18px rgba(21,17,14,0.35),
        inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
    pointer-events: none;
}

.paul-tooltip::before {
    content: none;
}

.paul-indicator-wrapper:hover .paul-tooltip {
    opacity: 1;
    visibility: visible;
}


@media (max-width: 768px) {
    .paul-tooltip {
        font-size: 0.70rem;
        white-space: normal;
        max-width: 150px;
        width: 150px;
        text-align: center;
        line-height: 1.4;
        border-radius: 4px;
        padding: 6px 10px;
    }
}

/* ================================================================
   POPUP OVERLAY
================================================================ */
.paul-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(21,17,14,0.90);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.paul-popup-overlay.active {
    display: flex;
}

.paul-popup-overlay.active::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 768px) {
  .paul-popup-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(21, 17, 14, 0.96) !important;
  }
}


/* ================================================================
   POPUP BOX
================================================================ */
.paul-popup {
    background: linear-gradient(160deg, var(--bbw-black) 0%, #1a1310 55%, #14100c 100%);
    padding: 40px 32px 30px;
    border-radius: 6px;
    border: 1px solid var(--bbw-gold-border);
    max-width: 440px;
    width: 100%;

    max-height: min(88vh, 680px);
    overflow-y: auto;
    text-align: center;
    position: relative;
    box-shadow:
        0 32px 80px rgba(21,17,14,0.60),
        0 0 0 1px rgba(184,146,90,0.10),
        inset 0 1px 0 rgba(255,255,255,0.05);
    scrollbar-width: none;
    animation: popupSlideIn 0.38s cubic-bezier(0.34,1.56,0.64,1);
    box-sizing: border-box;
}

.paul-popup::-webkit-scrollbar { display: none; }


.paul-popup::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--bbw-gold) 30%,
        var(--bbw-gold-light) 50%,
        var(--bbw-gold) 70%,
        transparent 100%);
    border-radius: 6px 6px 0 0;
}


.paul-popup::after {
    content: '';
    position: absolute;
    bottom: 0; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(184,146,90,0.35),
        rgba(110,36,57,0.28),
        transparent);
    border-radius: 0 0 6px 6px;
}


/* Particules flottantes retirées — rendu plus sobre/éditorial */
.paul-popup .paul-particle {
    display: none !important;
}


.paul-close,
.popup-close {
    position: absolute !important;
    top: 14px !important;
    right: 18px !important;
    font-size: 24px !important;
    color: rgba(201,150,62,0.40) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    z-index: 10;
    transition: color 0.25s, transform 0.25s !important;
    background: none;
    border: none;
}
.paul-close:hover,
.popup-close:hover {
    color: #e8bc6a !important;
    transform: rotate(90deg) scale(1.15);
}


.paul-offer-title {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1.9rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--bbw-gold-light) 0%, #f0cd8e 50%, var(--bbw-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 6px;
    letter-spacing: 0.01em;
    line-height: 1.18;
    position: relative;
    display: inline-block;
    text-shadow: none;
}

.paul-offer-title::after {
    content: '';
    display: block;
    margin: 8px auto 0;
    height: 1.5px;
    width: 0%;
    background: linear-gradient(90deg,
        transparent,
        #e8bc6a,
        rgba(201,150,62,0));
    border-radius: 2px;
    animation: accentSlide 0.9s cubic-bezier(0.4,0,0.2,1) 0.3s forwards;
}

.paul-offer-subtitle {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.50);
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: 0.04em;
    font-family: 'DM Sans', sans-serif;
}


.paul-popup hr,
.paul-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(184,146,90,0.32) 30%,
        rgba(110,36,57,0.30) 70%,
        transparent);
    margin: 16px 0;
    position: relative;
    overflow: hidden;
}
.paul-popup hr::after,
.paul-divider::after {
    content: none;
}

/* ================================================================
   AUTH FORM
================================================================ */
.auth-form { margin-top: 12px; }

.auth-form h3 {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1.4rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--bbw-gold-light), #f0cd8e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 14px;
    letter-spacing: 0.01em;
    position: relative;
    display: inline-block;
}
.auth-form h3::after {
    content: '';
    display: block;
    margin: 4px auto 0;
    height: 1px;
    width: 0%;
    background: linear-gradient(90deg,
        transparent,
        rgba(201,150,62,0.65),
        transparent);
    border-radius: 2px;
    animation: accentSlide 0.8s cubic-bezier(0.4,0,0.2,1) 0.2s forwards;
}


.auth-form input {
    width: 100%;
    padding: 13px 16px;
    margin: 4px 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(184,146,90,0.18);
    border-radius: 4px;
    color: #fff;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 0.90rem;
    box-sizing: border-box;
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.auth-form input::placeholder {
    color: rgba(246,239,229,0.30);
}
.auth-form input:focus {
    outline: none;
    border-color: var(--bbw-gold-border-hi);
    background: rgba(255,255,255,0.06);
    box-shadow:
        0 0 0 2px rgba(184,146,90,0.14),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

.auth-form label {
    color: rgba(255,255,255,0.45);
    font-size: 0.80rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    justify-content: flex-start;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
}
.auth-form input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--bbw-gold);
    transform: none !important;
    transition: none !important;
}


.password-input-wrapper,
.password-wrapper {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 4px !important;
}
.password-input-wrapper input,
.password-wrapper input {
    padding-right: 50px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.password-toggle {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 999 !important;
    cursor: pointer !important;
    color: rgba(255,255,255,0.35) !important;
    font-size: 18px !important;
    transition: color 0.22s;
}
.password-toggle:hover {
    color: #e8bc6a !important;
}

/* ================================================================
   BOUTONS
================================================================ */
.paul-btn {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 3px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 10px 0 6px;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    overflow: hidden;
}


.paul-btn::before {
    content: none;
}


.paul-btn-login,
.paul-btn-register {
    background: linear-gradient(135deg,
        var(--bbw-gold) 0%,
        var(--bbw-gold-light) 50%,
        var(--bbw-gold) 100%);
    background-size: 200% 100%;
    color: #1a1006;
    box-shadow:
        0 4px 20px rgba(184,146,90,0.35),
        0 1px 0 rgba(255,255,255,0.35) inset;
}

@keyframes btnGoldPulse {
    0%, 100% {
        box-shadow:
            0 4px 28px rgba(201,150,62,0.50),
            0 0 0 1px rgba(201,150,62,0.20),
            0 1px 0 rgba(255,255,255,0.40) inset;
    }
    50% {
        box-shadow:
            0 6px 44px rgba(201,150,62,0.75),
            0 0 70px rgba(201,150,62,0.22),
            0 0 0 1px rgba(201,150,62,0.35),
            0 1px 0 rgba(255,255,255,0.40) inset;
    }
}

.paul-btn-login:hover,
.paul-btn-register:hover {
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow:
        0 8px 28px rgba(184,146,90,0.45),
        0 1px 0 rgba(255,255,255,0.40) inset;
}

.paul-btn:active {
    transform: scale(0.98) !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.25) !important;
}


.switch-link {
    color: rgba(255,255,255,0.38);
    margin-top: 12px;
    font-size: 0.82rem;
    font-family: 'DM Sans', sans-serif;
}
.switch-link span {
    color: #e8bc6a;
    cursor: pointer;
    font-weight: 600;
    transition: color 0.2s, border-color 0.2s;
    border-bottom: 1px solid rgba(232,188,106,0.35);
    padding-bottom: 1px;
}
.switch-link span:hover {
    color: #f5d080;
    border-color: #f5d080;
}

/* ================================================================
   TOAST
================================================================ */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--bbw-black), #1a1310);
    color: var(--bbw-gold-light);
    padding: 14px 28px;
    border-radius: 4px;
    border: 1px solid var(--bbw-gold-border);
    box-shadow:
        0 8px 24px rgba(21,17,14,0.42),
        inset 0 1px 0 rgba(255,255,255,0.06);
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    font-weight: 700;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    white-space: nowrap;
    max-width: 90vw;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.04em;
}
.toast::before {
    content: none;
}
.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px);
    animation: toastIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}



#error-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}

#error-popup.show {
  display: flex;
  animation: popupFadeIn 0.25s ease;
}

@keyframes popupFadeIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

#error-popup .popup-content {
  background: #fff;
  border-radius: 16px;
  padding: 24px 4px 18px;
  max-width: 220px;
  width: calc(100% - 60px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
  text-align: center;
  border-top: 4px solid #c0385e;
  position: relative;
}

#error-popup .popup-content::before {
  content: '!';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fdeef3;
  color: #c0385e;
  font-size: 18px;
  font-weight: 700;
  margin: 0 auto 12px;
  border: 2px solid #f5c0d0;
}

#error-popup .popup-text,
#popup-message {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #2d2d2d !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 0 18px !important;
  word-break: break-word;
  white-space: normal;
  letter-spacing: 0.01em;
}

#error-popup .popup-btn {
  background: linear-gradient(135deg, #c0385e, #9e2a4a);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 9px 32px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 14px rgba(192, 56, 94, 0.35);
}

#error-popup .popup-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(192, 56, 94, 0.45);
}

#error-popup .popup-btn:active {
  transform: scale(0.97);
}


/* ================================================================
   LEGACY / COMPAT
================================================================ */
.popup-overlay { display: none !important; }
.popup-overlay.open { display: flex !important; }
.popup { animation: popupFade 0.4s ease; }


.paul-policy-link {
    text-align: left;
    margin-top: 10px;
}
.paul-policy-link a {
    color: rgba(201,150,62,0.50);
    font-size: 0.80rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.22s;
    border-bottom: 1px solid transparent;
}
.paul-policy-link a:hover {
    color: #e8bc6a;
    border-bottom-color: rgba(201,150,62,0.40);
}
.paul-policy-link--small a {
    font-size: 0.74rem;
    color: rgba(201,150,62,0.38);
}
.paul-policy-link--small a:hover {
    color: rgba(201,150,62,0.75);
}
.paul-policy-link i,
.paul-policy-link--small i {
    font-size: 11px;
    opacity: 0.80;
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 1024px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    html {
        overflow-x: hidden;
    }
    html, body {
        margin: 0;
        padding: 0;
    }


    .paul-popup-overlay {
        padding: 12px 16px;
        align-items: center;
    }

    
    .paul-popup {
        max-height: min(85vh, 600px);
        padding: 30px 22px 24px;
        border-radius: 6px;
        width: 100%;
        max-width: 100%;
    }

    .paul-offer-title {
        font-size: 1.60rem;
    }

    .auth-form input {
        padding: 11px 14px;
        font-size: 0.88rem;
    }

    .paul-btn {
        padding: 12px 18px;
        font-size: 0.84rem;
    }

    
    .shop-banner-section {
        padding: 48px 20px 40px;
        height: auto;
    }
    .banner-content h1 {
        font-size: 1.8rem;
        width: auto !important;
    }
    .banner-content h2 { font-size: 1.2rem; }
    .banner-content p  { font-size: 0.9rem; }
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .product-grid .product-card img { height: 170px; }
    .testimonials-mini { flex-direction: column; align-items: center; }
    .statistics-mini   { flex-direction: column; align-items: center; }
    .comparison-table  { font-size: 0.9rem; }
}

@media (max-width: 480px) {
    .paul-popup-overlay {
        padding: 10px 12px;
    }
    .paul-popup {
        max-height: min(82vh, 560px);
        padding: 26px 18px 20px;
        border-radius: 6px;
    }
    .paul-offer-title { font-size: 1.40rem; }
    .product-grid { grid-template-columns: 1fr; }
}






@keyframes fnavPulse {
    0%, 100% {
        box-shadow:
            0 6px 24px rgba(201,150,62,0.50),
            0 2px 6px rgba(0,0,0,0.25),
            inset 0 1px 0 rgba(255,255,255,0.25);
    }
    50% {
        box-shadow:
            0 8px 40px rgba(201,150,62,0.80),
            0 0 60px rgba(201,150,62,0.22),
            0 2px 6px rgba(0,0,0,0.25),
            inset 0 1px 0 rgba(255,255,255,0.30);
    }
}

@keyframes fnavShimmer {
    0%   { left: -80%; }
    100% { left: 160%; }
}

#floating-nav {
    position: fixed;
    bottom: 420px !important;
    right: 40px !important;
    z-index: 999;
}


.fnav-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(245,208,128,0.40);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #1a0e00;
    background: linear-gradient(135deg,
        #c9963e 0%,
        #e8bc6a 35%,
        #f5d080 50%,
        #e8bc6a 65%,
        #c9963e 100%);
    background-size: 300% 100%;
    box-shadow:
        0 6px 24px rgba(201,150,62,0.50),
        0 2px 6px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.40),
        inset 0 -1px 0 rgba(0,0,0,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-position 0.5s ease;
    position: relative;
    z-index: 2;
    overflow: hidden;
    animation: fnavPulse 2.8s ease-in-out infinite;
}
.fnav-toggle::before {
    content: ''; 
    position: absolute;
    top: 0; left: -80%; 
    width: 50%; height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.38),
        transparent);
    animation: fnavShimmer 2.5s ease-in-out infinite;
    pointer-events: none;
}

.fnav-toggle:hover {
    background-position: 100% 0;
    transform: scale(1.12);
    box-shadow:
        0 10px 42px rgba(201,150,62,0.72),
        0 0 65px rgba(201,150,62,0.22),
        inset 0 1px 0 rgba(255,255,255,0.45);
    animation: none;
}

.fnav-toggle.open {
    transform: rotate(45deg) scale(1.05);
    animation: none;
}


.fnav-wheel {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fnav-wheel.open {
    pointer-events: all;
    opacity: 1;
}


.fnav-btn {
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid rgba(201,150,62,0.20);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #e8bc6a;
    background: linear-gradient(145deg, #1a0812 0%, #0d0d0d 60%, #130910 100%);
    box-shadow:
        0 4px 16px rgba(0,0,0,0.50),
        0 0 0 1px rgba(201,150,62,0.07),
        inset 0 1px 0 rgba(255,255,255,0.07),
        inset 0 -1px 0 rgba(0,0,0,0.30);
    transform: translate(-50%, -50%) scale(0);
    transition:
        transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
    overflow: hidden;
}


.fnav-btn::before {
    content: '';
    position: absolute;
    top: -40%; left: -40%;
    width: 80%; height: 80%;
    background: radial-gradient(ellipse,
        rgba(201,150,62,0.14) 0%,
        transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.fnav-top     { top: -20px; left: 50%;   transition-delay: 0.05s; }
.fnav-right   { top: 50%;   left: 60px;  transition-delay: 0.10s; }
.fnav-bottom  { top: 60px;  left: 50%;   transition-delay: 0.05s; }
.fnav-left    { top: 60%;   left: -20px; transition-delay: 0.10s; }


.fnav-refresh {
    top: -26px;
    left: 60px;
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
    color: #1a0e00;
    background: linear-gradient(135deg,
        #c9963e 0%,
        #e8bc6a 50%,
        #c9963e 100%);
    background-size: 200% 100%;
    border: 1px solid rgba(245,208,128,0.35);
    box-shadow:
        0 4px 18px rgba(201,150,62,0.48),
        inset 0 1px 0 rgba(255,255,255,0.38),
        inset 0 -1px 0 rgba(0,0,0,0.12);
    transition-delay: 0.15s;
}

.fnav-wheel.open .fnav-btn {
    transform: translate(-50%, -50%) scale(1);
}


.fnav-btn:hover {
    color: #f5d080;
    background: linear-gradient(145deg, #2a1020 0%, #1a0d18 60%, #0d0d0d 100%);
    border-color: rgba(201,150,62,0.55);
    box-shadow:
        0 8px 26px rgba(201,150,62,0.28),
        0 0 22px rgba(201,150,62,0.14),
        0 3px 6px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.10);
    transform: translate(-50%, -50%) scale(1.18) translateY(-2px);
}


.fnav-refresh:hover {
    background-position: 100% 0;
    color: #1a0e00;
    box-shadow:
        0 8px 30px rgba(201,150,62,0.62),
        0 0 45px rgba(201,150,62,0.22),
        inset 0 1px 0 rgba(255,255,255,0.42);
    transform: translate(-50%, -50%) scale(1.18) translateY(-2px);
}

.fnav-btn:active {
    transform: translate(-50%, -50%) scale(0.94) translateY(1px) !important;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.45),
        inset 0 2px 6px rgba(0,0,0,0.35) !important;
}


.fnav-btn::after {
    content: none;
    position: absolute;
    background: linear-gradient(135deg, #0d0d0d, #1a0812);
    color: #e8bc6a;
    font-size: 0.68rem;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(201,150,62,0.28);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 99999;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 16px rgba(0,0,0,0.40);
}

.fnav-top::after     { content: 'Scroll top';    }
.fnav-right::after   { content: 'Next page';     }
.fnav-bottom::after  { content: 'Scroll bottom'; }
.fnav-left::after    { content: 'Previous page'; }
.fnav-refresh::after { content: 'Refresh';       }

.fnav-top:hover::after,
.fnav-right:hover::after,
.fnav-bottom:hover::after,
.fnav-left:hover::after,
.fnav-refresh:hover::after { opacity: 1; }


@media (max-width: 768px) {
    #floating-nav {
        bottom: 500px !important;
        right: 20px !important;
    }

    .fnav-toggle {
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }

    .fnav-btn {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    .fnav-top     { top: -5px;  left: 50%; }
    .fnav-right   { top: 50%;   left: 50px; }
    .fnav-bottom  { top: 55px;  left: 50%; }
    .fnav-left    { top: 60%;   left: -5px; }

    .fnav-refresh {
        top: -22px;
        left: 45px;
        width: 30px;
        height: 30px;
    }

    .fnav-btn::after,
    .fnav-top::after,
    .fnav-right::after,
    .fnav-bottom::after,
    .fnav-left::after,
    .fnav-refresh::after { display: none !important; }
}





/* ================================================================
   BBW4LIFE — CHATBOT CSS — PREMIUM EDITION (LIGHT REWORK)
================================================================ */


#cf-chat-widget {
  position: fixed;
  bottom: 70px;
  left: 5px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  touch-action: none;
  user-select: none;
}


#cf-chat-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #0d0d0d 0%, #1a1200 60%, #c9963e 100%);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(201,150,62,0.35), 0 2px 8px rgba(0,0,0,0.18);
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-radius 0.3s ease,
              box-shadow 0.3s ease,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: fixed;
  bottom: 20px;
  left: 5px;
  z-index: 990;
  outline: none;
  overflow: hidden;
  white-space: nowrap;
}

#cf-chat-toggle:hover {
  width: auto;
  border-radius: 4px;
  padding: 0 20px 0 6px;
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(184,146,90,0.40), 0 4px 12px rgba(21,17,14,0.25);
}

/* Dans le widgets dock (#bbw-widgets-dock ouvert), les icônes sont
   empilées serrées dans une colonne étroite : l'expansion en pilule
   (width:auto + label) déborde sur les icônes voisines et crée une
   bande translucide qui ressemble à un fond blanc/transparent parasite.
   On garde donc le bouton en simple cercle, sans expansion, ici. */
#bbw-widgets-dock #cf-chat-toggle:hover {
  width: 44px;
  padding: 0;
  border-radius: 50%;
}
#bbw-widgets-dock #cf-chat-toggle:hover .cf-toggle-label {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
}
#bbw-widgets-dock #cf-chat-toggle:hover .cf-toggle-inner {
  width: 100%;
  height: 100%;
  background: transparent;
}

#cf-chat-toggle:active {
  transform: translateY(0) scale(0.97);
}

.cf-toggle-inner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 auto;
}

#cf-chat-toggle:not(:hover) .cf-toggle-inner {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
}

.cf-toggle-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #f5d080;
  letter-spacing: 0.06em;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
  margin-left: 0;
  text-transform: uppercase;
}

#cf-chat-toggle:hover .cf-toggle-label {
  max-width: 400px;
  opacity: 1;
  margin-left: 8px;
}

#cf-chat-toggle:hover .cf-toggle-inner {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: rgba(255,255,255,0.08);
  margin: 0;
}

.cf-notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  background: #c9963e;
  border-radius: 50%;
  border: 2px solid #0d0d0d;
  animation: cf-pulse-dot 2s infinite;
  display: none;
}

@keyframes cf-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.75; }
}


.cf-chat-window {
  position: absolute;
  bottom: -60px;
  left: 0;
  width: 390px;
  max-height: min(520px, calc(100vh - 90px));
  background: #f7f2ea;
  border-radius: 6px;
  box-shadow: 0 24px 72px rgba(21,17,14,0.20), 0 8px 24px rgba(184,146,90,0.10);
  border: 1px solid var(--bbw-gold-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom left;
  transform: scale(0.85) translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#cf-chat-widget.cf-right .cf-chat-window {
  left: auto;
  right: 0;
  transform-origin: bottom right;
}

#cf-chat-widget.cf-top .cf-chat-window {
  bottom: auto;
  top: 72px;
  transform-origin: top left;
}

#cf-chat-widget.cf-top.cf-right .cf-chat-window {
  transform-origin: top right;
}

/* Widget ancré à droite : le bouton grandit vers la GAUCHE au survol/tap
   (jamais vers la droite, hors écran). L'icône reste du côté ancré
   (droite) et le texte s'étend vers la gauche — ordre visuel inversé via
   row-reverse, padding en miroir, sans toucher à l'ordre du DOM.
   #cf-chat-toggle est un FRÈRE de #cf-chat-widget dans le DOM (pas un
   enfant) — la classe .cf-right est donc posée directement sur le
   bouton lui-même par le JS, d'où le sélecteur direct ci-dessous. */
#cf-chat-toggle.cf-right:hover {
  flex-direction: row-reverse;
  padding: 0 6px 0 20px;
}
#cf-chat-toggle.cf-right:hover .cf-toggle-label {
  margin-left: 0;
  margin-right: 8px;
}

.cf-chat-window.cf-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}


.cf-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #0d0d0d 0%, #1f1200 100%);
  border-bottom: 1px solid rgba(201,150,62,0.30);
  flex-shrink: 0;
  position: relative;
}

.cf-live-chat-badge {
  position: absolute;
  bottom: 6px;
  left: 66px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #6bd97a;
  letter-spacing: 0.02em;
}
.cf-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6bd97a;
  box-shadow: 0 0 6px #6bd97a;
  animation: cfLiveDotPulse 1.6s ease-in-out infinite;
}
@keyframes cfLiveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}

.cf-chat-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bbw-gold), transparent);
  opacity: 0.6;
}

.cf-header-avatar {
  position: relative;
  flex-shrink: 0;
}

.cf-header-avatar img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bbw-gold);
  background: #1a1200;
}

.cf-avatar-fallback {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(201,150,62,0.18);
  color: var(--bbw-gold);
  font-weight: 700;
  font-size: 1.1rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bbw-gold);
}

.cf-header-avatar img:not([src]),
.cf-header-avatar img[src=""] {
  display: none;
}

.cf-online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid #0d0d0d;
  box-shadow: 0 0 8px rgba(34,197,94,0.6);
}

.cf-header-info {
  flex: 1;
}

.cf-header-info h3 {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--bbw-gold-light);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

.cf-ai-badge {
  font-size: 0.60rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  background: rgba(201,150,62,0.18);
  color: var(--bbw-gold);
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid rgba(201,150,62,0.45);
  font-family: var(--font-body);
}

.cf-header-info p {
  font-size: 0.74rem;
  color: rgba(245,224,180,0.70);
  margin: 2px 0 0;
  font-weight: 400;
}

.cf-header-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(201,150,62,0.40);
  background: rgba(201,150,62,0.08);
  color: rgba(245,224,180,0.70);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.cf-header-close:hover {
  background: rgba(201,150,62,0.20);
  color: var(--bbw-gold);
  border-color: var(--bbw-gold);
  transform: scale(1.1);
}


.cf-quick-chips {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
  background: #f0e8d8;
  border-bottom: 1px solid rgba(201,150,62,0.18);
}

.cf-quick-chips::-webkit-scrollbar { display: none; }

.cf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  background: var(--bbw-black);
  border: 1px solid var(--bbw-gold-border-hi);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bbw-gold);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s ease;
  flex-shrink: 0;
}

.cf-chip:hover {
  background: var(--bbw-gold);
  color: #000;
  border-color: var(--bbw-gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(201,150,62,0.35);
}


.cf-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  background: #f7f2ea;
  min-height: 0;
}

.cf-messages::-webkit-scrollbar { width: 4px; }
.cf-messages::-webkit-scrollbar-track { background: transparent; }
.cf-messages::-webkit-scrollbar-thumb {
  background: rgba(201,150,62,0.30);
  border-radius: 4px;
}


.cf-message {
  display: flex;
  flex-direction: column;
  max-width: 82%;
  animation: cf-msg-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cf-msg-in {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cf-message--ai  { align-self: flex-start; align-items: flex-start; }
.cf-message--user { align-self: flex-end;   align-items: flex-end; }

.cf-msg-bubble {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.65;
  word-break: break-word;
}


.cf-message--ai .cf-msg-bubble {
  background: #fffaf2;
  border: 1px solid rgba(184,146,90,0.22);
  border-bottom-left-radius: 2px;
  color: #2a1f10;
  box-shadow: 0 2px 10px rgba(21,17,14,0.05);
}


.cf-message--user .cf-msg-bubble {
  background: var(--bbw-black);
  border: 1px solid var(--bbw-gold-border-hi);
  color: var(--bbw-gold);
  border-bottom-right-radius: 2px;
  box-shadow: 0 4px 14px rgba(21,17,14,0.18);
  font-weight: 500;
}


.cf-message--ai .cf-msg-bubble strong {
  font-weight: 700;
  color: #a87430;
}


.cf-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--bbw-black);
  border: 1px solid var(--bbw-gold-border-hi);
  color: var(--bbw-gold) !important;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 3px;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  margin: 3px 2px;
  vertical-align: middle;
}

.cf-link-btn:hover {
  background: var(--bbw-gold);
  color: #000 !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(201,150,62,0.40);
}

.cf-msg-time {
  font-size: 0.68rem;
  color: #9e8560;
  margin-top: 4px;
  padding: 0 4px;
}


.cf-product-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
  max-width: 290px;
}

.cf-product-card {
  background: #fffaf2;
  border: 1px solid var(--bbw-gold-border);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(21,17,14,0.05);
  transition: all 0.22s ease;
}

.cf-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(21,17,14,0.12), 0 4px 12px rgba(21,17,14,0.08);
  border-color: var(--bbw-gold-border-hi);
}

.cf-pc-img-wrap {
  width: 100%;
  height: 210px;
  overflow: hidden;
  background: #f0e8d8;
  display: block;
  line-height: 0;
  font-size: 0;
}

.cf-pc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.cf-pc-img:hover { transform: scale(1.04); }

.cf-pc-info { padding: 10px 12px 12px; }

.cf-pc-title {
  font-size: 0.80rem;
  font-weight: 700;
  color: #1e1408;
  line-height: 1.3;
  margin-bottom: 4px;
}

.cf-pc-rating {
  font-size: 0.72rem;
  color: var(--bbw-gold);
  margin-bottom: 5px;
}

.cf-pc-price {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.cf-pc-price-current {
  font-size: 0.95rem;
  font-weight: 800;
  color: #a87430;
}

.cf-pc-price-compare {
  font-size: 0.72rem;
  color: #9e8560;
  text-decoration: line-through;
}

.cf-pc-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-bottom: 3px;
}

.cf-pc-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.20);
  transition: transform 0.18s ease, border-color 0.18s ease;
  flex-shrink: 0;
}

.cf-pc-swatch:hover,
.cf-pc-swatch--active {
  transform: scale(1.25);
  border-color: var(--bbw-gold);
}

.cf-pc-swatch-more {
  font-size: 0.70rem;
  color: #9e8560;
  line-height: 16px;
}

.cf-pc-color-label {
  font-size: 0.70rem;
  color: #7a6545;
  font-style: italic;
  min-height: 14px;
  margin-bottom: 4px;
}

.cf-pc-sizes {
  font-size: 0.70rem;
  color: #7a6545;
  margin-bottom: 4px;
  line-height: 1.4;
}

.cf-pc-sizes strong { color: #1e1408; }

.cf-pc-delivery {
  font-size: 0.70rem;
  color: #16a34a;
  margin-bottom: 8px;
}


.cf-pc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 10px 10px;
  background: var(--bbw-black);
  border: 1px solid var(--bbw-gold-border-hi);
  color: var(--bbw-gold) !important;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 3px;
  text-decoration: none !important;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  box-shadow: 0 3px 10px rgba(21,17,14,0.16);
  margin-top: 4px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.cf-pc-btn:hover {
  background: var(--bbw-gold);
  color: #000 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201,150,62,0.40);
}

.cf-pc-btn svg { flex-shrink: 0; }


.cf-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 4px;
  flex-shrink: 0;
  background: #f7f2ea;
}

.cf-typing-bubble {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff8f0;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(201,150,62,0.25);
  box-shadow: 0 2px 8px rgba(201,150,62,0.08);
}

.cf-typing-bubble span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bbw-gold);
  opacity: 0.45;
  animation: cf-typing-bounce 1.2s infinite;
}

.cf-typing-bubble span:nth-child(2) { animation-delay: 0.2s; }
.cf-typing-bubble span:nth-child(3) { animation-delay: 0.4s; }

@keyframes cf-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.cf-typing p {
  font-size: 0.72rem;
  color: #9e8560;
  margin: 0;
  font-style: italic;
}


.cf-input-area {
  padding: 10px 12px 12px;
  background: #f0e8d8;
  border-top: 1px solid rgba(201,150,62,0.25);
  flex-shrink: 0;
}

.cf-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: #fffaf2;
  border: 1px solid rgba(184,146,90,0.30);
  border-radius: 4px;
  padding: 8px 8px 8px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cf-input-wrapper:focus-within {
  border-color: var(--bbw-gold);
  box-shadow: 0 0 0 3px rgba(201,150,62,0.12);
  background: #fffdf8;
}

#cf-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #2a1f10;
  resize: none;
  outline: none;
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
  padding: 0;
}

#cf-input::placeholder {
  color: #9e8560;
  font-weight: 400;
}


.cf-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 3px;
  border: 1px solid var(--bbw-gold-border-hi);
  background: var(--bbw-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.22s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.20);
}

.cf-send-btn svg { color: var(--bbw-gold); fill: var(--bbw-gold); }

.cf-send-btn:disabled {
  background: #e8e0d4;
  border-color: rgba(201,150,62,0.20);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.5;
}

.cf-send-btn:not(:disabled):hover {
  background: var(--bbw-gold);
  transform: scale(1.1) translateY(-1px);
  box-shadow: 0 6px 20px rgba(201,150,62,0.45);
}

.cf-send-btn:not(:disabled):hover svg { color: #000; fill: #000; }

.cf-send-btn:not(:disabled):active { transform: scale(0.95); }

.cf-subscribe-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.cf-subscribe-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--bbw-gold-border-hi);
  background: linear-gradient(135deg, var(--bbw-gold) 0%, #e8bc6a 100%);
  color: var(--bbw-black);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(201,150,62,0.30);
  transition: all 0.22s ease;
}
.cf-subscribe-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(201,150,62,0.45);
}
.cf-subscribe-btn:active { transform: scale(0.96); }
.cf-subscribe-btn svg { flex-shrink: 0; }

.cf-image-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(184,146,90,0.30);
  background: transparent;
  color: #9e8560;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.cf-image-btn:hover { color: var(--bbw-gold); border-color: var(--bbw-gold); background: rgba(201,150,62,0.08); }

.cf-image-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 8px;
  background: #fffaf2;
  border: 1px solid rgba(184,146,90,0.30);
  border-radius: 8px;
  width: fit-content;
  position: relative;
}
.cf-image-preview img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
}
#cf-image-remove-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--bbw-black);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cf-live-chat-title {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--bbw-gold, #B8925A);
  margin-bottom: 6px;
}

.cf-escalation-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  background: #fffaf2;
  border: 1px solid rgba(184,146,90,0.30);
  border-radius: 10px;
}
.cf-escalation-form input {
  border: 1px solid rgba(184,146,90,0.30);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  background: #fff;
  color: #2a1f10;
  outline: none;
}
.cf-escalation-form input:focus { border-color: var(--bbw-gold); }
.cf-escalation-submit {
  border: 1px solid var(--bbw-gold-border-hi);
  background: var(--bbw-black);
  color: var(--bbw-gold);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cf-escalation-submit:not(:disabled):hover { background: var(--bbw-gold); color: #000; }
.cf-escalation-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.cf-msg-image-wrap { margin-bottom: 4px; }
.cf-msg-image {
  max-width: 160px;
  max-height: 160px;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(184,146,90,0.30);
}

.cf-input-hint {
  font-size: 0.66rem;
  color: #9e8560;
  text-align: center;
  margin: 6px 0 0;
  opacity: 0.7;
}


.cf-contact-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px 0;
}

.cf-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}

.cf-contact-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.cf-contact-btn--whatsapp { background: #25D366; color: #fff; }
.cf-contact-btn--telegram { background: #0088cc; color: #fff; }


.cf-contact-btn--page {
  background: #0d0d0d;
  border: 1.5px solid var(--bbw-gold);
  color: var(--bbw-gold);
  font-weight: 700;
}


.cf-promo-code {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #0d0d0d;
  border: 1.5px solid var(--bbw-gold);
  color: var(--bbw-gold);
  font-family: 'Courier New', Courier, monospace;
  font-weight: 800;
  font-size: 0.82em;
  letter-spacing: 0.10em;
  padding: 3px 9px 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  vertical-align: middle;
  white-space: nowrap;
}

.cf-promo-code:hover {
  background: var(--bbw-gold);
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(201,150,62,0.45);
}

.cf-promo-code:active { transform: translateY(0); }

.cf-promo-code--copied {
  background: #00b894 !important;
  border-color: #00b894 !important;
  box-shadow: 0 2px 6px rgba(0,184,148,0.45) !important;
  color: #fff !important;
}

.cf-promo-copy-icon {
  opacity: 0.80;
  flex-shrink: 0;
  vertical-align: middle;
}


.mind-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(201,150,62,0.08);
  border: 1px solid rgba(201,150,62,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.mind-card-icon i {
  font-size: 22px;
  color: #a87430;
  transition: color 0.25s ease;
}

.mind-card:hover .mind-card-icon {
  background: #0d0d0d;
  border-color: var(--bbw-gold);
  transform: scale(1.1);
}

.mind-card:hover .mind-card-icon i { color: var(--bbw-gold); }


.rtl-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(201,150,62,0.08);
  border: 1px solid rgba(201,150,62,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.rtl-icon i {
  font-size: 24px;
  color: #a87430;
  transition: color 0.25s ease;
}

.rtl-card:hover .rtl-icon {
  background: #0d0d0d;
  border-color: var(--bbw-gold);
}

.rtl-card:hover .rtl-icon i { color: var(--bbw-gold); }


.free-badge {
  display: inline-block;
  background: var(--bbw-black);
  border: 1px solid var(--bbw-gold-border-hi);
  color: var(--bbw-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 9px;
  border-radius: 3px;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  box-shadow: 0 2px 8px rgba(21,17,14,0.18);
  cursor: default;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 6px;
}

.free-badge:hover {
  background: var(--bbw-gold);
  color: var(--bbw-black);
  box-shadow: 0 4px 12px rgba(184,146,90,0.35);
}


.cf-page-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.cf-page-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bbw-black);
  border: 1px solid var(--bbw-gold-border-hi);
  border-radius: 3px;
  color: var(--bbw-gold);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(21,17,14,0.16);
}

.cf-page-btn:hover {
  background: var(--bbw-gold);
  border-color: var(--bbw-gold);
  color: #000;
  box-shadow: 0 4px 16px rgba(201,150,62,0.35);
  transform: translateY(-1px);
}

.cf-page-btn-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.cf-page-btn-label { flex: 1; }

.cf-page-btn-arrow {
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cf-page-btn:hover .cf-page-btn-arrow {
  transform: translateX(4px);
  opacity: 1;
}


.cf-msg-bubble strong { font-weight: 700; }
.cf-msg-bubble em     { font-style: italic; }
.cf-msg-bubble a      { color: #a87430; text-decoration: underline; }


#cf-chat-widget.cf-dragging          { cursor: grabbing !important; }
#cf-chat-widget.cf-dragging *        { cursor: grabbing !important; pointer-events: none; }


@media (max-width: 480px) {
  #cf-chat-widget { bottom: 25px; left: auto; right: 4px; }
  #cf-chat-toggle { left: auto; right: 4px; }

  /* La fenêtre de chat ne suit plus la position du bouton (qui peut être
     déplacé n'importe où par le client) — elle est ancrée à l'écran et
     toujours centrée horizontalement, peu importe où l'icône se trouve. */
  .cf-chat-window {
    position: fixed;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 24px !important;
    transform: translateX(-50%) scale(0.85) translateY(20px);
    transform-origin: bottom center !important;
    width: calc(100vw - 24px);
    max-height: min(72vh, calc(100vh - 120px));
  }
  .cf-chat-window.cf-open {
    transform: translateX(-50%) scale(1) translateY(0);
  }

  #cf-chat-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 0;
  }

  #cf-chat-toggle:hover {
    width: auto;
    max-width: calc(100vw - 16px);
    border-radius: 26px;
    padding: 0 16px 0 5px;
  }

  #cf-chat-toggle.cf-right:hover {
    flex-direction: row-reverse;
    padding: 0 5px 0 16px;
  }
  #cf-chat-toggle.cf-right:hover .cf-toggle-label {
    margin-left: 0;
    margin-right: 8px;
  }

  .cf-pc-img-wrap { height: 190px; }
}



/* ══════════════════════════════════════════════════════
   BBW4LIFE — COOKIE CONSENT — COMPACT BAR + DETAILS MODAL
══════════════════════════════════════════════════════ */

#cf-cookie-popup {
  --ck-gold:      #a87430;
  --ck-gold-dim:  rgba(168, 116, 48, 0.12);
  --ck-surface:   #f7f2ea;
  --ck-border:    rgba(201, 150, 62, 0.20);
  --ck-text:      #1e1408;
  --ck-muted:     #7a6545;
  --ck-radius:    16px;
  --ck-radius-sm: 11px;
}

#cf-cookie-popup {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
#cf-cookie-popup.cfck-visible { opacity: 1; pointer-events: all; }
#cf-cookie-popup.cfck-hiding  { opacity: 0; pointer-events: none; }


/* ══════════════════════════════
   COMPACT BAR — default state
══════════════════════════════ */
#cf-cookie-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 16px;
  background: var(--ck-surface);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--ck-border);
  border-bottom: none;
  border-radius: var(--ck-radius) var(--ck-radius) 0 0;
  box-shadow:
    0 0 0 1px rgba(255,248,240,0.70) inset,
    0 -18px 50px rgba(0,0,0,0.14);
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(0.34,1.46,0.64,1);
  flex-wrap: wrap;
}
#cf-cookie-popup.cfck-visible #cf-cookie-bar { transform: translateY(0); }
#cf-cookie-popup.cfck-modal-open #cf-cookie-bar { transform: translateY(100%); }

@keyframes cfck-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.cfck-bar-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #0d0d0d;
  border: 1px solid rgba(201,150,62,0.50);
  color: var(--ck-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.16), 0 0 0 1px rgba(201,150,62,0.12) inset;
}

.cfck-bar-text {
  flex: 1;
  min-width: 220px;
  font-size: 0.80rem;
  color: var(--ck-muted);
  line-height: 1.5;
  margin: 0;
}

.cfck-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cfck-close-x {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(201,150,62,0.24);
  background: transparent;
  color: var(--ck-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.cfck-close-x:hover {
  color: #c9963e;
  border-color: #c9963e;
  background: var(--ck-gold-dim);
}


/* ══════════════════════════════
   CONFIRM STRIP (inside the bar)
══════════════════════════════ */
.cfck-confirm {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ck-gold);
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.35s ease, margin 0.3s ease;
}
.cfck-confirm--visible {
  opacity: 1;
  max-height: 40px;
  margin-top: 8px;
}


/* ══════════════════════════════
   DETAILS MODAL — opened via "Customize"
══════════════════════════════ */
#cf-cookie-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(30,20,8,0.35);
  backdrop-filter: blur(6px) saturate(1.4);
  -webkit-backdrop-filter: blur(6px) saturate(1.4);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#cf-cookie-popup.cfck-modal-open #cf-cookie-overlay { opacity: 1; pointer-events: all; }

#cf-cookie-modal {
  position: fixed;
  z-index: 3;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 24px);
  width: calc(100% - 24px);
  max-width: 560px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--ck-surface);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius);
  box-shadow:
    0 0 0 1px rgba(255,248,240,0.80) inset,
    0 40px 80px rgba(0,0,0,0.18),
    0 0 60px rgba(201,150,62,0.08);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.34,1.46,0.64,1), opacity 0.3s ease;
}
#cf-cookie-modal::-webkit-scrollbar { display: none; }
#cf-cookie-popup.cfck-modal-open #cf-cookie-modal {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, 0);
}

.cfck-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  background: #f0e8d8;
  border-bottom: 1px solid rgba(201,150,62,0.18);
  position: sticky;
  top: 0;
}
.cfck-header-left { display: flex; align-items: center; gap: 12px; }

.cfck-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #0d0d0d;
  border: 1px solid rgba(201,150,62,0.50);
  color: var(--ck-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 0 0 1px rgba(201,150,62,0.12) inset;
}

.cfck-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ck-text);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.cfck-subtitle {
  font-size: 0.72rem;
  color: var(--ck-gold);
  margin: 0;
  font-weight: 600;
  opacity: 0.90;
}

.cfck-modal-close-x {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(201,150,62,0.30);
  background: #0d0d0d;
  color: rgba(201,150,62,0.70);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s ease;
  flex-shrink: 0;
}
.cfck-modal-close-x:hover {
  color: #c9963e;
  border-color: #c9963e;
  transform: rotate(90deg) scale(1.08);
}

.cfck-body { padding: 14px 20px 6px; }
.cfck-link {
  color: var(--ck-gold);
  text-decoration: underline;
  text-decoration-color: rgba(168,116,48,0.40);
  text-underline-offset: 3px;
  transition: color 0.2s;
  font-weight: 600;
}
.cfck-link:hover { color: #c9963e; }

.cfck-panels { display: flex; flex-direction: column; gap: 7px; }

.cfck-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  background: #fff8f0;
  border: 1px solid rgba(201,150,62,0.20);
  border-radius: var(--ck-radius-sm);
  transition: border-color 0.22s, background 0.22s, box-shadow 0.22s;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.cfck-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.50) 0%, transparent 60%);
  pointer-events: none;
}
.cfck-panel:hover {
  border-color: rgba(201,150,62,0.40);
  background: #fffdf8;
  box-shadow: 0 4px 24px rgba(201,150,62,0.10);
}
.cfck-panel--required {
  background: #fffcf4;
  border-color: rgba(201,150,62,0.30);
}
.cfck-panel--required:hover {
  background: #fffdf8;
  border-color: rgba(201,150,62,0.48);
  box-shadow: 0 4px 24px rgba(201,150,62,0.12);
}

.cfck-panel-left { display: flex; align-items: flex-start; gap: 11px; flex: 1; min-width: 0; }

.cfck-panel-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #0d0d0d;
  color: #c9963e;
  border: 1px solid rgba(201,150,62,0.38);
}

.cfck-panel-name {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ck-text);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.cfck-panel-desc {
  display: block;
  font-size: 0.72rem;
  color: var(--ck-muted);
  line-height: 1.45;
}

.cfck-always-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ck-gold);
  background: #0d0d0d;
  border: 1px solid rgba(201,150,62,0.45);
  border-radius: 30px;
  padding: 4px 10px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.cfck-toggle { position: relative; cursor: pointer; flex-shrink: 0; }
.cfck-toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.cfck-toggle-track {
  display: block;
  width: 42px;
  height: 23px;
  border-radius: 12px;
  background: rgba(168,116,48,0.15);
  border: 1px solid rgba(168,116,48,0.28);
  position: relative;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.cfck-toggle input:checked + .cfck-toggle-track {
  background: #0d0d0d;
  border-color: #c9963e;
  box-shadow: 0 0 12px rgba(201,150,62,0.30);
}
.cfck-toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,0.20);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.cfck-toggle input:checked + .cfck-toggle-track .cfck-toggle-thumb {
  transform: translateX(19px);
  background: #c9963e;
}
.cfck-toggle:hover .cfck-toggle-track { border-color: rgba(201,150,62,0.55); }


/* ══════════════════════════════
   BUTTONS — shared by bar + modal
══════════════════════════════ */
.cfck-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px 18px;
  flex-wrap: wrap;
  background: #f0e8d8;
  border-top: 1px solid rgba(201,150,62,0.18);
  position: sticky;
  bottom: 0;
}

.cfck-btn {
  flex: 1;
  min-width: 92px;
  height: 38px;
  border-radius: 50px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.22s ease;
  letter-spacing: 0.01em;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.cfck-btn--ghost {
  background: #e8e0d0;
  color: #9e8560;
  border: 1px solid rgba(201,150,62,0.22);
}
.cfck-btn--ghost:hover {
  background: #ddd5c5;
  color: #6b5435;
  border-color: rgba(201,150,62,0.38);
}

.cfck-btn--outline {
  background: #0d0d0d;
  color: #c9963e;
  border: 1.5px solid #c9963e;
}
.cfck-btn--outline:hover {
  background: #c9963e;
  color: #000;
  box-shadow: 0 4px 16px rgba(201,150,62,0.30);
}

.cfck-btn--primary {
  background: #0d0d0d;
  color: #c9963e;
  border: 1.5px solid #c9963e;
  box-shadow: 0 4px 20px rgba(0,0,0,0.20), 0 0 0 1px rgba(201,150,62,0.15) inset;
}
.cfck-btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(201,150,62,0.10), transparent);
  background-size: 200% 100%;
  animation: cfck-shimmer 3s linear infinite;
  border-radius: 50px;
}
.cfck-btn--primary:hover {
  background: #c9963e;
  color: #000;
  box-shadow: 0 8px 30px rgba(201,150,62,0.38);
  transform: translateY(-2px);
}
.cfck-btn--primary:active { transform: translateY(0); box-shadow: 0 4px 16px rgba(201,150,62,0.25); }


/* ══════════════════════════════════════════════════════
   MOBILE
══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #cf-cookie-bar {
    border-radius: 14px 14px 0 0;
    padding: 12px;
    gap: 10px;
  }
  .cfck-bar-text { font-size: 0.76rem; min-width: 100%; order: 3; }
  .cfck-bar-icon { width: 34px; height: 34px; }
  .cfck-bar-actions { width: 100%; order: 4; flex-wrap: wrap; }
  .cfck-bar-actions .cfck-btn { min-width: 30%; }

  #cf-cookie-modal {
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 16px 16px 0 0;
    transform: translate(-50%, 100%);
  }
  #cf-cookie-popup.cfck-modal-open #cf-cookie-modal {
    transform: translate(-50%, 0);
  }

  .cfck-header { padding: 14px 16px 10px; }
  .cfck-body { padding: 10px 16px 6px; }
  .cfck-footer {
    padding: 12px 16px 16px;
    flex-direction: column;
    gap: 8px;
  }
  .cfck-footer .cfck-btn {
    width: 100%;
    flex: none;
    height: 46px;
    font-size: 0.86rem;
  }
  .cfck-footer .cfck-btn--primary { order: 1; }
  .cfck-footer .cfck-btn--outline { order: 2; }
  .cfck-footer .cfck-btn--ghost   { order: 3; }

  .cfck-icon-wrap { width: 38px; height: 38px; }
  .cfck-title { font-size: 0.96rem; }
  .cfck-panel { padding: 10px 11px; }
  .cfck-panel-icon { width: 28px; height: 28px; }
}




@keyframes rc-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes rc-slidein {
    from { opacity: 0; transform: translateY(24px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rc-slideout {
    to { opacity: 0; transform: translateY(16px) scale(0.93); }
}

@keyframes rc-urgency-drain {
    from { width: 100%; }
    to   { width: 0%; }
}

@keyframes rc-glow-pulse {
    0%, 100% {
        box-shadow:
            0 4px 6px rgba(0,0,0,0.06),
            0 12px 44px rgba(180,130,60,0.18),
            0 0 0 1px rgba(180,130,60,0.20),
            -1px 0 0 rgba(180,130,60,0.25);
    }
    50% {
        box-shadow:
            0 4px 6px rgba(0,0,0,0.08),
            0 16px 56px rgba(180,130,60,0.28),
            0 0 40px rgba(180,130,60,0.12),
            0 0 0 1px rgba(180,130,60,0.30),
            -1px 0 0 rgba(180,130,60,0.35);
    }
}

@keyframes rc-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(180,130,60,0.30); }
    50%       { box-shadow: 0 0 0 4px rgba(180,130,60,0); }
}

@keyframes rc-btn-shimmer {
    0%   { left: -75%; }
    100% { left: 160%; }
}

@keyframes rc-top-bar {
    0%   { background-position: -200% 0; opacity: 0.85; }
    50%  { background-position: 0% 0;    opacity: 1; }
    100% { background-position: 200% 0;  opacity: 0.85; }
}


#rc-popup-container {
    position: fixed;
    z-index: 1001;
    pointer-events: none;
}

#rc-popup-container.rc-pos-bottom-right { bottom: 28px; right: 28px; }
#rc-popup-container.rc-pos-bottom-left  { bottom: 28px; left: 28px; }
#rc-popup-container.rc-pos-top-right    { top: 95px; right: 28px; }
#rc-popup-container.rc-pos-top-left     { top: 95px; left: 28px; }


#rc-popup {
    pointer-events: all;
    background: linear-gradient(160deg,
        #fdf8f0 0%,
        #faf3e8 55%,
        #f7ede0 100%
    );
    border: 1px solid rgba(180,130,60,0.28);
    border-radius: 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-width: 310px;
    width: 100%;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 4px 6px rgba(0,0,0,0.04),
        0 12px 44px rgba(180,130,60,0.15),
        0 0 0 1px rgba(180,130,60,0.14);
    animation: rc-slidein 0.5s cubic-bezier(0.22,1,0.36,1) both, rc-glow-pulse 4s ease-in-out 0.6s infinite;
}


#rc-popup::before {
    content: '';
    display: block;
    height: 3px;
    width: 100%;
    flex-shrink: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        #a07828 10%,
        #c9963e 30%,
        #e8bc6a 50%,
        #c9963e 70%,
        #a07828 90%,
        transparent 100%);
    background-size: 200% 100%;
    animation: rc-top-bar 3s ease-in-out infinite;
}


#rc-popup::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 120px; height: 120px;
    background: radial-gradient(ellipse at top right,
        rgba(201,150,62,0.10) 0%,
        transparent 65%);
    pointer-events: none;
}

#rc-popup.rc-hiding {
    animation: rc-slideout 0.38s cubic-bezier(0.4,0,1,1) forwards;
}


#rc-popup-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 6px 14px;
    position: relative;
    z-index: 1;
}


#rc-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(180,130,60,0.08);
    border: 1px solid rgba(180,130,60,0.22);
    cursor: pointer;
    padding: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(140,100,30,0.55);
    transition: all 0.25s ease;
    z-index: 2;
}
#rc-close:hover {
    background: rgba(180,130,60,0.15);
    border-color: rgba(180,130,60,0.45);
    color: #8a6318;
    transform: rotate(90deg);
}


#rc-avatar-wrap {
    flex-shrink: 0;
    position: relative;
}

#rc-avatar-img,
#rc-avatar-video {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(180,130,60,0.45);
    box-shadow:
        0 0 0 3px rgba(180,130,60,0.12),
        0 4px 14px rgba(0,0,0,0.12);
}


#rc-avatar-wrap::after {
    content: '';
    position: absolute;
    bottom: 3px; right: 3px;
    width: 10px; height: 10px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid #fdf8f0;
    box-shadow: 0 0 6px rgba(34,197,94,0.50);
}


#rc-content {
    flex: 1;
    min-width: 0;
    padding-right: 20px;
}

#rc-subtitle {
    font-size: 10px;
    color: #8a6318;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 3px;
    font-family: 'DM Sans', sans-serif;
}

#rc-title {
    font-size: 13px;
    font-weight: 700;
    color: #2a1f0e;
    margin: 0 0 3px;
    line-height: 1.35;
    font-family: 'DM Sans', sans-serif;
}

#rc-description {
    font-size: 11px;
    color: rgba(40,25,10,0.55);
    margin: 0;
    line-height: 1.50;
    font-family: 'DM Sans', sans-serif;
}


#rc-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(180,130,60,0.10);
    border: 1px solid rgba(180,130,60,0.30);
    color: #7a5210;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
    margin: 8px 14px 0;
    width: fit-content;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 0.03em;
    animation: rc-badge-pulse 2.5s ease-in-out infinite;
}
#rc-count-badge svg { flex-shrink: 0; }


#rc-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: linear-gradient(135deg,
        #1a1208 0%,
        #0d0d0d 40%,
        #1a1208 100%);
    background-size: 300% 100%;
    color: #e8bc6a;
    border: 1.5px solid rgba(201,150,62,0.65);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 11px 16px;
    margin: 10px 12px 12px;
    border-radius: 100px;
    text-decoration: none;
    transition: background-position 0.5s ease, transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow:
        0 4px 20px rgba(0,0,0,0.25),
        0 0 0 0 rgba(201,150,62,0),
        0 1px 0 rgba(255,255,255,0.05) inset;
    position: relative;
    overflow: hidden;
    font-family: 'DM Sans', sans-serif;
}


#rc-checkout-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(232,188,106,0.20),
        transparent);
    animation: rc-btn-shimmer 2.2s ease-in-out infinite;
    pointer-events: none;
}

#rc-checkout-btn:hover {
    background-position: 100% 0;
    transform: translateY(-2px);
    color: #f5d080;
    box-shadow:
        0 10px 32px rgba(0,0,0,0.35),
        0 0 24px rgba(201,150,62,0.25),
        0 0 0 1.5px rgba(201,150,62,0.80);
}
#rc-checkout-btn:active {
    transform: scale(0.97);
}


#rc-urgency-bar {
    height: 3px;
    background: rgba(180,130,60,0.12);
    margin: 0 12px 10px;
    border-radius: 50px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

#rc-urgency-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg,
        #8a6318 0%,
        #c9963e 50%,
        #e8bc6a 100%);
    border-radius: 50px;
    animation: rc-urgency-drain linear forwards;
    box-shadow: 0 0 8px rgba(201,150,62,0.35);
}


@media (max-width: 480px) {
    #rc-popup-container.rc-pos-bottom-right { bottom: 14px; right: 10px; left: auto; }
    #rc-popup-container.rc-pos-bottom-left  { bottom: 14px; left: 10px; right: auto; }
    #rc-popup-container.rc-pos-top-right    { top: 78px; right: 10px; left: auto; }
    #rc-popup-container.rc-pos-top-left     { top: 78px; left: 10px; right: auto; }

    #rc-popup {
        max-width: 210px;
        border-radius: 15px;
    }

    #rc-popup-body {
        padding: 8px 10px 3px 10px;
        gap: 8px;
    }

    #rc-avatar-img,
    #rc-avatar-video {
        width: 30px;
        height: 30px;
    }

    #rc-subtitle    { font-size: 8px;   margin-bottom: 1px; }
    #rc-title       { font-size: 10px;  margin-bottom: 1px; }
    #rc-description { font-size: 8.5px; }

    #rc-count-badge {
        font-size: 8px;
        padding: 2px 6px;
        margin: 5px 10px 0;
    }

    #rc-checkout-btn {
        font-size: 9.5px;
        padding: 8px 10px;
        margin: 6px 8px 8px;
    }

    #rc-urgency-bar {
        height: 2px;
        margin: 0 8px 8px;
    }

    #rc-close {
        top: 8px;
        right: 8px;
        width: 18px;
        height: 18px;
    }
}





#snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99998;
  overflow: hidden;
}

.snow-el {
  position: absolute;
  top: -60px;
  pointer-events: none;
  animation: snow-fall linear infinite;
  will-change: transform;
  user-select: none;
}

@keyframes snow-fall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(110vh) translateX(var(--snow-drift, 30px)) rotate(360deg);
    opacity: 0;
  }
}

.account-icon-wrapper {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
}

.account-icon-wrapper i {
  font-size: 20px;
  color: var(--primary-color, #e91e8c);
  transition: transform 0.2s ease, color 0.2s ease;
}

.account-icon-wrapper:hover i {
  transform: scale(1.15);
}



/* ================================================================
   SKELETON SCREENS — placeholders imitant la structure réelle des
   zones remplies dynamiquement (script.js/products.js), affichés
   entre la disparition du preloader global et l'injection du vrai
   contenu (voir src/components/skeleton.js). Même motif shimmer que
   l'existant (.ac-skeleton dans collections.css, .cp-item-skeleton
   dans cart.css) pour rester cohérent visuellement avec le site.
================================================================ */
.skel-shimmer {
  background: linear-gradient(
    90deg,
    var(--bbw-gold-pale) 25%,
    var(--bbw-gold-pale-mid) 50%,
    var(--bbw-gold-pale) 75%
  );
  background-size: 400% 100%;
  animation: bbwSkelShimmer 1.6s ease-in-out infinite;
}

@keyframes bbwSkelShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.skel-abs-fill {
  position: absolute;
  inset: 0;
}

.skel-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.skel-line {
  height: 12px;
  border-radius: 4px;
  margin: 6px 0;
}

.skel-line--sm { height: 9px; width: 65%; }
.skel-line--xs { height: 8px; width: 46px; border-radius: 3px; margin: 6px 0 0; }

.skel-card-body { padding: 10px; }

.skel-thumb-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
}

/* Cartes/éléments en état skeleton : pas d'interactions, animations de
   hover réelles désactivées le temps que le vrai contenu arrive. */
/* Ne PAS mettre animation-play-state:paused ici : plusieurs composants
   réels (ex: .story-circle-item, animation sc-entrance) utilisent une
   animation d'ENTRÉE (fade-in depuis opacity:0) — la mettre en pause fige
   l'élément invisible à son état de départ pour toujours, ce qui rendait
   le skeleton invisible. On coupe seulement les interactions/transitions
   de survol, pas les animations elles-mêmes. */
.is-skeleton {
  pointer-events: none !important;
}
.is-skeleton:hover { transform: none !important; box-shadow: none !important; }

.is-skeleton-thumb { position: relative; background: var(--bbw-gold-pale); }
.is-skeleton-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bbw-gold-pale) 25%, var(--bbw-gold-pale-mid) 50%, var(--bbw-gold-pale) 75%);
  background-size: 400% 100%;
  animation: bbwSkelShimmer 1.6s ease-in-out infinite;
}

/* Texte du hero encore vide : on masque le texte réel (vide de toute
   façon) et on affiche une ligne shimmer à sa place, sans changer sa
   boîte englobante (même hauteur de ligne réservée par le CSS d'origine
   du hero — pas de saut de layout à l'arrivée du vrai texte). */
.skel-text-loading {
  position: relative;
  color: transparent !important;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.06) 25%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.06) 75%
  );
  background-size: 400% 100%;
  animation: bbwSkelShimmer 1.6s ease-in-out infinite;
}
.skel-text-loading::before {
  content: '\00a0';
}

/* Variante pour les compteurs statistiques inline (data-stat-text) sur
   fond clair — même motif que .skel-shimmer plutôt que la teinte
   blanche pensée pour le hero sombre. */
.skel-text-loading--inline {
  background: linear-gradient(
    90deg,
    var(--bbw-gold-pale) 25%,
    var(--bbw-gold-pale-mid) 50%,
    var(--bbw-gold-pale) 75%
  );
  background-size: 400% 100%;
}

/* Skeleton du header, présent dans le HTML statique de chaque page
   pendant que src/components/header.html est fetché (layout-loader.js).
   Même hauteur que le header réel (--ann-bar-h + --bbw-header-h,
   header.css) pour ne jamais provoquer de saut de layout.
   header.css pose "body { padding-top: var(--bbw-total-top) }" pour
   réserver l'espace du header réel une fois chargé (position:fixed).
   Ce skeleton, lui, est dans le flux normal — sans ce margin-top négatif,
   le padding du body s'ajoute à sa hauteur et crée un grand espace noir
   vide au-dessus de lui pendant le chargement. Le margin le remonte pour
   qu'il occupe exactement l'espace réservé par ce padding. */
.skel-header-placeholder {
  height: calc(var(--ann-bar-h, 40px) + var(--promo-bar-h, 27px) + var(--bbw-header-h, 84px));
  margin-top: calc(-1 * var(--bbw-total-top, 187px));
  background: var(--bbw-black, #15110E);
  display: flex;
  flex-direction: column;
}
.skel-header-placeholder__ann {
  height: var(--ann-bar-h, 40px);
  flex-shrink: 0;
}
.skel-header-placeholder__promo {
  height: var(--promo-bar-h, 27px);
  flex-shrink: 0;
  background: rgba(255,255,255,0.03);
}
.skel-header-placeholder__main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 16px;
}
.skel-header-placeholder__burger {
  width: 24px;
  height: 18px;
  border-radius: 3px;
  flex-shrink: 0;
}
.skel-header-placeholder__logo {
  width: 140px;
  height: 36px;
  border-radius: 4px;
}
.skel-header-placeholder__icons {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.skel-header-placeholder__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
@media (max-width: 768px) {
  .skel-header-placeholder__logo { width: 100px; height: 28px; }
  .skel-header-placeholder__icon { width: 26px; height: 26px; }
}

/* Skeleton du footer — contenu en bas de page, peu visible pendant le
   chargement initial (au-delà du viewport) : un bloc de hauteur
   approximative suffit à éviter le grand saut de layout sans reproduire
   chaque colonne du footer réel (5 colonnes + bannière promo + bas de
   page, cf. src/components/footer.html). */
.skel-footer-placeholder {
  height: 480px;
}
@media (max-width: 768px) {
  .skel-footer-placeholder { height: 620px; }
}







/* ============================================================
   SEARCH GLOBAL — bbw-search.css — ULTRA PREMIUM
   Palette : fond crème ivoire · bordure or · icônes or
             section header fond noir · texte or
   ============================================================ */
.bbw-search-dropdown {
  position: fixed;
  z-index: 999999;
  background: linear-gradient(160deg, #fdf8f0 0%, #faf4e8 50%, #f7f0e2 100%);
  border: 1.5px solid rgba(201, 160, 62, 0.55);
  border-radius: 18px;
  box-shadow:
    0 24px 64px rgba(30, 18, 8, 0.38),
    0 4px 20px rgba(201, 160, 62, 0.18),
    0 0 0 1px rgba(255, 248, 220, 0.80) inset;
  overflow: hidden;
  min-width: 370px;
  max-width: 500px;
  max-height: 440px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: none;
  font-family: inherit;
}

.bbw-search-dropdown::-webkit-scrollbar {
  display: none;
}

.bbw-search-dropdown.open {
  display: block;
  animation: searchFadeIn .18s ease;
}

/* Search results page only: the dropdown must stay BELOW the fixed header
   (z-index:1000) when scrolling, unlike everywhere else on the site where
   it needs to float above all page content. Header itself is untouched. */
body.sr-page .bbw-search-dropdown {
  z-index: 998;
}

@keyframes searchFadeIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}



.bbw-search-header {
  padding: 10px 16px 6px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .20em;
  color: #c9a03e;
  background: linear-gradient(90deg, #111008 0%, #1c1608 100%);
  border-bottom: 1px solid rgba(201, 160, 62, 0.30);
  border-top: 1px solid rgba(201, 160, 62, 0.15);
}
.bbw-search-header:first-child {
  border-top: none;
}


.bbw-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 12px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(201, 160, 62, 0.12);
  transition: background .15s ease;
  text-decoration: none;
  color: inherit;
  overflow-x: hidden;
}

.bbw-search-item:last-child {
  border-bottom: none;
}

.bbw-search-item:hover,
.bbw-search-item.active {
  background: linear-gradient(90deg, rgba(201, 160, 62, 0.10), rgba(30, 18, 8, 0.05));
}


.bbw-search-icon {
  font-size: 16px;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
  color: #c9a03e;
}

.bbw-search-icon i {
  color: #c9a03e !important;
}

/* Real product thumbnail (from products.data.json) shown next to the
   type icon, to the left of the title — products only. */
.bbw-search-thumb {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(201, 160, 62, 0.25);
  background: #fff;
}
.bbw-search-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.bbw-search-text {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  padding-right: 10px;
}

.bbw-search-title {
  font-size: 13.5px;
  font-weight: 500;
  color: #1c1206;
  white-space: normal;
  overflow-x: hidden;
  word-break: break-word;
  line-height: 1.45;
  display: block;
}


.bbw-search-title mark {
  background: rgba(201, 160, 62, 0.18);
  color: #a07820;
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 700;
  font-style: normal;
}


.bbw-search-price {
  font-size: 12px;
  font-weight: 600;
  color: #c9a03e;
  display: block;
  margin-top: 2px;
}


.bbw-search-badge {
  font-size: 9.5px;
  font-weight: 600;
  color: #c9a03e;
  background: #111008;
  border: 1px solid rgba(201, 160, 62, 0.45);
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .06em;
  line-height: 1;
  align-self: flex-start;
  margin-top: 2px;
}


.bbw-search-empty {
  padding: 22px 18px;
  font-size: 13px;
  color: #a09070;
  text-align: center;
}

@media (max-width: 480px) {
  .bbw-search-dropdown {
    min-width: unset !important;
    max-width: unset !important;
    left: 8px !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
  }
}



/* ══════════════════════════════════════════════════════════════
   SECTION BASE — fond chaud ambré ultra premium
══════════════════════════════════════════════════════════════ */
.featured-spotlight-section {
  padding: 36px 0;
  background: #fff;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--bbw-gold-border);
  border-bottom: 1px solid var(--bbw-gold-border);
}


.fs-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
}
.fs-orb--1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(184,146,90,0.12) 0%, transparent 70%);
  top: -100px; left: -80px;
}
.fs-orb--2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(110,36,57,0.08) 0%, transparent 70%);
  bottom: -80px; right: -60px;
}
.fs-orb--3 { display: none; }


.fs-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* ══════════════════════════════════════════════════════════════
   MEDIA — IMAGE
══════════════════════════════════════════════════════════════ */
.fs-media { position: relative; }


.fs-badge-float {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--bbw-black);
  color: var(--bbw-gold);
  font-size: 10px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 2px;
  z-index: 3;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}


.fs-img-frame {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: #fff !important;
  box-shadow: 0 12px 40px rgba(21,17,14,0.10);
  transition: transform 0.4s ease;
  padding-top: 10px;
  box-sizing: border-box;
}
.fs-img-frame:hover {
  transform: translateY(-4px);
}

.fs-img-shine { display: none; }

.fs-main-img {
  width: 100%;
  height: 340px;
  object-fit: contain;
  border-radius: 4px;
  display: block;
  background: #fff;
  transition: transform 0.5s ease;
}
.fs-img-frame:hover .fs-main-img {
  transform: scale(1.02);
}


.fs-mini-gallery {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.fs-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: 12px;
  cursor: pointer;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #15110E;
  background:
    linear-gradient(160deg, #ffffff 0%, #fdf9f2 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 6px 16px rgba(21,17,14,0.07);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), border-color 0.28s ease, box-shadow 0.28s ease;
}
.fs-thumb:hover {
  border-color: var(--bbw-gold);
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 12px 26px rgba(184,146,90,0.26);
}
.fs-thumb--active {
  border-color: var(--bbw-gold) !important;
  background:
    linear-gradient(160deg, #fffdf8 0%, #faf1de 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 0 0 3px rgba(184,146,90,0.16),
    0 12px 28px rgba(184,146,90,0.32) !important;
}

/* ══════════════════════════════════════════════════════════════
   CONTENT — partie droite
══════════════════════════════════════════════════════════════ */
.fs-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.fs-category {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bbw-gold);
  background: var(--bbw-black);
  border: 1px solid var(--bbw-gold-border);
  padding: 5px 16px;
  border-radius: 2px;
  width: fit-content;
}


.fs-title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  font-style: italic;
  line-height: 1.15;
  margin: 0;
  font-family: var(--font-display);
  color: var(--bbw-black);
}
.fs-title span,
.fs-title em {
  color: var(--bbw-gold);
  font-style: italic;
}


.fs-rating {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fs-stars {
  color: #00b67a;
  font-size: 22px;
  letter-spacing: 2px;
  line-height: 1;
  display: inline-block;
  min-width: 1em;
}
.fs-stars:empty::before {
  content: '★★★★★';
  color: #00b67a;
}


.fs-stars .unique-star {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
}
.fs-stars .unique-star::before {
  content: '★';
  color: #d4d4d4;
}
.fs-stars .unique-star.full::before {
  content: '★';
  color: #00b67a;
}
.fs-stars .unique-star.half::before {
  content: '★';
  background: linear-gradient(90deg, #00b67a 50%, #d4d4d4 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


.fs-count {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(21,17,14,0.55);
  font-weight: 500;
}


.fs-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.fs-price {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--bbw-black);
  line-height: 1;
}
.fs-compare {
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(21,17,14,0.38);
  text-decoration: line-through;
}


.fs-discount-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  background: #F6EFE5;
  color: var(--bbw-gold);
  border: 1px solid var(--bbw-gold);
  padding: 5px 14px;
  border-radius: 2px;
  letter-spacing: 0.03em;
}


.fs-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(21,17,14,0.72);
  background: transparent;
  line-height: 1.80;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--bbw-gold-border);
  padding-left: 16px;
}


.fs-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  padding: 0;
  background: transparent;
  border: none;
}
.fs-feat {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--bbw-black) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fs-feat::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bbw-gold);
  flex-shrink: 0;
}


.fs-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}


.fs-btn-primary {
  display: inline-block;
  font-family: var(--font-body);
  background: var(--bbw-black);
  color: var(--bbw-gold);
  font-weight: 600;
  font-size: 13px;
  padding: 15px 32px;
  border-radius: 2px;
  border: 1px solid var(--bbw-gold);
  text-decoration: none;
  letter-spacing: 0.10em;
  transition: background 0.25s ease, color 0.25s ease;
  text-transform: uppercase;
}

.fs-btn-primary:hover {
  background: var(--bbw-gold);
  color: var(--bbw-black);
}

.fs-btn-primary:active {
  transform: translateY(1px);
}


.fs-stock {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(21,17,14,0.55);
  font-weight: 500;
}
.fs-stock strong {
  color: var(--bbw-rose);
  font-weight: 700;
}
/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .fs-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .fs-main-img { height: 320px; }
  .fs-title    { font-size: 24px; }
  .fs-price    { font-size: 28px; }
}

@media (max-width: 480px) {
  .featured-spotlight-section { padding: 10px 0 !important; }
  .fs-inner { padding: 0 10px !important; }
  .fs-main-img { height: 280px; }
  .fs-thumb    { width: 84px; height: 84px; padding: 6px; border-radius: 10px; }
  .fs-features { grid-template-columns: 1fr; }
  .fs-title    { font-size: 20px; }
  .fs-btn-primary { font-size: 14px; padding: 13px 24px; }
}


.bar-separator-section {
  width: 100%;
  box-sizing: border-box;
  z-index: 100;
}
.bar-separator-line {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}




/* ═══════════════════════════
   SECTION WRAPPER — Fond blanc pâle premium
═══════════════════════════ */
.jrgq-section {
  position: relative;
  background: #fdfaf5;
  overflow: hidden;
  isolation: isolate;
}


/* ═══════════════════════════
   EYEBROW — FOND NOIR, TEXTE OR
═══════════════════════════ */
.jrgq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bbw-gold);
  background: var(--bbw-black);
  border: 1px solid var(--bbw-gold-border);
  border-radius: 2px;
  padding: 7px 22px;
  margin-bottom: 18px;
  position: relative;
}

.jrgq-eyebrow-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bbw-gold-vivid);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   GALLERY BLOCK
═══════════════════════════════════════ */
.jrgq-gallery-block {
  padding: 64px 20px 5px;
  position: relative;
  z-index: 2;
  text-align: center;
}

.jrgq-gallery-header {
  max-width: 640px;
  margin: 0 auto 38px;
}

.jrgq-gallery-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 600;
  font-style: italic;
  color: var(--bbw-black);
  line-height: 1.1;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.jrgq-gallery-title em {
  font-style: italic;
  color: var(--bbw-gold);
}
.jrgq-gallery-sub {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(21,17,14,0.55);
  line-height: 1.65;
  margin: 0;
}


.jrgq-gallery-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 1.5fr 1fr;
  grid-template-rows: minmax(300px, 360px) minmax(280px, 340px);
  gap: 14px;
  max-width: 100%;
  margin: 0 auto;
}

.jrgq-gal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jrgq-gal-item--1 { grid-column: 1; grid-row: 1; }
.jrgq-gal-item--2 { grid-column: 2; grid-row: 1; }
.jrgq-gal-item--3 { grid-column: 3 / 5; grid-row: 1 / 3; }
.jrgq-gal-item--4 { grid-column: 5; grid-row: 1; }
.jrgq-gal-item--5 { grid-column: 1; grid-row: 2; }
.jrgq-gal-item--6 { grid-column: 2; grid-row: 2; }
.jrgq-gal-item--7 { grid-column: 5; grid-row: 2; }

.jrgq-gal-item {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--bbw-gold-border);
  transition: transform 0.38s ease, box-shadow 0.38s ease, border-color 0.28s;
  box-shadow: 0 4px 20px rgba(21,17,14,0.08);
}

.jrgq-gal-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(21,17,14,0.16);
  border-color: var(--bbw-gold);
  z-index: 3;
}
.jrgq-gal-item--featured {
  border-color: var(--bbw-gold);
}
.jrgq-gal-item--featured:hover {
  box-shadow: 0 28px 70px rgba(21,17,14,0.18);
}

.jrgq-gal-img-wrap {
  position: relative;
  width: 100%;
  height: 100% !important;
}
.jrgq-gal-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), filter 0.4s;
  filter: brightness(0.88) saturate(1.05);
}
.jrgq-gal-item:hover .jrgq-gal-img {
  transform: scale(1.07);
  filter: brightness(0.96) saturate(1.15);
}

.jrgq-gal-gradient {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80%;
  background: linear-gradient(to top,
    rgba(20,10,3,0.90) 0%,
    rgba(20,10,3,0.62) 45%,
    rgba(20,10,3,0.22) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* La carte "featured" a beaucoup plus de texte (titre, citation, CTA)
   qui déborde souvent au-dessus de la zone couverte par le gradient
   standard — overlay renforcé et étendu sur toute la carte pour
   garantir un contraste correct quel que soit le contenu de la photo. */
.jrgq-gal-item--featured .jrgq-gal-gradient {
  height: 100%;
  background: linear-gradient(to top,
    rgba(15,8,3,0.92) 0%,
    rgba(15,8,3,0.60) 40%,
    rgba(15,8,3,0.22) 70%,
    rgba(15,8,3,0.08) 100%
  );
}

.jrgq-gal-shimmer { display: none; }

.jrgq-gal-featured-badge {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: var(--bbw-gold);
  color: var(--bbw-black);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 2px;
  white-space: nowrap;
}

.jrgq-gal-badge {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 4;
  background: rgba(21,17,14,0.55);
  border: 1px solid rgba(255,255,255,0.30);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  backdrop-filter: blur(6px);
}

.jrgq-gal-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 18px 20px;
  z-index: 3;
  text-align: left;
}
.jrgq-gal-loss,
.jrgq-gal-time { display: none; }

.jrgq-gal-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 600;
  font-style: italic;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.jrgq-gal-stars {
  font-size: 0.70rem;
  color: var(--bbw-gold-vivid);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.jrgq-gal-quote {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  margin: 0;
  display: none;
  max-width: 34ch;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.jrgq-gal-item--featured .jrgq-gal-quote { display: block; }
.jrgq-gal-item:hover .jrgq-gal-quote      { display: block; }

.jrgq-gal-info--featured {
  padding: 32px 40px;
}
.jrgq-gal-info--featured .jrgq-gal-name {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  margin-bottom: 12px;
}
.jrgq-gal-info--featured .jrgq-gal-quote {
  font-size: 0.92rem;
  max-width: 40ch;
}


.jrgq-gallery-stats-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border: 1px solid var(--bbw-gold-border);
  border-radius: 4px;
  overflow: hidden;
}
.jrgq-gstat {
  flex: 1;
  min-width: 130px;
  padding: 20px 16px;
  text-align: center;
  position: relative;
  border-right: 1px solid var(--bbw-gold-border);
  transition: background 0.28s ease;
}
.jrgq-gstat:hover {
  background: var(--bbw-gold-pale);
}
.jrgq-gstat:last-child { border-right: none; }


.jrgq-gstat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--bbw-gold);
  line-height: 1;
  margin-bottom: 4px;
}
.jrgq-gstat-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(21,17,14,0.45);
  text-transform: uppercase;
}
.jrgq-gstat-sep {
  display: none;
}

/* ═══════════════════════════
   SOCIAL PROOF STRIP
═══════════════════════════ */
.jrgq-proof-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px 32px;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(201,150,62,0.14);
  margin-top: 12px;
}
.jrgq-proof-avatars {
  display: flex;
}
.jrgq-proof-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  margin-left: -10px;
  border: 2.5px solid rgba(253,249,244,0.95);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(30,15,5,0.18);
}
.jrgq-proof-av:first-child { margin-left: 0; }


.jrgq-proof-text {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.82rem;
  color: rgba(30,15,5,0.48);
}
.jrgq-proof-text strong {
  color: rgba(30,15,5,0.82);
  animation: jrgq-count-pulse 2.4s ease-in-out infinite;
  display: inline-block;
}

.jrgq-proof-stars {
  font-size: 0.78rem;
  color: #c9963e;
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 1px;
}
.jrgq-proof-stars span {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.70rem;
  font-weight: 700;
  color: rgba(30,15,5,0.45);
  letter-spacing: normal;
}

/* ═══════════════════════════
   CTA BUTTON — NOIR PUR + OR
═══════════════════════════ */
.jrgq-gal-cta-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 18px;
  background: var(--bbw-gold);
  color: var(--bbw-black) !important;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid var(--bbw-gold);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.jrgq-gal-cta-btn:hover {
  background: transparent;
  color: var(--bbw-gold-vivid) !important;
}

.jrgq-gal-item--featured .jrgq-gal-cta-btn {
  padding: 11px 24px;
  font-size: 12.5px;
  margin-top: 16px;
}


/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media (max-width: 900px) {
  .jrgq-gallery-mosaic {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 220px 220px 220px 220px;
  }
  .jrgq-gal-item--1 { grid-column: 1; grid-row: 1 / 3; }
  .jrgq-gal-item--2 { grid-column: 2; grid-row: 1; }
  .jrgq-gal-item--3 { grid-column: 3; grid-row: 1 / 3; }
  .jrgq-gal-item--4 { grid-column: 2; grid-row: 2; }
  .jrgq-gal-item--5 { grid-column: 1 / 2; grid-row: 3; }
  .jrgq-gal-item--6 { grid-column: 2 / 3; grid-row: 3; }
  .jrgq-gal-item--7 { grid-column: 3 / 4; grid-row: 3; }
}

@media (max-width: 640px) {
  .jrgq-gallery-block { padding: 20px 10px 8px; }

  .jrgq-gallery-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 180px 200px 200px;
    gap: 8px;
  }
  .jrgq-gal-item--1 { grid-column: 1; grid-row: 1; }
  .jrgq-gal-item--2 { grid-column: 2; grid-row: 1; }
  .jrgq-gal-item--3 { grid-column: 1 / 3; grid-row: 2; }
  .jrgq-gal-item--4 { grid-column: 1; grid-row: 3; }
  .jrgq-gal-item--5 { grid-column: 2; grid-row: 3; }
  .jrgq-gal-item--6 { grid-column: 1; grid-row: 4; }
  .jrgq-gal-item--7 { grid-column: 2; grid-row: 4; }

  .jrgq-gal-cta-btn {
    font-size: 10px;
    padding: 5px 10px;
    letter-spacing: 0em;
    white-space: nowrap;
    display: inline-block;
    margin-left: 0;
    margin-top: 6px;
  }

  .jrgq-gal-item--featured .jrgq-gal-cta-btn {
    font-size: 10px;
    padding: 5px 10px;
    white-space: nowrap;
    margin-left: 0;
  }

  .jrgq-gallery-stats-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    border-radius: 14px;
  }
  .jrgq-gstat {
    flex: none !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 16px 8px;
    border-right: none !important;
    border-bottom: 1px solid rgba(201,150,62,0.12) !important;
  }
  .jrgq-gstat-num {
    font-size: clamp(1rem, 5.5vw, 1.35rem);
    white-space: nowrap;
  }
  .jrgq-gstat:nth-child(odd) {
    border-right: 1px solid rgba(201,150,62,0.12) !important;
  }
  .jrgq-gstat:last-child,
  .jrgq-gstat:nth-last-child(2):nth-child(odd) {
    border-bottom: none !important;
  }
  .jrgq-gstat-sep { display: none; }
}



/* ════════════════════════════════════════
  Wave section
════════════════════════════════════════ */

#wave-section * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#wave-section {
    position: relative;
    width: 100%;
    height: 28px;
    background: #0d0d0d;
    overflow: hidden;
    isolation: isolate;
}
#wave-section .wave-container {
    position: absolute;
    width: 200%;
    height: 100%;
    bottom: 0;
    left: 0;
}
#wave-section .wave {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    fill: #fdf8f2;
    animation: wave-slide 10s linear infinite;
    opacity: 0.92;
}
#wave-section .wave:nth-child(2) {
    animation: wave-slide 14s linear infinite reverse;
    opacity: 0.45;
    fill: #fdf8f2;
}
@keyframes wave-slide {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Sur mobile, le viewBox fixe (1000 unités) rendait les pointes trop
   rapprochées car la fenêtre visible ne montre qu'une fraction
   constante du path quel que soit le viewport. Élargir le conteneur
   affiche moins de pointes, donc plus espacées, sans toucher au path
   ni casser la boucle d'animation (translateX reste relatif à 100%). */
@media (max-width: 768px) {
  #wave-section .wave-container {
    width: 380%;
  }
}


/* ════════════════════════════════════════════════════════════════
   BBW WAVE SEPARATORS — organic animated dividers used between
   home sections that sit on contrasting backgrounds (dark <-> ivoire).
   Same visual language as the footer's .bbw-finale-wave: an SVG path
   drawn with cubic-bezier curves (never straight zigzag lines),
   filled with the color of the *neighbouring* section so it reads
   as an organic edge rather than a hard line. Purely decorative —
   no id/class here is targeted by any JS.
════════════════════════════════════════════════════════════════ */
.bbw-wave-sep {
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
}
.bbw-wave-sep svg { display: block; width: 100%; }

/* Légère respiration continue — jamais brusque, jamais kitsch.
   Pas de translateX : la vague est dessinée pile sur la largeur du
   viewBox (0 0 1200 90), donc tout décalage horizontal découvre un
   bord vide sur le côté opposé. Seul scaleY respire, sans jamais
   toucher aux bords gauche/droit. */
@keyframes bbw-wave-breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.05); }
}
.bbw-wave-sep path {
  transform-origin: center bottom;
  animation: bbw-wave-breathe 11s ease-in-out infinite;
}

/* BBW Featured (ivoire) -> fond noir premium, vague blanche */
.bbw-wave-sep--nb {
  background: var(--bbw-black);
  height: 40px;
  z-index: 2;
}
.bbw-wave-sep--nb svg { height: 40px; }
.bbw-wave-sep--nb path { fill: #ffffff; }

/* Bundle deal (ivoire) -> Community stories (noir) */
.bbw-wave-sep--stories {
  position: absolute;
  top: 0;
  left: 0;
  height: 58px;
  z-index: 1;
}
.bbw-wave-sep--stories svg { height: 58px; }
.bbw-wave-sep--stories path { fill: #fdfaf5; }
.bbw-wave-sep--stories path { animation-duration: 13s; animation-direction: reverse; }

/* Vagues visibles (bande noire + vague ivoire) au-dessus/en-dessous de
   "What Our Sisters Say" — meme poids visuel que la vague du footer.
   La section reviews elle-meme (cartes, titre) garde sa couleur d'origine,
   seule cette fine bande d'accent est coloree. Pas d'animation. */
.bbw-wave-sep--reviews-in,
.bbw-wave-sep--reviews-out {
  position: relative;
  width: calc(100% + 20px);
  margin: 0 -10px;
  height: 64px;
  background: var(--bbw-black);
  line-height: 0;
  pointer-events: none;
}
.bbw-wave-sep--reviews-in svg,
.bbw-wave-sep--reviews-out svg { display: block; width: 100%; height: 64px; }
.bbw-wave-sep--reviews-in path,
.bbw-wave-sep--reviews-out path { fill: #fdfaf5; animation: none !important; }

/* Hero -> Our Story (ivoire) */
.bbw-wave-sep--ourstory {
  height: 40px;
  z-index: 2;
}
.bbw-wave-sep--ourstory svg { height: 40px; }
.bbw-wave-sep--ourstory path { fill: #fdfaf5; }

@media (max-width: 640px) {
  .bbw-wave-sep--nb { height: 26px; }
  .bbw-wave-sep--nb svg { height: 26px; }
  .bbw-wave-sep--stories { height: 36px; }
  .bbw-wave-sep--stories svg { height: 36px; }
  .bbw-wave-sep--reviews-in { height: 28px; }
  .bbw-wave-sep--reviews-in svg { height: 28px; }
  .bbw-wave-sep--reviews-out { height: 28px; }
  .bbw-wave-sep--reviews-out svg { height: 28px; }
  .bbw-wave-sep--ourstory { height: 22px; }
  .bbw-wave-sep--ourstory svg { height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .bbw-wave-sep path { animation: none !important; }
}


/* ════════════════════════════════════════════════════════════════
   OUR STORY — collage photo (gauche) + texte (droite), entre le hero
   et les Story Rows. Hauteur fixe 150px sur desktop ; passe en colonne
   sur mobile (la contrainte de 150px ne tient plus une fois empilé,
   donc hauteur libre en dessous de 768px comme le reste des sections
   home). Classes scopées .our-story* — aucune règle ne cible un
   sélecteur générique (img, section, etc.) donc pas de fuite possible
   vers d'autres sections de la page.
════════════════════════════════════════════════════════════════ */
.our-story {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 60px);
  width: 100%;
  height: 150px;
  margin: 0;
  padding: 0 clamp(16px, 4vw, 40px);
  background-color: #ffffff;
  box-sizing: border-box;
  overflow: hidden;
}

.our-story__images {
  position: relative;
  flex: 0 0 auto;
  width: clamp(170px, 22vw, 250px);
  height: 146px;
}

.our-story__img {
  position: absolute;
  object-fit: contain;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.our-story__img--back {
  top: 0;
  left: 0;
  width: 58%;
  height: 92%;
  z-index: 1;
}

.our-story__img--front {
  bottom: 0;
  right: 0;
  width: 58%;
  height: 82%;
  z-index: 2;
}

.our-story__content {
  position: relative;
  flex: 0 1 560px;
  min-width: 0;
  height: 146px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #f5f0e8;
  padding: 16px 28px;
  box-sizing: border-box;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.our-story__label {
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9a15a;
  font-weight: 600;
  margin: 0 0 4px;
}

.our-story__title {
  font-family: 'Great Vibes', 'Brush Script MT', var(--font-display), cursive;
  font-size: clamp(24px, 3vw, 34px);
  color: #2b2b2b;
  margin: 0 0 6px;
  font-weight: 400;
  line-height: 1;
}

.our-story__text {
  font-size: clamp(11px, 1.15vw, 13.5px);
  line-height: 1.5;
  color: #6b6b6b;
  margin: 0;
  max-width: 62ch;
}

/* ── Skeleton (premier paint, avant que initOurStorySkeleton() en JS
   révèle le vrai contenu) : masque les 2 photos + le texte réel derrière
   un shimmer, dimensions identiques au contenu final pour zéro layout
   shift. Overlays en position:absolute par-dessus les <img> réelles
   (elles continuent de charger en arrière-plan pendant ce temps). ── */
.our-story__skel { border-radius: 4px; }
.our-story__skel--back  { top: 0; left: 0; width: 58%; height: 92%; z-index: 3; }
.our-story__skel--front { bottom: 0; right: 0; width: 58%; height: 82%; z-index: 4; }

.our-story__skel-text { display: none; }

.our-story.is-skeleton .our-story__img { visibility: hidden; }
.our-story.is-skeleton .our-story__label,
.our-story.is-skeleton .our-story__title,
.our-story.is-skeleton .our-story__text {
  visibility: hidden;
}
.our-story.is-skeleton .our-story__skel-text {
  display: block;
  position: absolute;
  inset: 16px 28px;
}
.our-story:not(.is-skeleton) .our-story__skel {
  display: none;
}

@media (max-width: 480px) {
  .our-story { gap: 12px; padding: 0 12px; }
  .our-story__images { width: 96px; height: 100px; }
  .our-story__content { padding: 10px 14px; }
}


/* ════════════════════════════════════════
   BBW FEATURED (HOME) — vitrine designs originaux BBW4LIFE
════════════════════════════════════════ */
.bbw-nb-section {
  background: #ffffff;
  padding: 20px 0 15px;
  overflow: hidden;
}

.bbw-nb-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.bbw-nb-top {
  display: grid;
  grid-template-columns: 0.68fr 1.32fr;
  gap: 40px;
  align-items: center;
}

/* ── Photo (avec bloc texte incrusté à droite) ── */
.bbw-nb-photo {
  position: relative;
  aspect-ratio: 4 / 5;
}

.bbw-nb-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% center;
  display: block;
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(21,17,14,0.14);
}

/* Logo preload écrit en dur dans le HTML (pas injecté en JS) : visible dès
   le tout premier rendu, avant même l'exécution de script.js, pour ne
   jamais laisser voir le rectangle vide/déformé le temps que la vraie
   photo charge. Superposé en absolute EN DESSOUS de #bbw-nb-photo-img
   (z-index:1) tant que celle-ci n'a pas de src/n'a pas fini de charger —
   la vraie photo étant transparente tant que src est vide, le logo reste
   visible au travers jusqu'au chargement réel. */
.bbw-nb-photo-preload-logo {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 18%;
  box-sizing: border-box;
  border-radius: 22px;
  background: #FDF8F1;
  box-shadow: none !important;
  z-index: 0;
  pointer-events: none;
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.35s ease;
}
.bbw-nb-photo-preload-logo.is-loaded {
  opacity: 0 !important;
}

/* ── Texte incrusté sur la photo, ancré à droite ──
   Masqué tant que la vraie photo n'est pas chargée : sinon il flotte par-
   dessus le logo preload / skeleton avant que #bbw-nb-photo-img n'ait de
   src valide, ce qui donne un rendu cassé (texte sans image derrière). Le
   preload logo reçoit .is-loaded (script.js, revealPhoto()) exactement au
   moment où la photo est prête — on cadence le texte sur ce même signal. */
.bbw-nb-text {
  position: absolute;
  top: 68%;
  right: 0;
  transform: translateY(-50%);
  z-index: 3;
  max-width: 240px;
  padding: 16px 14px;
  background: linear-gradient(135deg, rgba(21,17,14,0.62) 0%, rgba(21,17,14,0.42) 100%);
  border-radius: 14px;
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.bbw-nb-photo-preload-logo.is-loaded ~ .bbw-nb-text {
  opacity: 1;
  pointer-events: auto;
}

.bbw-nb-photo-sparkle {
  position: absolute;
  color: var(--bbw-gold);
  font-size: 1.1rem;
  z-index: 2;
  pointer-events: none;
}
.bbw-nb-photo-sparkle--1 { top: 22px; left: 22px; font-size: 1.4rem; }
.bbw-nb-photo-sparkle--2 { top: 46px; left: 44px; font-size: 0.85rem; opacity: 0.7; }

.bbw-nb-photo-arc {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 110px;
  height: 110px;
  border: 1.5px solid var(--bbw-gold-border-hi, rgba(184,146,90,0.5));
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  pointer-events: none;
}

/* ── Content ── */
.bbw-nb-content { position: relative; }

.bbw-nb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bbw-gold);
  margin-bottom: 10px;
}

.bbw-nb-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  font-weight: 600;
  color: var(--bbw-black);
  line-height: 1.05;
  margin: 0 0 6px;
  text-align: center;
}
.bbw-nb-title em {
  font-style: normal;
  color: var(--bbw-gold);
}

.bbw-nb-title-heart {
  text-align: center;
  color: var(--bbw-rose);
  font-size: 1rem;
  margin-bottom: 8px;
}

.bbw-nb-tagline {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(21,17,14,0.55);
  margin: 0 0 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bbw-gold-border, rgba(184,146,90,0.28));
}

.bbw-nb-text-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bbw-gold-light, var(--bbw-gold));
  text-shadow: 0 1px 8px rgba(0,0,0,0.40);
  margin-bottom: 8px;
}
.bbw-nb-text h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #F9F5EE;
  text-shadow: 0 2px 4px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.30);
  margin: 0 0 10px;
}
.bbw-nb-text p {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(249,245,238,0.88);
  text-shadow: 0 1px 3px rgba(0,0,0,0.30), 0 6px 18px rgba(0,0,0,0.25);
  margin: 0 0 18px;
  max-width: 480px;
}
.bbw-nb-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bbw-black);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 13px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: var(--bbw-transition);
}
.bbw-nb-view-btn:hover {
  background: var(--bbw-gold);
  transform: translateY(-1px);
}
.bbw-nb-view-btn i { font-size: 0.78rem; }

/* ── Product grid ── */
.bbw-nb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.bbw-nb-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(21,17,14,0.08);
  transition: var(--bbw-transition);
}
.bbw-nb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(21,17,14,0.14);
}

.bbw-nb-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #f4ede2;
}
.bbw-nb-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bbw-nb-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--bbw-black);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 5px;
  z-index: 2;
}

.bbw-nb-card__wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  z-index: 6;
  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);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.bbw-nb-card__wishlist:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 16px rgba(184,146,90,0.30);
  border-color: rgba(184,146,90,0.55);
}
.bbw-nb-card__wishlist svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-shrink: 0;
}
.bbw-nb-card__wishlist .wishlist-icon-empty {
  display: block;
  width: 14px;
  height: 14px;
  stroke: var(--bbw-gold);
  fill: none;
  stroke-width: 2;
  transition: stroke 0.20s ease;
}
.bbw-nb-card__wishlist .wishlist-icon-filled {
  display: none;
  width: 14px;
  height: 14px;
  fill: var(--bbw-gold);
  stroke: none;
}
.bbw-nb-card__wishlist.added .wishlist-icon-empty  { display: none; }
.bbw-nb-card__wishlist.added .wishlist-icon-filled { display: block; }
.bbw-nb-card__wishlist.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);
}

@media (max-width: 768px) {
  .bbw-nb-card__wishlist { width: 24px; height: 24px; top: 8px; right: 8px; }
  .bbw-nb-card__wishlist .wishlist-icon-empty,
  .bbw-nb-card__wishlist .wishlist-icon-filled { width: 12px; height: 12px; }
}

.bbw-nb-card__body {
  padding: 18px 18px 20px;
}
.bbw-nb-card__title {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bbw-black);
  text-decoration: none;
  margin-bottom: 6px;
  line-height: 1.35;
}
.bbw-nb-card__price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bbw-black);
  margin-bottom: 6px;
}
.bbw-nb-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.bbw-nb-card__stars { color: var(--bbw-gold); font-size: 0.7rem; letter-spacing: 1px; }
.bbw-nb-card__star--empty { opacity: 0.25; }
.bbw-nb-card__count {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: rgba(21,17,14,0.45);
}
.bbw-nb-card__btn {
  display: block;
  text-align: center;
  background: var(--bbw-black);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px;
  border-radius: 7px;
  text-decoration: none;
  transition: var(--bbw-transition);
}
.bbw-nb-card__btn:hover { background: var(--bbw-gold); }

/* ── Trust strip ── */
.bbw-nb-strip {
  margin-top: 44px;
  background: #fff;
  border-radius: 16px;
  padding: 26px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  box-shadow: 0 4px 20px rgba(21,17,14,0.06);
}
.bbw-nb-strip-items {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.bbw-nb-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  flex-shrink: 0;
}
.bbw-nb-strip-item i {
  color: var(--bbw-gold);
  font-size: 1.4rem;
  flex-shrink: 0;
}
.bbw-nb-strip-item span {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bbw-black);
  line-height: 1.35;
}
.bbw-nb-strip-text {
  flex: 1;
  min-width: 220px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--bbw-black);
  line-height: 1.3;
}
.bbw-nb-strip-text em {
  font-style: normal;
  color: var(--bbw-gold);
}
.bbw-nb-strip-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bbw-black);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 13px 22px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--bbw-transition);
}
.bbw-nb-strip-cta:hover { background: var(--bbw-gold); }

/* ── Tablet ── */
@media (max-width: 1024px) {
  .bbw-nb-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bbw-nb-photo {
    max-width: 460px;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
  }
  .bbw-nb-photo img { object-position: 20% center; }
  .bbw-nb-text { max-width: 62%; }
  .bbw-nb-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .bbw-nb-section { padding: 40px 0 36px; }
  .bbw-nb-inner { padding: 0 8px; }
  .bbw-nb-title { font-size: 2rem; }
  .bbw-nb-photo { aspect-ratio: 3 / 4; }
  .bbw-nb-photo img { object-position: 5% center; }
  .bbw-nb-text {
    max-width: 52%;
    right: 0;
    padding: 14px 12px;
  }
  .bbw-nb-text-label {
    font-size: 0.58rem;
    color: var(--bbw-gold-light);
    text-shadow: none;
  }
  .bbw-nb-text h3 {
    font-size: 1.08rem;
    color: #ffffff;
    text-shadow: none;
  }
  .bbw-nb-text p {
    font-size: 0.76rem;
    line-height: 1.45;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.92);
    text-shadow: none;
  }
  .bbw-nb-view-btn {
    font-size: 0.7rem;
    padding: 9px 16px;
  }
  .bbw-nb-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bbw-nb-strip {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 22px 18px;
    gap: 20px;
  }
  .bbw-nb-strip-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 12px;
  }
  .bbw-nb-strip-item { justify-content: center; }
  .bbw-nb-strip-cta { justify-content: center; }
}


/* ════════════════════════════════════════
   TRUST BANNER — Ultra Premium
════════════════════════════════════════ */

/* ── Brand Statement — traitement typographique sur fond clair,
   volontairement SANS photo pleine largeur : ça évite de répéter le
   traitement "grand visuel" du hero juste au-dessus. ── */
.trust-banner-section {
  position: relative;
}

.trust-banner-wrap {
  position: relative;
  background: #fdfaf5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-banner-photo,
.trust-overlay { display: none; }


.trust-topline,
.trust-bottomline {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  z-index: 3;
  background: var(--bbw-gold-border);
}
.trust-topline    { top: 0; }
.trust-bottomline { bottom: 0; }


.trust-banner-inner {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 76px 28px 64px;
  max-width: 760px;
}


.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(21,17,14,0.65);
  background: #fff;
  border: 1px solid var(--bbw-gold-border);
  padding: 5px 16px 5px 12px;
  border-radius: 100px;
  margin-bottom: 26px;
}
.trust-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bbw-gold);
  flex-shrink: 0;
}


.trust-banner-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.15;
  color: var(--bbw-black);
  letter-spacing: -0.01em;
  margin-bottom: 0;
}
.trust-banner-title em {
  font-style: italic;
  color: var(--bbw-rose);
}


.trust-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 24px auto;
}
.trust-divider-line {
  display: block;
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--bbw-gold-border-hi));
}
.trust-divider-line:last-child {
  background: linear-gradient(90deg, var(--bbw-gold-border-hi), transparent);
}
.trust-divider-diamond {
  display: block;
  width: 6px; height: 6px;
  background: var(--bbw-gold);
  transform: rotate(45deg);
}


.trust-banner-text {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.5vw, 1.02rem);
  color: rgba(21,17,14,0.62);
  line-height: 1.7;
  margin-bottom: 32px;
}
.trust-banner-text strong {
  color: var(--bbw-black);
  font-weight: 600;
}


.trust-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 44px;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(21,17,14,0.68);
  background: #fff;
  border: 1px solid var(--bbw-gold-border);
  padding: 5px 13px;
  border-radius: 100px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.trust-pill i {
  font-size: 0.75rem;
  color: var(--bbw-gold);
}
.trust-pill:hover {
  background: var(--bbw-gold-pale);
  border-color: var(--bbw-gold);
  color: var(--bbw-black);
}
.trust-pill-sep {
  color: rgba(21,17,14,0.18);
  font-size: 1rem;
}


/* ── Piliers de réassurance, fusionnés dans le brand statement ── */
.rr-pillars--banner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px 40px;
  padding-top: 36px;
  border-top: 1px solid var(--bbw-gold-border);
}
.rr-pillars--banner .rr-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.rr-pillars--banner .rr-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bbw-gold-border);
  border-radius: 50%;
  color: var(--bbw-gold);
  font-size: 13px;
  margin-bottom: 2px;
}
.rr-pillars--banner .rr-pillar strong {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bbw-black);
}
.rr-pillars--banner .rr-pillar span:not(.rr-icon) {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(21,17,14,0.48);
}

@media (max-width: 640px) {
  #trust-banner .trust-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  #trust-banner .trust-pill-sep {
    display: none !important;
  }

  #trust-banner .trust-pill {
    white-space: nowrap !important;
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }

  #trust-banner .trust-pill:nth-child(1) {
    order: 1 !important;
  }

  #trust-banner .trust-pill:nth-child(3) {
    order: 2 !important;
  }

  #trust-banner .trust-pill:nth-child(5) {
    order: 3 !important;
    flex-basis: auto;
    justify-content: center !important;
    display: flex !important;
  }

  .trust-banner-inner { padding: 56px 24px 48px; }
  .rr-pillars--banner { gap: 20px 24px; padding-top: 24px; }
  .rr-pillars--banner .rr-pillar { flex: 0 0 calc(50% - 12px); }
}

/* ═══════════════════════════
   BBW4LIFE — MARQUEE SECTION
═══════════════════════════ */
.bbw-marquee-section {
  background: #000;
  padding: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border-top: 2px solid var(--bbw-gold, #B8925A);
  border-bottom: 2px solid var(--bbw-gold, #B8925A);
}

.bbw-marquee-section::before,
.bbw-marquee-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.bbw-marquee-section::before {
  left: 0;
  background: linear-gradient(to right, #0d0d0d 0%, transparent 100%);
}
.bbw-marquee-section::after {
  right: 0;
  background: linear-gradient(to left, #0d0d0d 0%, transparent 100%);
}

.bbw-marquee-track {
  display: flex;
  align-items: center;
  padding: 14px 0;
  width: 100%;
}

.bbw-marquee-inner {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: bbwMarqueeRight 50s linear infinite !important;
  will-change: transform;
}
.bbw-marquee-inner:hover {
  animation-play-state: paused;
}

@keyframes bbwMarqueeRight {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.bbw-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 30px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(246, 239, 229, 0.85);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s;
}
.bbw-marquee-item i {
  color: var(--bbw-gold, #B8925A);
  font-size: 13px;
}
.bbw-marquee-item:hover {
  color: var(--bbw-gold-light, #e8bc6a);
}

.bbw-marquee-sep {
  color: var(--bbw-gold, #B8925A);
  font-size: 11px;
  flex-shrink: 0;
  opacity: 0.5;
}

@media (max-width: 768px) {
  .bbw-marquee-section::before,
  .bbw-marquee-section::after {
    width: 60px;
  }
  .bbw-marquee-item {
    font-size: 11px;
    padding: 0 20px;
  }
  .bbw-marquee-inner {
    animation-duration: 30s !important;
  }
}



/* ════════════════════════════════════════════
   BBW4LIFE — Stories + Videos Community Section
════════════════════════════════════════════ */

.bbw-stories-section {
  position: relative;
  padding: 64px 0 40px;
  background: var(--bbw-black) !important;
  overflow: hidden;
  isolation: isolate;
}

.bss-orb { display: none; }

/* ════════════════════════
   STORIES ROW
════════════════════════ */
.bss-stories-wrap {
  position: relative;
  z-index: 2;
  padding: 0 20px 14px;
  overflow: hidden;
}
.bss-stories-wrap::before,
.bss-stories-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 3;
  pointer-events: none;
}
.bss-stories-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--bbw-black), transparent);
}
.bss-stories-wrap::after {
  right: 0;
  background: linear-gradient(90deg, transparent, var(--bbw-black));
}

.bss-stories-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 40px;
  scroll-behavior: smooth;
}
.bss-stories-track::-webkit-scrollbar { display: none; }
@media (min-width: 769px) {
  .bss-stories-track {
    justify-content: center;
  }
}

.bss-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  cursor: pointer;
}

.bss-story-ring {
  width: 72px; height: 72px;
  border-radius: 50%;
  padding: 2px;
  background: var(--bbw-gold-border-hi);
  transition: transform 0.3s ease;
}
.bss-story:hover .bss-story-ring {
  transform: scale(1.06);
  background: var(--bbw-gold);
}

.bss-story-img-wrap {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #1a1a1a;
  padding: 2px;
}
.bss-story-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.bss-story:hover .bss-story-img {
  transform: scale(1.06);
}

.bss-story-name {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
  text-align: center;
  transition: color 0.3s;
  white-space: nowrap;
}
.bss-story:hover .bss-story-name {
  color: var(--bbw-gold-vivid);
}

/* ════════════════════════
   SECTION HEADER
════════════════════════ */
.bss-header {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px 18px;
}

.bss-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 8px;
}
.bss-eyebrow-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bbw-gold-vivid);
}

.bss-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 600;
  font-style: italic;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.bss-title em {
  font-style: italic;
  color: var(--bbw-gold-vivid);
}

.bss-subtitle {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.04em;
}

/* ════════════════════════
   VIDEOS SLIDER
════════════════════════ */
.bss-videos-wrap {
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

.bss-videos-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 10px;
}
.bss-videos-track::-webkit-scrollbar { display: none; }

.bss-video-item {
  flex-shrink: 0;
  width: calc((100% - 5 * 14px) / 5);
  scroll-snap-align: start;
}

.bss-video-inner {
  position: relative;
  aspect-ratio: 9 / 14;
  border-radius: 4px;
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid var(--bbw-gold-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.50);
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.bss-video-inner:hover {
  transform: translateY(-6px);
  border-color: var(--bbw-gold);
}

.bss-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.bss-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 45%,
    rgba(8, 3, 10, 0.88) 100%
  );
  pointer-events: none;
}

.bss-video-badge {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bbw-gold);
  background: rgba(21,17,14,0.70);
  backdrop-filter: blur(6px);
  border: 1px solid var(--bbw-gold-border);
  padding: 3px 9px;
  border-radius: 2px;
}

.bss-sound-btn {
  position: absolute;
  bottom: 42px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(6px);
  border: 1px solid var(--bbw-gold-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  z-index: 3;
  padding: 0;
}
.bss-sound-btn:hover {
  background: var(--bbw-gold-pale);
  border-color: var(--bbw-gold);
}
.bss-sound-btn svg {
  width: 14px; height: 14px;
  stroke: #fff;
}

.bss-video-info {
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
  z-index: 3;
}
.bss-video-name {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
  margin-bottom: 2px;
}


.bss-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(13, 13, 13, 0.80);
  backdrop-filter: blur(8px);
  border: 1px solid var(--bbw-gold-border);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background 0.25s, border-color 0.25s;
}
.bss-nav:hover {
  background: var(--bbw-gold);
  color: var(--bbw-black);
  border-color: var(--bbw-gold);
}
.bss-nav--prev { left: -6px; }
.bss-nav--next { right: -6px; }


.bss-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  z-index: 2;
  position: relative;
}
.bss-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
}
.bss-dot.active {
  width: 22px;
  border-radius: 3px;
  background: var(--bbw-gold);
}

/* ════════════════════════
   RESPONSIVE
════════════════════════ */
@media (max-width: 1024px) {
  .bss-video-item {
    width: calc((100% - 3 * 14px) / 3.2);
  }
}
@media (max-width: 768px) {
  .bss-video-item {
    width: calc((100% - 14px) / 2.1);
  }
  .bss-nav { display: none; }
  /* padding-top >= hauteur de .bbw-wave-sep--stories en mobile (36px,
     cf. @media 640px ci-dessus) + une petite marge — sinon la vague
     (position:absolute, posée par-dessus le contenu) déborde sur le
     haut des cercles de story et les coupe visuellement. */
  .bbw-stories-section { padding: 44px 0 6px; }
}
@media (max-width: 480px) {
  .bss-video-item {
    width: calc(100% - 30px);
  }
}

.bss-video-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-size: cover;
  background-position: center;
  transition: opacity 0.5s ease;
}

.bss-video-placeholder.hidden {
  opacity: 0;
  pointer-events: none;
}

.bss-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}



#divider-wave * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#divider-wave {
    position: relative;
    width: 100%;
    height: 20px;
    background: #fff;
    overflow: hidden;
    isolation: isolate;
}
#divider-wave .wave-container {
    position: absolute;
    width: 200%;
    height: 100%;
    bottom: 0;
    left: 0;
}
#divider-wave .wave {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    fill: #0d0d0d;
    animation: divider-wave-slide 10s linear infinite;
}
#divider-wave .wave {
    fill: #0d0d0d;
}
#divider-wave .wave:nth-child(2) {
    fill: #0d0d0d;
    opacity: 0.45;
}

@keyframes divider-wave-slide {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}



/* ═══════════════════════════════════════════════════
   BBW4LIFE — COLLECTION SLIDER — PREMIUM LIGHT
   ═══════════════════════════════════════════════════ */

.cs-section {
  position: relative;
  padding: 64px 0 40px;
  overflow: hidden;
  background: #fdfaf5;
}

.cs-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 34px;
  padding: 0 20px;
}
.cs-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bbw-gold);
  margin-bottom: 12px;
}
.cs-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  font-style: italic;
  color: var(--bbw-black);
  line-height: 1.2;
  margin: 0;
}

.cs-wrapper {
  position: relative;
  overflow: hidden;
  padding: 0 52px;
  z-index: 1;
}


.cs-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.cs-track::-webkit-scrollbar { display: none; }


.cs-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 42px;
  height: 42px;
  border: 1px solid var(--bbw-gold-border);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bbw-gold);
  transition: var(--transition);
  padding: 0;
}
.cs-nav:hover {
  background: var(--bbw-gold);
  border-color: var(--bbw-gold);
  color: var(--bbw-black);
}
.cs-nav--prev { left: 4px; }
.cs-nav--next { right: 4px; }


.cs-card {
  flex: 0 0 calc(25% - 15px);
  min-width: 200px;
  max-width: 300px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--bbw-gold-border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition-slow);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(21,17,14,0.06);
}

.cs-card:hover {
  box-shadow: 0 16px 48px rgba(21,17,14,0.12);
  transform: translateY(-7px);
  border-color: var(--bbw-gold);
}


.cs-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--bbw-gold);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 10;
}
.cs-card:hover::before { opacity: 1; }


.cs-discount-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #F6EFE5;
  color: var(--bbw-gold);
  border: 1px solid var(--bbw-gold);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 2px;
  z-index: 5;
  letter-spacing: 0.04em;
  pointer-events: none;
}


.cs-wishlist-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  background: var(--bbw-black);
  border: 1px solid var(--bbw-gold-border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  padding: 0;
}
.cs-wishlist-btn:hover {
  border-color: var(--bbw-gold);
}
.cs-wishlist-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--bbw-gold);
}
.cs-wishlist-btn .cs-heart-empty { display: block; }
.cs-wishlist-btn .cs-heart-filled { display: none; }
.cs-wishlist-btn.cs-in-wishlist .cs-heart-empty { display: none; }
.cs-wishlist-btn.cs-in-wishlist .cs-heart-filled { display: block; }
.cs-wishlist-btn.cs-in-wishlist svg {
  stroke: var(--bbw-gold);
  fill: var(--bbw-gold);
}


.cs-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f9f1eb;
  aspect-ratio: 1 / 1;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
.cs-media a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.cs-media-inner {
  display: flex;
  height: 100%;
  transition: transform 0.35s ease;
  will-change: transform;
}
.cs-media-slide {
  flex: 0 0 100%;
  height: 100%;
}
.cs-media-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 0.60s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.40s ease;
  filter: brightness(0.97) saturate(1.02);
}
.cs-card:hover .cs-media-slide img {
  transform: scale(1.05);
  filter: brightness(1) saturate(1.10);
}


.cs-media::after { display: none; }


.cs-media-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  background: rgba(21,17,14,0.75);
  border: 1px solid var(--bbw-gold-border);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  padding: 0;
}
.cs-card:hover .cs-media-arrow { opacity: 1; }
.cs-media-arrow:hover {
  background: var(--bbw-black);
  border-color: var(--bbw-gold);
}
.cs-media-arrow--prev { left: 8px; }
.cs-media-arrow--next { right: 8px; }
.cs-media-arrow svg {
  width: 12px;
  height: 12px;
  stroke: var(--bbw-gold);
}


.cs-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  background: transparent;
}


.cs-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #1a0f05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  display: block;
  line-height: 1.3;
  transition: color 0.2s;
}
.cs-title:hover { color: var(--bbw-gold); }


.cs-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 2px 0;
}
.cs-variant-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
.cs-variant-thumb:hover {
  border-color: #000000;
  transform: scale(1.10);
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
}
.cs-variant-thumb.cs-active {
  border-color: var(--bbw-gold);
  box-shadow: 0 0 10px rgba(201,150,62,0.40);
}

.cs-variants-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  color: var(--bbw-gold);
  font-size: 11px;
  gap: 2px;
  margin-top: 2px;
  transition: color 0.2s;
}
.cs-variants-toggle:hover { color: #000000; }
.cs-variants-toggle svg { width: 14px; height: 14px; }


.cs-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.cs-price {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #1a0f05;
}
.cs-compare-price {
  font-size: 12px;
  color: #c0b5b0;
  text-decoration: line-through;
}


.cs-atc-btn {
  width: 100%;
  padding: 12px 10px;
  background: var(--bbw-black);
  color: var(--bbw-gold);
  border: 1px solid var(--bbw-gold);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.25s ease, color 0.25s ease;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
  position: relative;
}

.cs-atc-btn:hover {
  background: var(--bbw-gold);
  color: var(--bbw-black);
}
.cs-atc-btn:active {
  transform: translateY(1px);
}
.cs-atc-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: var(--bbw-gold);
}
.cs-atc-btn:hover svg { stroke: var(--bbw-black); }
.cs-atc-btn.cs-adding { opacity: 0.70; pointer-events: none; }
.cs-atc-btn.cs-added {
  background: var(--bbw-black);
  color: #22a06b;
  border-color: #22a06b;
}
.cs-atc-btn.cs-added svg { stroke: #22a06b; }


.cs-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}
.cs-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(21,17,14,0.15);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--transition);
}
.cs-dot.cs-active {
  width: 22px;
  border-radius: 3px;
  background: var(--bbw-gold);
}

/* ═══════════════════════════════
   RESPONSIVE
   ═══════════════════════════════ */
@media (max-width: 1024px) {
  .cs-card { flex: 0 0 calc(33.333% - 14px); }
}
@media (max-width: 767px) {
  .cs-wrapper { padding: 0 36px; }
  .cs-card { flex: 0 0 calc(100% - 0px); max-width: 100%; }
  .cs-nav { width: 34px; height: 34px; }
  .cs-nav--prev { left: 0; }
  .cs-nav--next { right: 0; }
  .cs-media-arrow { opacity: 1; }
  .cs-variant-thumb { width: 40px; height: 40px; }
  .cs-atc-btn { font-size: 13px; padding: 10px; }
}


.cs-card,
.cs-card *,
.cs-media,
.cs-media a,
.cs-media-inner,
.cs-media-slide,
.cs-media-arrow,
.cs-media-arrow * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.cs-media a {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.cs-media-arrow {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}


/* ═══════════════════════════════════════════════
   BBW4LIFE — COMMUNITY REVIEWS MARQUEE — PREMIUM
═══════════════════════════════════════════════ */
/* ── SECTION HEADER (générique) ── */
.section-header {
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
}
.section-header .section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bbw-gold);
  margin: 0 0 8px;
}
.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 600;
  font-style: italic;
  color: var(--bbw-black);
  line-height: 1.2;
  margin: 0 0 10px;
}
.section-header .section-subtitle {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(21,17,14,0.50);
  letter-spacing: 0.02em;
  margin: 0;
}

.comm-reviews-band {
  background: linear-gradient(160deg, #fdf8f2 0%, #f8f0e6 40%, #f3e8d8 100%);
  position: relative;
  margin: 0 -10px -10px;
  padding: 44px 10px 0;
  overflow: hidden;
}

.comm-reviews-band .bbw-wave-sep--reviews-out { margin-top: 50px; }

/* ── COMMUNITY REVIEWS — grille éditoriale statique ── */
.comm-reviews-header { margin-bottom: 32px; }

.comm-reviews-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.comm-rev-card {
  background: #fff;
  border: 1px solid var(--bbw-gold-border);
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.comm-rev-card:hover {
  border-color: var(--bbw-gold);
  box-shadow: 0 12px 32px rgba(21,17,14,0.08);
}

.comm-rev-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comm-rev-avatar-wrap { flex-shrink: 0; }

.comm-rev-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--bbw-gold-border);
}

.comm-rev-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--bbw-black);
  margin: 0 0 2px;
  line-height: 1.2;
}

.comm-rev-stars {
  font-size: 11px;
  color: var(--bbw-gold);
  letter-spacing: 2px;
}

.comm-rev-quote {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(21,17,14,0.68);
  line-height: 1.65;
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--bbw-gold-border);
  font-style: italic;
  flex: 1;
}

.comm-rev-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bbw-gold);
  background: var(--bbw-gold-pale);
  border: 1px solid var(--bbw-gold-border);
  border-radius: 100px;
  padding: 4px 10px;
  width: fit-content;
}

.comm-rev-badge--special {
  color: var(--bbw-rose);
  background: rgba(110,36,57,0.06);
  border-color: rgba(110,36,57,0.20);
}

@media (max-width: 900px) {
  .comm-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .comm-reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .comm-reviews-band { padding: 30px 10px 0; }
  .comm-reviews-band .bbw-wave-sep--reviews-out { margin-top: 36px; }

  .comm-rev-card { padding: 12px; gap: 8px; }
  .comm-rev-avatar { width: 32px; height: 32px; }
  .comm-rev-name { font-size: 11.5px; }
  .comm-rev-stars { font-size: 10px; }
  .comm-rev-quote { font-size: 11.5px; line-height: 1.5; padding-left: 9px; }
  .comm-rev-badge { font-size: 9px; padding: 3px 8px; }
}


/* ══════════════════════════════════════════════════════════════
   HOME — "FROM THE JOURNAL" — 4 cartes blog (réutilise .blog-card
   de /blog/blog.css pour un rendu visuel identique à la page blog)
══════════════════════════════════════════════════════════════ */
.comm-blog-section {
  background: #fff;
  padding: 44px 10px 0;
  position: relative;
  overflow: hidden;
}

.comm-blog-section .bbw-wave-sep--reviews-out { margin-top: 50px; }

.comm-blog-header { margin-bottom: 32px; }

/* Description tronquée à 3 lignes avec "…" — seulement dans cette section
   home (comm-blog-scroller), la vraie page /blog garde l'excerpt complet. */
.comm-blog-scroller .blog-card-body p {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex: none !important;
  max-height: calc(1.72em * 3);
}

/* Desktop : 4 colonnes fixes, une seule ligne */
.comm-blog-scroller {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.comm-blog-cta {
  text-align: center;
  margin-top: 32px;
}

.comm-blog-cta-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bbw-gold, #c9963e);
  background: #15110E;
  background-size: 200% auto;
  border: 1px solid var(--bbw-gold, #c9963e);
  border-radius: 100px;
  padding: 15px 32px;
  cursor: pointer;
  text-decoration: none;
  transition: background-position 0.45s ease, transform 0.25s ease, box-shadow 0.30s ease;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.08) inset;
  position: relative;
  overflow: hidden;
}
.comm-blog-cta-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
  animation: comm-blog-cta-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}
.comm-blog-cta-btn:hover {
  background-position: right center;
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.48);
  color: var(--bbw-gold-light, #e8bc6a);
}
.comm-blog-cta-btn:active {
  transform: scale(0.97);
}
@keyframes comm-blog-cta-shimmer {
  0%   { left: -80%; }
  100% { left: 130%; }
}

@media (max-width: 1100px) {
  .comm-blog-scroller { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .comm-blog-section { padding: 30px 0 0; }
  .comm-blog-section .bbw-wave-sep--reviews-out { margin-top: 36px; }

  /* Mobile : rangée horizontale scrollable, ~1.5 carte visible,
     barre de scroll masquée (le geste swipe reste actif) */
  .comm-blog-scroller {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding: 0 10px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/Edge legacy */
  }
  .comm-blog-scroller::-webkit-scrollbar { display: none; } /* Chrome/Safari */

  .comm-blog-scroller .blog-card {
    flex: 0 0 66%;
    scroll-snap-align: start;
  }

  .comm-blog-cta { padding: 0 10px; }
}


/* ══════════════════════════════════════════════════════════════
   BBW4LIFE — BEFORE / AFTER SECTION — PREMIUM VERSION
══════════════════════════════════════════════════════════════ */


.before-after-section {
  background: linear-gradient(160deg, #fdf8f2 0%, #f8f0e6 40%, #f3e8d8 100%);
  position: relative;
  overflow: hidden;
  padding: 20px 0 10px !important;
}

.before-after-section > .container {
  padding: 0 10px;
  box-sizing: border-box;
}

.before-after-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 10% 60%, rgba(201, 150, 62, 0.09) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 90% 30%, rgba(201, 150, 62, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(180, 130, 60, 0.05) 0%, transparent 70%);
  pointer-events: none;
}


.before-after-section::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 150, 62, 0.70),
    rgba(232, 188, 106, 0.80),
    rgba(201, 150, 62, 0.70),
    transparent
  );
}


.before-after-section .ba-header {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}


.before-after-section .ba-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #ffffff;
  background: #000000;
  border: 1px solid rgba(201, 150, 62, 0.50);
  padding: 5px 18px;
  border-radius: 50px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.before-after-section .ba-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 600;
  color: #1a0a0f;
  margin: 0 0 12px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}


.before-after-section .ba-header h2 em {
  font-style: italic;
  color: var(--bbw-gold);
}

.before-after-section .ba-header p {
  font-family: var(--font-body);
  font-size: 0.90rem;
  color: rgba(30, 10, 18, 0.55);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}


.before-after-section .ba-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 18px;
  align-items: start;
  position: relative;
  z-index: 1;
}


.before-after-section .ba-card {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(201, 150, 62, 0.20);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition: var(--transition);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 2px 20px rgba(201, 150, 62, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.05);
}

.before-after-section .ba-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(201, 150, 62, 0.04) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.before-after-section .ba-card:hover {
  border-color: rgba(201, 150, 62, 0.45);
  box-shadow:
    0 0 0 1px rgba(201, 150, 62, 0.14),
    0 0 30px rgba(201, 150, 62, 0.16),
    0 0 60px rgba(0, 0, 0, 0.06),
    0 20px 50px rgba(0, 0, 0, 0.10);
  transform: translateY(-4px);
}


.before-after-section .ba-images {
  display: flex;
  align-items: stretch;
  position: relative;
}

.before-after-section .ba-img {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.before-after-section .ba-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.before-after-section .ba-card:hover .ba-img img {
  transform: scale(1.05);
}

.before-after-section .ba-before img {
  filter: grayscale(35%) brightness(0.88) sepia(0.08);
}

.before-after-section .ba-after img {
  filter: brightness(1.06) saturate(1.12);
}


.before-after-section .ba-label {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.85);
  color: rgba(30, 10, 18, 0.75);
  border: 1px solid rgba(201, 150, 62, 0.30);
  backdrop-filter: blur(4px);
  white-space: nowrap;
  z-index: 3;
}


.before-after-section .ba-label--after {
  background: var(--bbw-black);
  color: var(--bbw-gold);
  border-color: var(--bbw-gold-border);
}


.before-after-section .ba-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  flex-shrink: 0;
  background: rgba(201, 150, 62, 0.08);
  color: #c9963e;
  font-size: 1rem;
  font-weight: 700;
  position: relative;
  z-index: 2;
  border-left:  1px solid rgba(201, 150, 62, 0.14);
  border-right: 1px solid rgba(201, 150, 62, 0.14);
}


.before-after-section .ba-result {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid rgba(201, 150, 62, 0.14);
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.55);
}


.before-after-section .ba-result::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #000000, rgba(201, 150, 62, 0.80), transparent);
  border-radius: 0 0 20px 20px;
  opacity: 0;
  transition: opacity 0.35s;
}

.before-after-section .ba-card:hover .ba-result::before {
  opacity: 1;
}

.before-after-section .ba-result strong {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: #1a0a0f;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.before-after-section .ba-result span {
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: rgba(30, 10, 18, 0.45);
  letter-spacing: 0.03em;
}


.before-after-section .ba-card--center {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(201, 150, 62, 0.30);
  border-width: 1.5px;
  padding: 26px 22px 22px;
  box-shadow:
    0 4px 32px rgba(201, 150, 62, 0.12),
    0 1px 6px rgba(0, 0, 0, 0.06);
}


.before-after-section .ba-card--center::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201, 150, 62, 0.80), transparent);
  border-radius: 0 0 2px 2px;
}


.before-after-section .ba-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 22px;
  position: relative;
}


.before-after-section .ba-timeline::before {
  content: '';
  position: absolute;
  left: 9px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.55),
    rgba(201, 150, 62, 0.40)
  );
}

.before-after-section .ba-week {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 2px;
  padding: 10px 0 10px 28px;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}


.before-after-section .ba-week::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  border: 1.5px solid rgba(0, 0, 0, 0.35);
  transition: var(--transition);
}

.before-after-section .ba-week:hover::before {
  background: var(--bbw-black);
  border-color: var(--bbw-gold);
}


.before-after-section .ba-week--final::before {
  background: var(--bbw-black);
  border-color: var(--bbw-gold);
}


.before-after-section .ba-week span {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bbw-gold);
  white-space: nowrap;
  grid-column: 1; grid-row: 1;
  align-self: center;
}

.before-after-section .ba-week p {
  font-family: var(--font-body);
  font-size: 0.81rem;
  color: rgba(30, 10, 18, 0.58);
  line-height: 1.5;
  margin: 0;
  grid-column: 2; grid-row: 1;
}

.before-after-section .ba-week--final span {
  color: var(--bbw-gold);
  font-size: 0.75rem;
}

.before-after-section .ba-week--final p {
  color: rgba(30, 10, 18, 0.82);
  font-weight: 500;
}


.before-after-section .ba-week::after {
  content: '';
  display: block;
  height: 2px;
  border-radius: 2px;
  margin-top: 5px;
  grid-column: 2; grid-row: 2;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), var(--bbw-gold-border-hi));
  transform-origin: left;
  animation: growBar 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
  opacity: 0.55;
}

.before-after-section .ba-week:nth-child(1)::after { width: 35%; animation-delay: 0.10s; }
.before-after-section .ba-week:nth-child(2)::after { width: 55%; animation-delay: 0.25s; }
.before-after-section .ba-week:nth-child(3)::after { width: 75%; animation-delay: 0.40s; }


.before-after-section .ba-week--final::after {
  width: 100%;
  animation-delay: 0.55s;
  background: linear-gradient(90deg, #000000, var(--bbw-gold));
  opacity: 0.90;
}

@keyframes growBar {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}


.before-after-section .ba-cta {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bbw-black) !important;
  color: var(--bbw-gold) !important;
  -webkit-text-fill-color: unset !important;
  border: 1px solid var(--bbw-gold);
  padding: 13px 20px;
  border-radius: 2px;
  text-decoration: none;
  position: relative;
  transition: background 0.25s ease, color 0.25s ease;
}

.before-after-section .ba-cta:hover {
  background: var(--bbw-gold) !important;
  color: var(--bbw-black) !important;
  -webkit-text-fill-color: unset !important;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .before-after-section .ba-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .before-after-section .ba-card--center {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (max-width: 560px) {
  .before-after-section .ba-grid {
    grid-template-columns: 1fr;
  }
  .before-after-section .ba-card--center {
    grid-column: auto;
    order: 0;
  }
  .before-after-section .ba-img img {
    height: 100%;
  }
}



/* ──────────────────────────────────────────────────────────────
   BBW4LIFE — BUNDLE DEAL — PREMIUM
────────────────────────────────────────────────────────────── */


.bundle-deal-section {
  padding: 64px 0 16px !important;
  background: #fdfaf5 !important;
  position: relative !important;
  overflow: hidden !important;
}


.bundle-deal-section .container {
    padding: 0 10px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
}


.bd-header {
    text-align: center !important;
    max-width: 640px !important;
    margin: 0 auto 5px !important;
}


.bd-tag {
    display: inline-block !important;
    background: var(--bbw-black) !important;
    border: 1px solid var(--bbw-gold-border) !important;
    color: var(--bbw-gold) !important;
    font-family: var(--font-body) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    padding: 6px 20px !important;
    border-radius: 2px !important;
    margin-bottom: 16px !important;
    text-shadow: none !important;
}

.bd-header h2 {
    font-family: var(--font-display) !important;
    font-size: clamp(1.9rem, 3.5vw, 2.8rem) !important;
    font-weight: 600 !important;
    font-style: italic;
    color: var(--bbw-black) !important;
    margin: 0 0 14px !important;
    line-height: 1.18 !important;
    letter-spacing: 0.01em !important;
    text-shadow: none !important;
}

.bd-header h2 em {
    font-style: italic !important;
    color: var(--bbw-gold) !important;
}

.bd-header p {
    font-family: var(--font-body) !important;
    font-size: 0.94rem !important;
    color: rgba(21,17,14,0.55) !important;
    line-height: 1.70 !important;
    margin: 0 !important;
}


.bd-inner {
    max-width: 1100px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 44px !important;
    align-items: center !important;
}


.bd-products {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}


.bd-product-item {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    background: #fff !important;
    border: 1px solid var(--bbw-gold-border) !important;
    border-radius: 4px !important;
    padding: 18px 22px !important;
    position: relative !important;
    transition: border-color 0.30s ease !important;
}

.bd-product-item:hover {
    border-color: var(--bbw-gold) !important;
}


.bd-item-glow { display: none !important; }

.bd-product-item img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--bbw-gold-border) !important;
}

.bd-product-item__media {
    display: block !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.bd-product-item__title {
    text-decoration: none !important;
    color: inherit !important;
}
.bd-product-item__title:hover strong {
    color: var(--bbw-gold) !important;
}

.bd-product-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.bd-product-info strong {
    font-family: var(--font-display) !important;
    font-size: 1.05rem !important;
    color: var(--bbw-black) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}

.bd-product-info span {
    font-family: var(--font-body) !important;
    font-size: 0.76rem !important;
    color: rgba(21,17,14,0.55) !important;
}

.bd-product-price {
    font-family: var(--font-body) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--bbw-gold) !important;
    flex-shrink: 0 !important;
}


.bd-plus {
    text-align: center !important;
    font-size: 1.1rem !important;
    color: var(--bbw-gold) !important;
    font-weight: 600 !important;
    margin: 6px 0 !important;
    padding-left: 22px !important;
    text-shadow: none !important;
}


.bd-summary {
    min-width: 300px !important;
    background: #fff !important;
    border: 1px solid var(--bbw-gold-border) !important;
    border-radius: 4px !important;
    padding: 32px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    box-shadow: 0 12px 50px rgba(21,17,14,0.08) !important;
    position: relative !important;
}

.bd-summary::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: var(--bbw-gold-border-hi) !important;
}

.bd-summary-shine { display: none !important; }


.bd-price-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--bbw-gold-border) !important;
}

.bd-original {
    font-family: var(--font-body) !important;
    color: rgba(21,17,14,0.40) !important;
    font-size: 0.86rem !important;
}
.bd-original s {
    color: rgba(21,17,14,0.30) !important;
}

.bd-save {
    font-family: var(--font-body) !important;
    color: var(--bbw-gold) !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
}

.bd-total {
    font-family: var(--font-body) !important;
    color: rgba(21,17,14,0.50) !important;
    font-size: 0.86rem !important;
}

.bd-total-price {
    font-family: var(--font-display) !important;
    font-size: 2.6rem !important;
    color: var(--bbw-black) !important;
    display: block !important;
    margin-top: 4px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}


.bd-benefits {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 16px 18px !important;
    background: var(--bbw-gold-pale) !important;
    border: 1px solid var(--bbw-gold-border) !important;
    border-radius: 4px !important;
}

.bd-benefit {
    font-family: var(--font-body) !important;
    color: var(--bbw-black) !important;
    font-size: 0.83rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.bd-benefit::before {
    content: '' !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: var(--bbw-gold) !important;
    flex-shrink: 0 !important;
}


.bd-cta {
    display: block !important;
    text-align: center !important;
    background: var(--bbw-black) !important;
    color: var(--bbw-gold) !important;
    -webkit-text-fill-color: unset !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 17px 22px !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    border: 1px solid var(--bbw-gold) !important;
    transition: background 0.25s ease, color 0.25s ease !important;
    position: relative !important;
}

.bd-cta:hover {
    background: var(--bbw-gold) !important;
    color: var(--bbw-black) !important;
    -webkit-text-fill-color: unset !important;
}


@media (max-width: 900px) {
    .bundle-deal-section {
        box-sizing: border-box !important;
    }
    .bundle-deal-section .container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .bd-inner {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .bd-products {
        width: 100% !important;
    }
    .bd-product-item {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .bd-summary {
        min-width: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .bd-plus {
        padding-left: 0 !important;
    }
    .bd-header {
        padding: 0 !important;
        margin-bottom: 10px !important;
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BBW4LIFE — NEWSLETTER SECTION — FOND BLANC NACRÉ ULTRA PREMIUM
   ═══════════════════════════════════════════════════════════════ */

.nl-section {
  position: relative;
  background: var(--bbw-black, #15110E);
  overflow: hidden;
  padding: 24px 0;
  border-top: 1px solid var(--bbw-gold-border, rgba(184, 146, 90, 0.28));
  border-bottom: 1px solid var(--bbw-gold-border, rgba(184, 146, 90, 0.28));
  box-shadow: 0 8px 40px rgba(0,0,0,0.30);
}


/* Un seul accent lumineux discret, statique — pas d'accumulation d'effets */
.nl-glow-left {
  position: absolute;
  left: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 146, 90, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}
/* Deuxième glow neutralisé pour éviter l'accumulation lumineuse */
.nl-glow-right {
  display: none;
}


/* Filets fins statiques or antique — animation retirée (rendu posé) */
.nl-shimmer-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 4;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(184, 146, 90, 0.35) 35%,
    rgba(203, 164, 92, 0.55) 50%,
    rgba(184, 146, 90, 0.35) 65%,
    transparent 100%
  );
}
.nl-shimmer-line--top    { top: 0; }
.nl-shimmer-line--bottom { bottom: 0; }


.nl-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.nl-ptcl {
  position: absolute;
  border-radius: 50%;
  animation: nl-float linear infinite;
  opacity: 0;
}
/* Particules fortement adoucies : texture presque imperceptible */
@keyframes nl-float {
  0%   { transform: translateY(0) scale(1);        opacity: 0; }
  20%  { opacity: 0.18; }
  85%  { opacity: 0.10; }
  100% { transform: translateY(-160px) scale(0.5); opacity: 0; }
}


.nl-inner {
  position: relative;
  z-index: 5;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  gap: 3rem;
}


.nl-left {
  flex: 0 0 auto;
  max-width: 290px;
}


.nl-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--bbw-gold-border, rgba(184, 146, 90, 0.28));
  border-radius: 2px;
  padding: 4px 11px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--bbw-gold-vivid, #CBA45C);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.nl-badge-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bbw-gold-vivid, #CBA45C);
}


.nl-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 239, 229, 0.55);
  margin-bottom: 12px;
}
.nl-dot {
  width: 18px;
  height: 1px;
  border-radius: 0;
  background: var(--bbw-gold, #B8925A);
  flex-shrink: 0;
}


.nl-title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 2.35rem;
  font-weight: 600;
  color: var(--bbw-white, #F6EFE5);
  line-height: 1.08;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.nl-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--bbw-gold-light, #e8bc6a);
}


.nl-subtitle {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.82rem;
  color: rgba(246, 239, 229, 0.55);
  line-height: 1.7;
  margin-bottom: 18px;
  max-width: 30ch;
}


.nl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.nl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(184, 146, 90, 0.22);
  border-radius: 2px;
  padding: 5px 11px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: rgba(246, 239, 229, 0.68);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.nl-pill:hover {
  border-color: rgba(184, 146, 90, 0.45);
  color: rgba(246, 239, 229, 0.90);
}
.nl-pill i {
  font-size: 10px;
  color: var(--bbw-gold, #B8925A);
}


.nl-divider {
  width: 1px;
  height: 120px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(184, 146, 90, 0.30),
    transparent
  );
  flex-shrink: 0;
}


.nl-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.nl-social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nl-avatars { display: flex; }
.nl-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--bbw-black, #15110E);
  box-shadow: 0 0 0 1px rgba(184, 146, 90, 0.35);
  margin-left: -9px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bbw-white, #F6EFE5);
}
.nl-av:first-child { margin-left: 0; }
.nl-av--1 { background: #6E2439; }
.nl-av--2 { background: #4e2748; }
.nl-av--3 { background: #8a6425; }
.nl-av--4 { background: #2b2723; }

.nl-stars {
  color: var(--bbw-gold, #B8925A);
  font-size: 11px;
  letter-spacing: 2px;
}
.nl-proof-text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.72rem;
  color: rgba(246, 239, 229, 0.45);
  margin: 2px 0 0;
  letter-spacing: 0.01em;
}
.nl-proof-text strong {
  font-weight: 600;
  color: rgba(246, 239, 229, 0.88);
}


.nl-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(246, 239, 229, 0.04);
  border: 1px solid var(--bbw-gold-border, rgba(184, 146, 90, 0.28));
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.nl-input-wrap:focus-within {
  border-color: var(--bbw-gold, #B8925A);
  background: rgba(246, 239, 229, 0.06);
  box-shadow: 0 0 0 3px rgba(184, 146, 90, 0.10);
}

.nl-icon {
  flex-shrink: 0;
  color: rgba(246, 239, 229, 0.35);
  font-size: 14px;
  padding-left: 18px;
}
.nl-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 14px;
  font-size: 0.82rem;
  color: var(--bbw-white, #F6EFE5);
  font-family: var(--font-body, 'Inter', sans-serif);
}
.nl-input::placeholder {
  color: rgba(246, 239, 229, 0.35);
}


.nl-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bbw-gold, #B8925A);
  border: none;
  border-radius: 3px;
  padding: 12px 24px;
  margin: 4px;
  cursor: pointer;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bbw-black, #15110E);
  white-space: nowrap;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 12px rgba(184, 146, 90, 0.25);
}
.nl-btn:hover {
  background: var(--bbw-gold-vivid, #CBA45C);
  box-shadow: 0 4px 18px rgba(184, 146, 90, 0.35);
}
.nl-btn:active   { background: var(--bbw-gold, #B8925A); }
.nl-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.nl-btn i { font-size: 12px; }


.nl-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.nl-privacy {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.66rem;
  color: rgba(246, 239, 229, 0.32);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
}
.nl-privacy i {
  font-size: 10px;
  color: rgba(246, 239, 229, 0.30);
}
.nl-perks { display: flex; gap: 16px; }
.nl-perk {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.66rem;
  color: rgba(246, 239, 229, 0.42);
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.02em;
}
.nl-perk i {
  font-size: 9px;
  color: var(--bbw-gold, #B8925A);
}


#nl-success-msg {
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(184, 146, 90, 0.08);
  border: 1px solid var(--bbw-gold-border, rgba(184, 146, 90, 0.28));
  border-radius: 4px;
  padding: 13px 16px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.82rem;
  color: rgba(246, 239, 229, 0.82);
}
#nl-success-msg i {
  color: var(--bbw-gold, #B8925A);
  font-size: 16px;
}


.newsletter-success-popup {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--bbw-black, #15110E);
  border-radius: 6px;
  padding: 30px 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.50);
  border: 1px solid var(--bbw-gold-border, rgba(184, 146, 90, 0.28));
  z-index: 99999;
  max-width: 320px;
  text-align: center;
}
.newsletter-success-popup.show { display: block; }
.newsletter-success-popup .popup-icon i {
  font-size: 28px;
  color: var(--bbw-gold, #B8925A);
}
.newsletter-success-popup h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--bbw-white, #F6EFE5);
  margin: 12px 0 8px;
}
.newsletter-success-popup p {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.80rem;
  color: rgba(246, 239, 229, 0.55);
  margin-bottom: 18px;
  line-height: 1.6;
}
.newsletter-success-popup button {
  background: var(--bbw-gold, #B8925A);
  color: var(--bbw-black, #15110E);
  border: none;
  border-radius: 3px;
  padding: 10px 26px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(184, 146, 90, 0.25);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.newsletter-success-popup button:hover {
  background: var(--bbw-gold-vivid, #CBA45C);
  box-shadow: 0 4px 18px rgba(184, 146, 90, 0.35);
}


@media (max-width: 768px) {
  .nl-section { padding: 32px 0; }
  .nl-inner {
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
    padding: 0 1.25rem;
  }
  .nl-left    { max-width: 100%; }
  .nl-divider { display: none; }
  .nl-title   { font-size: 1.9rem; }
  .nl-subtitle { max-width: 100%; }
  .nl-right   { width: 100%; }
  .nl-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .nl-btn span { display: none; }
  .nl-btn { padding: 12px 18px; }
}

/* ══════════════════════════════════════════
   NEWSLETTER — IMAGE BANNER (style custom-banner)
══════════════════════════════════════════ */

@keyframes nl-cb-img-float {
  0%, 100% { transform: scale(1.04) translateY(0); }
  50%       { transform: scale(1.06) translateY(-4px); }
}
@keyframes nl-cb-overlay-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.92; }
}
@keyframes nl-cb-shimmer-run {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}


.nl-bg-images {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.nl-bg-img {
  position: absolute;
  inset: 0;
}
.nl-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  animation: nl-cb-img-float 8s ease-in-out infinite;
  filter: brightness(0.55) saturate(0.80);
}


.nl-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  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%
  );
  animation: nl-cb-overlay-pulse 6s ease-in-out infinite;
}


.nl-bg-shimmer-top,
.nl-bg-shimmer-bottom {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,150,62,0.60) 30%,
    rgba(232,188,106,0.90) 50%,
    rgba(201,150,62,0.60) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: nl-cb-shimmer-run 3s linear infinite;
}
.nl-bg-shimmer-top    { top: 0; }
.nl-bg-shimmer-bottom { bottom: 0; animation-delay: 1.5s; }




.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.cart-item-img-wrap {
  position: relative;
  display: inline-block;
}


.cart-item-warning-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 15px;
  height: 15px;
  background: var(--bbw-rose);
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 0 0 1px rgba(110,36,57,0.25), 0 2px 6px rgba(21,17,14,0.20);
}
.cart-item-warning-dot::after {
  content: '!';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body, sans-serif);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  color: var(--bbw-gold-light);
}

@keyframes pulse-warning {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110, 36, 57, 0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(110, 36, 57, 0); }
}


.cart-item-warning-tooltip {
  display: none;
  position: absolute;
  top: 22px;
  left: -10px;
  width: 220px;
  background: #1a1a1a;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 8px;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.cart-item-warning-tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 12px;
  border: 6px solid transparent;
  border-bottom-color: #1a1a1a;
  border-top: none;
}

.cart-item-warning-dot:hover .cart-item-warning-tooltip {
  display: block;
}


.cart-item-request-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 4px;
  padding: 5px 12px;
  background: linear-gradient(135deg, var(--bbw-rose), var(--bbw-rose-light));
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.cart-item-request-btn:hover {
  transform: scale(1.03);
  opacity: 0.92;
}

.cart-item-request-btn i {
  font-size: 11px;
}





#checkout-block-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cbp-modal {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: cbp-in 0.25s ease;
}

@keyframes cbp-in {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);     }
}

.cbp-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.cbp-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 12px;
}

.cbp-msg {
  font-size: 13px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 24px;
}

.cbp-msg strong {
  color: var(--bbw-rose);
}

.cbp-btn--close {
  background: linear-gradient(135deg, var(--bbw-rose), var(--bbw-rose-light));
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.cbp-btn--close:hover {
  opacity: 0.88;
}


/* ══════════════════════════════════════════════════════
   READING PROGRESS BAR — global
══════════════════════════════════════════════════════ */
#reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #1e1a1c, #c9963e, #e8bc6a);
  z-index: 99999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}




.bbw-stories-section,
.bss-videos-wrap,
.comm-reviews-section,
.bundle-deal-section {
  will-change: transform;
  transform: translateZ(0);
}

.bss-video-inner,
.comm-rev-card {
  contain: layout style paint;
}

.bd-orb, .fs-orb, .bss-orb, .comm-orb {
  will-change: auto;
  contain: strict;
}

@media (max-width: 768px) {
  .cart-drawer,
  .paul-popup,
  .cf-chat-window {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}



i[class*="fi"],
i[class*="fa"] {
    visibility: hidden;
}

.fonts-loaded i[class*="fi"],
.fonts-loaded i[class*="fa"] {
    visibility: visible;
}



/* ══════════════════════════════════════
   FOUNDER PHOTO — Chat Widget
══════════════════════════════════════ */
.cf-founder-img {
  width: 100%;
  max-width: 200px;
  border-radius: 14px;
  display: block;
  margin: 10px auto;
  border: 2px solid rgba(201, 150, 62, 0.45);
  box-shadow: 0 4px 20px rgba(192, 56, 94, 0.18);
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cf-founder-img:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 30px rgba(192, 56, 94, 0.28);
}


.cf-founder-caption {
  text-align: center;
  font-size: 0.75rem;
  color: var(--os-muted, #999);
  margin-top: 4px;
  font-style: italic;
}

/* ══════════════════════════════════════
   Masquer le flash bleu de tap-highlight mobile
   (site-wide, tous elements cliquables — pas
   seulement les liens <a>). !important car ce
   fichier charge en premier ; sans lui, une regle
   plus specifique chargee apres (products.css,
   header.css, collections.css, footer.css) peut
   reintroduire le flash sur un composant precis.
══════════════════════════════════════ */
/* Approche la plus radicale (recommandee pour eliminer TOTALEMENT le
   flash) : appliquer sur html/* directement au lieu d'enumerer chaque
   type d'element cliquable — un <summary>, <details>, <label>, div avec
   cursor:pointer en JS, etc. sont tous nativement/potentiellement
   focusables et peuvent recevoir ce flash sur mobile, meme sans figurer
   dans une liste de selecteurs explicite. */
html {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
}
* {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
}

a, a *, button, button *, input, textarea, select, label, label *,
summary, summary *, details,
[onclick], [onclick] *, [role="button"], [role="button"] *, [tabindex] {
  -webkit-touch-callout: none !important;
}

a, button, summary, [onclick], [role="button"], [tabindex] {
  outline: none !important;
}

a:focus,
a:focus-visible,
a:active,
button:focus,
button:active,
summary:focus,
summary:active,
[onclick]:focus,
[onclick]:active,
[role="button"]:focus,
[role="button"]:active {
  outline: none !important;
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}

a::selection, a *::selection,
button::selection, button *::selection {
  background: transparent !important;
}




/* ═══════════════════════════════════════════════════════════════
   BBW4LIFE — BIRTHDAY GIFT ICON + POPUP
   birthday-gift.css
═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   VARIABLES
────────────────────────────────────────────────────────────── */
:root {
  --bday-rose:   #6E2439;
  --bday-gold:   #B8925A;
  --bday-plum:   #4A1A2A;
  --bday-light:  #F6EFE5;
  --bday-shadow: rgba(110, 36, 57, 0.35);
  --bday-radius: 8px;
}

/* ──────────────────────────────────────────────────────────────
   CANVAS PETAL BURST
────────────────────────────────────────────────────────────── */
#bbw-bday-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 90;
  display: none;
}

/* ──────────────────────────────────────────────────────────────
   FLOATING GIFT BUTTON — taille réduite
────────────────────────────────────────────────────────────── */
.bbw-bday-gift-btn {
  position: fixed;
  bottom: 160px;
  left: 18px;
  z-index: 90;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--bday-rose), var(--bday-plum));
  box-shadow:
    0 6px 24px var(--bday-shadow),
    0 2px 8px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1),
              box-shadow 0.25s ease;
  will-change: transform;
  outline: none;
}

/* Position desktop — droite */
.bbw-bday-gift-btn.bbw-bday--desktop-right {
  left: auto;
  right: 18px;
}
/* Position mobile — gauche (par défaut) */
@media (max-width: 768px) {
  .bbw-bday-gift-btn.bbw-bday--mobile-right {
    left: auto;
    right: 10px;
    bottom: 70px;
  }
  .bbw-bday-gift-btn.bbw-bday--mobile-left {
    left: 10px;
    right: auto;
    bottom: 70px;
  }
}

.bbw-bday-gift-btn:hover,
.bbw-bday-gift-btn:focus-visible {
  transform: scale(1.12) rotate(-6deg);
  box-shadow:
    0 10px 32px var(--bday-shadow),
    0 4px 12px rgba(0,0,0,.22);
}

.bbw-bday-gift-btn:active {
  transform: scale(0.95);
}

/* Bounce au chargement */
@keyframes bday-btn-bounce {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(4deg); opacity: 1; }
  80%  { transform: scale(0.95) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.bbw-bday-gift-btn {
  animation: bday-btn-bounce 0.7s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Wiggle toutes les 6s — adouci */
@keyframes bday-btn-wiggle {
  0%,100% { transform: rotate(0); }
  25%     { transform: rotate(-4deg) scale(1.03); }
  55%     { transform: rotate(3deg); }
  80%     { transform: rotate(-1.5deg); }
}
.bbw-bday-gift-btn.bbw-bday--wiggle {
  animation: bday-btn-wiggle 0.9s ease-in-out;
}

/* SVG — taille réduite */
.bbw-bday-gift-svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}

/* Dot notification */
.bbw-bday-gift-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 11px;
  height: 11px;
  background: var(--bbw-gold-light);
  border: 2px solid #fff;
  border-radius: 50%;
  display: none;
}
.bbw-bday-gift-dot.bbw-bday--visible {
  display: block;
  animation: bday-dot-pulse 2.2s infinite;
}
@keyframes bday-dot-pulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(184,146,90,.6); }
  50%     { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(184,146,90,0); }
}

/* Pulse ring */
.bbw-bday-gift-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(184,146,90,.45);
  animation: bday-ring-pulse 3s ease-out infinite;
  pointer-events: none;
}
@keyframes bday-ring-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ──────────────────────────────────────────────────────────────
   OVERLAY
────────────────────────────────────────────────────────────── */
.bbw-bday-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99991 !important;
  background: rgba(21, 17, 14, 0.75) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease !important;
}

.bbw-bday-overlay::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.bbw-bday-overlay.bbw-bday--open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.bbw-bday-modal {
  position: relative !important;
  z-index: 1 !important;
}

/* ──────────────────────────────────────────────────────────────
   MODAL — fond noir pur
────────────────────────────────────────────────────────────── */
.bbw-bday-modal {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: 95vh;
  overflow: hidden;
  border-radius: var(--bday-radius);
  background: var(--bbw-black);
  box-shadow:
    0 0 0 1px rgba(184,146,90,.22),
    0 24px 80px rgba(21,17,14,.65),
    0 0 60px rgba(110,36,57,.14) inset;
  transform: scale(0.86) translateY(30px);
  transition: transform 0.45s cubic-bezier(.34,1.4,.64,1),
              opacity   0.35s ease;
  opacity: 0;
  display: flex;
  flex-direction: column;
}
.bbw-bday-overlay.bbw-bday--open .bbw-bday-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Shimmer border */
.bbw-bday-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--bday-radius);
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(184,146,90,.40) 25%,
    rgba(110,36,57,.35) 50%,
    rgba(184,146,90,.40) 75%,
    transparent 100%
  );
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: bday-border-spin 12s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes bday-border-spin {
  to { transform: rotate(360deg) scale(1.02); }
}

/* Particules internes */
.bbw-bday-modal-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bbw-bday-modal-ptcl {
  position: absolute;
  border-radius: 50%;
  animation: bday-ptcl-rise linear infinite;
  opacity: 0;
}
@keyframes bday-ptcl-rise {
  0%   { transform: translateY(100%) scale(0); opacity: 0; }
  15%  { opacity: .8; }
  85%  { opacity: .4; }
  100% { transform: translateY(-20px) scale(1.2); opacity: 0; }
}

/* Confettis */
.bbw-bday-confetti-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.bbw-bday-confetti-piece {
  position: absolute;
  top: -10px;
  animation: bday-conf-fall linear forwards;
  border-radius: 2px;
}
@keyframes bday-conf-fall {
  0%   { transform: translateY(0) rotate(0) scale(1);   opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg) scale(.5); opacity: 0; }
}

/* Bouton fermer */
.bbw-bday-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  backdrop-filter: blur(4px);
}
.bbw-bday-close:hover {
  background: rgba(110,36,57,.6);
  transform: rotate(90deg) scale(1.1);
  color: #fff;
}

/* ──────────────────────────────────────────────────────────────
   HEADER MARQUEE — texte blanc
────────────────────────────────────────────────────────────── */
.bbw-bday-marquee-wrap {
  position: relative;
  z-index: 3;
  overflow: hidden;
  background: linear-gradient(90deg,
    var(--bbw-rose),
    var(--bday-plum),
    var(--bbw-rose)
  );
  padding: 8px 0;
  border-bottom: 1px solid rgba(184,146,90,.3);
}
.bbw-bday-marquee-wrap::before,
.bbw-bday-marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40px;
  z-index: 2;
}
.bbw-bday-marquee-wrap::before { left: 0;  background: linear-gradient(90deg, var(--bbw-rose), transparent); }
.bbw-bday-marquee-wrap::after  { right: 0; background: linear-gradient(-90deg, var(--bbw-rose), transparent); }

.bbw-bday-marquee-track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: bday-marquee 44s linear infinite;
  will-change: transform;
}
.bbw-bday-marquee-wrap:hover .bbw-bday-marquee-track {
  animation-play-state: paused;
}
@keyframes bday-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.bbw-bday-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--bbw-white, #F6EFE5);
  text-transform: uppercase;
}
.bbw-bday-marquee-sep {
  color: var(--bbw-gold-light, #e8bc6a);
  opacity: 0.7;
  margin: 0 8px;
}

/* ──────────────────────────────────────────────────────────────
   BALLONS
────────────────────────────────────────────────────────────── */
.bbw-bday-balloons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.bbw-bday-balloon {
  position: absolute;
  font-size: 1.4rem;
  animation: bday-balloon-float ease-in-out infinite alternate;
  opacity: 0.28;
}
.bbw-bday-balloon--1 { left: 6%;  top: 18%; animation-duration: 5.0s; animation-delay: 0s;    }
.bbw-bday-balloon--2 { right: 8%; top: 12%; animation-duration: 5.6s; animation-delay: .6s;   }
.bbw-bday-balloon--3 { display: none; }
.bbw-bday-balloon--4 { display: none; }
.bbw-bday-balloon--5 { display: none; }
@keyframes bday-balloon-float {
  from { transform: translateY(0)   rotate(-4deg); }
  to   { transform: translateY(-9px) rotate(4deg); }
}

/* ──────────────────────────────────────────────────────────────
   BODY
────────────────────────────────────────────────────────────── */
.bbw-bday-body {
  position: relative;
  z-index: 3;
  padding: 20px 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  width: 100%;
}

/* Titre */
.bbw-bday-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bbw-bday-cake-icon {
  font-size: 1.7rem;
  animation: bday-cake-bounce 3s ease-in-out infinite alternate;
}
@keyframes bday-cake-bounce {
  from { transform: scale(1)    rotate(-3deg); }
  to   { transform: scale(1.06) rotate(3deg); }
}
.bbw-bday-main-title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1.7rem;
  font-weight: 600;
  background: linear-gradient(90deg, var(--bbw-gold), #F6EFE5, var(--bbw-gold-light));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: bday-title-shimmer 6s linear infinite;
  text-align: center;
  margin: 0;
  letter-spacing: 0.01em;
}
@keyframes bday-title-shimmer {
  to { background-position: 200% center; }
}

/* ──────────────────────────────────────────────────────────────
   CAROUSEL
────────────────────────────────────────────────────────────── */
.bbw-bday-carousel-wrap {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.bbw-bday-carousel {
  display: flex;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* ──────────────────────────────────────────────────────────────
   BIRTHDAY CARD
────────────────────────────────────────────────────────────── */
.bbw-bday-card {
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  background: linear-gradient(145deg,
    rgba(246,239,229,.06),
    rgba(246,239,229,.02)
  );
  border: 1px solid var(--bbw-gold-border);
  border-radius: 6px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  transition: transform 0.42s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  position: relative;
  overflow: hidden;
}

/* Shimmer de fond sur la card */
.bbw-bday-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%,
    rgba(184,146,90,.10) 0%,
    transparent 65%
  );
  pointer-events: none;
}

/* Transition slide */
.bbw-bday-carousel.bbw-bday--slide-left  .bbw-bday-card { animation: bday-slide-in-l 0.42s cubic-bezier(.4,0,.2,1); }
.bbw-bday-carousel.bbw-bday--slide-right .bbw-bday-card { animation: bday-slide-in-r 0.42s cubic-bezier(.4,0,.2,1); }
@keyframes bday-slide-in-l {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes bday-slide-in-r {
  from { transform: translateX(-60px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Placeholder */
.bbw-bday-card--placeholder {
  border-style: dashed;
  border-color: rgba(201,150,62,.18);
  background: transparent;
  min-height: 140px;
  justify-content: center;
}
.bbw-bday-no-bday {
  font-size: 0.85rem;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
  margin: 8px 0 0;
}

/* Avatar */
.bbw-bday-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bday-rose), var(--bday-plum));
  border: 3px solid var(--bday-gold);
  box-shadow: 0 4px 16px rgba(201,150,62,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  animation: bday-avatar-pop 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
.bbw-bday-avatar--placeholder { font-size: 2rem; }
@keyframes bday-avatar-pop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0);      opacity: 1; }
}

/* Crown au-dessus avatar */
.bbw-bday-crown {
  position: absolute;
  top: -14px;
  font-size: 1.05rem;
  animation: bday-crown-bounce 3.2s ease-in-out infinite alternate;
}
@keyframes bday-crown-bounce {
  from { transform: translateY(0) rotate(-5deg); }
  to   { transform: translateY(-3px) rotate(5deg); }
}

/* Nom */
.bbw-bday-name {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--bbw-gold-light);
  letter-spacing: 0.02em;
  margin: 0;
  word-break: break-word;
}

/* Badge anniversaire */
.bbw-bday-age-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(90deg, var(--bday-rose), var(--bday-plum));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 3px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Message */
.bbw-bday-message {
  font-size: 0.88rem;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  margin: 0;
  max-width: 100%;
  word-break: break-word;
}

/* Divider */
.bbw-bday-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--bday-gold), transparent);
  border: none;
  border-radius: 2px;
  margin: 4px 0;
}

/* Promo code */
.bbw-bday-promo-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(184,146,90,.10);
  border: 1px solid var(--bbw-gold-border);
  border-radius: 4px;
  padding: 10px 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
}
.bbw-bday-promo-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.bbw-bday-promo-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}
.bbw-bday-promo-code {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--bbw-gold-light);
  letter-spacing: 0.14em;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 12px rgba(184,146,90,.35);
}
.bbw-bday-promo-discount {
  font-size: 0.72rem;
  color: #9bc9a4;
  font-weight: 700;
}
.bbw-bday-copy-btn {
  background: linear-gradient(135deg, var(--bday-rose), var(--bday-plum));
  border: none;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  padding: 8px 14px;
  font-size: 0.76rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.bbw-bday-copy-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(110,36,57,.4);
}
.bbw-bday-copy-btn.bbw-bday--copied {
  background: linear-gradient(135deg, #22a06b, #1a7a50);
}
.bbw-bday-copy-btn svg {
  flex-shrink: 0;
}

/* Étoiles décoratives sur la card */
.bbw-bday-stars {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.bbw-bday-stars span {
  color: var(--bbw-gold);
  font-size: 0.85rem;
  animation: bday-star-twinkle ease-in-out infinite alternate;
}
.bbw-bday-stars span:nth-child(1) { animation-duration: 1.2s; }
.bbw-bday-stars span:nth-child(2) { animation-duration: 1.6s; animation-delay: .2s; }
.bbw-bday-stars span:nth-child(3) { animation-duration: 1.0s; animation-delay: .4s; }
.bbw-bday-stars span:nth-child(4) { animation-duration: 1.4s; animation-delay: .1s; }
.bbw-bday-stars span:nth-child(5) { animation-duration: 1.8s; animation-delay: .3s; }
@keyframes bday-star-twinkle {
  from { opacity: .5; transform: scale(0.9); }
  to   { opacity: 1;  transform: scale(1.1); }
}

/* ──────────────────────────────────────────────────────────────
   NAVIGATION DOTS
────────────────────────────────────────────────────────────── */
.bbw-bday-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}
.bbw-bday-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.3);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s, border-color 0.25s;
  padding: 0;
}
.bbw-bday-dot.bbw-bday--dot-active {
  background: var(--bday-gold);
  border-color: var(--bday-gold);
  transform: scale(1.3);
}

/* ──────────────────────────────────────────────────────────────
   NAVIGATION ARROWS
────────────────────────────────────────────────────────────── */
.bbw-bday-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 0.2s, transform 0.2s;
  z-index: 5;
}
.bbw-bday-arrow:hover {
  background: rgba(110,36,57,.65);
  color: #fff;
  transform: translateY(-50%) scale(1.1);
}
.bbw-bday-arrow--prev { left: -14px; }
.bbw-bday-arrow--next { right: -14px; }

/* ──────────────────────────────────────────────────────────────
   FOOTER
────────────────────────────────────────────────────────────── */
.bbw-bday-footer {
  position: relative;
  z-index: 3;
  padding: 12px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.bbw-bday-subscribe-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  padding: 14px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--bday-rose) 0%, var(--bday-plum) 100%);
  box-shadow: 0 6px 20px rgba(110,36,57,.4);
  transition: transform 0.22s, box-shadow 0.22s;
  position: relative;
  overflow: hidden;
}
.bbw-bday-subscribe-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.15) 100%);
}
.bbw-bday-subscribe-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(110,36,57,.55);
}
.bbw-bday-subscribe-btn:active {
  transform: scale(0.97);
}

.bbw-bday-footer-note {
  font-size: 0.74rem;
  color: rgba(255,255,255,.42);
  margin: 0;
  text-align: center;
}

/* ──────────────────────────────────────────────────────────────
   MOBILE — remplace tout le bloc @media (max-width: 480px) existant
────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .bbw-bday-overlay {
    padding: 6px !important;
  }
  .bbw-bday-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 91vh;
    overflow-y: auto;
    border-radius: 8px;
  }
  .bbw-bday-main-title {
    font-size: 1.35rem;
  }
  .bbw-bday-body {
    padding: 14px 12px 8px;
  }
  .bbw-bday-card {
    padding: 16px 12px 14px;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
  }
  .bbw-bday-avatar {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
  }
  .bbw-bday-name {
    font-size: 1rem;
  }
  .bbw-bday-message {
    font-size: 0.82rem;
  }
  .bbw-bday-promo-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .bbw-bday-promo-left {
    align-items: center;
    text-align: center;
  }
  .bbw-bday-promo-code {
    font-size: 0.95rem;
  }
  .bbw-bday-copy-btn {
    width: 100%;
    justify-content: center;
  }
  .bbw-bday-gift-btn {
    width: 40px;
    height: 40px;
    bottom: 130px;
  }
  .bbw-bday-gift-svg {
    width: 20px;
    height: 20px;
  }
  .bbw-bday-arrow--prev { left: -10px; }
  .bbw-bday-arrow--next { right: -10px; }
  .bbw-bday-subscribe-btn {
    max-width: 100%;
  }
}


/* ═══════════════════════════════════════════════════════
   BBW4LIFE — SETS FLOATING WIDGET + FLIPBOOK POPUP
═══════════════════════════════════════════════════════ */
#bbw-sets-widget {
  position: fixed;
  left: 14px;
  top: 82%;
  transform: translateY(-50%);
  z-index: 9997;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.bbw-sets-widget__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Playfair Display', serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--bbw-black, #15110E);
  background: rgba(255,255,255,0.88);
  padding: 6px 3px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  user-select: none;
}

.bbw-sets-widget__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.bbw-sets-widget__circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  padding: 0;
  border: 1px solid rgba(184,146,90,0.45);
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bbw-sets-widget__circle:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}

.bbw-sets-widget__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.bbw-sets-widget__collapse {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  padding: 0;
  border: none;
  background: var(--bbw-black, #15110E);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  flex: 0 0 auto;
}

.bbw-sets-widget__collapse svg {
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  #bbw-sets-widget { left: 8px; }
  .bbw-sets-widget__label { font-size: 0.64rem; padding: 5px 2px; }
}

/* ── OVERLAY ── */
#bbw-sets-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 20px;
  /* Isole son propre contexte de composition GPU : sur Safari/Firefox,
     un backdrop-filter actif au-dessus de cartes encore animées
     (transitions/transform des collections) peut provoquer des glitches
     de repaint pendant l'animation 3D du flipbook (comportement stable
     sur Chrome uniquement). contain empêche ce contexte d'interagir
     avec le rendu des éléments en dessous, sans toucher à leur CSS. */
  contain: layout paint;
}

#bbw-sets-overlay.active {
  display: flex;
}

#bbw-sets-flipbook-wrap {
  position: relative;
  width: min(320px, 90vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#bbwSetsCloseBtn {
  position: absolute;
  top: -38px;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--bbw-black, #15110E);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  z-index: 2;
}

/* ── FLIPBOOK ──
   Un seul niveau de perspective/preserve-3d, posé au plus près des
   éléments qui tournent réellement (.bbw-sets-cover / .bbw-sets-page,
   cf. plus bas) — empiler perspective+preserve-3d sur plusieurs niveaux
   parent/enfant (ici + .bbw-sets-pages) est toléré par Chromium mais se
   comporte différemment sur Gecko/WebKit (repaint instable, effet
   "coupe et reprend" pendant la rotation). */
.bbw-sets-flipbook {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 3.6;
  max-height: 62vh;
  border-radius: 12px;
}

.bbw-sets-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--bbw-black, #15110E);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  z-index: 60;
  transition: background 0.2s ease, transform 0.2s ease;
}

.bbw-sets-flipbook.is-open .bbw-sets-nav-arrow {
  display: flex;
}

.bbw-sets-nav-arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}

.bbw-sets-nav-arrow--prev { left: -14px; }
.bbw-sets-nav-arrow--next { right: -14px; }

@media (max-width: 480px) {
  .bbw-sets-nav-arrow--prev { left: 2px; }
  .bbw-sets-nav-arrow--next { right: 2px; }
}

.bbw-sets-cover {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1.1s cubic-bezier(0.65,0,0.35,1);
  transition: transform 1.1s cubic-bezier(0.65,0,0.35,1);
  z-index: 50;
  cursor: pointer;
}

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

.bbw-sets-cover__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55));
}

.bbw-sets-cover__title {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
}

.bbw-sets-cover__sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bbw-sets-flipbook.is-open .bbw-sets-cover {
  -webkit-transform: rotateY(-160deg);
  transform: rotateY(-160deg);
  box-shadow: -10px 10px 30px rgba(0,0,0,0.3);
  z-index: 1;
}

/* Dès qu'au moins une page a tourné (.has-turned-page posée par le JS sur
   .bbw-sets-flipbook), la peau ouverte n'a plus besoin d'être visible —
   en rendu 3D perspective, un rotateY() ne la met jamais strictement de
   profil comme une vraie page de livre : elle reste visible en biais
   derrière la première page tournée si on ne la masque pas explicitement. */
.bbw-sets-flipbook.has-turned-page .bbw-sets-cover {
  visibility: hidden;
}

.bbw-sets-pages {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: #fdfcf9;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  -webkit-perspective: 1800px;
  perspective: 1800px;
}

.bbw-sets-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fdfcf9;
  border-radius: 12px;
  overflow: hidden;
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.9s cubic-bezier(0.65,0,0.35,1), box-shadow 0.9s ease;
  transition: transform 0.9s cubic-bezier(0.65,0,0.35,1), box-shadow 0.9s ease;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  pointer-events: none;
  z-index: 1;
}

.bbw-sets-page.is-active {
  pointer-events: auto;
  z-index: 5;
}

.bbw-sets-page.is-turned {
  /* -179deg (pas -180 pile, qui aplatit le rendu 3D) : la page finit
     quasiment face à l'écran, à plat par-dessus la couverture — c'est le
     z-index (cf. JS showPage) qui doit garantir qu'elle la recouvre. */
  -webkit-transform: rotateY(-179deg);
  transform: rotateY(-179deg);
  box-shadow: 8px 0 20px rgba(0,0,0,0.2);
}

.bbw-sets-page__image-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #f2ede4;
}

.bbw-sets-page__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.bbw-sets-page__discount {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--rose, #c0385e);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.bbw-sets-page__wishlist {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.bbw-sets-page__wishlist svg { display: block; }
.bbw-sets-page__wishlist .wishlist-icon-filled { display: none; }
.bbw-sets-page__wishlist.added .wishlist-icon-empty  { display: none; }
.bbw-sets-page__wishlist.added .wishlist-icon-filled { display: block; }

.bbw-sets-page__body {
  flex: 0 0 auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fdfcf9;
}

.bbw-sets-page__title {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bbw-black, #15110E);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bbw-sets-page__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.bbw-sets-page__price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bbw-black, #15110E);
}

.bbw-sets-page__compare {
  font-size: 0.82rem;
  color: #999;
  text-decoration: line-through;
}

.bbw-sets-page__btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--bbw-black, #15110E);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s ease;
}

.bbw-sets-page__btn:hover {
  background: #2a221b;
}

/* ── FOOTER : dots + view all ── */
.bbw-sets-flipbook-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}

.bbw-sets-dots {
  display: flex;
  gap: 6px;
}

.bbw-sets-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: background 0.25s ease, transform 0.25s ease;
}

.bbw-sets-dots span.is-active {
  background: #fff;
  transform: scale(1.3);
}

.bbw-sets-viewall-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.bbw-sets-viewall-btn:hover {
  background: rgba(255,255,255,0.12);
}

@media (max-width: 480px) {
  #bbw-sets-flipbook-wrap { width: 100%; }
  .bbw-sets-cover__title { font-size: 1.8rem; }
  .bbw-sets-page__title { font-size: 0.85rem; }
  .bbw-sets-flipbook-footer { justify-content: center; }
}

/* body.bbw-sets-popup-open est posée par script.js (openSetsPopup) tant que
   ce popup 3D est ouvert, mais n'était exploitée nulle part côté CSS — le
   correctif annoncé par son propre commentaire dans script.js ("suspend les
   animations continues en arrière-plan… conflit de repaint sur les moteurs
   non-Chromium") n'existait donc pas encore en pratique. Suspend ici les
   animations infinies les plus globales du site (marquees + shimmer
   skeleton, présents sur la plupart des pages où ce widget flottant peut
   apparaître), avec le même mécanisme déjà utilisé ailleurs sur hover
   (cf. .cart-marquee:hover, .story-circles-track:hover) — juste déclenché
   par cette classe plutôt que par un survol. */
body.bbw-sets-popup-open .cart-marquee .marquee-content,
body.bbw-sets-popup-open .story-circles-marquee-inner,
body.bbw-sets-popup-open .skel-shimmer {
  animation-play-state: paused;
}