/*──────────────────────────────────────────────
  TYPOGRAPHIE
  Les polices sont pilotées ici et nulle part ailleurs : changer la typo du
  site = changer ces trois lignes. Les <link> Google Fonts des pages doivent
  charger les memes familles (voir le head des *.html).
  --font-ui      : tout le texte courant, boutons, prix, filtres…
  --font-display : gros titres (hero, banniere CTA, logo du menu mobile)
  --font-logo    : logo du footer uniquement
──────────────────────────────────────────────*/
:root {
  --font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: Lancelot, 'Times New Roman', Georgia, serif;
  --font-logo: 'Instrument Serif', 'Times New Roman', Georgia, serif;
}

/*──────────────────────────────────────────────
  RESET & BASE
──────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: #09090b; color: #fafafa;
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 400; line-height: 20px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; border: none; background: none; color: inherit; }

/*──────────────────────────────────────────────
  ACCESSIBILITY — keyboard focus (skill: focus-states, CRITICAL)
  Visible ring only for keyboard nav; mouse clicks stay clean.
──────────────────────────────────────────────*/
:focus-visible {
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Inputs already restyle their border on :focus — give them the ring too */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 0;
}
/* Remove the legacy mouse-focus outline suppression fallback */
:focus:not(:focus-visible) { outline: none; }

/* Inline SVG icons (replace structural emojis) */
.nx-ico { display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }
.pc-label .nx-ico { width: 12px; height: 12px; }
.co-pm-btn__icon .nx-ico { width: 15px; height: 15px; }

/*──────────────────────────────────────────────
  BUTTONS
──────────────────────────────────────────────*/
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff; color: #000;
  font-family: var(--font-ui); font-size: 14px; font-weight: 500; line-height: 20px;
  padding: 6px 14px; height: 36px; border-radius: 6px; border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
  transition: background 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
}
.btn-primary:hover  { background: #f0f0f0; box-shadow: 0 4px 6px rgba(0,0,0,.15); }
.btn-primary:active { background: #e0e0e0; }

.btn-primary--lg { height: 44px; padding: 0 24px; font-size: 15px; }

/* Hero "Explore Products" CTA — shadcn-style white pill button */
#heroCta1 {
  height: 36px; padding: 0 20px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.10);
  font-size: 14px; font-weight: 500; cursor: pointer;
}
#heroCta1:hover {
  background: #fff;
  box-shadow: 0 6px 20px rgba(255,255,255,.20);
}
@media (max-width: 639px) {
  #heroCta1 { width: 100%; }
}

/* Hero "Join Support" — same box as #heroCta1, only the colour differs. */
#heroCta2 {
  height: 36px; padding: 0 20px;
  border-radius: 8px;
  font-size: 14px; font-weight: 500; line-height: 20px;
}
@media (max-width: 639px) {
  #heroCta2 { width: 100%; }
}

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: #fff;
  font-family: var(--font-ui); font-size: 14px; font-weight: 400; line-height: 20px;
  padding: 6px 10px; height: 38px; border-radius: 6px;
  border: 1px solid transparent;
  transition: background 200ms ease, border-color 200ms ease;
  white-space: nowrap;
}
.btn-ghost:hover  { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); }
.btn-ghost:active { background: rgba(255,255,255,.15); }

.btn-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,.05); color: #fff;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; line-height: 19.5px;
  padding: 8px 20px; height: 44px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.15);
  transition: background 200ms ease, border-color 200ms ease;
  white-space: nowrap;
}
.btn-pill:hover  { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.30); }
.btn-pill:active { background: rgba(255,255,255,.12); }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #fff;
  width: 38px; height: 38px; border-radius: 6px;
  border: 1px solid transparent;
  transition: background 200ms ease;
  flex-shrink: 0;
}
.btn-icon:hover  { background: rgba(255,255,255,.10); }
.btn-icon:active { background: rgba(255,255,255,.15); }

.btn-buy {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: #fff; color: #000;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; line-height: 18px;
  padding: 5px 12px; height: 30px; border-radius: 5px; border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
  transition: background 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
}
.btn-buy:hover  { background: #f0f0f0; box-shadow: 0 4px 6px rgba(0,0,0,.15); }
.btn-buy:active { background: #e0e0e0; transform: scale(.98); }

/*──────────────────────────────────────────────
  BADGE
──────────────────────────────────────────────*/
.badge {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.10); color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 4px 8px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.20);
}
.badge--sale { background: rgba(255,68,68,.15); border-color: rgba(255,68,68,.30); color: #ff7070; }
.badge--new  { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.30); }
.badge--hot  { background: rgba(255,160,30,.12); border-color: rgba(255,160,30,.30); color: #ffb347; }

/*──────────────────────────────────────────────
  NAVIGATION
──────────────────────────────────────────────*/
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  /* Bande plus haute : 52 px etait tres serre, la tuile panier (50 px) la
     remplissait entierement. 72 px laisse respirer les elements. */
  height: 72px;
  background: rgba(9,9,11,.8);
  border-bottom: 1px solid rgba(255,255,255,.04);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.nav__inner {
  width: 100%; height: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 0 28px;
}
.nav__logo {
  font-family: var(--font-ui);
  font-size: 16px; font-weight: 700; color: #fff;
  letter-spacing: -.2px; flex-shrink: 0;
}
.nav__links {
  display: flex; align-items: center; list-style: none;
  justify-content: center;
}
.nav__links a {
  display: flex; align-items: center;
  padding: 0 15px; height: 72px;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,.60);
  transition: color 200ms ease;
}
.nav__links a:hover { color: #fff; }
.nav__links a.active { color: #fff; font-weight: 500; }

.nav__actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

/* ── Panier et connexion dans la barre ──
   Pas d'encadré : même traitement que les liens Home / Shop / Support, à
   savoir texte 14 px, gris atténué, blanc au survol. Une seule règle pour les
   deux, sinon elles divergeraient au premier ajustement. */
.nav__cart,
.nav__login {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  height: 72px; padding: 0 12px;
  background: transparent; border: none; border-radius: 0;
  color: rgba(255,255,255,.60); cursor: pointer;
  font-family: var(--font-ui); font-size: 14px; font-weight: 500;
  transition: color 200ms ease;
}
.nav__cart:hover,
.nav__login:hover { color: #fff; }

.nav__cart-label,
.nav__login-label {
  font-size: 14px; font-weight: 500; color: inherit; line-height: 1;
}

/* Le compteur suit le libellé, dans le flux : sans encadré autour du panier,
   une pastille en position absolue n'aurait plus rien à quoi s'accrocher. */
.nav__cart-count {
  background: #fff; color: #000;
  font-size: 10px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 9999px;
  /* Affiché uniquement quand le panier n'est pas vide : c'est updateCartCount()
     qui ajoute « is-visible ». Avant, la règle etait « display:none » sans que
     rien ne la lève : le compteur ne s'affichait donc jamais. */
  display: none; align-items: center; justify-content: center;
  padding: 0 5px;
  transform: scale(1); transition: transform 300ms cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.nav__cart-count.is-visible { display: inline-flex; }
.nav__cart-count.bump { transform: scale(1.35); }

.nav__hamburger { display: none; }
.nav.scrolled { background: rgba(9,9,11,.95); box-shadow: 0 1px 0 rgba(255,255,255,.06); }

/* .nav__login est desormais une tuile, regroupee plus haut avec .nav__cart. */

/* Sélecteur de langue retiré : remplacé par le panier dans la barre de nav. */

/*──────────────────────────────────────────────
  MOBILE DRAWER
──────────────────────────────────────────────*/
.drawer-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
}
.drawer-overlay.open { display: block; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 301;
  width: 280px; background: #09090b;
  border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: -20px 0 40px rgba(0,0,0,.4);
  transform: translateX(100%); transition: transform 300ms ease;
  display: flex; flex-direction: column; padding: 24px;
}
.drawer.open { transform: translateX(0); }

.drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 32px;
}
.drawer__logo { font-family: var(--font-display); font-size: 22px; }

.drawer__links { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.drawer__links a {
  display: block; padding: 12px 0;
  font-size: 18px; font-weight: 400; line-height: 26px; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.06);
  opacity: .75; transition: opacity 200ms ease;
}
.drawer__links a:hover,
.drawer__links a.active { opacity: 1; }
.drawer__links a.active { font-weight: 600; }

/*──────────────────────────────────────────────
  HERO
──────────────────────────────────────────────*/
.hero {
  min-height: 70vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 120px 80px 80px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,.04) 0%, transparent 70%);
}
.hero__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 32px;
}
.hero__eyebrow-line { width: 40px; height: 1px; background: rgba(255,255,255,.30); }
.hero__eyebrow-text {
  font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 96px); font-weight: 500; line-height: 1.1;
  margin-bottom: 24px;
}
.hero__sub {
  font-size: 18px; font-weight: 400; line-height: 28px;
  color: rgba(255,255,255,.55); max-width: 520px; margin: 0 auto 48px;
}
.hero__cta {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.hero__scroll { display: none; }

/*──────────────────────────────────────────────
  STATS BAR
──────────────────────────────────────────────*/
.stats-bar {
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 40px 80px;
}
.stats-bar__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 32px;
}
.stat { text-align: center; }
.stat__number {
  font-family: var(--font-display); font-size: 48px; font-weight: 500; line-height: 1;
  margin-bottom: 6px;
}
.stat__label {
  font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,.40);
}

/*──────────────────────────────────────────────
  SECTIONS
──────────────────────────────────────────────*/
.section { padding: 80px; max-width: 1440px; margin: 0 auto; }
.section__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 40px;
}
.section__title { font-size: 18px; font-weight: 700; line-height: 28px; }
.section__divider { width: 100%; height: 1px; background: rgba(255,255,255,.07); }

/*──────────────────────────────────────────────
  CATEGORIES
──────────────────────────────────────────────*/
.categories-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.category-card {
  background: #09090b;
  border: 1px solid rgba(255,255,255,.10); border-radius: 8px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
  cursor: pointer; color: #fff;
  transition: border-color 250ms ease, background 250ms ease,
              transform 250ms ease, box-shadow 250ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.category-card:hover {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.025);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.category-card.active {
  border-color: rgba(255,255,255,.50);
  background: rgba(255,255,255,.04);
}
.category-card__icon { font-size: 30px; }
.category-card__name { font-size: 15px; font-weight: 700; line-height: 22px; }
.category-card__count { font-size: 13px; color: rgba(255,255,255,.40); }
.category-card__arrow {
  margin-top: auto; font-size: 18px; color: rgba(255,255,255,.25);
  transition: color 200ms ease, transform 200ms ease;
}
.category-card:hover .category-card__arrow { color: rgba(255,255,255,.70); transform: translateX(4px); }

/*──────────────────────────────────────────────
  FILTER CHIPS
──────────────────────────────────────────────*/
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-chip {
  display: inline-flex; align-items: center;
  background: transparent; color: rgba(255,255,255,.55);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; line-height: 19.5px;
  padding: 6px 16px; height: 34px; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.15);
  cursor: pointer; transition: all 200ms ease;
}
.filter-chip:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.28); color: #fff; }
.filter-chip.active { background: #fff; color: #000; border-color: #fff; }

/*──────────────────────────────────────────────
  PRODUCT GRID & CARDS (DailyStore style)
──────────────────────────────────────────────*/
.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
/* Pages sans .shop-topbar : la grille reprend l'espacement que le titre donnait */
.shop-filterbar + .product-grid { margin-top: 32px; }

.product-card {
  position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 5/3;
  cursor: pointer; background: #0e0e0e;
  border: 1px solid rgba(255,255,255,.07);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  /* Staggered entrance via inline --i. 'backwards' fill keeps the FROM state
     during the delay but does NOT persist after, so :hover transform still works.
     Cap the index so large catalogs don't accumulate huge delays. */
  animation: revealUp 520ms cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: calc(min(var(--i, 0), 11) * 55ms);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  border-color: rgba(255,255,255,.18);
}
.product-card.hidden { display: none; }

/* ── Thumbnail ── */
.pc-thumb {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: flex-start;
}

/* Custom uploaded image — fills the whole banner, zooms on hover */
.pc-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 500ms ease;
}
.product-card:hover .pc-img { transform: scale(1.05); }

/* Top-left badge — dailystore glass pill: bg-white/10 + backdrop-blur-md */
.pc-label {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-size: 10px; font-weight: 500; letter-spacing: .2px;
  padding: 3px 8px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #e4e4e7;
}
.pc-label--featured, .pc-label--best, .pc-label--new, .pc-label--sale { background: rgba(255,255,255,.10); color: #e4e4e7; }

/* Brand row inside image */
.pc-brand {
  position: absolute; top: 36px; left: 12px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  color: rgba(255,255,255,.88); font-size: 12px; font-weight: 700;
}
.pc-brand-icon { font-size: 15px; line-height: 1; }

/* Large faded product name overlay */
.pc-big-text {
  position: absolute; left: 12px; bottom: 20px; z-index: 1;
  font-size: 34px; font-weight: 900; line-height: 1.05; letter-spacing: -1px;
  text-transform: uppercase; color: rgba(255,255,255,.11);
  max-width: 58%; word-break: break-word;
  pointer-events: none; user-select: none;
}

/* Decorative icon – right side */
.pc-visual {
  position: absolute; right: -8px; top: 50%; transform: translateY(-50%);
  font-size: 96px; opacity: .15; pointer-events: none; user-select: none; z-index: 1;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
}

/* Store watermark */
.pc-watermark {
  position: absolute; bottom: 7px; right: 10px; z-index: 2;
  font-size: 10px; font-weight: 600; letter-spacing: .5px;
  color: rgba(255,255,255,.22); user-select: none;
}

/* ── Info overlay — dailystore gradient: from-black/80 via-black/20 to-transparent ── */
.pc-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 40px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
  pointer-events: none;
}
.pc-info-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}
/* Stock badges — glass pills like dailystore (bg-white/10 + blur), colored dot + text */
.pc-stock {
  font-size: 10px; font-weight: 500; padding: 3px 8px; border-radius: 6px;
  letter-spacing: .2px; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pc-stock::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.pc-stock--in  { color: #4ade80; }
.pc-stock--in::before  { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,.8); }
.pc-stock--out { color: #f87171; }
.pc-stock--out::before { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,.8); }
.pc-rating { font-size: 12px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 3px; }
.pc-rating::before { content: '★'; color: #ffa317; font-size: 12px; }
.pc-rating-count { color: rgba(255,255,255,.45); font-size: 11px; font-weight: 600; }

.pc-title {
  font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px;
}
.pc-price-row { display: flex; align-items: center; }
.pc-price { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.3px; }
.pc-price-orig { font-size: 12px; color: rgba(255,255,255,.3); text-decoration: line-through; margin-right: 6px; }

/* Hover "Buy Now" overlay button (dailystore style) */
.pc-buy-hover {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 200ms ease;
  pointer-events: none;
}
.product-card:hover .pc-buy-hover { opacity: 1; }
.pc-buy-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  background: #18181b; color: #e4e4e7;
  font-size: 13px; font-weight: 500; letter-spacing: .4px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  transform: translateY(6px) scale(1);
  transition: transform 200ms ease, background 200ms ease, color 200ms ease;
}
.product-card:hover .pc-buy-btn { transform: translateY(0); }
.product-card:hover .pc-buy-btn:hover { background: #27272a; color: #fff; }
.product-card:active .pc-buy-btn { transform: scale(.97); }
.pc-buy-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/*──────────────────────────────────────────────
  SHOP LAYOUT
──────────────────────────────────────────────*/
.shop-layout {
  display: flex; align-items: flex-start;
  width: 100%; max-width: 1440px; margin: 0 auto;
  padding: 112px 32px 80px; gap: 0;
  min-height: 100vh;
}

/* ── Sidebar ── */
.sidebar {
  width: 240px; flex-shrink: 0;
  position: sticky; top: 72px;
  height: calc(100vh - 72px);
  overflow-y: auto; overflow-x: hidden;
  padding: 16px 0 40px;
  border-right: 1px solid rgba(255,255,255,.07);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

.sidebar__search { position: relative; margin: 0 8px 12px; }
.sidebar__search-input {
  width: 100%; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 6px;
  padding: 8px 36px 8px 34px;
  color: #fff; font-size: 13px; font-family: var(--font-ui);
  outline: none; height: 34px;
  transition: border-color 200ms ease;
}
.sidebar__search-input::placeholder { color: rgba(255,255,255,.30); }
.sidebar__search-input:focus { border-color: rgba(255,255,255,.40); }
.sidebar__search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.30); pointer-events: none;
}
.sidebar__search-kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.06); border-radius: 3px;
  padding: 1px 5px; font-family: var(--font-ui);
}

/* ── Dot indicator for section headers ── */
.sidebar__dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.20); flex-shrink: 0;
  transition: background 300ms ease, box-shadow 300ms ease;
}

/* Icône/logo de catégorie dans la sidebar (façon dailystore : TikTok, Netflix…).
   Affichée à la place du point quand la catégorie a une image. */
