/* =========================================================
   PUFFS.CH �?" STYLE CLEAN CONSOLID�? V2
   Généré depuis le CSS actuel.
   Version expansée : les sélecteurs groupés ont été séparés,
   puis chaque sélecteur garde la dernière valeur rencontrée
   pour chaque propriété dans son contexte normal ou @media.
========================================================= */


/* ===================== BASE + COMPOSANTS ===================== */

:root {
  --puffs-purple: #7c5cff;
  --puffs-purple-dark: #6d4aff;
  --puffs-purple-soft: #9f7bff;
  --puffs-pink: #ff4fd8;
  --puffs-ink: #111827;
  --puffs-muted: #6b7280;
  --puffs-border: rgba(124, 92, 255, .12);
  --puffs-bg: #fbf8ff;
  --puffs-card: #ffffff;
  --puffs-radius-lg: 28px;
  --puffs-radius-md: 22px;
  --puffs-shadow-soft: 0 14px 32px rgba(124, 92, 255, .08);
  --puffs-shadow-hover: 0 22px 46px rgba(124, 92, 255, .14);
}

* {
  box-sizing: border-box;
}

/* Accessibilite / SEO : contenu lisible par les lecteurs d'ecran et les
   moteurs, mais masque visuellement (ex. <h1> de la page d'accueil). */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  margin: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: clip;
  /* auto : conserve le pull-to-refresh mobile (tirer vers le bas tout en haut).
     Ne pas mettre none/contain ici sur mobile, cela desactive le refresh natif.
     Sur PC (voir media query plus bas) on passe a none pour supprimer l'effet
     elastique/rebond qui cree un vide entre la trust bar et la banniere hero. */
  overscroll-behavior-y: auto;
  background: #ffffff;
  color: var(--puffs-ink);
  font-family: Inter, Arial, sans-serif;
}

body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: #ffffff;
  color: var(--puffs-ink);
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  padding-top: 104px;
}

/* Sur PC (souris / grand ecran) : desactive le rebond elastique du scroll tout
   en haut de page qui cree un vide entre la trust bar et la banniere hero.
   On garde le pull-to-refresh natif sur mobile (media query non appliquee la). */
@media (min-width: 992px) and (pointer: fine) {
  html {
    overscroll-behavior-y: none;
  }
}

img {
  max-width: 100%;
}

.container {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 28px;
}

.age-overlay {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 30% 50%, rgba(109, 74, 255, .14), transparent 34%),
    radial-gradient(circle at 70% 50%, rgba(56, 189, 248, .12), transparent 36%),
    rgba(15, 23, 42, .75);
  overflow: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

html[data-age-verified="true"] .age-overlay,
html[data-age-verified="pending"] .age-overlay {
  display: none;
}

/* Verrou de d�filement tant que l'�ge n'est pas confirm� : emp�che la page de
   scroller derri�re l'overlay (le header sticky se compactait au scroll et
   faisait clignoter la fine bordure de la trust bar). */
html[data-age-verified="false"],
html[data-age-verified="false"] body {
  overflow: hidden !important;
}

/* Tant que le pop-up +18 ans est affich�, on neutralise TOUT effet/animation sur
   le site derri�re : le fond de l'overlay est opaque, donc rien ne doit se
   repeindre ni s'animer derri�re (sinon une couture de compositing scintille
   quand on survole les onglets du navigateur). */
html[data-age-verified="false"] .site-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-age-verified="false"] body *:not(.age-overlay):not(.age-overlay *) {
  animation-play-state: paused !important;
  transition: none !important;
}

.age-modal {
  width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 22px 30px 22px;
  text-align: center;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(124, 92, 255, .14);
  border-radius: 26px;
  box-shadow: 0 34px 90px rgba(31, 41, 55, .14),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

.age-logo {
  display: block;
  max-width: 250px;
  margin: 22px auto -40px;
}

.age-modal .age-logo {
  max-width: 250px;
}

.age-icon-img {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* S�parateur d�coratif entre le logo et le badge +18 (comble le vide). */
.age-divider {
  display: block;
  width: 132px;
  height: 8px;
  margin: -14px auto 6px;
  position: relative;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124, 92, 255, .45) 30%,
    rgba(124, 92, 255, .55) 50%,
    rgba(124, 92, 255, .45) 70%,
    transparent
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 1.5px;
}
.age-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, #7c5cff, #b44cff);
  border-radius: 1.5px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .96),
    0 2px 8px rgba(124, 92, 255, .35);
}

.age-modal h2 {
  margin: 0 0 10px;
  color: var(--puffs-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.5px;
}

.age-modal p {
  max-width: 340px;
  margin: 0 auto 18px;
  color: #374151;
  font-size: 14px;
  line-height: 1.5;
}

.age-btn {
  width: 100%;
  max-width: 200px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--puffs-purple-dark), #8e6bff);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(109, 74, 255, .3);
  transition: .25s ease;
}

.age-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(109, 74, 255, .36);
}

.age-exit {
  display: block;
  width: fit-content;
  margin: 18px auto 0;
  color: var(--puffs-muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: .25s ease;
}

.age-exit:hover {
  color: var(--puffs-purple-dark);
}

.site-header {
  position: fixed !important;
  top: 0;
  z-index: 9999;
  background: linear-gradient(
      135deg,
      rgba(250,247,255,.96),
      rgba(255,250,253,.95)
    );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 0;
  box-shadow: 0 10px 34px rgba(124,92,255,.05);
  display: flex !important;
  flex-direction: column !important;
  left: 0;
  right: 0;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.top-bar {
  min-height: 32px !important;
  display: flex;
  align-items: center;
  justify-content: center !important;
  gap: 42px !important;
  padding: 0 28px !important;
  background: linear-gradient(90deg, #f4efff 0%, #ecf3ff 100%) !important;
  border-bottom: 1px solid rgba(124,77,255,.16) !important;
  color: #3a3168;
  font-size: 11.5px !important;
  font-weight: 800;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  order: 2 !important;
  width: 100% !important;
  height: 32px !important;
  margin: 0 !important;
  backdrop-filter: none !important;
  border-top: 0 !important;
  box-shadow: 0 2px 10px rgba(124,77,255,.07) !important;
  overflow: hidden !important;
}

/* Trust bar responsive : reduction progressive des mentions pour eviter tout
   debordement (la regle @820 sans !important etait neutralisee par la base).
   >1024px : 5 mentions | 641-1024px : 3 mentions | <=640px : 2 mentions. */
@media (max-width: 1024px) {
  .top-bar {
    gap: 22px !important;
    padding: 0 18px !important;
  }
  .top-bar > span:nth-child(2),
  .top-bar > span:nth-child(3) {
    display: none !important;
  }
}

.header-trust {
  min-height: 30px !important;
  display: flex;
  align-items: center;
  justify-content: center !important;
  gap: 42px !important;
  padding: 0 28px !important;
  background: rgba(255,255,255,.50) !important;
  border-bottom: 0 !important;
  color: #4b5563;
  font-size: 11px !important;
  font-weight: 800;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  order: 2 !important;
  width: 100% !important;
  height: 30px !important;
  margin: 0 !important;
  backdrop-filter: none !important;
  border-top: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.top-bar::-webkit-scrollbar {
  display: none;
}

.header-trust::-webkit-scrollbar {
  display: none;
}

.header-trust-inner::-webkit-scrollbar {
  display: none;
}

.header-trust-inner {
  width: auto !important;
  max-width: 1400px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 42px !important;
  overflow-x: auto;
  scrollbar-width: none;
  height: 30px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

.top-bar span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #3a3168;
  font-size: 11.5px !important;
  font-weight: 850 !important;
}

.header-trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px;
  color: #4b5563;
  font-size: 11px !important;
  font-weight: 850 !important;
  flex: 0 0 auto !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.top-bar i {
  width: 15px !important;
  height: 15px !important;
  color: #7c4dff !important;
  stroke: #7c4dff !important;
  filter: drop-shadow(0 0 8px rgba(124,77,255,.28));
  font-size: 18px !important;
}

.top-bar svg {
  width: 15px !important;
  height: 15px !important;
  color: #7c4dff !important;
  stroke: #7c4dff !important;
  filter: drop-shadow(0 0 8px rgba(124,77,255,.28));
  font-size: 18px !important;
}

.htrust-icon {
  width: 15px !important;
  height: 15px !important;
  color: #2f80ff;
  stroke: #2f80ff;
  filter: drop-shadow(0 0 8px rgba(47,128,255,.22));
}

.swiss-company {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.swiss-company img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255,0,0,.14);
}

.main-header {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 18px;
  background: linear-gradient(
      90deg,
      rgba(248,243,255,.96) 0%,
      rgba(255,245,252,.94) 28%,
      rgba(243,247,255,.95) 58%,
      rgba(250,240,255,.96) 100%
    );
  border-bottom: 1px solid rgba(124,92,255,.08);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(124,92,255,.05);
  width: 100% !important;
  order: 1 !important;
}

.main-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at left center,
      rgba(255,120,220,.08),
      transparent 32%
    ),
    radial-gradient(
      circle at right center,
      rgba(120,170,255,.08),
      transparent 32%
    );
  pointer-events: none;
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
}

.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--puffs-ink);
  text-decoration: none;
  font-weight: 900;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--puffs-ink);
  text-decoration: none;
  font-weight: 900;
}

.logo img {
  width: 205px;
  max-width: 205px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(124,92,255,.14));
  transition: .25s ease;
}

.brand-logo img {
  width: 205px;
  max-width: 205px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(124,92,255,.14));
  transition: .25s ease;
}

.logo:hover img {
  transform: translateY(-1px)
    scale(1.02);
}

.brand:hover .brand-logo img {
  transform: translateY(-1px)
    scale(1.02);
}

.brand-text {
  display: none;
}

.swiss-smoke-badge {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(
      135deg,
      rgba(255,255,255,.88),
      rgba(247,241,255,.96)
    );
  border: 1px solid rgba(124,92,255,.14);
  box-shadow: 0 10px 28px rgba(124,92,255,.10);
  overflow: visible;
}

.swiss-flag {
  position: relative;
  z-index: 3;
  font-size: 22px;
}

.swiss-smoke {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(
      circle,
      rgba(124,92,255,.22),
      rgba(47,128,255,.13),
      transparent 72%
    );
  filter: blur(12px);
  animation: smokeFloat 4s ease-in-out infinite;
}

.nav-menu {
  height: 48px !important;
  display: flex;
  align-items: center;
  gap: 6px !important;
  padding: 4px !important;
  flex-shrink: 1;
  border-radius: 999px;
  background: linear-gradient(
      135deg,
      rgba(245,241,255,.96),
      rgba(236,244,255,.92),
      rgba(255,241,252,.88)
    );
  border: 1px solid rgba(124,92,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
    0 16px 42px rgba(124,92,255,.10),
    0 0 34px rgba(47,128,255,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.main-nav {
  height: 48px !important;
  display: flex;
  align-items: center;
  gap: 6px !important;
  padding: 4px !important;
  flex-shrink: 1;
  border-radius: 999px;
  background: linear-gradient(
      135deg,
      rgba(245,241,255,.96),
      rgba(236,244,255,.92),
      rgba(255,241,252,.88)
    );
  border: 1px solid rgba(124,92,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
    0 16px 42px rgba(124,92,255,.10),
    0 0 34px rgba(47,128,255,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav-menu a {
  position: relative;
  height: 40px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  border-radius: 999px;
  color: #332b5f;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: .22s ease;
  width: 125px !important;
}

.main-nav a {
  position: relative;
  height: 40px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  border-radius: 999px;
  color: #332b5f;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: .22s ease;
  width: 125px !important;
}

.nav-menu a i {
  width: 17px !important;
  height: 17px !important;
  color: #6d4aff;
  stroke: #6d4aff;
  flex-shrink: 0;
  font-size: 17px !important;
}

.main-nav a i {
  width: 17px !important;
  height: 17px !important;
  color: #6d4aff;
  stroke: #6d4aff;
  flex-shrink: 0;
  font-size: 17px !important;
}

.nav-icon {
  width: 17px !important;
  height: 17px !important;
  color: #6d4aff;
  stroke: #6d4aff;
  flex-shrink: 0;
  font-size: 17px !important;
}

.nav-menu a:hover {
  color: #ffffff;
  background: linear-gradient(
      135deg,
      #2f80ff,
      #7c5cff 55%,
      #b44cff
    );
  transform: translateY(-1px)
    scale(1.015);
}

.nav-menu a.active {
  color: #5a37f0;
  background: rgba(124, 92, 255, 0.12);
  box-shadow: inset 0 0 0 1.6px rgba(124, 92, 255, 0.4);
  transform: none;
}

.main-nav a:hover {
  color: #ffffff;
  background: linear-gradient(
      135deg,
      #2f80ff,
      #7c5cff 55%,
      #b44cff
    );
  transform: translateY(-1px)
    scale(1.015);
}

.main-nav a.active {
  color: #5a37f0;
  background: rgba(124, 92, 255, 0.12);
  box-shadow: inset 0 0 0 1.6px rgba(124, 92, 255, 0.4);
  transform: none;
}

.nav-menu a:hover i {
  color: #ffffff;
  stroke: #ffffff;
}

.main-nav a:hover i {
  color: #ffffff;
  stroke: #ffffff;
}

.nav-menu a:hover .nav-icon {
  color: #ffffff;
  stroke: #ffffff;
}

.main-nav a:hover .nav-icon {
  color: #ffffff;
  stroke: #ffffff;
}

/* Selected item: keep the left icon dark violet so it stays visible on the
   light lavender active background. Placed after the hover rules so it wins
   for an active item (even while hovered). */
.nav-menu a.active i,
.main-nav a.active i,
.nav-menu a.active .nav-icon,
.main-nav a.active .nav-icon {
  color: #5a37f0;
  stroke: #5a37f0;
}

.nav-special {
  color: #6d4aff;
  background: rgba(124,92,255,.06);
}

.nav-smoke {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 60px;
  height: 34px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  filter: blur(8px);
  background: radial-gradient(circle at 25% 70%, rgba(255,255,255,.75), transparent 34%),
    radial-gradient(circle at 50% 45%, rgba(190,170,255,.55), transparent 38%),
    radial-gradient(circle at 75% 70%, rgba(120,170,255,.45), transparent 36%);
  transition: opacity .25s ease;
}

.nav-menu a:hover .nav-smoke {
  opacity: 1;
  animation: smokeRise 1.4s ease-out infinite;
}

.main-nav a:hover .nav-smoke {
  opacity: 1;
  animation: smokeRise 1.4s ease-out infinite;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.search-box {
  width: 260px !important;
  height: 48px !important;
  padding: 0 52px 0 18px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #ffffff, #f7f2ff) !important;
  border: 1px solid rgba(124,92,255,.24) !important;
  box-shadow: 0 14px 34px rgba(124,92,255,.12),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: .22s ease;
  position: relative !important;
}

.search-bar {
  width: 260px !important;
  height: 48px !important;
  padding: 0 52px 0 18px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #ffffff, #f7f2ff) !important;
  border: 1px solid rgba(124,92,255,.24) !important;
  box-shadow: 0 14px 34px rgba(124,92,255,.12),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: .22s ease;
  position: relative !important;
}

.search-box:hover {
  border-color: rgba(124,92,255,.26);
  box-shadow: 0 18px 44px rgba(124,92,255,.13),
    0 0 0 4px rgba(124,92,255,.05);
}

.search-box:focus-within {
  border-color: rgba(124,92,255,.26);
  box-shadow: 0 18px 44px rgba(124,92,255,.13),
    0 0 0 4px rgba(124,92,255,.05);
}

.search-bar:hover {
  border-color: rgba(124,92,255,.26);
  box-shadow: 0 18px 44px rgba(124,92,255,.13),
    0 0 0 4px rgba(124,92,255,.05);
}

.search-bar:focus-within {
  border-color: rgba(124,92,255,.26);
  box-shadow: 0 18px 44px rgba(124,92,255,.13),
    0 0 0 4px rgba(124,92,255,.05);
}

.search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.search-box input::placeholder {
  color: #9ca3af;
}

.search-input::placeholder {
  color: #9ca3af;
}

.search-box > button {
  border: 0;
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.search-btn {
  border: 0;
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.account-link {
  height: 48px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #ffffff, #f7f2ff) !important;
  border: 1px solid rgba(124,92,255,.22) !important;
  box-shadow: 0 14px 34px rgba(124,92,255,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  color: #40385f;
  text-decoration: none;
  transition: .22s ease;
  position: relative;
  min-width: 128px !important;
  padding: 0 18px !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  white-space: nowrap;
}

.account-link.is-authenticated {
  min-width: 44px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  gap: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.account-link-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c5cff, #9d7cff);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .5px;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(124,92,255,.35), inset 0 1px 0 rgba(255,255,255,.35);
  flex-shrink: 0;
}

.account-link.is-authenticated:hover .account-link-avatar {
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(124,92,255,.45), inset 0 1px 0 rgba(255,255,255,.35);
}

.account-link.is-authenticated:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== Account dropdown menu (logged-in) ===== */
.account-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.account-menu-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 280px;
  background: #ffffff;
  border: 1px solid rgba(124,92,255,.14);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(45,28,110,.18), 0 4px 14px rgba(45,28,110,.08);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 1200;
}

.account-menu-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  right: 0;
  left: 0;
  height: 12px;
}

.account-menu:hover .account-menu-dropdown,
.account-menu:focus-within .account-menu-dropdown,
.account-menu.is-open .account-menu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.account-menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 14px;
  border-bottom: 1px solid #f1edff;
  margin-bottom: 6px;
}

.account-menu-head-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c5cff, #9d7cff);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .5px;
  box-shadow: 0 6px 16px rgba(124,92,255,.32), inset 0 1px 0 rgba(255,255,255,.35);
}

.account-menu-head-text {
  min-width: 0;
}

.account-menu-head-name {
  font-size: 14px;
  font-weight: 800;
  color: #2d2150;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu-head-email {
  font-size: 12px;
  font-weight: 500;
  color: #9a8fc0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu-links {
  display: flex;
  flex-direction: column;
}

.account-menu-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 600;
  color: #4a4170;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.account-menu-links a i {
  font-size: 17px;
  color: #7c5cff;
  flex-shrink: 0;
}

.account-menu-links a:hover {
  background: #f5f1ff;
  color: #6540ff;
}

.account-menu-logout-form {
  margin: 6px 0 0;
  padding: 6px 0 0;
  border-top: 1px solid #f1edff;
}

.account-menu-logout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 11px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #e0395b;
  cursor: pointer;
  transition: background .15s ease;
}

.account-menu-logout i {
  font-size: 17px;
  flex-shrink: 0;
}

.account-menu-logout:hover {
  background: rgba(224,57,91,.08);
}

.header-icon {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(
      135deg,
      rgba(255,255,255,.88),
      rgba(247,242,255,.96)
    );
  border: 1px solid rgba(124,92,255,.10);
  box-shadow: 0 14px 34px rgba(124,92,255,.05),
    inset 0 1px 0 rgba(255,255,255,.95);
  color: #6d4aff;
  text-decoration: none;
  transition: .22s ease;
  position: relative;
  width: 42px;
  padding: 0;
}

.icon-link {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(
      135deg,
      rgba(255,255,255,.88),
      rgba(247,242,255,.96)
    );
  border: 1px solid rgba(124,92,255,.10);
  box-shadow: 0 14px 34px rgba(124,92,255,.05),
    inset 0 1px 0 rgba(255,255,255,.95);
  color: #6d4aff;
  text-decoration: none;
  transition: .22s ease;
  position: relative;
  width: 42px;
  padding: 0;
}

.cart-btn {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(
      135deg,
      #7c5cff,
      #9d7cff
    );
  border: 1px solid rgba(124,92,255,.10);
  box-shadow: 0 12px 26px rgba(124,92,255,.22);
  color: #ffffff;
  text-decoration: none;
  transition: .22s ease;
  position: relative;
  width: 42px;
  padding: 0;
}

.account-link i {
  width: 22px !important;
  height: 22px !important;
  color: #7c5cff !important;
  font-size: 22px !important;
  stroke: #7c5cff !important;
}

.header-icon i {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.icon-link i {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.cart-btn i {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.account-link:hover {
  color: #7c5cff !important;
  background: linear-gradient(135deg, #ffffff, #f7f2ff) !important;
  box-shadow: 0 16px 38px rgba(124,92,255,.22);
  transform: translateY(-1px)
    scale(1.03);
}

.header-icon:hover {
  color: #ffffff;
  background: linear-gradient(
      135deg,
      #7c5cff,
      #b44cff
    );
  box-shadow: 0 16px 38px rgba(124,92,255,.22);
  transform: translateY(-1px)
    scale(1.03);
}

.icon-link:hover {
  color: #ffffff;
  background: linear-gradient(
      135deg,
      #7c5cff,
      #b44cff
    );
  box-shadow: 0 16px 38px rgba(124,92,255,.22);
  transform: translateY(-1px)
    scale(1.03);
}

.cart-btn:hover {
  color: #ffffff;
  background: linear-gradient(
      135deg,
      #7c5cff,
      #b44cff
    );
  box-shadow: 0 16px 38px rgba(124,92,255,.22);
  transform: translateY(-1px)
    scale(1.03);
}

.cart-link {
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(247,242,255,.96));
  color: #6d4aff;
  box-shadow: 0 14px 34px rgba(124,92,255,.05), inset 0 1px 0 rgba(255,255,255,.95);
}

.cart-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(
      135deg,
      #ff4fd8,
      #7c5cff
    );
  border: 2px solid #ffffff;
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(255,79,216,.28);
}

.cart-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(
      135deg,
      #ff4fd8,
      #7c5cff
    );
  border: 2px solid #ffffff;
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(255,79,216,.28);
}

.language-selector {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(124,92,255,.10);
}

.lang-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
  opacity: .72;
  cursor: pointer;
}

.lang-btn.active {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(124,92,255,.22);
}

.lang-btn:hover {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(124,92,255,.22);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(124,92,255,.12);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: .25s ease;
}

.btn-primary {
  background: linear-gradient(
      135deg,
      var(--puffs-purple-dark),
      var(--puffs-purple-soft)
    );
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(124,92,255,.20);
}

.btn-secondary {
  background: rgba(255,255,255,.72);
  color: var(--puffs-purple-dark);
}

.btn:hover {
  transform: translateY(-1px);
}

.hero {
  background: linear-gradient(180deg, #ffffff 0%, var(--puffs-bg) 100%);
  padding-top: 15px !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}

.hero-section {
  background: linear-gradient(180deg, #ffffff 0%, var(--puffs-bg) 100%);
  padding-bottom: 18px;
}

.hero-banner {
  position: relative;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 6px;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, #fbf8ff 0%, #fbf8ff 100%);
  box-shadow: 0 8px 26px rgba(124, 92, 255, .06);
}

/* Retrait lateral (gauche/droite) de la banniere hero, identique au bloc
   best-sellers, pour aligner les deux cadres sur la meme indentation. S'applique
   aussi bien avec offre de la semaine que sans (meme comportement dans les deux
   cas, conforme au bloc best-sellers). */
.hero {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
@media (max-width: 1024px) {
  .hero {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
@media (max-width: 640px) {
  .hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.hero-banner picture {
  display: block;
  width: 100%;
  line-height: 0;
}

/* Lien couvrant l'image de la banniere hero : rend toute la banniere cliquable
   (redirection vers la CTA URL du slide) sans ajouter d'espace vertical. */
.hero-banner-link {
  display: block;
  width: 100%;
  line-height: 0;
  cursor: pointer;
}

/* Curseur "main" sur toute la banniere quand elle est cliquable (contient un
   lien), y compris sur l'image/picture qui pourraient ne pas heriter le curseur. */
.hero-banner:has(> .hero-banner-link),
.hero-banner-link img,
.hero-banner-link picture,
.hero-banner-link source {
  cursor: pointer;
}

.hero-banner img {
  width: 100%;
  display: block;
  aspect-ratio: 2048 / 682;
  height: auto;
  min-height: 0;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(17, 24, 39, .06);
}

.hero-banner.is-portrait {
  background: radial-gradient(circle at 50% 18%, rgba(124, 92, 255, .18), transparent 44%),
    linear-gradient(180deg, #1a1033 0%, #0f172a 100%);
}

.hero-banner.is-portrait img {
  object-fit: contain;
  background: linear-gradient(180deg, rgba(15, 23, 42, .08) 0%, rgba(15, 23, 42, .02) 100%);
}

/* Positionnement pour ancrer le badge sur la bordure basse */
#hero-carousel {
  position: relative;
  overflow: visible;
}

.hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: flex;
  justify-content: center;
  padding: 18px 18px 22px;
  pointer-events: none;
}

.hero-overlay-content {
  width: min(100%, 860px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18, 7, 34, .08) 0%, rgba(18, 7, 34, .78) 35%, rgba(18, 7, 34, .95) 100%);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .20);
  pointer-events: auto;
}

.hero-kicker {
  margin-left: auto;
  margin-right: auto;
}

.hero-headline {
  margin-left: auto;
  margin-right: auto;
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.05;
}

.hero-sub {
  margin-left: auto;
  margin-right: auto;
  margin: 0;
  max-width: 36ch;
  color: rgba(255, 255, 255, .88);
  font-size: 15px;
  line-height: 1.5;
}

.hero-countdown {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: 8px;
}

.hero-cta-row {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  width: 100%;
}

.hero-cta-row .btn {
  width: min(100%, 280px);
}

.hero-countdown .btn {
  width: min(100%, 280px);
}

.hero-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.14);
}

.hero-carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: background 0.28s ease, transform 0.24s ease, box-shadow 0.28s ease;
}

.hero-carousel-dot:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.18);
}

.hero-carousel-dot.is-active {
  width: 9px;
  background: radial-gradient(circle at 30% 30%, #9a76ff 0%, #7c4dff 55%, #6540ff 100%);
  transform: scale(1.25);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.28), 0 0 8px rgba(124, 77, 255, 0.55);
}

.hero-carousel-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Mobile : on sort les cercles de la banniere et on les place EN DESSOUS pour
   ne pas masquer le prix / les infos importantes de la banniere. */
@media (max-width: 640px) {
  .hero-carousel-dots {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 10px auto 0;
    width: -moz-fit-content;
    width: fit-content;
    gap: 8px;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .hero-carousel-dot {
    width: 8px;
    height: 8px;
    background: rgba(124, 77, 255, 0.28);
    box-shadow: none;
  }

  .hero-carousel-dot.is-active {
    width: 8px;
    transform: scale(1.2);
    box-shadow: 0 0 0 2.5px rgba(124, 77, 255, 0.18), 0 0 6px rgba(124, 77, 255, 0.4);
  }
}

.section {
  position: relative;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(124, 92, 255, .10);
  color: var(--puffs-purple);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.section-header h2 {
  margin: 14px 0 10px;
  color: var(--puffs-ink);
  font-size: 38px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.5px;
}

.section-subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.7;
  max-width: 520px;
  font-weight: 500;
}

.section-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px !important;
  border-radius: 10px !important;
  background: white;
  border: 1px solid rgba(138,92,255,0.12);
  color: #7b61ff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(138,92,255,0.08);
  transition: 0.25s ease;
  justify-content: center;
  height: 54px;
  justify-self: end;
}

.btn-viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(124, 92, 255, .14);
  color: var(--puffs-purple);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(124, 92, 255, .08);
  transition: .25s ease;
}

.section-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(124, 92, 255, .12);
  background: #7b61ff;
  color: white;
}

.btn-viewall:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(124, 92, 255, .12);
}

#best-sellers {
  position: relative;
  padding: 38px 0 56px !important;
  background: radial-gradient(circle at 18% 10%, rgba(124,92,255,.08), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(255,79,216,.07), transparent 28%),
    linear-gradient(180deg, #fbf8ff 0%, #fbf8ff 100%) !important;
  overflow: visible !important;
  font-family: Inter, Arial, sans-serif;
  padding-top: 10px !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  --carousel-surface: #f8f5ff;
}

#best-sellers .container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 28px;
}

#best-sellers .section-header {
  gap: 24px;
  margin-bottom: 24px;
  max-width: 1800px !important;
  margin: 0 auto 16px !important;
  padding: 0 34px !important;
  align-items: center !important;
  display: block !important;
  width: 100% !important;
  position: relative !important;
  z-index: 5 !important;
}

#best-sellers .section-header h2 {
  margin: 12px 0 0 !important;
  font-size: 34px !important;
  line-height: 1.1;
  font-weight: 950 !important;
  letter-spacing: -1.2px !important;
}

#best-sellers .best-sellers-layout {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 34px !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 34px !important;
  align-items: start !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Aligne le bord droit du bloc offre de la semaine avec le bord droit de la
   banniere hero. En reduisant le padding droit de la grille a 6px, la colonne
   1fr (bloc best-sellers) s'elargit vers la droite et la colonne offre est
   decalee vers la droite jusqu'a affleurer l'image de la banniere hero.
   Uniquement en affichage 2 colonnes (desktop) et quand une offre est presente. */
@media (min-width: 1025px) {
  #best-sellers:not(.no-weekly-offer) .best-sellers-layout {
    padding-right: 6px !important;
  }
}

#best-sellers .best-sellers-products {
  min-width: 0;
  overflow: hidden !important;
  position: relative !important;
  padding: 18px !important;
  border-radius: 34px !important;
  background: var(--bs-bg) !important;
  border: 1.5px solid rgba(124,92,255,.16) !important;
  box-shadow: 0 22px 54px rgba(124,92,255,.10),
    inset 0 1px 0 rgba(255,255,255,.75) !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  background-image: none !important;
  background-color: #f8f5ff !important;
  --bs-surface: #f8f5ff;
  --bs-bg: #f8f5ff;
}

#best-sellers .carousel-wrapper {
  position: relative;
  overflow: hidden !important;
  min-width: 0;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  background: var(--bs-bg) !important;
  border-radius: 0 !important;
  background-image: none !important;
  background-color: var(--carousel-surface) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

#best-sellers .carousel-container {
  overflow: hidden;
  width: 100%;
  background: var(--bs-bg) !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  background-image: none !important;
  background-color: var(--carousel-surface) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

#best-sellers .product-grid {
  display: flex !important;
  gap: 20px !important;
  width: max-content !important;
  padding: 6px 4px 28px;
  transition: transform .3s ease;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overflow: visible !important;
  padding-right: 0 !important;
  scroll-padding-right: 140px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  background: var(--bs-bg) !important;
  background-image: none !important;
  border-radius: 0 !important;
  background-color: var(--carousel-surface) !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  margin-right: 0 !important;
}

#best-sellers .product-grid::-webkit-scrollbar {
  display: none;
}

#best-sellers .product-item {
  position: relative;
  flex: 0 0 250px !important;
  min-width: 250px !important;
  height: 385px !important;
  min-height: 385px !important;
  padding: 16px 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border-radius: 26px !important;
  text-align: center;
  background: #ffffff !important;
  border: 1px solid rgba(124,92,255,.14) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.06),
    0 14px 34px rgba(124,92,255,.08) !important;
  overflow: hidden;
  transition: 0.25s ease;
  align-items: center !important;
  max-width: 250px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-image: none !important;
  width: 250px !important;
}

#best-sellers .product-item:hover {
  transform: translateY(-6px);
  box-shadow: none !important;
  border-color: rgba(124,92,255,.38) !important;
  background: #ffffff !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#best-sellers .product-item > img {
  height: 128px !important;
  max-height: 128px !important;
  max-width: 100% !important;
  width: auto !important;
  object-fit: contain !important;
  margin: 18px auto 12px !important;
  display: block !important;
  filter: drop-shadow(0 14px 22px rgba(17,24,39,.16)) !important;
  transition: transform .25s ease !important;
  position: relative !important;
  z-index: 2 !important;
}

#best-sellers .product-item:hover > img {
  transform: scale(1.05) !important;
}

#best-sellers .product-details {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 1 !important;
  text-align: center !important;
  width: 100% !important;
  min-width: 0 !important;
}

#best-sellers .product-details h3 {
  min-height: 46px !important;
  margin: 0 auto 6px !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  max-height: none !important;
  overflow: visible !important;
  margin-bottom: 8px !important;
}

#best-sellers .product-title {
  min-height: 38px !important;
  margin: 0 auto 5px !important;
  color: #071126 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  max-height: 38px !important;
  overflow: hidden !important;
  margin-bottom: 5px !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
}

#best-sellers .brand-tag {
  margin: 0 auto 7px !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-align: center !important;
  margin-bottom: 8px !important;
}

#best-sellers .product-subtitle {
  margin: 0 auto 7px !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-align: center !important;
  opacity: 0.7;
  margin-bottom: 8px !important;
  display: none !important;
}

#best-sellers .product-meta {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto 8px !important;
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 8px;
}

#best-sellers .price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 auto 10px !important;
  color: #7c3aed;
  font-size: 22px !important;
  font-weight: 800;
  letter-spacing: -.4px !important;
  text-align: center !important;
  margin-top: auto;
  margin-bottom: 12px;
}

#best-sellers .product-price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 auto 9px !important;
  color: #6d4aff !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  letter-spacing: -.7px !important;
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  line-height: 1 !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
}

#best-sellers .quantity-controls {
  width: 112px !important;
  height: 36px !important;
  margin: 0 auto !important;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 999px;
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,92,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  margin-top: auto !important;
  max-width: 120px;
}

#best-sellers .qty-box {
  width: 140px !important;
  height: 34px !important;
  margin: 0 auto !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff, #f8f5ff) !important;
  border: 1px solid rgba(124,92,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(124,92,255,.08) !important;
  margin-top: auto !important;
  max-width: 120px;
}

#best-sellers .quantity-btn {
  border: 0 !important;
  background: transparent !important;
  color: #7c5cff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  z-index: 5 !important;
}

#best-sellers .qty-btn {
  border: 0 !important;
  background: transparent !important;
  color: #7c5cff !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  z-index: 5 !important;
}

#best-sellers .quantity-count {
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

#best-sellers .qty-value {
  color: #071126 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

#best-sellers .badge {
  position: absolute !important;
  top: 12px !important;
  right: auto !important;
  left: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  background: linear-gradient(
      135deg,
      #7c5cff,
      #b44cff
    ) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 12px 26px rgba(124,92,255,.22),
    0 0 18px rgba(180,76,255,.14) !important;
  z-index: 4 !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
}

#best-sellers .product-badge {
  position: absolute !important;
  top: 14px !important;
  right: auto !important;
  left: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .45px !important;
  text-transform: uppercase !important;
  box-shadow: 0 12px 24px rgba(124,92,255,.24) !important;
  z-index: 4 !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
}

#best-sellers .product-type-chip {
  display: none !important;
}

#best-sellers .carousel-nav {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 42%;
  width: 54px !important;
  height: 54px !important;
  border: 1px solid rgba(124,92,255,.18) !important;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #f6f0ff) !important;
  color: #7c5cff;
  font-size: 19px;
  font-weight: 900;
  box-shadow: 0 16px 38px rgba(124,92,255,.16),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  z-index: 50;
  cursor: pointer;
  transition: .25s ease;
  transform: translateY(-50%);
  pointer-events: auto !important;
}

#best-sellers .carousel-nav:hover {
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(124, 92, 255, .22);
}

#best-sellers .carousel-prev {
  left: -8px;
  transform: translateY(-50%);
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.96),
    rgba(250,245,255,.92)
  ) !important;
  border: 1px solid rgba(124,92,255,.10) !important;
  box-shadow: 0 14px 35px rgba(124,92,255,.14),
    inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  transition: .25s ease;
  font-size: 0 !important;
}

#best-sellers .carousel-next {
  right: -8px;
  transform: translateY(-50%);
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.96),
    rgba(250,245,255,.92)
  ) !important;
  border: 1px solid rgba(124,92,255,.10) !important;
  box-shadow: 0 14px 35px rgba(124,92,255,.14),
    inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  transition: .25s ease;
  font-size: 0 !important;
}

#best-sellers .carousel-nav:hover.carousel-prev {
  transform: translateY(-50%) scale(1.06);
}

#best-sellers .carousel-nav:hover.carousel-next {
  transform: translateY(-50%) scale(1.06);
}

#best-sellers .carousel-nav.is-disabled {
  opacity: .35;
  pointer-events: none;
}

#best-sellers .carousel-pagination {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#best-sellers .weekly-offer-side {
  position: relative !important;
  width: 340px !important;
  min-width: 340px !important;
  min-height: 560px !important;
  align-self: start !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: 560px !important;
  overflow: visible !important;
  margin: 0 !important;
  top: auto !important;
  transform: none !important;
}

#best-sellers .weekly-offer-side::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 82%;
  right: -40px;
  top: 50%;
  border-radius: 40px !important;
  background: linear-gradient(
      90deg,
      rgba(124,92,255,0),
      rgba(124,92,255,.10),
      rgba(255,79,216,.10)
    );
  filter: blur(26px);
  z-index: 1;
  inset: 40px -24px -30px -24px !important;
  left: -60px;
  transform: translateY(-50%);
  pointer-events: none;
}

#best-sellers .weekly-offer-shell {
  position: relative !important;
  z-index: 2 !important;
  width: 340px !important;
  height: 600px !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 1px solid rgba(124,92,255,.18) !important;
  box-shadow: 0 30px 78px rgba(124,92,255,.22),
    0 18px 45px rgba(255,79,216,.12) !important;
  transition: .28s ease !important;
  min-height: 600px !important;
  clip-path: none !important;
  mask-image: none !important;
  padding: 0 !important;
  margin-top: -200px !important;
  top: auto !important;
  transform: none !important;
}

#best-sellers .weekly-offer-shell:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 28px 60px rgba(124,92,255,.18),
    0 36px 80px rgba(255,79,216,.14),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

#best-sellers .weekly-offer-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(124, 92, 255, .16), transparent 42%);
  pointer-events: none;
  z-index: 1;
  border-radius: 0 !important;
  display: none !important;
}

#best-sellers .weekly-offer-banner {
  width: 88% !important;
  height: 88% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center top !important;
  opacity: .95;
  border-radius: 34px !important;
  overflow: hidden !important;
  clip-path: none !important;
  mask-image: none !important;
  box-shadow: none !important;
  background: #180b35 !important;
  border: 1px solid rgba(124,92,255,.22) !important;
  margin: auto !important;
  position: absolute !important;
  inset: 0 !important;
}

#best-sellers .weekly-offer-overlay {
  position: absolute;
  left: 20px !important;
  right: 20px !important;
  bottom: 18px !important;
  z-index: 5 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

#best-sellers .offer-timer {
  display: flex;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

#best-sellers .offer-timer span {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255,255,255,0.12);
  color: white;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 10px 20px rgba(124, 92, 255, .22);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.22);
  flex: 1;
}

#best-sellers .offer-btn {
  height: 52px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    #8b5cf6,
    #7c3aed
  );
  color: white;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 16px 34px rgba(255,79,216,.28);
  transition: .25s ease;
}

#best-sellers .offer-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px rgba(124, 92, 255, .30);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

.product-item {
  position: relative;
  padding: 18px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid rgba(124, 92, 255, .08);
  transition: .25s ease;
  overflow: hidden;
}

.product-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(124, 92, 255, .14);
}

.product-item > img {
  max-height: 220px;
  width: auto;
  object-fit: contain;
  transition: transform .25s ease;
}

.product-image img {
  max-height: 220px;
  width: auto;
  object-fit: contain;
  transition: transform .25s ease;
}

.product-image {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.product-item:hover img {
  transform: scale(1.04);
}

.product-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--puffs-purple), var(--puffs-purple-soft));
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--puffs-purple), var(--puffs-purple-soft));
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.product-title {
  margin: 0 0 6px;
  color: #141414;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.product-details h3 {
  margin: 0 0 6px;
  color: #141414;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.product-subtitle {
  margin: 0 0 18px;
  color: #777;
  font-size: 13px;
}

.brand-tag {
  margin: 0 0 18px;
  color: #777;
  font-size: 13px;
}

.product-price {
  color: var(--puffs-purple);
  font-size: 20px;
  font-weight: 800;
}

.price {
  color: var(--puffs-purple);
  font-size: 20px;
  font-weight: 800;
}

.product-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: auto !important;
  justify-content: center !important;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 16px;
  background: #f8f5ff;
  border: 1px solid rgba(124, 92, 255, .10);
}

.qty-box {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  min-height: 42px;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(124,92,255,.08) !important;
  border: 1px solid rgba(124,92,255,.16) !important;
  width: 96px !important;
  height: 38px !important;
  justify-content: space-between !important;
}

.qty-btn {
  border: 0 !important;
  background: transparent !important;
  color: #7c5cff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.quantity-btn {
  border: none;
  background: transparent;
  color: var(--puffs-purple);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.qty-value {
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.quantity-count {
  color: var(--puffs-ink);
  font-size: 15px;
  font-weight: 700;
}

.carousel-wrapper {
  position: relative;
}

.carousel-container {
  overflow: hidden;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: var(--puffs-purple);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(17, 24, 39, .10);
  z-index: 5;
  transition: .25s ease;
}

.carousel-prev {
  left: -24px;
  transform: translateY(-50%);
}

.carousel-next {
  right: -24px;
  transform: translateY(-50%);
}

.carousel-nav:hover {
  transform: translateY(-50%) scale(1.06);
}

.carousel-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(124, 92, 255, .22);
  transition: .25s ease;
}

.carousel-dot.active {
  width: 34px;
  border-radius: 999px;
  background: var(--puffs-purple);
}

.advantages {
  padding: 50px 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--puffs-bg) 100%);
}

.new-products {
  padding: 50px 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--puffs-bg) 100%);
}

.elfbar-showcase {
  padding: 50px 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--puffs-bg) 100%);
}

.lostmary-showcase {
  padding: 50px 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--puffs-bg) 100%);
}

.alwaysplus-showcase {
  padding: 50px 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--puffs-bg) 100%);
}

.banner-promo {
  padding: 50px 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--puffs-bg) 100%);
}

.categories {
  padding: 50px 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--puffs-bg) 100%);
}

.newsletter {
  padding: 50px 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--puffs-bg) 100%);
}

.advantages-shell {
  max-width: 1800px;
  margin: 0 auto;
  padding: 28px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(124, 92, 255, .10);
  box-shadow: 0 18px 45px rgba(124, 92, 255, .07);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: center;
}

.newsletter-wrapper {
  max-width: 1800px;
  margin: 0 auto;
  padding: 28px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(124, 92, 255, .10);
  box-shadow: 0 18px 45px rgba(124, 92, 255, .07);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: center;
}

.footer-shell {
  max-width: 1800px;
  margin: 0 auto;
  padding: 28px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(124, 92, 255, .10);
  box-shadow: 0 18px 45px rgba(124, 92, 255, .07);
}

.banner-content-grid {
  max-width: 1800px;
  margin: 0 auto;
  padding: 28px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(124, 92, 255, .10);
  box-shadow: 0 18px 45px rgba(124, 92, 255, .07);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: center;
}

.advantages-copy h2 {
  margin: 12px 0;
  color: var(--puffs-ink);
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -1px;
}

.newsletter-title {
  margin: 12px 0;
  color: var(--puffs-ink);
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -1px;
}

.banner-text h2 {
  margin: 12px 0;
  color: var(--puffs-ink);
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -1px;
}

.advantages-copy p {
  color: var(--puffs-muted);
  font-size: 15px;
  line-height: 1.65;
}

.newsletter-subtitle {
  color: var(--puffs-muted);
  font-size: 15px;
  line-height: 1.65;
}

.banner-text p {
  color: var(--puffs-muted);
  font-size: 15px;
  line-height: 1.65;
}

.advantages-mini-stats {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 20px;
}

.advantages-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.newsletter-features {
  display: grid;
  gap: 16px;
}

.category-grid {
  display: grid;
  gap: 16px;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.advantage-card {
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(124, 92, 255, .10);
  box-shadow: 0 12px 28px rgba(124, 92, 255, .06);
  text-decoration: none;
  color: inherit;
}

.advantages-mini-stat {
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(124, 92, 255, .10);
  box-shadow: 0 12px 28px rgba(124, 92, 255, .06);
  text-decoration: none;
  color: inherit;
}

.category-card {
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(124, 92, 255, .10);
  box-shadow: 0 12px 28px rgba(124, 92, 255, .06);
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: .25s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(124, 92, 255, .12);
}

.category-card-emoji {
  font-size: 28px;
}

.category-card h3 {
  margin: 4px 0;
}

.category-card p {
  margin: 0;
  color: var(--puffs-muted);
  font-size: 14px;
}

.newsletter-form .form-group {
  display: flex;
  gap: 12px;
}

.newsletter-form input {
  flex: 1;
  min-height: 50px;
  border: 1px solid rgba(124, 92, 255, .14);
  border-radius: 16px;
  padding: 0 16px;
  font-size: 15px;
}

.site-footer {
  padding: 48px 0 24px;
  background: linear-gradient(180deg, var(--puffs-bg) 0%, #ffffff 100%);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 26px;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.footer-section a {
  color: var(--puffs-muted);
  text-decoration: none;
}

.footer-bottom {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(124, 92, 255, .10);
  color: var(--puffs-muted);
  font-size: 14px;
}

.mobile-quick-bar {
  display: none;
}

/* =============================================
   PROMO POPUP - FLOATING BOTTOM-RIGHT
============================================= */
.promo-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9990;
  display: none;
}

.promo-popup.is-visible {
  display: block;
}

/* Pill button */
.promo-popup-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #7c5cff 0%, #b44cff 100%);
  box-shadow: 0 8px 24px rgba(124,92,255,.40), 0 2px 6px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}

.promo-popup-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(124,92,255,.52), 0 2px 8px rgba(0,0,0,.12);
}

.promo-popup.is-expanded .promo-popup-pill {
  display: none;
}

/* Panel - flotte au-dessus de la pilule */
.promo-popup-panel {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: 280px;
  padding: 24px 20px 20px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 24px 56px rgba(124,92,255,.18),
    0 4px 16px rgba(0,0,0,.08),
    0 0 0 1px rgba(139,92,246,.12);
}

.promo-popup.is-expanded .promo-popup-panel {
  display: block;
  animation: promoPanel .22s ease forwards;
}

@keyframes promoPanel {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Close button */
.promo-popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 26px;
  height: 26px;
  border: none;
  background: rgba(124,92,255,.08);
  border-radius: 50%;
  color: #7c5cff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}

.promo-popup-close:hover {
  background: rgba(124,92,255,.18);
}

/* Panel content */
.promo-popup-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #b44cff;
  margin: 0 0 6px;
}

.promo-popup-title {
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #1a0a3c;
  margin: 0 0 8px;
  line-height: 1.2;
}

.promo-popup-text {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 16px;
  line-height: 1.5;
}

/* CTA button inside panel */
.promo-popup-cta {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c5cff 0%, #b44cff 100%);
  color: #ffffff;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 18px rgba(124,92,255,.35);
}

.promo-popup-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(124,92,255,.48);
}

/* Mobile */
@media (max-width: 480px) {
  .promo-popup {
    bottom: 16px;
    right: 12px;
  }

  .promo-popup-panel {
    width: calc(100vw - 24px);
    right: 0;
  }
}

#best-sellers .carousel-container::-webkit-scrollbar {
  display: none !important;
}

#best-sellers .product-item img {
  width: auto;
  height: 120px;
  object-fit: contain;
  margin-top: 10px;
  margin-bottom: 12px;
}

#best-sellers .product-item h3 {
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  min-height: 42px;
  max-height: 42px;
  overflow: hidden;
  margin-bottom: 8px;
}

#best-sellers .quantity-controls button {
  border: none;
  background: transparent;
  color: #7c3aed;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

#best-sellers .qty-box button {
  border: none;
  background: transparent;
  color: #7c3aed;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

#best-sellers .eyebrow {
  background: linear-gradient(135deg, rgba(124,92,255,.16), rgba(255,79,216,.12)) !important;
  color: #6d4aff !important;
  box-shadow: 0 10px 24px rgba(124,92,255,.10);
}

#best-sellers .weekly-offer-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(17,7,45,.72) 100%);
  pointer-events: none;
  display: none !important;
  border-radius: 0 !important;
}

#best-sellers .weekly-offer-card {
  height: 100%;
  border-radius: 0 !important;
  overflow: hidden !important;
  clip-path: none !important;
  mask-image: none !important;
}

#best-sellers .weekly-offer-focus-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  clip-path: none !important;
  mask-image: none !important;
}

#best-sellers .weekly-offer-visual {
  position: absolute;
  inset: 0 !important;
  display: block;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  clip-path: none !important;
  mask-image: none !important;
}

#best-sellers .weekly-offer-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-position: center;
  object-fit: cover;
  border-radius: 0 !important;
  overflow: hidden !important;
  clip-path: none !important;
  mask-image: none !important;
}

#best-sellers .weekly-offer-visual.is-landscape img {
  object-fit: cover !important;
}

#best-sellers .weekly-offer-visual.is-portrait img {
  object-fit: cover !important;
  padding: 0 !important;
  object-position: center center !important;
}

#best-sellers .weekly-offer-content {
  position: absolute;
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 8 !important;
  padding: 14px 16px !important;
  background: linear-gradient(180deg, rgba(18, 7, 34, .04) 0%, rgba(18, 7, 34, .22) 36%, rgba(18, 7, 34, .42) 100%) !important;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  border-radius: 22px !important;
  backdrop-filter: blur(4px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .14) !important;
}

#best-sellers .weekly-offer-content .btn {
  width: min(100%, 280px) !important;
  align-self: center;
  margin-top: 2px !important;
}

/* Slide custom (sans compte à rebours) : pas de fond/flou derrière le bouton,
   CTA collé plus bas et en jaune. */
#best-sellers .weekly-offer-content--plain {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  bottom: 6px !important;
  padding: 6px 16px !important;
}

#best-sellers .weekly-offer-content--plain .btn,
#best-sellers .weekly-offer-content--plain .btn.btn-primary {
  background: #ffd21e !important;
  background-image: none !important;
  color: #211a00 !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(255, 200, 0, .35) !important;
}

#best-sellers .weekly-offer-content--plain .btn:hover,
#best-sellers .weekly-offer-content--plain .btn.btn-primary:hover {
  background: #ffdb47 !important;
  color: #211a00 !important;
}

#best-sellers .wo-countdown-block {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(15, 23, 42, .22);
  border: 1px solid rgba(255, 255, 255, .22);
}

#best-sellers .wo-countdown-label {
  margin: 0 0 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, .92);
}

#best-sellers .wo-countdown-digits {
  display: grid;
  grid-template-columns: repeat(7, auto);
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#best-sellers .wo-digit {
  min-width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .16);
  color: #ffffff;
  font-weight: 900;
}

#best-sellers .wo-digit-lbl {
  color: rgba(255, 255, 255, .88);
}

#best-sellers .wo-digit-sep {
  color: rgba(255, 255, 255, .88);
}

#best-sellers .weekly-offer-content .eyebrow {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#best-sellers .weekly-offer-content .wo-title {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  font-size: 22px !important;
  line-height: 1.12 !important;
  margin-bottom: 8px !important;
}

#best-sellers .weekly-offer-content .wo-subtitle {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  max-width: 30ch !important;
}

#best-sellers .weekly-offer-content .wo-desc {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  max-width: 30ch !important;
}

#best-sellers .weekly-offer-content .weekly-offer-meta {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#best-sellers .weekly-offer-shell img {
  border-radius: 0 !important;
}

#best-sellers .weekly-offer-banner img {
  border-radius: 0 !important;
}

.product-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
        rgba(255,255,255,0.96) 0%,
        rgba(248,243,255,0.98) 100%);
  border: 1px solid rgba(139,92,246,.14);
  box-shadow: 0 10px 30px rgba(124,58,237,.06);
  transition: transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.product-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(139,92,246,.55), 0 18px 45px rgba(124,58,237,.22);
}

#best-sellers .product-showcase {
  position: relative;
  border: 1px solid rgba(139,92,246,.12);
  background: linear-gradient(
        180deg,
        rgba(255,255,255,.72),
        rgba(248,243,255,.88)
      );
  backdrop-filter: blur(18px);
  border-radius: 32px;
  padding: 26px;
  box-shadow: 0 20px 60px rgba(124,58,237,.08);
  overflow: hidden;
}

#best-sellers .product-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
        circle at top left,
        rgba(168,85,247,.12),
        transparent 40%
      ),
      radial-gradient(
        circle at bottom right,
        rgba(236,72,153,.08),
        transparent 35%
      );
  pointer-events: none;
}

.carousel-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  background: linear-gradient(
        180deg,
        rgba(255,255,255,.92),
        rgba(245,240,255,.78)
      );
  backdrop-filter: blur(16px);
  box-shadow: 0 15px 35px rgba(124,58,237,.14);
  transition: all .25s ease;
  z-index: 10;
}

.carousel-btn:hover {
  transform: scale(1.08);
  background: linear-gradient(
        135deg,
        #8b5cf6,
        #7c3aed
      );
  color: white;
  box-shadow: 0 18px 40px rgba(124,58,237,.32);
}

.weekly-offer-side {
  border: 1px solid rgba(139,92,246,.16);
  box-shadow: 0 20px 50px rgba(124,58,237,.12);
  background: linear-gradient(
        180deg,
        rgba(255,255,255,.62),
        rgba(240,230,255,.84)
      );
  padding: 8px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 32px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(
        135deg,
        rgba(138,92,255,0.16),
        rgba(255,92,214,0.12)
    );
  border: 1px solid rgba(138,92,255,0.18);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #7b61ff;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(138,92,255,0.10);
}

.section-title {
  margin-top: 14px;
  margin-bottom: 10px;
  font-size: 44px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -1.8px;
  color: #0f172a;
  max-width: 680px;
}

.section-heading-right {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}

.section-mini-card {
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  background: white;
  border: 1px solid rgba(138,92,255,0.12);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(138,92,255,0.08);
}

.mini-card-number {
  font-size: 22px;
  font-weight: 900;
  color: #7b61ff;
}

.mini-card-text {
  font-size: 13px;
  color: #6b7280;
}

.section-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.section-trust-row span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(138,92,255,0.10);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  color: #5b6475;
  box-shadow: 0 8px 24px rgba(138,92,255,0.06);
}

#best-sellers .section-heading {
  display: grid !important;
  grid-template-columns: minmax(0,1fr)
  240px !important;
  align-items: center !important;
  gap: 20px !important;
  margin-bottom: 26px !important;
  width: 100% !important;
  column-gap: 8px !important;
  row-gap: 10px !important;
  margin: 0 !important;
  position: relative;
}

#best-sellers .section-heading-left {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 720px !important;
}

#best-sellers .section-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(124,92,255,.16), rgba(255,79,216,.12)) !important;
  border: 1px solid rgba(124,92,255,.18) !important;
  color: #7c5cff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  justify-content: center !important;
  width: fit-content !important;
  line-height: 1 !important;
  box-shadow: 0 12px 28px rgba(124,92,255,.10) !important;
}

#best-sellers .section-title {
  margin: 12px 0 22px !important;
  font-size: clamp(34px,2.5vw,46px) !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  letter-spacing: -1.8px !important;
  color: #071126 !important;
  white-space: nowrap !important;
  max-width: none !important;
}

#best-sellers .section-subtitle {
  font-size: 15.5px !important;
  font-weight: 450 !important;
  color: #475569 !important;
  line-height: 1.7 !important;
  padding-left: 14px !important;
  border-left: 3px solid rgba(124,92,255,.45) !important;
  margin: 0 !important;
}

#best-sellers .section-link {
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 22px !important;
  margin-right: 24px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(246,241,255,.98) 100%) !important;
  color: #6040cc !important;
  font-family: "Outfit", Inter, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  border: 1px solid rgba(124,92,255,.24) !important;
  box-shadow:
    0 2px 6px rgba(124,92,255,.06),
    0 8px 22px rgba(124,92,255,.10),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  flex-shrink: 0 !important;
  gap: 8px !important;
  text-decoration: none !important;
  backdrop-filter: blur(10px) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease,
    border-color .22s ease !important;
}

#best-sellers .section-link:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #7c5cff 0%, #b44cff 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(124,92,255,.32), 0 2px 8px rgba(124,92,255,.18) !important;
}

#best-sellers .section-heading::after {
  content: none !important;
  grid-column: 1 / -1 !important;
  height: 1px !important;
  margin-top: 36px !important;
  background: linear-gradient(90deg, transparent, rgba(124,92,255,.18), transparent) !important;
  display: none !important;
}

#best-sellers .section-heading-right {
  display: contents !important;
}

#best-sellers .section-heading-left h2 {
  margin: 22px 0 12px !important;
  max-width: none !important;
  color: #071126 !important;
  font-size: clamp(28px, 2.2vw, 38px) !important;
  line-height: .98 !important;
  font-weight: 950 !important;
  letter-spacing: -2px !important;
  white-space: normal !important;
}

#best-sellers .section-heading-left p {
  font-size: 15.5px !important;
  font-weight: 450 !important;
  color: #475569 !important;
  line-height: 1.7 !important;
  padding-left: 14px !important;
  border-left: 3px solid rgba(124,92,255,.45) !important;
  margin: 0 !important;
}

#best-sellers .product-actions {
  display: flex !important;
  width: 100% !important;
  margin-top: 0 !important;
  justify-content: center !important;
  margin: 0 auto 8px !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  align-items: center !important;
}

#best-sellers .product-rating {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin-top: auto !important;
  margin: 0 0 7px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: #f5a623 !important;
  margin-bottom: 0 !important;
}

#best-sellers .stars {
  color: #ffb703 !important;
  font-size: 15px;
  letter-spacing: 1px !important;
}

#best-sellers .reviews {
  color: #7c8497 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

#best-sellers .carousel-wrapper::after {
  content: none !important;
  position: absolute;
  top: 0;
  right: 0;
  width: 160px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(248,244,252,0),
    rgba(248,244,252,.96)
  );
  z-index: 5;
  display: none !important;
}

#best-sellers .carousel-prev:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 20px 40px rgba(124,92,255,.22);
}

#best-sellers .carousel-next:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 20px 40px rgba(124,92,255,.22);
}

#best-sellers .product-item::after {
  content: none !important;
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 120px;
  height: 22px;
  background: none !important;
  filter: none !important;
  border-radius: 50%;
  z-index: 0;
  display: none !important;
  box-shadow: none !important;
}

.account-btn {
  height: 48px !important;
  min-width: 128px !important;
  padding: 0 18px !important;
  gap: 10px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #ffffff, #f7f2ff) !important;
  border: 1px solid rgba(124,92,255,.22) !important;
  box-shadow: 0 14px 34px rgba(124,92,255,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.account-btn i {
  width: 22px !important;
  height: 22px !important;
  font-size: 22px !important;
  color: #7c5cff !important;
  stroke: #7c5cff !important;
}

.account-btn-icon {
  width: 22px !important;
  height: 22px !important;
  font-size: 22px !important;
  color: #7c5cff !important;
  stroke: #7c5cff !important;
}

.account-btn-icon::before {
  content: "�Y'�";
  font-size: 20px;
  line-height: 1;
}

#best-sellers .carousel-prev::before {
  content: "<";
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #7c5cff !important;
}

#best-sellers .carousel-next::before {
  content: ">";
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #7c5cff !important;
}

.account-btn:hover {
  color: #7c5cff !important;
  background: linear-gradient(135deg, #ffffff, #f7f2ff) !important;
}

.account-link:hover span {
  color: #7c5cff !important;
}

.account-btn:hover span {
  color: #7c5cff !important;
}

.account-btn:hover .account-btn-label {
  color: #7c5cff !important;
}

.nav-menu a[href*="offre"] {
  width: 118px !important;
}

.nav-menu a[href*="nouveaute"] {
  width: 118px !important;
}

.main-nav a[href*="offre"] {
  width: 118px !important;
}

.main-nav a[href*="nouveaute"] {
  width: 118px !important;
}

.top-bar > span {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.site-header .top-bar {
  transition: .25s ease;
}

.site-header .header-trust {
  transition: .25s ease;
}

.site-header.hide-trust .top-bar {
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

.site-header.hide-trust .header-trust {
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

.site-header.hide-trust + .hero {
  margin-top: 0 !important;
}

.site-header.hide-trust + .hero-section {
  margin-top: 0 !important;
}

#best-sellers .best-sellers-products::after {
  content: none !important;
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      rgba(251,248,255,0),
      rgba(251,248,255,.92)
    );
  z-index: 6;
  display: none !important;
}

#best-sellers .section-header::after {
  display: none !important;
  content: none !important;
}

#newcomers {
  position: relative;
  padding: 88px 0 100px !important;
  background: radial-gradient(circle at 18% 10%, rgba(124,92,255,.08), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(255,79,216,.07), transparent 28%),
    linear-gradient(180deg, #fbf8ff 0%, #fbf8ff 100%) !important;
  overflow: visible !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 70px !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  border-top: 0 !important;
}

#newcomers .section-header {
  max-width: 1800px !important;
  margin: 0 auto 26px !important;
  padding: 0 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#newcomers .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: 999px;
  background: linear-gradient(
      135deg,
      rgba(124,92,255,.12),
      rgba(255,79,216,.10)
    );
  color: #7c5cff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .8px;
  text-transform: uppercase;
}

#newcomers .section-header h2 {
  margin: 18px 0 0 !important;
  color: #071126;
  font-size: clamp(34px, 3vw, 48px);
  line-height: .98;
  letter-spacing: -1.8px;
  font-weight: 950;
  text-align: left !important;
  margin-top: 16px !important;
}

.new-products-shell {
  max-width: 1800px;
  margin: 0 auto;
  padding: 24px;
  border-radius: 38px;
  background: linear-gradient(
      135deg,
      rgba(255,255,255,.84),
      rgba(250,245,255,.74)
    );
  border: 1.5px solid rgba(124,92,255,.16);
  box-shadow: 0 28px 70px rgba(124,92,255,.10),
    inset 0 1px 0 rgba(255,255,255,.96);
}

#new-products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px !important;
}

#newcomers .product-item {
  position: relative !important;
  min-width: 250px !important;
  height: 385px !important;
  min-height: 385px !important;
  padding: 16px 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  border-radius: 26px !important;
  background: #fff !important;
  border: 1px solid rgba(124,92,255,.14) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.06),
    0 14px 34px rgba(124,92,255,.08) !important;
  overflow: hidden !important;
  transition: .25s ease !important;
  max-width: 235px !important;
  flex: 0 0 250px !important;
  width: 250px !important;
  background-image: none !important;
  justify-content: space-between !important;
}

#newcomers .product-item:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.07) !important;
}

#newcomers .product-image {
  height: 150px !important;
  margin: 14px 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  background-image: none !important;
  width: 100% !important;
  border-radius: 22px !important;
}

#newcomers .product-image img {
  width: auto !important;
  height: 138px !important;
  max-height: 138px !important;
  filter: drop-shadow(0 14px 24px rgba(17,24,39,.14)) !important;
  max-width: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
}

#newcomers .product-item > img {
  width: auto !important;
  height: 118px !important;
  max-height: 118px !important;
  filter: drop-shadow(0 14px 22px rgba(17,24,39,.14)) !important;
  max-width: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
}

#newcomers .product-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .45px !important;
  box-shadow: 0 12px 24px rgba(124,92,255,.24) !important;
  right: auto !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
}

#newcomers .badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(
      135deg,
      #ff4fd8,
      #7c5cff
    ) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .5px !important;
  box-shadow: 0 12px 24px rgba(255,79,216,.24) !important;
}

#newcomers .product-details {
  width: 100% !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

#newcomers .product-title {
  min-height: 38px !important;
  margin: 0 auto 5px !important;
  overflow: hidden !important;
  color: #071126 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  max-height: 38px !important;
  text-align: center !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  margin-bottom: 5px !important;
}

#newcomers .product-details h3 {
  min-height: 42px !important;
  margin: 0 auto 8px !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
  max-height: 42px !important;
}

#newcomers .product-subtitle {
  display: none !important;
}

#newcomers .brand-tag {
  display: none !important;
}

#newcomers .product-price {
  margin: 0 auto 9px !important;
  color: #6d4aff !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  letter-spacing: -.7px !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  line-height: 1 !important;
}

#newcomers .price {
  margin: auto auto 12px !important;
  color: #7c3aed !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -.5px !important;
}

#newcomers .product-actions {
  width: 100% !important;
  height: auto !important;
  margin: 0 auto 8px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  margin-top: 0 !important;
  box-shadow: none !important;
}

#newcomers .quantity-controls {
  width: 120px !important;
  height: 42px !important;
  margin: 0 auto !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 999px !important;
  background: rgba(124,58,237,.08) !important;
  border: 1px solid rgba(124,92,255,.14) !important;
}

#newcomers .qty-box {
  width: 140px !important;
  height: 34px !important;
  margin: 0 auto !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff, #f8f5ff) !important;
  border: 1px solid rgba(124,92,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(124,92,255,.08) !important;
}

#newcomers .qty-btn {
  border: 0 !important;
  background: transparent !important;
  color: #7c5cff !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

#newcomers .quantity-btn {
  border: 0 !important;
  background: transparent !important;
  color: #7c3aed !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  cursor: pointer;
}

#best-sellers .section-heading-premium {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  max-width: calc(100% - 374px) !important;
}

.trust-strip-section {
  padding: 22px 34px 72px;
  background: linear-gradient(180deg, #fbf8ff 0%, #ffffff 100%);
}

.trust-strip {
  max-width: 1740px;
  margin: 0 auto;
  padding: 26px 30px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-radius: 30px;
  background: radial-gradient(circle at 12% 50%, rgba(124,92,255,.12), transparent 26%),
    radial-gradient(circle at 90% 50%, rgba(255,79,216,.10), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,241,255,.88));
  border: 1.5px solid rgba(124,92,255,.20);
  box-shadow: 0 26px 70px rgba(124,92,255,.14),
    0 0 38px rgba(124,92,255,.10),
    inset 0 1px 0 rgba(255,255,255,.96);
}

.trust-item {
  min-height: 78px !important;
  padding: 1px 2px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(250,246,255,.88)) !important;
  border: 1px solid rgba(124,92,255,.18) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 42px rgba(124,92,255,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  transition: .25s ease;
}

.trust-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 22%;
  width: 1px;
  height: 56%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(124,92,255,.24),
    transparent
  );
}

.trust-item i {
  width: 46px;
  height: 46px;
  font-size: 46px;
  color: #7c5cff;
  filter: drop-shadow(0 0 12px rgba(124,92,255,.26));
}

.trust-item div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.trust-item strong {
  color: #071126;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -.2px;
}

.trust-item span {
  color: #5f6680;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.trust-item:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(124,92,255,.40) !important;
  box-shadow: 0 26px 56px rgba(124,92,255,.22),
    0 0 30px rgba(255,79,216,.12),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.trust-item:hover .trust-icon {
  animation-play-state: paused;
  transform: scale(1.08) rotate(-4deg);
  color: #6d4aff !important;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.98), rgba(124,92,255,.28)) !important;
  box-shadow: 0 16px 36px rgba(124,92,255,.32),
    0 0 22px rgba(255,79,216,.20) !important;
}

.trust-item:hover .trust-title {
  color: #6d4aff !important;
}

/* Theme-coherent trust-bar motion */
@keyframes trustReveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes trustIconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.trust-bar .trust-item {
  animation: trustReveal .6s cubic-bezier(.2,.7,.3,1) both;
}

.trust-bar .trust-item:nth-child(1) { animation-delay: .05s; }
.trust-bar .trust-item:nth-child(2) { animation-delay: .13s; }
.trust-bar .trust-item:nth-child(3) { animation-delay: .21s; }
.trust-bar .trust-item:nth-child(4) { animation-delay: .29s; }
.trust-bar .trust-item:nth-child(5) { animation-delay: .37s; }

.trust-bar .trust-icon {
  animation: trustIconFloat 4s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.2,.7,.3,1),
    box-shadow .3s ease, background .3s ease, color .3s ease;
}

.trust-bar .trust-item:nth-child(2) .trust-icon { animation-delay: .6s; }
.trust-bar .trust-item:nth-child(3) .trust-icon { animation-delay: 1.2s; }
.trust-bar .trust-item:nth-child(4) .trust-icon { animation-delay: 1.8s; }
.trust-bar .trust-item:nth-child(5) .trust-icon { animation-delay: 2.4s; }

@media (prefers-reduced-motion: reduce) {
  .trust-bar .trust-item { opacity: 1 !important; animation: none !important; }
  .trust-bar .trust-icon { animation: none !important; }
}


.trust-bar-section {
  margin-top: 0 !important;
  padding: 10px 10px 10px !important;
  position: relative !important;
  z-index: 40 !important;
  background: radial-gradient(circle at 18% 20%, rgba(124,92,255,.08), transparent 30%),
    radial-gradient(circle at 86% 24%, rgba(255,79,216,.08), transparent 28%),
    linear-gradient(180deg, #fbf8ff 0%, #ffffff 52%, #fbf8ff 100%) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

.trust-bar {
  width: 100vw;
  max-width: none;
  margin: 0 calc(-1 * ((100vw - 100%) / 2));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  padding: 0 32px;
  box-sizing: border-box;
  background: radial-gradient(circle at 18% 10%, rgba(124,92,255,.08), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(255,79,216,.07), transparent 28%),
    linear-gradient(180deg, #fbf8ff 0%, #fbf8ff 100%) !important;
  margin-top: -65px !important;
  position: relative !important;
  top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 40px !important;
  padding-top: 0 !important;
  z-index: 40 !important;
}

.trust-icon {
  width: 54px !important;
  height: 54px !important;
  flex-shrink: 0;
  border-radius: 18px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.95), rgba(124,92,255,.16)) !important;
  color: #7c5cff !important;
  font-size: 28px !important;
  box-shadow: 0 12px 28px rgba(124,92,255,.16) !important;
}

.trust-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trust-title {
  font-size: 13px !important;
  font-weight: 950 !important;
  color: #12142b !important;
  line-height: 1.1;
  text-transform: uppercase;
}

.trust-subtitle {
  font-size: 12.5px !important;
  font-weight: 750 !important;
  color: #4f5570 !important;
  line-height: 1.25;
}

/* Better legibility, especially on small screens */
@media (max-width: 768px) {
  .trust-title {
    font-size: 15px !important;
    letter-spacing: .2px;
  }

  .trust-subtitle {
    font-size: 13.5px !important;
    font-weight: 750 !important;
    color: #454c66 !important;
  }

  .trust-item {
    min-height: 72px !important;
    gap: 16px;
  }
}

""

.trust-bar {
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

#best-sellers .best-sellers-products::before {
  display: none !important;
  content: none !important;
}

#best-sellers .carousel-wrapper::before {
  display: none !important;
  content: none !important;
}

#best-sellers .product-grid::before {
  display: none !important;
  content: none !important;
}

#best-sellers .product-grid::after {
  display: none !important;
  content: none !important;
}

#best-sellers .product-item::before {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

#newcomers .section-heading {
  width: 100% !important;
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  margin: 0 !important;
}

#newcomers .section-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(124,92,255,.10) !important;
  border: 1px solid rgba(124,92,255,.16) !important;
  color: #7c5cff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  box-shadow: 0 12px 28px rgba(124,92,255,.10) !important;
}

#newcomers .section-title {
  margin: 12px 0 8px !important;
  color: #071126 !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -.8px !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  white-space: nowrap !important;
}

#newcomers .section-subtitle {
  max-width: 560px !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
}

#newcomers .new-products-shell {
  max-width: 1800px !important;
  margin: 0 auto !important;
  padding: 18px !important;
  border-radius: 34px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(124,92,255,.18) !important;
  box-shadow: 0 22px 58px rgba(124,92,255,.10) !important;
}

#newcomers #new-products {
  display: flex !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  background: #ffffff !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
  overflow-y: hidden !important;
}

#newcomers #new-products::-webkit-scrollbar {
  display: none !important;
}

#newcomers .product-item h3 {
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 auto 8px !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
  text-align: center !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
}

#newcomers .product-rating {
  font-size: 12px !important;
  color: #f5a623 !important;
  margin: 0 0 7px !important;
  line-height: 1 !important;
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin-bottom: 0 !important;
}

#newcomers .rating {
  font-size: 13px !important;
  color: #f5a400 !important;
}

#newcomers .section-heading-left h2 {
  margin: 10px 0 10px !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  color: #071126 !important;
  font-size: clamp(28px, 2.2vw, 38px) !important;
  line-height: 1.05 !important;
  letter-spacing: -1.4px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#newcomers #new-products .product-item {
  flex: 0 0 198px !important;
  width: 198px !important;
  min-width: 198px !important;
  max-width: 198px !important;
  height: 248px !important;
  min-height: 248px !important;
  padding: 12px !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid rgba(124,92,255,.16) !important;
  box-shadow: 0 10px 24px rgba(124,92,255,.07),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: hidden !important;
}

#newcomers #new-products .product-image {
  width: 100% !important;
  height: 104px !important;
  margin: 4px 0 6px !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#newcomers #new-products .product-image img {
  height: 100px !important;
  max-height: 100px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: drop-shadow(0 12px 20px rgba(17,24,39,.14)) !important;
}

#newcomers #new-products .product-details {
  width: 100% !important;
  flex: 1 !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

#newcomers #new-products .product-title {
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 auto 3px !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  color: #111827 !important;
  overflow: hidden !important;
}

#newcomers #new-products .product-subtitle {
  display: none !important;
}

#newcomers #new-products .product-price {
  margin-top: auto !important;
  margin-bottom: 12px !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #161d6f !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
}

#newcomers #new-products .qty-box {
  width: 120px !important;
  height: 42px !important;
  margin: 0 auto !important;
  border-radius: 999px !important;
  background: rgba(124,58,237,.08) !important;
}

#newcomers #new-products .price {
  margin-top: auto !important;
  margin-bottom: 12px !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 24px !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
  font-weight: 900 !important;
  color: #161d6f !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
}

.add-to-cart-mini {
  height: 38px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 12px 24px rgba(124,92,255,.22) !important;
}

#best-sellers .product-image {
  height: 150px !important;
  margin: 14px 0 12px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: radial-gradient(circle at 50% 58%, rgba(124,92,255,.10), transparent 52%) !important;
  border-radius: 22px !important;
}

#best-sellers .product-image img {
  height: 138px !important;
  max-height: 138px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 14px 24px rgba(17,24,39,.14)) !important;
}

#newcomers .qty-value {
  color: #071126 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

#newcomers .reviews {
  color: #7c8497 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

#newcomers .stars {
  color: #ffb703 !important;
  letter-spacing: 1px !important;
}

#best-sellers .carousel-container::before {
  content: none !important;
  display: none !important;
}

#best-sellers .carousel-container::after {
  content: none !important;
  display: none !important;
}

#featured-pagination {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#best-sellers #featured-products {
  display: flex !important;
  gap: 20px !important;
  width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bs-bg) !important;
}


/* ===================== ANIMATIONS ===================== */

@keyframes smokeFloat {
0% {
    transform: scale(.92);
    opacity: .48;
  }

  50% {
    transform: scale(1.12);
    opacity: .88;
  }

  100% {
    transform: scale(.92);
    opacity: .48;
  }
}

@keyframes smokeRise {
0% {
    transform: translateX(-50%) translateY(10px) scale(.8);
    opacity: 0;
  }

  25% {
    opacity: .9;
  }

  100% {
    transform: translateX(-50%) translateY(-30px) scale(1.5);
    opacity: 0;
  }
}


@media (max-width: 1300px) {

  #best-sellers .best-sellers-layout {
    grid-template-columns: minmax(0, 1fr) 340px !important;
  }

  #best-sellers .weekly-offer-side {
    width: 340px !important;
    min-width: 340px !important;
  }

  #best-sellers .product-item {
    flex-basis: 250px !important;
  }

  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #best-sellers .weekly-offer-shell {
    height: 560px !important;
  }

  #new-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #newcomers #new-products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

}


@media (max-width: 1024px) {

  .header-inner {
    padding: 0 22px;
  }

  .main-header {
    padding: 0 22px;
  }

  .search-bar {
    position: relative;
  }

  .search-box {
    position: relative;
  }

  .main-nav {
    gap: 6px;
  }

  .nav-menu {
    gap: 6px;
  }

  .main-nav a {
    padding: 10px 12px;
  }

  .nav-menu a {
    padding: 10px 12px;
  }

  #best-sellers .best-sellers-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #best-sellers .best-sellers-products {
    min-width: 0;
    width: 100%;
  }

  #best-sellers .weekly-offer-side {
    width: 100% !important;
    min-width: 0;
    min-height: 320px;
  }

  #best-sellers .weekly-offer-shell {
    height: 320px;
  }

  #best-sellers .product-item {
    flex-basis: calc((100% - 18px) / 2);
  }

  .advantages-shell {
    grid-template-columns: 1fr;
  }

  .newsletter-wrapper {
    grid-template-columns: 1fr;
  }

  .banner-content-grid {
    grid-template-columns: 1fr;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-bar-section {
    margin-top: -70px !important;
  }

  .trust-bar {
    top: -35px !important;
    margin-top: -70px !important;
    padding-bottom: 22px !important;
  }

}


@media (max-width: 820px) {

  .header-inner {
    min-height: 72px;
    gap: 14px;
  }

  .main-header {
    min-height: 72px;
    gap: 14px;
  }

  .brand-text {
    display: none;
  }

  .main-nav span:not(.nav-emoji) {
    display: none;
  }

  .header-trust-sep {
    display: none;
  }

  .btn-secondary {
    display: none;
  }

  .main-nav {
    gap: 10px;
    padding: 6px;
  }

  .nav-menu {
    gap: 10px;
    padding: 6px;
  }

  .search-bar {
    height: 42px;
    display: none;
  }

  .search-box {
    height: 42px;
    display: none;
  }

  .brand-logo img {
    max-width: 130px;
  }

  .logo img {
    max-width: 130px;
  }

  .header-trust-inner {
    justify-content: flex-start;
    gap: 22px;
    padding: 0 16px;
    font-size: 12px;
  }

  .top-bar {
    justify-content: flex-start;
    gap: 22px;
    padding: 0 16px;
    font-size: 12px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-header h2 {
    font-size: 28px;
  }

  .hero-banner {
    background: linear-gradient(180deg, #f5efff 0%, #ebdcff 100%);
  }

  .hero-banner img {
    aspect-ratio: 16 / 7;
    object-fit: contain;
    object-position: center;
    min-height: 0;
    box-shadow: none;
  }

  /* Dedicated mobile banner: render the image at its natural ratio so the
     full layout (flag, products, trust bar) shows with no crop and no bands,
     while still being noticeably taller than the cropped wide banner. */
  .hero-banner.hero-has-mobile {
    background: none;
  }

  .hero-banner.hero-has-mobile img {
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    object-fit: fill;
    box-shadow: none;
  }

  /* Banniere paysage (large ~3:1) sans variante mobile : affichee a son ratio
     naturel pour qu'elle remplisse toute sa hauteur, sans les bandes lavande
     haut/bas (dues au 16/7 + object-fit:contain) ni rognage du contenu. */
  .hero-banner.is-landscape img {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: fill !important;
  }

}


@media (max-width: 640px) {

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  #best-sellers .best-sellers-layout {
    padding-left: 16px;
    padding-right: 16px;
  }

  #best-sellers .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .category-grid {
    padding-left: 16px;
    padding-right: 16px;
    grid-template-columns: 1fr;
  }

  #best-sellers .product-item {
    flex-basis: 82%;
  }

  #best-sellers .weekly-offer-side {
    min-height: 300px;
  }

  #best-sellers .weekly-offer-shell {
    height: 300px;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .advantages-grid {
    grid-template-columns: 1fr;
  }

  .advantages-mini-stats {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
  }

  .newsletter-form .form-group {
    flex-direction: column;
  }

  .new-products-shell {
    padding: 16px !important;
  }

  #new-products {
    grid-template-columns: 1fr;
  }

  #newcomers .product-item {
    height: 340px !important;
  }

  .trust-bar-section {
    margin-top: -30px !important;
  }

  .trust-bar {
    top: 0 !important;
    margin-top: -25px !important;
    padding-bottom: 22px !important;
  }

  #newcomers {
    padding-top: 24px !important;
  }

  #newcomers #new-products {
    grid-template-columns: 1fr !important;
  }

}


@media (max-width: 520px) {

  .age-modal {
    width: 92vw;
    min-height: auto;
    padding: 30px 22px 26px;
    border-radius: 26px;
  }

  .age-logo {
    max-width: 130px;
    margin-bottom: 28px;
  }

  .age-icon-img {
    width: 66px;
    height: 66px;
    margin-bottom: 26px;
  }

  .age-modal h2 {
    font-size: 21px;
  }

  .age-modal p {
    font-size: 14px;
  }

  .age-btn {
    max-width: 100%;
  }

}


@media (max-width: 1200px) {

  #best-sellers .section-title {
    font-size: 42px !important;
  }

  #best-sellers .section-heading {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 24px !important;
  }

  .trust-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .trust-item:nth-child(3)::after {
    display: none;
  }

}


@media (max-width: 1450px) {

  #best-sellers .section-heading {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 34px !important;
  }

  #best-sellers .section-title {
    font-size: clamp(34px, 2.8vw, 44px) !important;
  }

  #best-sellers .section-heading-left h2 {
    font-size: clamp(34px, 2.8vw, 44px) !important;
  }

}


@media (max-width: 1120px) {

  #best-sellers .section-heading {
    grid-template-columns: 1fr auto !important;
    row-gap: 22px !important;
  }

  #best-sellers .section-link {
    grid-column: 2 !important;
  }

}


@media (max-width: 760px) {

  #best-sellers .section-header {
    padding: 0 18px !important;
  }

  #best-sellers .section-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }

  #best-sellers .section-title {
    white-space: normal !important;
    font-size: 34px !important;
    letter-spacing: -1.4px !important;
  }

  #best-sellers .section-heading-left h2 {
    white-space: normal !important;
    font-size: 34px !important;
    letter-spacing: -1.4px !important;
  }

  #best-sellers .section-link {
    align-self: stretch !important;
    width: 100% !important;
  }

  .trust-strip {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .trust-item {
    justify-content: flex-start;
  }

  .trust-item::after {
    display: none !important;
  }

  #newcomers .section-title {
    white-space: normal !important;
    font-size: 34px !important;
    letter-spacing: -1.4px !important;
  }

  #newcomers .section-heading-left h2 {
    white-space: normal !important;
    font-size: 34px !important;
    letter-spacing: -1.4px !important;
  }

}


@media (max-width: 900px) {

  #new-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-bar {
    grid-template-columns: 1fr;
  }

  .trust-item {
    min-height: 70px;
  }

  #newcomers #new-products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow-x: auto !important;
  }

  #newcomers .product-item {
    flex-basis: 235px !important;
  }

}


/* =========================================================
   CORRECTION FINALE �?" BEST SELLERS / CARROUSEL / TRUST BAR
   Objectif :
   - supprimer définitivement la cassure de fond du carrousel
   - garder un espace bas propre sous les cartes
   - remonter légèrement la trust-bar
========================================================= */

/* 1) Le fond de toute la zone est porté par la section uniquement */
#best-sellers {
  background:
    radial-gradient(circle at 18% 10%, rgba(124,92,255,.08), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(255,79,216,.07), transparent 28%),
    linear-gradient(180deg, #fbf8ff 0%, #fbf8ff 100%) !important;

  overflow: visible !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;

  --best-sellers-bg: #fbf8ff;
}

/* 2) Le layout ne doit PAS avoir son propre fond */
#best-sellers .best-sellers-layout {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;

  align-items: start !important;
}

/* 3) Le bloc produits devient un simple wrapper transparent.
      Plus de fond, plus de border, plus de shadow = plus aucune cassure. */
#best-sellers .best-sellers-products {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;

  border-radius: 0 !important;

  padding: 18px 0 32px 0 !important;
  margin: 0 !important;

  overflow: visible !important;
  min-width: 0 !important;
}

/* 4) Toute la chaîne du carrousel reste transparente.
      Le scroll reste sur .carousel-container. */
#best-sellers .carousel-wrapper,
#best-sellers .carousel-container,
#best-sellers #featured-products,
#best-sellers .product-grid {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;

  border-radius: 0 !important;
  margin: 0 !important;
}

/* wrapper : garde les flèches et évite tout fond parasite */
#best-sellers .carousel-wrapper {
  position: relative !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* container : le viewport horizontal */
#best-sellers .carousel-container {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 0 0 6px 0 !important;

  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#best-sellers .carousel-container::-webkit-scrollbar {
  display: none !important;
}

/* grille : espace bas réel sous les cartes */
#best-sellers #featured-products,
#best-sellers .product-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;

  width: max-content !important;
  min-width: max-content !important;

  overflow: visible !important;

  padding: 0 0 26px 0 !important;
  scroll-padding-right: 0 !important;
}

/* cartes : elles seules restent blanches */
#best-sellers .product-item {
  background: #ffffff !important;
  background-image: none !important;
}

/* 5) Pagination vide neutralisée */
#best-sellers .carousel-pagination,
#featured-pagination {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 6) Trust bar légèrement remontée */
.trust-bar {
  position: relative !important;
  top: 0 !important;
  margin-top: -125px !important;
}

/* 7) Responsive : éviter les gros overlaps sur mobile */
@media (max-width: 1024px) {
  #best-sellers .best-sellers-products {
    padding-bottom: 28px !important;
  }

  .trust-bar {
    margin-top: -70px !important;
  }
}

@media (max-width: 640px) {
  #best-sellers .best-sellers-products {
    padding-bottom: 24px !important;
  }

  .trust-bar {
    margin-top: -30px !important;
  }
}

/* 8) Pas d'offre de la semaine : les best-sellers prennent toute la largeur
      et la trust-bar n'est plus tuckee sous une colonne d'offre absente. */
#best-sellers.no-weekly-offer .best-sellers-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}
/* Marges laterales : le bloc best-sellers ne touche plus les bords
   gauche/droit de l'ecran quand il n'y a pas d'offre de la semaine. */
#best-sellers.no-weekly-offer {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
/* Le cadre mauve (::before) occupe toute la largeur (plus de reserve pour la
   colonne d'offre absente) et descend assez bas pour couvrir les cartes. */
#best-sellers.no-weekly-offer .best-sellers-layout::before {
  right: 0 !important;
  bottom: 16px !important;
}
/* Le carrousel n'est plus limite a 4 cartes : il occupe toute la largeur. */
#best-sellers.no-weekly-offer .carousel-wrapper {
  max-width: none !important;
}
/* Tablette (641->1024) : cartes a largeur naturelle au lieu du mode 2-up
   prevu pour l'affichage avec offre, et cadre pleine largeur. */
@media (min-width: 641px) and (max-width: 1024px) {
  #best-sellers.no-weekly-offer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #best-sellers.no-weekly-offer .best-sellers-layout {
    padding: 0 24px !important;
  }
  #best-sellers.no-weekly-offer #featured-products > .product-item {
    flex: 0 0 250px !important;
    width: 250px !important;
    max-width: 250px !important;
  }
}
#best-sellers.no-weekly-offer + .trust-bar {
  margin-top: 2px !important;
}
@media (max-width: 1024px) {
  #best-sellers.no-weekly-offer {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #best-sellers.no-weekly-offer + .trust-bar {
    margin-top: 2px !important;
  }
}
@media (max-width: 640px) {
  #best-sellers.no-weekly-offer {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #best-sellers.no-weekly-offer + .trust-bar {
    margin-top: 2px !important;
  }
}

/* Presence d'offre de la semaine : le bloc best-sellers ET la colonne d'offre
   adoptent le meme retrait lateral (16/12/0 px) que la banniere hero, pour ne
   plus toucher les bords gauche/droit de l'ecran. Miroir du cas sans offre :
   la padding retrecit la zone de contenu, donc le cadre mauve (::before) et
   l'aside d'offre se decalent tous deux vers l'interieur. */
#best-sellers:not(.no-weekly-offer) {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
@media (max-width: 1024px) {
  #best-sellers:not(.no-weekly-offer) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
@media (max-width: 640px) {
  #best-sellers:not(.no-weekly-offer) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================
   UNIFORMISATION FOND ENTRE CARTES
========================================= */

#best-sellers {
  --carousel-surface: #fbf8ff !important;
  --bs-bg: #fbf8ff !important;
}

/* TOUS les niveaux EXACTEMENT même couleur */
#best-sellers .best-sellers-layout,
#best-sellers .best-sellers-products,
#best-sellers .carousel-wrapper,
#best-sellers .carousel-container,
#best-sellers .product-grid {
  background: #fbf8ff !important;
  background-color: #fbf8ff !important;
  background-image: none !important;
}

/* cartes uniquement blanches */
#best-sellers .product-item {
  background: #ffffff !important;
}

/* FIX GRIS ENTRE LES CARTES BEST SELLERS */

#best-sellers,
#best-sellers .best-sellers-layout,
#best-sellers .best-sellers-products,
#best-sellers .carousel-wrapper,
#best-sellers .carousel-container,
#best-sellers .product-grid {
  background: #fbf8ff !important;
  background-color: #fbf8ff !important;
  background-image: none !important;
}

/* supprime les ombres qui salissent l'espace entre cartes */
#best-sellers .product-item {
  background: #ffffff !important;
  background-image: none !important;

  box-shadow:
    0 10px 24px rgba(124,92,255,.055) !important;
}

/* éviter que le hover noircisse/grise les espaces */
#best-sellers .product-item:hover {
  box-shadow:
    0 12px 26px rgba(124,92,255,.07) !important;
}

/* au cas où un pseudo-élément crée un voile */
#best-sellers .best-sellers-products::before,
#best-sellers .best-sellers-products::after,
#best-sellers .carousel-wrapper::before,
#best-sellers .carousel-wrapper::after,
#best-sellers .carousel-container::before,
#best-sellers .carousel-container::after,
#best-sellers .product-grid::before,
#best-sellers .product-grid::after {
  content: none !important;
  display: none !important;
}

/* =========================================
   UNIFICATION BEST SELLERS + TRUST BAR
========================================= */

:root {
  --surface-premium: #fbf8ff;
}

/* même surface partout */
#best-sellers,
#best-sellers .best-sellers-layout,
#best-sellers .best-sellers-products,
#best-sellers .carousel-wrapper,
#best-sellers .carousel-container,
#best-sellers .product-grid,
.trust-bar {
  background: var(--surface-premium) !important;
  background-color: var(--surface-premium) !important;
  background-image: none !important;
}

/* supprime les ombres qui créent des zones grises */
.trust-bar {
  box-shadow: none !important;
  border-top: 0 !important;

  padding-top: 18px !important;
}

/* cartes trust */
.trust-item {
  background: #ffffff !important;

  box-shadow:
    0 10px 24px rgba(124,92,255,.05) !important;
}

/* cartes produits */
#best-sellers .product-item {
  background: #ffffff !important;

  box-shadow:
    0 10px 24px rgba(124,92,255,.05) !important;
}

/* =========================================================
   PATCH FINAL �?" NEWCOMERS UNIFI�? AVEC BEST SELLERS
   Objectif : supprimer la cassure trust-bar/newcomers,
   enlever le contour du bloc Nouveautés, reprendre le modèle
   de carte du carrousel Best Sellers, et uniformiser le fond.
========================================================= */

:root {
  --surface-premium: #fbf8ff;
  --card-premium: #ffffff;
}

/* Surface unique sur toute la continuité visuelle */
#best-sellers,
.trust-bar,
#newcomers,
#newcomers .new-products,
#newcomers .new-products-shell,
#newcomers #new-products {
  background: var(--surface-premium) !important;
  background-color: var(--surface-premium) !important;
  background-image: none !important;
}

/* Supprime la frontière/cassure entre trust-bar et nouveautés */
.trust-bar {
  margin-bottom: 0 !important;
  padding-bottom: 34px !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#newcomers {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#newcomers .newcomers-head,
#newcomers .section-header {
  margin-top: 0 !important;
  margin-bottom: 34px !important;
  padding-top: 0 !important;
}

/* Supprime le contour / bloc encadré Nouveautés */
#newcomers .new-products-shell {
  max-width: 1800px !important;
  margin: 0 auto !important;
  padding: 0 34px 70px !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Liste normale, pas carrousel : mêmes cartes, grille premium */
#newcomers #new-products {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(auto-fit, 250px) !important;
  justify-content: center !important;
  align-items: stretch !important;

  gap: 20px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  overflow: visible !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Cartes Nouveautés = même modèle que Best Sellers */
#newcomers .product-item {
  position: relative !important;

  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 385px !important;
  min-height: 385px !important;

  padding: 16px 16px 14px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;

  text-align: center !important;

  border-radius: 26px !important;
  border: 1px solid rgba(124,92,255,.14) !important;

  background: var(--card-premium) !important;
  background-color: var(--card-premium) !important;
  background-image: none !important;

  box-shadow:
    0 18px 42px rgba(15,23,42,.06),
    0 14px 34px rgba(124,92,255,.08) !important;

  overflow: hidden !important;
  transition: .25s ease !important;
}

#newcomers .product-item:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(124,92,255,.38) !important;
  background: var(--card-premium) !important;
  background-image: none !important;
  box-shadow:
    0 22px 46px rgba(15,23,42,.07),
    0 16px 36px rgba(124,92,255,.09) !important;
}

/* Image produit identique au carrousel */
#newcomers .product-image {
  width: 100% !important;
  height: 150px !important;
  margin: 14px 0 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#newcomers .product-image img,
#newcomers .product-item > img {
  height: 128px !important;
  max-height: 128px !important;
  width: auto !important;
  max-width: 100% !important;

  object-fit: contain !important;

  margin: 0 auto !important;
  display: block !important;

  filter: drop-shadow(0 14px 22px rgba(17,24,39,.16)) !important;
  transition: transform .25s ease !important;
}

#newcomers .product-item:hover .product-image img,
#newcomers .product-item:hover > img {
  transform: scale(1.05) !important;
}

/* Détails carte identiques */
#newcomers .product-details {
  width: 100% !important;
  flex: 1 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;

  text-align: center !important;
  min-width: 0 !important;
}

#newcomers .product-title,
#newcomers .product-details h3 {
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 auto 5px !important;

  overflow: hidden !important;

  color: #071126 !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

#newcomers .product-subtitle,
#newcomers .brand-tag,
#newcomers .product-type-chip {
  display: none !important;
}

#newcomers .product-price,
#newcomers .price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;

  margin: 0 auto 20px !important;

  color: #6d4aff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.7px !important;
  text-align: center !important;
}

#newcomers .product-actions {
  width: 100% !important;
  margin-top: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#newcomers .qty-box,
#newcomers .quantity-controls {
  width: 140px !important;
  max-width: 120px !important;
  height: 34px !important;

  margin: 0 auto !important;
  padding: 0 14px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  border-radius: 999px !important;

  background: linear-gradient(180deg, #ffffff, #f8f5ff) !important;
  border: 1px solid rgba(124,92,255,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(124,92,255,.08) !important;
}

#newcomers .qty-btn,
#newcomers .quantity-btn {
  border: 0 !important;
  background: transparent !important;
  color: #7c5cff !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

#newcomers .qty-value,
#newcomers .quantity-count {
  color: #071126 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

#newcomers .product-rating {
  margin-top: 8px !important;
  margin-bottom: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;

  font-size: 12px !important;
  line-height: 1 !important;
}

#newcomers .stars {
  color: #ffb703 !important;
  letter-spacing: 1px !important;
}

#newcomers .reviews {
  color: #7c8497 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Badge Nouveau aligné sur Top Vente */
#newcomers .product-badge,
#newcomers .badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  max-width: max-content !important;

  padding: 7px 12px !important;
  border-radius: 999px !important;

  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #ffffff !important;

  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .45px !important;
  text-transform: uppercase !important;

  box-shadow: 0 12px 24px rgba(124,92,255,.24) !important;
  z-index: 4 !important;
}

/* Responsive Newcomers */
@media (max-width: 1024px) {
  #newcomers #new-products {
    grid-template-columns: repeat(auto-fit, minmax(230px, 250px)) !important;
  }
}

@media (max-width: 640px) {
  #newcomers .new-products-shell {
    padding: 0 16px 56px !important;
  }

  #newcomers #new-products {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #newcomers .product-item {
    width: 100% !important;
    max-width: 330px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }
}

/* =========================================
   NEWCOMERS = EXACTEMENT COMME BEST SELLERS
========================================= */

/* surface */
#newcomers {
  background: #fbf8ff !important;
  margin-top: 0 !important;
  padding-top: 42px !important;
  padding-bottom: 80px !important;
}

/* wrapper */
#newcomers .newcomers-products {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* grille */
#newcomers .product-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;

  background: transparent !important;
  padding: 0 !important;
}

/* cartes EXACTES */
#newcomers .product-item {
  position: relative !important;

  flex: 0 0 250px !important;
  width: 250px !important;
  min-width: 250px !important;

  height: 385px !important;
  min-height: 385px !important;

  padding: 16px 16px 14px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;

  border-radius: 26px !important;

  background: #ffffff !important;
  border: 1px solid rgba(124,92,255,.14) !important;

  box-shadow:
    0 18px 42px rgba(15,23,42,.06),
    0 14px 34px rgba(124,92,255,.08) !important;

  overflow: hidden !important;
}

/* image */
#newcomers .product-image {
  width: 100% !important;
  height: 150px !important;

  margin: 14px 0 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:
    radial-gradient(circle at 50% 58%,
      rgba(124,92,255,.10),
      transparent 52%) !important;

  border-radius: 22px !important;
}

#newcomers .product-image img {
  height: 138px !important;
  max-height: 138px !important;

  width: auto !important;
  object-fit: contain !important;

  filter:
    drop-shadow(0 14px 24px rgba(17,24,39,.14)) !important;
}

/* contenu */
#newcomers .product-details {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  flex: 1 !important;
  width: 100% !important;

  text-align: center !important;
}

/* titre EXACT */
#newcomers .product-title {
  min-height: 38px !important;
  max-height: 38px !important;

  margin: 0 auto 5px !important;

  font-family: 'Outfit', Inter, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;

  color: #071126 !important;

  overflow: hidden !important;
}

/* prix EXACT */
#newcomers .product-price {
  margin: 0 auto 20px !important;

  font-family: 'Outfit', Inter, Arial, sans-serif !important;

  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 950 !important;

  letter-spacing: -.7px !important;

  color: #6d4aff !important;
}

/* qty EXACT */
#newcomers .qty-box {
  width: 140px !important;
  height: 34px !important;

  padding: 0 14px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(180deg, #ffffff, #f8f5ff) !important;

  border: 1px solid rgba(124,92,255,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(124,92,255,.08) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#newcomers .qty-btn {
  border: 0 !important;
  background: transparent !important;

  color: #7c5cff !important;

  font-size: 18px !important;
  font-weight: 950 !important;
}

#newcomers .qty-value {
  color: #071126 !important;

  font-size: 14px !important;
  font-weight: 900 !important;
}

/* étoiles EXACTES */
#newcomers .product-rating {
  margin-top: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 5px !important;

  font-size: 12px !important;
}

#newcomers .stars {
  color: #ffb703 !important;
}

#newcomers .reviews {
  color: #7c8497 !important;

  font-size: 11px !important;
  font-weight: 700 !important;
}

/* badge EXACT */
#newcomers .product-badge {
  top: 14px !important;
  left: 14px !important;

  padding: 7px 12px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(135deg, #7c5cff, #b44cff) !important;

  color: #ffffff !important;

  font-size: 10px !important;
  font-weight: 900 !important;

  letter-spacing: .45px !important;

  box-shadow:
    0 12px 24px rgba(124,92,255,.24) !important;
}


/* =========================================================
   PATCH FINAL �?" NEWCOMERS STRICTEMENT ALIGN�? BEST-SELLERS
   Objectif :
   - même background Best Sellers / Trust Bar / Nouveautés
   - aucune cassure entre sections
   - même modèle de cartes pour #featured-products et #new-products
   - suppression du contour/bloc autour des nouveautés
========================================================= */

:root {
  --premium-page-surface: #fbf8ff;
  --premium-card-surface: #ffffff;
  --premium-purple: #7c5cff;
  --premium-purple-dark: #6d4aff;
  --premium-pink: #b44cff;
}

/* ---------- Surface unique entre les 3 blocs ---------- */

#best-sellers,
.trust-bar,
#newcomers {
  background: var(--premium-page-surface) !important;
  background-color: var(--premium-page-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

#best-sellers .best-sellers-layout,
#best-sellers .best-sellers-products,
#best-sellers .carousel-wrapper,
#best-sellers .carousel-container,
#best-sellers #featured-products,
.trust-bar,
#newcomers .new-products-shell,
#newcomers #new-products {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ---------- Best Sellers : garder le carousel propre ---------- */

#best-sellers {
  padding-bottom: 0 !important;
  margin-top: 35px !important;
}

#best-sellers .best-sellers-products {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 18px 0 30px !important;
  overflow: hidden !important;
}

#best-sellers .carousel-wrapper,
#best-sellers .carousel-container {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

#best-sellers #featured-products {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ---------- Trust bar : même surface, cartes blanches ---------- */

.trust-bar {
  margin-top: -135px !important;
  padding-top: 18px !important;
  padding-bottom: 20px !important;
  position: relative !important;
  top: 0 !important;
  z-index: 20 !important;
}

.trust-bar .trust-item,
.trust-item {
  background: var(--premium-card-surface) !important;
  background-image: none !important;
  border: 1px solid rgba(124,92,255,.12) !important;
  box-shadow: 0 10px 24px rgba(124,92,255,.05) !important;
}

/* =============================================
   TRUST BAR - EFFET PREMIUM
   Ambiance douce + cartes verre + profondeur
============================================= */

/* Supprime le trait s�parateur */
.trust-bar::before {
  display: none !important;
}

/* Fond ambiant doux sur la trust-bar - pas de ligne, juste du glow */
.trust-bar {
  background:
    radial-gradient(ellipse 70% 50% at 50% 10%, rgba(124,92,255,.055) 0%, transparent 65%),
    radial-gradient(ellipse 35% 70% at 8% 50%,  rgba(124,92,255,.04)  0%, transparent 60%),
    radial-gradient(ellipse 35% 70% at 92% 50%, rgba(255,79,216,.03)  0%, transparent 60%),
    transparent !important;
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 10%, rgba(124,92,255,.055) 0%, transparent 65%),
    radial-gradient(ellipse 35% 70% at 8% 50%,  rgba(124,92,255,.04)  0%, transparent 60%),
    radial-gradient(ellipse 35% 70% at 92% 50%, rgba(255,79,216,.03)  0%, transparent 60%) !important;
  overflow: visible !important;
  box-shadow:
    0 -8px 32px rgba(124,92,255,.08),
    0  8px 32px rgba(124,92,255,.08) !important;
}

/* Cartes trust - verre premium sans ligne visible */
.trust-bar .trust-item,
.trust-item {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.98) 0%,
    rgba(248,244,255,.94) 100%
  ) !important;
  background-image: linear-gradient(
    145deg,
    rgba(255,255,255,.98) 0%,
    rgba(248,244,255,.94) 100%
  ) !important;
  border: 1px solid rgba(124,92,255,.14) !important;
  box-shadow:
    0 1px 3px  rgba(124,92,255,.04),
    0 6px 18px rgba(124,92,255,.07),
    0 18px 40px rgba(124,92,255,.05),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  backdrop-filter: blur(12px) !important;
  transition:
    transform .24s ease,
    box-shadow .24s ease !important;
}

.trust-bar .trust-item:hover,
.trust-item:hover {
  transform: none !important;
  border-color: rgba(124,92,255,.14) !important;
  box-shadow:
    0 1px 3px  rgba(124,92,255,.04),
    0 6px 18px rgba(124,92,255,.07),
    0 18px 40px rgba(124,92,255,.05),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* Ic�nes trust - halo renforc� */
.trust-icon {
  box-shadow:
    0 6px 16px rgba(124,92,255,.22),
    0 2px 6px rgba(124,92,255,.12),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* ---------- Nouveautés : supprimer le bloc/cadre parent ---------- */

#newcomers {
  margin-top: 0 !important;
  padding-top: 38px !important;
  padding-bottom: 80px !important;
  border: 0 !important;
  overflow: visible !important;
}

#newcomers .new-products-shell {
  max-width: 1800px !important;
  margin: 0 auto !important;
  padding: 0 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#newcomers .newcomers-head,
#newcomers .section-header {
  margin-top: 0 !important;
  margin-bottom: 34px !important;
}

/* ---------- Grille Nouveautés : liste normale, pas carousel ---------- */

#newcomers #new-products {
  width: 100% !important;
  max-width: 1800px !important;

  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  gap: 20px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}

/* =========================================================
   CARTES PRODUIT �?" MOD�^LE UNIQUE BEST SELLERS + NOUVEAUT�?S
========================================================= */

#best-sellers #featured-products > .product-item,
#newcomers #new-products > .product-item {
  position: relative !important;

  flex: 0 0 250px !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;

  height: 385px !important;
  min-height: 385px !important;
  max-height: 385px !important;

  padding: 16px 16px 14px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  border-radius: 26px !important;

  background: var(--premium-card-surface) !important;
  background-color: var(--premium-card-surface) !important;
  background-image: none !important;

  border: 1px solid rgba(124,92,255,.14) !important;

  box-shadow:
    0 10px 24px rgba(124,92,255,.055) !important;

  overflow: hidden !important;
  text-align: center !important;

  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}

#best-sellers #featured-products > .product-item:hover,
#newcomers #new-products > .product-item:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(124,92,255,.28) !important;
  box-shadow:
    0 14px 30px rgba(124,92,255,.075) !important;
}

/* Image identique */

#best-sellers #featured-products > .product-item .product-image,
#newcomers #new-products > .product-item .product-image {
  width: 100% !important;
  height: 150px !important;

  margin: 14px 0 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:
    radial-gradient(circle at 50% 58%,
      rgba(124,92,255,.10),
      transparent 52%) !important;

  border-radius: 22px !important;

  overflow: hidden !important;
}

#best-sellers #featured-products > .product-item .product-image img,
#newcomers #new-products > .product-item .product-image img {
  height: 138px !important;
  max-height: 138px !important;
  width: auto !important;
  max-width: 100% !important;

  object-fit: contain !important;

  margin: 0 auto !important;

  display: block !important;

  filter: drop-shadow(0 14px 24px rgba(17,24,39,.14)) !important;

  transform: none !important;
}

#best-sellers #featured-products > .product-item:hover .product-image img,
#newcomers #new-products > .product-item:hover .product-image img {
  transform: scale(1.04) !important;
}

/* Détails identiques */

#best-sellers #featured-products > .product-item .product-details,
#newcomers #new-products > .product-item .product-details {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  text-align: center !important;
}

/* Titre identique */

#best-sellers #featured-products > .product-item .product-title,
#best-sellers #featured-products > .product-item h3,
#newcomers #new-products > .product-item .product-title,
#newcomers #new-products > .product-item h3 {
  min-height: 38px !important;
  max-height: 38px !important;

  margin: 0 auto 5px !important;

  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;

  color: #071126 !important;

  text-align: center !important;

  overflow: hidden !important;
}

/* Subtitles/chips masqués sur les deux blocs */

#best-sellers #featured-products > .product-item .product-subtitle,
#best-sellers #featured-products > .product-item .brand-tag,
#best-sellers #featured-products > .product-item .product-type-chip,
#newcomers #new-products > .product-item .product-subtitle,
#newcomers #new-products > .product-item .brand-tag,
#newcomers #new-products > .product-item .product-type-chip {
  display: none !important;
}

/* Prix identique */

#best-sellers #featured-products > .product-item .product-price,
#best-sellers #featured-products > .product-item .price,
#newcomers #new-products > .product-item .product-price,
#newcomers #new-products > .product-item .price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;

  margin: 0 auto 20px !important;

  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.7px !important;

  color: var(--premium-purple-dark) !important;

  text-align: center !important;
}

/* Zone action identique */

#best-sellers #featured-products > .product-item .product-actions,
#newcomers #new-products > .product-item .product-actions {
  width: 100% !important;

  margin: 0 auto 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Quantité identique */

#best-sellers #featured-products > .product-item .qty-box,
#best-sellers #featured-products > .product-item .quantity-controls,
#newcomers #new-products > .product-item .qty-box,
#newcomers #new-products > .product-item .quantity-controls {
  width: 140px !important;
  max-width: 140px !important;
  height: 34px !important;
  min-height: 34px !important;

  margin: 0 auto !important;
  padding: 0 14px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(180deg, #ffffff, #f8f5ff) !important;

  border: 1px solid rgba(124,92,255,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(124,92,255,.08) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
}

#best-sellers #featured-products > .product-item .qty-btn,
#best-sellers #featured-products > .product-item .quantity-btn,
#newcomers #new-products > .product-item .qty-btn,
#newcomers #new-products > .product-item .quantity-btn {
  border: 0 !important;
  background: transparent !important;

  color: var(--premium-purple) !important;

  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 950 !important;

  cursor: pointer !important;
}

#best-sellers #featured-products > .product-item .qty-value,
#best-sellers #featured-products > .product-item .quantity-count,
#newcomers #new-products > .product-item .qty-value,
#newcomers #new-products > .product-item .quantity-count {
  color: #071126 !important;

  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

/* Rating identique */

#best-sellers #featured-products > .product-item .product-rating,
#newcomers #new-products > .product-item .product-rating {
  margin: auto 0 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;

  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

#best-sellers #featured-products > .product-item .stars,
#newcomers #new-products > .product-item .stars {
  color: #ffb703 !important;
  letter-spacing: 1px !important;
}

#best-sellers #featured-products > .product-item .reviews,
#newcomers #new-products > .product-item .reviews {
  color: #7c8497 !important;

  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Badge identique */

#best-sellers #featured-products > .product-item .product-badge,
#best-sellers #featured-products > .product-item .badge,
#newcomers #new-products > .product-item .product-badge,
#newcomers #new-products > .product-item .badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  max-width: max-content !important;

  padding: 7px 12px !important;

  border-radius: 999px !important;

  background-image: linear-gradient(
    135deg,
    #7c5cff 0%,
    #b44cff 33%,
    rgba(255,255,255,.72) 46%,
    rgba(255,255,255,.72) 54%,
    #b44cff 67%,
    #7c5cff 100%
  ) !important;
  background-size:     300% 100% !important;
  background-position: 0% 50%   !important;

  color: #ffffff !important;

  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .45px !important;
  text-transform: uppercase !important;

  box-shadow:
    0 12px 24px rgba(124,92,255,.24) !important;

  z-index: 4 !important;
  transition: box-shadow .3s ease !important;
}

/* Shimmer badge newcomers au survol */
#newcomers #new-products > .product-item:hover .product-badge,
#newcomers #new-products > .product-item:hover .badge {
  background-position: 100% 50% !important;
  transition:
    background-position 1.4s ease-in-out,
    box-shadow          .3s ease !important;
  box-shadow:
    0 14px 32px rgba(124,92,255,.42),
    0 4px 10px rgba(124,92,255,.26),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
}

/* Responsive cohérent */

@media (max-width: 1024px) {
  #newcomers .new-products-shell {
    padding: 0 24px !important;
  }

  #newcomers #new-products {
    justify-content: center !important;
  }
}

@media (max-width: 640px) {
  #best-sellers #featured-products > .product-item,
  #newcomers #new-products > .product-item {
    flex: 0 0 235px !important;
    width: 235px !important;
    min-width: 235px !important;
    max-width: 235px !important;
    height: 365px !important;
    min-height: 365px !important;
  }

  #newcomers .new-products-shell {
    padding: 0 16px !important;
  }

  #newcomers #new-products {
    justify-content: center !important;
  }
}

/* Espacement horizontal cartes Nouveautes */
#newcomers #new-products {
  column-gap: 35px !important;
}

/* =========================================
   PREMIUM CARDS
   NEWCOMERS + ELFBAR + LOSTMARY
========================================= */

#new-products,
#elfbar-products,
#lostmary-products {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  background: transparent !important;
}

/* ===============================
   CARD
================================ */

#new-products .product-item,
#elfbar-products .product-item,
#lostmary-products .product-item {
  position: relative !important;

  width: 230px !important;
  min-width: 230px !important;

  height: 360px !important;

  padding: 14px !important;

  border-radius: 24px !important;

  background: #ffffff !important;

  border: 1px solid rgba(124,92,255,.12) !important;

  box-shadow:
    0 16px 38px rgba(124,92,255,.08) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease !important;
}

#new-products .product-item:hover,
#elfbar-products .product-item:hover,
#lostmary-products .product-item:hover {
  transform: translateY(-4px) !important;

  box-shadow:
    0 22px 48px rgba(124,92,255,.14) !important;
}

/* ===============================
   IMAGE
================================ */

#new-products .product-image,
#elfbar-products .product-image,
#lostmary-products .product-image {
  height: 132px !important;

  margin: 16px 0 10px !important;

  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:
    radial-gradient(circle,
      rgba(124,92,255,.12),
      transparent 62%) !important;
}

#new-products .product-image img,
#elfbar-products .product-image img,
#lostmary-products .product-image img {
  max-height: 124px !important;

  filter:
    drop-shadow(0 14px 22px rgba(17,24,39,.16)) !important;
}

/* ===============================
   BADGE
================================ */

#new-products .product-badge,
#elfbar-products .product-badge,
#lostmary-products .product-badge {
  position: absolute !important;

  top: 14px !important;
  left: 14px !important;

  padding: 6px 10px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(135deg,#7c5cff,#b44cff) !important;

  color: #ffffff !important;

  font-size: 9px !important;
  font-weight: 900 !important;

  letter-spacing: .4px !important;

  box-shadow:
    0 10px 20px rgba(124,92,255,.22) !important;
}

/* ===============================
   HEART
================================ */

.product-wishlist {
  position: absolute !important;

  top: 14px !important;
  right: 14px !important;

  width: 28px !important;
  height: 28px !important;

  border: 0 !important;

  border-radius: 50% !important;

  background: rgba(255,255,255,.95) !important;

  color: #7c5cff !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow:
    0 8px 18px rgba(124,92,255,.12) !important;
}

.product-wishlist.is-active {
  background: linear-gradient(135deg, #7c4dff 0%, #6540ff 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(124,77,255,.38) !important;
  transform: scale(1.06);
}

.cat-btn-view.is-active {
  background: linear-gradient(135deg, #7c4dff 0%, #6540ff 100%) !important;
  color: #ffffff !important;
  border-color: #7c4dff !important;
}

.cat-btn-view.is-active svg {
  fill: #ffffff !important;
}


#new-products .product-title,
#elfbar-products .product-title,
#lostmary-products .product-title {
  min-height: 40px !important;

  margin-bottom: 4px !important;

  font-family: "Outfit", Inter, sans-serif !important;

  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;

  color: #071126 !important;

  text-align: center !important;
}

/* ===============================
   PRICE
================================ */

#new-products .product-price,
#elfbar-products .product-price,
#lostmary-products .product-price {
  margin-bottom: 12px !important;

  font-family: "Outfit", Inter, sans-serif !important;

  font-size: 21px !important;
  line-height: 1 !important;
  font-weight: 950 !important;

  color: #6d4aff !important;

  text-align: center !important;
}

/* ===============================
   ACTIONS
================================ */

.product-actions-premium {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 10px !important;
}

/* qty */
#new-products .qty-box,
#elfbar-products .qty-box,
#lostmary-products .qty-box {
  width: 108px !important;
  height: 34px !important;

  border-radius: 999px !important;

  background: #ffffff !important;

  border: 1px solid rgba(124,92,255,.16) !important;

  box-shadow:
    0 8px 18px rgba(124,92,255,.06) !important;
}

/* buttons */
#new-products .qty-btn,
#elfbar-products .qty-btn,
#lostmary-products .qty-btn {
  background: transparent !important;
  border: 0 !important;

  color: #7c5cff !important;

  font-size: 18px !important;
  font-weight: 900 !important;
}

/* value */
#new-products .qty-value,
#elfbar-products .qty-value,
#lostmary-products .qty-value {
  color: #071126 !important;

  font-size: 14px !important;
  font-weight: 900 !important;
}

/* round cart */
.add-cart-round {
  width: 36px !important;
  height: 36px !important;

  border-radius: 50% !important;
  border: 0 !important;

  background:
    linear-gradient(135deg,#7c5cff,#6d4aff) !important;

  color: #ffffff !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow:
    0 12px 24px rgba(124,92,255,.24) !important;
}

/* ===============================
   STARS
================================ */

#new-products .product-rating,
#elfbar-products .product-rating,
#lostmary-products .product-rating {
  margin-top: 14px !important;

  font-size: 11px !important;

  display: flex !important;
  justify-content: center !important;
  gap: 5px !important;
}

#new-products .stars,
#elfbar-products .stars,
#lostmary-products .stars {
  color: #ffb703 !important;
}

#new-products .reviews,
#elfbar-products .reviews,
#lostmary-products .reviews {
  color: #7c8497 !important;

  font-size: 10px !important;
}


/* =========================================================
   FIX FINAL �?" CARTES MARQUES ISO NOUVEAUT�?S
   Cible uniquement : Nouveautés, Elfbar, Lost Mary, Toujours +
   Ne touche pas au carrousel Best-Sellers (#featured-products)
========================================================= */

:root {
  --brand-card-surface: #fbf8ff;
  --brand-card-purple: #7c5cff;
  --brand-card-purple-dark: #6d4aff;
  --brand-card-pink: #b44cff;
  --brand-card-ink: #071126;
}

/* Sections marques : même fond / même respiration que Nouveautés */
#newcomers,
#elfbar-showcase,
#lostmary-showcase,
#alwaysplus-showcase {
  background: var(--brand-card-surface) !important;
  background-image: none !important;
  padding: 50px 0 70px !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
}

/* Headers des blocs marques alignés sur Nouveautés */
#elfbar-showcase .section-header,
#lostmary-showcase .section-header,
#alwaysplus-showcase .section-header {
  max-width: 1800px !important;
  margin: 0 auto 26px !important;
  padding: 0 34px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  text-align: left !important;
}

/* Wrappers marques = shell visuellement transparent comme Nouveautés */
.new-products-shell,
.elfbar-band,
.lostmary-band,
.alwaysplus-band {
  max-width: 1800px !important;
  margin: 0 auto !important;
  padding: 24px 34px !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Grilles : même structure que Nouveautés */
#new-products,
#elfbar-products,
#lostmary-products,
#alwaysplus-products {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 35px !important;
  width: 100% !important;
  background: transparent !important;
  background-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Cartes : dimensions, padding, radius, ombres ISO Nouveautés */
#new-products > .product-item,
#elfbar-products > .product-item,
#lostmary-products > .product-item,
#alwaysplus-products > .product-item {
  position: relative !important;
  flex: 0 0 250px !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 385px !important;
  min-height: 385px !important;
  padding: 16px 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: center !important;
  border-radius: 26px !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(124,92,255,.14) !important;
  box-shadow:
    0 18px 42px rgba(15,23,42,.06),
    0 14px 34px rgba(124,92,255,.08) !important;
  overflow: hidden !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

#new-products > .product-item:hover,
#elfbar-products > .product-item:hover,
#lostmary-products > .product-item:hover,
#alwaysplus-products > .product-item:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(124,92,255,.34) !important;
  box-shadow:
    0 26px 60px rgba(124,92,255,.16),
    0 12px 30px rgba(255,79,216,.08) !important;
}

/* Image : même rendu que Nouveautés */
#new-products > .product-item .product-image,
#elfbar-products > .product-item .product-image,
#lostmary-products > .product-item .product-image,
#alwaysplus-products > .product-item .product-image {
  width: 100% !important;
  height: 150px !important;
  margin: 14px 0 12px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 58%, rgba(124,92,255,.10), transparent 52%) !important;
  overflow: visible !important;
}

#new-products > .product-item .product-image img,
#elfbar-products > .product-item .product-image img,
#lostmary-products > .product-item .product-image img,
#alwaysplus-products > .product-item .product-image img {
  height: 138px !important;
  max-height: 138px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 14px 24px rgba(17,24,39,.14)) !important;
  transition: transform .25s ease !important;
}

#new-products > .product-item:hover .product-image img,
#elfbar-products > .product-item:hover .product-image img,
#lostmary-products > .product-item:hover .product-image img,
#alwaysplus-products > .product-item:hover .product-image img {
  transform: scale(1.04) !important;
}

/* Supprime "Elfbar · 20mg" / "Lost Mary · 20mg" etc. */
#elfbar-products > .product-item .product-subtitle,
#lostmary-products > .product-item .product-subtitle,
#alwaysplus-products > .product-item .product-subtitle,
#elfbar-products > .product-item .brand-tag,
#lostmary-products > .product-item .brand-tag,
#alwaysplus-products > .product-item .brand-tag {
  display: none !important;
}

/* Badge type produit en haut à gauche pour les sections marques */
#elfbar-products > .product-item .product-type-chip,
#lostmary-products > .product-item .product-type-chip,
#alwaysplus-products > .product-item .product-type-chip {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: max-content !important;
  height: auto !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--brand-card-purple), var(--brand-card-pink)) !important;
  color: #ffffff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .45px !important;
  text-transform: uppercase !important;
  border: 0 !important;
  background-image: linear-gradient(
    135deg,
    #7c5cff 0%,
    #b44cff 33%,
    rgba(255,255,255,.72) 46%,
    rgba(255,255,255,.72) 54%,
    #b44cff 67%,
    #7c5cff 100%
  ) !important;
  background-size:     300% 100% !important;
  background-position: 0% 50%   !important;
  box-shadow: 0 12px 24px rgba(124,92,255,.24) !important;
  transition: box-shadow .3s ease !important;
}

/* Badge Nouveau des Nouveautés inchangé, même style */
#new-products > .product-item .product-badge,
#new-products > .product-item .badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--brand-card-purple), var(--brand-card-pink)) !important;
  color: #ffffff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .45px !important;
  text-transform: uppercase !important;
  background-image: linear-gradient(
    135deg,
    #7c5cff 0%,
    #b44cff 33%,
    rgba(255,255,255,.72) 46%,
    rgba(255,255,255,.72) 54%,
    #b44cff 67%,
    #7c5cff 100%
  ) !important;
  background-size:     300% 100% !important;
  background-position: 0% 50%   !important;
  box-shadow: 0 12px 24px rgba(124,92,255,.24) !important;
  transition: box-shadow .3s ease !important;
}

/* Shimmer badge / chip au survol de la carte */
#elfbar-products > .product-item:hover .product-type-chip,
#lostmary-products > .product-item:hover .product-type-chip,
#alwaysplus-products > .product-item:hover .product-type-chip,
#new-products > .product-item:hover .product-badge,
#new-products > .product-item:hover .badge {
  background-position: 100% 50% !important;
  transition:
    background-position 1.4s ease-in-out,
    box-shadow          .3s ease !important;
  box-shadow:
    0 14px 32px rgba(124,92,255,.42),
    0 4px 10px rgba(124,92,255,.26),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
}

/* Coeur : même positionnement sur toutes les cartes concernées */
#new-products > .product-item .product-wishlist,
#elfbar-products > .product-item .product-wishlist,
#lostmary-products > .product-item .product-wishlist,
#alwaysplus-products > .product-item .product-wishlist {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 5 !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.95) !important;
  color: var(--brand-card-purple) !important;
  box-shadow: 0 8px 18px rgba(124,92,255,.12) !important;
}

/* Détails carte */
#new-products > .product-item .product-details,
#elfbar-products > .product-item .product-details,
#lostmary-products > .product-item .product-details,
#alwaysplus-products > .product-item .product-details {
  width: 100% !important;
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  text-align: center !important;
}

/* Titre ISO Nouveautés */
#new-products > .product-item .product-title,
#elfbar-products > .product-item .product-title,
#lostmary-products > .product-item .product-title,
#alwaysplus-products > .product-item .product-title,
#new-products > .product-item .product-details h3,
#elfbar-products > .product-item .product-details h3,
#lostmary-products > .product-item .product-details h3,
#alwaysplus-products > .product-item .product-details h3 {
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 auto 5px !important;
  overflow: hidden !important;
  color: var(--brand-card-ink) !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

/* Prix ISO Nouveautés */
#new-products > .product-item .product-price,
#elfbar-products > .product-item .product-price,
#lostmary-products > .product-item .product-price,
#alwaysplus-products > .product-item .product-price,
#new-products > .product-item .price,
#elfbar-products > .product-item .price,
#lostmary-products > .product-item .price,
#alwaysplus-products > .product-item .price {
  margin: 0 auto 20px !important;
  color: var(--brand-card-purple-dark) !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.7px !important;
  text-align: center !important;
}

/* Actions ISO Nouveautés */
#new-products > .product-item .product-actions,
#elfbar-products > .product-item .product-actions,
#lostmary-products > .product-item .product-actions,
#alwaysplus-products > .product-item .product-actions,
#new-products > .product-item .product-actions-premium,
#elfbar-products > .product-item .product-actions-premium,
#lostmary-products > .product-item .product-actions-premium,
#alwaysplus-products > .product-item .product-actions-premium {
  width: 100% !important;
  margin: 0 auto 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* Qty ISO Nouveautés */
#new-products > .product-item .qty-box,
#elfbar-products > .product-item .qty-box,
#lostmary-products > .product-item .qty-box,
#alwaysplus-products > .product-item .qty-box {
  width: 140px !important;
  max-width: 140px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff, #f8f5ff) !important;
  border: 1px solid rgba(124,92,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(124,92,255,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#new-products > .product-item .qty-btn,
#elfbar-products > .product-item .qty-btn,
#lostmary-products > .product-item .qty-btn,
#alwaysplus-products > .product-item .qty-btn {
  border: 0 !important;
  background: transparent !important;
  color: var(--brand-card-purple) !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

#new-products > .product-item .qty-value,
#elfbar-products > .product-item .qty-value,
#lostmary-products > .product-item .qty-value,
#alwaysplus-products > .product-item .qty-value {
  color: var(--brand-card-ink) !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

/* Bouton panier rond ISO */
#new-products > .product-item .add-cart-round,
#elfbar-products > .product-item .add-cart-round,
#lostmary-products > .product-item .add-cart-round,
#alwaysplus-products > .product-item .add-cart-round {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--brand-card-purple), var(--brand-card-purple-dark)) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(124,92,255,.24) !important;
  cursor: pointer !important;
}

/* Rating ISO Nouveautés */
#new-products > .product-item .product-rating,
#elfbar-products > .product-item .product-rating,
#lostmary-products > .product-item .product-rating,
#alwaysplus-products > .product-item .product-rating {
  margin: auto 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  color: inherit !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

#new-products > .product-item .stars,
#elfbar-products > .product-item .stars,
#lostmary-products > .product-item .stars,
#alwaysplus-products > .product-item .stars {
  color: #ffb703 !important;
  letter-spacing: 1px !important;
}

#new-products > .product-item .reviews,
#elfbar-products > .product-item .reviews,
#lostmary-products > .product-item .reviews,
#alwaysplus-products > .product-item .reviews {
  color: #7c8497 !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Ne jamais appliquer ce modèle aux Best-Sellers */
#featured-products > .product-item .product-type-chip {
  display: none !important;
}

/* Responsive */
@media (max-width: 640px) {
  #new-products > .product-item,
  #elfbar-products > .product-item,
  #lostmary-products > .product-item,
  #alwaysplus-products > .product-item {
    flex: 0 0 235px !important;
    width: 235px !important;
    min-width: 235px !important;
    max-width: 235px !important;
    height: 365px !important;
    min-height: 365px !important;
  }

  .new-products-shell,
  .elfbar-band,
  .lostmary-band,
  .alwaysplus-band {
    padding: 18px 16px !important;
  }

  #new-products,
  #elfbar-products,
  #lostmary-products,
  #alwaysplus-products {
    justify-content: center !important;
  }
}

/* �?TOILES PREMIUM �?" ELFBAR / LOST MARY / TOUJOURS + */

#elfbar-products .product-rating,
#lostmary-products .product-rating,
#alwaysplus-products .product-rating {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  margin-top: 10px !important;

  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#elfbar-products .stars,
#lostmary-products .stars,
#alwaysplus-products .stars {
  color: #ffb703 !important;
  font-size: 15px !important;
  letter-spacing: 1.5px !important;

  text-shadow:
    0 2px 5px rgba(255,183,3,.35),
    0 0 10px rgba(255,183,3,.22) !important;
}

#elfbar-products .reviews,
#lostmary-products .reviews,
#alwaysplus-products .reviews {
  color: #7c8497 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

/* =========================================
   COMPACT SPACING �?" BLOCS HOMEPAGE
========================================= */

/* espace entre sections */
#best-sellers,
#newcomers,
#elfbar-showcase,
#lostmary-showcase,
#alwaysplus-showcase {
  margin-bottom: 0 !important;
  padding-bottom: 42px !important;
}

/* réduit espace haut des sections marques */
#elfbar-showcase,
#lostmary-showcase,
#alwaysplus-showcase {
  padding-top: 8px !important;
}

/* réduit espace header -> cartes */
.brand-showcase-head {
  margin-bottom: 14px !important;
  padding-bottom: 0 !important;
}

/* bandes marques */
.elfbar-band,
.lostmary-band,
.alwaysplus-band {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* newcomers plus compact */
#newcomers {
  padding-bottom: 48px !important;
}

/* =========================================
   BTN VOIR TOUT �?" PREMIUM HOVER
========================================= */

.btn-viewall {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 12px 18px !important;

  border-radius: 999px !important;

  background: rgba(255,255,255,.72) !important;

  border: 1px solid rgba(124,92,255,.14) !important;

  color: #071126 !important;

  font-family: "Outfit", Inter, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;

  text-decoration: none !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;

  box-shadow:
    0 10px 22px rgba(124,92,255,.06) !important;

  backdrop-filter: blur(10px);
}

.btn-viewall:hover {
  transform: translateY(-2px) !important;

  background: #ffffff !important;

  box-shadow:
    0 18px 34px rgba(124,92,255,.14) !important;
}

.btn-viewall-arrow {
  font-size: 18px !important;
  font-weight: 700 !important;

  transition:
    transform .18s ease !important;
}

.btn-viewall:hover .btn-viewall-arrow,
.section-link:hover .btn-viewall-arrow {
  transform: translateX(4px) !important;
}

/* RATING PREMIUM �?" MOD�^LE 6 */

.product-rating-premium {
  width: fit-content !important;
  margin: 12px auto 0 !important;
  padding: 6px 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  border-radius: 999px !important;

  background: rgba(255,183,3,.08) !important;
  border: 1px solid rgba(255,183,3,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 8px 18px rgba(255,183,3,.08) !important;
}

.product-rating-premium .stars {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;

  color: #ffb703 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.product-rating-premium .stars i {
  color: #ffb703 !important;
  font-size: 12px !important;

  filter:
    drop-shadow(0 2px 4px rgba(255,183,3,.28)) !important;
}

.product-rating-premium .reviews {
  color: #7c8497 !important;

  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* PRIX PREMIUM �?" moins gros, plus élégant */
#new-products .product-price,
#elfbar-products .product-price,
#lostmary-products .product-price,
#alwaysplus-products .product-price {
  font-size: 18px !important;
  font-weight: 850 !important;
  color: #111827 !important;
  letter-spacing: -0.35px !important;
  margin: 4px auto 10px !important;
}

/* BOUTONS VOIR TOUT �?" uniformes + hover premium */
.btn-viewall,
.section-link {
  height: 46px !important;
  padding: 0 20px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;

  border-radius: 999px !important;

  background: #ffffff !important;
  border: 1px solid rgba(124,92,255,.18) !important;

  color: #7c5cff !important;

  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;

  text-decoration: none !important;

  box-shadow: 0 12px 28px rgba(124,92,255,.08) !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    color .2s ease !important;
}

.btn-viewall:hover,
.section-link:hover {
  transform: translateY(-2px) !important;

  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  border-color: transparent !important;

  color: #ffffff !important;

  box-shadow: 0 18px 38px rgba(124,92,255,.22) !important;
}

.btn-viewall-arrow,
.section-link span {
  color: currentColor !important;
  font-size: 17px !important;
  transition: transform .2s ease !important;
}

.btn-viewall:hover .btn-viewall-arrow,
.section-link:hover span {
  transform: translateX(4px) !important;
}

/* =========================================
   FORCE FINAL �?" PRIX PREMIUM BLEU
   TOUS LES BLOCS PRODUITS
========================================= */

#best-sellers #featured-products > .product-item .product-details .product-price,
#best-sellers #featured-products > .product-item .product-details .price,

#newcomers #new-products > .product-item .product-details .product-price,
#newcomers #new-products > .product-item .product-details .price,

#elfbar-showcase #elfbar-products > .product-item .product-details .product-price,
#elfbar-showcase #elfbar-products > .product-item .product-details .price,

#lostmary-showcase #lostmary-products > .product-item .product-details .product-price,
#lostmary-showcase #lostmary-products > .product-item .product-details .price,

#alwaysplus-showcase #alwaysplus-products > .product-item .product-details .product-price,
#alwaysplus-showcase #alwaysplus-products > .product-item .product-details .price {
  color: #3b5b92 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -0.35px !important;
  line-height: 1 !important;
  margin: 4px auto 10px !important;
  text-shadow: none !important;
}

/* Best-sellers un peu plus compact */
#best-sellers #featured-products > .product-item .product-details .product-price {
  font-size: 17px !important;
}


/* =========================================
   PRICE RIBBON �?" FANION PREMIUM
========================================= */

#featured-products .product-price,
#new-products .product-price,
#elfbar-products .product-price,
#lostmary-products .product-price,
#alwaysplus-products .product-price {
  position: relative !important;

  width: 132px !important;
  height: 34px !important;

  margin: -2px 0 12px -18px !important;

  display: flex !important;
  align-items: center !important;

  padding-left: 18px !important;

  background: linear-gradient(
    135deg,
    #a855f7 0%,
    #8b5cf6 45%,
    #7c5cff 100%
  ) !important;

  border-radius: 0 7px 7px 0 !important;

  clip-path: polygon(
    0 0,
    88% 0,
    100% 50%,
    88% 100%,
    0 100%
  ) !important;

  box-shadow:
    0 10px 20px rgba(124,92,255,.22),
    0 2px 6px rgba(124,92,255,.18),
    inset 0 1px 0 rgba(255,255,255,.22) !important;

  z-index: 3 !important;

  overflow: visible !important;

  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;

  color: #ffffff !important;

  letter-spacing: -0.35px !important;

  text-shadow:
    0 1px 2px rgba(0,0,0,.12) !important;
}

/* petit reflet premium */
#featured-products .product-price::before,
#new-products .product-price::before,
#elfbar-products .product-price::before,
#lostmary-products .product-price::before,
#alwaysplus-products .product-price::before {
  content: "";

  position: absolute;

  top: 1px;
  left: 0;

  width: 88%;
  height: 42%;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.30),
    rgba(255,255,255,0)
  );

  border-radius: 0 6px 0 0;

  pointer-events: none;
}


/* =========================================
   PRICE RIBBON FINAL �?" PROPRE
========================================= */

#featured-products .product-price,
#new-products .product-price,
#elfbar-products .product-price,
#lostmary-products .product-price,
#alwaysplus-products .product-price {
  position: relative !important;

  width: 134px !important;
  height: 30px !important;

  margin: 8px auto 12px 0 !important;
  margin-left: -18px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  padding: 0 22px 0 16px !important;

  background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 45%, #7c5cff 100%) !important;

  color: #ffffff !important;

  border-radius: 0 7px 7px 0 !important;

  clip-path: polygon(
    0 0,
    calc(100% - 18px) 0,
    100% 50%,
    calc(100% - 18px) 100%,
    0 100%
  ) !important;

  box-shadow:
    0 9px 18px rgba(124,92,255,.24),
    0 3px 8px rgba(17,24,39,.10),
    inset 0 1px 0 rgba(255,255,255,.26) !important;

  font-family: "Outfit", Inter, Arial, sans-serif !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.12) !important;

  z-index: 5 !important;
}

/* SUPPRIME LES CAPSULES BLANCHES AUTOUR DU PRIX */
#featured-products .product-price .price-amount,
#featured-products .product-price .price-currency,
#new-products .product-price .price-amount,
#new-products .product-price .price-currency,
#elfbar-products .product-price .price-amount,
#elfbar-products .product-price .price-currency,
#lostmary-products .product-price .price-amount,
#lostmary-products .product-price .price-currency,
#alwaysplus-products .product-price .price-amount,
#alwaysplus-products .product-price .price-currency {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;

  color: #ffffff !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
}

#featured-products .product-price .price-amount,
#new-products .product-price .price-amount,
#elfbar-products .product-price .price-amount,
#lostmary-products .product-price .price-amount,
#alwaysplus-products .product-price .price-amount {
  font-size: 14px !important;
  font-weight: 950 !important;
}

#featured-products .product-price .price-currency,
#new-products .product-price .price-currency,
#elfbar-products .product-price .price-currency,
#lostmary-products .product-price .price-currency,
#alwaysplus-products .product-price .price-currency {
  font-size: 12px !important;
  font-weight: 900 !important;
  opacity: .95 !important;
}

/* =========================================
   FIX FINAL �?" RUBAN PRIX COLL�? �? GAUCHE
========================================= */

#featured-products .product-price,
#new-products .product-price,
#elfbar-products .product-price,
#lostmary-products .product-price,
#alwaysplus-products .product-price {
  width: calc(100% - 58px) !important;

  margin-left: -16px !important;

  padding-left: 18px !important;

  justify-content: center !important;
}

/* FIX RUBAN PRIX �?" COLL�? AU BORD GAUCHE */

#featured-products > .product-item .product-details .product-price,
#new-products > .product-item .product-details .product-price,
#elfbar-products > .product-item .product-details .product-price,
#lostmary-products > .product-item .product-details .product-price,
#alwaysplus-products > .product-item .product-details .product-price {
  align-self: flex-start !important;

  width: 255px !important;
  height: 28px !important;

  margin: 8px 0 12px 0 !important;

  left: -53px !important;
  transform: none !important;

  justify-content: center !important;
  padding: 4px 24px 4px 16px !important;
}


/* =========================================
   RUBAN PRIX �?" ALIGNEMENT STABLE FINAL
========================================= */

#featured-products .product-price,
#new-products .product-price,
#elfbar-products .product-price,
#lostmary-products .product-price,
#alwaysplus-products .product-price {
  position: relative !important;

  align-self: flex-start !important;

  width: 150px !important;
  height: 34px !important;

  margin: 8px 0 12px 0 !important;

  /* colle au bord gauche de la carte */
  left: -18px !important;

  display: grid !important;
  grid-template-columns: 1fr 18px !important;
  align-items: center !important;

  padding: 0 !important;

  background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 45%, #7c5cff 100%) !important;

  clip-path: polygon(
    0 0,
    calc(100% - 18px) 0,
    100% 50%,
    calc(100% - 18px) 100%,
    0 100%
  ) !important;

  border-radius: 0 7px 7px 0 !important;

  box-shadow:
    0 9px 18px rgba(124,92,255,.24),
    0 3px 8px rgba(17,24,39,.10),
    inset 0 1px 0 rgba(255,255,255,.26) !important;

  color: #ffffff !important;
  line-height: 1 !important;
}

/* zone texte centrée hors pointe */
#featured-products .product-price .price-amount,
#new-products .product-price .price-amount,
#elfbar-products .product-price .price-amount,
#lostmary-products .product-price .price-amount,
#alwaysplus-products .product-price .price-amount {
  justify-self: end !important;

  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;

  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#featured-products .product-price .price-currency,
#new-products .product-price .price-currency,
#elfbar-products .product-price .price-currency,
#lostmary-products .product-price .price-currency,
#alwaysplus-products .product-price .price-currency {
  justify-self: start !important;

  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================================
   FIX FINAL ABSOLU �?" RUBAN PRIX STABLE
========================================= */

#best-sellers #featured-products > .product-item .product-details .product-price,
#newcomers #new-products > .product-item .product-details .product-price,
#elfbar-showcase #elfbar-products > .product-item .product-details .product-price,
#lostmary-showcase #lostmary-products > .product-item .product-details .product-price,
#alwaysplus-showcase #alwaysplus-products > .product-item .product-details .product-price {
  position: relative !important;

  align-self: flex-start !important;

  width: 225px !important;
  height: 28px !important;

  margin: 8px 0 12px 0 !important;

  left: -16px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  padding: 0 26px 0 14px !important;

  background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 45%, #7c5cff 100%) !important;


clip-path: polygon(
  0% 0%,      /* coin haut-gauche */
  100% 0%,    /* coin haut-droit */
  95% 50%,    /* pointe du triangle (le creux qui mord vers la gauche) */
  100% 100%,  /* coin bas-droit */
  0% 100%     /* coin bas-gauche */
) !important;

  border-radius: 0 !important;

  color: #ffffff !important;

  font-family: "Outfit", Inter, Arial, sans-serif !important;
  line-height: 1 !important;

  box-shadow:
    0 9px 18px rgba(124,92,255,.24),
    0 3px 8px rgba(17,24,39,.10),
    inset 0 1px 0 rgba(255,255,255,.26) !important;

  transform: none !important;
}

/* texte prix bien centré */
#best-sellers #featured-products > .product-item .product-details .product-price .price-amount,
#best-sellers #featured-products > .product-item .product-details .product-price .price-currency,
#newcomers #new-products > .product-item .product-details .product-price .price-amount,
#newcomers #new-products > .product-item .product-details .product-price .price-currency,
#elfbar-showcase #elfbar-products > .product-item .product-details .product-price .price-amount,
#elfbar-showcase #elfbar-products > .product-item .product-details .product-price .price-currency,
#lostmary-showcase #lostmary-products > .product-item .product-details .product-price .price-amount,
#lostmary-showcase #lostmary-products > .product-item .product-details .product-price .price-currency,
#alwaysplus-showcase #alwaysplus-products > .product-item .product-details .product-price .price-amount,
#alwaysplus-showcase #alwaysplus-products > .product-item .product-details .product-price .price-currency {
  position: static !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: #ffffff !important;
  line-height: 1 !important;
}

#best-sellers #featured-products > .product-item .product-details .product-price .price-amount,
#newcomers #new-products > .product-item .product-details .product-price .price-amount,
#elfbar-showcase #elfbar-products > .product-item .product-details .product-price .price-amount,
#lostmary-showcase #lostmary-products > .product-item .product-details .product-price .price-amount,
#alwaysplus-showcase #alwaysplus-products > .product-item .product-details .product-price .price-amount {
  font-size: 14px !important;
  font-weight: 950 !important;
}

#best-sellers #featured-products > .product-item .product-details .product-price .price-currency,
#newcomers #new-products > .product-item .product-details .product-price .price-currency,
#elfbar-showcase #elfbar-products > .product-item .product-details .product-price .price-currency,
#lostmary-showcase #lostmary-products > .product-item .product-details .product-price .price-currency,
#alwaysplus-showcase #alwaysplus-products > .product-item .product-details .product-price .price-currency {
  font-size: 12px !important;
  font-weight: 900 !important;
}

/* =========================================
   BOUTONS "VOIR TOUT" - STYLE PREMIUM FINAL
========================================= */

.btn-viewall,
.section-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  height: 44px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;

  background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(246,241,255,.98) 100%) !important;
  border: 1px solid rgba(124,92,255,.24) !important;

  color: #6040cc !important;

  font-family: "Outfit", Inter, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow:
    0 2px 6px rgba(124,92,255,.06),
    0 8px 22px rgba(124,92,255,.10),
    inset 0 1px 0 rgba(255,255,255,.9) !important;

  backdrop-filter: blur(10px) !important;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease,
    border-color .22s ease !important;
}

.btn-viewall:hover,
.section-link:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #7c5cff 0%, #b44cff 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow:
    0 8px 28px rgba(124,92,255,.32),
    0 2px 8px rgba(124,92,255,.18) !important;
}

.btn-viewall-arrow {
  font-size: 16px !important;
  transition: transform .22s ease !important;
  color: currentColor !important;
}

.btn-viewall:hover .btn-viewall-arrow,
.section-link:hover .btn-viewall-arrow {
  transform: translateX(4px) !important;
}

/* UNIFICATION DES TITRES DE SECTION */

.elfbar-showcase .section-header h2,
.lostmary-showcase .section-header h2,
.alwaysplus-showcase .section-header h2,
.new-products .section-header h2 {
  font-size: 34px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  letter-spacing: -2px !important;
  color: #071126 !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
}

/* =========================================
   BADGE CONFIANCE �?" �?TOILES PREMIUM FINALES
   Effet : micro-étoiles blanches, brillance plus visible
   HTML attendu dans .premium-badge-wrapper :
   <span class="badge-star star-1">�o�</span> ... jusqu'à star-10
========================================= */

/* Les parents du badge ne doivent pas couper les étoiles */




/* �?toiles HTML */


/*
  Important :
  on n'utilise PAS "animation: ..." ici, car le raccourci CSS peut écraser
  les durées/délais de chaque étoile. On définit chaque propriété séparément.
*/


/* Positions + tailles conservées, avec délais/durées indépendants */


/* Scintillement blanc type phares / ciel étoilé */


/* Accessibilité */




@media (max-width: 640px) {
  #best-sellers {
    padding-top: 32px !important;
  }
}




/* =====================================================
   SEARCH BAR �?" IC�"NE SEULE �?' EXPAND VERS LA GAUCHE
   Par défaut : seule la loupe est visible (48 px).
   Au survol / focus : la barre s'étire vers la gauche
   jusqu'à sa taille complète (260 px).
===================================================== */

/* �?tat réduit �?" icône seulement */
.search-box {
  width: 48px !important;
  margin-left: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  cursor: pointer !important;
  transition: box-shadow .22s ease, border-color .22s ease, transform .18s ease !important;
}

/* Etat ouvert : la loupe reste mise en avant au-dessus du voile */
.search-box.is-open {
  position: relative !important;
  z-index: 10002 !important;
  border-color: rgba(124, 92, 255, .55) !important;
  box-shadow:
    0 16px 38px rgba(124, 92, 255, .18),
    0 0 0 4px rgba(124, 92, 255, .12) !important;
}

/* Voile d'arriere-plan : ouverture intentionnelle et premium.
   Place sous le header fixe (z 9999) -> header + barre 18+ restent nets. */
.search-scrim {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 14, 38, .42) !important;
  backdrop-filter: blur(3px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.04) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .26s ease, visibility .26s !important;
  z-index: 9998 !important;
}
.search-scrim.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Etat survol / focus - la loupe s'illumine */
.search-box:hover {
  border-color: rgba(124, 92, 255, .40) !important;
  box-shadow:
    0 14px 34px rgba(124, 92, 255, .12),
    0 0 0 4px rgba(124, 92, 255, .06) !important;
}

/* Pont invisible pour garder le survol entre la loupe et le panneau */
/* (ancien pont de survol supprime : ouverture desormais au clic sur la loupe) */

/* Input invisible par défaut, visible à l'expansion */
.search-box input {
  position: absolute !important;
  top: -4px !important;
  right: 0 !important;
  left: auto !important;
  width: min(1040px, var(--search-max-width, calc(100vw - 48px))) !important;
  height: 56px !important;
  padding: 0 26px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(124, 92, 255, .20) !important;
  box-shadow:
    0 30px 70px rgba(17, 24, 39, .22),
    0 10px 24px rgba(124, 92, 255, .14) !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-12px) !important;
  pointer-events: none !important;
  transition: opacity .24s ease, transform .26s cubic-bezier(.2, .7, .3, 1), visibility .26s !important;
  z-index: 10001 !important;
}
.search-box input::placeholder {
  color: #9aa0ae !important;
  font-weight: 600 !important;
}

.search-box.is-open input {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* Recherche ouverte : on efface le logo et le menu de navigation afin que le
   champ recouvre toute la rangee (logo + lien "Puffs" + tous les liens), quelle
   que soit la largeur d'ecran. Sans cela, le champ plafonne a 1040px et laisse
   depasser les premiers elements de nav sur les grands ecrans. */
body.search-active .main-header .logo,
body.search-active .main-header .nav-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .22s ease, visibility .22s ease !important;
}

/* Suggestions : empilees juste sous le menu pour recouvrir la barre 18+ */
.search-box.is-open .ac-panel {
  position: absolute !important;
  top: calc(var(--search-drop-top, 64px) - 2px) !important;
  right: 0 !important;
  left: auto !important;
  width: min(1040px, var(--search-max-width, calc(100vw - 48px))) !important;
  max-width: none !important;
}

/* Le bouton loupe reste toujours visible et cliquable */
.search-box > button {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* =====================================================
   TITRE BEST-SELLERS �?" SOULIGNEMENT MAUVE PENCH�?
   Sous le mot « incontournables »
===================================================== */
.title-underline {
  position: relative !important;
  display: inline !important;
  white-space: nowrap !important;
}

.title-underline::after {
  content: '' !important;
  position: absolute !important;
  left: -3% !important;
  bottom: -8px !important;
  width: 106% !important;
  height: 3px !important;
  background: radial-gradient(
    ellipse at center,
    #b44cff 0%,
    rgba(124, 92, 255, .55) 50%,
    transparent 100%
  ) !important;
  border-radius: 4px !important;
  transform: none !important;
  transform-origin: initial !important;
  pointer-events: none !important;
}

/* =====================================================
   VOIR TOUT �?" POLICE UNIFI�?E (libellé texte)
   Cible directement le span texte de chaque bouton
   pour court-circuiter toutes les cascades précédentes.
===================================================== */
.btn-viewall span:first-child,
.section-link span:first-child {
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* �."�.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.-
   �.'   PREMIUM REDESIGN �?" TOUS LES BLOCS HOMEPAGE        �.'
   �.'   UX/UI production-ready · Mai 2026                 �.'
   �.s�.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.� */

/* �"?�"? Gradient text partagé (mots-clés) �"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"? */
.title-grad,
.title-brand {
  background: linear-gradient(125deg, #7c5cff 10%, #c44bff 90%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline !important;
}

/* �"?�"? NEWCOMERS �?" titre + sous-titre �"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"? */
#newcomers .section-title {
  font-size: clamp(34px, 2.6vw, 48px) !important;
  font-weight: 950 !important;
  letter-spacing: -2px !important;
  line-height: 1.0 !important;
  color: #071126 !important;
  margin: 10px 0 20px !important;
}
#newcomers .section-subtitle {
  font-size: 15.5px !important;
  font-weight: 450 !important;
  color: #475569 !important;
  line-height: 1.7 !important;
  padding-left: 14px !important;
  border-left: 3px solid rgba(124,92,255,.45) !important;
  margin: 0 !important;
}

/* �"?�"? BRAND SHOWCASES �?" Elfbar / LostMary / Alwaysplus �"?�"?�"?�"?�"? */
.brand-showcase-title-wrap h2 {
  font-size: clamp(26px, 2vw, 38px) !important;
  font-weight: 900 !important;
  letter-spacing: -1.2px !important;
  line-height: 1.05 !important;
  color: #071126 !important;
  margin: 6px 0 0 !important;
}
.brand-showcase-title-wrap .eyebrow {
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  color: #7c5cff !important;
  background: rgba(124,92,255,.10) !important;
  border: 1px solid rgba(124,92,255,.16) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   COLLECTION (banner-promo) �?" dark premium
�.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.� */
.banner-promo {
  padding: 72px 0 !important;
  background:
    radial-gradient(ellipse at 80% 50%, rgba(180,76,255,.28) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 50%, rgba(124,92,255,.22) 0%, transparent 50%),
    linear-gradient(140deg, #0b0320 0%, #15073a 55%, #230d5a 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.banner-promo::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%237c5cff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  pointer-events: none !important;
  opacity: .6 !important;
}
.banner-section-header {
  margin-bottom: 0 !important;
}
.banner-promo .eyebrow {
  color: #c4a7ff !important;
  background: rgba(124,92,255,.18) !important;
  border: 1px solid rgba(180,76,255,.35) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
}
.banner-content-grid {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 28px !important;
  gap: 56px !important;
  align-items: center !important;
}
.banner-image img {
  border-radius: 24px !important;
  box-shadow:
    0 40px 100px rgba(0,0,0,.55),
    0 0 80px rgba(124,92,255,.40) !important;
  transition: transform .35s ease, box-shadow .35s ease !important;
  width: 100% !important;
  object-fit: cover !important;
}
.banner-image img:hover {
  transform: scale(1.025) translateY(-4px) !important;
  box-shadow:
    0 60px 120px rgba(0,0,0,.65),
    0 0 100px rgba(180,76,255,.50) !important;
}
.banner-text h2 {
  color: #ffffff !important;
  font-size: clamp(32px, 2.8vw, 52px) !important;
  font-weight: 950 !important;
  letter-spacing: -2px !important;
  line-height: 1.0 !important;
  margin: 16px 0 20px !important;
}
.banner-text p {
  color: rgba(255,255,255,.72) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}
.banner-text ul {
  padding: 0 !important;
  margin: 1.5rem 0 !important;
  display: grid !important;
  gap: 12px !important;
}
.banner-text ul li {
  color: rgba(255,255,255,.85) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding-left: 28px !important;
  position: relative !important;
}
.banner-text ul li::before {
  content: '�o�' !important;
  position: absolute !important;
  left: 0 !important;
  color: #b44cff !important;
  font-size: 11px !important;
  top: 3px !important;
}
.banner-text .btn-primary {
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 16px 36px !important;
  border-radius: 16px !important;
  font-family: "Outfit", Inter, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  box-shadow: 0 20px 50px rgba(124,92,255,.45) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  margin-top: 8px !important;
}
.banner-text .btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 28px 64px rgba(124,92,255,.58) !important;
}

/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   SAVEURS (categories) �?" cartes tintées + titre premium
�.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.� */
.categories {
  padding: 8px 0 48px !important;
  background: linear-gradient(180deg, #f8f5ff 0%, #ede9ff 100%) !important;
}
.categories-head {
  text-align: left !important;
  margin-bottom: 32px !important;
}
.categories-head .section-title {
  font-size: 34px !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-weight: 950 !important;
  letter-spacing: -2px !important;
  line-height: 1.1 !important;
  color: #071126 !important;
  margin: 10px 0 16px !important;
}
.categories-head .eyebrow {
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  color: #7c5cff !important;
  background: rgba(124,92,255,.10) !important;
  border: 1px solid rgba(124,92,255,.16) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
.categories-head .section-subtitle {
  font-size: 15.5px !important;
  font-weight: 450 !important;
  color: #475569 !important;
  line-height: 1.7 !important;
  padding-left: 14px !important;
  border-left: 3px solid rgba(124,92,255,.45) !important;
  margin: 0 !important;
}
/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   SAVEURS PREMIUM V2 �?" cartes photo 6 colonnes
�.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.� */
.category-grid {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px !important;
  max-width: 1500px !important;
}

.category-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 360px !important;
  border-radius: 24px !important;
  text-decoration: none !important;
  background-size: cover !important;
  background-position: center center !important;
  background-color: #12092a !important;
  display: block !important;
  padding: 0 !important;
  border: none !important;
  isolation: isolate !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.15) !important;
  transition: transform .35s ease, box-shadow .35s ease !important;
}

.category-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at top right, rgba(170,90,255,.22), transparent 48%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.category-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    rgba(8,14,28,.92) 0%,
    rgba(8,14,28,.55) 30%,
    rgba(8,14,28,.10) 65%,
    rgba(8,14,28,0) 100%
  ) !important;
  z-index: 1 !important;
}

/* Photos de fond */
.category-card--fruits        { background-image: url('/static/images/banniere%20et%20logo/saveur_fruits.png') !important; }
.category-card--menthe        { background-image: url('/static/images/banniere%20et%20logo/saveur_menthe.png') !important; }
.category-card--fruits-rouges { background-image: url('/static/images/banniere%20et%20logo/saveur_fruits_rouges.png') !important; }
.category-card--boissons      { background-image: url('/static/images/banniere%20et%20logo/saveur_boissons.png') !important; }
.category-card--glaces        { background-image: url('/static/images/banniere%20et%20logo/saveur_glaces.png') !important; }
.category-card--desserts      { background-image: url('/static/images/banniere%20et%20logo/saveur_desserts.png') !important; }

/* Footer wrapper �?" invisible, couvre toute la carte */
.category-card-footer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Rond blanc avec icône �?" bas gauche, même taille que la flèche */
.category-card-emoji {
  position: absolute !important;
  left: 22px !important;
  bottom: 28px !important;
  width: 54px !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.94) !important;
  border: none !important;
  box-shadow: none !important;
}
.category-card-emoji i {
  font-size: 26px !important;
  line-height: 1 !important;
  display: inline-block !important;
  color: #7c5cff !important;
  filter: none !important;
}

/* Corps texte */
.category-card-body {
  position: absolute !important;
  left: 22px !important;
  right: 22px !important;
  bottom: 94px !important;
}

.category-card-pill {
  display: none !important;
}

.category-card h3 {
  margin: 0 0 4px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  max-width: none !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.35) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Flèche glass �?" bas droite �?" seul élément avec effets */
.category-card-arrow {
  position: absolute !important;
  right: 20px !important;
  bottom: 28px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  color: #ffffff !important;
  font-size: 17px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.30) !important;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}

.category-card:hover .category-card-arrow {
  background: rgba(124,92,255,.75) !important;
  border-color: rgba(180,76,255,.85) !important;
  box-shadow: 0 0 16px rgba(124,92,255,.60), 0 6px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.28) !important;
  transform: scale(1.15) !important;
}

@media (max-width: 1100px) {
  .category-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .category-card { min-height: 290px !important; }
  .category-card h3 { font-size: 13px !important; }
  .category-card p { font-size: 10px !important; }
  .category-card-emoji { width: 46px !important; height: 46px !important; left: 16px !important; bottom: 20px !important; }
  .category-card-emoji i { font-size: 22px !important; }
  .category-card-body { left: 18px !important; right: 18px !important; bottom: 78px !important; }
  .category-card-arrow { width: 31px !important; height: 31px !important; right: 16px !important; bottom: 20px !important; font-size: 14px !important; }
}
@media (max-width: 640px) {
  .category-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .category-card { min-height: 210px !important; }
  .category-card h3 { font-size: 12px !important; }
  .category-card p { font-size: 9px !important; }
  .category-card-emoji { width: 38px !important; height: 38px !important; left: 12px !important; bottom: 14px !important; }
  .category-card-emoji i { font-size: 17px !important; }
  .category-card-body { left: 14px !important; right: 14px !important; bottom: 62px !important; }
  .category-card-arrow { width: 26px !important; height: 26px !important; right: 10px !important; bottom: 14px !important; font-size: 12px !important; }
}

/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   OFFRE SP�?CIALE (newsletter) �?" violet premium
�.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.� */
.newsletter {
  padding: 44px 0 !important;
  background:
    radial-gradient(ellipse at 20% 60%, rgba(180,76,255,.30) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 30%, rgba(124,92,255,.25) 0%, transparent 50%),
    linear-gradient(145deg, #3b0764 0%, #6d28d9 45%, #7c5cff 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.newsletter::before {
  content: '' !important;
  position: absolute !important;
  top: -80px !important;
  right: -80px !important;
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
.newsletter-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  gap: 40px !important;
  align-items: center !important;
}
.newsletter-badge .badge-primary,
.newsletter-badge .badge {
  background: rgba(255,255,255,.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
}
.newsletter-title {
  color: #ffffff !important;
  font-size: clamp(19px, 2.1vw, 27px) !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  line-height: 1.1 !important;
  margin: 8px 0 10px !important;
}
.newsletter-title .highlight {
  color: #fde68a !important;
  -webkit-text-fill-color: #fde68a !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}
.newsletter-subtitle {
  color: rgba(255,255,255,.72) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 0 12px !important;
}
.newsletter-features {
  gap: 6px !important;
  margin-top: 4px !important;
  grid-template-columns: 1fr !important;
}
.feature-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255,255,255,.80) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
.feature-icon {
  font-size: 14px !important;
  flex-shrink: 0 !important;
}
.newsletter-form-wrapper {
  background: rgba(255,255,255,.10) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 18px !important;
  padding: 22px !important;
}
.newsletter-form .form-group {
  gap: 10px !important;
}
.newsletter-form input {
  background: rgba(255,255,255,.12) !important;
  border: 1.5px solid rgba(255,255,255,.28) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  min-height: 42px !important;
}
.newsletter-form input::placeholder {
  color: rgba(255,255,255,.50) !important;
}
.newsletter-form input:focus {
  outline: none !important;
  border-color: rgba(255,255,255,.60) !important;
  background: rgba(255,255,255,.18) !important;
}
.newsletter-form .btn-primary,
#newsletter-btn {
  background: #ffffff !important;
  color: #7c5cff !important;
  border: none !important;
  font-family: "Outfit", Inter, sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
  padding: 0 18px !important;
  min-height: 42px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}
.newsletter-form .btn-primary:hover,
#newsletter-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.30) !important;
}
.form-note {
  color: rgba(255,255,255,.55) !important;
  font-size: 13.5px !important;
  margin-top: 10px !important;
}

/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   FOOTER �?" dark premium navy-purple
�.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.� */
.site-footer {
  padding: 64px 0 28px !important;
  background: linear-gradient(180deg, #080218 0%, #0f0726 100%) !important;
}
.footer-shell {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.footer-kicker {
  color: #9d78ff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
.footer-brand-panel h3 {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.5px !important;
  margin: 8px 0 12px !important;
}
.footer-brand-panel > p {
  color: rgba(255,255,255,.58) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  max-width: 360px !important;
}
.footer-pill-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 20px !important;
}
.footer-pill {
  background: rgba(124,92,255,.18) !important;
  color: #c4a7ff !important;
  border: 1px solid rgba(124,92,255,.30) !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.footer-content {
  margin-top: 36px !important;
  padding-top: 28px !important;
  border-top: 1px solid rgba(124,92,255,.18) !important;
}
.footer-section h4 {
  color: #ffffff !important;
  font-family: "Outfit", Inter, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin: 0 0 14px !important;
}
.footer-section ul li a,
.footer-section a {
  color: rgba(255,255,255,.55) !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}
.footer-section ul li a:hover,
.footer-section a:hover {
  color: #c4a7ff !important;
}
.footer-contact-panel p,
.contact-info p {
  color: rgba(255,255,255,.60) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin: 0 0 4px !important;
}
.contact-info strong {
  color: rgba(255,255,255,.85) !important;
}
.footer-bottom {
  margin-top: 36px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(124,92,255,.18) !important;
  color: rgba(255,255,255,.40) !important;
  font-size: 13px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.footer-bottom p { margin: 0 !important; }
.age-warning strong {
  color: #b44cff !important;
}

/* =====================================================
   BEST-SELLERS �?" TITRE & SOUS-TITRE PREMIUM
   Niveau grand site e-commerce
===================================================== */

/* Mot-clé "incontournables" : texte en dégradé violet */
.title-underline {
  background: linear-gradient(125deg, #7c5cff 10%, #c44bff 90%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline !important;
  position: relative !important;
  white-space: nowrap !important;
}

/* Titre : police Outfit, m�me style que newcomers */
#best-sellers .section-title {
  font-size: clamp(38px, 3vw, 56px) !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-weight: 950 !important;
  letter-spacing: -2px !important;
  line-height: 1.0 !important;
  color: #071126 !important;
  margin: 12px 0 24px !important;
}

/* Sous-titre : plus lisible, accentué par un filet gauche mauve */
#best-sellers .section-subtitle {
  font-size: 15.5px !important;
  font-weight: 450 !important;
  color: #475569 !important;
  line-height: 1.7 !important;
  padding-left: 14px !important;
  border-left: 3px solid rgba(124, 92, 255, .45) !important;
  margin: 0 !important;
}

/* �."�.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.-
   �.'  CORRECTIONS v2 �?" Collection · Saveurs · Newsletter ·  �.'
   �.'  Footer                                                 �.'
   �.s�.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.� */

/* �"?�"? COLLECTION : fond identique à Toujours + + jointure invisible �"?�"? */

/*
 * DIAGNOSTIC :
 * - #alwaysplus-showcase hérite de la règle multi-ID ligne 6253 qui impose
 *   "padding: 50px 0 70px !important" avec 3 sélecteurs ID �?' gagne sur 1 ID.
 *   Solution : utiliser le même groupe de sélecteurs pour supplanter.
 * - Les cartes produits ont overflow:visible + box-shadow positif-Y
 *   �?' les ombres débordent dans banner-promo et créent une frange.
 *   Solution : clip overflow sur le conteneur band.
 */

/* Supplante la règle groupe 3-IDs avec un groupe 4-IDs (spécificité >= )
   et padding-bottom réduit pour que les ombres restent dans la section */
#newcomers,
#elfbar-showcase,
#lostmary-showcase,
#alwaysplus-showcase {
  padding-bottom: 48px !important; /* espace pour les ombres des cartes + jonction propre */
  margin-bottom: 0 !important;
}

/* Reduit l'espace vertical entre les blocs marques et vers la FAQ marques */
#elfbar-showcase,
#lostmary-showcase,
#alwaysplus-showcase {
  padding-bottom: 24px !important;
}

/* alwaysplus-band : pas d'overflow:hidden �?" les ombres feathèrent
   naturellement vers banner-promo qui a maintenant le même fond #fbf8ff */
.alwaysplus-band {
  padding-bottom: 28px !important;
}

#alwaysplus-showcase {
  margin-bottom: 0 !important;
}

/* Body en #fbf8ff �?" évite tout blanc entre sections */
body {
  background-color: var(--puffs-bg) !important;
}

/* banner-promo : même rythme que les blocs marques (8px top / 48px bottom) */
.banner-promo {
  padding: 8px 0 48px !important;
  margin-top: 0 !important;
  overflow: visible !important;
  background: var(--puffs-bg) !important; /* #fbf8ff, identique à alwaysplus */
}
.banner-promo::before { display: none !important; }

/* "Collection" : espace entre le label et l'image */
.banner-section-header {
  margin-bottom: 8px !important;
  padding-bottom: 0 !important;
}

/* Section-heading Collections �?" calqué sur #newcomers / #best-sellers */
.banner-promo .section-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(124,92,255,.10) !important;
  border: 1px solid rgba(124,92,255,.16) !important;
  color: #7c5cff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  box-shadow: 0 12px 28px rgba(124,92,255,.10) !important;
}

.banner-promo .section-title {
  margin: 12px 0 8px !important;
  color: #071126 !important;
  font-size: clamp(28px, 2.2vw, 38px) !important;
  line-height: 1.0 !important;
  font-weight: 950 !important;
  letter-spacing: -2px !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
}

.banner-promo .section-subtitle {
  max-width: 560px !important;
  margin: 0 !important;
  color: #475569 !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  font-weight: 450 !important;
  padding-left: 14px !important;
  border-left: 3px solid rgba(124,92,255,.45) !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
}

/* Grille : pas de fond opaque sur fond clair */
.banner-content-grid {
  background: rgba(255,255,255,.70) !important;
  border: 1.5px solid rgba(124,92,255,.12) !important;
  box-shadow: 0 20px 56px rgba(124,92,255,.10) !important;
  backdrop-filter: blur(14px) !important;
  gap: 48px !important;
}
.banner-image img {
  box-shadow:
    0 24px 64px rgba(124,92,255,.18),
    0 0 48px rgba(255,100,200,.14) !important;
}

/* Texte revient au mode clair */
.banner-text h2 {
  color: #071126 !important;
  font-size: clamp(28px, 2.4vw, 44px) !important;
  letter-spacing: -1.8px !important;
}
.banner-text p { color: #475569 !important; }
.banner-text ul li { color: #374151 !important; }
.banner-text ul li::before { color: #b44cff !important; }
.banner-text .btn-primary {
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  box-shadow: 0 16px 40px rgba(124,92,255,.30) !important;
}

/* �"?�"? SAVEURS : header vertical + 6 colonnes + animations �"?�"?�"? */

/* Header en colonne (eyebrow �?' titre �?' sous-titre) */
.categories-head {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-bottom: 36px !important;
}
.categories {
  background: linear-gradient(180deg, var(--puffs-bg) 0%, #ede9ff 100%) !important;
}

/* Grille 6 colonnes */
.category-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
}



/* �"?�"? NEWSLETTER : taille du champ email (+40 %) + alignement à droite �"?�"? */
#newsletter-email {
  flex: 0 0 auto !important;   /* no grow, no shrink */
  width: 350px !important;
  max-width: 100% !important;  /* responsive safety */
}
.newsletter-form-wrapper {
  margin-left: auto !important;
  padding-left: 36px !important;
  padding-right: 36px !important;
}

/* �"?�"? FOOTER : fond clair + compact �"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"? */
.site-footer {
  padding: 38px 0 16px !important;
  background: linear-gradient(180deg, #f5f0ff 0%, #ede8ff 100%) !important;
}
.footer-kicker  { color: #7c5cff !important; }
.footer-brand-panel h3 { color: #071126 !important; font-size: 18px !important; }
.footer-brand-panel > p { color: #64748b !important; font-size: 13.5px !important; }
.footer-pill {
  background: rgba(124,92,255,.10) !important;
  color: #7c5cff !important;
  border-color: rgba(124,92,255,.22) !important;
}
.footer-pill-row { margin-top: 14px !important; gap: 6px !important; }
.footer-content  { margin-top: 20px !important; padding-top: 16px !important; gap: 16px !important; }
.footer-section h4 { color: #071126 !important; margin-bottom: 10px !important; }
.footer-section ul { gap: 5px !important; }
.footer-section ul li a,
.footer-section a { color: #64748b !important; font-size: 13.5px !important; }
.footer-section ul li a:hover,
.footer-section a:hover { color: #7c5cff !important; }
.contact-info p, .footer-contact-panel p { color: #64748b !important; font-size: 13.5px !important; }
.contact-info strong { color: #071126 !important; }
.footer-bottom {
  margin-top: 20px !important;
  padding-top: 14px !important;
  color: #94a3b8 !important;
  border-top-color: rgba(124,92,255,.15) !important;
}
.footer-bottom p { font-size: 12.5px !important; }
.age-warning strong { color: #7c5cff !important; }

/* �"?�"? BEST-SELLERS : transition élégante carousel �?' offre de la semaine �"?�"? */

/* 1. Fondu progressif sur le bord droit du carousel
      Les cartes se dissolvent vers la bannière au lieu d'être coupées */
#best-sellers .carousel-container {
  -webkit-mask-image: linear-gradient(
    to right,
    black 0%,
    black calc(100% - 120px),
    rgba(0,0,0,.40) calc(100% - 60px),
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to right,
    black 0%,
    black calc(100% - 120px),
    rgba(0,0,0,.40) calc(100% - 60px),
    transparent 100%
  ) !important;
}

/* 1b. Reactivation ciblee du fondu sur 13"/14" (1025-1535px).
   Le design large (>=1536px, dont le 15"/1536px) desactive ce fondu plus loin
   (mask-image:none) car il clippe proprement 4 cartes. Mais entre 1025 et
   1535px la colonne produits est trop etroite pour 4 cartes : sans fondu, la
   derniere carte partielle est coupee net et "sort du cadre". On rallume donc
   le fondu uniquement sur cette plage, pour les deux cas (offre presente ou
   absente). Specificite volontairement plus forte (.carousel-wrapper .carousel-
   container) pour primer sur les mask-image:none definis ensuite. */
@media (min-width: 1025px) and (max-width: 1535px) {
  #best-sellers .carousel-wrapper .carousel-container {
    -webkit-mask-image: linear-gradient(
      to right,
      black 0%,
      black calc(100% - 110px),
      rgba(0,0,0,.35) calc(100% - 55px),
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to right,
      black 0%,
      black calc(100% - 110px),
      rgba(0,0,0,.35) calc(100% - 55px),
      transparent 100%
    ) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
  }
}

/* 2. Extra padding-right : la dernière carte est toujours scrollable
      au-delà de la zone masquée (on peut la voir en entier) */
#best-sellers #featured-products {
  padding-right: 140px !important;
}

/* 3. La bannière weekly-offer « flotte » au-dessus de la grille :
      ombre latérale gauche pour marquer la profondeur */
#best-sellers .weekly-offer-shell {
  box-shadow:
    -32px 0 64px rgba(124,92,255,.18),
    -8px  0 18px rgba(180,76,255,.12),
    0 30px 78px rgba(124,92,255,.22),
    0 18px 45px rgba(255,79,216,.12) !important;
}

/* 4. Halo ambiant derrière la bannière pour renforcer l'effet de profondeur */
#best-sellers .weekly-offer-side::before {
  background: radial-gradient(
    ellipse at center,
    rgba(124,92,255,.22) 0%,
    rgba(180,76,255,.14) 40%,
    transparent 70%
  ) !important;
  filter: blur(32px) !important;
  inset: -20px -10px -20px -40px !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
}

/* �"?�"? BEST-SELLERS : flèches de navigation premium �"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"? */

/* Base commun */
#best-sellers .carousel-prev,
#best-sellers .carousel-next {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 42% !important;
  transform: translateY(-50%) !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1.5px solid rgba(124,92,255,.22) !important;
  box-shadow:
    0 10px 36px rgba(124,92,255,.18),
    0 3px 10px rgba(124,92,255,.10),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  cursor: pointer !important;
  z-index: 50 !important;
  font-size: 0 !important;
  color: transparent !important;
  transition:
    background .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    transform .28s cubic-bezier(.34,1.56,.64,1) !important;
}

#best-sellers .carousel-prev { left: -14px !important; }
#best-sellers .carousel-next { right: -14px !important; }

/* Masquer les spans texte �?� �?' */
#best-sellers .carousel-prev span,
#best-sellers .carousel-next span {
  display: none !important;
}

/* Chevron CSS pur �?" tracé par border */
#best-sellers .carousel-prev::before,
#best-sellers .carousel-next::before {
  content: '' !important;
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  background: none !important;
  transition:
    border-color .22s ease,
    transform .22s ease !important;
}

/* Chevron gauche �?� */
#best-sellers .carousel-prev::before {
  border-left: 2.5px solid #7c5cff !important;
  border-bottom: 2.5px solid #7c5cff !important;
  transform: rotate(45deg) translateX(2px) !important;
}

/* Chevron droit �?� */
#best-sellers .carousel-next::before {
  border-right: 2.5px solid #7c5cff !important;
  border-top: 2.5px solid #7c5cff !important;
  transform: rotate(45deg) translateX(-2px) !important;
}

/* �"?�"? Hover : fond violet + flèche blanche + glow �"?�"? */
#best-sellers .carousel-prev:hover,
#best-sellers .carousel-next:hover {
  background: linear-gradient(135deg, #7c5cff 0%, #b44cff 100%) !important;
  border-color: transparent !important;
  box-shadow:
    0 18px 52px rgba(124,92,255,.42),
    0 6px 18px rgba(124,92,255,.28),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  transform: translateY(-50%) scale(1.10) !important;
}

#best-sellers .carousel-prev:hover::before,
#best-sellers .carousel-next:hover::before {
  border-color: #ffffff !important;
}

/* �?tat désactivé */
#best-sellers .carousel-nav.is-disabled {
  opacity: .28 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* Bloc Collection �?" fond uniforme identique à alwaysplus pour jointure invisible */

.banner-promo {
  background: var(--puffs-bg) !important; /* #fbf8ff �?" identique à alwaysplus */
}

.banner-content-grid {
  display: grid !important;
  grid-template-columns: 1.05fr .95fr !important;
  gap: 0 !important;
  align-items: stretch !important;

  padding: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;

  background: rgba(255,255,255,.55) !important;
  border: 1.5px solid rgba(124,92,255,.18) !important;
  box-shadow:
    0 4px 24px rgba(124,92,255,.08),
    0 0 0 1px rgba(255,255,255,.70) inset !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Badge premium : étoiles uniquement au survol, pas de scale */


/* CTA positionné via coordonnées admin �?" aucun overlay sombre */
.hero-cta-absolute {
  position: absolute;
  z-index: 9;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: auto;
  transition: box-shadow .22s ease, filter .22s ease !important;
}
.hero-cta-absolute:hover {
  transform: translate(-50%, -50%) !important;
  box-shadow:
    0 0 0 3px rgba(124,92,255,.30),
    0 8px 32px rgba(124,92,255,.55),
    0 2px 8px rgba(124,92,255,.25) !important;
  filter: brightness(1.08) !important;
}

.banner-image {
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

.banner-image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 240px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 0 !important;
}

.banner-text {
  padding: 24px 28px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.banner-text h2 {
  max-width: 640px !important;
  margin: 0 0 10px !important;

  color: #071126 !important;
  font-size: clamp(18px, 1.8vw, 28px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -1px !important;
}

.banner-text h2::after {
  content: " font l'unanimit\00e9";
  display: inline;
  width: fit-content;

  background: linear-gradient(135deg, #7c5cff, #b44cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Traduction DE de l'expression fixe du pseudo-element (html[lang="de"] est
   pose cote serveur ET cote client). "Die Aromen, die" + " uberzeugen". */
html[lang="de"] .banner-text h2::after {
  content: " \0000FCberzeugen";
}

.banner-text p {
  max-width: 620px !important;
  margin: 0 0 20px !important;

  color: #44506a !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

/* Les 3 pastilles �?" sélecteur .banner-promo .banner-text .banner-pills
   spécificité (0,3,0) > .banner-text ul (0,1,1) �?" aucune ambiguïté */
.banner-promo .banner-text .banner-pills {
  display: flex !important;
  flex-direction: row !important;
  gap: 33px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;

  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px -2px !important;
}

.banner-promo .banner-text .banner-pills li {
  padding: 0 !important;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 6px !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  text-align: left !important;
  line-height: 1.3 !important;
}

/* Icône Phosphor */
.banner-promo .banner-text .banner-pills li i {
  font-size: 20px !important;
  color: #7c5cff !important;
  line-height: 1 !important;
}

/* Carré premium �?" sans contour, fond doux + ombre */
.banner-promo .banner-text .banner-pills .pill-icon-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #ede8ff 0%, #f3eeff 100%) !important;
  border: 1.5px solid rgba(124,92,255,.45) !important;
  flex-shrink: 0 !important;
  box-shadow:
    0 8px 22px rgba(124,92,255,.22),
    0 2px 6px rgba(124,92,255,.12),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
  transition: none !important;
}

.banner-promo .banner-text .banner-pills li:hover .pill-icon-wrap {
  transform: none !important;
  box-shadow:
    0 8px 22px rgba(124,92,255,.22),
    0 2px 6px rgba(124,92,255,.12),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
}

/* Supprimer le ::before (étoile/coche) */
.banner-promo .banner-text .banner-pills li::before {
  content: none !important;
  display: none !important;
}

/* Titre bold */
.banner-promo .banner-text .banner-pills li strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #071126 !important;
  letter-spacing: -.2px !important;
}

/* Sous-titre léger */
.banner-promo .banner-text .banner-pills li span {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  color: #64748b !important;
  line-height: 1.3 !important;
}

.banner-text .btn,
.banner-text .btn-primary {
  height: 52px !important;
  min-width: 0 !important;
  width: fit-content !important;
  padding: 0 28px !important;
  border-radius: 14px !important;

  background: linear-gradient(135deg, #a855f7 0%, #7c5cff 55%, #6d4aff 100%) !important;
  color: #ffffff !important;

  font-size: 15px !important;
  font-weight: 800 !important;

  box-shadow:
    0 14px 32px rgba(124,92,255,.26),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.banner-text .btn::after {
  content: "\27A1";
  margin-left: 18px;
  font-size: 22px;
}

.banner-text .btn:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 24px 52px rgba(124,92,255,.36),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
}

/* �"?�"? Collection : fond identique à Toujours + �"?�"? */
.banner-promo,
.section.banner-promo {
  background: var(--brand-card-surface) !important; /* #fbf8ff �?" même que #alwaysplus-showcase */
  background-image: none !important;
}
.banner-promo::before,
.section.banner-promo::before {
  display: none !important;
  content: none !important;
}

/* =========================================
   FOOTER PREMIUM PUFFS.CH - V4
   Dark Night � Vivid Color Accents
========================================= */

/* ?? Fond sombre avec halos color�s ?? */
.site-footer {
  position: relative !important;
  padding: 64px 0 36px !important;
  background:
    radial-gradient(ellipse 65% 55% at 92% 8%,  rgba(180,76,255,.22),  transparent),
    radial-gradient(ellipse 50% 40% at  4% 85%, rgba(124,92,255,.16),  transparent),
    radial-gradient(ellipse 40% 30% at 50% 105%,rgba(34,211,238,.09),  transparent),
    linear-gradient(170deg, #0d0621 0%, #110840 55%, #0c051e 100%) !important;
  overflow: visible !important;
}

/* Ligne d�grad�e en t�te */
.site-footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #7c5cff 18%,
    #b44cff 38%,
    #22d3ee 58%,
    #b44cff 78%,
    transparent 100%
  ) !important;
  z-index: 2 !important;
}

/* Halo ambiant au-dessus */
.site-footer::after {
  content: '' !important;
  position: absolute !important;
  top: -80px; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 60%; height: 200px !important;
  background: radial-gradient(ellipse, rgba(124,92,255,.18) 0%, transparent 70%) !important;
  filter: blur(30px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ?? Shell - carte en verre sombre ?? */
.footer-shell {
  display: block !important;
  position: relative !important;
  isolation: isolate !important;
  max-width: 1350px !important;
  margin: 0 auto !important;
  padding: 40px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.034) !important;
  border: 1px solid rgba(124,92,255,.24) !important;
  box-shadow:
    0 40px 100px rgba(0,0,0,.45),
    0 8px 24px  rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* ?? Brand panel ?? */
.footer-brand-panel {
  display: grid !important;
  position: relative !important;
  grid-template-columns: 160px 1fr !important;
  align-items: center !important;
  gap: 36px !important;
  padding: 24px 30px !important;
  border-radius: 20px !important;
  background: rgba(124,92,255,.07) !important;
  border: 1px solid rgba(124,92,255,.18) !important;
  margin-bottom: 32px !important;
}

/* Bordure d�grad�e anim�e */
.footer-brand-panel::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 20px !important;
  padding: 1px !important;
  background: linear-gradient(
    135deg,
    rgba(124,92,255,.80) 0%,
    rgba(180,76,255,.60) 30%,
    rgba(34,211,238,.50) 65%,
    rgba(124,92,255,.80) 100%
  ) !important;
  background-size: 300% 300% !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: 1 !important;
  animation: footerBrandBorder 4s ease-in-out infinite !important;
}

@keyframes footerBrandBorder {
  0%   { background-position: 0%   50%; opacity: 0.30; }
  50%  { background-position: 100% 50%; opacity: 0.90; }
  100% { background-position: 0%   50%; opacity: 0.30; }
}

/* Logo */
.footer-logo-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 18px !important;
  border-radius: 16px !important;
  background: rgba(124,92,255,.12) !important;
  border: 1px solid rgba(124,92,255,.22) !important;
  box-shadow: 0 0 24px rgba(124,92,255,.18) !important;
}

.footer-logo {
  width: 130px !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* Texte brand */
.footer-brand-text h3,
.footer-brand-panel h3 {
  color: #ffffff !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px !important;
  margin: 0 0 8px !important;
  line-height: 1.2 !important;
}

.footer-brand-text p {
  margin: 0 !important;
  max-width: 320px !important;
  color: rgba(255,255,255,.48) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}

/* =========================================
   SECTION AVIS CLIENTS PREMIUM
========================================= */

.reviews-section {
  padding: 32px 0 28px !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: var(--brand-card-surface) !important;
  background-image: none !important;
}

/* Colle le bloc Nouveautes qui precede les avis (pas de frontiere ni d'espace) */
#newcomers:has(+ .reviews-section) {
  padding-bottom: 8px !important;
}

/* Colle le bloc marque qui suit les avis (pas de frontiere ni d'espace) */
.reviews-section + #elfbar-showcase,
.reviews-section + .elfbar-showcase {
  padding-top: 8px !important;
}

.reviews-section .container {
  max-width: 1800px;
}

.reviews-header {
  text-align: left;
  margin-bottom: 32px;
}

.reviews-kicker {
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #7c5cff;
  background: rgba(124,92,255,.10);
  border: 1px solid rgba(124,92,255,.16);
  border-radius: 999px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  margin-bottom: 10px;
}

.reviews-header h2 {
  margin: 6px 0 8px;
  color: #071126;
  font-size: clamp(26px, 2vw, 38px);
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1.05;
  font-family: "Outfit", Inter, Arial, sans-serif;
}

.reviews-header p {
  font-size: 15.5px;
  font-weight: 450;
  color: #475569;
  line-height: 1.7;
  padding-left: 14px;
  border-left: 3px solid rgba(124,92,255,.45);
  margin: 0;
}

.reviews-slider {
  position: relative;
}

.reviews-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(280px, 1fr));
  gap: 18px;
  overflow-x: auto;
  padding: 8px 4px 18px;
  scrollbar-width: none;
}

.reviews-track::-webkit-scrollbar {
  display: none;
}

.review-card {
  min-height: 210px;
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(124,92,255,.14);
  box-shadow:
    0 18px 42px rgba(124,92,255,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
  display: flex;
  flex-direction: column;
}

.review-stars {
  color: #7c5cff;
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.review-date {
  display: block;
  color: #7a879d;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 14px;
}

.review-text {
  margin: 0 0 22px;
  color: #25304a;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  flex: 1;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c5cff, #b44cff);
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(124,92,255,.24);
  flex-shrink: 0;
}

.review-author strong {
  display: block;
  color: #071126;
  font-size: 14px;
  font-weight: 900;
}

.review-author span {
  display: block;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
}

.reviews-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1.5px solid rgba(124,92,255,.22) !important;
  box-shadow:
    0 10px 36px rgba(124,92,255,.18),
    0 3px 10px rgba(124,92,255,.10),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  cursor: pointer !important;
  font-size: 0 !important;
  color: transparent !important;
  line-height: 1 !important;
  transition:
    background .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    transform .28s cubic-bezier(.34,1.56,.64,1) !important;
}

/* Cacher le SVG - chevron dessin� en CSS pur comme best-sellers */
.reviews-nav svg {
  display: none !important;
}

/* Chevron CSS pur - proportionn� au bouton 40px (identique best-sellers) */
.reviews-nav::before {
  content: '' !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  background: none !important;
  transition:
    border-color .22s ease,
    transform .22s ease !important;
}

/* Chevron gauche < */
.reviews-prev::before {
  border-left: 2px solid #7c5cff !important;
  border-bottom: 2px solid #7c5cff !important;
  transform: rotate(45deg) translateX(2px) !important;
}

/* Chevron droit > */
.reviews-next::before {
  border-right: 2px solid #7c5cff !important;
  border-top: 2px solid #7c5cff !important;
  transform: rotate(45deg) translateX(-2px) !important;
}

.reviews-nav:hover {
  background: linear-gradient(135deg, #7c5cff 0%, #b44cff 100%) !important;
  border-color: transparent !important;
  box-shadow:
    0 18px 52px rgba(124,92,255,.42),
    0 6px 18px rgba(124,92,255,.28),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  transform: translateY(-50%) scale(1.10) !important;
}

.reviews-nav:hover::before {
  border-color: #ffffff !important;
}

.reviews-nav:active {
  transform: translateY(-50%) scale(0.96) !important;
}

.reviews-nav:disabled {
  opacity: .28 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

.reviews-prev {
  left: 10px !important;
}

.reviews-next {
  right: 10px !important;
}

.reviews-progress {
  position: relative;
  width: 220px;
  height: 4px;
  background: rgba(124,92,255,.06);
  border-radius: 999px;
  margin: 22px auto 0;
  overflow: hidden;
}

.reviews-progress-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 33.33%;
  background: linear-gradient(90deg, #7c5cff, #b44cff);
  border-radius: 999px;
  transition: left .3s ease;
}

@media (max-width: 900px) {
  .reviews-track {
    grid-template-columns: repeat(6, 280px);
  }
  .reviews-nav {
    display: none;
  }
}

/* Pills - 3 couleurs distinctes */
.footer-pill-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

.footer-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}

.footer-pill:nth-child(1) {
  background: rgba(16,185,129,.14) !important;
  border: 1px solid rgba(16,185,129,.30) !important;
  color: #34d399 !important;
}
.footer-pill:nth-child(2) {
  background: rgba(34,211,238,.12) !important;
  border: 1px solid rgba(34,211,238,.28) !important;
  color: #67e8f9 !important;
}
.footer-pill:nth-child(3) {
  background: rgba(251,191,36,.12) !important;
  border: 1px solid rgba(251,191,36,.28) !important;
  color: #fbbf24 !important;
}

.footer-pill::before {
  content: '' !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
}
.footer-pill:nth-child(1)::before { background: #10b981 !important; }
.footer-pill:nth-child(2)::before { background: #22d3ee !important; }
.footer-pill:nth-child(3)::before { background: #f59e0b !important; }

/* ?? Nav - 3 colonnes ?? */
.footer-content {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.3fr !important;
  gap: 32px !important;
  padding-top: 28px !important;
  border-top: 1px solid rgba(124,92,255,.16) !important;
}

/* Titres avec texte en d�grad� */
.footer-section h4 {
  position: relative !important;
  margin: 0 0 18px !important;
  padding-bottom: 12px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  background: linear-gradient(125deg, #a78bfa 0%, #e879f9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.footer-section h4::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; left: 0 !important;
  width: 28px; height: 2px !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, #7c5cff, #e879f9) !important;
}

.footer-section ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 10px !important;
}

/* Liens avec chevron glissant - caract�re propre \203A */
.footer-section ul li a,
.footer-section a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  overflow: hidden !important;
  color: rgba(255,255,255,.48) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color .18s ease, gap .18s ease !important;
}

.footer-section ul li a::before,
.footer-section ul li a::before,
.footer-section a::before {
  content: '\203A' !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #a78bfa !important;
  opacity: 0 !important;
  max-width: 0 !important;
  transition: opacity .18s ease, max-width .18s ease !important;
}

.footer-section ul li a:hover,
.footer-section a:hover {
  color: #c4a7ff !important;
  gap: 6px !important;
}

.footer-section ul li a:hover::before,
.footer-section a:hover::before {
  opacity: 1 !important;
  max-width: 14px !important;
}

/* ?? Panneau contact ?? */
.footer-contact-panel {
  padding: 18px !important;
  border-radius: 14px !important;
  background: rgba(124,92,255,.07) !important;
  border: 1px solid rgba(124,92,255,.18) !important;
  box-shadow: 0 0 30px rgba(124,92,255,.06) !important;
}

.contact-info {
  display: grid !important;
  gap: 10px !important;
}

.contact-info p {
  margin: 0 !important;
  color: rgba(255,255,255,.48) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.contact-info strong {
  color: rgba(255,255,255,.86) !important;
  font-weight: 700 !important;
}

/* ?? Barre basse ?? */
.footer-bottom {
  margin-top: 28px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(124,92,255,.16) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  color: rgba(255,255,255,.28) !important;
  font-size: 12.5px !important;
}

.footer-bottom p { margin: 0 !important; }

.age-warning strong {
  color: #fbbf24 !important;
  font-weight: 800 !important;
}

/* ?? Responsive ?? */
@media (max-width: 900px) {
  .footer-brand-panel {
    grid-template-columns: 200px 1fr !important;
  }
  .footer-logo { width: 200px !important; }
}

@media (max-width: 768px) {
  .footer-shell { padding: 24px !important; }
  .footer-brand-panel {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .footer-logo-wrap { justify-content: center !important; }
  .footer-brand-text p { max-width: none !important; }
  .footer-content { grid-template-columns: 1fr 1fr !important; }
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 480px) {
  .footer-content { grid-template-columns: 1fr !important; }
} �?" V3
========================================= */

/* �"?�"? Ligne dégradée en tête du footer �"?�"? */
.site-footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(124,92,255,.40) 20%,
    rgba(180,76,255,.70) 50%,
    rgba(124,92,255,.40) 80%,
    transparent 100%
  ) !important;
  z-index: 2 !important;
}

/* �"?�"? Halo ambiant au-dessus �"?�"? */
.site-footer::after {
  content: '' !important;
  position: absolute !important;
  top: -70px; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 55%; height: 180px !important;
  background: radial-gradient(ellipse, rgba(124,92,255,.11) 0%, transparent 70%) !important;
  pointer-events: none !important;
  filter: blur(28px) !important;
  z-index: 0 !important;
}

.site-footer {
  position: relative !important;
  padding: 36px 0 24px !important;
  background:
    radial-gradient(circle at 88% 8%,  rgba(180,76,255,.15), transparent 32%),
    radial-gradient(circle at 10% 82%, rgba(124,92,255,.11), transparent 36%),
    linear-gradient(180deg, #fdfbff 0%, #f0ebff 100%) !important;
  overflow: visible !important;
}

/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   SHELL �?" colonne unique, empilement
�.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.� */
.footer-shell {
  display: block !important;
  position: relative !important;
  isolation: isolate !important;
  max-width: 1350px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 24px 28px !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(124,92,255,.14) !important;
  box-shadow:
    0 30px 80px rgba(124,92,255,.10),
    0 6px 18px rgba(124,92,255,.05),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
}

/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   BRAND PANEL �?" bande horizontale
   [Logo] | [titre + description] | [pills]
�.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.� */
.footer-brand-panel {
  display: grid !important;
  position: relative !important;
  grid-template-columns: 270px 1fr !important;
  align-items: center !important;
  gap: 24px !important;

  padding: 16px 22px !important;
  border-radius: 20px !important;
  background: linear-gradient(90deg, rgba(124,92,255,.09) 0%, rgba(255,255,255,.42) 100%) !important;
  border: none !important;
  margin-bottom: 20px !important;
}

/* Inner brand panel - animated gradient border */
.footer-brand-panel::before {
  display: none !important;
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 20px !important;
  padding: 1px !important;
  background: linear-gradient(
    135deg,
    rgba(124,92,255,.75) 0%,
    rgba(180,76,255,.55) 35%,
    rgba(56,217,255,.45) 70%,
    rgba(124,92,255,.75) 100%
  ) !important;
  background-size: 300% 300% !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: 1 !important;
  animation: brandPanelBorder 4s ease-in-out infinite !important;
}

@keyframes brandPanelBorder {
  0%   { background-position: 0%   50%; opacity: 0.30; }
  50%  { background-position: 100% 50%; opacity: 0.85; }
  100% { background-position: 0%   50%; opacity: 0.30; }
}



/* �"?�"? Logo �"?�"? */
.footer-logo-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  outline: none !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.footer-logo {
  width: 270px !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* �"?�"? Texte central �"?�"? */
.footer-brand-text {
  min-width: 0 !important;
}

.footer-brand-panel h3 {
  margin: 0 0 8px !important;
  color: #071126 !important;
  font-size: 21px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  letter-spacing: -.5px !important;
}

.footer-brand-text p {
  margin: 0 !important;
  max-width: 460px !important;
  color: #526079 !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}

/* �"?�"? Pills �?" colonne à droite �"?�"? */
.footer-pill-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.footer-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(82,96,121,.18) !important;
  color: #526079 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}

.footer-pill::before {
  content: none !important;
  display: none !important;
}

/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   NAV �?" 3 colonnes sous le brand panel
�.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.� */
.footer-content {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.3fr !important;
  gap: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(124,92,255,.12) !important;
}

/* �"?�"? Titres de section avec trait violet �"?�"? */
.footer-section h4 {
  position: relative !important;
  margin: 0 0 12px !important;
  padding-bottom: 8px !important;
  color: #071126 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.footer-section h4::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; left: 0 !important;
  width: 22px; height: 2px !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, #7c5cff, #b44cff) !important;
}

.footer-section ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 6px !important;
}

/* �"?�"? Liens avec flèche coulissante �"?�"? */
.footer-section ul li a,
.footer-section a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  overflow: hidden !important;
  color: #526079 !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color .18s ease, gap .18s ease !important;
}

.footer-section ul li a::before,
.footer-section a::before {
  content: '\203A' !important;
  font-size: 11px !important;
  color: #7c5cff !important;
  opacity: 0 !important;
  max-width: 0 !important;
  transition: opacity .18s ease, max-width .18s ease !important;
}

.footer-section ul li a:hover,
.footer-section a:hover {
  color: #7c5cff !important;
  gap: 6px !important;
  padding-left: 0 !important;
}

.footer-section ul li a:hover::before,
.footer-section a:hover::before {
  opacity: 1 !important;
  max-width: 16px !important;
}

/* �"?�"? Contact panel �"?�"? */
.footer-contact-panel {
  padding: 20px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(124,92,255,.11) !important;
}

.contact-info {
  display: grid !important;
  gap: 9px !important;
}

.contact-info p {
  margin: 0 !important;
  color: #526079 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.contact-info strong {
  color: #071126 !important;
  font-weight: 800 !important;
}

/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   BARRE BASSE
�.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.� */
.footer-bottom {
  margin-top: 20px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(124,92,255,.11) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  color: #94a3b8 !important;
  font-size: 13.5px !important;
}

.footer-bottom p { margin: 0 !important; }

.age-warning strong {
  color: #7c5cff !important;
  font-weight: 800 !important;
}

/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   RESPONSIVE
�.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.� */
@media (max-width: 900px) {
  .footer-brand-panel {
    grid-template-columns: 200px 1fr !important;
  }

  .footer-logo {
    width: 200px !important;
  }
}

@media (max-width: 768px) {
  .footer-brand-panel {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .footer-logo-wrap {
    justify-content: flex-start !important;
  }

  .footer-content {
    grid-template-columns: 1fr 1fr !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 480px) {
  .footer-content {
    grid-template-columns: 1fr !important;
  }
}


/* -----------------------------------------
   LANGUAGE SWITCHER
----------------------------------------- */
/* Ensure the main-header row always stacks above the trust bar */
.main-header {
  position: relative;
  z-index: 2;
}

.lang-switcher {
  position: relative;
  flex-shrink: 0;
}

.lang-trigger {
  width: 42px;
  height: 42px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(247,242,255,.96));
  border: 1px solid rgba(124,92,255,.10);
  box-shadow: 0 14px 34px rgba(124,92,255,.05), inset 0 1px 0 rgba(255,255,255,.95);
  color: #6d4aff;
  cursor: pointer;
  transition: .22s ease;
  white-space: nowrap;
  line-height: 1;
}

.lang-globe {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  color: #7c5cff;
  transition: color .22s ease;
}

.lang-trigger #lang-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
}

.lang-chevron {
  font-size: 10px;
  line-height: 1;
  transition: transform .2s ease;
  display: inline-block;
}

.lang-switcher.open .lang-chevron {
  transform: rotate(180deg);
}

.lang-switcher.open .lang-trigger {
  color: #ffffff;
  background: linear-gradient(135deg, #7c5cff, #b44cff);
  box-shadow: 0 16px 38px rgba(124,92,255,.22);
}

.lang-switcher.open .lang-globe {
  color: #ffffff;
}

.lang-trigger:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #7c5cff, #b44cff);
  box-shadow: 0 16px 38px rgba(124,92,255,.22);
  transform: translateY(-1px) scale(1.03);
}

.lang-trigger:hover .lang-globe {
  color: #ffffff;
}

.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  list-style: none;
  margin: 0;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(124,92,255,.14);
  box-shadow: 0 16px 40px rgba(124,92,255,.14), 0 4px 12px rgba(0,0,0,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
}

.lang-switcher.open .lang-menu {
  display: block;
}

.lang-menu li {
  list-style: none;
}

.lang-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: none;
  color: #526079;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 9px;
  text-align: left;
  transition: background .15s, color .15s;
}

.lang-btn:hover {
  background: rgba(124,92,255,.08);
  color: #7c5cff;
}

.lang-btn.active {
  color: #7c5cff;
  font-weight: 700;
  background: rgba(124,92,255,.06);
}


/* ?? Footer Icons, Contact Card & Social Panel ?? */

/* 4-column grid for footer-content */
.footer-content {
  grid-template-columns: 1fr 1fr 1.3fr 1fr !important;
}

/* Footer links: flex layout with icon */
.footer-section ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Hide the ::before arrow for icon links */
.footer-section ul li a::before,
.footer-section ul li a:hover::before {
  display: none !important;
  content: none !important;
  max-width: 0 !important;
}

/* Icon inside footer links */
.footer-section ul li a i {
  font-size: 15px !important;
  color: #7c5cff !important;
  flex-shrink: 0 !important;
  opacity: 0.8;
  transition: transform .15s ease, opacity .15s;
}

.footer-section ul li a:hover i {
  opacity: 1 !important;
  transform: translateX(2px) !important;
}
.footer-contact-panel {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  box-shadow: 0 8px 32px rgba(124,92,255,.12), 0 2px 8px rgba(0,0,0,.04) !important;
  border: 1px solid rgba(124,92,255,.10) !important;
}

.footer-contact-panel h4 {
  margin-bottom: 18px !important;
}

/* Contact rows */
.contact-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.contact-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(124,92,255,.07) !important;
}

.contact-row:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.contact-row:first-child {
  padding-top: 0 !important;
}

.contact-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(124,92,255,.10), rgba(180,76,255,.08)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #7c5cff !important;
  font-size: 16px !important;
}

.contact-row > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.contact-row strong {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #3b2d8f !important;
}

.contact-row span {
  font-size: 12.5px !important;
  color: #526079 !important;
  line-height: 1.4 !important;
}

/* Social panel */
.footer-social-text {
  color: #526079 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin: 0 0 16px 0 !important;
}

.footer-social-icons {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.footer-social-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid rgba(124,92,255,.14) !important;
  box-shadow: 0 4px 14px rgba(124,92,255,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #526079 !important;
  font-size: 20px !important;
  transition: all .22s ease !important;
  text-decoration: none !important;
}

.footer-social-icon:hover {
  transform: translateY(-2px) scale(1.08) !important;
  color: #7c5cff !important;
  box-shadow: 0 8px 22px rgba(124,92,255,.20) !important;
  border-color: rgba(124,92,255,.30) !important;
}

/* Responsive: 2 cols then 1 col */
@media (max-width: 900px) {
  .footer-content {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  .footer-content {
    grid-template-columns: 1fr !important;
  }
}


/* ?? Footer Icons, Contact Card & Social Panel ?? */

/* 4-column grid for footer-content */
.footer-content {
  grid-template-columns: 1fr 1fr 1.3fr 1fr !important;
}

/* Footer links: flex layout with icon */
.footer-section ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Hide the ::before arrow for icon links */
.footer-section ul li a::before,
.footer-section ul li a:hover::before {
  display: none !important;
  content: none !important;
  max-width: 0 !important;
}

/* Icon inside footer links */
.footer-section ul li a i {
  font-size: 15px !important;
  color: #7c5cff !important;
  flex-shrink: 0 !important;
  opacity: 0.8;
  transition: transform .15s ease, opacity .15s;
}

.footer-section ul li a:hover i {
  opacity: 1 !important;
  transform: translateX(2px) !important;
}

/* Contact panel card with shadow */
.footer-contact-panel {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  box-shadow: 0 8px 32px rgba(124,92,255,.12), 0 2px 8px rgba(0,0,0,.04) !important;
  border: 1px solid rgba(124,92,255,.10) !important;
}

.footer-contact-panel h4 {
  margin-bottom: 18px !important;
}

.contact-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.contact-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(124,92,255,.07) !important;
}

.contact-row:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.contact-row:first-child {
  padding-top: 0 !important;
}

.contact-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(124,92,255,.10), rgba(180,76,255,.08)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #7c5cff !important;
  font-size: 16px !important;
}

.contact-row > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.contact-row strong {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #3b2d8f !important;
}

.contact-row span {
  font-size: 12.5px !important;
  color: #526079 !important;
  line-height: 1.4 !important;
}

/* Social panel */
.footer-social-text {
  color: #526079 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin: 0 0 16px 0 !important;
}

.footer-social-icons {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.footer-social-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid rgba(124,92,255,.14) !important;
  box-shadow: 0 4px 14px rgba(124,92,255,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #526079 !important;
  font-size: 20px !important;
  transition: all .22s ease !important;
  text-decoration: none !important;
}

.footer-social-icon:hover {
  transform: translateY(-2px) scale(1.08) !important;
  color: #7c5cff !important;
  box-shadow: 0 8px 22px rgba(124,92,255,.20) !important;
  border-color: rgba(124,92,255,.30) !important;
}

@media (max-width: 900px) {
  .footer-content {
    grid-template-columns: 1fr 1fr !important;
  }
  .footer-contact-panel {
    grid-column: span 2 !important;
  }
}

@media (max-width: 480px) {
  .footer-content {
    grid-template-columns: 1fr !important;
  }
  .footer-contact-panel {
    grid-column: span 1 !important;
  }
}


/* ?? Footer hover: texte mauve uniquement, sans mouvement ?? */
.footer-section ul li a:hover {
  gap: 8px !important;
}

.footer-section ul li a:hover i {
  transform: none !important;
  opacity: 0.9 !important;
  color: #7c5cff !important;
}

/* ?? Social icons: neutraliser la fl�che ::before et tout effet de d�placement ?? */
/* S�lecteur plus sp�cifique que .footer-section a::before pour gagner la cascade */
.footer-section a.footer-social-icon::before,
.footer-section a.footer-social-icon:hover::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  max-width: 0 !important;
}

.footer-social-icon:hover {
  transform: none !important;
  gap: unset !important;
}

/* ?? Contact: ic�nes Phosphor fill premium ?? */
.contact-icon {
  font-size: 22px !important;
  width: 38px !important;
  height: 38px !important;
}

.contact-icon i {
  font-size: 20px !important;
  color: #7c5cff !important;
}

/* ?? Social: ic�nes fill premium ?? */
/* Sp�cificit� 0,2,1 > .footer-section a 0,1,1 ? gagne le cascade */
.footer-section a.footer-social-icon {
  font-size: 26px !important;
  width: 46px !important;
  height: 46px !important;
  color: #7c5cff !important;
}

.footer-social-icon i {
  font-size: 24px !important;
}

/* Survol : l�g�re brillance mauve, fond subtil, pas de d�placement */
.footer-section a.footer-social-icon--instagram:hover,
.footer-section a.footer-social-icon--tiktok:hover,
.footer-section a.footer-social-icon--facebook:hover {
  color: #b44cff !important;
  background: rgba(124,92,255,.08) !important;
  border-color: rgba(124,92,255,.30) !important;
  box-shadow: 0 6px 20px rgba(124,92,255,.20) !important;
}

/* WhatsApp : icône sociale (SVG) + survol vert WhatsApp */
.footer-social-icon svg { width: 24px; height: 24px; display: block; }
.footer-section a.footer-social-icon--whatsapp:hover {
  color: #25D366 !important;
  background: rgba(37,211,102,.10) !important;
  border-color: rgba(37,211,102,.35) !important;
  box-shadow: 0 6px 20px rgba(37,211,102,.20) !important;
}

/* WhatsApp : ligne cliquable dans le panneau Contact */
a.contact-row--whatsapp {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.contact-row--whatsapp .contact-icon,
a.contact-row--whatsapp .contact-icon svg { color: #25D366 !important; fill: #25D366 !important; }
/* Neutralise l'effet de survol generique des liens du footer (chevron + gap)
   sur la ligne WhatsApp : elle doit rester purement cliquable, sans decalage. */
.footer-section a.contact-row--whatsapp::before,
.footer-section a.contact-row--whatsapp:hover::before { content: none !important; display: none !important; }
.footer-section a.contact-row--whatsapp:hover { gap: 0 !important; color: inherit !important; }
.contact-icon svg { width: 18px; height: 18px; display: block; }

/* ?? Footer pills: style neutre bleu-gris, override nth-child color�s ?? */
.footer-pill,
.footer-pill:nth-child(1),
.footer-pill:nth-child(2),
.footer-pill:nth-child(3) {
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(82,96,121,.18) !important;
  color: #2b6cb0 !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}

.footer-pill::before,
.footer-pill:nth-child(1)::before,
.footer-pill:nth-child(2)::before,
.footer-pill:nth-child(3)::before {
  content: none !important;
  display: none !important;
}


/* ===== CART DRAWER ===== */

.drawer-body-lock { overflow: hidden; }

.cart-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(7,17,38,.52);
  opacity: 0; pointer-events: none;
  transition: opacity .32s ease;
  z-index: 10000;
}
.cart-drawer-backdrop.is-visible { opacity: 1; pointer-events: all; }

.cart-drawer {
  position: fixed; top: 0; right: 0;
  width: 420px; max-width: 100vw;
  height: 100dvh; height: 100vh;
  background: #fff;
  box-shadow: -8px 0 40px rgba(7,17,38,.14);
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.4,0,.2,1);
  z-index: 10001;
  display: flex; flex-direction: column;
  will-change: transform;
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer-inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.cart-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #f0edf8; flex-shrink: 0;
}
.cart-drawer-header-left { display: flex; align-items: center; gap: 10px; }
.cart-drawer-title { font-size: 18px; font-weight: 700; color: #071126; margin: 0; line-height: 1.2; }
.cart-drawer-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 12px; background: #7c5cff; color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.cart-drawer-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid #e8e3f4; background: transparent; color: #526079;
  cursor: pointer; transition: background .18s, color .18s, border-color .18s; flex-shrink: 0;
}
.cart-drawer-close:hover { background: #f4f0ff; color: #7c5cff; border-color: #c5b8ff; }

.cart-drawer-shipping-bar {
  padding: 12px 20px 10px;
  background: linear-gradient(90deg,#f7f5ff 0%,#fdfcff 100%);
  border-bottom: 1px solid #f0edf8; flex-shrink: 0;
}
.cart-drawer-shipping-track {
  height: 6px; border-radius: 3px; background: #ede9fa; overflow: hidden; margin-bottom: 7px;
}
.cart-drawer-shipping-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg,#7c5cff,#b44cff);
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
.cart-drawer-shipping-label { font-size: 12.5px; color: #526079; margin: 0; font-weight: 500; }
.cart-drawer-shipping-label.is-reached { color: #22a745; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.cart-drawer-shipping-icon { width: 16px; height: 16px; flex-shrink: 0; color: #22a745; }

.cart-drawer-body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 0;
}
.cart-drawer-body::-webkit-scrollbar { width: 4px; }
.cart-drawer-body::-webkit-scrollbar-track { background: transparent; }
.cart-drawer-body::-webkit-scrollbar-thumb { background: #d6cef5; border-radius: 2px; }

.cart-drawer-items { padding: 6px 0; }

.drawer-item {
  display: flex; gap: 13px; padding: 14px 20px;
  border-bottom: 1px solid #f5f3fb; transition: background .15s;
}
.drawer-item:hover { background: #fdfcff; }

.drawer-item-thumb-link { flex-shrink: 0; display: block; }
.drawer-item-thumb {
  width: 68px; height: 68px; object-fit: contain;
  border-radius: 10px; background: #f7f5ff; border: 1px solid #ede9fa; display: block;
}
.drawer-item-thumb-fallback {
  width: 68px; height: 68px; border-radius: 10px;
  background: #f7f5ff; border: 1px solid #ede9fa;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.drawer-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.drawer-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.drawer-item-info { min-width: 0; }
.drawer-item-name {
  font-size: 13.5px; font-weight: 600; color: #071126; margin: 0 0 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.drawer-item-variant {
  font-size: 12px; color: #7c5cff; font-weight: 500;
  background: #f4f0ff; padding: 2px 8px; border-radius: 20px; display: inline-block;
}
.drawer-item-remove {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid #e8e3f4; background: transparent; color: #a09ab8;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s; margin-top: 1px;
}
.drawer-item-remove:hover { background: #fff0f0; color: #e53e3e; border-color: #fcc; }
.drawer-item-bottom { display: flex; align-items: center; justify-content: space-between; }
.drawer-item-stepper {
  display: flex; align-items: center;
  border: 1.5px solid #ede9fa; border-radius: 20px; overflow: hidden;
  height: 32px; background: #f7f5ff;
}
.drawer-stepper-btn {
  width: 30px; height: 30px; background: transparent; border: none;
  color: #526079; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s; line-height: 1; padding: 0; font-weight: 400;
}
.drawer-stepper-btn:hover { background: #ede9fa; color: #7c5cff; }
.drawer-stepper-qty {
  min-width: 26px; text-align: center; font-size: 13px;
  font-weight: 700; color: #071126; user-select: none;
}
.drawer-item-price { font-size: 14px; font-weight: 700; color: #071126; }
.drawer-item-deal-badge {
  display: inline-block; margin-top: 4px;
  font-size: 10.5px; font-weight: 700; color: #16a34a;
  background: #ecfdf3; border: 1px solid #bbf7d0;
  padding: 2px 7px; border-radius: 20px; letter-spacing: .2px;
}
.drawer-item-price-wrap { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.drawer-item-price-old { font-size: 11.5px; font-weight: 600; color: #9aa3b2; text-decoration: line-through; }
.drawer-item-price-deal { color: #16a34a; }

.cart-drawer-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 24px 40px; text-align: center; gap: 10px;
}
.cart-drawer-empty-icon {
  width: 96px; height: 96px; line-height: 0;
}
.cart-drawer-empty-icon svg { width: 100%; height: 100%; display: block; }
.cart-drawer-empty-title { font-size: 16px; font-weight: 700; color: #071126; margin: 0; }
.cart-drawer-empty-sub { font-size: 13.5px; color: #8c91a3; margin: 0; }
.cart-drawer-empty-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 11px 24px; border-radius: 24px;
  background: linear-gradient(135deg,#7c5cff 0%,#b44cff 100%);
  color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none;
  transition: opacity .18s, transform .18s;
}
.cart-drawer-empty-cta:hover { opacity: .9; transform: translateY(-1px); }

.cart-drawer-footer {
  border-top: 1px solid #f0edf8; padding: 14px 20px 18px;
  flex-shrink: 0; background: #fff; display: flex; flex-direction: column; gap: 12px;
}

.cart-drawer-promo-toggle {
  display: flex; align-items: center; gap: 7px;
  background: transparent; border: 1.5px dashed #d0c8f0;
  border-radius: 8px; padding: 9px 14px;
  cursor: pointer; width: 100%; color: #7c5cff;
  font-size: 13px; font-weight: 600;
  transition: background .15s, border-color .15s;
}
.cart-drawer-promo-toggle:hover { background: #f4f0ff; border-color: #b4a6ff; }
.drawer-promo-caret { margin-left: auto; transition: transform .22s; flex-shrink: 0; }
.cart-drawer-promo-toggle.is-open .drawer-promo-caret { transform: rotate(180deg); }
.cart-drawer-promo-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease; overflow: hidden;
}
.cart-drawer-promo-panel.is-open { grid-template-rows: 1fr; }
.cart-drawer-promo-panel > * { overflow: hidden; }
.cart-drawer-promo-row { display: flex; gap: 8px; padding-top: 10px; }
.cart-drawer-promo-input {
  flex: 1; padding: 9px 13px; border: 1.5px solid #d0c8f0;
  border-radius: 8px; font-size: 13px; color: #071126;
  background: #fdfcff; outline: none; transition: border-color .18s;
}
.cart-drawer-promo-input:focus { border-color: #7c5cff; }
.cart-drawer-promo-apply {
  padding: 9px 16px; border-radius: 8px; border: none;
  background: #7c5cff; color: #fff; font-weight: 700; font-size: 13px;
  cursor: pointer; transition: background .15s; white-space: nowrap;
}
.cart-drawer-promo-apply:hover { background: #6a4be0; }
.cart-drawer-promo-msg { font-size: 12px; padding: 5px 0 0; margin: 0; color: #526079; }
.cart-drawer-promo-msg.is-error { color: #e53e3e; }
.cart-drawer-promo-msg.is-success { color: #22a745; }

.cart-drawer-summary { display: flex; flex-direction: column; gap: 6px; }
.cart-drawer-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13.5px; color: #526079;
}
.cart-drawer-summary-row:last-child {
  padding-top: 6px; border-top: 1.5px solid #f0edf8; margin-top: 2px;
}
.cart-drawer-summary-total { font-size: 16px; color: #071126; font-weight: 700; }
.cart-drawer-summary-total span,
.cart-drawer-summary-total strong { color: #071126; }
#drawer-shipping-amount.is-free { color: #22a745; font-weight: 700; }

.cart-drawer-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: 14px;
  background: linear-gradient(135deg,#7c5cff 0%,#b44cff 100%);
  color: #fff !important; text-decoration: none !important;
  font-weight: 700; font-size: 14px;
  transition: opacity .18s, transform .18s, box-shadow .18s;
  box-shadow: 0 6px 22px rgba(124,92,255,.32);
  position: relative; overflow: hidden;
  width: 100%;
}
.cart-drawer-cta::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 60%);
  pointer-events: none;
}
.cart-drawer-cta:hover { opacity: .93; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(124,92,255,.42); }
.cart-drawer-cta-label { flex: none; }
.cart-drawer-cta-price {
  font-size: 15px; font-weight: 700; opacity: .95;
  background: rgba(255,255,255,.18); padding: 3px 10px;
  border-radius: 20px; white-space: nowrap;
}

.cart-drawer-trust { display: flex; justify-content: space-between; gap: 4px; flex-wrap: wrap; }
.cart-drawer-trust span {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: #8c91a3; font-weight: 500;
}
.cart-drawer-trust svg { opacity: .7; flex-shrink: 0; }

/* Cart icon purple state when items in cart */
.header-icon.cart-link.cart-has-items,
a.cart-link.cart-has-items {
  background: linear-gradient(135deg,#7c5cff 0%,#a44fff 100%) !important;
  color: #fff !important; border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(124,92,255,.35) !important;
}
.header-icon.cart-link.cart-has-items .cart-count,
a.cart-link.cart-has-items .cart-count { background: #ffffff !important; color: #7c5cff !important; }
.header-icon.cart-link.cart-has-items i,
a.cart-link.cart-has-items i { color: #fff !important; }

@media (max-width: 500px) {
  .cart-drawer { width: 100vw; border-radius: 0; }
  .drawer-item-name { max-width: 140px; }
}

/* ===== TOAST NOTIFICATION ===== */
.notification {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 99999;
  background: #ffffff;
  border: 1px solid rgba(124,92,255,.18);
  border-left: 4px solid #7c5cff;
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #2d2250;
  box-shadow: 0 8px 32px rgba(7,17,38,.13);
  pointer-events: none;
  animation: toast-in .3s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 500px) {
  .notification { left: 16px; right: 16px; bottom: 20px; }
}

/* =============================================
   SURVOL CARTE - FOCUS VISIBLE + GLOW PREMIUM
============================================= */

#new-products > .product-item:hover,
#elfbar-products > .product-item:hover,
#lostmary-products > .product-item:hover,
#alwaysplus-products > .product-item:hover {
  transform: none !important;
  /* Bordure violette bien visible */
  border-color: rgba(168,85,247,.80) !important;
  /* Anneau externe + ombres en couches pour l'effet "carte active" */
  box-shadow:
    0 0 0 3px rgba(168,85,247,.22),
    0 8px 28px rgba(124,92,255,.32),
    0 20px 56px rgba(124,92,255,.20),
    0 4px 12px rgba(15,23,42,.10) !important;
}

/* =============================================
   RUBAN PRIX - SHIMMER PREMIUM v4
   Sp�cificit� (2,3,0) - m�me que FIX FINAL ABSOLU
   + position source ult�rieure = gagne sur background-size/pos
============================================= */

/* D�grad� 300% large : violet pur ? �clat blanc ? violet pur */
#newcomers #new-products > .product-item .product-details .product-price,
#elfbar-showcase #elfbar-products > .product-item .product-details .product-price,
#lostmary-showcase #lostmary-products > .product-item .product-details .product-price,
#alwaysplus-showcase #alwaysplus-products > .product-item .product-details .product-price,
/* fallback cartes sans .product-details */
#new-products > .product-item .product-price,
#elfbar-products > .product-item .product-price,
#lostmary-products > .product-item .product-price,
#alwaysplus-products > .product-item .product-price {
  background-image: linear-gradient(
    135deg,
    #a855f7 0%,
    #8b5cf6 33%,
    rgba(255,255,255,.72) 46%,
    rgba(255,255,255,.72) 54%,
    #8b5cf6 67%,
    #7c5cff 100%
  ) !important;
  background-size:     300% 100% !important;
  background-position: 0% 50%   !important;
  transition: box-shadow .3s ease !important;
}

/* Survol carte ? �clat traverse le ruban de gauche � droite */
#newcomers #new-products > .product-item:hover .product-details .product-price,
#elfbar-showcase #elfbar-products > .product-item:hover .product-details .product-price,
#lostmary-showcase #lostmary-products > .product-item:hover .product-details .product-price,
#alwaysplus-showcase #alwaysplus-products > .product-item:hover .product-details .product-price,
/* fallback */
#new-products > .product-item:hover .product-price,
#elfbar-products > .product-item:hover .product-price,
#lostmary-products > .product-item:hover .product-price,
#alwaysplus-products > .product-item:hover .product-price {
  background-position: 100% 50% !important;
  transition:
    background-position 1.4s ease-in-out,
    box-shadow          .3s ease !important;
  box-shadow:
    0 14px 32px rgba(124,92,255,.42),
    0 4px 10px rgba(124,92,255,.26),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
}

/* =============================================
   CARROUSEL BEST-SELLERS - SURVOL MINIMAL
   Supprime translateY + scale image.
   Garde uniquement la bordure l�g�re.
============================================= */

#best-sellers .product-item:hover,
#best-sellers #featured-products > .product-item:hover {
  transform: none !important;
  border-color: rgba(124,92,255,.40) !important;
  box-shadow:
    0 10px 24px rgba(124,92,255,.07),
    0 4px 8px rgba(15,23,42,.04) !important;
}

/* Supprime le scale de l'image dans le carrousel */
#best-sellers .product-item:hover > img,
#best-sellers .product-item:hover .product-image img,
#best-sellers #featured-products > .product-item:hover .product-image img {
  transform: none !important;
}

/* =============================================
   NEWCOMERS - M�MES EFFETS QUE ELFBAR
   Pas de d�placement, glow violet marqu�, shimmer ruban.
============================================= */

#newcomers .product-item:hover,
#newcomers #new-products > .product-item:hover {
  transform: none !important;
  border-color: rgba(124,92,255,.30) !important;
  box-shadow:
    0 10px 24px rgba(124,92,255,.07),
    0 4px 8px rgba(15,23,42,.04) !important;
}

#newcomers #new-products > .product-item:hover .product-image img,
#newcomers #new-products .pc-card:hover .product-image img {
  transform: scale(1.06) !important;
}

/* =====================================================
   NOS MEILLEURES SELECTIONS - FINAL OVERRIDE
   Specificity (0,2,0) ? wins all previous rules
===================================================== */
.banner-promo .banner-content-grid {
  display: grid !important;
  grid-template-columns: 1.1fr .9fr !important;
  gap: 0 !important;
  align-items: stretch !important;
  padding: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.60) !important;
  border: 1.5px solid rgba(124,92,255,.14) !important;
  box-shadow: 0 8px 32px rgba(124,92,255,.10) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.banner-promo .banner-image {
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

.banner-promo .banner-image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 380px !important;
  max-height: 460px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.banner-promo .banner-text {
  padding: 36px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
}

/* ?? Best-sellers subtitle ????????????????????????????????? */
.bs-section-subtitle {
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 450 !important;
  color: #475569 !important;
  line-height: 1.7 !important;
  padding-left: 14px !important;
  border-left: 3px solid rgba(124,92,255,.45) !important;
  margin: 0 !important;
}

/* ?? Contour autour du bloc best-sellers gauche (titre + carousel) ?? */
#best-sellers .weekly-offer-side::after {
  content: none;
}

#best-sellers .best-sellers-layout {
  position: relative !important;
}

#best-sellers .best-sellers-layout::before {
  content: '';
  position: absolute;
  top: -175px;     /* couvre le header (~140px) + margins (~35px) */
  left: 0;
  right: calc(340px + 34px + 34px); /* side width + gap + right padding = 408px */
  bottom: 120px;   /* s'arr�te avant la trust-bar et r�duit le vide sous le carousel */
  border: 1.5px solid rgba(124, 92, 255, .30);
  border-radius: 36px;
  background: #f8f5ff;
  box-shadow:
    0 0 0 5px rgba(124, 92, 255, .06),
    0 24px 60px rgba(124, 92, 255, .13),
    0 6px 18px rgba(124, 92, 255, .07),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  pointer-events: none;
  z-index: 0;
}

/* reset border/bg sur products - le cadre vient du ::before parent */
#best-sellers .best-sellers-products {
  position: relative !important;
  z-index: 1 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ?? Alignement shell ? cadre gauche : m�me top, m�me hauteur ?? */
#best-sellers .weekly-offer-shell {
  margin-top: -175px !important;  /* aligne le top du shell avec ::before (top: -175px) */
  height: 615px !important;       /* = frame_bottom(1533) ? frame_top(918) */
  min-height: 615px !important;
}

/* ?? Carousel : exactement 4 cartes visibles (largeur max, cartes 250px) ?? */
#best-sellers .carousel-wrapper {
  max-width: calc(4 * 250px + 3 * 20px + 12px) !important;  /* 1072px = 4 cartes + 3 gaps + 12px ombre/bordure droite */
}

/* Supprime le fondu droit (�tait utile quand 5 cartes d�bordaient, d�sormais on clippe proprement) */
#best-sellers .carousel-container {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* ?? Fl�ches redimensionn�es (40px) + prev repositionn�e pour �viter le clip overflow ?? */
#best-sellers .carousel-prev,
#best-sellers .carousel-next {
  width: 40px !important;
  height: 40px !important;
}

/* prev : anciennement left:-14px ? d�passait hors de .best-sellers-products (overflow:hidden) */
#best-sellers .carousel-prev { left: 10px !important; }
#best-sellers .carousel-next { right: -10px !important; }

/* Chevron proportionn� au nouveau bouton 40px */
#best-sellers .carousel-prev::before,
#best-sellers .carousel-next::before {
  width: 8px !important;
  height: 8px !important;
}
#best-sellers .carousel-prev::before {
  border-left-width: 2px !important;
  border-bottom-width: 2px !important;
}
#best-sellers .carousel-next::before {
  border-right-width: 2px !important;
  border-top-width: 2px !important;
}

/* =========================================
   MEGAMENU CAT�GORIES - COMPACT
========================================= */

.nav-menu {
  overflow: visible !important;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown > a {
  position: relative;
  gap: 8px !important;
}

.nav-dropdown:hover > a {
  color: #ffffff !important;
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  box-shadow: 0 14px 34px rgba(124,92,255,.26) !important;
}

/* Sous-menu "Puffs" (avec / sans nicotine) : déplacé dans <body> via JS et
   positionné sous le lien "Puffs" (position: fixed, coordonnées calculées). */
.puffs-submenu {
  position: fixed !important;
  z-index: 9998;
  min-width: 262px;
  padding: 8px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 85% 8%, rgba(180,76,255,.10), transparent 40%),
    rgba(255,255,255,.98);
  border: 1px solid rgba(124,92,255,.14);
  box-shadow:
    0 24px 60px rgba(31,41,55,.15),
    0 12px 36px rgba(124,92,255,.12),
    inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.puffs-submenu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.puffs-submenu ul { list-style: none; margin: 0; padding: 0; }
.puffs-submenu li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #1b1236;
  transition: background .15s ease;
}
.puffs-submenu li a:hover { background: rgba(124,92,255,.10); }
.puffs-submenu li a i { font-size: 18px; color: #7c5cff; flex-shrink: 0; }
.puffs-submenu li a span {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
}
.puffs-submenu li a small {
  font-weight: 500;
  font-size: 11.5px;
  color: #8b7fb0;
  margin-top: 2px;
}
/* Nav desktop masquée <=1220px (hamburger) : le sous-menu ne doit jamais
   s'afficher sur tablette/mobile (il est dans <body>). */
@media (max-width: 1220px) {
  .puffs-submenu { display: none !important; }
}

/* Note: .megamenu is moved to <body> via JS to escape backdrop-filter
   containing block on .nav-menu / .main-header */
.megamenu {
  position: fixed !important;
  top: 118px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;

  width: min(970px, calc(100vw - 40px)) !important;
  z-index: 9998 !important;

  padding: 20px !important;
  border-radius: 20px !important;

  background:
    radial-gradient(circle at 85% 10%, rgba(180,76,255,.10), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(124,92,255,.08), transparent 38%),
    rgba(255,255,255,.97) !important;

  border: 1px solid rgba(124,92,255,.14) !important;

  box-shadow:
    0 24px 60px rgba(31,41,55,.15),
    0 12px 36px rgba(124,92,255,.12),
    inset 0 1px 0 rgba(255,255,255,.95) !important;

  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .2s ease,
    visibility .2s ease,
    transform .2s ease;
}

.megamenu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) !important;
}

.megamenu-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.8fr 1fr .9fr !important;
  gap: 16px !important;
}

.megamenu section {
  position: relative;
  padding: 0 16px 0 0 !important;
}

.megamenu section:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(124,92,255,.16),
    transparent
  );
}

.megamenu h4 {
  margin: 0 0 12px !important;
  color: #7c5cff !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.megamenu ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* TYPES */

.megamenu section:first-child ul {
  display: grid !important;
  gap: 6px !important;
}

.megamenu section:first-child li a {
  min-height: 52px !important;
  padding: 9px 12px !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  border-radius: 14px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(124,92,255,.10) !important;

  color: #26304d !important;
  text-decoration: none !important;

  box-shadow: 0 6px 18px rgba(124,92,255,.04) !important;
  transition: .2s ease !important;
}

.megamenu section:first-child li a:hover {
  background: linear-gradient(135deg, #ffffff, #f5efff) !important;
  border-color: rgba(124,92,255,.24) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 12px 28px rgba(124,92,255,.10) !important;
}

.megamenu section:first-child li a i {
  width: 34px !important;
  height: 34px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 11px !important;

  background: linear-gradient(135deg, #eef2ff, #f6edff) !important;
  color: #7c5cff !important;

  font-size: 17px !important;
  flex-shrink: 0 !important;
}

.megamenu section:first-child li a span {
  display: grid !important;
  gap: 2px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.megamenu small {
  display: block !important;
  color: #7a879d !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* SAVEURS */

.saveurs-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.saveurs-grid li a {
  height: 36px !important;
  padding: 0 8px !important;

  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;

  border-radius: 10px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(124,92,255,.10) !important;

  color: #26304d !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-decoration: none !important;

  box-shadow: 0 4px 12px rgba(124,92,255,.04) !important;
  transition: .2s ease !important;
}

.saveurs-grid li a:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(124,92,255,.24) !important;
  background: #ffffff !important;
  color: #7c5cff !important;
  box-shadow: 0 8px 20px rgba(124,92,255,.12) !important;
}

.flavor-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  flex: 0 0 10px !important;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.9),
    0 4px 10px rgba(0,0,0,.12) !important;
}

.flavor-red        { background: linear-gradient(135deg, #ff4f6d, #c9184a); }
.flavor-orange     { background: linear-gradient(135deg, #ff9f1c, #ff6b00); }
.flavor-peach      { background: linear-gradient(135deg, #ffb199, #ff7a59); }
.flavor-yellow     { background: linear-gradient(135deg, #ffe66d, #f7b801); }
.flavor-watermelon { background: linear-gradient(135deg, #ff4d6d, #2dd4bf); }
.flavor-blue       { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.flavor-mint       { background: linear-gradient(135deg, #5eead4, #10b981); }
.flavor-brown      { background: linear-gradient(135deg, #a16207, #422006); }
.flavor-cherry     { background: linear-gradient(135deg, #ef233c, #9d0208); }
.flavor-raspberry  { background: linear-gradient(135deg, #f72585, #b5179e); }
.flavor-kiwi       { background: linear-gradient(135deg, #84cc16, #3f6212); }
.flavor-melon      { background: linear-gradient(135deg, #d9f99d, #84cc16); }
.flavor-tobacco    { background: linear-gradient(135deg, #b45309, #78350f); }
.flavor-candy      { background: linear-gradient(135deg, #ff4fd8, #7c5cff); }

/* MARQUES */

.brand-list {
  display: grid !important;
  gap: 6px !important;
}

.brand-list li a {
  min-height: 30px !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  color: #26304d !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;

  transition: .2s ease !important;
}

.brand-list li a::after {
  content: ">";
  margin-left: auto;
  color: #9f7bff;
  font-size: 18px;
  opacity: 0;
  transform: translateX(-4px);
  transition: .2s ease;
}

.brand-list li a:hover {
  color: #7c5cff !important;
  transform: translateX(3px);
}

.brand-list li a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.brand-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  box-shadow: 0 0 0 3px rgba(124,92,255,.10) !important;
}

.brand-dot-green {
  background: linear-gradient(135deg, #10b981, #5eead4) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.12) !important;
}

.brand-logo {
  height: 16px !important;
  width: auto !important;
  object-fit: contain !important;
  opacity: .85;
  margin-left: 6px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  transition: opacity .2s ease !important;
}

.brand-list li a:hover .brand-logo {
  opacity: 1 !important;
}

.mm-brand-logo {
  height: 26px !important;
  width: auto !important;
  max-width: 130px !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  flex-shrink: 0 !important;
  mix-blend-mode: multiply !important;
  opacity: .9 !important;
  transition: opacity .2s ease !important;
}

.brand-list li a:hover .mm-brand-logo {
  opacity: 1 !important;
}

/* Tailles individuelles logos marques */
.brand-list li:nth-child(1) .mm-brand-logo { height: 36px !important; max-width: 138px !important; margin-left: -3px !important; } /* ELF BAR */
.brand-list li:nth-child(2) .mm-brand-logo { height: 36px !important; max-width: 138px !important; margin-left: -7px !important; } /* Lost Mary */
.brand-list li:nth-child(3) .mm-brand-logo { height: 18px !important; max-width: 92px !important; }  /* Elfliq */

/* Pastille type verrouill�e (depuis nav Puffs / E-liquides) : masquer le � */
body.has-locked-type .cat-chip-remove[data-filter-type="type"] {
  display: none !important;
}

/* Pastille saveur verrouillee (page /saveur/<x>) : masquer le X pour empecher
   le retrait du filtre saveur (famille consolidee ou saveurs individuelles). */
body.has-locked-flavor .cat-chip-remove[data-filter-type="flavor-family"],
body.has-locked-flavor .cat-chip-remove[data-filter-type="flavor"] {
  display: none !important;
}

/* FILTRES */

.filter-group {
  margin-bottom: 12px !important;
}

.filter-group h5 {
  margin: 0 0 6px !important;
  color: #a18bcf !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.filter-group a {
  min-height: 34px !important;
  margin-bottom: 6px !important;
  padding: 0 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  border-radius: 999px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(124,92,255,.12) !important;

  color: #26304d !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;

  transition: .2s ease !important;
}

.filter-group a:hover {
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(124,92,255,.24) !important;
  transform: translateY(-1px) !important;
}

.filter-group a i {
  font-size: 14px !important;
}

/* Responsive s�curit� */
@media (max-width: 1150px) {
  .megamenu {
    display: none !important;
  }
}

/* =====================================================
   NOTES PRODUITS - �TOILES PREMIUM (pleine / demi / vide)
   Refl�tent la vraie note. S'applique a toutes les cartes
   (best-sellers, nouveautes, elfbar, lost mary, toujours +).
===================================================== */
.product-item .product-rating .stars {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}

.product-item .product-rating .stars .star-full,
.product-item .product-rating .stars .star-half {
  color: #f5a623 !important;
  background: linear-gradient(135deg, #ffd76b 0%, #f5a623 55%, #e0860a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(224,134,10,.20));
}

.product-item .product-rating .stars .star-empty {
  color: #d4dae6 !important;
  -webkit-text-fill-color: #d4dae6 !important;
}

/* =====================================================
   REFONTE CARTES "NOUVEAUT�S" (#newcomers .pc-card)
   - notation: �toiles jaunes plus grandes, sans pilule
   - prix + bouton panier sur une m�me ligne (panier � droite)
   - surcouche au survol couvrant toute la carte
===================================================== */
#newcomers .pc-card {
  position: relative !important;
  overflow: hidden !important;
}

/* Notation: suppression de la pilule jaune, �toiles plus grandes */
#newcomers .pc-card .pc-rating {
  width: auto !important;
  margin: 4px auto 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#newcomers .pc-card .pc-rating .stars {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

#newcomers .pc-card .pc-rating .stars i {
  font-size: 22px !important;
  filter: none !important;
}

#newcomers .pc-card .pc-rating .reviews {
  color: #6b7280 !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Ligne prix + bouton panier */
#newcomers .pc-card .pc-buyline {
  width: 100% !important;
  margin-top: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

#newcomers .pc-card .pc-buyline .product-price {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  color: #6d4aff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.7px !important;
}

#newcomers #new-products .pc-card .pc-buyline .add-cart-round,
#newcomers .pc-card .pc-buyline .pc-cart-trigger {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px rgba(124,92,255,.28) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

#newcomers .pc-card .pc-buyline .pc-cart-trigger:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 30px rgba(124,92,255,.34) !important;
}

/* Surcouche (overlay) */
#newcomers .pc-card .pc-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: linear-gradient(160deg, rgba(255,255,255,.97), rgba(247,242,255,.98)) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
}

#newcomers .pc-card.pc-open .pc-overlay {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#newcomers .pc-card .pc-overlay-inner {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 9px !important;
}

#newcomers .pc-card .pc-flavor {
  width: 100% !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(124,92,255,.28) !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

#newcomers .pc-card .pc-qty {
  align-self: stretch !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid rgba(124,92,255,.28) !important;
  box-shadow: none !important;
}

#newcomers .pc-card .pc-qty-btn {
  border: 0 !important;
  background: transparent !important;
  color: #7c5cff !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#newcomers .pc-card .pc-qty-val {
  min-width: 22px !important;
  text-align: center !important;
  color: #071126 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

#newcomers .pc-card .pc-name {
  text-align: center !important;
  color: #071126 !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  display: block !important;
  overflow: visible !important;
  min-height: 33px !important;
  white-space: normal !important;
}

#newcomers .pc-card .pc-add {
  width: 100% !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #ffffff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 12px 24px rgba(124,92,255,.26) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

#newcomers .pc-card .pc-add:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 32px rgba(124,92,255,.34) !important;
}

#newcomers .pc-card .pc-detail {
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1.6px solid rgba(124,92,255,.55) !important;
  background: rgba(124,92,255,.07) !important;
  color: #6d4aff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}

#newcomers .pc-card .pc-detail:hover {
  background: rgba(124,92,255,.14) !important;
  border-color: rgba(124,92,255,.85) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

#newcomers .pc-card .pc-price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 3px !important;
  color: #6d4aff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.7px !important;
}

/* =====================================================
   NOUVEAUT�S - OVERRIDE COMPACT (gagne par ordre source)
   Neutralise le bloc "�galiseur" #new-products > .product-item
   (250x385) et le margin:auto qui espa�ait nom/�toiles/prix.
===================================================== */
#newcomers #new-products .pc-card {
  flex: 0 0 235px !important;
  width: 235px !important;
  min-width: 235px !important;
  max-width: 235px !important;
  height: 350px !important;
  min-height: 350px !important;
  max-height: 350px !important;
  padding: 14px !important;
  border-radius: 22px !important;
  justify-content: flex-start !important;
  box-shadow: 0 10px 24px rgba(124,92,255,.06) !important;
}

#newcomers #new-products .pc-card .product-image {
  height: 150px !important;
  margin: 8px 0 12px !important;
}

#newcomers #new-products .pc-card .product-image img {
  height: 142px !important;
  max-height: 142px !important;
  transition: transform .3s ease !important;
}

#newcomers #new-products .pc-card .product-details {
  justify-content: flex-start !important;
}

#newcomers #new-products .pc-card .product-title {
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 auto 7px !important;
  font-size: 15px !important;
  line-height: 1.24 !important;
}

#newcomers #new-products .pc-card .pc-rating {
  margin: 20px auto 0 !important;
}

#newcomers #new-products .pc-card .pc-buyline {
  margin-top: 14px !important;
  align-items: center !important;
}

#newcomers #new-products .pc-card .pc-buyline .product-price {
  margin: 0 !important;
}

/* =====================================================
   NOUVEAUT�S - CARROUSEL + FL�CHES (miroir best-sellers)
===================================================== */
#newcomers .newcomers-carousel {
  position: relative !important;
}

#newcomers .newcomers-carousel #new-products {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scroll-snap-type: x proximity !important;
  gap: 20px !important;
  column-gap: 20px !important;
}

#newcomers .newcomers-carousel #new-products::-webkit-scrollbar {
  display: none !important;
}

#newcomers .newcomers-carousel #new-products > .product-item {
  scroll-snap-align: start !important;
}

#newcomers .carousel-prev,
#newcomers .carousel-next {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
  border: 1.5px solid rgba(124,92,255,.22) !important;
  box-shadow:
    0 10px 36px rgba(124,92,255,.18),
    0 3px 10px rgba(124,92,255,.10),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  cursor: pointer !important;
  z-index: 50 !important;
  font-size: 0 !important;
  color: transparent !important;
  transition:
    background .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    transform .28s cubic-bezier(.34,1.56,.64,1) !important;
}

#newcomers .carousel-prev { left: 10px !important; }
#newcomers .carousel-next { right: -10px !important; }

#newcomers .carousel-prev span,
#newcomers .carousel-next span {
  display: none !important;
}

#newcomers .carousel-prev::before,
#newcomers .carousel-next::before {
  content: '' !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  background: none !important;
  transition:
    border-color .22s ease,
    transform .22s ease !important;
}

#newcomers .carousel-prev::before {
  border-left: 2px solid #7c5cff !important;
  border-bottom: 2px solid #7c5cff !important;
  transform: rotate(45deg) translateX(2px) !important;
}

#newcomers .carousel-next::before {
  border-right: 2px solid #7c5cff !important;
  border-top: 2px solid #7c5cff !important;
  transform: rotate(45deg) translateX(-2px) !important;
}

#newcomers .carousel-prev:hover,
#newcomers .carousel-next:hover {
  background: linear-gradient(135deg, #7c5cff 0%, #b44cff 100%) !important;
  border-color: transparent !important;
  box-shadow:
    0 18px 52px rgba(124,92,255,.42),
    0 6px 18px rgba(124,92,255,.28),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  transform: translateY(-50%) scale(1.10) !important;
}

#newcomers .carousel-prev:hover::before,
#newcomers .carousel-next:hover::before {
  border-color: #ffffff !important;
}

/* =====================================================
   NOUVEAUT�S - FINITIONS PREMIUM (carte showcase)
===================================================== */
/* Carte : blanc plat (identique best-sellers), liser� violet doux */
#newcomers #new-products .pc-card {
  border-radius: 26px !important;
  border: 1px solid rgba(124,92,255,.14) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(124,92,255,.055) !important;
  transition:
    box-shadow .32s ease,
    border-color .32s ease !important;
}

/* Surface du produit : fond blanc, sans pav� gris */
#newcomers #new-products .pc-card .product-image {
  position: relative !important;
  border-radius: 20px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Produit au-dessus, sans halo */
#newcomers #new-products .pc-card .product-image img {
  position: relative !important;
  z-index: 1 !important;
}

/* Badge NOUVEAU premium : pilule d�grad�e, liser� clair, ombre port�e */
#newcomers #new-products .pc-card .product-badge {
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7c5cff 0%, #b44cff 100%) !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow:
    0 8px 18px rgba(124,92,255,.34),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

/* Cour favoris : verre d�poli premium */
#newcomers #new-products .pc-card .product-wishlist {
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(124,92,255,.18) !important;
  box-shadow: 0 6px 14px rgba(124,92,255,.12) !important;
  color: #7c5cff !important;
  transition: transform .2s ease, background .2s ease, color .2s ease !important;
}

#newcomers #new-products .pc-card .product-wishlist:hover {
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

/* Survol carte : sans d�placement, ombre violette + liser� + zoom produit */
#newcomers #new-products .pc-card:hover {
  transform: none !important;
  border-color: rgba(124,92,255,.28) !important;
  box-shadow:
    0 18px 36px rgba(124,92,255,.14),
    0 6px 14px rgba(15,23,42,.05) !important;
}

#newcomers #new-products .pc-card:hover .product-image img {
  transform: scale(1.07) !important;
}

/* =====================================================
   SECTIONS DE MARQUE (Elfbar / Lost Mary / Toujours +)
   R�utilisent la carte premium "Nouveaut�s" (.pc-card)
   + carrousel horizontal + fl�ches identiques.
===================================================== */

/* Carrousel : layout horizontal d�filable */
#elfbar-showcase .brand-carousel,
#lostmary-showcase .brand-carousel,
#alwaysplus-showcase .brand-carousel {
  position: relative !important;
}

#elfbar-products,
#lostmary-products,
#alwaysplus-products {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scroll-snap-type: x proximity !important;
  gap: 20px !important;
  column-gap: 20px !important;
  background: transparent !important;
}

#elfbar-products::-webkit-scrollbar,
#lostmary-products::-webkit-scrollbar,
#alwaysplus-products::-webkit-scrollbar {
  display: none !important;
}

#elfbar-products > .product-item,
#lostmary-products > .product-item,
#alwaysplus-products > .product-item {
  scroll-snap-align: start !important;
}

/* Carte : blanc plat, taille 235x350, liser� violet doux */
#elfbar-products .pc-card,
#lostmary-products .pc-card,
#alwaysplus-products .pc-card {
  position: relative !important;
  overflow: hidden !important;
  flex: 0 0 235px !important;
  width: 235px !important;
  min-width: 235px !important;
  max-width: 235px !important;
  height: 350px !important;
  min-height: 350px !important;
  max-height: 350px !important;
  padding: 14px !important;
  border-radius: 26px !important;
  justify-content: flex-start !important;
  background: #ffffff !important;
  border: 1px solid rgba(124,92,255,.14) !important;
  box-shadow: 0 10px 24px rgba(124,92,255,.055) !important;
  transition: box-shadow .32s ease, border-color .32s ease !important;
}

#elfbar-products .pc-card:hover,
#lostmary-products .pc-card:hover,
#alwaysplus-products .pc-card:hover {
  transform: none !important;
  border-color: rgba(124,92,255,.28) !important;
  box-shadow:
    0 18px 36px rgba(124,92,255,.14),
    0 6px 14px rgba(15,23,42,.05) !important;
}

/* Image : fond blanc, sans pilule */
#elfbar-products .pc-card .product-image,
#lostmary-products .pc-card .product-image,
#alwaysplus-products .pc-card .product-image {
  position: relative !important;
  height: 150px !important;
  margin: 8px 0 12px !important;
  border-radius: 20px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#elfbar-products .pc-card .product-image img,
#lostmary-products .pc-card .product-image img,
#alwaysplus-products .pc-card .product-image img {
  position: relative !important;
  z-index: 1 !important;
  height: 142px !important;
  max-height: 142px !important;
  filter: none !important;
  transition: transform .3s ease !important;
}

#elfbar-products .pc-card:hover .product-image img,
#lostmary-products .pc-card:hover .product-image img,
#alwaysplus-products .pc-card:hover .product-image img {
  transform: scale(1.07) !important;
}

#elfbar-products .pc-card .product-details,
#lostmary-products .pc-card .product-details,
#alwaysplus-products .pc-card .product-details {
  justify-content: flex-start !important;
}

/* Titre */
#elfbar-products .pc-card .product-title,
#lostmary-products .pc-card .product-title,
#alwaysplus-products .pc-card .product-title {
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 auto 7px !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.24 !important;
  font-weight: 900 !important;
  color: #071126 !important;
  text-align: center !important;
}

/* Notation : �toiles 22px sans pilule */
#elfbar-products .pc-card .pc-rating,
#lostmary-products .pc-card .pc-rating,
#alwaysplus-products .pc-card .pc-rating {
  width: auto !important;
  margin: 20px auto 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#elfbar-products .pc-card .pc-rating .stars,
#lostmary-products .pc-card .pc-rating .stars,
#alwaysplus-products .pc-card .pc-rating .stars {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

#elfbar-products .pc-card .pc-rating .stars i,
#lostmary-products .pc-card .pc-rating .stars i,
#alwaysplus-products .pc-card .pc-rating .stars i {
  font-size: 22px !important;
  filter: none !important;
}

#elfbar-products .pc-card .pc-rating .reviews,
#lostmary-products .pc-card .pc-rating .reviews,
#alwaysplus-products .pc-card .pc-rating .reviews {
  color: #6b7280 !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Ligne prix + bouton panier */
#elfbar-products .pc-card .pc-buyline,
#lostmary-products .pc-card .pc-buyline,
#alwaysplus-products .pc-card .pc-buyline {
  width: 100% !important;
  margin-top: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

#elfbar-products .pc-card .pc-buyline .product-price,
#lostmary-products .pc-card .pc-buyline .product-price,
#alwaysplus-products .pc-card .pc-buyline .product-price {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  color: #6d4aff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.7px !important;
  text-align: left !important;
}

#elfbar-products .pc-card .pc-buyline .add-cart-round,
#elfbar-products .pc-card .pc-buyline .pc-cart-trigger,
#lostmary-products .pc-card .pc-buyline .add-cart-round,
#lostmary-products .pc-card .pc-buyline .pc-cart-trigger,
#alwaysplus-products .pc-card .pc-buyline .add-cart-round,
#alwaysplus-products .pc-card .pc-buyline .pc-cart-trigger {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px rgba(124,92,255,.28) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

#elfbar-products .pc-card .pc-buyline .pc-cart-trigger:hover,
#lostmary-products .pc-card .pc-buyline .pc-cart-trigger:hover,
#alwaysplus-products .pc-card .pc-buyline .pc-cart-trigger:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 30px rgba(124,92,255,.34) !important;
}

/* Badge premium */
#elfbar-products .pc-card .product-badge,
#lostmary-products .pc-card .product-badge,
#alwaysplus-products .pc-card .product-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7c5cff 0%, #b44cff 100%) !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow:
    0 8px 18px rgba(124,92,255,.34),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

/* Cour favoris : verre d�poli premium */
#elfbar-products .pc-card .product-wishlist,
#lostmary-products .pc-card .product-wishlist,
#alwaysplus-products .pc-card .product-wishlist {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 28px !important;
  height: 28px !important;
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(124,92,255,.18) !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 14px rgba(124,92,255,.12) !important;
  color: #7c5cff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .2s ease, background .2s ease, color .2s ease !important;
}

#elfbar-products .pc-card .product-wishlist:hover,
#lostmary-products .pc-card .product-wishlist:hover,
#alwaysplus-products .pc-card .product-wishlist:hover {
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

/* Surcouche (overlay) */
#elfbar-products .pc-card .pc-overlay,
#lostmary-products .pc-card .pc-overlay,
#alwaysplus-products .pc-card .pc-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: linear-gradient(160deg, rgba(255,255,255,.97), rgba(247,242,255,.98)) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
}

#elfbar-products .pc-card.pc-open .pc-overlay,
#lostmary-products .pc-card.pc-open .pc-overlay,
#alwaysplus-products .pc-card.pc-open .pc-overlay {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#elfbar-products .pc-card .pc-overlay-inner,
#lostmary-products .pc-card .pc-overlay-inner,
#alwaysplus-products .pc-card .pc-overlay-inner {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 9px !important;
}

#elfbar-products .pc-card .pc-flavor,
#lostmary-products .pc-card .pc-flavor,
#alwaysplus-products .pc-card .pc-flavor {
  width: 100% !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(124,92,255,.28) !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

#elfbar-products .pc-card .pc-qty,
#lostmary-products .pc-card .pc-qty,
#alwaysplus-products .pc-card .pc-qty {
  align-self: stretch !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid rgba(124,92,255,.28) !important;
  box-shadow: none !important;
}

#elfbar-products .pc-card .pc-qty-btn,
#lostmary-products .pc-card .pc-qty-btn,
#alwaysplus-products .pc-card .pc-qty-btn {
  border: 0 !important;
  background: transparent !important;
  color: #7c5cff !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#elfbar-products .pc-card .pc-qty-val,
#lostmary-products .pc-card .pc-qty-val,
#alwaysplus-products .pc-card .pc-qty-val {
  min-width: 22px !important;
  text-align: center !important;
  color: #071126 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

#elfbar-products .pc-card .pc-name,
#lostmary-products .pc-card .pc-name,
#alwaysplus-products .pc-card .pc-name {
  text-align: center !important;
  color: #071126 !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  display: block !important;
  overflow: visible !important;
  min-height: 33px !important;
  white-space: normal !important;
}

#elfbar-products .pc-card .pc-add,
#lostmary-products .pc-card .pc-add,
#alwaysplus-products .pc-card .pc-add {
  width: 100% !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #ffffff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 12px 24px rgba(124,92,255,.26) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

#elfbar-products .pc-card .pc-add:hover,
#lostmary-products .pc-card .pc-add:hover,
#alwaysplus-products .pc-card .pc-add:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 32px rgba(124,92,255,.34) !important;
}

#elfbar-products .pc-card .pc-detail,
#lostmary-products .pc-card .pc-detail,
#alwaysplus-products .pc-card .pc-detail {
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1.6px solid rgba(124,92,255,.55) !important;
  background: rgba(124,92,255,.07) !important;
  color: #6d4aff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}

#elfbar-products .pc-card .pc-detail:hover,
#lostmary-products .pc-card .pc-detail:hover,
#alwaysplus-products .pc-card .pc-detail:hover {
  background: rgba(124,92,255,.14) !important;
  border-color: rgba(124,92,255,.85) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

#elfbar-products .pc-card .pc-price,
#lostmary-products .pc-card .pc-price,
#alwaysplus-products .pc-card .pc-price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 3px !important;
  color: #6d4aff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.7px !important;
}

/* Fl�ches de navigation (mirroir best-sellers, 40px) */
#elfbar-showcase .carousel-prev,
#elfbar-showcase .carousel-next,
#lostmary-showcase .carousel-prev,
#lostmary-showcase .carousel-next,
#alwaysplus-showcase .carousel-prev,
#alwaysplus-showcase .carousel-next {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
  border: 1.5px solid rgba(124,92,255,.22) !important;
  box-shadow:
    0 10px 36px rgba(124,92,255,.18),
    0 3px 10px rgba(124,92,255,.10),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  cursor: pointer !important;
  z-index: 50 !important;
  font-size: 0 !important;
  color: transparent !important;
  transition:
    background .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    transform .28s cubic-bezier(.34,1.56,.64,1) !important;
}

#elfbar-showcase .carousel-prev,
#lostmary-showcase .carousel-prev,
#alwaysplus-showcase .carousel-prev { left: 10px !important; }
#elfbar-showcase .carousel-next,
#lostmary-showcase .carousel-next,
#alwaysplus-showcase .carousel-next { right: -10px !important; }

#elfbar-showcase .carousel-prev span,
#elfbar-showcase .carousel-next span,
#lostmary-showcase .carousel-prev span,
#lostmary-showcase .carousel-next span,
#alwaysplus-showcase .carousel-prev span,
#alwaysplus-showcase .carousel-next span {
  display: none !important;
}

#elfbar-showcase .carousel-prev::before,
#elfbar-showcase .carousel-next::before,
#lostmary-showcase .carousel-prev::before,
#lostmary-showcase .carousel-next::before,
#alwaysplus-showcase .carousel-prev::before,
#alwaysplus-showcase .carousel-next::before {
  content: '' !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  background: none !important;
  transition: border-color .22s ease, transform .22s ease !important;
}

#elfbar-showcase .carousel-prev::before,
#lostmary-showcase .carousel-prev::before,
#alwaysplus-showcase .carousel-prev::before {
  border-left: 2px solid #7c5cff !important;
  border-bottom: 2px solid #7c5cff !important;
  transform: rotate(45deg) translateX(2px) !important;
}

#elfbar-showcase .carousel-next::before,
#lostmary-showcase .carousel-next::before,
#alwaysplus-showcase .carousel-next::before {
  border-right: 2px solid #7c5cff !important;
  border-top: 2px solid #7c5cff !important;
  transform: rotate(45deg) translateX(-2px) !important;
}

#elfbar-showcase .carousel-prev:hover,
#elfbar-showcase .carousel-next:hover,
#lostmary-showcase .carousel-prev:hover,
#lostmary-showcase .carousel-next:hover,
#alwaysplus-showcase .carousel-prev:hover,
#alwaysplus-showcase .carousel-next:hover {
  background: linear-gradient(135deg, #7c5cff 0%, #b44cff 100%) !important;
  border-color: transparent !important;
  box-shadow:
    0 18px 52px rgba(124,92,255,.42),
    0 6px 18px rgba(124,92,255,.28),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  transform: translateY(-50%) scale(1.10) !important;
}

#elfbar-showcase .carousel-prev:hover::before,
#elfbar-showcase .carousel-next:hover::before,
#lostmary-showcase .carousel-prev:hover::before,
#lostmary-showcase .carousel-next:hover::before,
#alwaysplus-showcase .carousel-prev:hover::before,
#alwaysplus-showcase .carousel-next:hover::before {
  border-color: #ffffff !important;
}

/* =========================================
   RUBAN DIAGONAL DE MARQUE (coin haut-gauche)
   Remplace les pastilles Top Vente / Nouveau
   sur les cartes Elfbar / Lost Mary / Toujours +.
   Compact : reste dans le coin, ne masque pas le produit.
========================================= */
#new-products .pc-card .pc-ribbon,
#featured-products .pc-card .pc-ribbon,
#elfbar-products .pc-card .pc-ribbon,
#lostmary-products .pc-card .pc-ribbon,
#alwaysplus-products .pc-card .pc-ribbon {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 104px !important;
  height: 104px !important;
  overflow: hidden !important;
  border-top-left-radius: 26px !important;
  pointer-events: none !important;
  z-index: 7 !important;
}

#new-products .pc-card .pc-ribbon-text,
#featured-products .pc-card .pc-ribbon-text,
#elfbar-products .pc-card .pc-ribbon-text,
#lostmary-products .pc-card .pc-ribbon-text,
#alwaysplus-products .pc-card .pc-ribbon-text {
  position: absolute !important;
  left: -52px !important;
  top: 20px !important;
  width: 180px !important;
  padding: 5px 0 !important;
  display: block !important;
  transform: rotate(-45deg) !important;
  background: linear-gradient(135deg, #7c5cff 0%, #b44cff 100%) !important;
  color: #ffffff !important;
  text-align: center !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow:
    0 6px 14px rgba(124,92,255,.32),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
}

/* Nouveaut�s : ruban "Nouveau" en vert �meraude (diff�rent du mauve) */
#new-products .pc-card .pc-ribbon-text {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow:
    0 6px 14px rgba(16,185,129,.34),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
}

/* Best-sellers : ruban "Top vente" en or/ambre (diff�rent du mauve et du vert) */
#featured-products .pc-card .pc-ribbon-text {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  box-shadow:
    0 6px 14px rgba(217,119,6,.36),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

/* =====================================================
   BEST-SELLERS (#featured-products) - carte premium pc-card
   R�utilise exactement le design "Nouveaut�s".
   Scoping 2 IDs (#best-sellers #featured-products .pc-card)
   pour battre les anciennes r�gles best-sellers (2 IDs).
===================================================== */

/* Carte : blanc plat, 235x350, liser� violet doux */
#best-sellers #featured-products .pc-card {
  position: relative !important;
  overflow: hidden !important;
  flex: 0 0 235px !important;
  width: 235px !important;
  min-width: 235px !important;
  max-width: 235px !important;
  height: 350px !important;
  min-height: 350px !important;
  max-height: 350px !important;
  padding: 14px !important;
  border-radius: 26px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  background: #ffffff !important;
  border: 1px solid rgba(124,92,255,.14) !important;
  box-shadow: 0 10px 24px rgba(124,92,255,.055) !important;
  transition: box-shadow .32s ease, border-color .32s ease !important;
}

#best-sellers #featured-products .pc-card:hover {
  transform: none !important;
  border-color: rgba(124,92,255,.28) !important;
  box-shadow:
    0 18px 36px rgba(124,92,255,.14),
    0 6px 14px rgba(15,23,42,.05) !important;
}

/* Image : fond blanc, sans pilule */
#best-sellers #featured-products .pc-card .product-image {
  position: relative !important;
  height: 150px !important;
  margin: 8px 0 12px !important;
  border-radius: 20px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#best-sellers #featured-products .pc-card .product-image img {
  position: relative !important;
  z-index: 1 !important;
  width: auto !important;
  height: 142px !important;
  max-height: 142px !important;
  filter: none !important;
  transition: transform .3s ease !important;
}

#best-sellers #featured-products .pc-card:hover .product-image img {
  transform: scale(1.07) !important;
}

#best-sellers #featured-products .pc-card .product-details {
  justify-content: flex-start !important;
}

/* Titre */
#best-sellers #featured-products .pc-card .product-title {
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 auto 7px !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.24 !important;
  font-weight: 900 !important;
  color: #071126 !important;
  text-align: center !important;
}

/* Notation : �toiles 22px sans pilule */
#best-sellers #featured-products .pc-card .pc-rating {
  width: auto !important;
  margin: 20px auto 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#best-sellers #featured-products .pc-card .pc-rating .stars {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

#best-sellers #featured-products .pc-card .pc-rating .stars i {
  font-size: 22px !important;
  filter: none !important;
}

#best-sellers #featured-products .pc-card .pc-rating .reviews {
  color: #6b7280 !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Ligne prix + bouton panier */
#best-sellers #featured-products .pc-card .pc-buyline {
  width: 100% !important;
  margin-top: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

#best-sellers #featured-products .pc-card .pc-buyline .product-price {
  margin: 8px 0 12px 0 !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 26px 0 14px !important;
  color: #6d4aff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.7px !important;
  text-align: left !important;
}

#best-sellers #featured-products .pc-card .pc-buyline .add-cart-round,
#best-sellers #featured-products .pc-card .pc-buyline .pc-cart-trigger {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px rgba(124,92,255,.28) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

#best-sellers #featured-products .pc-card .pc-buyline .pc-cart-trigger:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 30px rgba(124,92,255,.34) !important;
}

/* Cour favoris : verre d�poli premium */
#best-sellers #featured-products .pc-card .product-wishlist {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 28px !important;
  height: 28px !important;
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(124,92,255,.18) !important;
  border-radius: 50% !important;
  box-shadow: 0 6px 14px rgba(124,92,255,.12) !important;
  color: #7c5cff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .2s ease, background .2s ease, color .2s ease !important;
}

#best-sellers #featured-products .pc-card .product-wishlist:hover {
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

/* Surcouche (overlay) */
#best-sellers #featured-products .pc-card .pc-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: linear-gradient(160deg, rgba(255,255,255,.97), rgba(247,242,255,.98)) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
}

#best-sellers #featured-products .pc-card.pc-open .pc-overlay {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#best-sellers #featured-products .pc-card .pc-overlay-inner {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 9px !important;
}

#best-sellers #featured-products .pc-card .pc-qty {
  align-self: stretch !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid rgba(124,92,255,.28) !important;
  box-shadow: none !important;
}

#best-sellers #featured-products .pc-card .pc-qty-btn {
  border: 0 !important;
  background: transparent !important;
  color: #7c5cff !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#best-sellers #featured-products .pc-card .pc-qty-val {
  min-width: 22px !important;
  text-align: center !important;
  color: #071126 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

#best-sellers #featured-products .pc-card .pc-name {
  text-align: center !important;
  color: #071126 !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  display: block !important;
  overflow: visible !important;
  min-height: 33px !important;
  white-space: normal !important;
}

#best-sellers #featured-products .pc-card .pc-add {
  width: 100% !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #7c5cff, #b44cff) !important;
  color: #ffffff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 12px 24px rgba(124,92,255,.26) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

#best-sellers #featured-products .pc-card .pc-add:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 32px rgba(124,92,255,.34) !important;
}

#best-sellers #featured-products .pc-card .pc-detail {
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1.6px solid rgba(124,92,255,.55) !important;
  background: rgba(124,92,255,.07) !important;
  color: #6d4aff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}

#best-sellers #featured-products .pc-card .pc-detail:hover {
  background: rgba(124,92,255,.14) !important;
  border-color: rgba(124,92,255,.85) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

#best-sellers #featured-products .pc-card .pc-price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 3px !important;
  color: #6d4aff !important;
  font-family: "Outfit", Inter, Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.7px !important;
}

/* =====================================================
   POPUP CROSS-SELL "Vous aimeriez peut-�tre :"
   S'ouvre apr�s "Ajouter au panier" depuis la surcouche.
===================================================== */
.suggest-modal {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
}
.suggest-modal[hidden] { display: none; }

.suggest-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 48, .56);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .24s ease;
}
.suggest-modal.is-open .suggest-modal-overlay { opacity: 1; }

.suggest-modal-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: min(90vh, 760px);
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
  border: 1px solid rgba(124, 92, 255, .14);
  border-radius: 26px;
  box-shadow: 0 40px 100px rgba(20, 12, 50, .42);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity .26s ease, transform .26s cubic-bezier(.34,1.56,.64,1);
}
.suggest-modal.is-open .suggest-modal-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.suggest-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #f4efff;
  color: #6f45ff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, transform .22s ease;
}
.suggest-modal-close:hover { background: #e6dbff; transform: rotate(90deg); }

.suggest-modal-confirm {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: center;
  padding: 7px 16px 7px 9px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: rgba(16, 185, 129, .10);
  color: #059669;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
}
.suggest-modal-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: 12px;
  box-shadow: 0 4px 10px rgba(16,185,129,.34);
}

.suggest-modal-title {
  margin: 0 0 18px;
  text-align: center;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 950;
  letter-spacing: -.5px;
  color: #0b1020;
}

.suggest-carousel { position: relative; flex: 0 0 auto; }

/* Fl�ches du carrousel popup - identiques � #newcomers (40px, chevron) */
.suggest-carousel .suggest-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
  border: 1.5px solid rgba(124,92,255,.22) !important;
  box-shadow:
    0 10px 36px rgba(124,92,255,.18),
    0 3px 10px rgba(124,92,255,.10),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  cursor: pointer !important;
  z-index: 50 !important;
  font-size: 0 !important;
  color: transparent !important;
  transition:
    background .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    transform .28s cubic-bezier(.34,1.56,.64,1) !important;
}
.suggest-carousel .suggest-prev { left: -14px !important; }
.suggest-carousel .suggest-next { right: -14px !important; }

.suggest-carousel .suggest-nav span { display: none !important; }

.suggest-carousel .suggest-nav::before {
  content: '' !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  background: none !important;
  transition: border-color .22s ease, transform .22s ease !important;
}
.suggest-carousel .suggest-prev::before {
  border-left: 2px solid #7c5cff !important;
  border-bottom: 2px solid #7c5cff !important;
  transform: rotate(45deg) translateX(2px) !important;
}
.suggest-carousel .suggest-next::before {
  border-right: 2px solid #7c5cff !important;
  border-top: 2px solid #7c5cff !important;
  transform: rotate(45deg) translateX(-2px) !important;
}
.suggest-carousel .suggest-nav:hover {
  background: linear-gradient(135deg, #7c5cff 0%, #b44cff 100%) !important;
  border-color: transparent !important;
  box-shadow:
    0 18px 52px rgba(124,92,255,.42),
    0 6px 18px rgba(124,92,255,.28),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  transform: translateY(-50%) scale(1.10) !important;
}
.suggest-carousel .suggest-nav:hover::before { border-color: #ffffff !important; }

.suggest-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px 6px;
}
.suggest-track::-webkit-scrollbar { display: none; }

.suggest-card {
  flex: 0 0 calc((100% - 2 * 16px) / 3);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 14px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(124,92,255,.14);
  box-shadow: 0 8px 20px rgba(124,92,255,.06);
  cursor: pointer;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.suggest-card:hover {
  border-color: rgba(124,92,255,.30);
  box-shadow: 0 16px 30px rgba(124,92,255,.14);
  transform: translateY(-2px);
}

.suggest-card-img {
  height: 110px;
  margin-bottom: 10px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.suggest-card-img img {
  height: 104px;
  max-height: 104px;
  width: auto;
  object-fit: contain;
  transition: transform .3s ease;
}
.suggest-card:hover .suggest-card-img img { transform: scale(1.06); }

.suggest-card-name {
  margin: 0 0 6px;
  min-height: 34px;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.22;
  color: #071126;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.suggest-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  margin-bottom: 10px;
}
.suggest-card-rating .star-full { color: #f5a623; }
.suggest-card-rating .star-half { color: #f5a623; }
.suggest-card-rating .star-empty { color: #d8dae0; }

.suggest-card-bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.suggest-card-price {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: #6d4aff;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-weight: 950;
  letter-spacing: -.4px;
}
.suggest-card-amount { font-size: 17px; }
.suggest-card-cur { font-size: 12px; font-weight: 900; }

.suggest-card-add {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c5cff, #b44cff);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(124,92,255,.28);
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.suggest-card-add:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(124,92,255,.34); }
.suggest-card-add.is-added { background: linear-gradient(135deg, #10b981, #059669); }

.suggest-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 16px 0 4px;
}
.suggest-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1.5px solid rgba(124,92,255,.55);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.suggest-dot.is-active {
  background: #ffffff;
  border-color: #7c5cff;
  transform: scale(1.18);
  box-shadow: 0 0 0 3px rgba(124,92,255,.18);
}

.suggest-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.suggest-btn {
  flex: 1 1 0;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease, border-color .2s ease;
}
.suggest-btn-ghost {
  border: 1.6px solid rgba(124,92,255,.45);
  background: rgba(124,92,255,.06);
  color: #6d4aff;
}
.suggest-btn-ghost:hover {
  background: rgba(124,92,255,.12);
  border-color: rgba(124,92,255,.75);
  transform: translateY(-1px);
}
.suggest-btn-primary {
  border: 0;
  background: linear-gradient(135deg, #7c5cff, #b44cff);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(124,92,255,.30);
}
.suggest-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(124,92,255,.38);
}

@media (max-width: 640px) {
  .suggest-modal-panel { padding: 26px 18px 20px; border-radius: 22px; }
  .suggest-card { flex: 0 0 calc((100% - 16px) / 2); }
  .suggest-actions { flex-direction: column-reverse; }
}

/* Curseur "main" au survol des cartes produit (toutes sections accueil) */
#featured-products .pc-card,
#new-products .pc-card,
#elfbar-products .pc-card,
#lostmary-products .pc-card,
#alwaysplus-products .pc-card {
  cursor: pointer;
}

/* ============================================================
   RESPONSIVE HEADER + MOBILE NAV (hamburger)
   Le header est dupliqu� sur chaque page sans menu mobile ; la nav
   inline et les actions d�bordaient/coupaient sous ~1235px. On masque
   la nav inline et on affiche un hamburger + drawer (inject�s via JS)
   pour garder le compte/langue/panier toujours accessibles.
   ============================================================ */

/* Bouton hamburger - masqu� sur desktop, affich� <=1080px. */
.mobile-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  margin-right: 4px;
  border: 1px solid rgba(124, 92, 255, 0.18);
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff, #f7f2ff);
  box-shadow: 0 6px 18px rgba(124, 92, 255, 0.10);
  cursor: pointer;
  z-index: 5;
}

/* Recherche d�roulante dans la barre mobile - masqu�e sur desktop. */
.mobile-search {
  display: none;
  position: relative;
  align-items: center;
  z-index: 20;
}

.mobile-search-trigger {
  display: inline-flex;
  position: relative;
  z-index: 2;
}

.mobile-search-input {
  position: absolute;
  right: 46px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  max-width: calc(100vw - 120px);
  height: 40px;
  padding: 0;
  border: 1px solid rgba(124, 92, 255, 0.22);
  border-radius: 12px;
  background: #fff;
  color: #2b2150;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(124, 92, 255, 0.16);
  transition: width 0.28s ease, opacity 0.2s ease, padding 0.28s ease;
  box-sizing: border-box;
}

.mobile-search.is-open .mobile-search-input {
  width: 175px;
  padding: 0 14px;
  opacity: 1;
  pointer-events: auto;
}

/* Loupe ouverte : on masque le logo et le burger pour laisser le champ
   de recherche s'�tendre par-dessus, sans d�caler les ic�nes de droite. */
body.mobile-search-open .main-header .logo,
body.mobile-search-open .main-header .mobile-nav-toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Feedback mauve UNIQUEMENT quand la recherche est ouverte (.is-open). */
.mobile-search.is-open .mobile-search-trigger,
.mobile-search.is-open .mobile-search-trigger:hover,
.mobile-search.is-open .mobile-search-trigger:focus,
.mobile-search.is-open .mobile-search-trigger:active {
  color: #ffffff;
  background: linear-gradient(135deg, #7c5cff, #b44cff);
  box-shadow: 0 16px 38px rgba(124, 92, 255, 0.22);
}

/* Ferm�e : l'ic�ne garde sa couleur initiale m�me si le :hover/:focus reste
   � coll� � apr�s le tap (mobile) ou en mode responsive desktop. */
.mobile-search:not(.is-open) .mobile-search-trigger,
.mobile-search:not(.is-open) .mobile-search-trigger:hover,
.mobile-search:not(.is-open) .mobile-search-trigger:focus,
.mobile-search:not(.is-open) .mobile-search-trigger:active {
  color: #6d4aff;
  background: linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(247, 242, 255, .96));
  box-shadow: 0 14px 34px rgba(124, 92, 255, .05), inset 0 1px 0 rgba(255, 255, 255, .95);
  transform: none;
}

.mobile-search-input::placeholder {
  color: #9a91bd;
}

.mobile-nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #4c3da8;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.mobile-nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.mobile-nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Backdrop + drawer */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 45, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 10000;
}
.mobile-nav-backdrop.is-visible {
  opacity: 1;
  pointer-events: all;
}

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 320px;
  max-width: 86vw;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #ffffff 0%, #f7f3ff 100%);
  border-right: 1px solid rgba(124, 92, 255, 0.14);
  box-shadow: 18px 0 50px rgba(60, 40, 120, 0.18);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10001;
  overflow-y: auto;
}
.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(124, 92, 255, 0.12);
}
.mobile-nav-title {
  font-size: 18px;
  font-weight: 900;
  color: #1f1a3a;
  letter-spacing: 0.02em;
}
.mobile-nav-close {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(124, 92, 255, 0.16);
  border-radius: 11px;
  background: #fff;
  color: #4c3da8;
  cursor: pointer;
  transition: 0.2s ease;
}
.mobile-nav-close:hover {
  background: #f4f0ff;
  border-color: #c5b8ff;
}

.mobile-nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 20px 8px;
  padding: 0 6px 0 14px;
  height: 46px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid rgba(124, 92, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.mobile-nav-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: #1f1a3a;
}
.mobile-nav-search input::placeholder {
  color: #9ca3af;
}
.mobile-nav-search button {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #7c5cff, #b44cff);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  padding: 8px 14px 24px;
  gap: 2px;
}
.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  border-radius: 12px;
  color: #2a2350;
  font-size: 15.5px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.mobile-nav-link:hover,
.mobile-nav-link:active {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.10), rgba(180, 76, 255, 0.10));
  color: #6d28d9;
}

/* ---- Bascule desktop -> mobile (<=1080px) ---- */
@media (max-width: 1220px) {
  .mobile-nav-toggle {
    display: inline-flex;
  }
  .mobile-search {
    display: inline-flex;
  }
  .main-header .nav-menu {
    display: none !important;
  }
  /* La recherche bascule dans le drawer : on masque le champ inline. */
  .main-header .search-box,
  .main-header .search-bar {
    display: none !important;
  }
  /* Le logo reste compact pour laisser la place aux actions. */
  .main-header .logo img,
  .main-header .brand-logo img {
    width: 168px;
    max-width: 168px;
  }
  .header-actions {
    gap: 8px;
  }
}

/* Sur petit �cran, le lien "Compte" (invit�) passe en ic�ne seule pour
   lib�rer de la place et �viter le d�bordement des actions. */
@media (max-width: 560px) {
  .header-actions .account-link:not(.is-authenticated) {
    min-width: 40px !important;
    width: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .header-actions .account-link:not(.is-authenticated) span {
    display: none !important;
  }
  /* FAQ accessible via le drawer mobile : on retire l'ic�ne du header. */
  .header-actions .faq-link {
    display: none !important;
  }
  /* Header compact : on resserre paddings, gaps et tailles pour tenir
     sur les plus petits t�l�phones (~360px) sans d�bordement. */
  .main-header {
    padding: 0 10px !important;
    gap: 8px !important;
  }
  .header-actions {
    gap: 4px !important;
  }
  .header-actions .header-icon,
  .header-actions .account-link,
  .header-actions .lang-trigger {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Liens secondaires (FAQ / � propos / Contact) dans le drawer mobile :
   visuellement plus discrets que les liens principaux. */
.mobile-nav-links .mobile-nav-link-secondary {
  font-size: 14px;
  font-weight: 700;
  color: #6b6390;
}
.mobile-nav-links .mobile-nav-link-secondary:first-of-type {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(124, 92, 255, 0.12);
  border-radius: 0 0 12px 12px;
}

@media (max-width: 420px) {
  .main-header .logo img,
  .main-header .brand-logo img {
    width: 124px;
    max-width: 124px;
  }
  .mobile-nav-toggle {
    width: 38px;
    height: 38px;
  }
  .header-actions {
    gap: 3px !important;
  }
  .header-actions .header-icon,
  .header-actions .account-link,
  .header-actions .lang-trigger {
    width: 38px !important;
    height: 38px !important;
  }
}

/* ============================================================
   CORRECTIFS D�BORDEMENT MOBILE (accueil & global)
   Emp�che le scroll horizontal sur petits �crans : les grilles � 2
   colonnes passent en 1 colonne fluide (minmax(0,1fr) pour autoriser
   le r�tr�cissement sous la largeur de contenu) et les enfants peuvent
   r�duire (min-width:0).
   ============================================================ */
@media (max-width: 900px) {
  .newsletter-wrapper {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .newsletter-content,
  .newsletter-form-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .newsletter-features {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   CORRECTIFS MOBILE PREMIUM (? 640px) - accueil & global
   Top-bar d�filante avec fondu, pastilles banni�re qui se replient,
   et suppression des derniers d�bords lat�raux (weekly-offer, trust-bar).
   ============================================================ */
@media (max-width: 640px) {
  /* Newsletter (bas de page) : le widget Turnstile a une largeur fixe qui
     debordait du cadre du formulaire sur mobile. On reduit le padding lateral
     du cadre, on centre le widget et on interdit tout debord horizontal. */
  .newsletter-form-wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #newsletter-turnstile {
    display: flex !important;
    justify-content: center !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  #newsletter-turnstile iframe {
    max-width: 100% !important;
  }
  /* Bandeau d'infos : on n'affiche que 2 mentions cl�s (18+ et livraison
     gratuite) sur une seule ligne centr�e - les autres sont reprises dans la
     trust-bar juste en dessous. Plus de d�filement horizontal. */
  .top-bar {
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 6px !important;
    overflow: hidden !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .top-bar > span {
    flex: 0 0 auto !important;
    font-size: 9px !important;
    letter-spacing: 0 !important;
  }
  /* Le <span> de texte interne a sa propre taille (11px) et l'icone <i> fait
     18px : on les reduit pour que les 2 mentions tiennent des 320px. */
  .top-bar > span > span[data-i18n] {
    font-size: 9px !important;
  }
  .top-bar > span > i {
    font-size: 13px !important;
  }
  /* Combinateur enfant direct (>) : sans lui, ce nth-child masquait aussi les
     <span> de texte internes (2e enfant apres l'icone <i>), ne laissant que les
     icones. On garde les 2 mentions livraison (4 et 5) et on masque le reste. */
  .top-bar > span:nth-child(1),
  .top-bar > span:nth-child(2),
  .top-bar > span:nth-child(3) {
    display: none !important;
  }

  /* Carte banni�re : padding resserr� + pastilles qui se replient au lieu
     de d�border. */
  .banner-content-grid {
    padding: 18px !important;
    gap: 18px !important;
  }
  .banner-promo .banner-text .banner-pills {
    flex-wrap: wrap !important;
    gap: 16px 22px !important;
  }
  .banner-promo .banner-text .banner-pills li {
    flex: 0 0 auto !important;
  }

  /* Derniers d�bords lat�raux : on contraint la largeur des blocs au cadre. */
  .weekly-offer-side,
  .weekly-offer-shell,
  .weekly-offer-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .trust-bar {
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===== NEWSLETTER POP-UP (global, double opt-in) ===== */
.nl-pop-overlay {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 12, 34, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.nl-pop-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.nl-pop {
  position: relative;
  width: 100%;
  max-width: 430px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(124, 58, 237, .08), transparent 60%),
    #ffffff;
  border: 1px solid rgba(124, 58, 237, .12);
  border-radius: 26px;
  padding: 46px 36px 30px;
  text-align: center;
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .6) inset,
    0 40px 90px -20px rgba(46, 16, 101, .45);
  transform: translateY(22px) scale(.96);
  opacity: 0;
  transition: transform .45s cubic-bezier(.16, .84, .3, 1), opacity .35s ease;
}
.nl-pop-overlay.is-open .nl-pop {
  transform: translateY(0) scale(1);
  opacity: 1;
}
/* Thin premium accent bar across the top */
.nl-pop-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #5b21b6, #7c3aed 45%, #c9a24a);
}
.nl-pop-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(124, 58, 237, .07);
  color: #6d28d9;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nl-pop-close:hover {
  background: rgba(124, 58, 237, .14);
  color: #4c1d95;
  transform: rotate(90deg);
}
/* Circular gradient medallion holding the SVG icon */
.nl-pop-medallion {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(145deg, #7c3aed, #5b21b6);
  box-shadow:
    0 0 0 6px rgba(124, 58, 237, .08),
    0 14px 28px -8px rgba(91, 33, 182, .55);
}
.nl-pop-medallion svg {
  width: 36px;
  height: 36px;
}
.nl-pop-medallion--success {
  background: linear-gradient(145deg, #16a34a, #15803d);
  box-shadow:
    0 0 0 6px rgba(22, 163, 74, .08),
    0 14px 28px -8px rgba(21, 128, 61, .5);
}
.nl-pop-badge {
  display: inline-block;
  background: rgba(201, 162, 74, .14);
  color: #9a7521;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}
/* Premium offer block: gradient discount + refined points line */
.nl-pop-offer {
  margin: 0 0 14px;
  line-height: 1;
}
.nl-pop-offer-discount {
  display: block;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(120deg, #6d28d9, #7c3aed 55%, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #6d28d9;
}
.nl-pop-offer-points {
  display: inline-block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #1f1535;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(124, 58, 237, .06);
}
.nl-pop-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #1f1535;
  margin: 0 0 10px;
  line-height: 1.2;
}
.nl-pop-text {
  font-size: 14.5px;
  color: #645c79;
  line-height: 1.6;
  margin: 0 auto 22px;
  max-width: 320px;
}
.nl-pop-form {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.nl-pop-input {
  width: 100%;
  border: 1.5px solid #e7e2f1;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  color: #1f1535;
  background: #faf9fd;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.nl-pop-input::placeholder {
  color: #a39db5;
}
.nl-pop-input:focus {
  outline: none;
  background: #ffffff;
  border-color: #7c3aed;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .14);
}
.nl-pop-submit {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  cursor: pointer;
  box-shadow: 0 12px 24px -10px rgba(91, 33, 182, .7);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.nl-pop-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -10px rgba(91, 33, 182, .75);
}
.nl-pop-submit:disabled {
  opacity: .6;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.nl-pop-done {
  margin-top: 20px;
}
.nl-pop-msg {
  font-size: 13.5px;
  font-weight: 600;
  margin: 12px 0 0;
}
.nl-pop-note {
  font-size: 11px;
  color: #a39db5;
  line-height: 1.5;
  margin: 18px auto 0;
  max-width: 300px;
}
@media (max-width: 480px) {
  .nl-pop {
    padding: 40px 24px 26px;
    border-radius: 22px;
  }
  .nl-pop-offer-discount {
    font-size: 48px;
  }
  .nl-pop-title {
    font-size: 23px;
  }
}


/* ===================== FAQ PAGE (accordeon) ===================== */
.faq-page .page-header {
  padding-top: 30px;
  padding-bottom: 8px;
}
.faq-hero h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -0.9px;
  line-height: 1.15;
  background: linear-gradient(120deg, var(--puffs-purple) 0%, #9d5cff 45%, #b44cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--puffs-purple);
}
.faq-page .page-header p {
  max-width: 600px;
  color: #6b6488;
  font-size: 16.5px;
  line-height: 1.6;
  margin-top: 12px;
}

/* ---- Layout 2 colonnes : sommaire sticky + contenu ---- */
.faq-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 56px;
  align-items: start;
}

/* ---- Sommaire lateral ---- */
.faq-sidebar {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.faq-nav-label {
  margin: 0 0 6px;
  padding-left: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--puffs-muted);
}
.faq-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.faq-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: #4b5563;
  text-decoration: none;
  border: 1px solid transparent;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.faq-nav a i {
  font-size: 15px;
  width: 20px;
  text-align: center;
  color: var(--puffs-purple);
  opacity: .85;
  transition: opacity .18s ease;
}
.faq-nav a:hover {
  color: var(--puffs-ink);
  background: rgba(124, 92, 255, .06);
}
.faq-nav a.is-active {
  color: var(--puffs-purple-dark);
  background: rgba(124, 92, 255, .09);
  border-color: var(--puffs-border);
}
.faq-nav a.is-active i { opacity: 1; }

/* ---- Contenu ---- */
.faq-content {
  display: flex;
  flex-direction: column;
  gap: 46px;
  min-width: 0;
}
.faq-category {
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-margin-top: 104px;
}
.faq-cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.faq-cat-ico {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 14px;
  color: var(--puffs-purple);
  background: rgba(124, 92, 255, .10);
}
.faq-cat-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #8079a3;
}

/* ---- Accordeon ---- */
.faq-item {
  background: var(--puffs-card);
  border: 1px solid var(--puffs-border);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.faq-item:hover {
  border-color: rgba(124, 92, 255, .24);
}
.faq-item[open] {
  border-color: rgba(124, 92, 255, .30);
  box-shadow: var(--puffs-shadow-soft);
}
.faq-question {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  font-size: 15.5px;
  font-weight: 600;
  color: #374151;
  user-select: none;
  transition: color .18s ease;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: "+";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: var(--puffs-purple);
  background: rgba(124, 92, 255, .09);
  border-radius: 9px;
  transition: transform .25s ease, background .2s ease, color .2s ease;
}
.faq-item[open] .faq-question {
  color: var(--puffs-ink);
}
.faq-item[open] .faq-question::after {
  content: "\2212";
  background: var(--puffs-purple);
  color: #fff;
}
.faq-question:hover { color: var(--puffs-purple-dark); }
.faq-answer {
  padding: 0 20px 18px;
}
.faq-answer p {
  margin: 0;
  color: var(--puffs-muted);
  font-size: 14.5px;
  line-height: 1.75;
  max-width: 64ch;
}

/* ---- CTA support (carte premium) ---- */
.faq-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(124, 92, 255, .10), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbf9ff);
  border: 1px solid var(--puffs-border);
  border-radius: 24px;
  padding: 46px 32px 40px;
  margin-top: 22px;
  box-shadow: var(--puffs-shadow-soft);
}
.faq-cta-glow {
  position: absolute;
  top: -110px;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 79, 216, .16), rgba(124, 92, 255, .12) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.faq-cta > *:not(.faq-cta-glow) {
  position: relative;
  z-index: 1;
}
.faq-cta-icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  font-size: 25px;
  color: #fff;
  background: linear-gradient(135deg, var(--puffs-purple), var(--puffs-pink));
  box-shadow: 0 12px 26px rgba(124, 92, 255, .34);
  margin-bottom: 18px;
}
.faq-cta h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: #1d1733;
}
.faq-cta p {
  margin: 0 auto 22px;
  max-width: 430px;
  color: var(--puffs-muted);
  font-size: 15px;
  line-height: 1.6;
}
.faq-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.faq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--puffs-purple), var(--puffs-pink));
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(124, 92, 255, .28);
  transition: transform .15s ease, box-shadow .2s ease;
}
.faq-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(124, 92, 255, .36);
}
.faq-cta-mail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--puffs-border);
  color: var(--puffs-purple-dark);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .15s ease;
}
.faq-cta-mail i { font-size: 15px; }
.faq-cta-mail:hover {
  border-color: rgba(124, 92, 255, .32);
  background: rgba(124, 92, 255, .05);
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .faq-sidebar {
    position: static;
    top: auto;
  }
  .faq-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .faq-nav a { border: 1px solid var(--puffs-border); }
}
@media (max-width: 600px) {
  .faq-question { font-size: 15px; padding: 15px 16px; }
  .faq-answer { padding: 0 16px 15px; }
  .faq-cat-ico { width: 32px; height: 32px; }
  .faq-cta { padding: 38px 22px 32px; }
  .faq-cta h3 { font-size: 20px; }
  .faq-cta-actions { width: 100%; flex-direction: column; }
  .faq-cta-btn,
  .faq-cta-mail { width: 100%; justify-content: center; }
}

/* ===================== HOME : intros marques + FAQ marques + a propos ===================== */
.brand-showcase-intro {
  margin: 10px 0 0;
  max-width: 60ch;
  color: var(--puffs-muted);
  font-size: 15px;
  line-height: 1.7;
  padding-left: 14px;
  border-left: 3px solid rgba(124, 92, 255, .45);
}

/* ---- FAQ par marque ---- */
.brand-faq {
  background: var(--puffs-bg);
  padding: 6px 0 24px;
}
.brand-faq-head {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0;
  margin-bottom: 28px;
}
.brand-faq-head .section-title {
  margin: 12px 0 8px;
}
.brand-faq-head .section-subtitle {
  margin: 0;
  max-width: 60ch;
}
.brand-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}
.brand-faq-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px;
  background: var(--puffs-card);
  border: 1px solid var(--puffs-border);
  border-radius: var(--puffs-radius-md);
  box-shadow: var(--puffs-shadow-soft);
  transition: box-shadow .25s ease;
}
.brand-faq-col:hover {
  box-shadow: var(--puffs-shadow-hover);
}
.brand-faq-col-head {
  margin-bottom: 4px;
}
.brand-faq-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff;
  background: linear-gradient(135deg, var(--puffs-purple), var(--puffs-pink));
  box-shadow: 0 8px 18px rgba(124, 92, 255, .28);
}
.brand-faq-col .faq-question { font-size: 14.5px; padding: 14px 16px; }
.brand-faq-col .faq-answer { padding: 0 16px 14px; }
.brand-faq-col .faq-answer p { font-size: 13.5px; }

/* ---- Bloc editorial "A propos" ---- */
.home-about {
  background: #ede9ff;
  padding: 6px 0 70px;
}
.home-about-card {
  position: relative;
  overflow: hidden;
  padding: 40px 44px;
  background: #fff;
  border: 1px solid var(--puffs-border);
  box-shadow: var(--puffs-shadow-soft);
  border-radius: var(--puffs-radius-lg);
}
.home-about-glow {
  display: none;
}
.home-about-title {
  position: relative;
  margin: 14px 0 16px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--puffs-ink);
}
.home-about-text {
  position: relative;
  margin: 0;
  max-width: 80ch;
  color: #4b5563;
  font-size: 15.5px;
  line-height: 1.85;
}
.home-about-links {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.home-about-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(124, 92, 255, .08);
  border: 1px solid var(--puffs-border);
  color: var(--puffs-purple-dark);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.home-about-link:hover {
  background: linear-gradient(135deg, var(--puffs-purple), var(--puffs-pink));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(124, 92, 255, .28);
}
.home-about-arrow { transition: transform .2s ease; }
.home-about-link:hover .home-about-arrow { transform: translateX(3px); }

@media (max-width: 980px) {
  .brand-faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .brand-showcase-intro { font-size: 14px; }
  .brand-faq-col { padding: 18px 16px; }
  .home-about-card { padding: 30px 22px; }
  .home-about-title { font-size: 25px; }
  .home-about-text { font-size: 14.5px; }
}

/* ---- Icone d'aide / FAQ dans le header ---- */
.header-icon.faq-link i {
  font-size: 20px !important;
  color: var(--puffs-purple);
}
.header-icon.faq-link:hover i { color: #fff; }
.header-icon.faq-link.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--puffs-purple), #b44cff);
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(124, 92, 255, .30);
}
.header-icon.faq-link.is-active i { color: #fff; }
.header-icon.faq-link.is-active:hover {
  transform: translateY(-1px) scale(1.03);
}

/* ===================== CONTACT PAGE ===================== */
.contact-page-main {
  background:
    radial-gradient(1100px 420px at 50% -160px, rgba(124, 92, 255, .10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--puffs-bg) 100%);
  padding-bottom: 72px;
}

/* ---- Hero ---- */
.contact-hero {
  text-align: left;
  padding: 40px 0 26px;
}
.contact-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.contact-hero h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 740;
  letter-spacing: -0.8px;
  line-height: 1.15;
  background: linear-gradient(120deg, var(--puffs-purple) 0%, #9d5cff 48%, #b44cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--puffs-purple);
}
.contact-hero > .container > p {
  max-width: 560px;
  margin: 10px 0 0;
  color: #6b6488;
  font-size: 15.5px;
  line-height: 1.55;
}
.contact-page-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 18px;
}
.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--puffs-border);
  color: #4b4565;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(124, 92, 255, .06);
  backdrop-filter: blur(6px);
}
.contact-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--puffs-purple), #b44cff);
}

/* ---- Grille principale ---- */
.contact-page-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.85fr;
  gap: 28px;
  align-items: start;
  padding-top: 8px;
}

/* ---- Carte formulaire ---- */
.contact-page-card {
  background: #ffffff;
  border: 1px solid var(--puffs-border);
  border-radius: var(--puffs-radius-md);
  padding: 26px 30px 26px;
  box-shadow: var(--puffs-shadow-soft);
}
.contact-page-card h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 720;
  letter-spacing: -0.6px;
  color: #1d1733;
}
.contact-card-intro {
  margin: 6px 0 18px;
  color: var(--puffs-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ---- Formulaire ---- */
.contact-page-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.contact-page-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-page-label > span {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .3px;
  color: #4b4565;
}
.contact-page-form input,
.contact-page-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid rgba(124, 92, 255, .16);
  border-radius: 12px;
  background: #fbfaff;
  font-family: inherit;
  font-size: 14.5px;
  color: #1d1733;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.contact-page-form input::placeholder,
.contact-page-form textarea::placeholder {
  color: #a39db8;
}
.contact-page-form input:focus,
.contact-page-form textarea:focus {
  outline: none;
  border-color: var(--puffs-purple);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(124, 92, 255, .12);
}
.contact-page-form textarea {
  resize: vertical;
  min-height: 104px;
  line-height: 1.5;
}
.contact-page-form .btn-primary {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
}

/* ---- Feedback ---- */
.contact-page-feedback {
  border-radius: 13px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 550;
  line-height: 1.5;
}
.contact-page-feedback--success {
  background: rgba(34, 197, 94, .10);
  border: 1px solid rgba(34, 197, 94, .28);
  color: #15803d;
}
.contact-page-feedback--error {
  background: rgba(239, 68, 68, .08);
  border: 1px solid rgba(239, 68, 68, .25);
  color: #b91c1c;
}

/* ---- Colonne lat�rale ---- */
.contact-side-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-side-card {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fbf9ff 100%);
  border: 1px solid var(--puffs-border);
  border-radius: var(--puffs-radius-md);
  padding: 26px 26px 24px;
  box-shadow: var(--puffs-shadow-soft);
}
.contact-side-card h3 {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--puffs-border);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #8079a3;
}
.contact-side-card p {
  margin: 0 0 10px;
  color: #4b4565;
  font-size: 14.5px;
  line-height: 1.55;
}
.contact-side-card p:last-child {
  margin-bottom: 0;
}
.contact-side-card p strong {
  color: #1d1733;
  font-weight: 650;
}
.contact-coord-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-coord-list li {
  display: flex;
  align-items: center;
  gap: 13px;
}
.contact-coord-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(124, 92, 255, .10);
  color: var(--puffs-purple);
  font-size: 18px;
}
.contact-coord-list li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.contact-coord-label {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #9c96b3;
}
.contact-coord-list a,
.contact-coord-list li > div > span:last-child {
  color: #4b4565;
  font-size: 14.5px;
  font-weight: 550;
  text-decoration: none;
  word-break: break-word;
}
.contact-coord-list a:hover {
  color: var(--puffs-purple);
}
.contact-hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.contact-hours-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.contact-hours-list li > span:first-child {
  color: #4b4565;
  font-weight: 550;
}
.contact-hours-list li > span:last-child {
  color: #1d1733;
  font-weight: 650;
}
.contact-hours-closed {
  color: #b91c1c !important;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .contact-page-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .contact-hero { padding: 32px 0 22px; }
  .contact-hero h1 { font-size: 26px; letter-spacing: -0.7px; }
}
@media (max-width: 600px) {
  .contact-page-card { padding: 26px 20px 24px; }
  .contact-hero h1 { font-size: 24px; }
  .contact-hero > .container > p { font-size: 15px; }
  .contact-side-card { padding: 22px 20px; }
}

/* =====================================================
   LIVE SEARCH AUTOCOMPLETE - panneau de suggestions
   (r�utilise les cartes catalogue .cat-product-card)
===================================================== */
.ac-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 760px;
  max-width: 95vw;
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, .07);
  border-radius: 22px;
  box-shadow:
    0 28px 64px rgba(17, 24, 39, .18),
    0 8px 22px rgba(124, 92, 255, .10);
  padding: 20px;
  z-index: 3000;
  text-align: left;
  cursor: auto;
  animation: acDrop .2s cubic-bezier(.2, .7, .3, 1);
}

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

@keyframes acDrop {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Header = filtres rapides */
.ac-panel .ac-head {
  padding: 0 2px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(17, 24, 39, .07);
}

.ac-panel .ac-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ac-panel .ac-chip {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #5b6173;
  background: #f4f5f9;
  border: 1px solid rgba(17, 24, 39, .07);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .14s ease, color .14s ease, border-color .14s ease, opacity .14s ease;
}

.ac-panel .ac-chip .ac-chip-n {
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  color: #9aa0b0;
  background: rgba(17, 24, 39, .06);
  padding: 2px 6px;
  border-radius: 999px;
}

.ac-panel .ac-chip:hover {
  background: rgba(124, 92, 255, .10);
  color: #7c5cff;
  border-color: rgba(124, 92, 255, .22);
}

.ac-panel .ac-chip.is-active {
  background: linear-gradient(135deg, #7c5cff 0%, #b44cff 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(124, 92, 255, .25);
}
.ac-panel .ac-chip.is-active .ac-chip-n {
  color: #fff;
  background: rgba(255, 255, 255, .22);
}

.ac-panel .ac-chip.is-disabled {
  opacity: .42;
  cursor: not-allowed;
  background: #f4f5f9;
  color: #9aa0b0;
  border-color: rgba(17, 24, 39, .06);
}
.ac-panel .ac-chip.is-disabled:hover {
  background: #f4f5f9;
  color: #9aa0b0;
  border-color: rgba(17, 24, 39, .06);
}

/* Grille interne : 4 vraies cartes catalogue par ligne, d�filable.
   Le champ s'ouvre dans la rang�e du menu -> les r�sultats descendent juste
   sous le header et disposent de toute la hauteur dispo (2 rang�es enti�res). */
.ac-panel .ac-cat-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  max-height: calc(100vh - var(--search-drop-top, 64px) - 160px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 8px 4px 6px;
  scrollbar-width: thin;
}

.ac-panel .ac-cat-grid .cat-product-card {
  max-width: none !important;
  height: 296px !important;
}

/* Pas de d�placement de la carte au survol dans la recherche */
.ac-panel .cat-product-card:hover {
  transform: none !important;
}

/* Surbrillance navigation clavier sur une carte */
.ac-panel .cat-product-card.is-active {
  transform: translateY(-4px);
  border-color: rgba(124, 92, 255, .32);
  box-shadow: 0 16px 32px rgba(124, 92, 255, .16);
}

/* ===== Cartes de recherche : prix en ruban + r�organisation ===== */
/* On retire la pastille "En stock" / "Stock limit�" dans la recherche */
.ac-panel .cat-card-badges { display: none !important; }

.ac-panel .cat-product-card {
  position: relative;
}

/* Le prix devient un ruban qui part du bord gauche, en haut de la carte */
.ac-panel .cat-card-price {
  position: absolute;
  top: 16px;
  left: -2px;
  z-index: 6;
  margin: 0;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px 7px 13px;
  background: linear-gradient(135deg, #7c5cff, #b44cff);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1;
  border-radius: 0 999px 999px 0;
  box-shadow: 0 10px 22px rgba(124, 92, 255, .30);
  font-family: "Outfit", Inter, Arial, sans-serif;
}
/* Repli du ruban (effet banni�re) */
.ac-panel .cat-card-price::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  border-width: 6px 8px 0 0;
  border-style: solid;
  border-color: #5a3fd6 transparent transparent transparent;
}
/* Ancien prix barr� : juste sous le ruban */
.ac-panel .cat-card-price-compare {
  position: absolute;
  top: 50px;
  left: 13px;
  z-index: 6;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
}

/* Image : occupe l'espace libre pour remplir la carte (�vite le vide) */
.ac-panel .cat-card-img-wrap {
  position: relative;
  flex: 1 1 auto;
  height: auto;
  min-height: 140px;
  margin: 6px 0 10px;
}
.ac-panel .cat-card-body { flex: 0 0 auto; }

/* Marque mise en avant + nom rapproch� des infos (pills) */
.ac-panel .cat-card-brand {
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #6d44ff;
  opacity: 1;
  margin-bottom: 1px;
}
.ac-panel .cat-card-name {
  min-height: 0;
  margin-bottom: 0;
}
.ac-panel .cat-card-meta {
  margin-top: 2px;
}
/* Ligne d'info sobre (remplace les pastilles color�es) */
.ac-panel .ac-meta {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #8a90a2;
  letter-spacing: 0.01em;
}

/* Ligne du bas : note � �toiles + avis � bouton panier */
.ac-panel .ac-rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 2px 2px;
  border-top: 1px solid rgba(124, 92, 255, 0.16);
}
.ac-panel .ac-rating-note {
  font-size: 0.84rem;
  font-weight: 900;
  color: #071126;
  font-family: "Outfit", Inter, Arial, sans-serif;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ac-panel .ac-rating-max {
  font-weight: 700;
  color: #9aa0b0;
  font-size: 0.72rem;
}
.ac-panel .ac-rating-mid {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.ac-panel .ac-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 0.72rem;
  color: #f5a623;
  white-space: nowrap;
}
.ac-panel .ac-rating-reviews {
  font-size: 0.74rem;
  font-weight: 700;
  color: #8a90a2;
  white-space: nowrap;
}

/* Bouton panier discret : petite pastille � droite de la ligne d'avis */
.ac-panel .cat-card-add.ac-add-icon {
  position: static;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(124, 92, 255, 0.10);
  color: #7c5cff;
  border: 1px solid rgba(124, 92, 255, 0.18);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ac-panel .cat-card-add.ac-add-icon:hover {
  background: linear-gradient(135deg, #7c5cff, #b44cff);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(124, 92, 255, 0.34);
}
.ac-panel .cat-card-add.ac-add-icon.is-added {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border-color: transparent;
}
.ac-panel .cat-card-add.ac-add-icon .cat-card-add-icon { margin: 0; }

.ac-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 13px 10px;
  border-top: 1px solid rgba(17, 24, 39, .06);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #7c5cff;
  text-decoration: none;
  border-radius: 14px;
  background: rgba(124, 92, 255, .06);
  transition: background .14s ease, color .14s ease;
}

.ac-footer:hover,
.ac-footer.is-active {
  background: linear-gradient(135deg, #7c5cff 0%, #b44cff 100%);
  color: #fff;
}

.ac-footer svg { stroke: currentColor; transition: transform .14s ease; }
.ac-footer:hover svg { transform: translateX(3px); }

.ac-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 14px 30px;
  text-align: center;
}
.ac-empty .ac-empty-ic {
  color: #c5c9d6;
  margin-bottom: 4px;
}
.ac-empty .ac-empty-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #3a3f4d;
}
.ac-empty .ac-empty-sub {
  font-size: 0.82rem;
  font-weight: 600;
  color: #9aa0b0;
}

@media (max-width: 880px) {
  .ac-panel { width: 560px; padding: 16px; }
  .ac-panel .ac-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
}

@media (max-width: 560px) {
  .ac-panel { width: 340px; padding: 12px; }
  .ac-panel .ac-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}

/* ===== Page r�sultats de recherche : �tat vide premium ===== */
.search-hero-header {
  padding: 48px 16px 14px;
  text-align: center;
}
.search-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.search-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6d4aff;
  background: linear-gradient(135deg, rgba(124, 92, 255, .10), rgba(180, 76, 255, .07));
  border: 1px solid rgba(124, 92, 255, .18);
  border-radius: 999px;
}
.search-hero-eyebrow i {
  font-size: 0.95rem;
  line-height: 1;
}
.search-hero-title {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1.2;
  color: #1f2430;
  letter-spacing: -0.02em;
}
.search-hero-term {
  background: linear-gradient(125deg, #7c5cff 10%, #b44cff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

/* Compteur de r�sultats - pill premium centr�e sous le titre */
.search-info {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}
.search-count-pill {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  font-size: 0.84rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  color: #4a4f63;
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(17, 24, 39, .06);
}
.search-count-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c5cff, #b44cff);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, .14);
}

@media (max-width: 600px) {
  .search-hero-header { padding: 32px 16px 10px; }
  .search-hero-title { font-size: 1.55rem; }
}

.search-empty {
  display: flex;
  justify-content: center;
  padding: 30px 16px 70px;
}

.search-empty-card {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 36px 44px;
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, .07);
  border-radius: 24px;
  box-shadow: 0 22px 54px rgba(17, 24, 39, .08);
}

.search-empty-icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  color: #7c5cff;
  background: radial-gradient(circle at 30% 30%, rgba(124, 92, 255, .14), rgba(180, 76, 255, .08));
  border: 1px solid rgba(124, 92, 255, .16);
  margin-bottom: 22px;
}

.search-empty-title {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 800;
  color: #1f2430;
  letter-spacing: -0.01em;
}

.search-empty-text {
  margin: 0 0 26px;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.6;
  color: #6b7180;
  max-width: 440px;
}
.search-empty-text strong { color: #7c5cff; font-weight: 800; }

.search-empty-actions {
  margin-bottom: 32px;
}
.search-empty-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
}

.search-empty-suggest {
  width: 100%;
  padding-top: 26px;
  border-top: 1px solid rgba(17, 24, 39, .07);
}

.search-empty-suggest-label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9aa0b0;
}

.search-empty-chips {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.search-empty-chips::-webkit-scrollbar { display: none; }

.search-empty-chips a {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5b6173;
  background: #f4f5f9;
  border: 1px solid rgba(17, 24, 39, .07);
  padding: 8px 15px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.search-empty-chips a:hover {
  background: linear-gradient(135deg, #7c5cff 0%, #b44cff 100%);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}

@media (max-width: 560px) {
  .search-empty-card { padding: 38px 22px 34px; }
  .search-empty-title { font-size: 1.25rem; }
}

/* =====================================================
   BLOG - index & article (th�me premium Puffs.ch)
===================================================== */
.blog-page main.container { padding-bottom: 80px; }

/* Accents par cat�gorie (d�grad�s des m�dias / ic�nes) */
.blog-accent-violet { --blog-accent: #7c5cff; --blog-accent-2: #b44cff; }
.blog-accent-pink   { --blog-accent: #ff4fd8; --blog-accent-2: #ff7ac4; }
.blog-accent-blue   { --blog-accent: #4c8dff; --blog-accent-2: #5ec5ff; }
.blog-accent-green  { --blog-accent: #18b87a; --blog-accent-2: #43d6a0; }
.blog-accent-amber  { --blog-accent: #f5a623; --blog-accent-2: #ffca5e; }

/* ---- Hero ---- */
.blog-hero {
  position: relative;
  margin: 22px 0 26px;
  padding: 52px 40px;
  border-radius: var(--puffs-radius-lg);
  background:
    radial-gradient(900px 360px at 18% -40%, rgba(124, 92, 255, .16), transparent 60%),
    radial-gradient(700px 300px at 100% 0%, rgba(180, 76, 255, .12), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--puffs-bg) 100%);
  border: 1px solid var(--puffs-border);
  box-shadow: var(--puffs-shadow-soft);
  overflow: hidden;
}
.blog-hero-inner { max-width: 720px; }
.blog-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(124, 92, 255, .10);
  color: var(--puffs-purple-dark);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 16px;
}
.blog-hero-eyebrow i { font-size: 1rem; }
.blog-hero-title {
  margin: 0 0 14px;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 2.3rem;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.5px;
  color: var(--puffs-ink);
}
.blog-hero-sub {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--puffs-muted);
  max-width: 640px;
}

/* ---- Filtres cat�gories ---- */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
}
.blog-chip {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--puffs-border);
  background: #fff;
  color: #4b5563;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s ease, background .2s ease, border-color .2s ease, transform .18s ease, box-shadow .2s ease;
}
.blog-chip:hover {
  color: var(--puffs-purple-dark);
  border-color: rgba(124, 92, 255, .35);
  transform: translateY(-1px);
}
.blog-chip.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--puffs-purple) 0%, var(--puffs-pink) 100%);
  box-shadow: 0 10px 22px rgba(124, 92, 255, .26);
}

/* ---- Meta commune ---- */
.blog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--puffs-muted);
  margin-bottom: 12px;
}
.blog-meta i { font-size: .95rem; margin-right: 4px; vertical-align: -2px; }
.blog-meta-dot { opacity: .5; }
.blog-cat-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(124, 92, 255, .10);
  color: var(--puffs-purple-dark);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--puffs-purple-dark);
  font-weight: 800;
  font-size: .9rem;
  transition: gap .2s ease;
}
.blog-read-more i { font-size: 1.05rem; transition: transform .2s ease; }

/* ---- Article � la une ---- */
.blog-featured {
  margin: 0 0 30px;
  border-radius: var(--puffs-radius-lg);
  background: var(--puffs-card);
  border: 1px solid var(--puffs-border);
  box-shadow: var(--puffs-shadow-soft);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.blog-featured:hover {
  transform: translateY(-3px);
  box-shadow: var(--puffs-shadow-hover);
}
.blog-featured-link {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr);
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.blog-featured-media {
  position: relative;
  aspect-ratio: 2 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blog-accent) 0%, var(--blog-accent-2) 100%);
  overflow: hidden;
}
.blog-featured-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 220px at 78% 14%, rgba(255, 255, 255, .28), transparent 60%),
    radial-gradient(260px 200px at 12% 92%, rgba(0, 0, 0, .14), transparent 60%);
}
.blog-featured-media i {
  font-size: 5.6rem;
  color: rgba(255, 255, 255, .94);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .18));
  z-index: 1;
}
.blog-featured-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}
.blog-featured-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--puffs-ink);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.blog-featured-body { padding: 34px 36px; }
.blog-featured-title {
  margin: 4px 0 12px;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -.4px;
  color: var(--puffs-ink);
}
.blog-featured-excerpt {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--puffs-muted);
}
.blog-featured:hover .blog-read-more { gap: 11px; }
.blog-featured:hover .blog-read-more i { transform: translateX(3px); }

/* ---- Grille de cartes ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-card {
  border-radius: var(--puffs-radius-md);
  background: var(--puffs-card);
  border: 1px solid var(--puffs-border);
  box-shadow: var(--puffs-shadow-soft);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card[hidden] { display: none; }
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--puffs-shadow-hover);
}
.blog-card-link { display: block; text-decoration: none; color: inherit; }
.blog-card-media {
  position: relative;
  aspect-ratio: 2 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blog-accent) 0%, var(--blog-accent-2) 100%);
  overflow: hidden;
}
.blog-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(280px 150px at 80% 12%, rgba(255, 255, 255, .26), transparent 60%),
    radial-gradient(200px 150px at 10% 95%, rgba(0, 0, 0, .14), transparent 60%);
}
.blog-card-media i {
  font-size: 3.5rem;
  color: rgba(255, 255, 255, .94);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .16));
  z-index: 1;
}
.blog-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}
.blog-card-cat {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--puffs-ink);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.blog-card-body { padding: 20px 22px 24px; }
.blog-card-title {
  margin: 2px 0 10px;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.2px;
  color: var(--puffs-ink);
}
.blog-card-excerpt {
  margin: 0;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--puffs-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card:hover .blog-read-more { gap: 11px; }
.blog-card:hover .blog-read-more i { transform: translateX(3px); }

.blog-empty {
  text-align: center;
  color: var(--puffs-muted);
  font-weight: 600;
  padding: 30px 0;
}

/* ---- CTA bas de page ---- */
.blog-cta {
  margin: 36px 0 0;
  border-radius: var(--puffs-radius-lg);
  background:
    radial-gradient(640px 280px at 100% 0%, rgba(255, 255, 255, .18), transparent 55%),
    linear-gradient(135deg, var(--puffs-purple) 0%, var(--puffs-pink) 100%);
  box-shadow: 0 20px 44px rgba(124, 92, 255, .26);
  overflow: hidden;
}
.blog-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding: 38px 42px;
}
.blog-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  margin-bottom: 12px;
}
.blog-cta-text { max-width: 620px; }
.blog-cta-text h2 {
  margin: 0 0 8px;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
}
.blog-cta-text p { margin: 0; color: rgba(255, 255, 255, .9); font-size: 1rem; line-height: 1.55; }
.blog-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 14px;
  background: #fff;
  color: var(--puffs-purple-dark);
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-weight: 900;
  font-size: .98rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .14);
  transition: transform .18s ease, box-shadow .18s ease;
}
.blog-cta-btn i { transition: transform .2s ease; }
.blog-cta-btn:hover { transform: translateY(-2px); }
.blog-cta-btn:hover i { transform: translateX(3px); }
.blog-cta-btn--sm { padding: 11px 18px; font-size: .9rem; }

/* ---- �tat vide global ---- */
.blog-empty-state {
  text-align: center;
  padding: 70px 24px;
  border-radius: var(--puffs-radius-lg);
  background: var(--puffs-card);
  border: 1px solid var(--puffs-border);
  box-shadow: var(--puffs-shadow-soft);
}
.blog-empty-state i { font-size: 3rem; color: var(--puffs-purple); }
.blog-empty-state h2 { margin: 14px 0 8px; font-family: "Outfit", Inter, Arial, sans-serif; font-size: 1.5rem; color: var(--puffs-ink); }
.blog-empty-state p { margin: 0 0 22px; color: var(--puffs-muted); }
.blog-empty-state .blog-cta-btn {
  background: linear-gradient(135deg, var(--puffs-purple), var(--puffs-pink));
  color: #fff;
}

/* =====================================================
   BLOG - page article
===================================================== */
.blog-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 16px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--puffs-muted);
}
.blog-breadcrumb a { color: var(--puffs-muted); text-decoration: none; transition: color .18s ease; }
.blog-breadcrumb a:hover { color: var(--puffs-purple-dark); }
.blog-breadcrumb i { font-size: .9rem; opacity: .6; }
.blog-breadcrumb span { color: var(--puffs-ink); font-weight: 700; }

.blog-article {
  max-width: 820px;
  margin: 28px auto 0;
  background: var(--puffs-card);
  border: 1px solid var(--puffs-border);
  border-radius: var(--puffs-radius-lg);
  box-shadow: var(--puffs-shadow-soft);
  overflow: hidden;
}
.blog-article-head {
  position: relative;
  padding: 40px 48px 34px;
  text-align: center;
  background:
    radial-gradient(620px 260px at 50% -60%, rgba(124, 92, 255, .12), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--puffs-bg) 100%);
  border-bottom: 1px solid var(--puffs-border);
}
.blog-article-title {
  margin: 14px 0 16px;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -.5px;
  color: var(--puffs-ink);
}
.blog-article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--puffs-muted);
}
.blog-article-meta i { margin-right: 4px; vertical-align: -2px; }
.blog-article-hero-icon {
  width: 86px;
  height: 86px;
  margin: 26px auto 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--blog-accent) 0%, var(--blog-accent-2) 100%);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .12);
}
.blog-article-hero-icon i { font-size: 2.6rem; }

.blog-article-body {
  padding: 36px 48px 8px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #2b2f3a;
}
.blog-article-body .blog-lead {
  font-size: 1.18rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--puffs-ink);
  margin: 0 0 26px;
  padding: 16px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124, 92, 255, .06), rgba(180, 76, 255, .05));
  border-left: 4px solid var(--blog-accent, var(--puffs-purple));
}
.blog-article-body h2 {
  position: relative;
  margin: 36px 0 14px;
  padding-left: 16px;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -.4px;
  color: var(--puffs-ink);
}
.blog-article-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 5px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--blog-accent, var(--puffs-purple)), var(--blog-accent-2, var(--puffs-pink)));
}
.blog-article-body p { margin: 0 0 18px; }
.blog-article-body ul { margin: 0 0 20px; padding-left: 0; list-style: none; }
.blog-article-body ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
}
.blog-article-body ul li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blog-accent), var(--blog-accent-2));
}
.blog-article-body strong { color: var(--puffs-ink); font-weight: 800; }

/* Liens contextuels vers la boutique dans le corps des articles */
.blog-article-body p a,
.blog-article-body li a {
  color: #6f45ff;
  font-weight: 700;
  text-decoration: none;
  background-image: linear-gradient(transparent 92%, rgba(124,77,255,.35) 0);
  transition: color .18s ease, background-image .18s ease;
}
.blog-article-body p a:hover,
.blog-article-body li a:hover {
  color: #5826e8;
  background-image: linear-gradient(transparent 90%, rgba(124,77,255,.7) 0);
}

.blog-article-figure {
  margin: 0 0 26px;
}
.blog-article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(27, 18, 54, .14);
}
.blog-article-figure figcaption {
  margin-top: 10px;
  font-size: .85rem;
  color: var(--puffs-muted, #6b6280);
  text-align: center;
}

.blog-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 26px 0;
  padding: 20px 22px;
  border-radius: 18px;
  background: rgba(124, 92, 255, .07);
  border: 1px solid var(--puffs-border);
  border-left: 4px solid var(--puffs-purple);
}
.blog-callout i { font-size: 1.5rem; color: var(--puffs-purple-dark); flex-shrink: 0; margin-top: 2px; }
.blog-callout strong { display: block; margin-bottom: 4px; color: var(--puffs-ink); font-size: 1rem; }
.blog-callout p { margin: 0; font-size: .96rem; line-height: 1.55; color: var(--puffs-muted); }

/* Variantes color�es d'encadr�s */
.blog-callout.is-info {
  background: rgba(76, 141, 255, .08);
  border-color: rgba(76, 141, 255, .22);
  border-left-color: #4c8dff;
}
.blog-callout.is-info i { color: #2f6fe0; }
.blog-callout.is-success {
  background: rgba(24, 184, 122, .09);
  border-color: rgba(24, 184, 122, .24);
  border-left-color: #18b87a;
}
.blog-callout.is-success i { color: #0f9e66; }
.blog-callout.is-warning {
  background: rgba(245, 166, 35, .10);
  border-color: rgba(245, 166, 35, .26);
  border-left-color: #f5a623;
}
.blog-callout.is-warning i { color: #d98a0b; }

/* Citation / pull-quote */
.blog-quote {
  position: relative;
  margin: 30px 0;
  padding: 8px 0 8px 28px;
  border-left: 4px solid var(--blog-accent, var(--puffs-purple));
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.3px;
  color: var(--puffs-ink);
}

/* Surlignages inline color�s */
.blog-hl {
  padding: 1px 7px;
  border-radius: 7px;
  font-weight: 800;
  white-space: nowrap;
}
.blog-hl-violet { background: rgba(124, 92, 255, .14); color: #6d4aff; }
.blog-hl-pink   { background: rgba(255, 79, 216, .14); color: #d12bb0; }
.blog-hl-blue   { background: rgba(76, 141, 255, .15); color: #2f6fe0; }
.blog-hl-green  { background: rgba(24, 184, 122, .15); color: #0f9e66; }
.blog-hl-amber  { background: rgba(245, 166, 35, .18); color: #b9760a; }

/* Bloc pour / contre */
.blog-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 26px 0;
}
.blog-pc-card {
  padding: 22px 22px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--puffs-border);
  box-shadow: var(--puffs-shadow-soft);
}
.blog-pc-card.blog-pc-pro { border-top: 4px solid #ff4fd8; }
.blog-pc-card.blog-pc-con { border-top: 4px solid #4c8dff; }
.blog-pc-head {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--puffs-ink);
}
.blog-pc-head i { font-size: 1.25rem; color: var(--puffs-purple-dark); }
.blog-pc-card.blog-pc-pro .blog-pc-head i { color: #d12bb0; }
.blog-pc-card.blog-pc-con .blog-pc-head i { color: #2f6fe0; }
.blog-pc-sub {
  margin: 4px 0 14px !important;
  font-size: .9rem !important;
  font-weight: 600;
  color: var(--puffs-muted) !important;
}
.blog-pc-card ul { margin: 0 0 10px !important; padding: 0; list-style: none; }
.blog-pc-card ul li {
  position: relative;
  padding-left: 26px !important;
  margin-bottom: 7px !important;
  font-size: .95rem;
}
.blog-pc-card ul li::before {
  content: "" !important;
  position: absolute;
  left: 0;
  top: .25em;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: transparent !important;
}
.blog-pros li::before {
  content: "\2713" !important;
  background: rgba(24, 184, 122, .14) !important;
  color: #0f9e66;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  line-height: 17px;
}
.blog-cons li::before {
  content: "\2013" !important;
  background: rgba(148, 163, 184, .18) !important;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  line-height: 16px;
}

/* Rang�e de statistiques */
.blog-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 26px 0;
}
.blog-stat {
  text-align: center;
  padding: 20px 14px;
  border-radius: 16px;
  background:
    radial-gradient(220px 120px at 50% -30%, rgba(124, 92, 255, .12), transparent 60%),
    #fff;
  border: 1px solid var(--puffs-border);
}
.blog-stat-num {
  display: block;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  background: linear-gradient(135deg, var(--blog-accent, var(--puffs-purple)), var(--blog-accent-2, var(--puffs-pink)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--blog-accent, var(--puffs-purple));
}
.blog-stat-label {
  display: block;
  margin-top: 8px;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--puffs-muted);
}

.blog-article-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 48px 0;
  padding: 24px 0 36px;
  border-top: 1px solid var(--puffs-border);
}
.blog-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--puffs-purple-dark);
  font-weight: 800;
  text-decoration: none;
  font-size: .95rem;
  transition: gap .2s ease;
}
.blog-back-link i { transition: transform .2s ease; }
.blog-back-link:hover { gap: 11px; }
.blog-back-link:hover i { transform: translateX(-3px); }
.blog-article-foot .blog-cta-btn {
  background: linear-gradient(135deg, var(--puffs-purple), var(--puffs-pink));
  color: #fff;
}

/* ---- Articles li�s ---- */
.blog-related { max-width: 1100px; margin: 48px auto 0; }

/* ---- Dossier (topic cluster) : maillage interne pilier <-> articles ---- */
.blog-cluster {
  max-width: 820px;
  margin: 40px auto 8px;
  padding: 22px 24px;
  border: 1px solid rgba(124, 92, 255, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, #faf8ff, #f3eeff);
  box-shadow: 0 10px 28px rgba(124, 92, 255, 0.08);
}
.blog-cluster-head { margin-bottom: 14px; }
.blog-cluster-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-weight: 800; font-size: 0.95rem; color: var(--puffs-purple);
  letter-spacing: .2px;
}
.blog-cluster-eyebrow i { font-size: 1.05rem; }
.blog-cluster-sub { margin: 6px 0 0; font-size: 0.88rem; color: #6b6880; }
.blog-cluster-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.blog-cluster-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  transition: background .15s ease;
}
.blog-cluster-item + .blog-cluster-item { border-top: 1px solid rgba(124, 92, 255, 0.08); }
.blog-cluster-link {
  flex: 1 1 auto; color: var(--puffs-ink); font-weight: 700; text-decoration: none;
  font-size: 0.98rem; line-height: 1.35;
}
.blog-cluster-link:hover { color: var(--puffs-purple); text-decoration: underline; }
.blog-cluster-item.is-current { background: rgba(124, 92, 255, 0.10); }
.blog-cluster-current {
  flex: 1 1 auto; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; color: var(--puffs-purple); font-size: 0.98rem;
}
.blog-cluster-current i { font-size: 0.95rem; }
.blog-cluster-badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  background: linear-gradient(135deg, var(--puffs-purple), var(--puffs-pink)); color: #fff;
  vertical-align: middle;
}
.blog-cluster-min { flex: 0 0 auto; font-size: 0.8rem; color: #8a8799; font-weight: 600; }
@media (max-width: 560px) {
  .blog-cluster { padding: 18px 16px; border-radius: 14px; }
  .blog-cluster-min { display: none; }
}

.blog-related-title {
  margin: 0 0 22px;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.3px;
  color: var(--puffs-ink);
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-featured-link { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .blog-hero { padding: 38px 24px; }
  .blog-hero-title { font-size: 1.8rem; }
  .blog-featured-body { padding: 26px 24px; }
  .blog-article-head { padding: 32px 24px 28px; }
  .blog-article-title { font-size: 1.6rem; }
  .blog-article-body { padding: 28px 24px 6px; }
  .blog-article-foot { margin: 14px 24px 0; }
  .blog-cta-inner { padding: 30px 24px; }
}
@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-pros-cons { grid-template-columns: 1fr; }
  .blog-stats { grid-template-columns: 1fr; }
  .blog-quote { font-size: 1.12rem; }
}


/* ===================== PAGES L�GALES (mentions, CGV, confidentialit�, conditions) ===================== */
.legal-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 30px 20px 70px;
  font-family: Inter, Arial, sans-serif;
}

/* Hero */
.legal-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--puffs-radius-lg);
  padding: 46px 44px;
  background: linear-gradient(135deg, #2a1d5e 0%, #4b2db0 45%, #7c5cff 100%);
  color: #fff;
  box-shadow: 0 24px 50px rgba(124, 92, 255, .26);
}
.legal-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 79, 216, .45), transparent 68%);
  pointer-events: none;
}
.legal-hero::after {
  content: "";
  position: absolute;
  bottom: -140px;
  left: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, .5), transparent 70%);
  pointer-events: none;
}
.legal-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Outfit", Inter, sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(4px);
}
.legal-eyebrow i { font-size: 1rem; }
.legal-hero h1 {
  font-family: "Outfit", Inter, sans-serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 1.1;
  margin: 18px 0 12px;
  letter-spacing: -.01em;
}
.legal-hero-sub {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
  margin: 0 0 18px;
  max-width: 640px;
}
.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .18);
}
.legal-updated i { font-size: .95rem; }

/* Layout : sommaire + corps */
.legal-layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 30px;
  margin-top: 34px;
  align-items: start;
}

/* Sommaire (sticky) */
.legal-toc {
  position: sticky;
  top: 100px;
  background: var(--puffs-card);
  border: 1px solid var(--puffs-border);
  border-radius: var(--puffs-radius-md);
  padding: 22px 20px;
  box-shadow: var(--puffs-shadow-soft);
}
.legal-toc-title {
  font-family: "Outfit", Inter, sans-serif;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--puffs-muted);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.legal-toc-title i { color: var(--puffs-purple); font-size: 1.05rem; }
.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.legal-toc li { margin: 0; }
.legal-toc a {
  counter-increment: toc;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--puffs-ink);
  text-decoration: none;
  line-height: 1.35;
  transition: background .18s ease, color .18s ease;
}
.legal-toc a::before {
  content: counter(toc);
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-family: "Outfit", Inter, sans-serif;
  font-weight: 800;
  font-size: .72rem;
  color: var(--puffs-purple-dark);
  background: rgba(124, 92, 255, .1);
  transition: background .18s ease, color .18s ease;
}
.legal-toc a:hover {
  background: rgba(124, 92, 255, .07);
  color: var(--puffs-purple-dark);
}
.legal-toc a:hover::before {
  background: linear-gradient(135deg, var(--puffs-purple), var(--puffs-pink));
  color: #fff;
}

/* Corps */
.legal-body { min-width: 0; }
.legal-section {
  position: relative;
  background: var(--puffs-card);
  border: 1px solid var(--puffs-border);
  border-radius: var(--puffs-radius-md);
  padding: 28px 32px;
  margin-bottom: 18px;
  box-shadow: var(--puffs-shadow-soft);
  scroll-margin-top: 100px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.legal-section:hover {
  box-shadow: var(--puffs-shadow-hover);
  transform: translateY(-2px);
}
.legal-section h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Outfit", Inter, sans-serif;
  font-weight: 800;
  font-size: 1.28rem;
  color: var(--puffs-ink);
  margin: 0 0 14px;
  line-height: 1.25;
}
.legal-section h2 .legal-num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--puffs-purple), var(--puffs-pink));
  box-shadow: 0 8px 18px rgba(124, 92, 255, .28);
}
.legal-section p {
  font-size: .98rem;
  line-height: 1.7;
  color: #374151;
  margin: 0 0 12px;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul {
  list-style: none;
  margin: 6px 0 12px;
  padding: 0;
}
.legal-section ul li {
  position: relative;
  padding-left: 26px;
  font-size: .98rem;
  line-height: 1.65;
  color: #374151;
  margin-bottom: 9px;
}
.legal-section ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--puffs-purple), var(--puffs-pink));
}
.legal-section ul li a,
.legal-section p a {
  color: var(--puffs-purple-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 92, 255, .3);
  transition: color .18s ease, border-color .18s ease;
}
.legal-section ul li a:hover,
.legal-section p a:hover {
  color: var(--puffs-pink);
  border-color: var(--puffs-pink);
}
.legal-section strong { color: var(--puffs-ink); font-weight: 700; }

/* Callout / note (rappel 18+, contact) */
.legal-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 20px 22px;
  border-radius: var(--puffs-radius-md);
  background: linear-gradient(135deg, rgba(124, 92, 255, .08), rgba(255, 79, 216, .06));
  border: 1px solid rgba(124, 92, 255, .2);
}
.legal-note i {
  flex: 0 0 auto;
  font-size: 1.5rem;
  color: var(--puffs-purple-dark);
  margin-top: 2px;
}
.legal-note-text { font-size: .95rem; line-height: 1.6; color: #374151; }
.legal-note-text strong { display: block; margin-bottom: 3px; color: var(--puffs-ink); font-size: 1rem; }

/* Liens entre pages l�gales (bas de page) */
.legal-links {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.legal-link-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border-radius: var(--puffs-radius-md);
  background: var(--puffs-card);
  border: 1px solid var(--puffs-border);
  box-shadow: var(--puffs-shadow-soft);
  text-decoration: none;
  color: var(--puffs-ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.legal-link-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--puffs-shadow-hover);
  border-color: rgba(124, 92, 255, .35);
}
.legal-link-card i {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, var(--puffs-purple), var(--puffs-pink));
}
.legal-link-card span {
  font-family: "Outfit", Inter, sans-serif;
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.3;
}
.legal-link-card small {
  display: block;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: .8rem;
  color: var(--puffs-muted);
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; top: auto; }
  .legal-toc ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2px;
  }
}
@media (max-width: 640px) {
  .legal-hero { padding: 36px 26px; }
  .legal-hero h1 { font-size: 1.95rem; }
  .legal-section { padding: 24px 22px; }
  .legal-section h2 { font-size: 1.15rem; }
}

/* ============================================================
   MOBILE PREMIUM - typographie & cartes (? 600px)
   Plac� en fin de fichier pour primer sur les overrides par section.
   - Titres de section compacts (�vite les titres sur 3 lignes).
   - Cartes des carrousels accueil r�duites -> 2 visibles + aper�u 3e.
   ============================================================ */
@media (max-width: 600px) {
  /* Conteneurs d'en-t�te de section : le max-width calc(100% - 374px)
     pr�vu pour le desktop �crase le titre sur mobile -> pleine largeur. */
  .section-heading,
  .section-heading-premium,
  .section-heading-left,
  #best-sellers .section-heading-premium,
  #newcomers .section-heading-premium {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Titres de section : plus petits et lisibles sur t�l�phone.
     On cible aussi `.section-heading-left h2` (sp�cificit� plus haute
     utilis�e par les overrides best-sellers/newcomers). */
  .section-title,
  #best-sellers .section-title,
  #best-sellers .section-heading-left h2,
  #newcomers .section-title,
  #newcomers .section-heading-left h2,
  .categories-head .section-title,
  .banner-promo .section-title,
  .reviews-header h2,
  .elfbar-showcase .section-header h2,
  .lostmary-showcase .section-header h2,
  .alwaysplus-showcase .section-header h2,
  .brand-showcase-title-wrap h2 {
    font-size: 22px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.4px !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    white-space: normal !important;
  }
  .section-subtitle {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  /* Cartes produits des carrousels : 158px -> 2 cartes + aper�u de la 3e.
     S�lecteurs align�s sur les overrides .pc-card (2 IDs) pour primer. */
  #best-sellers #featured-products .pc-card,
  #newcomers #new-products .pc-card,
  #elfbar-products .pc-card,
  #lostmary-products .pc-card,
  #alwaysplus-products .pc-card,
  [id$="-products"] > .product-item,
  .product-grid > .product-item {
    flex: 0 0 160px !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    flex-basis: 160px !important;
    height: 296px !important;
    min-height: 296px !important;
    max-height: 296px !important;
  }

  /* Nom du produit : police reduite sur mobile pour que les mots longs
     (qui prenaient toute la largeur de la carte) tiennent mieux.
     Selecteurs alignes sur les regles de troncature (dont variantes h3
     et featured a 2 IDs) pour primer dans ce media query. */
  #best-sellers .product-title,
  #newcomers .product-title,
  #newcomers .product-details h3,
  #new-products > .product-item .product-title,
  #elfbar-products > .product-item .product-title,
  #lostmary-products > .product-item .product-title,
  #alwaysplus-products > .product-item .product-title,
  #new-products > .product-item .product-details h3,
  #elfbar-products > .product-item .product-details h3,
  #lostmary-products > .product-item .product-details h3,
  #alwaysplus-products > .product-item .product-details h3,
  #best-sellers #featured-products > .product-item .product-title,
  #best-sellers #featured-products > .product-item h3,
  #newcomers #new-products > .product-item .product-title,
  #newcomers #new-products > .product-item h3,
  #newcomers #new-products .pc-card .product-title,
  #elfbar-products .pc-card .product-title,
  #lostmary-products .pc-card .product-title,
  #alwaysplus-products .pc-card .product-title,
  #best-sellers #featured-products .pc-card .product-title {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  /* Notation compacte : les �toiles 22px d�bordaient les petites cartes.
     On bat les r�gles par-section tr�s sp�cifiques (#section .pc-card .pc-rating .stars i,
     et best-sellers qui scope 2 IDs #best-sellers #featured-products). */
  #best-sellers #featured-products .pc-card .pc-rating .stars,
  #best-sellers #featured-products .pc-card .pc-rating .stars i,
  #newcomers .pc-card .pc-rating .stars,
  #newcomers .pc-card .pc-rating .stars i,
  #elfbar-products .pc-card .pc-rating .stars,
  #elfbar-products .pc-card .pc-rating .stars i,
  #lostmary-products .pc-card .pc-rating .stars,
  #lostmary-products .pc-card .pc-rating .stars i,
  #alwaysplus-products .pc-card .pc-rating .stars,
  #alwaysplus-products .pc-card .pc-rating .stars i {
    font-size: 14px !important;
  }
  #best-sellers #featured-products .pc-card .pc-rating .reviews,
  #newcomers .pc-card .pc-rating .reviews,
  #elfbar-products .pc-card .pc-rating .reviews,
  #lostmary-products .pc-card .pc-rating .reviews,
  #alwaysplus-products .pc-card .pc-rating .reviews {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  /* Prix l�g�rement r�duit pour la ligne prix + bouton panier. */
  #best-sellers #featured-products .pc-card .pc-buyline .product-price,
  #newcomers .pc-card .pc-buyline .product-price,
  #elfbar-products .pc-card .pc-buyline .product-price,
  #lostmary-products .pc-card .pc-buyline .product-price,
  #alwaysplus-products .pc-card .pc-buyline .product-price {
    font-size: 18px !important;
  }
}

/* Tr�s petits �crans : on r�duit encore le titre d'un cran (les cartes
   restent � 158px, ce qui laisse 2 cartes compl�tes d�s 360px de large). */
@media (max-width: 380px) {
  .section-title,
  #best-sellers .section-title,
  #best-sellers .section-heading-left h2,
  #newcomers .section-title,
  #newcomers .section-heading-left h2,
  .categories-head .section-title,
  .banner-promo .section-title,
  .reviews-header h2,
  .elfbar-showcase .section-header h2,
  .lostmary-showcase .section-header h2,
  .alwaysplus-showcase .section-header h2,
  .brand-showcase-title-wrap h2 {
    font-size: 20px !important;
  }
}

/* ============================================================
   MOBILE PREMIUM - sections accueil (offre semaine, collections,
   saveurs, footer). On neutralise les r�gles desktop fig�es en
   !important (shell 615px, grille cat�gories 6 colonnes, banni�re
   2 colonnes) qui s'appliquaient aussi sur petit �cran.
   ============================================================ */
@media (max-width: 600px) {
  /* 1) Bandeau � Offre de la semaine � : hauteur raisonnable au lieu de 615px,
     image cadr�e sur le haut (badge + titre + -80%). */
  #best-sellers .weekly-offer-side {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px !important;
  }
  #best-sellers .weekly-offer-shell,
  #best-sellers .weekly-offer-card,
  #best-sellers .weekly-offer-focus-card {
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    margin-top: 0 !important;
  }
  #best-sellers .weekly-offer-visual img {
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* 2) � Nos meilleures s�lections � : image au-dessus, texte dessous
     (la grille �tait fig�e sur 2 colonnes, �crasant l'image � 72px). */
  .banner-promo .banner-content-grid {
    grid-template-columns: 1fr !important;
  }
  .banner-promo .banner-image img {
    min-height: 0 !important;
    height: 190px !important;
    object-fit: cover !important;
  }

  /* 3) � Explorez nos saveurs � : 2 colonnes lisibles (�tait fig� sur 6). */
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* 4) Footer plus compact : liens sur 2 colonnes �gales au lieu d'un seul empilement. */
  .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 16px !important;
  }
}

/* ============================================================
   MOBILE PREMIUM v2 - corrections apr�s test sur t�l�phone
   ============================================================ */
@media (max-width: 640px) {
  /* 1) R�duit l'espace vertical entre le hero et les best-sellers. */
  #best-sellers {
    margin-top: 14px !important;
    padding-top: 12px !important;
  }

  /* Espace vertical homog�ne entre toutes les sections de la page d'accueil. */
  #best-sellers { padding-bottom: 30px !important; }
  #newcomers,
  .reviews-section,
  #elfbar-showcase,
  #lostmary-showcase,
  #alwaysplus-showcase,
  section.banner-promo,
  section.categories {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  /* 2 & 4) Best-sellers en une seule colonne : carrousel pleine largeur,
     bouton � Voir tout � dessous, puis l'offre de la semaine. */
  #best-sellers .best-sellers-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  #best-sellers .best-sellers-layout::before {
    display: none !important;
  }
  /* Espace vertical homog�ne au-dessus de chaque bouton � Voir tout � :
     on neutralise le padding bas des conteneurs de carrousel et on fixe
     la m�me marge sur le bouton dans toutes les sections. */
  #best-sellers .best-sellers-products,
  .new-products-shell,
  .elfbar-band,
  .lostmary-band,
  .alwaysplus-band {
    padding-bottom: 12px !important;
  }
  .viewall-mobile-below {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 12px 0 14px !important;
  }
  /* Sections dont le bouton relog� est enfant direct de <section> (padding 0) :
     on l'aligne sur la largeur du carrousel (bandes en padding lat�ral 16px). */
  #newcomers > .viewall-mobile-below,
  #elfbar-showcase > .viewall-mobile-below,
  #lostmary-showcase > .viewall-mobile-below,
  #alwaysplus-showcase > .viewall-mobile-below {
    width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  /* Titres marques (Elfbar / Lost Mary / Toujours +) : align�s � gauche
     comme les autres titres (le header flex les centrait/d�calait � droite). */
  #elfbar-showcase .section-header,
  #lostmary-showcase .section-header,
  #alwaysplus-showcase .section-header {
    justify-content: flex-start !important;
  }
  #elfbar-showcase .brand-showcase-title-wrap,
  #lostmary-showcase .brand-showcase-title-wrap,
  #alwaysplus-showcase .brand-showcase-title-wrap {
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* 3a) Offre de la semaine : largeur r�duite et centr�e. */
  #best-sellers .weekly-offer-side {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #best-sellers .weekly-offer-shell,
  #best-sellers .weekly-offer-card {
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 3b) Badges de confiance : ramen�s SOUS la banni�re (plus de marge n�gative
     qui les remontait au-dessus) et dispos�s en grille 2 colonnes horizontale. */
  .trust-bar {
    margin-top: 18px !important;
    top: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 12px !important;
    padding: 20px 16px !important;
  }
  .trust-bar .trust-item {
    min-width: 0 !important;
  }
  .trust-bar .trust-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }
  .trust-bar .trust-title {
    font-size: 11px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }
  .trust-bar .trust-subtitle {
    font-size: 10px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }
  .trust-bar .trust-item:last-child {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
  }

  /* 5) Avis clients : cartes plus �troites pour voir au moins 2 avis � la fois. */
  .reviews-track {
    grid-template-columns: repeat(6, 166px) !important;
    gap: 10px !important;
  }
  .review-card {
    min-height: 0 !important;
    padding: 12px !important;
  }
  .review-stars { font-size: 13px !important; margin-bottom: 6px !important; }
  .review-date { margin-bottom: 6px !important; font-size: 10px !important; }
  .review-text {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 6 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* 6) Collections : les 3 pastilles sur une seule ligne horizontale (chips compactes). */
  .banner-promo .banner-text .banner-pills {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .banner-promo .banner-text .banner-pills li {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
  }
  .banner-promo .banner-text .banner-pills li strong {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }
  .banner-promo .banner-text .banner-pills li span {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }
  .banner-promo .banner-text .banner-pills .pill-icon-wrap {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
  }
  /* Bouton � Parcourir la collection � sur une seule ligne. */
  .banner-promo .banner-text .btn-primary {
    white-space: nowrap !important;
  }

  /* 7) Footer : pastilles compactes sur une seule rang�e. */
  .footer-brand-panel {
    padding: 14px 10px !important;
  }
  .footer-pill-row {
    width: 100% !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 5px !important;
  }
  .footer-pill {
    padding: 5px 7px !important;
    font-size: 9px !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }
  .footer-pill i,
  .footer-pill svg {
    display: none !important;
  }

  /* 8) Blocs � Contact � et � Suivez-nous � : chacun seul sur sa rang�e,
        contenu dispos� horizontalement. */
  .footer-content .footer-contact-panel,
  .footer-content .footer-social-panel {
    grid-column: 1 / -1 !important;
  }

  /* Contact : t�l�phone, email et adresse c�te � c�te sur une seule rang�e. */
  .footer-contact-panel .contact-info {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .footer-contact-panel .contact-row {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border-bottom: none !important;
  }
  .footer-contact-panel .contact-row > div {
    align-items: center !important;
    text-align: center !important;
  }
  .footer-contact-panel .contact-row strong {
    font-size: 11px !important;
  }
  .footer-contact-panel .contact-row span {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }

  /* Suivez-nous : Instagram, TikTok et Facebook sur la m�me rang�e. */
  .footer-social-panel .footer-social-icons {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }
}

/* ============================================================
   FIX FINAL - Carousel � offre de la semaine � sur mobile / tablette.
   L'ancien design (banni�re unique) figeait le shell a 360/300/615px,
   ce qui tronquait les cartes d'offres par le bas et zoomait l'image.
   On rend au bloc le ratio 2:3 de la banni�re (identique a l'image
   1024x1536 -> aucun rognage), centr�, avec une hauteur suffisante
   pour afficher tout le contenu des cartes. Plac� en fin de fichier
   pour primer sur les r�gles !important pr�c�dentes.
   ============================================================ */
@media (max-width: 1024px) {
  #best-sellers .weekly-offer-side {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #best-sellers .weekly-offer-shell {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    /* Le visuel weekly est en position:absolute (inset:0) : la hauteur doit
       venir du shell. On lui donne le même ratio portrait que le desktop
       (340/600 ≈ ratio de la bannière verticale 944×1666) -> l'image remplit
       toute la largeur, aucune bande grise, aucun effondrement. */
    aspect-ratio: 340 / 600 !important;
    margin: 0 !important;
    margin-top: 0 !important;
  }
  #best-sellers .weekly-offer-card,
  #best-sellers .weekly-offer-focus-card {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 0 !important;
  }
  #best-sellers .weekly-offer-visual,
  #best-sellers .weekly-offer-visual img {
    width: 100% !important;
    height: 100% !important;
  }
  #best-sellers .weekly-offer-visual img,
  #best-sellers .weekly-offer-visual.is-portrait img,
  #best-sellers .weekly-offer-visual.is-landscape img {
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* ============================================================
   OFFRE DU MOMENT — IMAGE MOBILE DÉDIÉE (image_url_mobile).
   Quand une image mobile est configurée pour la slide, app.js pose
   la classe .wo-has-mobile sur le bloc. On annule alors l'aspect-ratio
   portrait 340/600 forcé plus haut (qui faisait ~619px de haut, quasi
   plein écran) et on laisse l'image mobile s'afficher à son ratio
   naturel (conseillé 4:5, ex. 1080 × 1350 px) — aucune découpe.
   Placé après le "FIX FINAL" + sélecteur plus spécifique => prime.
   ============================================================ */
@media (max-width: 1024px) {
  #best-sellers .weekly-offer-side.wo-has-mobile,
  #best-sellers .weekly-offer-shell.wo-has-mobile,
  #best-sellers .wo-has-mobile .weekly-offer-card,
  #best-sellers .wo-has-mobile .weekly-offer-focus-card {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }
  #best-sellers .weekly-offer-shell.wo-has-mobile {
    margin-top: 0 !important;
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #best-sellers .wo-has-mobile .weekly-offer-visual {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
  }
  #best-sellers .wo-has-mobile .weekly-offer-visual img,
  #best-sellers .wo-has-mobile .weekly-offer-visual.is-portrait img,
  #best-sellers .wo-has-mobile .weekly-offer-visual.is-landscape img,
  #best-sellers .wo-has-mobile .weekly-offer-visual picture,
  #best-sellers .wo-has-mobile .weekly-offer-visual picture img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
  /* Bannière déjà compacte : on masque le bouton CTA (toute l'image reste
     cliquable via son lien) pour ne pas surcharger. */
  #best-sellers .wo-has-mobile .weekly-offer-content .btn {
    display: none !important;
  }
  /* Espace vertical équilibré : ~30px au-dessus (le bloc était collé) et le
     même en dessous (on réduit le padding-bas de la section pour compenser la
     marge de la barre de confiance qui suit). */
  #best-sellers .weekly-offer-side.wo-has-mobile {
    margin-top: 30px !important;
  }
  #best-sellers:has(.weekly-offer-side.wo-has-mobile) {
    padding-bottom: 4px !important;
  }
  /* Les points de pagination passaient en flux normal sous l'image (fond
     blanc = petit bandeau). On les superpose au bas de l'image. */
  #best-sellers .wo-has-mobile .weekly-offer-dots {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 10px !important;
    margin: 0 !important;
    z-index: 9 !important;
  }
}

/* Sur telephone : l'espace occupe toute la largeur disponible (aucun
   bandeau vertical blanc a gauche/droite de l'image principale). */
@media (max-width: 600px) {
  #best-sellers .best-sellers-layout {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #best-sellers .weekly-offer-side,
  #best-sellers .weekly-offer-shell {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* La 1ere slide (banniere 3+1) etait limitee a 300px -> bandeaux blancs.
     On la fait remplir toute la largeur du bloc comme les autres offres. */
  #best-sellers .weekly-slide--banner .weekly-offer-card,
  #best-sellers .weekly-slide--banner .weekly-offer-focus-card,
  #best-sellers .weekly-slide--banner .weekly-offer-visual {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ===========================================================
   PAGE A PROPOS - refonte premium compacte
   =========================================================== */
.about-page-main {
  padding-bottom: 56px;
}

/* ---- Hero (2 colonnes : texte + panneau infos) ---- */
.about-hero {
  display: grid;
  grid-template-columns: 1.35fr 0.95fr;
  gap: 36px;
  align-items: center;
  padding: 40px 0 6px;
}
.about-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(124, 92, 255, .08);
  border: 1px solid var(--puffs-border);
  color: var(--puffs-purple);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.about-kicker i {
  font-size: 14px;
}
.about-hero h1 {
  margin: 14px 0 0;
  font-size: 33px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1px;
  background: linear-gradient(120deg, var(--puffs-purple) 0%, #9d5cff 48%, #b44cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--puffs-purple);
}
.about-lead {
  max-width: 560px;
  margin: 14px 0 0;
  color: #5b5478;
  font-size: 15.5px;
  line-height: 1.65;
}
.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ---- Panneau infos ---- */
.about-factcard {
  background: #fff;
  border: 1px solid var(--puffs-border);
  border-radius: var(--puffs-radius-lg);
  padding: 24px 22px;
  box-shadow: var(--puffs-shadow-soft);
}
.about-factcard-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--puffs-purple);
}
.about-factlist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.about-factlist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 0;
}
.about-factlist li:last-child {
  padding-bottom: 0;
}
.about-factlist li + li {
  border-top: 1px solid rgba(124, 92, 255, .10);
}
.about-fact-ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(124, 92, 255, .14), rgba(180, 76, 255, .14));
  color: var(--puffs-purple);
  font-size: 19px;
}
.about-factlist strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #1d1733;
}
.about-factlist div span {
  display: block;
  font-size: 13px;
  color: var(--puffs-muted);
  line-height: 1.45;
  margin-top: 2px;
}

/* ---- Statistiques (bande compacte) ---- */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 34px 0 0;
}
.about-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--puffs-border);
  border-radius: var(--puffs-radius-md);
  padding: 16px 18px;
  box-shadow: var(--puffs-shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.about-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(124, 92, 255, .12);
}
.about-stat-ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(124, 92, 255, .14), rgba(180, 76, 255, .14));
  color: var(--puffs-purple);
  font-size: 20px;
}
.about-stat-body {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.about-stat-num {
  font-size: 18px;
  font-weight: 800;
  color: #1d1733;
  letter-spacing: -.4px;
}
.about-stat-label {
  font-size: 12.5px;
  color: var(--puffs-muted);
  font-weight: 600;
}

/* ---- En-tete de section (aligne a gauche) ---- */
.about-section-head {
  max-width: 640px;
  margin: 0 0 20px;
}
.about-section-head .about-kicker {
  margin-bottom: 12px;
}
.about-section-head h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.6px;
  color: #1d1733;
}
.about-section-head p {
  margin: 10px 0 0;
  color: #5b5478;
  font-size: 15px;
  line-height: 1.6;
}

/* ---- Histoire (prose 2 colonnes) ---- */
.about-story {
  margin-top: 46px;
}
.about-story-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.about-story-cols p {
  margin: 0;
  color: #5b5478;
  font-size: 15px;
  line-height: 1.75;
}

/* ---- Cartes valeurs (icone inline, texte descriptif) ---- */
.about-values {
  margin-top: 46px;
}
.about-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.about-value-card {
  display: flex;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--puffs-border);
  border-radius: var(--puffs-radius-md);
  padding: 22px 20px;
  box-shadow: var(--puffs-shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.about-value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(124, 92, 255, .13);
}
.about-value-ico {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--puffs-purple), #b44cff);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 8px 18px rgba(124, 92, 255, .26);
}
.about-value-body h3 {
  margin: 2px 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #1d1733;
}
.about-value-body p {
  margin: 0;
  color: var(--puffs-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* ---- Appel a l'action (compact, horizontal) ---- */
.about-cta {
  margin: 46px 0 0;
}
.about-cta-inner {
  position: relative;
  overflow: hidden;
  border-radius: var(--puffs-radius-lg);
  padding: 30px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(130deg, #7c5cff 0%, #9d5cff 50%, #b44cff 100%);
  box-shadow: 0 22px 50px rgba(124, 92, 255, .26);
}
.about-cta-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 120% at 100% 0%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 60%);
}
.about-cta-text {
  position: relative;
}
.about-cta-inner h2 {
  margin: 0;
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.5px;
}
.about-cta-inner p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, .92);
  font-size: 14.5px;
}
.about-cta-inner .btn {
  position: relative;
  flex: none;
  background: #fff;
  color: var(--puffs-purple);
  border: none;
  white-space: nowrap;
}
.about-cta-inner .btn:hover {
  background: #f5f1ff;
  transform: translateY(-2px);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .about-hero {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-top: 32px;
  }
  .about-story-cols {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .about-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-value-grid {
    grid-template-columns: 1fr;
  }
  .about-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
  }
}
@media (max-width: 560px) {
  .about-hero h1 {
    font-size: 26px;
  }
  .about-hero-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }
  .about-section-head h2 {
    font-size: 22px;
  }
  .about-cta-inner .btn {
    width: 100%;
    text-align: center;
  }
}

/* ---- Nos partenaires ---- */
.section.partners {
  padding: 30px 0 46px;
  background:
    radial-gradient(1200px 320px at 15% 0%, rgba(124, 92, 255, 0.12), transparent 60%),
    radial-gradient(1000px 320px at 90% 100%, rgba(255, 110, 196, 0.12), transparent 60%),
    linear-gradient(135deg, #f4edff 0%, #fbf8ff 50%, #ffeef8 100%);
}
.partners-head {
  margin-bottom: 22px !important;
}
.partners-intro {
  -webkit-line-clamp: none;
  line-clamp: none;
  display: block;
  max-width: 72ch;
}
.partners-grid {
  list-style: none;
  margin: 0;
  padding: 20px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 8px;
  border: 2px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(120deg, #7c5cff 0%, #b06cff 48%, #ff6ec4 100%) border-box;
  box-shadow: 0 16px 40px rgba(124, 92, 255, 0.16);
}
.partner-card {
  flex: 0 1 calc(20% - 8px);
  max-width: calc(20% - 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 6px 12px;
  border-radius: 14px;
}
.partner-card img {
  height: 30px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Logos legerement agrandis pour equilibrer le rendu visuel */
.partner-card img[src$="elfbar.png"],
.partner-card img[src$="lost mary.png"],
.partner-card img[src$="kush cbd.png"],
.partner-card img[src$="fruizee.png"],
.partner-card img[src$="askip.png"],
.partner-card img[src$="jnr.png"] {
  height: 38px;
}
@media (max-width: 900px) {
  .section.partners {
    padding: 26px 0 40px;
  }
  .partners-grid {
    padding: 18px 16px;
    gap: 12px 6px;
  }
  .partner-card {
    flex: 0 1 calc(33.333% - 8px);
    max-width: calc(33.333% - 8px);
    height: 44px;
    padding: 6px 10px;
  }
}
@media (max-width: 560px) {
  .partners-grid {
    padding: 16px 12px;
    gap: 10px 6px;
    border-radius: 18px;
  }
  .partner-card {
    flex: 0 1 calc(33.333% - 6px);
    max-width: calc(33.333% - 6px);
    height: 40px;
    padding: 5px 8px;
  }
  .partner-card img {
    height: 26px;
  }
  .partner-card img[src$="elfbar.png"],
  .partner-card img[src$="lost mary.png"],
  .partner-card img[src$="kush cbd.png"],
  .partner-card img[src$="fruizee.png"],
  .partner-card img[src$="askip.png"],
  .partner-card img[src$="jnr.png"] {
    height: 33px;
  }
}

/* Images produits (fond transparent) : ombre allégée pour éviter le halo gris
   sur les cartes blanches de la section newcomers. */
#newcomers #new-products > .product-item .product-image img,
#newcomers #new-products .product-image img,
#newcomers .product-image img,
#newcomers .product-item > img {
  filter: drop-shadow(0 6px 10px rgba(17, 24, 39, .06)) !important;
}

/* ============================================================
   FIX - Trust bar : jamais superposee a l'offre de la semaine.
   La regle de base « .trust-bar { margin-top:-135px } » (placee apres
   les media queries) les ecrasait et provoquait un chevauchement de
   ~93px avec l'offre des que le bloc best-sellers passe en colonne
   unique (<=1024px). On force ici une marge positive sur ces
   resolutions ; le layout desktop (2 colonnes, >1024px) garde son
   rendu d'origine. Place en toute fin de fichier pour primer.
   ============================================================ */
@media (max-width: 1024px) {
  .trust-bar {
    margin-top: 26px !important;
  }
}

/* ============================================================
   FIX - Best-sellers : conserver le layout 2 colonnes (carrousel
   produits a gauche + offre de la semaine a droite) de 768px a 1024px.
   Avant, la regle « best-sellers-layout { grid-template-columns:
   minmax(0,1fr) } » a <=1024px empilait tout en 1 colonne et l'offre
   passait en pleine largeur SOUS les produits. On ne veut empiler que
   sous 768px (mobile). Ce bloc prime (source order + specificite egale)
   sur les regles <=1024px precedentes. Cible testee : 1024x600 (Nest Hub).
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  #best-sellers .best-sellers-layout {
    grid-template-columns: 1.2fr 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
  }
  #best-sellers .best-sellers-products {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
  }
  /* Panneau mauve (fond du bloc best-seller) : bord droit en % pour qu'il
     suive la colonne produits a toutes les largeurs (768->1024) et couvre
     les 2 cartes ; on l'etend aussi vers le bas (padding sous les avis) */
  #best-sellers .best-sellers-layout::before {
    right: 44% !important;
    bottom: 6px !important;
  }
  /* Carrousel produits : 2 cartes tiennent entierement dans le cadre */
  #best-sellers #featured-products {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 16px !important;
  }
  #best-sellers #featured-products > .product-item {
    flex: 0 0 calc((100% - 16px) / 2) !important;
    width: calc((100% - 16px) / 2) !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  /* Offre de la semaine : legerement plus etroite (collee a droite) mais
     proche des cartes (peu de mou a gauche) + remontee au niveau du wrapper,
     bas aligne sur le panneau */
  #best-sellers .weekly-offer-side {
    width: calc(100% - 20px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    margin: -175px 0 6px auto !important;
    padding: 0 !important;
  }
  #best-sellers .weekly-offer-shell {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
  }
  #best-sellers .weekly-carousel,
  #best-sellers .weekly-carousel-track,
  #best-sellers .weekly-slide,
  #best-sellers .wo-offer-card {
    height: 100% !important;
    min-height: 0 !important;
  }
  /* Badges de confiance : 2 colonnes -> 3 rangees (2 + 2 + 1), le 5e badge
     prend toute la largeur, sur tablette (768-1024) */
  .trust-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 16px !important;
  }
  .trust-bar .trust-item:nth-child(5) {
    grid-column: 1 / -1 !important;
  }
  /* Titres + paragraphes des showcases (Elfbar / Lost Mary / Toujours +) :
     alignes a gauche. Le header est en colonne + align-items:flex-end sur
     tablette, ce qui poussait le bloc titre/intro vers la droite. */
  #elfbar-showcase .brand-showcase-title-wrap,
  #lostmary-showcase .brand-showcase-title-wrap,
  #alwaysplus-showcase .brand-showcase-title-wrap {
    align-self: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }
}

/* ============================================================
   HOME - Bloc "FAQ & Blog" scinde en deux (FAQ a gauche,
   derniers articles du blog a droite). Chaque cote a son propre
   titre + lien ("Voir toutes les questions" / "Decouvrir le blog").
   ============================================================ */
.brand-faq-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 22px;
  align-items: stretch;
}
.brand-faq-side {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  background: var(--puffs-card);
  border: 1px solid var(--puffs-border);
  border-radius: var(--puffs-radius-md);
  box-shadow: var(--puffs-shadow-soft);
}
.brand-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.brand-side-title {
  margin: 0;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--puffs-ink);
}
.brand-side-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--puffs-purple-dark);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
  transition: gap .2s ease, color .18s ease;
}
.brand-side-link i { font-size: 1rem; transition: transform .2s ease; }
.brand-side-link:hover { gap: 9px; color: var(--puffs-pink); }
.brand-side-link:hover i { transform: translateX(3px); }

/* Liste des questions (les .faq-item heritent du style global) */
.brand-faq-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.brand-faq-items .faq-question { font-size: 14.5px; padding: 15px 18px; }
.brand-faq-items .faq-answer { padding: 0 18px 15px; }
.brand-faq-items .faq-answer p { font-size: 13.8px; }

/* Liste des derniers articles */
.home-blog-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-blog-card {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--puffs-border);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.home-blog-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 92, 255, .3);
  box-shadow: var(--puffs-shadow-soft);
}
.home-blog-thumb {
  flex: 0 0 96px;
  width: 96px;
  align-self: stretch;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(124, 92, 255, .12), rgba(255, 79, 216, .10));
}
.home-blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-blog-thumb i {
  font-size: 1.6rem;
  color: var(--puffs-purple);
}
.home-blog-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.home-blog-cat {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(124, 92, 255, .10);
  color: var(--puffs-purple-dark);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.home-blog-title {
  margin: 0;
  font-family: "Outfit", Inter, Arial, sans-serif;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.2px;
  color: var(--puffs-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-blog-meta {
  font-size: .78rem;
  font-weight: 600;
  color: var(--puffs-muted);
}
.home-blog-meta i { margin-right: 5px; vertical-align: -1px; }

@media (max-width: 900px) {
  .brand-faq-split {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
@media (max-width: 480px) {
  .brand-faq-side { padding: 20px 16px; }
  .home-blog-thumb { flex-basis: 80px; width: 80px; }
}

/* =====================================================
   FLECHES CARROUSELS - anti-chevauchement des infos carte
   Les fleches etaient centrees verticalement (top 42-50%)
   et recouvraient le nom / prix / note / bouton des cartes.
   On les recale sur la bande image (haut de la carte) pour
   qu'elles ne cachent plus aucune information importante.
   Valable best-sellers, nouveautes, Elfbar, Lost Mary,
   Toujours + et avis clients - desktop, petit ecran & mobile.
===================================================== */

/* Carrousels produits : fleches alignees sur l'image */
#best-sellers .carousel-prev,
#best-sellers .carousel-next,
#newcomers .carousel-prev,
#newcomers .carousel-next,
#elfbar-showcase .carousel-prev,
#elfbar-showcase .carousel-next,
#lostmary-showcase .carousel-prev,
#lostmary-showcase .carousel-next,
#alwaysplus-showcase .carousel-prev,
#alwaysplus-showcase .carousel-next {
  top: 27% !important;
}

/* Petits ecrans : cartes un peu plus courtes, l'image reste en haut */
@media (max-width: 640px) {
  #best-sellers .carousel-prev,
  #best-sellers .carousel-next,
  #newcomers .carousel-prev,
  #newcomers .carousel-next,
  #elfbar-showcase .carousel-prev,
  #elfbar-showcase .carousel-next,
  #lostmary-showcase .carousel-prev,
  #lostmary-showcase .carousel-next,
  #alwaysplus-showcase .carousel-prev,
  #alwaysplus-showcase .carousel-next {
    top: 25% !important;
  }
}

/* Avis clients : fleches deplacees dans la gouttiere laterale
   (hors des cartes) grace a un retrait horizontal de la piste. */
@media (min-width: 901px) {
  .reviews-track {
    padding-left: 54px !important;
    padding-right: 54px !important;
  }
  .reviews-prev { left: 6px !important; }
  .reviews-next { right: 6px !important; }
}

/* Mobile / tablette : on masque les fleches d'avis (le swipe suffit).
   La regle d'origine .reviews-nav{display:none} etait neutralisee par
   le display:flex !important de base : on la retablit ici. */
@media (max-width: 900px) {
  .reviews-nav,
  .reviews-prev,
  .reviews-next {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   NOMS PRODUITS COMPLETS (cartes accueil) — sur mobile les cartes
   sont etroites : les noms longs debordaient sur 3 lignes et
   etaient coupes par `max-height: 38px` + `overflow: hidden`.
   On retire cette troncature verticale (on garde `min-height`
   pour l'alignement) afin que le nom s'affiche en entier, sur
   autant de lignes que necessaire, comme sur desktop.
   Chaque selecteur (y compris les variantes `.product-details h3`
   et `> .product-item h3` a specificite plus haute) est repris ici
   a l'identique, en fin de fichier => il l'emporte sur la troncature.
───────────────────────────────────────────────────────────── */
#best-sellers .product-title,
#newcomers .product-title,
#newcomers .product-details h3,
#new-products > .product-item .product-title,
#elfbar-products > .product-item .product-title,
#lostmary-products > .product-item .product-title,
#alwaysplus-products > .product-item .product-title,
#new-products > .product-item .product-details h3,
#elfbar-products > .product-item .product-details h3,
#lostmary-products > .product-item .product-details h3,
#alwaysplus-products > .product-item .product-details h3,
#best-sellers #featured-products > .product-item .product-title,
#best-sellers #featured-products > .product-item h3,
#newcomers #new-products > .product-item .product-title,
#newcomers #new-products > .product-item h3,
#newcomers #new-products .pc-card .product-title,
#elfbar-products .pc-card .product-title,
#lostmary-products .pc-card .product-title,
#alwaysplus-products .pc-card .product-title,
#best-sellers #featured-products .pc-card .product-title {
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* =====================================================
   BANNIÈRE PROGRAMME DE FIDÉLITÉ (page d'accueil)
===================================================== */
.loyalty-banner-section {
  padding: 8px 0 40px;
}
/* En-tête (badge + titre + paragraphe) au-dessus de la bannière, dans le même
   style que les blocs marques (Toujours +…) : le paragraphe garde son
   indentation et sa petite barre violette à gauche (.brand-showcase-intro). */
.loyalty-banner-head {
  margin-bottom: 20px;
}
.loyalty-banner-link {
  display: block;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(124, 92, 255, .12);
}
.loyalty-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}
/* Version desktop : l'image a des bandeaux blancs (~16%) en haut et en bas.
   On les rogne de façon PROPORTIONNELLE (et non en pixels fixes) pour que le
   cadrage reste identique quelle que soit la largeur (desktop, iPad…). On fixe
   le ratio du contenu visible (2171×494) et object-fit:cover masque les bandes,
   centrées. */
.loyalty-banner-desktop {
  aspect-ratio: 2171 / 494;
  object-fit: cover;
  object-position: center;
}
/* Version mobile (portrait) : masquée par défaut, affichée sous 640px. */
.loyalty-banner-mobile {
  display: none;
}
@media (max-width: 640px) {
  .loyalty-banner-section { padding: 4px 0 28px; }
  .loyalty-banner-link,
  .loyalty-banner-img { border-radius: 16px; }
  .loyalty-banner-desktop { display: none; }
  .loyalty-banner-mobile { display: block; }
}

/* ── Product page: out-of-stock add-to-cart CTA ── */
#add-to-cart.is-out-of-stock,
#add-to-cart:disabled {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 1;
}

/* ── Product page: per-variant stock note (Plus que X / En rupture) ── */
/* Style premium : pastille douce a degrade, point pulsant, typo raffinee. */
.product-stock-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  padding: 5px 13px 5px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(2px);
}
.product-stock-note[hidden] { display: none; }
.product-stock-note::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
  animation: stockNotePulse 1.9s ease-out infinite;
}
.product-stock-note.is-low {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  color: #c2410c;
  border: 1px solid rgba(234, 88, 12, 0.22);
  box-shadow: 0 6px 16px rgba(234, 88, 12, 0.14);
}
.product-stock-note.is-out {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.22);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.14);
}
@keyframes stockNotePulse {
  0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70% { box-shadow: 0 0 0 5px rgba(0, 0, 0, 0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .product-stock-note::before { animation: none; }
}