.sidebar__cat-icon {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  background: #18181b; border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.sidebar__cat-icon--img { padding: 0; }
.sidebar__cat-icon--img img {
  width: 100%; height: 100%; object-fit: contain; padding: 3px;
  border-radius: inherit; display: block;
}

.sidebar__section { margin-bottom: 16px; }
.sidebar__section-header {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; margin: 0 4px 4px;
  cursor: pointer; user-select: none;
  border-radius: 12px;
  transition: transform 250ms cubic-bezier(.22,1,.36,1), background 250ms ease;
}
.sidebar__section-header:hover {
  transform: translateX(3px);
  background: rgba(255,255,255,.03);
}
.sidebar__section-header:hover .sidebar__dot {
  background: rgba(255,255,255,.60);
  box-shadow: 0 0 8px rgba(255,255,255,.40);
}
.sidebar__section-title {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: #71717a;
  display: flex; align-items: center; gap: 12px;
  white-space: nowrap; transition: color 300ms ease;
}
.sidebar__section-header:hover .sidebar__section-title { color: #d4d4d8; }
/* Catégorie sans sous-catégorie : l'en-tête seul fait office de filtre cliquable */
.sidebar__section-header--leaf { text-decoration: none; }
.sidebar__section-header--leaf.active .sidebar__section-title { color: #fff; }
.sidebar__section-header--leaf.active .sidebar__dot {
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 8px rgba(255,255,255,.45);
}
.sidebar__line {
  height: 1px; flex: 1;
  background: linear-gradient(to right, rgba(255,255,255,.06), transparent);
  transition: background 300ms ease;
}
.sidebar__section-header:hover .sidebar__line {
  background: linear-gradient(to right, rgba(255,255,255,.12), transparent);
}
.sidebar__section-arrow {
  color: #71717a; flex-shrink: 0;
  transition: transform 250ms ease, color 300ms ease;
}
.sidebar__section-header:hover .sidebar__section-arrow { color: #fff; }
.sidebar__section.collapsed .sidebar__section-arrow { transform: rotate(-90deg); }
.sidebar__section-body {
  overflow: hidden; max-height: 2000px; opacity: 1;
  transition: max-height 350ms ease, opacity 300ms ease;
}
.sidebar__section.collapsed .sidebar__section-body { max-height: 0; opacity: 0; }

.sidebar__item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; margin: 0 4px 2px; border-radius: 12px;
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease,
              transform 250ms cubic-bezier(.22,1,.36,1), box-shadow 250ms ease;
  font-size: 13px; font-weight: 400; color: rgba(255,255,255,.72);
  text-decoration: none;
}
.sidebar__item { position: relative; }
.sidebar__item:hover {
  background: rgba(255,255,255,.05);
  color: #fff;
  transform: translateX(4px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
/* État actif — style dailystore : dégradé depuis la gauche + anneau subtil,
   texte plus net, et point blanc lumineux à droite. */
.sidebar__item.active {
  background: linear-gradient(to right, rgba(255,255,255,.06), transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  color: #fff; font-weight: 600;
}
.sidebar__item.active::after {
  content: ''; position: absolute; top: 50%; right: 12px;
  width: 6px; height: 6px; border-radius: 50%; transform: translateY(-50%);
  background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.8);
}
/* Tuile d'icône — style dailystore : carré sombre uniforme + bordure subtile,
   le logo de marche en object-contain ; au survol, léger zoom + bordure plus claire. */
.sidebar__item-icon {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: #18181b; border: 1px solid rgba(255,255,255,.04);
  overflow: hidden;
  transition: transform 300ms ease, background 300ms ease, border-color 300ms ease;
}
.sidebar__item:hover .sidebar__item-icon {
  transform: scale(1.1);
  background: #27272a; border-color: rgba(255,255,255,.10);
}
.sidebar__divider {
  height: 1px; margin: 10px 12px 14px;
  background: rgba(255,255,255,.07);
}
/* Section imbriquée (sous-catégorie qui contient des produits) : décalée vers la droite,
   en-tête en casse normale pour la distinguer d'une catégorie racine. */
.sidebar__section--nested { margin-bottom: 8px; }
.sidebar__section--nested > .sidebar__section-body { margin-left: 12px; }
.sidebar__section--nested > .sidebar__section-header { padding-left: 14px; }
.sidebar__section--nested > .sidebar__section-header .sidebar__section-title {
  text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.72);
}
.sidebar__section--nested > .sidebar__section-header:hover .sidebar__section-title { color: #fff; }

.sidebar__item--sub { margin-left: 22px; font-size: 12.5px; }
.sidebar__item--sub .sidebar__item-icon { width: 20px; height: 20px; font-size: 10px; border-radius: 5px; }
.sidebar__item-icon--img { overflow: hidden; padding: 0; background: #18181b; }
.sidebar__item-icon--img img {
  width: 100%; height: 100%; object-fit: contain; padding: 5px;
  border-radius: inherit; display: block;
}

/* ── Shop main ── */
.shop-main { flex: 1; min-width: 0; padding: 0; }

/* ── Filter bar (search + sort + category pills, no sidebar) ── */
.shop-filterbar {
  position: relative; overflow: visible; /* visible : les popovers Price/Sort doivent pouvoir depasser */
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015) 60%);
  border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  padding: 16px; margin-top: 24px;
}
/* Lueur ambiante blanche en fond, façon glow décoratif (coin haut-gauche) */
.shop-filterbar::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: -140px; left: -120px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.07), transparent 70%);
  filter: blur(30px);
}
.shop-filterbar__row { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shop-filterbar__search { position: relative; flex: 1 1 280px; min-width: 200px; max-width: 900px; }
.shop-filterbar__search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  color: rgba(255,255,255,.35); pointer-events: none;
}
.shop-filterbar__search-input {
  width: 100%; height: 40px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 6px;
  padding: 0 52px 0 48px;
  color: #fff; font-size: 14px; font-family: var(--font-ui);
  outline: none; transition: border-color 200ms ease;
}
.shop-filterbar__search-input::placeholder { color: rgba(255,255,255,.30); }
.shop-filterbar__search-input:focus { border-color: rgba(255,255,255,.40); }

.shop-filterbar__search-kbd {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-ui); font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 4px;
  padding: 3px 6px; pointer-events: none; white-space: nowrap;
}
.shop-filterbar__search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 6px; border: none;
  background: none; color: rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.shop-filterbar__search-clear:hover { background: rgba(255,255,255,.08); color: #fff; }

.shop-filterbar__clear-btn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 40px; padding: 0 12px; border-radius: 6px;
  background: none; border: none;
  color: rgba(255,255,255,.5); font-size: 13px; font-weight: 500; font-family: var(--font-ui);
  cursor: pointer; white-space: nowrap;
  transition: color 150ms ease, opacity 150ms ease;
}
.shop-filterbar__clear-btn:hover { color: #fff; }
.shop-filterbar__clear-btn:disabled {
  opacity: .35; cursor: default; pointer-events: none;
}

.shop-filterbar__stat {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  height: 40px; padding: 0 15px; border-radius: 8px; margin-left: auto;
  white-space: nowrap; font-size: 13.5px; font-weight: 500; font-family: var(--font-ui);
  color: #4ade80; letter-spacing: .01em;
  background: linear-gradient(180deg, rgba(74,222,128,.16), rgba(74,222,128,.06));
  border: 1px solid rgba(74,222,128,.28);
  box-shadow: 0 2px 12px rgba(74,222,128,.10), inset 0 1px 0 rgba(255,255,255,.07);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.shop-filterbar__stat:hover {
  border-color: rgba(74,222,128,.45);
  box-shadow: 0 3px 18px rgba(74,222,128,.20), inset 0 1px 0 rgba(255,255,255,.10);
}
/* Le compteur ressort en blanc ; chiffres tabulaires pour que la pill ne
   bouge pas quand le total change (9 → 10). */
.shop-filterbar__stat-num {
  color: #fff; font-weight: 650; font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .shop-filterbar__stat { margin-left: 0; }
}
.shop-filterbar__stat-dot {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.8);
}
/* Halo qui pulse : signale un catalogue « live » */
.shop-filterbar__stat-dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid rgba(74,222,128,.6);
  animation: statDotPulse 2.4s ease-out infinite;
}
@keyframes statDotPulse {
  0%        { transform: scale(.55); opacity: .9; }
  70%, 100% { transform: scale(1.7);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-filterbar__stat-dot::after { animation: none; opacity: 0; }
}
/* Mobile : la pill reste visible (c'est le seul compteur de la page) mais compacte */
@media (max-width: 640px) {
  .shop-filterbar__stat { height: 36px; padding: 0 12px; gap: 7px; font-size: 12.5px; }
}

/* ── Tri : bouton + panel custom (remplace le <select> natif) ── */
.sort-filter { position: relative; flex-shrink: 0; min-width: 200px; }
.sort-filter__btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 40px; padding: 0 14px; border-radius: 6px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  color: #fff; font-size: 14px; font-weight: 500; font-family: var(--font-ui);
  cursor: pointer; white-space: nowrap;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.sort-filter__btn:hover { background: rgba(255,255,255,.09); }
.sort-filter.open .sort-filter__btn { background: linear-gradient(160deg, #fff, #dcdce2); color: #000; border-color: #fff; }
.sort-filter__btn span { flex: 1; text-align: left; }
.sort-filter__chevron { transition: transform 200ms ease; flex-shrink: 0; }
.sort-filter.open .sort-filter__chevron { transform: rotate(180deg); }

.sort-filter__panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: #111114; border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  padding: 6px; display: none;
}
.sort-filter.open .sort-filter__panel { display: block; }
.sort-filter__option {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 6px; border: none; background: none;
  color: rgba(255,255,255,.7); font-size: 13px; font-family: var(--font-ui); font-weight: 500;
  cursor: pointer; transition: background 150ms ease, color 150ms ease;
}
.sort-filter__option:hover { background: rgba(255,255,255,.07); color: #fff; }
.sort-filter__option.selected { background: rgba(255,255,255,.10); color: #fff; font-weight: 600; }

/* ── Price filter : bouton + popover (From/To + slider double-poignée) ── */
.price-filter { position: relative; flex-shrink: 0; }
.price-filter__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 6px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  color: #fff; font-size: 14px; font-weight: 500; font-family: var(--font-ui);
  cursor: pointer; white-space: nowrap;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.price-filter__btn:hover { background: rgba(255,255,255,.09); }
.price-filter__btn.active { background: linear-gradient(160deg, #fff, #dcdce2); color: #000; border-color: #fff; }
.price-filter__chevron { transition: transform 200ms ease; flex-shrink: 0; }
.price-filter.open .price-filter__chevron { transform: rotate(180deg); }

.price-filter__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  width: 260px;
  background: #111114; border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  padding: 16px;
  display: none;
}
.price-filter.open .price-filter__panel { display: block; }
.price-filter__panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.price-filter__panel-title { font-size: 13px; font-weight: 700; color: #fff; font-family: var(--font-ui); }
.price-filter__panel-close { background: none; border: none; color: rgba(255,255,255,.45); cursor: pointer; display: flex; padding: 0; }
.price-filter__panel-close:hover { color: #fff; }
.price-filter__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.price-filter__field label { display: block; font-size: 11px; color: rgba(255,255,255,.45); margin-bottom: 5px; font-family: var(--font-ui); }
.price-filter__field-input { position: relative; }
.price-filter__field-input span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.4); font-size: 13px; pointer-events: none; }
.price-filter__field-input input {
  width: 100%; height: 34px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
  color: #fff; font-size: 13px; padding: 0 10px 0 22px; outline: none; font-family: var(--font-ui);
  -moz-appearance: textfield;
}
.price-filter__field-input input::-webkit-outer-spin-button,
.price-filter__field-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-filter__field-input input:focus { border-color: rgba(255,255,255,.4); }
.price-filter__field-input input::placeholder { color: rgba(255,255,255,.30); }

.price-slider { position: relative; height: 4px; margin: 6px 8px 10px; }
.price-slider__track { position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); }
.price-slider__range { position: absolute; top: 0; height: 4px; border-radius: 2px; background: #fff; }
.price-slider input[type="range"] {
  position: absolute; top: -6px; left: -8px; width: calc(100% + 16px); height: 16px; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.price-slider input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto; -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #000;
  cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.price-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid #000; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.price-filter__bounds { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.4); font-family: var(--font-ui); }

.shop-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 20px; margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.shop-topbar__title { font-family: var(--font-ui); font-size: 15px; font-weight: 500; line-height: 1.1; color: rgba(255,255,255,.6); }
.shop-topbar__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.results-count { font-size: 13px; color: rgba(255,255,255,.35); }


/*──────────────────────────────────────────────
  PAGINATION
──────────────────────────────────────────────*/
.pagination { display: flex; justify-content: center; gap: 8px; padding-top: 48px; }
.page-btn {
  min-width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: transparent; color: rgba(255,255,255,.55);
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  padding: 0 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 200ms ease;
}
.page-btn:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); }
.page-btn.active { background: #fff; color: #000; border-color: #fff; }

/*──────────────────────────────────────────────
  TESTIMONIALS
──────────────────────────────────────────────*/
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.testimonial {
  background: #09090b;
  border: 1px solid rgba(255,255,255,.10); border-radius: 8px;
  padding: 24px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.testimonial__stars { color: #fff; font-size: 14px; letter-spacing: 2px; }
.testimonial__text { font-size: 15px; font-weight: 400; line-height: 23px; color: rgba(255,255,255,.70); flex: 1; }
.testimonial__author { display: flex; align-items: center; gap: 12px; }
.testimonial__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.testimonial__name { font-size: 14px; font-weight: 700; }
.testimonial__handle { font-size: 12px; color: rgba(255,255,255,.35); }

/*──────────────────────────────────────────────
  CTA BANNER
──────────────────────────────────────────────*/
.cta-banner { max-width: 1440px; margin: 0 auto; padding: 0 80px 80px; }
.cta-banner__inner {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10); border-radius: 8px;
  padding: 56px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.cta-banner__title { font-family: var(--font-display); font-size: clamp(36px,4vw,56px); font-weight: 500; line-height: 1.2; }
.cta-banner__sub { font-size: 16px; font-weight: 400; line-height: 24px; color: rgba(255,255,255,.50); max-width: 480px; }

/*──────────────────────────────────────────────
  STATS
──────────────────────────────────────────────*/
.stats-wrap {
  display: flex; justify-content: center;
  padding: 0 80px 56px;
  margin-top: -32px;
}
.stats {
  display: flex; align-items: center;
  width: 100%; max-width: 680px;
}
.stats__item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1; text-align: center;
  padding: 28px 32px;
}
.stats__value {
  font-family: var(--font-ui);
  font-size: 28px; font-weight: 600; line-height: 1; color: #fff;
  letter-spacing: -0.5px;
  /* tabular figures keep width stable during the count-up animation */
  font-variant-numeric: tabular-nums;
}
.stats__star { color: #ff6b35; font-size: 20px; vertical-align: middle; margin-left: 3px; }
.stats__label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,.3);
}
.stats__divider {
  width: 1px; height: 40px; background: rgba(255,255,255,.08); flex-shrink: 0;
}
@media (max-width: 640px) {
  .stats-wrap { padding: 24px 16px 40px; }
  .stats { flex-direction: column; max-width: 100%; }
  .stats__item { padding: 20px 24px; }
  .stats__divider { width: 80%; height: 1px; }
  .stats__value { font-size: 24px; }
}

/*──────────────────────────────────────────────
  FOOTER
──────────────────────────────────────────────*/
.footer-wrap { border-top: 1px solid rgba(255,255,255,.06); }
.footer { max-width: 1440px; margin: 0 auto; padding: 56px 80px 40px; }
/* 4 colonnes : marque (+ reseaux sociaux), Navigation, Products, Legal */
.footer__top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
.footer__logo { font-family: var(--font-logo); font-size: 28px; margin-bottom: 16px; }
.footer__desc { font-size: 14px; line-height: 22px; color: rgba(255,255,255,.40); max-width: 280px; }
.footer__col-title {
  font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-bottom: 20px;
}
.footer__col-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer__col-links a { font-size: 14px; color: rgba(255,255,255,.50); transition: color 200ms ease; }
.footer__col-links a:hover { color: #fff; }

/* Liens sociaux : logos seuls, sans fond ni bordure. Le libelle textuel
   passe en aria-label/title puisque seule l'icone reste visible.
   La boite de 40x40 est conservee sans etre visible : elle garde une cible
   de clic correcte alors que les glyphes ne font qu'une vingtaine de pixels.
   L'icone reprend la couleur des autres liens du footer. */
.footer__socials { display: flex; gap: 0; margin-top: 20px; margin-left: -9px; }
.footer__social {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.50);
  transition: color 200ms ease;
}
.footer__social:hover { color: #fff; }
.footer__social svg { display: block; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.07); padding-top: 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.footer__copy { font-size: 13px; color: rgba(255,255,255,.30); }

/* Cryptos acceptees, en bas du footer. Purement informatif : ce ne sont pas
   des liens. Couleurs de marque, reprises de crypto-checkout.js. */
.footer__pay { display: flex; align-items: center; gap: 14px; }
.footer__pay-coin {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  opacity: .8; transition: opacity 200ms ease;
}
.footer__pay:hover .footer__pay-coin { opacity: 1; }
.footer__pay-coin svg { display: block; width: 100%; height: 100%; }
.footer__legal-link { font-size: 13px; color: rgba(255,255,255,.35); transition: color 200ms ease; }
.footer__legal-link:hover { color: #fff; }
.footer__legal-sep { color: rgba(255,255,255,.15); font-size: 13px; }

/*──────────────────────────────────────────────
  EMPTY STATE
──────────────────────────────────────────────*/
.empty-state {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 80px 24px; text-align: center;
}
.empty-state__icon { font-size: 48px; opacity: .25; }
.empty-state__title { font-size: 20px; font-weight: 700; }
.empty-state__sub { font-size: 15px; color: rgba(255,255,255,.40); }

/*──────────────────────────────────────────────
  ANIMATIONS
──────────────────────────────────────────────*/
@keyframes revealUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes revealLine {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero__eyebrow,
.hero__eyebrow-line,
.hero__title,
.hero__sub,
.hero__cta { opacity: 0; }

body.loaded .hero__eyebrow-line:first-child {
  animation: revealLine 600ms cubic-bezier(.16,1,.3,1) 100ms forwards;
  transform-origin: left center;
}
body.loaded .hero__eyebrow-text {
  animation: revealUp 600ms cubic-bezier(.16,1,.3,1) 200ms forwards;
  opacity: 0;
}
body.loaded .hero__eyebrow-line:last-child {
  animation: revealLine 600ms cubic-bezier(.16,1,.3,1) 100ms forwards;
  transform-origin: right center;
}
body.loaded .hero__eyebrow { opacity: 1; }
body.loaded .hero__title  { animation: revealUp 800ms cubic-bezier(.16,1,.3,1) 320ms forwards; }
body.loaded .hero__sub    { animation: revealUp 700ms cubic-bezier(.16,1,.3,1) 520ms forwards; }
body.loaded .hero__cta    { animation: revealUp 600ms cubic-bezier(.16,1,.3,1) 680ms forwards; }

.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* Entrance already played this session (set by main.js on reload) — show final
   state instantly so a language switch / reload doesn't replay animations. */
body.nx-no-entrance .hero__eyebrow,
body.nx-no-entrance .hero__eyebrow-line,
body.nx-no-entrance .hero__title,
body.nx-no-entrance .hero__sub,
body.nx-no-entrance .hero__cta { opacity: 1 !important; transform: none !important; animation: none !important; }
body.nx-no-entrance .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
body.nx-no-entrance .product-card { animation: none !important; }

/* Accessibility: honour users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__eyebrow, .hero__eyebrow-line, .hero__title, .hero__sub, .hero__cta,
  .reveal { opacity: 1 !important; transform: none !important; }
}

/*──────────────────────────────────────────────
  CART PANEL
──────────────────────────────────────────────*/
.cart-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
}
.cart-overlay.open { display: block; }

/* ── Panneau panier ──
   Monochrome, comme tout le reste du site : fond #09090b et accents blancs.
   Aucune couleur d'accent propre au panier — elle jurerait avec la charte. */
.cart-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 301;
  width: 390px; max-width: 100vw;
  background: #09090b;
  border-left: 1px solid rgba(255,255,255,.07);
  box-shadow: -24px 0 60px rgba(0,0,0,.55);
  transform: translateX(100%); transition: transform 320ms cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column;
}
.cart-panel.open { transform: translateX(0); }

.cart-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.cart-panel__heading { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cart-panel__heading-icon { display: flex; color: rgba(255,255,255,.85); flex-shrink: 0; }
.cart-panel__title { font-size: 16px; font-weight: 700; }
.cart-panel__count { font-size: 13px; color: rgba(255,255,255,.35); margin-left: 2px; }

.cart-panel__body {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}
.cart-panel__body::-webkit-scrollbar { width: 4px; }
.cart-panel__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

.cart-panel__empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0; padding: 32px 26px; text-align: center;
}
/* Pastille ronde autour de l'icône : donne un point d'ancrage visuel à un
   écran qui, par définition, n'a rien à montrer. */
.cart-panel__empty-badge {
  position: relative;
  width: 112px; height: 112px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.30);
  margin-bottom: 26px;
}
.cart-panel__empty-dot {
  position: absolute; top: 10px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
}
.cart-panel__empty-title {
  font-size: 17px; font-weight: 700; color: #fff;
  margin-bottom: 8px;
}
.cart-panel__empty-sub {
  font-size: 13.5px; color: rgba(255,255,255,.45);
  line-height: 1.55; margin-bottom: 26px;
}
/* Mêmes codes que .btn-primary du site : blanc sur noir. */
.cart-panel__empty-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 46px; border-radius: 8px;
  background: #fff; color: #000;
  font-size: 14px; font-weight: 600; text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
  transition: background 180ms ease, transform 140ms ease;
}
.cart-panel__empty-cta:hover  { background: #f0f0f0; }
.cart-panel__empty-cta:active { transform: scale(.985); }

.cart-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; border-radius: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.cart-item__icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.cart-item__info { flex: 1; min-width: 0; }
.cart-item__name { font-size: 13px; font-weight: 700; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item__desc { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 2px; }
.cart-item__row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.cart-item__price { font-size: 14px; font-weight: 700; }
.cart-item__qty-wrap { display: flex; align-items: center; gap: 4px; }
.cart-item__qty {
  display: flex; align-items: center;
  background: rgba(255,255,255,.07); border-radius: 6px; overflow: hidden;
}
.cart-item__qty-btn {
  width: 28px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; color: rgba(255,255,255,.55);
  cursor: pointer; user-select: none;
  transition: background 150ms ease, color 150ms ease;
}
.cart-item__qty-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.cart-item__qty-num { font-size: 13px; font-weight: 600; padding: 0 8px; }
.cart-item__remove {
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.25); cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.cart-item__remove:hover { background: rgba(255,68,68,.15); color: #ff7070; }

.cart-panel__footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.07); flex-shrink: 0; }
.cart-panel__subtotal {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.cart-panel__subtotal-label { font-size: 13px; color: rgba(255,255,255,.50); }
.cart-panel__subtotal-value { font-size: 18px; font-weight: 700; }
.cart-panel__checkout {
  width: 100%; height: 46px; border-radius: 8px;
  /* Identique au bouton de l'état vide : même rôle, même apparence. */
  background: #fff; color: #000;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer;
  transition: background 200ms ease, transform 150ms ease;
}
.cart-panel__checkout:hover { background: #f0f0f0; }
.cart-panel__checkout:active { transform: scale(.98); }
.cart-panel__clear {
  margin-top: 8px; width: 100%; text-align: center;
  font-size: 12px; color: rgba(255,255,255,.22);
  cursor: pointer; transition: color 200ms ease; padding: 4px;
}
.cart-panel__clear:hover { color: #ff7070; }

/*──────────────────────────────────────────────
  TOAST
──────────────────────────────────────────────*/
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 400;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: #111; color: #fff;
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  pointer-events: all; min-width: 220px;
  animation: toastIn 300ms cubic-bezier(.16,1,.3,1) forwards;
}
.toast.hide { animation: toastOut 250ms ease forwards; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}
.toast__icon { font-size: 16px; flex-shrink: 0; }

/*──────────────────────────────────────────────
  RESPONSIVE
──────────────────────────────────────────────*/
@media (max-width: 1439px) {
  .nav__inner, .section, .stats-bar, .cta-banner, .footer { padding-left: 40px; padding-right: 40px; }
  .stats-bar__inner { padding: 0; }
  .product-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .shop-layout { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 1023px) {
  .nav__inner { padding: 0 24px; }
  .nav__links { display: none; }
  /* Les liens masqués quittent la grille : sans redéfinir les colonnes, les
     actions se retrouvaient dans celle du milieu, avec un vide à droite. */
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__hamburger { display: flex; }
  .sidebar { display: none; }
  .shop-main { padding-left: 0; }
  .shop-layout { padding: 104px 16px 56px; }
  .section { padding: 56px 24px; }
  .stats-bar { padding: 32px 24px; }
  .stats-bar__inner { grid-template-columns: repeat(2,1fr); gap: 24px; }
  .categories-grid { grid-template-columns: repeat(2,1fr); }
  .testimonials-grid { grid-template-columns: repeat(2,1fr); }
  .cta-banner { padding: 0 24px 56px; }
  .cta-banner__inner { padding: 40px 24px; }
  .footer { padding: 40px 24px 32px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 639px) {
  .hero { padding: 120px 16px 80px; }
  .section { padding: 40px 16px; }
  .stats-bar { padding: 24px 16px; }
  .stats-bar__inner { grid-template-columns: repeat(2,1fr); gap: 16px; }
  .stat__number { font-size: 36px; }
  .product-grid { grid-template-columns: 1fr; }
  .categories-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .cta-banner { padding: 0 16px 40px; }
  .cta-banner__inner { padding: 32px 16px; }
  .footer { padding: 32px 16px 24px; }
  .footer__top { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .shop-layout { padding: 96px 12px 48px; }
  .shop-topbar__title { font-size: 14px; }
}

/* ══════════════════════════════════════════════
   CHECKOUT MODAL
══════════════════════════════════════════════ */
.co-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 10000; opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
}
.co-overlay.open { opacity: 1; pointer-events: auto; }

.co-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -46%);
  width: 94%; max-width: 760px;
  max-height: 92vh; overflow: hidden;
  background: #0e0e0e; border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  z-index: 10001; opacity: 0; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  display: flex; flex-direction: column;
}
.co-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%); }
.co-modal::-webkit-scrollbar { width: 0; }

/* Header bar */
.co-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 22px; background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}
.co-hdr__brand {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.5); letter-spacing: .02em;
}
.co-hdr__steps {
  display: flex; align-items: center; gap: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
}
.co-step { color: rgba(255,255,255,.28); padding: 0 8px; }
.co-step--active { color: #fff; }
.co-step-sep { color: rgba(255,255,255,.2); }
.co-x {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.45);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 13px; transition: background 150ms, color 150ms; flex-shrink: 0;
}
.co-x:hover { background: rgba(255,255,255,.15); color: #fff; }

/* Two-column layout */
.co-layout { display: flex; overflow: hidden; flex: 1; min-height: 0; }
.co-left {
  flex: 1; padding: 26px; min-width: 0;
  overflow-y: auto; display: flex; flex-direction: column;
}
.co-left::-webkit-scrollbar { width: 0; }
.co-right {
  width: 258px; flex-shrink: 0;
  background: rgba(255,255,255,.02);
  border-left: 1px solid rgba(255,255,255,.07);
  padding: 22px 20px; display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto;
}
.co-right::-webkit-scrollbar { width: 0; }

/* Section label */
.co-section-hdr {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.28); margin-bottom: 16px;
}

/* Product row in form */
.co-product-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 18px;
}
.co-product-row__icon { font-size: 26px; flex-shrink: 0; line-height: 1; }
.co-product-row__info { flex: 1; min-width: 0; }
.co-product-row__name { font-size: 13px; font-weight: 600; color: #fff; }
.co-product-row__desc { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-product-row__price { font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; }

/* Field */
.co-field { margin-bottom: 14px; }
.co-field label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.38); margin-bottom: 7px;
}
.co-field input {
  width: 100%; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
  color: #fff; font-family: inherit; font-size: 14px;
  padding: 11px 13px; outline: none; box-sizing: border-box;
  transition: border-color 150ms;
}
.co-field input:focus { border-color: rgba(255,255,255,.32); }
.co-field input.co-input-err { border-color: rgba(255,90,90,.6); }

/* Promo code */
.co-promo-wrap { display: flex; gap: 8px; margin-bottom: 4px; }
.co-promo-input {
  flex: 1; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  padding: 9px 14px; color: #fff; font-size: 13px; font-family: var(--font-ui);
  outline: none; text-transform: uppercase; letter-spacing: .05em;
  transition: border-color 150ms;
}
.co-promo-input:focus { border-color: rgba(255,255,255,.32); }
.co-promo-btn {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; color: rgba(255,255,255,.7); font-size: 12px; font-weight: 600;
  padding: 9px 14px; cursor: pointer; white-space: nowrap;
  transition: background 150ms, color 150ms;
}
.co-promo-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.co-promo-msg { font-size: 12px; min-height: 16px; margin-bottom: 8px; }

/* Submit button */
.co-submit {
  width: 100%; padding: 14px 16px; border: none; border-radius: 10px;
  background: #fff; color: #0a0a0a; font-weight: 700; font-size: 14px;
  cursor: pointer; transition: opacity 130ms, transform 100ms;
  font-family: inherit; margin-top: 6px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: .01em;
}
.co-submit:hover { opacity: .9; }
.co-submit:active { transform: scale(.99); }
.co-submit:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* Trust row */
.co-trust-row {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-wrap: wrap;
}
.co-trust-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: rgba(255,255,255,.22);
}
.co-trust-item svg { opacity: .5; flex-shrink: 0; }

/* Error */
.co-err { font-size: 13px; color: #ff6b6b; margin-top: 10px; text-align: center; min-height: 18px; }

/* Right: summary */
.co-right__hdr { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.32); }
.co-right__product { display: flex; align-items: center; gap: 10px; }
.co-right__product-icon {
  width: 42px; height: 42px; border-radius: 8px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.co-right__product-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.82); line-height: 1.4; margin-bottom: 3px; }
.co-right__product-qty { font-size: 11px; color: rgba(255,255,255,.3); }
.co-right__divider { height: 1px; background: rgba(255,255,255,.07); }
.co-right__rows { display: flex; flex-direction: column; gap: 9px; }
.co-right__row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255,255,255,.4); }
.co-right__row--total { color: #fff; font-weight: 700; font-size: 14px; padding-top: 2px; }

/* Perks list */
.co-perks { display: flex; flex-direction: column; gap: 10px; }
.co-perk { display: flex; align-items: center; gap: 9px; font-size: 11px; color: rgba(255,255,255,.38); }
.co-perk svg { flex-shrink: 0; opacity: .5; }

/* Payment badges */
.co-pay-row { display: flex; flex-wrap: wrap; gap: 5px; }
.co-pay-badge {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: 4px; padding: 3px 8px; font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,.35); letter-spacing: .05em;
}

/* Success state */
.co-success { text-align: center; padding: 4px; }
.co-success__check {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(60,200,100,.1); border: 1px solid rgba(60,200,100,.22);
  margin: 4px auto 16px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #3cc864;
}
.co-success__title { font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.co-success__sub { font-size: 13px; color: rgba(255,255,255,.38); margin-bottom: 22px; }

.co-id-box {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; text-align: left;
}
.co-id-box__meta { min-width: 0; }
.co-id-box__lbl { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.32); margin-bottom: 3px; }
.co-id-box__val { font-size: 18px; font-weight: 700; color: #fff; font-family: 'Courier New', monospace; letter-spacing: .05em; }
.co-copy {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; color: rgba(255,255,255,.55); padding: 5px 11px;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: all 150ms; flex-shrink: 0;
}
.co-copy:hover { background: rgba(255,255,255,.15); color: #fff; }

.co-deliv-box {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; text-align: left;
}
.co-deliv-box__lbl { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.32); margin-bottom: 8px; }
.co-deliv-box__val {
  font-size: 13px; color: #fff; font-family: 'Courier New', monospace;
  word-break: break-all; line-height: 1.6;
  filter: blur(5px); transition: filter 220ms ease; user-select: none;
}
.co-deliv-box__val.shown { filter: none; user-select: text; }
.co-reveal { background: none; border: 1px solid rgba(255,255,255,.1); border-radius: 6px;
  color: rgba(255,255,255,.45); font-size: 12px; font-weight: 600;
  cursor: pointer; margin-top: 10px; padding: 4px 12px; transition: all 150ms; }
.co-reveal:hover { background: rgba(255,255,255,.07); color: #fff; }

.co-actions { display: flex; flex-direction: column; gap: 8px; }
.co-view-inv {
  display: block; text-align: center; padding: 10px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; font-size: 13px; font-weight: 600; color: #fff;
  text-decoration: none; transition: background 150ms;
}
.co-view-inv:hover { background: rgba(255,255,255,.12); }
.co-back { background: none; border: none; color: rgba(255,255,255,.32); font-size: 13px; cursor: pointer; padding: 8px 0; transition: color 150ms; }
.co-back:hover { color: rgba(255,255,255,.65); }

/* Responsive checkout */
@media (max-width: 620px) {
  .co-modal { max-height: 96vh; overflow-y: auto; display: block; border-radius: 14px; }
  .co-layout { flex-direction: column-reverse; overflow: visible; }
  .co-left { overflow-y: visible; padding: 20px; }
  .co-right { width: auto; border-left: none; border-top: 1px solid rgba(255,255,255,.07); overflow-y: visible; padding: 18px 20px; }
  .co-hdr__steps { display: none; }
}

/* ══════════════════════════════════════════════
   INVOICE PAGE
══════════════════════════════════════════════ */
.inv-wrap {
  max-width: 600px; margin: 0 auto; padding: 130px 24px 80px;
}
.inv-lookup {
  text-align: center; margin-bottom: 48px;
}
.inv-lookup h1 {
  font-family: var(--font-display); font-size: clamp(30px, 5vw, 46px);
  font-weight: 400; color: #fff; margin: 0 0 8px;
}
.inv-lookup p { font-size: 14px; color: rgba(255,255,255,.38); margin: 0 0 24px; }
.inv-lookup-row { display: flex; gap: 8px; max-width: 380px; margin: 0 auto 10px; }
.inv-input {
  flex: 1; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  color: #fff; font-size: 14px; padding: 10px 14px; outline: none;
  font-family: 'Courier New', monospace; letter-spacing: .05em;
  transition: border-color 150ms; text-transform: uppercase;
}
.inv-input:focus { border-color: rgba(255,255,255,.35); }
.inv-btn {
  padding: 10px 18px; background: #fff; color: #0d0d0d;
  border: none; border-radius: 8px; font-weight: 700; font-size: 14px;
  cursor: pointer; transition: background 150ms; white-space: nowrap; font-family: inherit;
}
.inv-btn:hover { background: #eee; }
.inv-err { font-size: 13px; color: #ff6b6b; text-align: center; min-height: 18px; }

.inv-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px; overflow: hidden; animation: fadeUp 300ms ease both;
}
@keyframes fadeUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: none; } }

.inv-card__hdr {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.inv-card__brand { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.inv-card__id { font-size: 12px; color: rgba(255,255,255,.38); font-family: 'Courier New', monospace; letter-spacing: .05em; }
.inv-card__status-wrap { text-align: right; flex-shrink: 0; }
.inv-card__status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: rgba(60,200,100,.1); color: #3cc864;
  border: 1px solid rgba(60,200,100,.2); border-radius: 20px;
  padding: 3px 10px; margin-bottom: 4px; text-transform: uppercase;
}
.inv-card__status.refunded { background: rgba(255,90,90,.1); color: #ff6b6b; border-color: rgba(255,90,90,.2); }
.inv-card__status.pending { background: rgba(255,160,0,.1); color: #ffa500; border-color: rgba(255,160,0,.2); }
.inv-card__date { font-size: 12px; color: rgba(255,255,255,.32); }

.inv-card__body { padding: 0 24px; }
.inv-card__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.inv-card__row-left { display: flex; align-items: center; gap: 12px; }
.inv-card__row-icon { font-size: 22px; line-height: 1; }
.inv-card__row-name { font-size: 14px; font-weight: 600; color: #fff; }
.inv-card__row-desc { font-size: 12px; color: rgba(255,255,255,.38); margin-top: 2px; }
.inv-card__row-price { font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; }

.inv-card__total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; border-top: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.02);
}
.inv-card__total-lbl { font-size: 13px; color: rgba(255,255,255,.42); font-weight: 500; }
.inv-card__total-val { font-size: 17px; font-weight: 700; color: #fff; }

.inv-card__deliv {
  margin: 0 24px 20px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 14px 16px;
}
.inv-card__deliv-lbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.32); margin-bottom: 10px; }
.inv-card__deliv-val {
  font-size: 13px; color: #fff; font-family: 'Courier New', monospace;
  word-break: break-all; line-height: 1.6;
  filter: blur(5px); transition: filter 220ms; user-select: none;
}
.inv-card__deliv-val.shown { filter: none; user-select: text; }
.inv-card__deliv-btn {
  background: none; border: 1px solid rgba(255,255,255,.1); border-radius: 6px;
  color: rgba(255,255,255,.45); font-size: 12px; font-weight: 600;
  cursor: pointer; margin-top: 10px; padding: 4px 13px; transition: all 150ms;
}
.inv-card__deliv-btn:hover { background: rgba(255,255,255,.07); color: #fff; }

.inv-card__email-row {
  display: flex; align-items: center; gap: 8px; padding: 12px 24px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 12px; color: rgba(255,255,255,.32);
}
.inv-card__footer {
  padding: 14px 24px; border-top: 1px solid rgba(255,255,255,.07);
  font-size: 12px; color: rgba(255,255,255,.22); text-align: center; line-height: 1.7;
}

/* ══════════════════════════════════════════════
   CART PANEL ITEMS
══════════════════════════════════════════════ */
.cart-panel__item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.cart-panel__item-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  background: #18181b; border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px; overflow: hidden;
}
.cart-panel__item-icon img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cart-panel__item-info { flex: 1; min-width: 0; }
.cart-panel__item-name { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-panel__item-price { font-size: 13.5px; font-weight: 700; color: #fff; flex-shrink: 0; }
/* Stepper − qty + (style dailystore) */
.cart-panel__stepper {
  display: inline-flex; align-items: center; margin-top: 8px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; overflow: hidden;
}
.cart-panel__step {
  width: 26px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: rgba(255,255,255,.6); font-size: 15px; line-height: 1;
  cursor: pointer; font-family: inherit; transition: background 150ms ease, color 150ms ease;
}
.cart-panel__step:hover { background: rgba(255,255,255,.10); color: #fff; }
.cart-panel__qty { min-width: 26px; text-align: center; font-size: 12.5px; font-weight: 600; color: #fff; }
/* Ligne Total au-dessus du bouton Proceed */
.cart-panel__totalrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cart-panel__totalrow span:first-child { font-size: 13px; color: rgba(255,255,255,.55); }
.cart-panel__totalrow span:last-child { font-size: 17px; font-weight: 700; color: #fff; }
.product-card { cursor: pointer; }

/* ══════════════════════════════════════════════
   PRODUCT DETAIL PAGE
══════════════════════════════════════════════ */
.pd-hero {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 440px; padding-top: 64px; overflow: hidden;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
}
.pd-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.1) 100%);
  pointer-events: none;
}
.pd-hero__bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
}
.pd-hero__inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 24px 40px 40px;
  display: flex; flex-direction: column; min-height: 440px;
}
.pd-breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,.45); margin-bottom: auto;
}
.pd-breadcrumb a { color: rgba(255,255,255,.45); transition: color 150ms; }
.pd-breadcrumb a:hover { color: #fff; }
.pd-breadcrumb__sep { color: rgba(255,255,255,.2); font-size: 16px; margin: 0 2px; }
.pd-breadcrumb__cur { color: rgba(255,255,255,.7); }
.pd-hero__content { margin-top: auto; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; margin-top: 20px; }
.pd-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px; padding: 4px 12px;
  font-size: 12px; font-weight: 500; color: rgba(255,255,255,.8);
  backdrop-filter: blur(4px);
}
.pd-hero__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pd-stock {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #3cc864; background: rgba(60,200,100,.12); border: 1px solid rgba(60,200,100,.2);
  border-radius: 20px; padding: 3px 10px;
}
.pd-stock.out { color: #ff6b6b; background: rgba(255,107,107,.1); border-color: rgba(255,107,107,.2); }
.pd-rating-badge { font-size: 13px; color: rgba(255,255,255,.55); }
.pd-hero__title {
  font-size: clamp(26px, 4vw, 40px); font-weight: 700; color: #fff;
  margin: 0 0 10px; line-height: 1.18;
}
.pd-hero__price-row { display: flex; align-items: baseline; gap: 10px; }
.pd-hero__price { font-size: clamp(22px, 3vw, 34px); font-weight: 700; color: #fff; }
.pd-hero__orig { font-size: 18px; font-weight: 400; color: rgba(255,255,255,.35); text-decoration: line-through; }
.pd-hero__per { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.35); align-self: center; }

/* Layout */
.pd-layout {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 360px;
  gap: 28px; padding: 28px 40px 80px; align-items: start;
}
.pd-main { display: flex; flex-direction: column; gap: 16px; }

/* Sections */
.pd-section {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; overflow: hidden;
}
.pd-section__hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 20px; border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.pd-section__hdr::before { content: '▪'; color: rgba(255,255,255,.25); }
.pd-section__body { padding: 20px; font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.65); }

.pd-specs { display: grid; grid-template-columns: 1fr 1fr; }
.pd-spec-col { padding: 18px 20px; }
.pd-spec-col + .pd-spec-col { border-left: 1px solid rgba(255,255,255,.07); }
.pd-spec-col__title {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-bottom: 14px;
  display: flex; align-items: center; gap: 6px;
}
.pd-spec-col__title::before { content: '▪'; }
.pd-spec-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.pd-spec-row:last-child { border-bottom: none; }
.pd-spec-key { font-size: 13px; color: rgba(255,255,255,.38); }
.pd-spec-val { font-size: 13px; font-weight: 500; color: #fff; text-align: right; }

/* Sidebar */
.pd-checkout {
  background: #0a0a0a; border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; overflow: hidden;
  position: sticky; top: 80px;
}
.pd-checkout__hdr {
  padding: 13px 20px;
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.4); border-bottom: 1px solid rgba(255,255,255,.08);
}
.pd-checkout__product {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pd-checkout__thumb {
  width: 50px; height: 50px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.pd-checkout__prod-info { flex: 1; min-width: 0; }
.pd-checkout__prod-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-checkout__prod-desc { font-size: 11px; color: rgba(255,255,255,.38); margin-top: 2px; }
.pd-checkout__prod-price { font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0; }

.pd-checkout__summary { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pd-sum-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 3px 0; }
.pd-sum-row__k { color: rgba(255,255,255,.4); }
.pd-sum-row__v { color: rgba(255,255,255,.85); font-weight: 500; }
.pd-sum-row--total { border-top: 1px solid rgba(255,255,255,.09); margin-top: 8px; padding-top: 10px; }
.pd-sum-row--total .pd-sum-row__k { color: rgba(255,255,255,.65); font-weight: 600; font-size: 14px; }
.pd-sum-row--total .pd-sum-row__v { font-size: 16px; font-weight: 700; color: #fff; }

.pd-checkout__secure {
  display: flex; align-items: center; gap: 7px; padding: 11px 20px;
  font-size: 11px; color: rgba(255,255,255,.28);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.pd-checkout__qty { padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pd-checkout__qty-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.32); display: block; margin-bottom: 10px;
}
.pd-qty-ctrl {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; overflow: hidden;
}
.pd-qty-btn {
  width: 38px; height: 38px; background: none; border: none; color: rgba(255,255,255,.55);
  font-size: 20px; cursor: pointer; transition: background 150ms, color 150ms;
  display: flex; align-items: center; justify-content: center; font-family: inherit;
}
.pd-qty-btn:hover { background: rgba(255,255,255,.09); color: #fff; }
.pd-qty-val {
  width: 44px; height: 38px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: #fff;
  border-left: 1px solid rgba(255,255,255,.1); border-right: 1px solid rgba(255,255,255,.1);
}

.pd-checkout__actions { padding: 14px 20px; display: flex; flex-direction: column; gap: 8px; }
.pd-btn-cart {
  width: 100%; padding: 12px; border-radius: 8px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background 150ms; display: flex; align-items: center; justify-content: center; gap: 7px;
}
.pd-btn-cart:hover { background: rgba(255,255,255,.13); }
.pd-btn-buynow {
  width: 100%; padding: 13px; border-radius: 8px;
  background: #fff; color: #0d0d0d; border: none;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background 150ms, transform 100ms;
}
.pd-btn-buynow:hover { background: #eee; }
.pd-btn-buynow:active { transform: scale(.98); }
.pd-btn-buynow:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* Back link */
.pd-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: rgba(255,255,255,.4);
  transition: color 150ms; margin-bottom: 0;
}
.pd-back:hover { color: #fff; }

/* Responsive */
@media (max-width: 1023px) {
  .pd-layout { grid-template-columns: 1fr; padding: 20px 16px 60px; }
  .pd-hero__inner { padding: 20px 16px 32px; min-height: 360px; }
  .pd-checkout { position: static; }
}
@media (max-width: 639px) {
  .pd-specs { grid-template-columns: 1fr; }
  .pd-spec-col + .pd-spec-col { border-left: none; border-top: 1px solid rgba(255,255,255,.07); }
  .pd-hero { min-height: 320px; }
}

/* ── Guarantee grid ── */
.pd-guarantee-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.pd-guarantee-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; padding: 14px;
  display: flex; gap: 12px; align-items: flex-start;
}
.pd-guarantee-card__icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; line-height: 1; }
.pd-guarantee-card b { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); display: block; margin-bottom: 3px; }
.pd-guarantee-card p { font-size: 12px; color: rgba(255,255,255,.38); margin: 0; line-height: 1.5; }
@media (max-width: 480px) { .pd-guarantee-grid { grid-template-columns: 1fr; } }

/* ── Reviews ── */
.pd-rev-summary {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.pd-rev-stars { color: #f59e0b; letter-spacing: 2px; font-size: 16px; }
.pd-rev-score { font-size: 18px; font-weight: 700; color: #fff; }
.pd-rev-count { font-size: 13px; color: rgba(255,255,255,.35); }

.pd-review {
  display: flex; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.pd-review:last-child { border-bottom: none; padding-bottom: 0; }
.pd-review__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: rgba(255,255,255,.7);
}
.pd-review__info { flex: 1; min-width: 0; }
.pd-review__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.pd-review__name { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.85); }
.pd-review__date { font-size: 12px; color: rgba(255,255,255,.28); margin-top: 2px; }
.pd-review__stars { color: #f59e0b; font-size: 13px; flex-shrink: 0; }
.pd-review__body { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.65; }

/* ══════════════════════════════════════════════
   PRODUCT DETAIL v2 — DAILYSTORE STYLE
══════════════════════════════════════════════ */
.pd-page {
  max-width: 1280px; margin: 0 auto; padding: 78px 24px 80px;
}

.pd-breadcrumb-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,.38); margin-bottom: 22px;
}
.pd-breadcrumb-bar a { color: rgba(255,255,255,.38); transition: color 150ms; }
.pd-breadcrumb-bar a:hover { color: rgba(255,255,255,.7); }
.pd-breadcrumb-bar__sep { color: rgba(255,255,255,.18); font-size: 15px; }
.pd-breadcrumb-bar__cur { color: rgba(255,255,255,.65); }

.pd-three-col {
  display: grid; grid-template-columns: 210px 1fr 340px;
  gap: 20px; align-items: start;
}

/* ── Category sidebar ── */
.pd-cat-nav {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; overflow: hidden; position: sticky; top: 72px;
}
.pd-cat-nav__hdr {
  padding: 12px 16px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.35); border-bottom: 1px solid rgba(255,255,255,.07);
}
.pd-cat-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; font-size: 13px; color: rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background 150ms, color 150ms; text-decoration: none;
}
.pd-cat-item:last-child { border-bottom: none; }
.pd-cat-item:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); }
.pd-cat-item.active { background: rgba(255,255,255,.06); color: #fff; }
.pd-cat-item__left { display: flex; align-items: center; gap: 8px; }
.pd-cat-item__icon { font-size: 15px; line-height: 1; }
.pd-cat-item__count {
  font-size: 10px; font-weight: 700; background: rgba(255,255,255,.09);
  border-radius: 10px; padding: 1px 7px; color: rgba(255,255,255,.45);
}

/* ── Product header card ── */
.pd-header-card {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 24px; display: flex; gap: 24px;
  align-items: flex-start; margin-bottom: 16px;
}
.pd-header-card__img {
  width: 104px; height: 104px; border-radius: 14px; flex-shrink: 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; font-size: 46px;
}
.pd-header-card__body { flex: 1; min-width: 0; }
.pd-header-card__badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pd-header-card__name { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 6px; }
.pd-header-card__short-desc { font-size: 13px; color: rgba(255,255,255,.42); line-height: 1.6; margin-bottom: 12px; }
.pd-header-card__price-row { display: flex; align-items: baseline; gap: 10px; }
.pd-header-card__price { font-size: 26px; font-weight: 700; color: #fff; }
.pd-header-card__orig { font-size: 16px; color: rgba(255,255,255,.3); text-decoration: line-through; }
.pd-header-card__per {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.32); align-self: center;
}

/* ── Volume pricing ── */
.pd-vol__row {
  display: flex; align-items: center; padding: 11px 20px;
  border-bottom: 1px solid rgba(255,255,255,.05); transition: background 150ms;
}
.pd-vol__row:last-child { border-bottom: none; }
.pd-vol__row__qty { font-size: 13px; color: rgba(255,255,255,.45); flex: 1; }
.pd-vol__row--base .pd-vol__row__qty { color: rgba(255,255,255,.6); }
.pd-vol__row__price { font-size: 13px; font-weight: 600; color: #fff; }
.pd-vol__row__disc {
  font-size: 11px; font-weight: 700; margin-left: 10px;
  background: rgba(60,200,100,.12); border: 1px solid rgba(60,200,100,.18);
  color: #3cc864; border-radius: 10px; padding: 2px 8px;
}
.pd-vol__row--active { background: rgba(255,255,255,.04); }

/* ── Guarantee badges row ── */
.pd-guarantee-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pd-guarantee-badge {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 16px 12px; text-align: center;
}
.pd-guarantee-badge__icon { font-size: 22px; display: block; margin-bottom: 8px; }
.pd-guarantee-badge__title { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8); margin-bottom: 4px; }
.pd-guarantee-badge__desc { font-size: 11px; color: rgba(255,255,255,.32); line-height: 1.45; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .pd-three-col { grid-template-columns: 1fr 320px; }
  .pd-cat-nav { display: none; }
}
@media (max-width: 767px) {
  .pd-three-col { grid-template-columns: 1fr; }
  .pd-page { padding: 72px 16px 60px; }
  .pd-guarantee-badges { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 539px) {
  .pd-header-card { flex-direction: column; align-items: flex-start; }
  .pd-header-card__img { width: 72px; height: 72px; font-size: 32px; }
  .pd-header-card__name { font-size: 18px; }
  .pd-header-card__price { font-size: 22px; }
}

/* ══════════════════════════════════════════════
   PRODUCT DETAIL v3 — SCREENSHOT MATCH
══════════════════════════════════════════════ */

/* Layout identique à la page Shop (.shop-layout) : sidebar catégories à gauche en
   colonne pleine hauteur, et tout le contenu (hero + produit + achat) à sa droite. */
.pdv3-page {
  display: flex; align-items: flex-start;
  width: 100%; gap: 0;
  padding: 72px 64px 80px;
  min-height: 100vh;
}
.pdv3-content { flex: 1; min-width: 0; padding-left: 28px; }

/* ── Hero ── */
.pdv3-hero {
  position: relative; overflow: hidden;
  background: #0c0c0c; border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px; margin-bottom: 20px;
}
.pdv3-hero__bg-text {
  position: absolute; left: 0; top: 0; bottom: 0; width: 65%;
  display: flex; align-items: center; padding-left: 44px;
  font-size: 88px; font-weight: 900; line-height: 1.04;
  letter-spacing: -4px; color: rgba(255,255,255,.05);
  word-break: break-word; white-space: normal; pointer-events: none;
  font-family: var(--font-ui); z-index: 0;
}
.pdv3-hero__inner {
  position: relative; z-index: 1;
  display: flex; justify-content: flex-end; align-items: center;
  padding: 32px 44px 10px; min-height: 190px;
}
/* Image produit : dégradés + ombre interne identiques à la référence */
.pdv3-hero--img { min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; }
.pdv3-hero--img::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(9,9,11,.8), transparent 45%, rgba(9,9,11,.95)),
    linear-gradient(to right, rgba(9,9,11,.8), transparent 55%);
}
.pdv3-hero--img::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  box-shadow: inset 0 0 100px 30px rgba(9,9,11,.9);
}
.pdv3-hero__icon {
  font-size: 108px; line-height: 1;
  filter: drop-shadow(0 0 40px rgba(0,0,0,.9));
}
.pdv3-hero__pills {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 44px 26px;
}
.pdv3-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05);
  border-radius: 999px; padding: 6px 12px;
  font-size: 12px; color: #fff; font-weight: 500;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pdv3-hero__pills .pdv3-pill:first-child svg { color: #34d399; }

/* ── Two-col body (contenu produit | achat) ── */
.pdv3-body { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 32px; align-items: start; }
.pdv3-main { display: flex; flex-direction: column; gap: 18px; }

/* ── Categories sidebar (left) — colonne pleine hauteur, identique à .sidebar (Shop) ── */
.pdv3-cats {
  width: 240px; flex-shrink: 0;
  position: sticky; top: 72px;
  height: calc(100vh - 72px);
  overflow-y: auto; overflow-x: hidden;
  padding: 16px 0 40px;
  border-right: 1px solid rgba(255,255,255,.07);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}
.pdv3-cats::-webkit-scrollbar { width: 4px; }
.pdv3-cats::-webkit-scrollbar-track { background: transparent; }
.pdv3-cats::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
.pdv3-cats__list { display: block; }
.pdv3-cats .sidebar__item { text-decoration: none; }

/* ── Product header ── */
.pdv3-product-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pdv3-product-hdr__left { flex: 1; min-width: 0; }
.pdv3-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pdv3-badge-stock {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.22);
  color: #22c55e; border-radius: 6px; padding: 4px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.pdv3-badge-stock::before { content: '●'; font-size: 7px; }
.pdv3-badge-stock.out { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.22); color: #ef4444; }
.pdv3-badge-rating {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.2);
  color: #f59e0b; border-radius: 6px; padding: 4px 10px;
  font-size: 11px; font-weight: 700;
}
.pdv3-name { font-size: 36px; font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -1px; margin: 0; }
.pdv3-product-hdr__right { text-align: right; flex-shrink: 0; padding-top: 2px; }
.pdv3-per-each { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 4px; }
.pdv3-price { font-size: 36px; font-weight: 800; color: #fff; }

/* ── Separator ── */
.pdv3-sep { height: 1px; background: rgba(255,255,255,.07); }

/* ── Section header ── */
.pdv3-shdr {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.pdv3-shdr::before { content: '■'; font-size: 7px; }

/* ── Description card ── */
.pdv3-desc-card {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 18px 20px;
  font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.75;
}

/* ── Specs + Guarantee ── */
.pdv3-specs-wrap {
  display: grid; grid-template-columns: 1fr;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; overflow: hidden;
}
.pdv3-specs-col { padding: 20px; }
.pdv3-guarantee-col { padding: 20px; }
.pdv3-spec-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.pdv3-spec-row:last-child { border-bottom: none; padding-bottom: 0; }
.pdv3-spec-key { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.35); }
.pdv3-spec-key svg { opacity: .5; flex-shrink: 0; }
.pdv3-spec-val {
  font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.8); text-align: right;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, Menlo, monospace;
}
.pdv3-spec-val--green { color: #22c55e; }
.pdv3-guarantee-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pdv3-gcard {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 14px;
}
.pdv3-gcard__icon {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; margin-bottom: 10px;
}
.pdv3-gcard__title { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.82); margin-bottom: 3px; }
.pdv3-gcard__desc { font-size: 11px; color: rgba(255,255,255,.32); }

/* ── Sidebar ── */
.pdv3-sidebar {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; overflow: hidden; position: sticky; top: 72px;
}
.pdv3-sidebar__hdr {
  padding: 14px 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.4); border-bottom: 1px solid rgba(255,255,255,.07);
}
.pdv3-side-product { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; }
.pdv3-side-thumb {
  width: 52px; height: 52px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.pdv3-side-info { flex: 1; min-width: 0; }
.pdv3-side-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); margin-bottom: 4px; line-height: 1.4; }
.pdv3-side-qty-txt { font-size: 12px; color: rgba(255,255,255,.32); }
.pdv3-side-price { font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0; align-self: center; }
.pdv3-sum-rows { padding: 14px 20px; display: flex; flex-direction: column; gap: 10px; }
.pdv3-sum-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,.4); }
.pdv3-sum-row--total { font-size: 15px; font-weight: 700; color: #fff; }
.pdv3-secure-badge {
  display: flex; align-items: center; gap: 8px;
  margin: 0 20px; padding: 10px 14px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px; font-size: 12px; color: rgba(255,255,255,.38);
}

/* ── Volume pricing in sidebar ── */
.pdv3-vol-section { padding: 18px 20px 14px; }
.pdv3-vol-hdr { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 14px; }
.pdv3-vol-pills { display: flex; gap: 6px; margin-bottom: 14px; }
.pdv3-vol-pill {
  flex: 1; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; padding: 9px 4px; text-align: center; cursor: default;
  transition: background 150ms, border-color 150ms;
}
.pdv3-vol-pill--active { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.pdv3-vol-pill__disc { font-size: 13px; font-weight: 700; color: #fff; display: block; }
.pdv3-vol-pill__min { font-size: 10px; color: rgba(255,255,255,.32); display: block; margin-top: 2px; }
.pdv3-vol-progress { height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; margin-bottom: 10px; overflow: hidden; }
.pdv3-vol-progress-fill { height: 100%; background: #fff; border-radius: 2px; transition: width 220ms ease; min-width: 4px; }
.pdv3-vol-hint { font-size: 12px; color: rgba(255,255,255,.38); text-align: center; }

/* ── Qty section ── */
/* ── Variantes (sélecteur sur la fiche produit) ── */
.pdv3-variants { padding: 14px 20px 4px; border-top: 1px solid rgba(255,255,255,.07); }
.pdv3-variants .pdv3-qty-lbl { display: block; margin-bottom: 10px; }
.pdv3-variants-grid { display: flex; flex-direction: column; gap: 8px; }
.pdv3-variant {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 14px; border-radius: 9px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #fff; cursor: pointer; text-align: left;
  font-family: var(--font-ui); font-size: 13px;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.pdv3-variant:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
.pdv3-variant__name { font-weight: 500; }
.pdv3-variant__price { font-weight: 700; color: rgba(255,255,255,.85); }
.pdv3-variant--active {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.pdv3-variant--active .pdv3-variant__price { color: #fff; }

.pdv3-qty-section { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.07); }
.pdv3-qty-lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.pdv3-qty-ctrl { display: flex; align-items: center; gap: 10px; }
.pdv3-qty-btn {
  width: 30px; height: 30px; border-radius: 7px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: background 120ms;
}
.pdv3-qty-btn:hover { background: rgba(255,255,255,.12); }
.pdv3-qty-val { font-size: 16px; font-weight: 700; color: #fff; min-width: 28px; text-align: center; }

/* ── Sidebar action buttons ── */
.pdv3-side-actions { padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.pdv3-btn-cart {
  width: 100%; padding: 13px; background: transparent;
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
  color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 130ms, border-color 130ms;
}
.pdv3-btn-cart:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }
.pdv3-btn-checkout {
  width: 100%; padding: 14px; background: #fff; border: none;
  border-radius: 10px; color: #0a0a0a; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: opacity 130ms;
}
.pdv3-btn-checkout:hover { opacity: .9; }
.pdv3-btn-checkout:disabled, .pdv3-btn-cart:disabled { opacity: .4; cursor: not-allowed; }

/* ── Responsive ── */
/* Garde la sidebar de catégories visible aussi longtemps que la page Shop (≤1023px),
   pour qu'en cliquant un produit on voie toujours les catégories. */
@media (max-width: 1023px) {
  .pdv3-cats { display: none; }
  .pdv3-content { padding-left: 0; }
}
@media (max-width: 1000px) {
  .pdv3-body { grid-template-columns: 1fr; }
  .pdv3-sidebar { position: static; }
  .pdv3-body > aside { order: -1; }
}
@media (max-width: 767px) {
  .pdv3-page { padding: 64px 16px 60px; }
  .pdv3-hero__bg-text { font-size: 60px; letter-spacing: -2px; }
  .pdv3-hero__icon { font-size: 80px; }
  .pdv3-hero__inner { padding: 24px 24px 8px; min-height: 120px; }
  .pdv3-hero__pills { padding: 0 24px 20px; }
  .pdv3-name { font-size: 24px; }
  .pdv3-price { font-size: 26px; }
  .pdv3-specs-wrap { grid-template-columns: 1fr; }
  .pdv3-specs-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
}
@media (max-width: 500px) {
  .pdv3-hero__bg-text { font-size: 42px; }
  .pdv3-hero__icon { font-size: 60px; }
  .pdv3-product-hdr { flex-direction: column; gap: 6px; }
  .pdv3-product-hdr__right { text-align: left; }
  .pdv3-guarantee-grid { grid-template-columns: 1fr 1fr; }
  .pdv3-hero { border-radius: 10px; }
}

/* ── Breadcrumb ── */
.pdv3-breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: rgba(255,255,255,.28); margin-bottom: 16px;
}
.pdv3-breadcrumb a { color: rgba(255,255,255,.35); transition: color 150ms; }
.pdv3-breadcrumb a:hover { color: rgba(255,255,255,.7); }
.pdv3-breadcrumb-sep { opacity: .3; font-size: 10px; }
.pdv3-breadcrumb-cur { color: rgba(255,255,255,.6); font-weight: 500; }

/* ── Hero social proof bar ── */
.pdv3-hero__social {
  padding: 14px 44px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.06);
}
.pdv3-hero-stat { display: flex; align-items: baseline; gap: 5px; }
.pdv3-hero-stat__val { font-size: 16px; font-weight: 700; color: #fff; }
.pdv3-hero-stat__lbl { font-size: 11px; color: rgba(255,255,255,.32); }
.pdv3-hero-stat--sep { width: 1px; height: 20px; background: rgba(255,255,255,.1); align-self: center; }
@media (max-width: 767px) { .pdv3-hero__social { padding: 14px 24px; gap: 16px; } }

/* ── What's included checklist ── */
.pdv3-checklist { display: flex; flex-direction: column; gap: 10px; }
.pdv3-check-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.5;
}
.pdv3-check-icon {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.22);
  display: flex; align-items: center; justify-content: center;
  color: #22c55e; margin-top: 1px;
}
.pdv3-check-icon svg { width: 10px; height: 10px; }

/* ── FAQ accordion ── */
.pdv3-faq { display: flex; flex-direction: column; gap: 8px; }
.pdv3-faq-item {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; overflow: hidden; transition: border-color 200ms;
}
.pdv3-faq-item.open { border-color: rgba(255,255,255,.14); }
.pdv3-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; background: none; border: none;
  color: rgba(255,255,255,.78); font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: left; font-family: inherit; transition: color 150ms;
}
.pdv3-faq-q:hover { color: #fff; }
.pdv3-faq-q svg { flex-shrink: 0; transition: transform 260ms ease; opacity: .4; }
.pdv3-faq-item.open .pdv3-faq-q svg { transform: rotate(180deg); opacity: .7; }
.pdv3-faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 300ms ease, padding 200ms ease;
  font-size: 13px; color: rgba(255,255,255,.42); line-height: 1.72;
  padding: 0 18px;
}
.pdv3-faq-item.open .pdv3-faq-a { max-height: 240px; padding: 0 18px 16px; }

/* ── Payment methods in sidebar ── */
.pdv3-pay-methods { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.07); }
.pdv3-pay-methods__lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.28); margin-bottom: 10px;
}
.pdv3-pay-row { display: flex; flex-wrap: wrap; gap: 5px; }
.pdv3-pay-badge {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 5px; padding: 4px 9px; font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,.35); letter-spacing: .04em;
}

/*──────────────────────────────────────────────
  CRYPTO CHECKOUT MODAL
──────────────────────────────────────────────*/
.cry-overlay {
  display: none; position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,.75); backdrop-filter: blur(6px);
}
.cry-overlay.open { display: block; }

.cry-modal {
  position: fixed; z-index: 8001;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(.97);
  width: 520px; max-width: calc(100vw - 32px);
  max-height: 90vh; overflow-y: auto;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 32px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.cry-modal.open {
  opacity: 1; pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

.cry-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.cry-hdr__left {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.85);
  letter-spacing: .02em;
}
.cry-hdr__shield {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.5);
}
.cry-close {
  width: 28px; height: 28px; border-radius: 6px;
  border: none; background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.5); font-size: 12px;
  cursor: pointer; transition: background 150ms, color 150ms;
  display: flex; align-items: center; justify-content: center;
}
.cry-close:hover { background: rgba(255,255,255,.12); color: #fff; }

.cry-step-hdr {
  padding: 20px 20px 12px;
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.7);
}

/* ── Coin selector grid ── */
.cry-coins {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; padding: 0 20px 20px;
}
.cry-coin {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  cursor: pointer; transition: background 180ms, border-color 180ms, transform 100ms;
}
.cry-coin:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.cry-coin:active { transform: scale(.98); }
.cry-coin--active {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.cry-coin--disabled { opacity: .3; cursor: not-allowed; pointer-events: none; }
.cry-coin__icon { font-size: 26px; font-weight: 700; font-family: monospace; line-height: 1; }
.cry-coin__name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.8); }
.cry-coin__sym  { font-size: 11px; color: rgba(255,255,255,.35); letter-spacing: .05em; }

.cry-unavail {
  margin: 0 20px 16px;
  padding: 10px 14px;
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2);
  border-radius: 8px; font-size: 12px; color: rgba(239,68,68,.85);
}
.cry-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px 18px;
  font-size: 12px; color: rgba(255,255,255,.4);
}

/* ── Step 2: payment screen ── */
.cry-pay-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cry-pay-coin {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.85);
}
.cry-pay-sym {
  font-size: 11px; color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  padding: 2px 7px; border-radius: 4px; letter-spacing: .04em; font-weight: 700;
}
.cry-pay-timer-wrap {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  padding: 4px 10px; border-radius: 6px;
}

.cry-pay-body {
  display: flex; gap: 20px;
  padding: 18px 20px;
}
.cry-qr-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.cry-qr {
  width: 140px; height: 140px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.09);
  background: #1a1a1a;
}
.cry-qr-scan {
  font-size: 10px; color: rgba(255,255,255,.3); letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600;
}

.cry-pay-details {
  flex: 1; display: flex; flex-direction: column; gap: 12px;
}
.cry-detail-row {
  display: flex; flex-direction: column; gap: 5px;
}
.cry-detail-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.32);
}
.cry-amount-box, .cry-addr-box {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px; padding: 8px 12px;
}
.cry-amount-val {
  flex: 1; font-size: 15px; font-weight: 700; color: #fff;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.cry-addr-val {
  flex: 1; font-size: 11px; color: rgba(255,255,255,.6);
  word-break: break-all; font-family: 'SF Mono', 'Fira Code', monospace;
}
.cry-copy-btn {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 5px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5); font-size: 11px; cursor: pointer;
  transition: background 150ms, color 150ms;
}
.cry-copy-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

.cry-warn {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 9px 12px;
  background: rgba(251,191,36,.06); border: 1px solid rgba(251,191,36,.15);
  border-radius: 7px; font-size: 11px; color: rgba(251,191,36,.75);
  line-height: 1.5;
}
.cry-warn svg { flex-shrink: 0; margin-top: 1px; }

/* ── Status bar ── */
.cry-status {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 12px; color: rgba(255,255,255,.5);
}
.cry-status__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fbbf24; flex-shrink: 0;
  animation: cry-pulse 1.8s ease-in-out infinite;
}
.cry-status--pending .cry-status__pulse { background: #60a5fa; }
.cry-status--error .cry-status__pulse   { background: #ef4444; animation: none; }
@keyframes cry-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.8); }
}

.cry-progress-bar {
  height: 2px; background: rgba(255,255,255,.06); margin: 0 20px;
  border-radius: 2px; overflow: hidden;
}
.cry-progress-fill {
  height: 100%; background: linear-gradient(90deg, #f4f5f7, #93969f);
  border-radius: 2px;
  transition: width 1s linear;
  width: 100%;
}

.cry-back-btn {
  display: block; width: calc(100% - 40px); margin: 10px 20px 18px;
  padding: 9px; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.45); font-size: 12px; cursor: pointer;
  transition: background 150ms, color 150ms;
}
.cry-back-btn:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }

/* ── Step 3: success ── */
.cry-success {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 28px 24px;
}
.cry-success__icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.25);
  color: #22c55e; font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cry-success__title {
  font-size: 20px; font-weight: 700; color: #fff;
}
.cry-success__sub {
  font-size: 13px; color: rgba(255,255,255,.4); margin-top: -4px;
}
.cry-tx-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  padding: 7px 12px; border-radius: 7px; width: 100%;
}
.cry-tx-lbl { font-weight: 700; flex-shrink: 0; }
.cry-tx-val { font-family: monospace; word-break: break-all; }

.cry-inv-box {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px; padding: 10px 14px; width: 100%;
}
.cry-inv-meta { display: flex; flex-direction: column; gap: 2px; }
.cry-inv-lbl { font-size: 10px; color: rgba(255,255,255,.32); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cry-inv-val { font-size: 14px; font-weight: 700; color: #fff; font-family: monospace; }

.cry-deliv-box {
  position: relative; width: 100%;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px; padding: 12px 14px;
}
.cry-deliv-lbl {
  font-size: 10px; color: rgba(255,255,255,.32); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.cry-deliv-val {
  font-size: 14px; color: #fff; word-break: break-all;
  filter: blur(6px); user-select: none; transition: filter 200ms;
}
.cry-deliv-val.shown { filter: none; user-select: text; }
.cry-reveal-btn {
  margin-top: 8px; padding: 6px 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; font-size: 11px; color: rgba(255,255,255,.6); cursor: pointer;
  transition: background 150ms;
}
.cry-reveal-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

.cry-shop-btn {
  margin-top: 6px; padding: 10px 20px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.65); cursor: pointer;
  transition: background 150ms, color 150ms;
}
.cry-shop-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ── Spinner ── */
.cry-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12);
  border-top-color: rgba(255,255,255,.6);
  animation: cry-spin .7s linear infinite;
}
@keyframes cry-spin { to { transform: rotate(360deg); } }

/* ── Checkout modal — Payment method selector ── */
.co-pm-selector {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin: 0 0 16px;
}
.co-pm-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 8px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.6); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background 150ms, border-color 150ms, color 150ms;
}
.co-pm-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #fff; }
.co-pm-btn--active {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.28);
  color: #fff;
}
.co-pm-btn__icon { font-size: 16px; }

/* ── Product page improvements ── */
.pdv3-sidebar {
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  position: sticky; top: 72px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}

/* Scrollbar for sidebar */
.pdv3-sidebar::-webkit-scrollbar { width: 4px; }
.pdv3-sidebar::-webkit-scrollbar-track { background: transparent; }
.pdv3-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* Upgrade checkout button */
.pdv3-btn-checkout {
  background: #fff !important;
  color: #000 !important;
  font-weight: 700 !important;
}
.pdv3-btn-checkout:hover {
  background: #f0f0f0 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,255,255,.1);
}

/* Crypto badges in payment section */
.pdv3-pay-badge--crypto {
  background: rgba(153,69,255,.10);
  border-color: rgba(153,69,255,.25);
  color: rgba(153,69,255,.85);
}

@media (max-width: 900px) {
  .cry-pay-body { flex-direction: column; }
  .cry-qr-wrap { flex-direction: row; gap: 16px; align-items: center; }
  .cry-qr { width: 100px; height: 100px; }
}
@media (max-width: 540px) {
  .cry-coins { grid-template-columns: 1fr 1fr; }
  .cry-modal { border-radius: 12px 12px 0 0; top: auto; bottom: 0; left: 0; right: 0;
    transform: translateY(10px); width: 100%; max-width: 100%;
    max-height: 92vh; }
  .cry-modal.open { transform: translateY(0); }
}

/*──────────────────────────────────────────────
  REDUCED MOTION (skill: reduced-motion, CRITICAL)
  Respect users who request less animation.
──────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE
   Moved here from the original product page's inline <style>; a SellAuth theme
   serves its CSS from assets/, and every page now shares one stylesheet.
   ═══════════════════════════════════════════════════════════════════════════ */
    /* ══ Page produit ══════════════════════════════════════════════════════
       Deux colonnes : le contenu defile, le panneau d'achat reste colle. Sous
       ce bloc, les sections d'information s'empilent en pleine largeur.

       Contrairement au reste du site (volontairement monochrome), cette page a
       UNE couleur d'accent, tenue dans --pdx-accent et confinee a .pdx-page :
       elle ne peut donc pas deteindre sur les autres pages. Pour l'etendre au
       site entier, il suffit de deplacer ces variables dans :root.

       Les animations passent toutes par .pdx-rise (revelation au defilement) et
       des transitions courtes au survol. Elles sont entierement neutralisees
       par prefers-reduced-motion, en bas de ce bloc. */
    .pdx-page {
      --pdx-accent:      #d3d6de;
      --pdx-accent-line: rgba(255,255,255,.30);
      --pdx-accent-soft: rgba(255,255,255,.07);
      --pdx-accent-glow: rgba(255,255,255,.16);
      --pdx-accent-grad: linear-gradient(150deg, #f4f5f7 0%, #c7cad2 52%, #93969f 100%);
      --pdx-panel:       rgba(255,255,255,.025);
      --pdx-panel-hi:    rgba(255,255,255,.045);
      --pdx-line:        rgba(255,255,255,.07);
      --pdx-ok:          #34d399;
      --pdx-star:        #ffd27a;
      --pdx-r:           16px;
      --pdx-ease:        cubic-bezier(.22,.61,.36,1);
      position: relative;
      max-width: 1180px; margin: 0 auto; padding: 96px 28px 80px;
    }
    .pdx-display { font-family: 'Plus Jakarta Sans', var(--font-ui); }

    /* Halo d'ambiance derriere l'en-tete. Purement decoratif, donc hors du flux
       et non cliquable : il ne doit jamais intercepter un clic. */
    .pdx-page::before {
      content: ''; position: absolute; z-index: -1; pointer-events: none;
      top: 40px; left: 50%; transform: translateX(-50%);
      width: min(760px, 92%); height: 420px;
      background: radial-gradient(50% 50% at 50% 50%, var(--pdx-accent-glow), transparent 70%);
      filter: blur(50px); opacity: .5;
      animation: pdx-breathe 9s var(--pdx-ease) infinite;
    }
    @keyframes pdx-breathe {
      0%, 100% { opacity: .38; transform: translateX(-50%) scale(1); }
      50%      { opacity: .62; transform: translateX(-50%) scale(1.09); }
    }

    /* ── Revelation au defilement ──
       L'element part legerement plus bas et transparent ; l'observateur ajoute
       .is-in quand il entre dans l'ecran. --d echelonne les enfants d'une meme
       rangee. Sans JavaScript (ou si l'observateur echoue), rien ne s'affiche —
       d'où le filet de securite .pdx-rise sans .is-in visible par defaut, que le
       script retire seulement une fois qu'il a pris la main. */
    .pdx-js .pdx-rise {
      opacity: 0; transform: translateY(18px);
      transition: opacity .62s var(--pdx-ease), transform .62s var(--pdx-ease);
      transition-delay: var(--d, 0ms);
    }
    .pdx-js .pdx-rise.is-in { opacity: 1; transform: none; }

    /* ── Fil d'Ariane ── */
    .pdx-crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 18px; }
    .pdx-crumb a { color: rgba(255,255,255,.42); transition: color .2s var(--pdx-ease); }
    .pdx-crumb a:hover { color: #fff; }
    .pdx-crumb span { color: rgba(255,255,255,.22); }
    .pdx-crumb .pdx-crumb__cur { color: rgba(255,255,255,.75); }

    /* ── En-tete : nom + note a gauche, disponibilite a droite ── */
    .pdx-head {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
      background: var(--pdx-panel); border: 1px solid var(--pdx-line);
      border-radius: var(--pdx-r); padding: 24px 26px; margin-bottom: 16px;
      position: relative; overflow: hidden;
    }
    /* Liseré d'accent qui se déploie a l'ouverture de la page. */
    .pdx-head::after {
      content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
      background: linear-gradient(90deg, var(--pdx-accent), transparent);
      transform: scaleX(0); transform-origin: left;
      animation: pdx-sweep 1.1s var(--pdx-ease) .15s forwards;
    }
    @keyframes pdx-sweep { to { transform: scaleX(1); } }

    .pdx-head__name { font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -.8px; margin: 0 0 10px; }
    .pdx-head__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .pdx-tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border-radius: 7px;
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
      font-size: 11.5px; color: rgba(255,255,255,.55);
      transition: border-color .22s var(--pdx-ease), color .22s var(--pdx-ease), transform .22s var(--pdx-ease);
    }
    .pdx-tag:hover { border-color: var(--pdx-accent-line); color: rgba(255,255,255,.85); transform: translateY(-1px); }
    .pdx-tag--rating { color: var(--pdx-star); border-color: rgba(255,210,122,.22); background: rgba(255,210,122,.07); }

    .pdx-status {
      display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
      padding: 7px 13px; border-radius: 9px;
      background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.24);
      font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff;
    }
    .pdx-status::before {
      content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--pdx-ok);
      box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: pdx-pulse 2.2s infinite;
    }
    .pdx-status.out { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.24); }
    .pdx-status.out::before { background: #ef4444; box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
    @keyframes pdx-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.55); }
      70%  { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
      100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
    }

    /* ── Visuel + panneau d'achat ──
       La description occupe la 2e ligne de la colonne de gauche, sous la
       galerie ; le panneau d'achat enjambe les deux lignes a droite. Sans ce
       placement explicite, la description passait sous le panneau et laissait
       une grande zone vide a cote de lui. */
    .pdx-top { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; margin-bottom: 16px; }
    /* Galerie et description sont regroupees dans un conteneur plutot que
       placees a la main sur deux lignes : un panneau d'achat qui enjambe deux
       lignes etire celles-ci a sa propre hauteur, ce qui creusait un grand vide
       entre l'image et la description. */
    .pdx-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
    .pdx-main > .pdx-desc { margin-bottom: 0; }

    .pdx-visual {
      position: relative; overflow: hidden;
      background: var(--pdx-panel); border: 1px solid var(--pdx-line);
      border-radius: var(--pdx-r); min-height: 340px;
      display: flex; align-items: center; justify-content: center;
      transition: border-color .3s var(--pdx-ease);
    }
    .pdx-visual:hover { border-color: var(--pdx-accent-line); }
    /* Lueur qui suit le curseur : --mx/--my sont poses par le script. */
    .pdx-visual::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--pdx-accent-soft), transparent 65%);
      opacity: 0; transition: opacity .35s var(--pdx-ease);
    }
    .pdx-visual:hover::before { opacity: 1; }
    .pdx-visual__bg {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      font-size: 132px; font-weight: 800; letter-spacing: -6px;
      color: rgba(255,255,255,.028); white-space: nowrap; pointer-events: none; user-select: none;
    }
    .pdx-visual__icon {
      position: relative; font-size: 92px; line-height: 1;
      animation: pdx-float 6s var(--pdx-ease) infinite;
    }
    .pdx-visual__icon img { width: 128px; height: 128px; object-fit: contain; }
    @keyframes pdx-float {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-11px); }
    }
    .pdx-visual__pills { position: absolute; left: 18px; bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
    /* L'image de la galerie est un <img> plein cadre et non un background :
       on peut ainsi la faire disparaitre en fondu au changement de vignette. */
    .pdx-visual__img {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      transition: opacity .26s var(--pdx-ease);
    }
    .pdx-visual__img.pdx-fade { opacity: 0; }

    /* ── Galerie : visuel principal + bande de vignettes ── */
    .pdx-gal { display: flex; flex-direction: column; gap: 10px; }
    .pdx-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
    .pdx-thumb {
      position: relative; overflow: hidden; cursor: pointer; padding: 0;
      aspect-ratio: 16 / 10; border-radius: 11px; opacity: .5;
      background: var(--pdx-panel); border: 1px solid var(--pdx-line);
      display: flex; align-items: center; justify-content: center; font-size: 26px;
      transition: opacity .22s var(--pdx-ease), border-color .22s var(--pdx-ease), transform .22s var(--pdx-ease);
    }
    .pdx-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .pdx-thumb:hover { opacity: .85; transform: translateY(-2px); border-color: rgba(255,255,255,.15); }
    .pdx-thumb--active { opacity: 1; border-color: var(--pdx-accent); box-shadow: 0 0 0 1px var(--pdx-accent-line); }
    .pdx-thumb:focus-visible { outline: 2px solid var(--pdx-accent); outline-offset: 2px; }

    .pdx-buy {
      position: sticky; top: 88px;
      background: var(--pdx-panel); border: 1px solid var(--pdx-line);
      border-radius: var(--pdx-r); overflow: hidden;
    }
    .pdx-buy__hdr {
      display: flex; align-items: center; gap: 8px;
      padding: 13px 20px; border-bottom: 1px solid var(--pdx-line);
      background: linear-gradient(180deg, var(--pdx-accent-soft), transparent);
      font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff;
    }
    .pdx-buy__hdr svg { color: var(--pdx-accent); }
    .pdx-buy__price { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
    .pdx-buy__lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 6px; }
    .pdx-buy__amount { font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -1px; line-height: 1; }

    /* ── Promotion : bandeau, prix barre, economie ──
       Tout ce bloc reste masque tant que le produit n'a pas d'ancien prix. */
    .pdx-sale {
      display: flex; align-items: center; gap: 9px;
      padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,.06);
      background: linear-gradient(90deg, rgba(239,68,68,.16), transparent);
      font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.72);
    }
    .pdx-sale__pct {
      padding: 3px 8px; border-radius: 6px; letter-spacing: .04em;
      background: #ef4444; color: #fff; font-size: 11px; font-weight: 800;
    }
    .pdx-buy__row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
    .pdx-buy__was { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.3); text-decoration: line-through; }
    .pdx-buy__save { margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--pdx-ok); }

    /* ── Formules : liste de plans en lignes-radio (pastille + coche) ── */
    .pdx-plans { display: grid; gap: 8px; }
    .pdx-plan {
      position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
      text-align: left; cursor: pointer; font-family: inherit;
      padding: 12px 14px; border-radius: 12px;
      background: rgba(255,255,255,.02); border: 1px solid var(--pdx-line); color: inherit;
      transition: border-color .22s var(--pdx-ease), background .22s var(--pdx-ease);
    }
    .pdx-plan:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); }
    .pdx-plan--active { border-color: var(--pdx-accent-line); background: var(--pdx-accent-soft); }
    .pdx-plan:focus-visible { outline: 2px solid var(--pdx-accent); outline-offset: 2px; }
    .pdx-plan__main { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .pdx-plan__radio {
      flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%;
      border: 2px solid rgba(255,255,255,.28);
      display: flex; align-items: center; justify-content: center;
      transition: border-color .2s var(--pdx-ease), background .2s var(--pdx-ease);
    }
    .pdx-plan--active .pdx-plan__radio { border-color: var(--pdx-accent); background: var(--pdx-accent); }
    .pdx-plan__radio svg { width: 9px; height: 9px; color: #17171c; opacity: 0; transition: opacity .2s var(--pdx-ease); }
    .pdx-plan--active .pdx-plan__radio svg { opacity: 1; }
    .pdx-plan__name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pdx-plan--active .pdx-plan__name { color: #fff; }
    .pdx-plan__price { flex-shrink: 0; font-size: 13.5px; font-weight: 800; color: #fff; letter-spacing: -.2px; }
    .pdx-plan--active .pdx-plan__price { color: var(--pdx-accent); }
    .pdx-plan__was { margin-left: 6px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.28); text-decoration: line-through; }
    .pdx-plan__flag {
      padding: 2px 6px; border-radius: 5px; white-space: nowrap;
      background: var(--pdx-accent-grad); color: #17171c; font-size: 8.5px; font-weight: 800;
      letter-spacing: .05em; text-transform: uppercase;
    }
    .pdx-plans-note { margin-bottom: 9px; font-size: 11.5px; font-weight: 600; color: var(--pdx-ok); }
    /* Le prix clignote brievement quand la quantite change : le changement de
       chiffre passait sinon totalement inapercu. */
    .pdx-bump { animation: pdx-bump .38s var(--pdx-ease); }
    @keyframes pdx-bump {
      0%   { transform: scale(1);    color: #fff; }
      45%  { transform: scale(1.07); color: var(--pdx-accent); }
      100% { transform: scale(1);    color: #fff; }
    }

    /* Reassurance sous le prix. */
    .pdx-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 20px 0; }
    .pdx-trust__item {
      display: flex; align-items: center; gap: 7px;
      padding: 8px 10px; border-radius: 9px;
      background: rgba(255,255,255,.03); border: 1px solid var(--pdx-line);
      font-size: 11px; color: rgba(255,255,255,.6);
      transition: border-color .22s var(--pdx-ease), transform .22s var(--pdx-ease);
    }
    .pdx-trust__item:hover { border-color: var(--pdx-accent-line); transform: translateY(-1px); }
    .pdx-trust__item svg { color: var(--pdx-accent); flex-shrink: 0; }

    .pdx-buy__body { padding: 16px 20px 20px; }
    .pdx-buy__sect { margin-bottom: 16px; }
    .pdx-buy__sect:last-child { margin-bottom: 0; }

    .pdx-line { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.50); padding: 5px 0; }
    .pdx-line--total { color: #fff; font-size: 15px; font-weight: 700; padding-top: 11px; margin-top: 5px; border-top: 1px solid var(--pdx-line); }

    /* Recapitulatif compact du produit choisi. */
    .pdx-mini { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 12px; }
    .pdx-mini__thumb {
      width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
      background: rgba(255,255,255,.05); border: 1px solid var(--pdx-line);
      display: flex; align-items: center; justify-content: center; font-size: 20px;
    }
    .pdx-mini__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
    .pdx-mini__info { flex: 1; min-width: 0; }
    .pdx-mini__name { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pdx-mini__qty { font-size: 12px; color: rgba(255,255,255,.38); margin-top: 2px; }
    .pdx-mini__price { font-size: 14px; font-weight: 700; color: #fff; }
    .pdx-mini__rm {
      flex-shrink: 0; width: 22px; height: 22px; margin-left: 4px; border-radius: 6px;
      border: 1px solid rgba(255,255,255,.1); background: transparent; color: rgba(255,255,255,.4);
      font-size: 15px; line-height: 1; cursor: pointer;
      transition: color .2s var(--pdx-ease), border-color .2s var(--pdx-ease), background .2s var(--pdx-ease);
    }
    .pdx-mini__rm:hover { color: #fff; border-color: var(--pdx-accent-line); background: var(--pdx-accent-soft); }

    /* Variantes et quantite : on repasse par-dessus les styles pdv3 de
       style.css pour les aligner sur l'accent, sans toucher au fichier commun
       (ces classes servent aussi ailleurs). */
    .pdx-page .pdv3-variant { transition: border-color .22s var(--pdx-ease), background .22s var(--pdx-ease), transform .22s var(--pdx-ease); }
    .pdx-page .pdv3-variant:hover { transform: translateY(-1px); border-color: var(--pdx-accent-line); }
    .pdx-page .pdv3-variant--active { border-color: var(--pdx-accent-line); background: var(--pdx-accent-soft); }
    .pdx-page .pdv3-qty-btn { transition: background .2s var(--pdx-ease), border-color .2s var(--pdx-ease), transform .12s var(--pdx-ease); }
    .pdx-page .pdv3-qty-btn:hover { border-color: var(--pdx-accent-line); background: var(--pdx-accent-soft); }
    .pdx-page .pdv3-qty-btn:active { transform: scale(.9); }

    /* Bouton principal : bord d'accent + balayage lumineux au survol. */
    .pdx-page .pdv3-btn-checkout {
      position: relative; overflow: hidden;
      border: 1px solid var(--pdx-accent-line);
      background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
      transition: box-shadow .3s var(--pdx-ease), transform .18s var(--pdx-ease), border-color .3s var(--pdx-ease);
    }
    .pdx-page .pdv3-btn-checkout:hover:not(:disabled) {
      transform: translateY(-2px);
      border-color: var(--pdx-accent);
      box-shadow: 0 10px 28px -8px var(--pdx-accent-glow);
    }
    .pdx-page .pdv3-btn-checkout:active:not(:disabled) { transform: translateY(0); }
    .pdx-page .pdv3-btn-checkout::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
      transform: translateX(-180%);
    }
    .pdx-page .pdv3-btn-checkout:hover:not(:disabled)::after { animation: pdx-shine .9s var(--pdx-ease); }
    @keyframes pdx-shine { to { transform: translateX(320%); } }
    .pdx-page .pdv3-btn-cart { transition: border-color .22s var(--pdx-ease), background .22s var(--pdx-ease), transform .18s var(--pdx-ease); }
    .pdx-page .pdv3-btn-cart:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--pdx-accent-line); }

    /* ── Sections d'information ── */
    .pdx-sec { margin-bottom: 16px; }
    .pdx-sec__hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .pdx-sec__title { font-size: 17px; font-weight: 700; color: #fff; }
    .pdx-sec__sub { font-size: 12.5px; color: rgba(255,255,255,.35); }
    .pdx-card {
      background: var(--pdx-panel); border: 1px solid var(--pdx-line);
      border-radius: 14px; padding: 22px 24px;
      transition: border-color .28s var(--pdx-ease), background .28s var(--pdx-ease);
    }
    .pdx-card--hover:hover { border-color: var(--pdx-accent-line); background: var(--pdx-panel-hi); }
    .pdx-card__text { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.58); }

    .pdx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
    .pdx-list { list-style: none; margin: 0; padding: 0; }
    .pdx-list li {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px 0; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.58);
      border-bottom: 1px solid rgba(255,255,255,.05);
      transition: color .22s var(--pdx-ease), transform .22s var(--pdx-ease);
    }
    .pdx-list li:hover { color: rgba(255,255,255,.85); transform: translateX(3px); }
    .pdx-list li:last-child { border-bottom: none; padding-bottom: 0; }
    .pdx-list svg { flex-shrink: 0; margin-top: 2px; color: var(--pdx-accent); }

    /* ── Points forts (pageGuarantees, editables dans l'admin) ── */
    .pdx-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .pdx-feat {
      background: var(--pdx-panel); border: 1px solid var(--pdx-line);
      border-radius: 14px; padding: 18px 16px; text-align: center;
      transition: border-color .28s var(--pdx-ease), transform .28s var(--pdx-ease), background .28s var(--pdx-ease);
    }
    .pdx-feat:hover { border-color: var(--pdx-accent-line); background: var(--pdx-panel-hi); transform: translateY(-4px); }
    .pdx-feat__icon {
      width: 38px; height: 38px; margin: 0 auto 11px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      background: var(--pdx-accent-grad); border: 1px solid rgba(255,255,255,.18); color: #17171c;
      transition: transform .35s var(--pdx-ease);
    }
    .pdx-feat:hover .pdx-feat__icon { transform: scale(1.12) rotate(-6deg); }
    .pdx-feat__title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 3px; }
    .pdx-feat__desc { font-size: 11.5px; color: rgba(255,255,255,.38); line-height: 1.5; }

    /* ── Avis : en-tête « badge étoile » + cartes témoignages ── */
    .pdx-rev__hdr { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
    .pdx-rev__head-main { display: flex; align-items: center; gap: 14px; }
    .pdx-rev__icon {
      width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(145deg, rgba(255,210,122,.26), rgba(255,210,122,.07));
      border: 1.5px solid rgba(255,210,122,.32); color: var(--pdx-star);
    }
    .pdx-rev__title { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.4px; }
    .pdx-rev__meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
    .pdx-rev__meta-stars { color: var(--pdx-star); font-size: 13px; letter-spacing: 1px; }
    .pdx-rev__meta-score { font-size: 13px; font-weight: 800; color: #fff; }
    .pdx-rev__meta-count { font-size: 12px; color: rgba(255,255,255,.4); }
    .pdx-rev__empty { color: rgba(255,255,255,.32); font-size: 13px; padding: 4px 0; }

    #pdReviewsList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .pdx-rev-card {
      position: relative; display: flex; flex-direction: column; gap: 12px;
      background: var(--pdx-panel); border: 1px solid rgba(255,255,255,.07);
      border-radius: 14px; padding: 18px;
      transition: border-color .28s var(--pdx-ease), transform .28s var(--pdx-ease), background .28s var(--pdx-ease);
    }
    .pdx-rev-card:hover { border-color: var(--pdx-accent-line); background: var(--pdx-panel-hi); transform: translateY(-3px); }
    .pdx-rev-card__top { display: flex; align-items: flex-start; justify-content: space-between; }
    .pdx-rev-card__stars { color: var(--pdx-star); font-size: 14px; letter-spacing: 1.5px; }
    .pdx-rev-card__quote { font-family: Georgia, 'Times New Roman', serif; font-size: 42px; line-height: .5; color: rgba(255,255,255,.1); }
    .pdx-rev-card__body { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.62); margin: 0; flex: 1; }
    .pdx-rev-card__foot { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
    .pdx-rev-card__avatar {
      width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(145deg, rgba(255,210,122,.26), rgba(255,210,122,.07));
      border: 1px solid rgba(255,210,122,.28); color: var(--pdx-star);
      font-size: 13px; font-weight: 800;
    }
    .pdx-rev-card__who { flex: 1; min-width: 0; }
    .pdx-rev-card__name { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pdx-rev-card__time { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 1px; }
    .pdx-rev-card__verified {
      display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
      padding: 4px 8px; border-radius: 7px;
      background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); color: var(--pdx-ok);
      font-size: 10px; font-weight: 700;
    }
    .pdx-rev-card__verified svg { width: 11px; height: 11px; }

    /* ── Questions frequentes : accordeon ──
       L'ouverture anime max-height. On aurait prefere grid-template-rows 0fr→1fr
       (transition vers une hauteur inconnue, sans plafond a deviner), mais c'est
       du Chrome 111+ / Safari 16+ : trop recent pour une boutique publique, et
       sur un navigateur plus ancien le volet resterait clos. max-height est
       supporte partout ; le plafond est large (les reponses tiennent en 2-3
       lignes) et n'a d'effet que sur la duree, jamais sur la hauteur finale. */
    .pdx-faq { display: flex; flex-direction: column; gap: 10px; }
    .pdx-faq__item {
      background: var(--pdx-panel); border: 1px solid var(--pdx-line);
      border-radius: 13px; overflow: hidden;
      transition: border-color .28s var(--pdx-ease), background .28s var(--pdx-ease);
    }
    .pdx-faq__item:hover { border-color: rgba(255,255,255,.14); }
    .pdx-faq__item.open { border-color: var(--pdx-accent-line); background: var(--pdx-panel-hi); }
    .pdx-faq__q {
      display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
      padding: 16px 20px; background: none; border: none; cursor: pointer; text-align: left;
      font-size: 14.5px; font-weight: 600; color: #fff; font-family: inherit;
      transition: color .2s var(--pdx-ease);
    }
    .pdx-faq__chev { flex-shrink: 0; color: rgba(255,255,255,.4); transition: transform .3s var(--pdx-ease), color .3s var(--pdx-ease); }
    .pdx-faq__item.open .pdx-faq__chev { transform: rotate(180deg); color: var(--pdx-accent); }
    .pdx-faq__wrap { max-height: 0; overflow: hidden; transition: max-height .34s var(--pdx-ease); }
    .pdx-faq__item.open .pdx-faq__wrap { max-height: 340px; }
    .pdx-faq__a { font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.52); margin: 0; padding: 0 20px 17px; }

    /* ── Produits similaires ── */
    .pdx-rel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .pdx-rel__card {
      display: flex; flex-direction: column; gap: 10px;
      background: var(--pdx-panel); border: 1px solid var(--pdx-line);
      border-radius: 14px; padding: 16px;
      transition: border-color .28s var(--pdx-ease), transform .28s var(--pdx-ease), background .28s var(--pdx-ease);
    }
    .pdx-rel__card:hover { border-color: var(--pdx-accent-line); background: var(--pdx-panel-hi); transform: translateY(-4px); }
    .pdx-rel__thumb {
      width: 46px; height: 46px; border-radius: 11px; font-size: 23px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.04); border: 1px solid var(--pdx-line);
      transition: transform .35s var(--pdx-ease);
    }
    .pdx-rel__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
    .pdx-rel__card:hover .pdx-rel__thumb { transform: scale(1.08); }
    .pdx-rel__name { font-size: 13.5px; font-weight: 600; color: #fff; }
    .pdx-rel__price { font-size: 13px; font-weight: 700; color: var(--pdx-accent); margin-top: auto; }
    .pdx-rel__go { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: rgba(255,255,255,.35); transition: gap .22s var(--pdx-ease), color .22s var(--pdx-ease); }
    .pdx-rel__card:hover .pdx-rel__go { gap: 9px; color: rgba(255,255,255,.7); }

    .pdx-back {
      display: inline-flex; align-items: center; gap: 7px; margin-top: 26px;
      font-size: 13.5px; color: rgba(255,255,255,.45);
      transition: color .2s var(--pdx-ease), gap .2s var(--pdx-ease);
    }
    .pdx-back:hover { color: #fff; gap: 11px; }

    @media (max-width: 1023px) {
      .pdx-page { padding: 92px 18px 64px; }
      .pdx-top { grid-template-columns: 1fr; }
      .pdx-buy { position: static; }
      .pdx-cols { grid-template-columns: 1fr; }
      #pdReviewsList { grid-template-columns: 1fr; }
      .pdx-feats, .pdx-rel { grid-template-columns: 1fr 1fr; }
      .pdx-head { flex-direction: column; }
      .pdx-head__name { font-size: 24px; }
      .pdx-visual { min-height: 240px; }
      .pdx-visual__bg { font-size: 82px; }
    }
    @media (max-width: 560px) {
      .pdx-feats, .pdx-rel, .pdx-trust { grid-template-columns: 1fr; }
      /* Cinq vignettes deviennent illisibles sous 560px : on passe a trois. */
      .pdx-thumbs { grid-template-columns: repeat(3, 1fr); }
    }

    /* Accessibilite : quand le systeme demande moins de mouvement, on coupe
       tout. Les etats restent lisibles, seul le deplacement disparait. */
    @media (prefers-reduced-motion: reduce) {
      .pdx-page *, .pdx-page *::before, .pdx-page *::after {
        animation: none !important;
        transition-duration: .01ms !important;
      }
      .pdx-js .pdx-rise { opacity: 1 !important; transform: none !important; }
    }

/* ═══════════════════════════════════════════════════════════════════════════
   REVIEWS
   Moved here from the original reviews page's inline <style>.
   ═══════════════════════════════════════════════════════════════════════════ */
    .reviews-hero {
      padding: 140px 24px 64px;
      text-align: center;
      max-width: 640px;
      margin: 0 auto;
    }
    .reviews-hero__eyebrow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    .reviews-hero__eyebrow-line {
      height: 1px;
      width: 40px;
      background: rgba(255,255,255,.15);
    }
    .reviews-hero__eyebrow-text {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.4);
    }
    .reviews-hero__title {
      font-family: 'Lancelot', serif;
      font-size: clamp(36px, 6vw, 56px);
      font-weight: 400;
      line-height: 1.1;
      margin: 0 0 16px;
      color: #fff;
    }
    .reviews-hero__sub {
      font-size: 15px;
      color: rgba(255,255,255,.45);
      line-height: 1.7;
      margin: 0;
    }
    .reviews-hero__stars {
      display: flex;
      justify-content: center;
      gap: 4px;
      margin-bottom: 20px;
    }
    .reviews-hero__stars svg { color: #f5a623; }

    .reviews-wrap {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 24px 80px;
    }
    .reviews-grid {
      columns: 3;
      column-gap: 20px;
    }
    @media (max-width: 900px) { .reviews-grid { columns: 2; } }
    @media (max-width: 560px) { .reviews-grid { columns: 1; } }

    .review-card {
      break-inside: avoid;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      padding: 20px;
      margin-bottom: 20px;
      transition: border-color 200ms ease, background 200ms ease;
    }
    .review-card:hover {
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.14);
    }
    .review-card__header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }
    .review-card__avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }
    .review-card__info { flex: 1; min-width: 0; }
    .review-card__name {
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .review-card__date {
      font-size: 12px;
      color: rgba(255,255,255,.35);
      margin-top: 1px;
    }
    .review-card__stars {
      display: flex;
      gap: 2px;
      margin-bottom: 10px;
    }
    .review-card__stars svg { color: #f5a623; }
    .review-card__text {
      font-size: 14px;
      color: rgba(255,255,255,.65);
      line-height: 1.65;
      margin: 0 0 12px;
    }
    .review-card__badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,.4);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 20px;
      padding: 3px 10px;
    }

    .reviews-summary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 32px;
      padding: 32px 24px;
      margin: 0 auto 56px;
      max-width: 560px;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 16px;
    }
    .reviews-summary__item { text-align: center; }
    .reviews-summary__value {
      display: block;
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      line-height: 1;
    }
    .reviews-summary__label {
      display: block;
      font-size: 12px;
      color: rgba(255,255,255,.4);
      margin-top: 4px;
    }
    .reviews-summary__divider {
      width: 1px;
      height: 40px;
      background: rgba(255,255,255,.1);
    }

    /* ═══ Reviews — palette gris → blanc ═══ */
    :root {
      --rv-accent:#d4d7de;                                         /* gris clair (fallback couleur unie) */
      --rv-grad:linear-gradient(135deg,#5b616e 0%,#f6f7f9 100%);   /* gris → blanc */
      --rv-ink:#16171b;                                            /* texte sombre lisible sur le dégradé clair */
      --rv-star:#f5b423;
    }
    .rv-hero { position:relative; padding:130px 24px 26px; text-align:center; overflow:hidden; }
    .rv-hero::before { content:''; position:absolute; left:50%; top:-40px; width:920px; height:520px; transform:translateX(-50%);
      background:radial-gradient(ellipse at center, rgba(255,255,255,.12), transparent 62%); pointer-events:none; }
    .rv-hero__pill { position:relative; display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:999px;
      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.78);
      font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; margin-bottom:22px; }
    .rv-hero__title { position:relative; font-family:var(--font-ui); font-size:clamp(46px,8vw,84px); font-weight:800;
      letter-spacing:-2px; line-height:1; margin:0; color:#fff; }

    .reviews-wrap { max-width:1240px; }
    .rv-panel { display:flex; align-items:center; gap:26px; flex-wrap:wrap;
      background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07); border-radius:20px; padding:22px 26px; margin-bottom:30px; }
    .rv-score { display:flex; align-items:center; gap:24px; }
    .rv-score__num { text-align:center; flex-shrink:0; }
    .rv-score__val { font-size:38px; font-weight:800; color:#fff; line-height:1; }
    .rv-score__stars { display:flex; gap:2px; justify-content:center; margin:6px 0 4px; }
    .rv-score__stars svg { color:var(--rv-star); }
    .rv-score__out { font-size:11px; color:rgba(255,255,255,.4); }
    .rv-dist { display:flex; flex-direction:column; gap:5px; min-width:236px; }
    .rv-dist__row { display:flex; align-items:center; gap:8px; font-size:12px; }
    .rv-dist__lbl { display:inline-flex; align-items:center; gap:3px; width:26px; color:rgba(255,255,255,.7); font-weight:600; }
    .rv-dist__lbl svg { color:var(--rv-star); }
    .rv-dist__bar { flex:1; height:7px; border-radius:4px; background:rgba(255,255,255,.06); overflow:hidden; }
    .rv-dist__fill { display:block; height:100%; border-radius:4px; }
    .rv-dist__count { width:18px; text-align:right; color:#fff; font-weight:600; }
    .rv-dist__pct { width:44px; color:rgba(255,255,255,.32); }
    .rv-divider { width:1px; align-self:stretch; background:rgba(255,255,255,.08); }
    .rv-filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1; }
    .rv-pills { display:flex; gap:8px; flex-wrap:wrap; }
    .rv-dd { position:relative; }
    .rv-dd__btn { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:11px;
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:#fff; font-size:13px; font-weight:500;
      font-family:var(--font-ui); cursor:pointer; }
    .rv-dd__menu { position:absolute; top:calc(100% + 6px); left:0; min-width:190px; z-index:30;
      background:#141417; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:6px; display:none;
      max-height:300px; overflow:auto; box-shadow:0 18px 44px rgba(0,0,0,.55); }
    .rv-dd.open .rv-dd__menu { display:block; }
    .rv-dd__opt { padding:8px 10px; border-radius:8px; font-size:13px; color:rgba(255,255,255,.78); cursor:pointer; white-space:nowrap; }
    .rv-dd__opt:hover, .rv-dd__opt.active { background:rgba(255,255,255,.1); color:#fff; }
    /* Barres de défilement discrètes (plus de « barre blanche » sur fond sombre) */
    html{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
    body::-webkit-scrollbar, html::-webkit-scrollbar{ width:12px; }
    body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:10px; border:3px solid #09090b; }
    body::-webkit-scrollbar-track, html::-webkit-scrollbar-track{ background:#09090b; }
    .rv-dd__menu{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; }
    .rv-dd__menu::-webkit-scrollbar{ width:8px; }
    .rv-dd__menu::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:8px; }
    .rv-dd__menu::-webkit-scrollbar-track{ background:transparent; }
    .rv-pill { display:inline-flex; align-items:center; gap:5px; padding:9px 13px; border-radius:11px;
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.8);
      font-size:13px; font-weight:600; font-family:var(--font-ui); cursor:pointer; }
    .rv-pill svg { color:var(--rv-star); }
    .rv-pill.active { background:var(--rv-grad); border-color:transparent; color:var(--rv-ink); box-shadow:0 6px 18px rgba(0,0,0,.35); }
    .rv-pill.active svg { color:var(--rv-ink); }
    .rv-sort { display:flex; align-items:center; gap:8px; margin-left:auto; }
    .rv-sort__btn { padding:9px 16px; border-radius:11px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
      color:rgba(255,255,255,.7); font-size:13px; font-weight:600; font-family:var(--font-ui); cursor:pointer; }
    .rv-sort__btn.active { background:var(--rv-grad); border-color:transparent; color:var(--rv-ink); box-shadow:0 6px 18px rgba(0,0,0,.35); }
    .rv-count { font-size:13px; color:rgba(255,255,255,.4); margin-bottom:16px; }
    .rv-count b { color:#fff; font-weight:700; }

    .rv-grid { columns:3; column-gap:18px; }
    @media (max-width:900px){ .rv-grid{columns:2;} .rv-divider{display:none;} }
    @media (max-width:580px){ .rv-grid{columns:1;} .rv-sort{margin-left:0;} }
    .rv-card { break-inside:avoid; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07);
      border-radius:16px; padding:18px; margin-bottom:18px; transition:border-color .2s ease, background .2s ease; }
    .rv-card:hover { background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.14); }
    .rv-card__top { display:flex; align-items:flex-start; gap:11px; margin-bottom:11px; }
    .rv-card__avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
      font-size:15px; font-weight:700; color:#fff; }
    .rv-card__id { flex:1; min-width:0; }
    .rv-card__name { font-size:14px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .rv-card__date { font-size:12px; color:rgba(255,255,255,.36); margin-top:1px; }
    .rv-verified { display:inline-flex; align-items:center; gap:4px; flex-shrink:0; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; }
    .rv-card__stars { display:flex; gap:2px; margin-bottom:9px; }
    .rv-card__stars svg { color:var(--rv-star); }
    .rv-card__text { font-size:13.5px; color:rgba(255,255,255,.62); line-height:1.6; margin:0 0 14px; word-wrap:break-word; }
    .rv-card__footer { display:flex; align-items:center; justify-content:space-between; gap:10px;
      background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:9px 12px; }
    .rv-card__product { display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.8); font-weight:500; min-width:0; }
    .rv-card__product svg { color:rgba(255,255,255,.45); flex-shrink:0; }
    .rv-card__product span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .rv-card__view { font-size:12px; color:rgba(255,255,255,.4); white-space:nowrap; text-decoration:none; transition:color .2s ease; flex-shrink:0; }
    .rv-card__view:hover { color:#fff; }
    .rv-empty { text-align:center; color:rgba(255,255,255,.4); padding:60px 0; font-size:14px; }


/* ═══════════════════════════════════════════════════════════════════════════
   THEME ADDITIONS
   Pages the original site did not have as static files — cart, FAQ, legal,
   blog, status, customer area — plus the few primitives the SellAuth
   templates introduce (category pills, variant add-ons, star rows).

   Everything below reuses the existing visual language: #09090b surfaces,
   rgba(255,255,255,…) hairlines, 6–16px radii, 200ms ease transitions.
   The design tokens emitted by layouts/master.njk (--cl-accent, --cl-bg,
   --radius, --container…) are applied here so theme settings actually move
   the design instead of sitting unused.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Settings bridge ──
   The stylesheet above is written against the original fixed palette. These
   rules re-point the load-bearing surfaces at the merchant's settings, so a
   colour or font change in the visual editor propagates without rewriting
   every rule. */
body {
  background: rgb(var(--cl-bg, 9 9 11));
  color: rgb(var(--cl-fg, 250 250 250));
}
.btn-primary,
.pdv3-btn-cart {
  background: rgb(var(--cl-accent, 255 255 255));
  color: rgb(var(--cl-bg, 9 9 11));
}
.btn-primary:hover { background: rgba(var(--cl-accent, 255 255 255), .88); }
.nav { background: rgba(var(--cl-bg, 9 9 11), .8); }

/* ── Announcement bar ── */
.sa-announce {
  position: relative; z-index: 210;
  display: flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 7px 16px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.72);
  text-align: center;
}
.sa-announce a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* The navbar is fixed, so the bar has to push the page down itself. */
.sa-announce ~ .sa-header .nav { top: 34px; }
body:has(.sa-announce) { padding-top: 34px; }

.nav__logo-img { height: 26px; width: auto; object-fit: contain; }

/* ── Mobile drawer footer ── */
.drawer__foot {
  margin-top: auto; padding-top: 32px;
  display: flex; flex-direction: column; gap: 8px;
}
.drawer__cta { width: 100%; border-radius: 6px; }

/* ── Catalog header and category pills ── */
.shop-head { margin-bottom: 22px; }
.shop-head__title { font-size: 26px; font-weight: 800; letter-spacing: -.6px; }
.shop-head__sub { margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.5); }

.shop-cats {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.shop-cat-pill {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.6);
  white-space: nowrap;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.shop-cat-pill:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); color: #fff; }
.shop-cat-pill.active { background: #fff; border-color: #fff; color: #000; }

/* ── Empty states ── */
.shop-empty, .page-empty, .acct-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 72px 24px; text-align: center;
  color: rgba(255,255,255,.45); font-size: 14px;
}
.shop-empty__title, .page-empty__title, .acct-empty__title {
  font-size: 17px; font-weight: 700; color: #fff;
}
.shop-empty__sub, .page-empty__sub, .acct-empty__sub { font-size: 13.5px; }
.shop-empty .btn-primary, .page-empty .btn-primary, .acct-empty .btn-primary { margin-top: 10px; }

.page-btn--gap { pointer-events: none; opacity: .4; }

/* ── Product page: add-ons and quantity deals ── */
.pdx-addons { display: grid; gap: 10px; }
.pdx-addon { display: block; cursor: pointer; }
.pdx-addon__cb { position: absolute; opacity: 0; width: 0; height: 0; }
.pdx-addon__body {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 15px; border-radius: 10px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
  transition: border-color 200ms ease, background 200ms ease;
}
.pdx-addon:hover .pdx-addon__body { border-color: rgba(255,255,255,.2); }
.pdx-addon__cb:checked + .pdx-addon__body {
  border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07);
}
.pdx-addon__cb:focus-visible + .pdx-addon__body { outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; }
.pdx-addon__name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.78); }
.pdx-addon__price { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }

.pdx-deals__list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pdx-deals__list li {
  padding: 5px 10px; border-radius: 7px;
  background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.22);
  font-size: 11.5px; color: rgba(255,255,255,.8);
}

/* ── Reviews page wrapper and star rows ── */
.rv-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px 80px; }
.rv-cell { display: flex; }
.rv-cell > .rv-card { width: 100%; }

.rv-stars { display: inline-flex; align-items: center; gap: 2px; color: rgba(255,255,255,.22); }
.rv-star--on { color: #ffd27a; }

.rv-dist__fill { background: #ffd27a; }

.rv-card__reply {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,.03); border-left: 2px solid rgba(255,255,255,.2);
}
.rv-card__reply-label {
  display: block; margin-bottom: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.rv-card__reply p { font-size: 13px; line-height: 20px; color: rgba(255,255,255,.62); }

/* ── Section header extras ── */
.section__sub { margin-top: 5px; font-size: 13.5px; color: rgba(255,255,255,.45); }
.section__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55);
  transition: color 200ms ease;
}
.section__link:hover { color: #fff; }

/* ── FAQ accordion ── */
.faq-list {
  display: grid; gap: 10px;
  max-width: 820px; margin: 0 auto;
}
.faq-item {
  border-radius: 12px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  transition: border-color 200ms ease;
}
.faq-item:hover { border-color: rgba(255,255,255,.16); }
.faq-item__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 600; color: #fff;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__chevron { flex-shrink: 0; color: rgba(255,255,255,.4); transition: transform 220ms ease; }
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__a {
  padding: 0 20px 18px;
  font-size: 14px; line-height: 22px; color: rgba(255,255,255,.55);
}

/* ── Long-form copy (legal pages, blog posts, rich text) ── */
.prose { max-width: 780px; margin: 0 auto; font-size: 15px; line-height: 25px; color: rgba(255,255,255,.66); }
.prose h1, .prose h2, .prose h3 { color: #fff; font-weight: 700; line-height: 1.3; margin: 32px 0 12px; }
.prose h1 { font-size: 26px; }
.prose h2 { font-size: 20px; }
.prose h3 { font-size: 16px; }
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 16px 20px; }
.prose li { margin-bottom: 7px; }
.prose a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: 12px; margin: 20px 0; }
.prose hr { border: 0; border-top: 1px solid rgba(255,255,255,.08); margin: 28px 0; }
.prose code {
  padding: 2px 6px; border-radius: 5px;
  background: rgba(255,255,255,.07); font-size: 13px;
}
.sa-rich-text--center .prose { text-align: center; }

/* ── Generic secondary page shell ── */
.page { max-width: 1180px; margin: 0 auto; padding: 96px 28px 80px; }
.page--narrow { max-width: 860px; }
.page-head { margin-bottom: 34px; }
.page-head__title { font-size: 30px; font-weight: 800; letter-spacing: -.8px; }
.page-head__sub { margin-top: 8px; font-size: 14.5px; color: rgba(255,255,255,.5); }

.centered-page {
  min-height: 72vh; padding: 120px 24px 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center;
}
.centered-page__badge {
  display: flex; align-items: center; justify-content: center;
  width: 78px; height: 78px; border-radius: 50%;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.55);
}
.centered-page__code {
  font-family: var(--font-display);
  font-size: clamp(72px, 12vw, 132px); line-height: 1; color: rgba(255,255,255,.14);
}
.centered-page__title { font-size: 26px; font-weight: 800; letter-spacing: -.6px; }
.centered-page__sub { max-width: 460px; font-size: 14.5px; line-height: 23px; color: rgba(255,255,255,.5); }
.centered-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }

/* ── Status page ── */
.status-list { display: grid; gap: 8px; }
.status-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 18px; border-radius: 10px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
  transition: border-color 200ms ease, background 200ms ease;
}
.status-row:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); }
.status-row__name { font-size: 14px; font-weight: 600; color: #fff; }
.status-row__state {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: #34d399; white-space: nowrap;
}
.status-row__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-row__state--out { color: #ef4444; }

/* ── Blog ── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blog-card {
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.blog-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.18); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.blog-card__thumb { aspect-ratio: 16/9; overflow: hidden; }
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { display: flex; flex-direction: column; gap: 7px; padding: 18px; }
.blog-card__date { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.blog-card__title { font-size: 15.5px; font-weight: 700; color: #fff; line-height: 22px; }
.blog-card__text { font-size: 13.5px; line-height: 20px; color: rgba(255,255,255,.5); }

.post__head { margin-bottom: 24px; }
.post__date { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.post__title { margin-top: 10px; font-size: 32px; font-weight: 800; letter-spacing: -.9px; line-height: 1.2; }
.post__cover { width: 100%; border-radius: 14px; margin-bottom: 28px; }

/* ── Cart page ── */
.cart-page { max-width: 1180px; margin: 0 auto; padding: 96px 28px 80px; }
.cart-page__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 26px; }
.cart-page__title { font-size: 30px; font-weight: 800; letter-spacing: -.8px; }
.cart-page__count { font-size: 13.5px; color: rgba(255,255,255,.45); }
.cart-page__grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.cart-page__list { display: grid; gap: 10px; }
.cart-page__loading { padding: 40px; text-align: center; color: rgba(255,255,255,.4); font-size: 14px; }
.cart-page__item {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-radius: 12px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
}
.cart-page__item:hover { border-color: rgba(255,255,255,.16); }

.cart-summary {
  position: sticky; top: 96px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
}
.cart-summary__title { font-size: 15px; font-weight: 700; color: #fff; }
.cart-summary__line {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.72);
}
.cart-summary__note { font-size: 12px; line-height: 18px; color: rgba(255,255,255,.4); }
.cart-summary__continue { font-size: 13px; color: rgba(255,255,255,.45); text-align: center; transition: color 200ms ease; }
.cart-summary__continue:hover { color: #fff; }

/* ── Cart line extras shared by the panel and the page ── */
.cart-panel__item-variant { font-size: 11.5px; color: rgba(255,255,255,.4); margin-top: 2px; }
.cart-panel__remove {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px;
  font-size: 17px; line-height: 1; color: rgba(255,255,255,.35);
  transition: background 200ms ease, color 200ms ease;
}
.cart-panel__remove:hover { background: rgba(239,68,68,.14); color: #ff7070; }
.cart-panel__viewcart {
  display: block; margin-top: 10px; text-align: center;
  font-size: 12.5px; color: rgba(255,255,255,.45);
  transition: color 200ms ease;
}
.cart-panel__viewcart:hover { color: #fff; }

/* ── Customer area ── */
.acct {
  display: grid; grid-template-columns: 232px 1fr; gap: 26px;
  max-width: 1180px; margin: 0 auto; padding: 96px 28px 80px;
  align-items: start;
}
.acct-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.acct-nav__me { display: flex; align-items: center; gap: 11px; }
.acct-nav__avatar {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.08);
  font-size: 13px; font-weight: 700; color: #fff;
}
.acct-nav__id { min-width: 0; }
.acct-nav__name { font-size: 13.5px; font-weight: 700; color: #fff; }
.acct-nav__mail { font-size: 11.5px; color: rgba(255,255,255,.4); overflow: hidden; text-overflow: ellipsis; }
.acct-nav__links { display: flex; flex-direction: column; gap: 2px; }
.acct-nav__link {
  padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.55);
  transition: background 200ms ease, color 200ms ease;
}
.acct-nav__link:hover { background: rgba(255,255,255,.06); color: #fff; }
.acct-nav__link.active { background: rgba(255,255,255,.1); color: #fff; font-weight: 600; }

.acct-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.acct-back { display: inline-block; margin-bottom: 10px; font-size: 12.5px; color: rgba(255,255,255,.45); }
.acct-back:hover { color: #fff; }
.acct-head__title { font-size: 26px; font-weight: 800; letter-spacing: -.7px; }
.acct-head__sub { margin-top: 6px; font-size: 13.5px; color: rgba(255,255,255,.45); }
.acct-head__meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

.acct-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 22px; border-radius: 14px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
}
.acct-card--hero { align-items: flex-start; gap: 12px; }
.acct-card__title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.acct-card__sub { font-size: 12.5px; color: rgba(255,255,255,.45); }
.acct-card__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.acct-cards { display: grid; gap: 14px; }

.acct-order { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.acct-order__id { font-size: 15px; font-weight: 700; color: #fff; }
.acct-order__date { margin-top: 3px; font-size: 12px; color: rgba(255,255,255,.4); }
.acct-order__right { display: flex; align-items: center; gap: 12px; }
.acct-order__total { font-size: 15px; font-weight: 700; color: #fff; }

.acct-badge {
  display: inline-flex; align-items: center;
  padding: 4px 9px; border-radius: 6px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: rgba(255,255,255,.75); white-space: nowrap;
}
.acct-badge--completed, .acct-badge--paid, .acct-badge--active, .acct-badge--closed {
  background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.28); color: #34d399;
}
.acct-badge--pending, .acct-badge--processing, .acct-badge--open {
  background: rgba(255,160,30,.1); border-color: rgba(255,160,30,.28); color: #ffb347;
}
.acct-badge--cancelled, .acct-badge--failed, .acct-badge--expired, .acct-badge--refunded {
  background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.28); color: #ff7070;
}

.acct-checks, .acct-facts { list-style: none; display: grid; gap: 1px; }
.acct-check, .acct-facts li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13.5px; color: rgba(255,255,255,.55);
}
.acct-check:last-child, .acct-facts li:last-child { border-bottom: 0; }
.acct-check b, .acct-facts b { color: rgba(255,255,255,.75); font-weight: 600; }
.acct-check--on b { color: #34d399; }
.acct-check--warn b { color: #ffb347; }

.acct-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.acct-quick__tile {
  padding: 20px; border-radius: 12px; text-align: center;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.7);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.acct-quick__tile:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #fff; }

.acct-table { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); }
.acct-table__head, .acct-table__row {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr .8fr;
  align-items: center; gap: 14px; padding: 13px 18px;
}
.acct-table__head {
  background: rgba(255,255,255,.03);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
}
.acct-table__row {
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 13.5px; color: rgba(255,255,255,.55);
  transition: background 200ms ease;
}
a.acct-table__row:hover { background: rgba(255,255,255,.04); }
.acct-table__id { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.acct-table__total { font-weight: 700; color: #fff; }

.acct-thread { display: flex; flex-direction: column; gap: 12px; }
.acct-msg {
  padding: 15px 18px; border-radius: 12px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
}
.acct-msg--staff { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12); }
.acct-msg__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 8px; font-size: 11.5px; color: rgba(255,255,255,.38);
}
.acct-msg__meta b { color: #fff; font-weight: 700; }
.acct-msg__body { font-size: 14px; line-height: 22px; color: rgba(255,255,255,.66); white-space: pre-wrap; }

.acct-balance { font-size: 34px; font-weight: 800; letter-spacing: -1px; color: #fff; }

.acct-copy { display: flex; gap: 8px; width: 100%; }
.acct-copy__input {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  font-family: inherit; font-size: 13px; color: rgba(255,255,255,.75);
}
.acct-copy__btn { flex-shrink: 0; }
.acct-note { font-size: 12px; color: rgba(255,255,255,.4); }

.acct-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.acct-stat {
  padding: 20px; border-radius: 12px; text-align: center;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
}
.acct-stat__value { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: #fff; }
.acct-stat__label { margin-top: 5px; font-size: 12px; color: rgba(255,255,255,.42); }

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .cart-page__grid { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .acct { grid-template-columns: 1fr; }
  .acct-nav { position: static; }
  .acct-nav__links { flex-direction: row; flex-wrap: wrap; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .page, .cart-page, .acct, .rv-wrap { padding-left: 20px; padding-right: 20px; }
  .acct-quick, .acct-stats { grid-template-columns: 1fr; }
  /* Tables collapse to stacked cards: four columns never fit a phone. */
  .acct-table__head { display: none; }
  .acct-table__row {
    grid-template-columns: 1fr auto;
    row-gap: 6px; padding: 15px 16px;
  }
  .acct-table__id { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .page, .cart-page, .acct, .rv-wrap { padding: 84px 14px 56px; }
  .page-head__title, .cart-page__title, .acct-head__title { font-size: 24px; }
  .blog-grid { grid-template-columns: 1fr; }
  .shop-cats { gap: 6px; }
  .shop-cat-pill { height: 30px; padding: 0 12px; font-size: 12px; }
  .faq-item__q { padding: 15px 16px; font-size: 14px; }
  .faq-item__a { padding: 0 16px 16px; }
  .status-row { padding: 13px 15px; }
  .cart-page__head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .acct-copy { flex-direction: column; }
  .acct-copy__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-cat-pill, .faq-item__chevron, .blog-card, .status-row,
  .acct-nav__link, .acct-quick__tile, .cart-panel__remove {
    transition: none;
  }
}


/* ── Language switcher ──
   The original storefront dropped its language picker from the bar; the theme
   brings it back as an optional setting, so it needs its own styling. Matches
   the cart/account buttons: no frame, muted until hover. */
.nav__lang {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 72px; padding: 0 10px;
  background: transparent; border: none;
  color: rgba(255,255,255,.60); cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  transition: color 200ms ease;
}
.nav__lang:hover { color: #fff; }

.lang-dropdown {
  position: absolute; top: 100%; right: 0; z-index: 210;
  min-width: 168px; padding: 6px;
  background: #0e0e11; border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px; box-shadow: 0 18px 44px rgba(0,0,0,.55);
  display: none; text-align: left;
}
.lang-dropdown.open { display: block; }
.lang-option {
  padding: 8px 10px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.62);
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease;
}
.lang-option:hover { background: rgba(255,255,255,.07); color: #fff; }
.lang-option.selected { background: rgba(255,255,255,.10); color: #fff; }

/* ── Narrow bars ──
   Below the hamburger breakpoint the bar only has room for icons: the language
   picker moves out of the way and the cart/account labels collapse. Both stay
   reachable — language from the dropdown once the bar has room, account and
   cart from the drawer. */
@media (max-width: 1023px) {
  .nav__lang { display: none; }
  .nav__cart-label, .nav__login-label { display: none; }
  .nav__cart, .nav__login { padding: 0 8px; gap: 5px; }
}


/* The review summary keeps a 236px distribution bar next to the score, which
   no longer fits once the page padding drops on phones — let the two stack. */
@media (max-width: 700px) {
  .rv-score { flex-wrap: wrap; gap: 16px; width: 100%; }
  .rv-score__num { width: 100%; text-align: left; }
  .rv-score__stars { justify-content: flex-start; }
  .rv-dist { min-width: 0; width: 100%; }
}



/* Group view — a group has no page of its own on SellAuth, so its card (grid,
   rail or "you may also like") opens this modal instead, built by script.js
   (bloc GROUP VIEW) from the hidden .pc-group-data list. Deliberately plain:
   a title, a close button, and a grid of image / name / stock / price tiles.
   The .gcard tiles carry every rule they need — nothing is inherited from
   .product-card or the .pc-* family. */
.pc-group { cursor: pointer; }
.pc-group-data { display: none !important; }

.gview {
  /* z-index 400 : au-dessus de .nav (200), le fond assombri couvre la page
     entiere. `display:flex` + `margin:auto` sur le panneau le centre quand il
     tient dans l'ecran et le laisse defiler depuis le haut quand il deborde. */
  position: fixed; inset: 0; z-index: 400;
  display: flex; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 40px 20px;
  background: rgba(3, 6, 12, .78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  /* A la fermeture `visibility` ne bascule qu'apres le fondu ; a l'ouverture
     (.open) il bascule tout de suite, sans quoi le bouton Fermer n'est pas
     encore focalisable quand script.js lui donne le focus. */
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.gview.open { opacity: 1; visibility: visible; transition: opacity 220ms ease; }
.gview__panel {
  width: 100%; max-width: 1200px; margin: auto; padding: 24px;
  background: #0b1220; border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
}
.gview__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 20px;
}
.gview__title {
  min-width: 0; margin: 0;
  font-size: 20px; font-weight: 700; line-height: 1.3; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gview__close {
  flex-shrink: 0; width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  color: rgba(255,255,255,.55);
  transition: color 160ms ease, background 160ms ease;
}
.gview__close:hover { color: #fff; background: rgba(255,255,255,.08); }
.gview__close svg { width: 20px; height: 20px; }
.gview__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.gcard {
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  color: #fff; text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.gcard:hover { border-color: rgba(59,130,246,.5); background: rgba(255,255,255,.05); }
.gcard__media {
  aspect-ratio: 16 / 9; margin: 8px 8px 0; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #16233d 0%, #101728 46%, #0b0f18 100%);
}
.gcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gcard__ph { padding: 0 12px; font-size: 15px; font-weight: 700; text-align: center; color: rgba(255,255,255,.25); }
.gcard__body { margin-top: 8px; padding: 14px 16px 16px; border-top: 1px solid rgba(255,255,255,.07); }
.gcard__name {
  font-size: 16px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gcard__stock { margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.55); }
.gcard--out .gcard__stock { color: #f87171; }
.gcard__price { margin-top: 10px; font-size: 15px; font-weight: 600; color: #0084ff; }
.gcard__was { margin-left: 8px; font-size: 12px; font-weight: 400; color: rgba(255,255,255,.35); text-decoration: line-through; }

@media (max-width: 1100px) { .gview__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .gview__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 640px) {
  .gview { padding: 16px 10px; }
  .gview__panel { padding: 16px; }
  .gview__title { font-size: 18px; }
  .gcard__body { padding: 12px 12px 14px; }
  .gcard__name { font-size: 14px; }
}
@media (max-width: 340px) { .gview__grid { grid-template-columns: 1fr; } }

/* A review card whose product is known links to it; the whole strip is the hit area. */
a.rv-card__footer { transition: background 140ms ease, border-color 140ms ease; }
a.rv-card__footer:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
a.rv-card__footer:hover .rv-card__view { color: #fff; }


/* Sign-in dialog — the theme owns it, SellAuth has no hosted login page. */
.lgn {
  position: fixed; inset: 0; z-index: 420;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity 160ms ease;
}
.lgn.open { opacity: 1; }
.lgn__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.lgn__panel {
  position: relative; width: 100%; max-width: 380px;
  padding: 26px 24px 24px;
  background: rgb(var(--cl-surface, 14 14 17));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius, 12px);
  transform: translateY(10px); transition: transform 180ms cubic-bezier(.16,1,.3,1);
}
.lgn.open .lgn__panel { transform: none; }
.lgn__close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: 0; padding: 0 4px; cursor: pointer;
  color: rgba(255,255,255,.45); font-size: 22px; line-height: 1;
}
.lgn__close:hover { color: #fff; }
.lgn__title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.lgn__sub { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.5); margin: 0 0 18px; }
.lgn__sub b { color: rgba(255,255,255,.8); font-weight: 600; }
.lgn__form { display: flex; flex-direction: column; gap: 10px; }
.lgn__input {
  width: 100%; padding: 11px 13px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  color: #fff; font-family: inherit; font-size: 14px;
}
.lgn__input::placeholder { color: rgba(255,255,255,.3); }
.lgn__input:focus { outline: none; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.06); }
.lgn__input--code { letter-spacing: .5em; text-align: center; font-size: 18px; font-weight: 600; padding-left: .5em; }
.lgn__error { font-size: 12.5px; line-height: 1.5; color: #f87171; }
.lgn__submit { width: 100%; justify-content: center; }
.lgn__submit:disabled { opacity: .55; cursor: default; }
.lgn__back {
  display: block; margin: 14px auto 0;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: rgba(255,255,255,.45);
}
.lgn__back:hover { color: #fff; }
.lgn [hidden] { display: none !important; }