:root {
  --black: #0c0c0c;
  --off-black: #161513;
  --white: #ffffff;
  --cream: #f6f3ec;
  --gold: #D4AF37;
  --gold-light: #C5A059;
  --gray: #8a8578;
  --serif: 'Cormorant Garamond', 'Playfair Display', serif;
  /* Modern, clean, premium e-commerce sans — same role/hierarchy as before
     (body copy, buttons, nav, forms); the serif above still carries all
     headings/branding, unchanged. */
  --sans: 'Plus Jakarta Sans', 'Manrope', 'Inter', sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Keyboard-navigation focus ring — mouse/touch users never see this
   (:focus-visible), keyboard users always get a clear gold outline. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
[data-theme="sombre"] :focus-visible { outline-color: var(--gold-light); }

.skip-link {
  position: absolute; top: -50px; left: 12px; z-index: 2000;
  background: var(--black); color: var(--white);
  padding: 12px 22px; font-size: 13px; letter-spacing: 0.5px;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

body {
  font-family: var(--sans);
  color: var(--black);
  background: var(--white);
  font-weight: 500;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* A near-invisible grain layer so large flat surfaces (hero, cream sections)
   read as paper/fabric rather than a perfectly flat digital fill. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce), print { body::before { display: none; } }

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

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
em { font-style: italic; color: var(--gold); }

/* Buttons */
.btn {
  display: inline-block;
  padding: 15px 34px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid var(--black);
  border-radius: 3px;
  transition: all 0.3s ease;
  text-align: center;
}
.btn--gold {
  background: var(--gold); border-color: var(--gold); color: var(--black);
  position: relative; overflow: hidden; z-index: 0;
}
.btn--gold::before {
  content: ''; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg); transition: left 0.7s ease; z-index: 1; pointer-events: none;
}
.btn--gold:hover::before { left: 130%; }
.btn--gold:hover { background: var(--gold-light); border-color: var(--gold-light); }
.btn--small { padding: 9px 18px; font-size: 11px; letter-spacing: 1px; }
.btn--outline { background: transparent; border-color: var(--black); color: var(--black); }
.btn--outline:hover { background: var(--black); color: var(--white); }
.btn--outline.btn--light { border-color: var(--white); color: var(--white); }
.btn--outline.btn--light:hover { background: var(--white); color: var(--black); }
.btn--ghost { display: none; }
.btn--full { width: 100%; margin-top: 24px; }

/* Free shipping threshold banner — homepage only, right below the hero */
.free-shipping-strip {
  background: var(--black);
  padding: 20px 24px;
  text-align: center;
  border-top: 1px solid rgba(212, 175, 55, 0.4);
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
}
.free-shipping-strip__text {
  margin: 0;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
}
.free-shipping-strip__mark {
  color: var(--gold-light, var(--gold));
  font-size: 11px;
  margin: 0 12px;
  vertical-align: middle;
}
@media (max-width: 640px) {
  .free-shipping-strip__text { font-size: 12px; letter-spacing: 1.5px; }
  .free-shipping-strip__mark { margin: 0 8px; }
}

/* Admin-managed homepage video showcase */
.video-showcase { padding: 90px 0; text-align: center; }
.video-showcase .section__title { margin-bottom: 40px; }
.video-showcase__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}
.video-showcase__card {
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.video-showcase__video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 13;
  object-fit: cover;
  background: var(--black);
}
.video-showcase__caption {
  padding: 14px 18px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--black);
}
[data-theme="sombre"] .video-showcase__card { background: #1b1917; }
[data-theme="sombre"] .video-showcase__caption { color: #f3efe6; }
@media (max-width: 900px) {
  .video-showcase__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .video-showcase { padding: 60px 0; }
  .video-showcase__grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Topbar */
.topbar {
  background: var(--black);
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 1px;
  padding: 8px 0;
  text-transform: uppercase;
  overflow: hidden;
}
/* Seamless right-to-left marquee: two identical copies of the text+CTA in a
   row twice the container's width, sliding by exactly one copy's width
   (-50%) so the loop point is invisible. Very slow (premium, not attention-
   grabbing) and paused on hover so the CTA is always easy to click. This is
   NOT a carousel — one continuous strip, never paginated/swapped. */
.topbar__track {
  display: flex;
  width: max-content;
  animation: topbar-marquee 34s linear infinite;
}
.topbar__track:hover { animation-play-state: paused; }
.topbar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0 44px;
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar__cta {
  display: inline-flex;
  align-items: center;
  background: var(--gold);
  color: var(--black);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.topbar__cta:hover { background: var(--gold-light); transform: translateY(-1px); }
@keyframes topbar-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.logo {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 2px;
  font-weight: 600;
}
.logo span { color: var(--gold); margin: 0 4px; }

/* Header — two-row layout: [XXI | VEINTUNO HOUSE | search+cart] then centered nav */
.header__top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 14px;
}
.header__zone { display: flex; align-items: center; gap: 16px; }
.header__zone--right { justify-content: flex-end; }
.logo-mark {
  display: none;
}
.logo-word {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 2px;
  text-align: left;
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo-word__sub {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--gray);
  margin-top: 5px;
}
.header__bottom { padding-bottom: 14px; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 12px; }
.nav { display: flex; gap: 34px; justify-content: center; align-items: center; }
.nav a, .nav-dropdown__trigger, .nav-cta-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  position: relative;
  background: none; border: none; cursor: pointer; color: var(--black);
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px;
}
.nav a::after, .nav-dropdown__trigger::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.nav a:hover::after, .nav-dropdown__trigger:hover::after { width: 100%; }
.nav-cta-link { color: var(--gold); font-weight: 500; }

.icon-btn {
  position: relative;
  background: none; border: none; cursor: pointer;
  color: var(--black); width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.icon-btn svg { width: 20px; height: 20px; }

.nav-dropdown { position: relative; }
/* The panel itself is an invisible hover-bridge spanning from the trigger
   down to the visual card below (padding-top, not a positional gap) — this
   keeps `:hover` unbroken while the cursor travels from the trigger into the
   menu, instead of dropping through a dead zone and closing the menu. */
.nav-dropdown__panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 20px;
  opacity: 0; visibility: hidden; transition: opacity 0.2s ease;
  z-index: 50; pointer-events: none;
}
.nav-dropdown.is-open .nav-dropdown__panel,
.nav-dropdown:hover .nav-dropdown__panel {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.nav-dropdown__panel a {
  padding: 10px 22px; font-size: 12px; letter-spacing: 0.5px; text-transform: none;
  transition: background 0.15s;
}
.nav-dropdown__panel a:hover { background: var(--cream); color: var(--gold); }

.pack-only-notice {
  text-align: center; max-width: 520px; margin: 40px auto 60px;
  font-family: var(--serif); font-size: 17px; line-height: 1.8; color: var(--gray);
  padding: 34px 30px; border-top: 1px solid rgba(212,175,55,0.3); border-bottom: 1px solid rgba(212,175,55,0.3);
}
.pack-only-notice p:first-child { color: var(--black); margin-bottom: 6px; }
[data-theme="sombre"] .pack-only-notice p:first-child { color: #f3efe6; }
[data-theme="sombre"] .pack-only-notice { color: #b8b0a0; }

/* Collections mega-menu — rendered inside #collectionsDropdownPanel */
.nav-megamenu {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px; min-width: 480px; max-width: 720px;
  background: var(--white); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 20px 50px rgba(0,0,0,0.12);
  padding: 18px; transform: translateY(6px); transition: transform 0.25s ease;
}
.nav-dropdown.is-open .nav-megamenu,
.nav-dropdown:hover .nav-megamenu { transform: translateY(0); }
.nav-megamenu__item {
  display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 2px;
  transition: background 0.2s ease;
}
.nav-megamenu__item:hover { background: var(--cream); }
.nav-megamenu__img {
  width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center;
  background-color: var(--cream); border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.4s ease;
}
.nav-megamenu__item:hover .nav-megamenu__img { transform: scale(1.03); }
.nav-megamenu__name {
  font-family: var(--serif); font-size: 14px; letter-spacing: 0.4px; color: var(--black); text-transform: none;
}
.nav-megamenu__desc {
  display: block; font-size: 11px; letter-spacing: 0.2px; text-transform: none;
  color: var(--gray); margin-top: 3px; line-height: 1.5;
}

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; }
.nav-toggle span { width: 26px; height: 2px; background: var(--black); }

/* Search overlay */
.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12,12,12,0.6); backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}
.search-overlay__inner { padding-top: 90px; }
.search-overlay__bar {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); padding: 18px 22px; border-radius: 4px;
  color: var(--gray);
}
.search-overlay__bar svg { width: 20px; height: 20px; flex-shrink: 0; }
.search-overlay__bar input {
  flex: 1; border: none; font-family: var(--sans); font-size: 16px; color: var(--black);
}
.search-overlay__bar input:focus { outline: none; }
.search-overlay__bar button {
  background: none; border: none; font-size: 22px; cursor: pointer; color: var(--gray);
}
.search-overlay__results {
  background: var(--white); margin-top: 2px; max-height: 60vh; overflow-y: auto;
  box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}
.search-result {
  display: flex; align-items: center; gap: 14px; padding: 12px 22px;
  border-bottom: 1px solid rgba(0,0,0,0.06); transition: background 0.15s;
}
.search-result:hover { background: var(--cream); }
.search-result__thumb { width: 36px; height: 44px; flex-shrink: 0; }
.search-result__thumb svg, .search-result__thumb img { width: 100%; height: 100%; object-fit: contain; }
.search-result--collection { color: var(--gold); }

/* Hero */
.hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
}
.eyebrow {
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}

/* Section titles */
.section__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.section__eyebrow--light { color: var(--gold-light); }
.section__title {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  margin-bottom: 56px;
}

/* Packs */
.packs { padding: 110px 0; background: var(--cream); text-align: center; }
.packs .section__title { }
.packs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: left;
}
.pack-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  padding: 40px 34px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pack-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(24,18,8,0.10); }
.pack-card--featured { background: var(--black); color: var(--white); border-color: var(--black); }
.pack-card--featured ul li { color: #cfcac0; }
.pack-card__badge {
  position: absolute;
  top: -13px; left: 34px;
  background: var(--gold);
  color: var(--black);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 14px;
}
.pack-card h3 { font-family: var(--serif); font-size: 24px; margin-bottom: 6px; }
.pack-card__count { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); margin-bottom: 18px; }
.pack-card--featured .pack-card__count { color: var(--gold-light); }
.pack-card__price { font-family: var(--serif); font-size: 42px; font-weight: 600; margin-bottom: 20px; }
.pack-card__price span { font-size: 15px; font-weight: 400; }
.pack-card ul { border-top: 1px solid rgba(0,0,0,0.08); padding-top: 20px; }
.pack-card--featured ul { border-top-color: rgba(255,255,255,0.15); }
.pack-card ul li { font-size: 14px; padding: 6px 0; color: #555; }
.pack-card--featured .btn--gold { background: var(--gold); border-color: var(--gold); color: var(--black); }
.pack-card--featured .btn--gold:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--black); }
.pack-card--featured .btn--outline { border-color: rgba(255,255,255,0.4); color: var(--white); }
.pack-card--featured .btn--outline:hover { background: var(--white); color: var(--black); }
/* Pill-shaped CTA, matching the real site — a later sitewide button rule
   sets sharp corners on every .btn, so this needs the extra specificity. */
.pack-card .btn { border-radius: 999px; }

/* Collections */
.collections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 60vh;
}
.collection {
  display: flex;
  align-items: center;
  padding: 80px 60px;
  position: relative;
}
.collection--homme { background: var(--black); color: var(--white); }
.collection--femme { background: var(--cream); color: var(--black); }
.collection__content h2 { font-family: var(--serif); font-size: clamp(28px, 3vw, 38px); margin: 10px 0 18px; }
.collection__content p { max-width: 360px; margin-bottom: 30px; color: inherit; opacity: 0.75; }

/* Products */
.products { padding: 110px 0; }
.products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.product-card {
  background: var(--cream);
  padding: 30px 24px 34px;
  text-align: center;
  position: relative;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(24,18,8,0.11); border-color: rgba(212,175,55,0.25); }
.product-card__bottle { display: block; overflow: hidden; }
.product-card__bottle img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.5s ease; }
.product-card:hover .product-card__bottle img { transform: scale(1.06); }
.product-card__quickview {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,0.9); border: none; cursor: pointer;
  font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 6px 10px; opacity: 0; transition: opacity 0.25s ease;
}
.product-card:hover .product-card__quickview { opacity: 1; }
.product-card h3 a { transition: color 0.2s; }
.product-card h3 a:hover { color: var(--gold); }
.product-card__tag {
  position: absolute;
  top: 16px; left: 16px;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--black);
  color: var(--white);
  padding: 5px 10px;
}
.product-card__tag--gold { background: var(--gold); color: var(--black); }
.product-card__bottle { width: 90px; margin: 20px auto 22px; }
.product-card__bottle svg { width: 100%; height: auto; }
.product-card h3 { font-family: var(--serif); font-size: 21px; margin-bottom: 4px; }
.product-card__notes { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); margin-bottom: 12px; }
.product-card__price { font-weight: 500; font-size: 15px; }

/* Maison */
.maison { background: var(--black); color: var(--white); padding: 130px 0; text-align: center; }
.maison__inner { max-width: 760px; margin: 0 auto; }
.maison .section__eyebrow { }
.maison__text { font-size: 18px; color: #cfcac0; line-height: 1.9; }

/* Testimonials */
.testimonials { padding: 110px 0; background: var(--cream); text-align: center; }
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: left;
}
.testimonial {
  background: var(--white);
  padding: 34px 30px;
  border: 1px solid rgba(0,0,0,0.06);
}
.stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 16px; }
.testimonial p { font-size: 15px; color: #333; margin-bottom: 18px; }
.testimonial cite { font-style: normal; font-size: 13px; color: var(--gray); letter-spacing: 0.5px; }

/* Client Experience (dashboard-managed reviews with photo/video) */
.client-reviews { padding: 110px 0; background: var(--white); text-align: center; }
.client-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  text-align: left;
}
.client-review-card {
  background: var(--cream); padding: 30px 26px; border: 1px solid rgba(0,0,0,0.06); border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.client-review-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(24,18,8,0.10); }
.client-review-card__photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; }
.client-review-card__stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 14px; font-size: 14px; }
.client-review-card__text { font-size: 15px; color: #333; line-height: 1.7; margin-bottom: 16px; }
.client-review-card__video { display: inline-block; font-size: 12px; color: var(--gold); text-decoration: underline; margin-bottom: 12px; }
.client-review-card__name { font-size: 13px; color: var(--gray); letter-spacing: 0.4px; }
[data-theme="sombre"] .client-reviews { background: #111111; }
[data-theme="sombre"] .client-review-card { background: #1b1917; border-color: rgba(255,255,255,0.08); }
[data-theme="sombre"] .client-review-card__text { color: #cfc9ba; }

/* Footer */
.footer { background: var(--black); color: #cfcac0; padding-top: 80px; }
.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.logo--footer { color: var(--white); display: inline-block; margin-bottom: 12px; }
.footer__brand p { font-size: 13px; letter-spacing: 1px; color: var(--gold-light); text-transform: uppercase; }
.footer__col h4 {
  font-family: var(--serif);
  color: var(--white);
  font-size: 15px;
  margin-bottom: 18px;
  font-weight: 500;
}
.footer__col a { display: block; font-size: 14px; padding: 6px 0; color: #b3ac9e; transition: color 0.2s; }
.footer__col a:hover { color: var(--gold); }
.footer__col a.footer__social-link { display: flex; align-items: center; gap: 10px; }
.footer__social-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.footer__bottom { padding: 26px 32px; text-align: center; font-size: 12px; color: #6b6659; }

/* Responsive (nav/header rules live in the dedicated header responsive block further down) */
@media (max-width: 900px) {
  .packs__grid { grid-template-columns: 1fr; }
  .products__grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials__grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .products__grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
}

/* ===========================
   COMPOSER DE PACK (modal)
=========================== */
.pack-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}
.pack-modal.pack-modal--open { display: block; }

.pack-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 12, 0.72);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.25s ease;
}

.pack-modal__panel {
  position: relative;
  z-index: 1;
  margin: 4vh auto;
  width: 92%;
  max-width: 1080px;
  max-height: 92vh;
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  animation: riseIn 0.35s cubic-bezier(.2,.8,.2,1);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

.pack-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 34px 40px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.pack-modal__header .section__eyebrow { margin-bottom: 8px; }
.pack-modal__header h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
}
.pack-modal__close {
  background: none;
  border: 1px solid rgba(0,0,0,0.15);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--black);
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.pack-modal__close svg { width: 16px; height: 16px; }
.pack-modal__close:hover { background: var(--black); color: var(--white); border-color: var(--black); }

.pack-modal__progress { padding: 20px 40px; border-bottom: 1px solid rgba(0,0,0,0.07); }
.pack-modal__progress-text {
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 10px;
}
.pack-modal__progress-text span { color: var(--black); font-weight: 500; }
[data-theme="sombre"] .pack-modal__progress-text span { color: var(--gold); }
[data-theme="sombre"] .pack-modal__progress-bar { background: rgba(255,255,255,0.12); }
[data-theme="sombre"] .pack-modal__progress { border-bottom-color: rgba(255,255,255,0.08); }
.pack-modal__progress-bar {
  height: 3px;
  background: rgba(0,0,0,0.08);
  width: 100%;
  overflow: hidden;
}
.pack-modal__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gold);
  transition: width 0.35s ease;
}

.pack-modal__body {
  padding: 32px 40px;
  overflow-y: auto;
  flex: 1;
}

.pack-modal__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.fragrance-card {
  position: relative;
  background: var(--cream);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 26px 20px 28px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.fragrance-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(24,18,8,0.10); }
.fragrance-card .product-card__bottle { width: 80px; margin: 16px auto 18px; }
.fragrance-card h3 { font-family: var(--serif); font-size: 19px; margin-bottom: 4px; }
.fragrance-card .product-card__notes { margin-bottom: 0; }
.fragrance-card--stepper { cursor: default; }
.fragrance-card--stepper.is-selected { border-color: var(--gold); }
.fragrance-card__qty { justify-content: center; margin: 14px auto 0; width: fit-content; }
.fragrance-card__qty-value { width: 32px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 14px; border-left: 1px solid rgba(0,0,0,0.15); border-right: 1px solid rgba(0,0,0,0.15); }
.fragrance-card__qty .qty-minus:disabled, .fragrance-card__qty .qty-plus:disabled { opacity: 0.35; cursor: not-allowed; }

.fragrance-card__check {
  position: absolute;
  top: 14px; right: 14px;
  width: 26px; height: 26px;
  border: 1px solid rgba(0,0,0,0.2);
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: all 0.25s ease;
}
.fragrance-card__check svg { width: 14px; height: 14px; }

.fragrance-card.is-selected {
  border-color: var(--gold);
  background: var(--white);
  box-shadow: 0 14px 30px rgba(201,162,39,0.18);
}
.fragrance-card.is-selected .fragrance-card__check {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

.fragrance-card.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.fragrance-card.is-shaking { animation: shake 0.4s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
/* Brief positive-feedback pulse when Find Your Scent registers a match as a
   real pack choice, so it's obvious which card just got selected. */
.fragrance-card.is-just-added { animation: just-added-pulse 1.4s ease; }
@keyframes just-added-pulse {
  0% { box-shadow: 0 0 0 0 rgba(212,175,55,0.55); }
  30% { box-shadow: 0 0 0 8px rgba(212,175,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}

.pack-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 40px;
  border-top: 1px solid rgba(0,0,0,0.07);
  background: var(--white);
}
.pack-modal__recap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.pack-modal__recap-empty { font-size: 13px; color: var(--gray); font-style: italic; }
.pack-modal__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 7px 12px 7px 7px;
  font-size: 12px;
  letter-spacing: 0.3px;
}
/* Light backdrop of its own, always — so the dark-stroke placeholder bottle
   (meant for a light background) stays visible even when the chip itself
   goes dark in Sombre mode, same fix as the fragrance card media slot. */
.pack-modal__chip-thumb {
  width: 26px; height: 26px; border-radius: 5px; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #f3efe6;
}
.pack-modal__chip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pack-modal__chip-thumb svg { width: 100%; height: 100%; }
.pack-modal__chip button {
  background: none; border: none; cursor: pointer;
  color: var(--gray); font-size: 14px; line-height: 1;
  padding: 0;
}
.pack-modal__chip button:hover { color: var(--black); }

#packModalCta { flex-shrink: 0; white-space: nowrap; }
#packModalCta:disabled {
  background: transparent;
  border-color: rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.3);
  cursor: not-allowed;
}
#packModalCta:disabled:hover { background: transparent; }

/* Success state */
.pack-modal__success { text-align: center; padding: 40px 20px 10px; animation: fadeIn 0.35s ease; }
.pack-modal__success-icon {
  width: 64px; height: 64px;
  margin: 0 auto 24px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.pack-modal__success-icon svg { width: 28px; height: 28px; }
.pack-modal__success h3 { font-family: var(--serif); font-size: 26px; margin-bottom: 10px; }
.pack-modal__success p { color: var(--gray); max-width: 380px; margin: 0 auto 28px; }
.pack-modal__success-list {
  max-width: 340px;
  margin: 0 auto;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.pack-modal__success-list li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 14px;
  letter-spacing: 0.3px;
}

/* Responsive modal */
@media (max-width: 900px) {
  .pack-modal__grid { grid-template-columns: repeat(2, 1fr); }
  .pack-modal__header { padding: 26px 24px 18px; }
  .pack-modal__progress { padding: 16px 24px; }
  .pack-modal__body { padding: 24px; }
  .pack-modal__footer { padding: 18px 24px; }
}

@media (max-width: 640px) {
  .pack-modal__panel {
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
  }
  .pack-modal__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  #packModalCta { width: 100%; }
  .pack-modal__recap { justify-content: center; }
}

#packModalViewCart { margin-top: 8px; }

/* ===========================
   FIND YOUR SCENT — entry CTA + quiz modal
=========================== */
.find-scent-cta {
  text-align: center; max-width: 480px; margin: 0 auto 50px; padding: 36px 30px;
  border: 1px solid rgba(212,175,55,0.35); background: var(--cream);
}
.find-scent-cta__eyebrow { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.find-scent-cta h3 { font-family: var(--serif); font-size: 22px; line-height: 1.4; margin-bottom: 20px; }
[data-theme="sombre"] .find-scent-cta { background: #1b1917; border-color: rgba(212,175,55,0.25); }

.quiz-modal__panel { max-width: 640px; }
.quiz-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 28px; }
.quiz-progress__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.12); transition: background 0.3s ease; }
.quiz-progress__dot.is-active { background: var(--gold); }
.quiz-progress__dot.is-done { background: rgba(212,175,55,0.4); }
[data-theme="sombre"] .quiz-progress__dot { background: rgba(255,255,255,0.15); }

.quiz-question-count { text-align: center; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray); margin-bottom: 10px; }
.quiz-question-text { text-align: center; font-family: var(--serif); font-size: 26px; margin-bottom: 30px; }
.quiz-answers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.quiz-answer-card {
  padding: 22px 16px; border: 1px solid rgba(0,0,0,0.12); background: var(--white); cursor: pointer;
  font-family: var(--serif); font-size: 16px; text-align: center; transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.quiz-answer-card:hover { border-color: var(--gold); background: var(--cream); transform: translateY(-3px); }
[data-theme="sombre"] .quiz-answer-card { background: #1b1917; border-color: rgba(255,255,255,0.12); color: #f3efe6; }
[data-theme="sombre"] .quiz-answer-card:hover { border-color: var(--gold); background: #241f1a; }
.quiz-back-btn {
  display: block; margin: 26px auto 0; background: none; border: none; cursor: pointer;
  font-size: 12px; letter-spacing: 0.5px; color: var(--gray); text-decoration: underline;
}

.quiz-results { text-align: center; }
.quiz-results h3 { font-family: var(--serif); font-size: 24px; margin: 6px 0 26px; }
.quiz-results__list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; }
.quiz-result-card {
  display: flex; align-items: center; gap: 18px; text-align: left; padding: 16px;
  border: 1px solid rgba(0,0,0,0.08); border-radius: 6px; position: relative;
}
[data-theme="sombre"] .quiz-result-card { border-color: rgba(255,255,255,0.1); }
.quiz-result-card__rank {
  position: absolute; top: -10px; left: -10px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--black); color: var(--gold); font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.quiz-result-card__media { width: 72px; height: 90px; flex-shrink: 0; background: var(--cream); display: flex; align-items: center; justify-content: center; }
.quiz-result-card__media svg, .quiz-result-card__media img { max-width: 100%; max-height: 100%; }
.quiz-result-card__body h4 { font-family: var(--serif); font-size: 17px; margin-bottom: 4px; }
.quiz-result-card__notes { font-size: 12px; color: var(--gray); margin-bottom: 6px; }
.quiz-result-card__match { font-size: 13px; color: var(--gold); font-weight: 500; letter-spacing: 0.3px; margin-bottom: 4px; }
.quiz-result-card__why { font-size: 12px; color: var(--gray); line-height: 1.5; }
.quiz-result-card__actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.quiz-results__note { font-size: 13px; color: var(--gray); margin-bottom: 18px; font-style: italic; }

@media (max-width: 640px) {
  .quiz-question-text { font-size: 21px; }
  .quiz-answer-card { padding: 18px 12px; font-size: 14px; }
  .quiz-answers-grid { gap: 10px; }
  .quiz-result-card { flex-direction: column; align-items: flex-start; text-align: center; }
  .quiz-result-card__media { width: 100%; height: 140px; margin: 0 auto; }
  .quiz-result-card__body { width: 100%; text-align: center; }
  .quiz-result-card__actions { justify-content: center; }
  .quiz-result-card__actions .btn { flex: 1; min-width: 130px; }
}

/* ===========================
   HEADER — cart icon (base sizing/position comes from .icon-btn)
=========================== */
.cart-toggle { position: relative; }
.cart-toggle__badge {
  position: absolute;
  top: -9px; right: -10px;
  background: var(--gold);
  color: var(--black);
  font-size: 10px;
  font-weight: 600;
  width: 17px; height: 17px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* ===========================
   HERO SLIDER
=========================== */
.hero { padding: 0; }
.hero-slider {
  position: relative;
  width: 100%;
  min-height: 90vh;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease;
  color: var(--white);
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.hero-slide__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-slide__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(12,12,12,0.86) 0%, rgba(12,12,12,0.55) 55%, rgba(12,12,12,0.25) 100%);
}
.hero-slide__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  padding: 80px 32px;
}
.hero-slide__content { max-width: 1200px; margin: 0 auto; padding: 0 0; }
.hero-slide .eyebrow { }
.hero-slide h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 600;
  line-height: 1.05;
  max-width: 720px;
}
.hero-slide__subtitle {
  margin-top: 22px;
  font-size: 17px;
  color: #cfcac0;
  max-width: 460px;
}
.hero-slide__actions { margin-top: 40px; display: flex; gap: 18px; flex-wrap: wrap; }
.hero-slide .btn--outline { border-color: rgba(255,255,255,0.5); color: var(--white); }
.hero-slide .btn--outline:hover { background: var(--white); color: var(--black); }

.hero-slider__arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.35);
  color: var(--white);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
}
.hero-slider__arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }
.hero-slider__arrow svg { width: 18px; height: 18px; }
.hero-slider__arrow--prev { left: 24px; }
.hero-slider__arrow--next { right: 24px; }

.hero-slider__dots {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}
.hero-slider__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}
.hero-slider__dot.is-active { background: var(--gold); transform: scale(1.3); }

/* ===========================
   COLLECTIONS PAGE
=========================== */
.collections-page { padding: 130px 0 110px; background: var(--cream); }
.collections-page__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.collection-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1 / 1;
  padding: 34px;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  border-radius: 20px;
}
.collection-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  transition: transform 0.6s ease;
}
.collection-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,12,12,0) 30%, rgba(12,12,12,0.85) 100%);
}
.collection-tile:hover::before { transform: scale(1.06); }
.collection-tile--parfums::before { background: radial-gradient(circle at 30% 20%, #3a3324, #0c0c0c 70%); }
.collection-tile--gels::before { background: radial-gradient(circle at 30% 20%, #1c2e2b, #0c0c0c 70%); }
.collection-tile--supplements::before { background: radial-gradient(circle at 30% 20%, #2c2418, #0c0c0c 70%); }
.collection-tile--cosmetics::before { background: radial-gradient(circle at 30% 20%, #33281f, #0c0c0c 70%); }
/* An admin-uploaded collection photo always overrides the placeholder gradient. */
.collection-tile.has-image::before { background: var(--tile-image) center/cover no-repeat; }
.collection-tile__label {
  position: relative; z-index: 1;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
}
.collection-tile__sub {
  position: relative; z-index: 1;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: 6px;
}
/* Small round previews of a few products from this collection, floating in
   the tile's top-right corner as an overlapping stack — modern "shop by
   category" styling, purely decorative on top of the square main image. */
.collection-tile__pastilles {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 1;
  display: flex;
}
.collection-tile__pastille {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--white);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  margin-left: -14px;
  background: var(--cream);
}
.collection-tile__pastille:first-child { margin-left: 0; }
.collection-tile__pastille img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  .collection-tile__pastille { width: 34px; height: 34px; margin-left: -10px; }
}

/* ===========================
   COLLECTION DETAIL PAGE
=========================== */
.collection-detail { padding: 130px 0 110px; }
.collection-detail__back {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--gray);
  margin-bottom: 28px;
  transition: color 0.2s;
}
.collection-detail__back:hover { color: var(--gold); }
.product-card__cta {
  margin-top: 16px;
  width: 100%;
  padding: 11px 18px;
  font-size: 11px;
}

/* ===========================
   PANIER (drawer)
=========================== */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
}
.cart-drawer.cart-drawer--open { display: block; }
.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12,12,12,0.6);
  backdrop-filter: blur(3px);
  animation: fadeIn 0.25s ease;
}
.cart-drawer__panel {
  position: absolute;
  top: 0; right: 0;
  width: 440px;
  max-width: 100%;
  height: 100%;
  background: var(--white);
  box-shadow: -20px 0 60px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  animation: slideIn 0.35s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.cart-step { display: flex; flex-direction: column; height: 100%; }
.cart-step[hidden] { display: none; }

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 28px 30px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.cart-drawer__header h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  flex: 1;
}
.cart-drawer__back {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--black);
  padding: 0;
}

.cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: 10px 30px;
}
.cart-item {
  display: flex;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.cart-item__thumb {
  width: 56px; height: 56px;
  flex-shrink: 0;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  overflow: hidden;
}
.cart-item__thumb svg { width: 30px; height: auto; }
.cart-item__thumb img { width: 100%; height: 100%; object-fit: contain; }
/* A pack line with more than one distinct fragrance shows every photo as a
   collage tile filling the same 56×56 frame edge-to-edge — a real photo
   grid (2 side by side, 3 as one-large-plus-two-stacked, 4 as a 2×2 grid),
   never overlapping and never leaving empty margins on the sides. The grid
   template and each image's placement are set inline per-item in JS since
   they depend on how many distinct fragrances there are. */
.cart-item__thumb--multi {
  display: grid;
  gap: 2px;
  position: relative;
}
.cart-item__thumb--multi img {
  width: 100%; height: 100%;
  min-width: 0; min-height: 0;
  object-fit: cover;
  display: block;
}
/* The 5th fragrance (once 4 already fill the grid) rides in a small round
   badge centered over it, rather than being cut off or squeezed in. */
.cart-item__thumb-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}
.cart-item__thumb-center img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-theme="sombre"] .cart-item__thumb-center { border-color: #1b1917; }
.cart-item__info { flex: 1; }
.cart-item__info h4 { font-family: var(--serif); font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.cart-item__info p { font-size: 12px; color: var(--gray); line-height: 1.5; }
.cart-item__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.cart-item__price { font-size: 13px; font-weight: 500; }
.cart-item__remove {
  background: none; border: none; cursor: pointer;
  font-size: 12px; color: var(--gray); text-decoration: underline;
  padding: 0;
}
.cart-item__remove:hover { color: var(--black); }

.cart-drawer__empty { text-align: center; padding: 60px 20px; color: var(--gray); font-size: 14px; }

.cart-drawer__footer {
  padding: 24px 30px 30px;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 18px;
}
#cartCheckoutBtn:disabled {
  background: transparent;
  border-color: rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.3);
  cursor: not-allowed;
}
#cartCheckoutBtn:disabled:hover { background: transparent; }

/* Checkout form */
.checkout-form {
  flex: 1;
  overflow-y: auto;
  padding: 26px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.checkout-form label { display: flex; flex-direction: column; gap: 8px; }
.checkout-form label span {
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gray);
}
.checkout-form input {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  padding: 12px 2px;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  background: transparent;
  color: var(--black);
  transition: border-color 0.35s ease;
}
.checkout-form input:focus { outline: none; border-bottom-color: var(--gold); }
.checkout-form input::placeholder { color: rgba(0,0,0,0.3); }
.checkout-form__promo { display: flex; flex-direction: column; gap: 8px; }
.checkout-form__promo-label {
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gray);
}
.checkout-form__promo-label em { text-transform: none; font-style: normal; opacity: 0.7; }
.checkout-form__summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Success step inside drawer */
.cart-step #successOrderList { text-align: left; }
.cart-step .pack-modal__success { padding: 30px 30px 20px; overflow-y: auto; }

/* Responsive */
@media (max-width: 900px) {
  .collections-page__grid { grid-template-columns: 1fr; }
  .hero-slider__arrow { display: none; }
}

@media (max-width: 640px) {
  .cart-drawer__panel { width: 100%; }
  .cart-drawer__header { padding: 20px; }
  .cart-drawer__items { padding: 8px 20px; }
  .cart-drawer__footer { padding: 18px 20px 22px; }
  .checkout-form { padding: 20px 20px 24px; gap: 16px; }
  .checkout-form input { font-size: 16px; padding: 13px 2px; }
  .cart-item { gap: 12px; }
  .cart-item__thumb { width: 48px; height: 48px; }
  .receipt-review-invite { padding: 22px 18px; }
}

/* ===========================
   Cart promo code
=========================== */
.cart-drawer__promo { display: flex; gap: 10px; margin-bottom: 6px; }
.cart-drawer__promo input {
  flex: 1;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 11px 12px;
  border: 1px solid rgba(0,0,0,0.2);
  background: transparent;
}
.cart-drawer__promo input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.12); }
.cart-drawer__promo .btn { padding: 11px 18px; font-size: 11px; white-space: nowrap; }
.cart-drawer__promo-msg { font-size: 12px; margin-bottom: 14px; min-height: 14px; }
.cart-drawer__promo-msg--ok { color: #3a7a4a; }
.cart-drawer__promo-msg--error { color: #b23b3b; }
.cart-drawer__subtotal--line { font-family: var(--sans); font-size: 14px; font-weight: 400; margin-bottom: 8px; }

.checkout-form__error {
  background: #fbeaea;
  color: #a13333;
  font-size: 13px;
  padding: 12px 14px;
  border-left: 2px solid #a13333;
}

/* ===========================
   Collection detail — packs
=========================== */
.collection-detail__packs {
  margin-bottom: 70px;
}
.collection-detail__packs .packs__grid { margin-top: 0; }

/* ===========================
   Homepage section: PROMO_BANNER
=========================== */
.promo-banner {
  background: linear-gradient(135deg, #0c0c0c, #1a1712);
  color: var(--white);
  text-align: center;
  padding: 90px 32px;
}
.promo-banner h2 { font-family: var(--serif); font-size: clamp(28px,4vw,42px); margin-bottom: 14px; }
.promo-banner p { color: #cfcac0; max-width: 500px; margin: 0 auto 30px; }

/* ===========================
   Gender filter (Parfums collection)
=========================== */
.gender-filter:not([hidden]) { display: flex; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; }
.gender-filter__chip {
  padding: 9px 20px; border: 1px solid rgba(0,0,0,0.15); font-size: 12px;
  letter-spacing: 0.8px; text-transform: uppercase; cursor: pointer; transition: all 0.2s ease;
}
.gender-filter__chip:hover { border-color: var(--gold); }
.gender-filter__chip.is-active { background: var(--black); border-color: var(--black); color: var(--white); }

/* ===========================
   Product detail page + Quick View
=========================== */
.product-detail { padding: 130px 0 110px; }
.product-detail__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.product-detail__layout--compact { gap: 30px; align-items: center; }
.product-detail__visual { background: var(--cream); display: flex; align-items: center; justify-content: center; min-height: 420px; overflow: hidden; }
.product-detail__visual img { width: 100%; height: 100%; object-fit: contain; }
.product-detail__visual svg { width: 55%; height: auto; }
.product-detail__info h1 { font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); font-weight: 600; margin: 6px 0 14px; }
.product-detail__price { font-family: var(--serif); font-size: 26px; font-weight: 600; margin-bottom: 10px; }
.product-detail__availability { font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 20px; }
.product-detail__availability.is-available { color: #2f7a45; }
.product-detail__availability.is-unavailable { color: #a13333; }
[data-theme="sombre"] .product-detail__availability.is-available { color: #5fc27a; }
[data-theme="sombre"] .product-detail__availability.is-unavailable { color: #e08585; }
.product-detail__description { color: #444; margin-bottom: 24px; line-height: 1.8; }
.product-detail__notes { border-top: 1px solid rgba(0,0,0,0.08); padding-top: 20px; margin-bottom: 30px; }
.product-detail__notes p { font-size: 14px; color: #333; padding: 6px 0; }
.product-detail__notes strong { text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; color: var(--gold); display: block; margin-bottom: 2px; }
.product-detail__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.qty-selector { display: flex; align-items: center; border: 1px solid rgba(0,0,0,0.2); }
.qty-selector button { width: 40px; height: 48px; background: none; border: none; cursor: pointer; font-size: 16px; }
.qty-selector button:hover { background: var(--cream); }
.qty-selector input { width: 46px; height: 48px; border: none; border-left: 1px solid rgba(0,0,0,0.15); border-right: 1px solid rgba(0,0,0,0.15); text-align: center; font-family: inherit; font-size: 14px; }
.product-detail__actions .btn { flex: 1; min-width: 180px; }
.product-detail__pack-only { margin-top: 4px; }
.product-detail__pack-only p { font-family: var(--serif); font-size: 15px; color: var(--gray); margin-bottom: 12px; }
[data-theme="sombre"] .product-detail__pack-only p { color: #b8b0a0; }

/* ===========================
   Pack Chooser
=========================== */
.chooser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.chooser-card {
  background: var(--cream); border: 1px solid transparent; border-radius: 6px; padding: 30px 24px;
  text-align: center; cursor: pointer; font-family: inherit; transition: all 0.25s ease;
  display: flex; flex-direction: column; gap: 8px;
}
.chooser-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 16px 34px rgba(24,18,8,0.12); }
.chooser-card--gold { background: var(--black); color: var(--white); }
.chooser-card__title { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.chooser-card__sub { font-size: 12px; color: var(--gray); }
.chooser-card--gold .chooser-card__sub { color: #cfcac0; }
.chooser-card__price { font-size: 13px; font-weight: 500; color: var(--gold); margin-top: 6px; }

/* ===========================
   Order receipt
=========================== */
.receipt-page { padding: 140px 0 100px; }
.receipt-doc { background: var(--white); border: 1px solid rgba(0,0,0,0.1); padding: 40px; margin-bottom: 24px; }
.receipt-doc__header { text-align: center; margin-bottom: 24px; border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 20px; }
.receipt-doc__header .logo { font-family: var(--serif); font-size: 22px; letter-spacing: 0.06em; }
.receipt-doc__header .logo span { color: var(--gold); margin: 0 4px; }
.receipt-doc__header p { color: var(--gray); font-size: 12px; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.08em; }
.receipt-doc__meta { margin-bottom: 18px; font-size: 14px; line-height: 1.7; }
.receipt-doc__table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13px; }
.receipt-doc__table th, .receipt-doc__table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.receipt-doc__totals { max-width: 320px; margin-left: auto; font-size: 14px; }
.receipt-doc__totals p { display: flex; justify-content: space-between; padding: 4px 0; }
.receipt-doc__total { font-weight: 600; font-size: 17px; border-top: 1px solid rgba(0,0,0,0.15); margin-top: 8px; padding-top: 10px !important; }
.receipt-review-invite {
  margin-top: 28px; padding: 30px; text-align: center;
  background: var(--cream); border: 1px solid rgba(212,175,55,0.2);
}
.receipt-review-invite h3 { font-family: var(--serif); font-size: 21px; margin-bottom: 8px; }
.receipt-review-invite p { color: var(--gray); margin-bottom: 18px; }
[data-theme="sombre"] .receipt-review-invite { background: #1b1917; border-color: rgba(212,175,55,0.15); }
@media print {
  .header, .footer, #cartToggle, #searchToggle, #receiptPrintBtn, #receiptPngBtn, .receipt-review-invite, #mobileTabbar { display: none !important; }
  .receipt-page { padding: 0; }
  .receipt-doc { border: none; padding: 0; }
}

/* ===========================
   Compose Pack — premium intro animation
=========================== */
.compose-intro {
  position: fixed; inset: 0; z-index: 300; background: var(--black);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity 0.45s ease;
}
.compose-intro.is-fading { opacity: 0; }
.compose-intro__line {
  position: absolute; color: var(--white); text-align: center;
  opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease;
}
.compose-intro__line.is-visible { opacity: 1; transform: translateY(0); }
.compose-intro__line.is-leaving { opacity: 0; transform: translateY(-14px); }
.compose-intro__line--welcome { font-family: var(--serif); font-size: clamp(20px, 4vw, 34px); letter-spacing: 0.04em; }
.compose-intro__line--mark { font-family: var(--serif); font-size: clamp(48px, 10vw, 96px); letter-spacing: 0.12em; color: var(--gold); }

/* ===========================
   Compose Pack — dedicated pages
=========================== */
/* min-height guards against the fixed "Ajouter au panier" bar overlapping
   the "no results" message when a search/filter combo hides every card —
   the page would otherwise be short enough for the fixed bar to sit on
   top of the message instead of below it. */
.compose-page { padding: 130px 0 160px; min-height: 100vh; }
.compose-progress { margin: 30px 0 36px; max-width: 480px; }
/* min-height keeps the page comfortably taller than the viewport even when
   a search/filter combo hides every card, so the fixed "Ajouter au panier"
   bar always floats over trailing empty space instead of sitting on top of
   the "no results" message. */
.compose-fragrance-grid { margin-bottom: 140px; min-height: 320px; }
.compose-sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--white); border-top: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.06);
  padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.compose-sticky-bar .pack-modal__recap { flex: 1; }
.compose-sticky-bar #composePackCta,
.compose-sticky-bar #composeFreeCta { flex-shrink: 0; white-space: nowrap; }
.compose-success {
  max-width: 480px; margin: 40px auto 0; text-align: center;
  background: var(--cream); padding: 50px 34px;
}
.compose-success--page { margin-top: 60px; }
.compose-success__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.fragrance-card__details {
  display: block; width: 100%; margin: 10px 0 0; padding: 0;
  background: none; border: none; font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--gold-light);
  cursor: pointer; transition: color 0.25s ease;
}
.fragrance-card__details:hover { color: var(--gold); text-decoration: underline; }

/* ===========================
   Product detail — volume, disclaimer
=========================== */
.product-detail__meta-row { display: flex; align-items: baseline; gap: 14px; }
.product-detail__volume {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid rgba(0,0,0,0.2); padding: 4px 10px;
}
.product-detail__disclaimer {
  font-size: 12px; font-style: italic; color: var(--gray);
  border-top: 1px solid rgba(0,0,0,0.08); padding-top: 16px; margin-bottom: 24px;
}
[data-theme="sombre"] .product-detail__disclaimer { color: #a39c8c; border-top-color: rgba(255,255,255,0.1); }

/* ===========================
   Cart — order review step
=========================== */
.review-customer { font-size: 13px; line-height: 1.7; margin-bottom: 14px; color: #333; }
.review-customer p:first-child { font-weight: 600; color: var(--black); }

/* ===========================
   Product reviews
=========================== */
.product-reviews { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(0,0,0,0.08); grid-column: 1 / -1; }
.product-reviews__header h3 { font-family: var(--serif); font-size: 20px; margin-bottom: 6px; }
.product-reviews__header p { display: flex; align-items: center; gap: 10px; color: var(--gray); font-size: 13px; margin-bottom: 18px; }
.review-stars { color: var(--gold); letter-spacing: 1px; }
.review-item { padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.review-item .review-customer { margin: 6px 0; }
.product-reviews__submit { margin-top: 20px; }
.product-reviews__submit summary { cursor: pointer; font-size: 13px; color: var(--gold); text-decoration: underline; margin-bottom: 14px; }
.product-reviews__submit .review-form { max-width: 480px; }
.review-form__msg { font-size: 13px; margin: 10px 0; }
.review-form__msg--ok { color: #2f7a45; }
.review-form__msg--error { color: #a13333; }

/* ===========================
   Contact page
=========================== */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 20px; }
.contact-card {
  background: var(--cream); padding: 44px 34px; text-align: center; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
a.contact-card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(24,18,8,0.12); }
.contact-card__icon { width: 52px; height: 52px; color: var(--gold); }
.contact-card__icon svg { width: 100%; height: 100%; }
.contact-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.contact-card p { font-size: 14px; color: #444; max-width: 320px; }
.contact-card__cta { font-size: 13px; letter-spacing: 0.5px; color: var(--gold); font-weight: 500; }
.contact-card__qr-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px; margin: 4px 0; border: 1px solid rgba(212,175,55,0.35); background: var(--white);
}
.contact-card__qr-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.contact-card__qr { width: 220px; height: 220px; max-width: 60vw; object-fit: contain; padding: 6px; }
[data-theme="sombre"] .contact-card__qr-wrap { background: #1b1917; border-color: rgba(212,175,55,0.25); }

/* ===========================
   Loyalty page
=========================== */
.loyalty-layout { padding: 130px 0 110px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.loyalty-intro__text { font-size: 16px; color: #444; margin: 16px 0 24px; max-width: 420px; }
.loyalty-how p { font-size: 14px; color: #444; margin-bottom: 14px; line-height: 1.7; }
.loyalty-how strong { color: var(--black); }
.loyalty-card { background: var(--cream); padding: 40px; border-radius: 6px; }
.loyalty-form { }
.loyalty-form label { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.loyalty-form label span { font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gray); }
.loyalty-form input {
  font-family: var(--sans); font-size: 15px; padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.15); background: var(--white);
}
.loyalty-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.12); }
.loyalty-result { margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(0,0,0,0.1); }
.loyalty-result__points { font-family: var(--serif); font-size: 46px; font-weight: 600; color: var(--gold); }
.loyalty-result__points span { font-size: 16px; font-weight: 400; color: var(--black); }
.loyalty-result__next { font-size: 13px; color: var(--gray); margin-top: 6px; }
.loyalty-result__rewards, .loyalty-result__history { margin-top: 26px; }
.loyalty-result__rewards h4, .loyalty-result__history h4 {
  font-family: var(--serif); font-size: 15px; margin-bottom: 12px;
}
.loyalty-result__rewards ul, .loyalty-result__history ul { display: flex; flex-direction: column; gap: 8px; }
.loyalty-result__history li { display: flex; justify-content: space-between; font-size: 12px; color: #444; }
.loyalty-result__rewards li { font-size: 13px; }

/* ===========================
   Scroll reveal
=========================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ===========================
   Responsive — header, product detail
=========================== */
@media (max-width: 900px) {
  .header__top { grid-template-columns: auto 1fr auto; }
  .header__zone--right { gap: 8px; }
  .logo-word { font-size: 16px; letter-spacing: 2px; }
  .header__bottom { border-top: none; padding-top: 0; padding-bottom: 0; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); flex-direction: column; align-items: flex-start; gap: 0;
    border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 8px 0;
  }
  .nav.nav--open { display: flex; }
  .nav a, .nav-cta-link { padding: 14px 32px; border-bottom: 1px solid rgba(0,0,0,0.04); width: 100%; }
  .nav-dropdown { width: 100%; }
  .nav-dropdown__trigger { padding: 14px 32px; border-bottom: 1px solid rgba(0,0,0,0.04); width: 100%; justify-content: space-between; }
  .nav-dropdown__panel { position: static; left: auto; transform: none; opacity: 1; visibility: visible; padding-top: 0; display: none; }
  .nav-dropdown.is-open .nav-dropdown__panel { display: flex; }
  .nav a, .nav-dropdown__trigger, .nav-megamenu__item { touch-action: manipulation; }
  .nav-megamenu {
    grid-template-columns: 1fr; min-width: 0; max-width: none; width: 100%;
    box-shadow: none; border: none; transform: none; padding: 0;
  }
  .nav-megamenu__item { flex-direction: row; align-items: center; padding: 12px 32px; border-bottom: 1px solid rgba(0,0,0,0.04); }
  .nav-megamenu__img { width: 44px; height: 44px; aspect-ratio: auto; flex-shrink: 0; }
  .nav-megamenu__desc { display: none; }
  .nav-toggle { display: flex; }
  .product-detail__layout { grid-template-columns: 1fr; }
  .product-detail__visual { min-height: 320px; }
  .loyalty-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .product-detail__actions { flex-direction: column; align-items: stretch; }
  .product-detail__actions .btn { width: 100%; }
  .search-overlay__inner { padding-top: 60px; }
  .compose-sticky-bar { flex-direction: column; align-items: stretch; padding: 14px 18px; gap: 12px; }
  .compose-sticky-bar .pack-modal__recap { justify-content: center; }
  .compose-fragrance-grid { margin-bottom: 200px; }
  .loyalty-card { padding: 26px; }
  .contact-card { padding: 32px 22px; }
  .fragrance-card__qty-value { height: 48px; }
  .fragrance-card__qty .qty-minus, .fragrance-card__qty .qty-plus { min-width: 44px; min-height: 44px; }
  .fragrance-card__details { font-size: 13px; padding: 6px 0; }
  .compose-success--page { margin-top: 30px; padding: 40px 24px; }
  .compose-success__actions .btn { width: 100%; }
}

/* ===========================
   Storefront forms (admin-form/admin-field classes reused on the customer
   side — receipt lookup, review submission, redemption reward picker)
=========================== */
.admin-form { display: flex; flex-direction: column; gap: 16px; }
.admin-form__row { display: flex; gap: 16px; flex-wrap: wrap; }
.admin-form__row .admin-field { flex: 1; min-width: 180px; }
.admin-field { display: flex; flex-direction: column; gap: 6px; }
.admin-field label { font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gray); }
.admin-field input, .admin-field textarea, .admin-field select {
  font-family: var(--sans); font-size: 15px; padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.15); background: var(--white); color: var(--black);
}
.admin-field input:focus, .admin-field textarea:focus, .admin-field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.12); }
.admin-field-help { font-size: 13px; color: var(--gray); }

/* ===========================
   Phone validation
=========================== */
.phone-error-msg { color: #a13333; font-size: 12px; margin-top: 4px; }
input.is-invalid { border-color: #a13333 !important; }

/* ===========================
   Product card — fully clickable
=========================== */
.product-card { cursor: pointer; }
.product-card__cta, .product-card__quickview { cursor: pointer; }

/* ===========================
   Add to cart — confirmation toast
=========================== */
.atc-toast { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; }
.atc-toast[hidden] { display: none; }
.atc-toast__backdrop { position: absolute; inset: 0; background: rgba(12,12,12,0.45); animation: fadeIn 0.25s ease; }
.atc-toast__card {
  position: relative; background: var(--white); padding: 40px 36px 34px; max-width: 380px; width: calc(100% - 40px);
  text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,0.25);
  animation: atcPop 0.4s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes atcPop { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.atc-toast__icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--gold); color: var(--black);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.atc-toast__icon svg { width: 26px; height: 26px; }
.atc-toast__msg { font-family: var(--serif); font-size: 21px; margin-bottom: 26px; }
.atc-toast__actions { display: flex; flex-direction: column; gap: 12px; }

/* ===========================
   Order history (in checkout step)
=========================== */
.order-history-toggle { margin-top: 18px; padding: 0 30px 24px; }
.order-history-toggle summary {
  cursor: pointer; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--gold);
  padding: 10px 0; list-style: none;
}
.order-history-toggle summary::-webkit-details-marker { display: none; }
.order-history-toggle summary::before { content: '+ '; }
.order-history-toggle[open] summary::before { content: '− '; }
.order-history { padding-top: 10px; }
.order-history-item {
  border: 1px solid rgba(0,0,0,0.08); padding: 14px 16px; margin-bottom: 10px; font-size: 13px;
  transition: box-shadow 0.2s ease;
}
.order-history-item:hover { box-shadow: 0 8px 22px rgba(24,18,8,0.08); }
.order-history-item__head { display: flex; justify-content: space-between; font-weight: 500; margin-bottom: 6px; }
.order-history-item__meta { color: var(--gray); font-size: 12px; }

/* ===========================
   Theme switch (Clair / Sombre)
=========================== */
.theme-switch {
  display: flex; border: 1px solid rgba(0,0,0,0.15); border-radius: 999px; overflow: hidden;
  font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; margin-right: 6px;
}
.theme-switch__option {
  background: none; border: none; cursor: pointer; padding: 7px 12px; color: var(--gray);
  font-family: inherit; transition: background 0.2s ease, color 0.2s ease;
}
.theme-switch__option.is-active { background: var(--black); color: var(--gold); }

/* ===========================
   Flash Sale
=========================== */
.flash-badge {
  display: inline-flex; align-items: center; gap: 6px; background: var(--black); color: var(--gold);
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 12px;
  position: absolute; top: 16px; left: 16px; z-index: 2;
}
.product-card__price--flash { display: flex; align-items: baseline; gap: 10px; justify-content: center; }
.product-card__price--flash .price-original { text-decoration: line-through; color: var(--gray); font-size: 13px; font-weight: 400; }
.product-card__price--flash .price-sale { color: #a13333; font-weight: 600; }
.product-detail__price--flash { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.product-detail__price--flash .price-original { text-decoration: line-through; color: var(--gray); font-size: 16px; font-weight: 400; }
.product-detail__price--flash .price-sale { color: #a13333; }
.flash-countdown {
  display: inline-flex; gap: 8px; font-family: var(--serif); font-size: 15px; letter-spacing: 1px;
  background: var(--black); color: var(--white); padding: 8px 14px; margin-top: 8px;
}
.flash-countdown span { color: var(--gold); }

/* ===========================
   Reviews — premium redesign
=========================== */
.product-reviews__header { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.product-reviews__header h3 { font-family: var(--serif); font-size: 24px; margin: 0; }
.product-reviews__header p { display: flex; align-items: center; gap: 10px; color: var(--gray); font-size: 13px; margin: 0; }
.product-reviews__list { display: grid; gap: 16px; margin-bottom: 24px; }
.review-item {
  background: var(--cream); padding: 22px 24px; border-radius: 4px; border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.review-item:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(24,18,8,0.10); border-color: rgba(201,162,39,0.25); }
.review-item .review-stars { font-size: 15px; letter-spacing: 2px; }
.review-item .review-customer { display: flex; justify-content: space-between; font-size: 12px; color: var(--gray); margin: 8px 0 10px; }
.review-item .review-customer::before { content: none; }
.review-item p:last-child { font-size: 14px; line-height: 1.7; color: #333; }
.review-item--featured { border-color: var(--gold); background: linear-gradient(135deg, var(--cream), #fbf6e8); }
.review-item--featured::after { content: 'Avis mis en avant'; display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); margin-top: 10px; }

/* ===========================
   Loyalty — animated progress + celebration
=========================== */
.loyalty-progress { margin: 22px 0; }
.loyalty-progress__labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--gray); margin-bottom: 8px; }
.loyalty-progress__bar { height: 10px; background: rgba(0,0,0,0.08); border-radius: 999px; overflow: hidden; }
.loyalty-progress__fill {
  height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 999px;
  width: 0%; transition: width 1.1s cubic-bezier(.2,.8,.2,1);
}
.loyalty-points-gain {
  position: fixed; top: 30%; left: 50%; transform: translate(-50%, 0); z-index: 1400;
  font-family: var(--serif); font-size: 30px; color: var(--gold); background: var(--black);
  padding: 14px 28px; opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.loyalty-points-gain.is-visible { opacity: 1; transform: translate(-50%, -30px); }
.loyalty-celebration {
  text-align: center; background: var(--black); color: var(--white); padding: 46px 30px; margin: 20px 0;
  animation: celebrationIn 0.6s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes celebrationIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.loyalty-celebration__emoji { font-size: 40px; margin-bottom: 12px; }
.loyalty-celebration h3 { font-family: var(--serif); font-size: 26px; color: var(--gold); margin-bottom: 10px; }
.loyalty-celebration p { color: #e4dfd2; margin-bottom: 22px; }

/* ===========================
   Micro-interactions / general premium polish
=========================== */
.btn { transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.2s ease; }
.btn:active { transform: scale(0.97); }
a { transition: color 0.2s ease; }
.chooser-card, .pack-card, .contact-card, .loyalty-card, .bundle-card, .review-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ===========================
   THEME: SOMBRE (dark luxury) — overrides applied to the storefront only
=========================== */
[data-theme="sombre"] { color-scheme: dark; }
[data-theme="sombre"] body { background: #111111; color: #f3efe6; }
[data-theme="sombre"] .header { background: rgba(17,17,17,0.92); border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="sombre"] .nav a, [data-theme="sombre"] .nav-dropdown__trigger, [data-theme="sombre"] .icon-btn { color: #f3efe6; }
[data-theme="sombre"] .theme-switch { border-color: rgba(255,255,255,0.2); }
[data-theme="sombre"] .theme-switch__option { color: #b8b0a0; }
[data-theme="sombre"] .theme-switch__option.is-active { background: var(--gold); color: var(--black); }
[data-theme="sombre"] .nav-megamenu { background: #1b1917; border-color: rgba(255,255,255,0.08); }
[data-theme="sombre"] .nav-megamenu__item:hover { background: #241f1a; }
[data-theme="sombre"] .nav-megamenu__name { color: #f3efe6; }
[data-theme="sombre"] .nav-megamenu__desc { color: #b8b0a0; }
[data-theme="sombre"] .nav-megamenu__img { background-color: #241f1a; border-color: rgba(255,255,255,0.08); }
[data-theme="sombre"] .btn--outline { border-color: #f3efe6; color: #f3efe6; }
[data-theme="sombre"] .btn--outline:hover { background: #f3efe6; color: #111; }
[data-theme="sombre"] .product-card, [data-theme="sombre"] .review-item, [data-theme="sombre"] .chooser-card,
[data-theme="sombre"] .fragrance-card, [data-theme="sombre"] .loyalty-card, [data-theme="sombre"] .contact-card,
[data-theme="sombre"] .pack-card, [data-theme="sombre"] .bundle-card, [data-theme="sombre"] .quiz-result-card {
  background: #1b1917; color: #f3efe6;
}
/* A selected fragrance card must stay visually distinct from an unselected
   one once dark mode repaints all cards to the same near-black background —
   otherwise the customer can no longer see which perfumes they picked. */
[data-theme="sombre"] .fragrance-card.is-selected {
  background: #241f14; border-color: var(--gold);
  box-shadow: 0 14px 30px rgba(212,175,55,0.22);
}
[data-theme="sombre"] .quiz-result-card__notes, [data-theme="sombre"] .quiz-result-card__why { color: #b8b0a0; }
[data-theme="sombre"] .pack-card__count { color: #b8b0a0; }
[data-theme="sombre"] .pack-card ul { border-top-color: rgba(255,255,255,0.1); }
[data-theme="sombre"] .pack-card ul li { color: #cfcac0; }
[data-theme="sombre"] .pack-card--featured { background: var(--black); }
[data-theme="sombre"] .review-item--featured { background: linear-gradient(135deg, #1b1917, #241f16); }
[data-theme="sombre"] .collection-tile:not(.has-image) { filter: brightness(0.85); }
[data-theme="sombre"] .product-detail__info, [data-theme="sombre"] .compose-page, [data-theme="sombre"] .collections-page,
[data-theme="sombre"] .collection-detail, [data-theme="sombre"] .loyalty-page, [data-theme="sombre"] .contact-page,
[data-theme="sombre"] .receipt-page { color: #f3efe6; }
[data-theme="sombre"] .receipt-doc { background: #1b1917; border-color: rgba(255,255,255,0.1); }
[data-theme="sombre"] .cart-drawer__panel, [data-theme="sombre"] .pack-modal__panel, [data-theme="sombre"] .atc-toast__card,
[data-theme="sombre"] .search-overlay, [data-theme="sombre"] .admin-confirm { background: #1b1917; color: #f3efe6; }
[data-theme="sombre"] .cart-drawer__footer, [data-theme="sombre"] .cart-item { border-color: rgba(255,255,255,0.1); }
[data-theme="sombre"] .cart-item__thumb, [data-theme="sombre"] .compose-sticky-bar { background: #1b1917; }
[data-theme="sombre"] .compose-sticky-bar { border-color: rgba(255,255,255,0.1); }
[data-theme="sombre"] input, [data-theme="sombre"] textarea, [data-theme="sombre"] select {
  background: #211e1a; color: #f3efe6; border-color: rgba(255,255,255,0.15);
}
[data-theme="sombre"] input::placeholder, [data-theme="sombre"] textarea::placeholder { color: #766f60; }
[data-theme="sombre"] .gender-filter__chip { border-color: rgba(255,255,255,0.2); color: #f3efe6; }
[data-theme="sombre"] .gender-filter__chip.is-active { background: var(--gold); color: #111; }
[data-theme="sombre"] .search-overlay__bar, [data-theme="sombre"] .search-result { border-color: rgba(255,255,255,0.1); color: #f3efe6; }
[data-theme="sombre"] .promo-banner { background: #1b1917; }
[data-theme="sombre"] .order-history-item { border-color: rgba(255,255,255,0.1); }
[data-theme="sombre"] .loyalty-progress__bar { background: rgba(255,255,255,0.1); }
[data-theme="sombre"] .admin-field-help { color: #a39c8c; }
[data-theme="sombre"] .pack-modal__close { color: #f3efe6; border-color: rgba(255,255,255,0.15); }
[data-theme="sombre"] .pack-modal__close:hover { background: #f3efe6; color: #111; border-color: #f3efe6; }
[data-theme="sombre"] .cart-drawer__back { color: #f3efe6; }
[data-theme="sombre"] .review-customer { color: #cfc9ba; }
[data-theme="sombre"] .review-customer p:first-child { color: #f3efe6; }
[data-theme="sombre"] .loyalty-how strong { color: #f3efe6; }
[data-theme="sombre"] .loyalty-result__points span { color: #f3efe6; }
[data-theme="sombre"] .collections-page, [data-theme="sombre"] .packs, [data-theme="sombre"] .testimonials,
[data-theme="sombre"] .collection--femme { background: #111111; }
[data-theme="sombre"] .search-overlay__bar,
[data-theme="sombre"] .search-overlay__results { background: #1b1917; }
[data-theme="sombre"] .search-result:hover { background: #241f1a; }
[data-theme="sombre"] .search-overlay__bar input { color: #f3efe6; }
[data-theme="sombre"] .search-result { border-color: rgba(255,255,255,0.08); color: #f3efe6; }
[data-theme="sombre"] .nav-toggle span { background: #f3efe6; }
[data-theme="sombre"] .cart-item__thumb, [data-theme="sombre"] .compose-success, [data-theme="sombre"] .product-detail__visual {
  background: #1b1917;
}
[data-theme="sombre"] .product-detail__description, [data-theme="sombre"] .product-detail__notes p,
[data-theme="sombre"] .review-customer, [data-theme="sombre"] .review-item p:last-child,
[data-theme="sombre"] .contact-card p, [data-theme="sombre"] .loyalty-intro__text, [data-theme="sombre"] .loyalty-how p,
[data-theme="sombre"] .loyalty-result__history li, [data-theme="sombre"] .testimonial p, [data-theme="sombre"] .pack-card ul li {
  color: #cfc9ba;
}
@media (max-width: 900px) {
  [data-theme="sombre"] .nav {
    background: #1b1917; border-top-color: rgba(255,255,255,0.08); border-bottom-color: rgba(255,255,255,0.08);
  }
  [data-theme="sombre"] .nav a, [data-theme="sombre"] .nav-cta-link { border-bottom-color: rgba(255,255,255,0.06); color: #f3efe6; }
}

@media (max-width: 480px) {
  .theme-switch { font-size: 9px; margin-right: 0; }
  .theme-switch__option { padding: 6px 7px; }
  .header__zone--right { gap: 6px; }
  .logo-word { font-size: 14px; letter-spacing: 1px; }
}

/* ===========================
   MOBILE PREMIUM REDESIGN
   Visual/CSS only — pill buttons, refined header, bottom tab bar,
   denser 2-column product grid, larger product imagery on small screens.
   No markup outside the new tab bar, no business logic touched.
=========================== */

/* Buttons — large pill shape sitewide, slightly wider letter-spacing,
   consistent across storefront + quiz + checkout + composer. Admin uses
   its own .admin-btn class and is untouched. */
.btn {
  border-radius: 999px;
  letter-spacing: 1.8px;
  font-weight: 500;
}
.btn--small { border-radius: 999px; }
.btn--full { border-radius: 999px; }
.qty-selector { border-radius: 999px; overflow: hidden; }
.fragrance-card__qty { border-radius: 999px; overflow: hidden; }

/* Product price — bold, clear hierarchy over the product name */
.product-card__price { font-weight: 700; }
.product-card__price--flash .price-sale { font-weight: 700; }

/* Product card badges — compact, elegant pill instead of a hard rectangle */
.product-card__tag, .flash-badge {
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 500;
}

/* Product name — truncate neatly instead of breaking the card layout */
.products__grid .product-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Header — subtle bottom shadow so it reads as a distinct sticky surface */
.header { box-shadow: 0 1px 0 rgba(12,12,12,0.04), 0 8px 24px rgba(12,12,12,0.03); }
[data-theme="sombre"] .header { box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.25); }

/* ===========================
   Mobile bottom tab bar
=========================== */
.mobile-tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(12,12,12,0.07);
  box-shadow: 0 -6px 20px rgba(12,12,12,0.05);
  padding: 8px 4px calc(6px + env(safe-area-inset-bottom));
}
.mobile-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--gray);
  padding: 4px 2px;
  transition: color 0.2s ease, transform 0.15s ease;
}
.mobile-tabbar__item svg { width: 22px; height: 22px; flex-shrink: 0; }
.mobile-tabbar__item span { font-size: 10.5px; letter-spacing: 0.3px; }
.mobile-tabbar__item:active { transform: scale(0.92); }
.mobile-tabbar__item.is-active { color: var(--black); }
.mobile-tabbar__item.is-active svg { color: var(--gold); }
[data-theme="sombre"] .mobile-tabbar {
  background: rgba(17,17,17,0.98);
  border-top-color: rgba(255,255,255,0.08);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.3);
}
[data-theme="sombre"] .mobile-tabbar__item { color: #8a8578; }
[data-theme="sombre"] .mobile-tabbar__item.is-active { color: #f3efe6; }

@media (max-width: 900px) {
  .mobile-tabbar { display: flex; }
  /* Keep page content clear of the fixed bottom bar. */
  body { padding-bottom: 62px; }
  /* The pack composer already has its own persistent bottom action bar —
     lift it above the new tab bar instead of letting the two overlap. */
  .compose-sticky-bar { bottom: 62px; }
}

/* ===========================
   Product grid — editorial dark card (photo bleeds full-frame, status pill
   + volume pill over the image, footer with italic-accent name, price and
   a full-width pill CTA). Scoped to .products__grid so the pack composer's
   .fragrance-card — which reuses several of the same sub-element classes
   (__tag, __bottle, __notes) — is completely untouched.
   2 columns all the way down to small phones (360–430px).
=========================== */
.products__grid .product-card {
  background: var(--black);
  color: var(--white);
  text-align: left;
  padding: 0;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.products__grid .product-card[hidden] { display: none; }
.products__grid .product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(12,12,12,0.25);
  border-color: transparent;
}

.products__grid .product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* No real photo yet → keep today's warm backdrop so the black-stroke
     illustration stays legible. A real photo switches to full-bleed dark. */
  background: var(--cream);
}
.products__grid .product-card__media--photo { background: var(--black); }

.products__grid .product-card__bottle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.products__grid .product-card__bottle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.products__grid .product-card__bottle svg { width: 60%; height: auto; }
.products__grid .product-card:hover .product-card__bottle img { transform: scale(1.04); }

.products__grid .product-card__tag,
.products__grid .flash-badge {
  position: absolute;
  top: 14px; left: 14px; right: auto; bottom: auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  color: var(--black);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
}
.products__grid .product-card__tag::before,
.products__grid .flash-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.products__grid .product-card__tag--gold { background: var(--gold); color: var(--black); }
.products__grid .product-card__tag--gold::before { background: var(--black); }
.products__grid .flash-badge {
  background: var(--black);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.25);
}
.products__grid .flash-badge::before { background: var(--gold); }

.products__grid .product-card__volume {
  position: absolute;
  top: 54px; right: 14px;
  z-index: 2;
  background: rgba(12,12,12,0.55);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(3px);
}
.products__grid .product-card__media:not(.product-card__media--photo) .product-card__volume {
  background: var(--black);
  backdrop-filter: none;
}

.products__grid .product-card__quickview {
  top: auto; right: 14px; bottom: 14px; left: auto;
  border-radius: 999px;
  font-size: 9px;
  padding: 7px 12px;
}

.products__grid .product-card__footer {
  background: var(--black);
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.products__grid .product-card__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.products__grid .product-card h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  font-style: normal;
  color: var(--white);
  margin: 0;
  flex: 1;
  min-width: 0;
  min-height: 3.2em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.products__grid .product-card h3 em { font-style: italic; font-weight: 500; }
.products__grid .product-card h3 a { color: inherit; }
.products__grid .product-card:hover h3 a { color: var(--gold); }
.products__grid .product-card__notes {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #a39c8c;
  margin-bottom: 2px;
}
.products__grid .product-card__price {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  flex-shrink: 0;
}
.products__grid .product-card__price--flash { display: flex; align-items: baseline; gap: 8px; }
.products__grid .product-card__price--flash .price-original {
  color: #766f60;
  text-decoration: line-through;
  font-weight: 400;
  font-size: 12px;
}
.products__grid .product-card__price--flash .price-sale { color: var(--gold); font-weight: 700; }

.products__grid .product-card__cta {
  margin-top: auto;
  width: 100%;
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 13px 18px;
}
.products__grid .product-card__cta:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }

@media (max-width: 480px) {
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .products__grid .product-card { border-radius: 12px; }
  .products__grid .product-card__footer { padding: 14px 14px 16px; gap: 6px; }
  .products__grid .product-card h3 { font-size: 15px; }
  .products__grid .product-card__notes { font-size: 9px; }
  .products__grid .product-card__price { font-size: 13px; }
  .products__grid .product-card__tag, .products__grid .flash-badge, .products__grid .product-card__volume {
    top: 10px; font-size: 9px; padding: 5px 9px;
  }
  .products__grid .product-card__tag, .products__grid .flash-badge { left: 10px; }
  .products__grid .product-card__volume { right: 10px; top: 46px; }
  .products__grid .product-card__quickview { right: 10px; bottom: 10px; font-size: 8px; padding: 6px 9px; }
  .products__grid .product-card__cta { padding: 10px 14px; font-size: 10px; }
  .container { padding: 0 20px; }
}

/* ===========================
   Header — premium polish pass: breathing room, a soft gold-tinted
   divider instead of a flat gray line, gold hover on nav text, a proper
   pill treatment for the primary "Composer mon pack" CTA, and larger
   circular hit/hover targets on the icon buttons (also a real mobile
   touch-target improvement, not just decorative on desktop).
=========================== */
.header__top { padding-top: 20px; padding-bottom: 16px; }
.header__bottom {
  border-top: none;
  position: relative;
  padding-top: 14px;
  padding-bottom: 16px;
}
.header__bottom::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4) 50%, transparent);
}

.nav { gap: 38px; }
.nav a, .nav-dropdown__trigger { letter-spacing: 1.4px; transition: color 0.25s ease; }
.nav a:hover, .nav-dropdown__trigger:hover { color: var(--gold); }

.nav-cta-link { border-radius: 999px; padding: 9px 20px; }
.nav-cta-link::after { display: none; }
/* ".nav a" (class + type) outranks a bare ".nav-cta-link" (class only), so
   its border:none/color:black were silently winning over the intended
   gold pill — this link is an <a> inside .nav, so it always matched that
   broader rule too. Re-declared here with matching-or-higher specificity
   so the border and gold color actually apply. */
.nav a.nav-cta-link {
  border: 1px solid var(--gold);
  color: var(--gold);
  transition: background 0.25s ease, color 0.25s ease;
}
.nav a.nav-cta-link:hover { background: var(--gold); color: var(--black); }

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
}
.icon-btn:hover { background: rgba(212,175,55,0.12); color: var(--gold); }
.cart-toggle__badge { top: 2px; right: 2px; }

[data-theme="sombre"] .icon-btn:hover { background: rgba(212,175,55,0.18); color: var(--gold); }
[data-theme="sombre"] .nav-cta-link:hover { color: var(--black); }

@media (max-width: 900px) {
  .header__top { padding-top: 14px; padding-bottom: 12px; }
  .icon-btn { width: 34px; height: 34px; }
}

/* ===========================
   Pack tier cards — extend the same dark/gold editorial language used on
   the redesigned product cards to the "choose your pack" pricing cards
   (shown on every collection page, above the product grid, and on the
   homepage), so the whole page reads as one consistent design instead of
   a dark product grid sitting under a plain white pricing table.
=========================== */
.pack-card {
  background: var(--black);
  color: var(--white);
  border-color: rgba(255,255,255,0.1);
  border-radius: 16px;
}
.pack-card:hover { box-shadow: 0 22px 46px rgba(12,12,12,0.22); }
.pack-card__count { color: var(--gold-light); }
.pack-card ul { border-top-color: rgba(255,255,255,0.12); }
.pack-card ul li { color: #cfcac0; }
.pack-card.has-image .btn--outline { border-color: rgba(255,255,255,0.35); color: var(--white); }
.pack-card.has-image .btn--outline:hover { background: var(--white); color: var(--black); }

/* Now that every tier is dark, the featured/"most chosen" one is set
   apart with a gold ring instead of being the only dark card. */
.pack-card--featured {
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.25), 0 22px 50px rgba(212,175,55,0.14);
}

.pack-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
}
.pack-card__badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--black);
  flex-shrink: 0;
}

/* ===========================
   Pack composer — search + gender filter toolbar
=========================== */
.compose-toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
/* Same specificity as the bare "[hidden]" UA-stylesheet rule, but author
   styles always win ties over user-agent defaults regardless of source
   order — so setting .hidden = true in JS on either element did nothing
   visually until this override existed (the search bar and the whole
   toolbar kept showing as flex on the Parfums page even though the code
   correctly hid them). */
.compose-toolbar[hidden] { display: none; }
.compose-search[hidden] { display: none; }
.compose-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 220px;
  padding: 12px 16px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  background: var(--white);
  color: var(--gray);
  transition: border-color 0.2s ease;
}
.compose-search:focus-within { border-color: var(--gold); }
.compose-search svg { width: 18px; height: 18px; flex-shrink: 0; }
.compose-search input {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--black);
}
.compose-search input:focus { outline: none; }
.compose-search input::placeholder { color: rgba(0,0,0,0.35); }
.compose-toolbar .gender-filter { margin-bottom: 0; flex-wrap: wrap; }
.compose-empty-msg { margin: -10px 0 20px; }

/* Pack composer — discreet, optional "Find Your Scent" entry point, sitting
   right below the search/filter toolbar. Never opens on its own; purely an
   extra path the customer can ignore entirely and keep picking manually. */
.compose-find-scent-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 24px;
  padding: 14px 20px;
  border: 1px solid rgba(212,175,55,0.35);
  background: var(--cream);
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.compose-find-scent-banner:hover { border-color: var(--gold); }
.compose-find-scent-banner__icon { color: var(--gold); font-size: 15px; flex-shrink: 0; }
.compose-find-scent-banner__text { flex: 1; font-size: 13px; color: var(--gray); line-height: 1.5; }
.compose-find-scent-banner__text strong { color: var(--black); font-family: var(--serif); font-size: 15px; font-weight: 600; }
.compose-find-scent-banner__cta {
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--gold);
  white-space: nowrap;
}
[data-theme="sombre"] .compose-find-scent-banner { background: #1b1917; border-color: rgba(212,175,55,0.25); }
[data-theme="sombre"] .compose-find-scent-banner__text { color: #b8b0a0; }
[data-theme="sombre"] .compose-find-scent-banner__text strong { color: #f3efe6; }
@media (max-width: 640px) {
  .compose-find-scent-banner { flex-wrap: wrap; }
  .compose-find-scent-banner__cta { width: 100%; text-align: right; }
}

[data-theme="sombre"] .compose-search { background: #211e1a; border-color: rgba(255,255,255,0.15); }
[data-theme="sombre"] .compose-search input { color: #f3efe6; }
[data-theme="sombre"] .compose-search input::placeholder { color: #766f60; }
[data-theme="sombre"] .compose-search svg { color: #b8b0a0; }

@media (max-width: 640px) {
  .compose-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* ===========================
   Dark mode — fix invisible "selected products" recap chips
   .pack-modal__chip had a hardcoded light (cream) background with no
   text color of its own, so in dark mode it inherited the page's light
   text color meant for the dark background around it — cream text on a
   cream chip, effectively invisible. This is what a customer composing a
   pack sees listing what they've already picked, so it's the most visible
   possible instance of the "unreadable dark mode text" class of bug.
=========================== */
[data-theme="sombre"] .pack-modal__chip {
  background: #241f1a;
  border-color: rgba(255,255,255,0.14);
  color: #f3efe6;
}
[data-theme="sombre"] .pack-modal__chip button { color: #b8b0a0; }
[data-theme="sombre"] .pack-modal__chip button:hover { color: #f3efe6; }

/* The illustrated placeholder bottle (dark stroke line-art, meant for a
   light backdrop) becomes nearly invisible once the surrounding fragrance
   card turns dark — give the image slot its own light chip so it reads
   correctly regardless of the card's theme, matching the redesigned
   product-grid cards' same fallback treatment. */
/* ===========================
   Pack composer — dark editorial fragrance cards, matching the redesigned
   product grid (dark card, badge pill, italic-accent name, gold selected
   state). Scoped to .fragrance-card, which is only ever used here — no
   risk of leaking into the product grid or anywhere else. Selection,
   quantity and search/filter logic is untouched; this only restyles the
   existing sub-elements and wraps them in two new layout divs.
=========================== */
.fragrance-card {
  background: var(--black);
  color: var(--white);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
}
/* Same specificity as a bare "[hidden]" UA-stylesheet rule, but author
   styles always win ties over user-agent defaults — so the display:flex
   above was silently defeating card.hidden = true in the search/filter
   toolbar (the JS was setting the attribute correctly the whole time; the
   card just never actually disappeared). This re-asserts display:none for
   a hidden card with higher specificity than the bare class rule. */
.fragrance-card[hidden] { display: none; }
.fragrance-card:hover { box-shadow: 0 20px 44px rgba(12,12,12,0.22); }

.fragrance-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream);
}
.fragrance-card__media--photo { background: var(--black); }
.fragrance-card__media .product-card__bottle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fragrance-card__media .product-card__bottle img { width: 100%; height: 100%; object-fit: cover; }
.fragrance-card__media .product-card__bottle svg { width: 60%; height: auto; }
.fragrance-card:hover .product-card__bottle img { transform: scale(1.04); }

.fragrance-card .product-card__tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
}
.fragrance-card .product-card__tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.fragrance-card .product-card__tag--gold::before { background: var(--black); }

.fragrance-card__check {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  margin: 0;
}

.fragrance-card__footer {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.fragrance-card__footer h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  font-style: normal;
  color: var(--white);
  margin: 0;
}
.fragrance-card__footer h3 em { font-style: italic; font-weight: 500; }
.fragrance-card__footer .product-card__notes {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #a39c8c;
  margin: 0;
}
.fragrance-card__footer .product-card__price {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin-top: 4px;
}
.fragrance-card__details { color: var(--gold-light); margin-top: auto; padding-top: 8px; }
.fragrance-card__details:hover { color: var(--gold); }

.fragrance-card .qty-selector { border-color: rgba(255,255,255,0.25); margin-top: 10px; }
.fragrance-card .qty-selector button { color: var(--white); }
.fragrance-card .qty-selector button:hover { background: rgba(255,255,255,0.08); }
.fragrance-card .qty-selector button:disabled { color: rgba(255,255,255,0.3); }
.fragrance-card__qty-value { border-color: rgba(255,255,255,0.2); }

.fragrance-card.is-selected,
.fragrance-card--stepper.is-selected {
  background: var(--black);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.3), 0 20px 44px rgba(212,175,55,0.16);
}
.fragrance-card.is-disabled { opacity: 0.35; }

[data-theme="sombre"] .fragrance-card.is-selected,
[data-theme="sombre"] .fragrance-card--stepper.is-selected {
  background: var(--black);
}

/* ===========================
   Floating WhatsApp button — visible on desktop and mobile once a number is
   configured (see initWhatsappFloat). Positioned above the mobile bottom
   tab bar so the two never overlap.
=========================== */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 950;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--black);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(12,12,12,0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.whatsapp-float svg { width: 26px; height: 26px; }
.whatsapp-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 32px rgba(12,12,12,0.35); }
[data-theme="sombre"] .whatsapp-float { background: var(--gold); color: var(--black); }

@media (max-width: 900px) {
  .whatsapp-float { right: 16px; bottom: calc(62px + env(safe-area-inset-bottom) + 14px); width: 48px; height: 48px; }
  .whatsapp-float svg { width: 23px; height: 23px; }
}

/* ===========================
   Pack composer — fragrance picker, mobile: 2 per row instead of 1.
   Scoped to .compose-fragrance-grid only, not the plain .chooser-grid
   (pack-size/formula picker), which has different content and stays as-is.
=========================== */
@media (max-width: 640px) {
  .compose-fragrance-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .compose-fragrance-grid .fragrance-card { border-radius: 12px; }
  .compose-fragrance-grid .fragrance-card__footer { padding: 14px 14px 16px; gap: 5px; }
  .compose-fragrance-grid .fragrance-card__footer h3 { font-size: 15px; }
  .compose-fragrance-grid .product-card__notes { font-size: 9px; }
  .compose-fragrance-grid .product-card__price { font-size: 13px; }
  .compose-fragrance-grid .product-card__tag { top: 10px; left: 10px; font-size: 9px; padding: 5px 9px 5px 8px; }
  .compose-fragrance-grid .fragrance-card__check { top: 10px; right: 10px; }
  .compose-fragrance-grid .fragrance-card__details { font-size: 11px; }
  .compose-fragrance-grid .fragrance-card__qty { transform: scale(0.92); transform-origin: left center; }
}

/* ===========================
   FUNNEL — checkout & pack composer polish
   =========================== */
.checkout-form input {
  font-size: 16px;
  min-height: 48px;
  padding: 14px 2px;
}
.checkout-form__promo .cart-drawer__promo input,
.checkout-form__promo .cart-drawer__promo .btn {
  min-height: 48px;
}
.checkout-form__promo .cart-drawer__promo .btn { padding: 0 20px; }
.checkout-form__summary:last-of-type {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.12);
}
#checkoutReviewBtn {
  margin-top: 12px;
  padding: 20px 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  box-shadow: 0 12px 24px -14px rgba(212,175,55,0.9);
}
#checkoutReviewBtn:disabled { opacity: 0.6; cursor: wait; }
.order-history-toggle { margin: 0 30px 24px; font-size: 13px; color: var(--gray); }

.compose-sticky-bar {
  background: var(--white);
  box-shadow: 0 -10px 30px -18px rgba(0,0,0,0.35);
}
.compose-sticky-bar #composePackCta,
.compose-sticky-bar #composeFreeCta {
  min-height: 52px;
  padding: 0 28px;
  font-size: 13px;
  letter-spacing: 1.5px;
}
.compose-sticky-bar #composePackCta:disabled,
.compose-sticky-bar #composeFreeCta:disabled { opacity: 0.45; }
.checkout-form { gap: 14px; padding-top: 20px; }
.checkout-form__promo { margin-top: 4px; }
#checkoutReviewBtn { margin-top: 6px; }
.order-history-toggle { margin-top: 8px; }
.checkout-form label { gap: 6px; }
.checkout-form input { min-height: 44px; padding: 10px 2px; }
.checkout-form__summary { padding: 4px 0; }

.product-detail__delivery-note { font-size: 13px; color: var(--gray); margin: 4px 0 18px; line-height: 1.5; }
@media (max-width: 900px) {
  .compose-sticky-bar { padding-right: 78px; }
}

/* Homepage customer review image gallery */
.review-gallery { padding: 72px 0; }
.review-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.review-gallery__item {
  padding: 0; border: 1px solid rgba(0,0,0,0.08); background: var(--cream); cursor: zoom-in;
  aspect-ratio: 3 / 4; overflow: hidden; display: block;
}
.review-gallery__item img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.4s ease; }
.review-gallery__item:hover img { transform: scale(1.02); }
@media (max-width: 600px) {
  .review-gallery { padding: 48px 0; }
  .review-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Reusable lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,12,12,0.94); padding: 56px 64px;
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__close {
  position: absolute; top: 14px; right: 18px; background: none; border: none;
  color: #fff; font-size: 40px; line-height: 1; cursor: pointer;
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none;
  color: #fff; font-size: 56px; line-height: 1; cursor: pointer; padding: 10px;
}
.lightbox__nav--prev { left: 6px; }
.lightbox__nav--next { right: 6px; }
.lightbox__nav[hidden] { display: none; }
@media (max-width: 600px) {
  .lightbox { padding: 48px 8px; }
  .lightbox__nav { font-size: 40px; }
}

/* Purchase notice (real recent orders), bottom-left so it never covers WhatsApp */
.purchase-notice {
  position: fixed; left: 20px; bottom: 22px; z-index: 940;
  display: flex; align-items: center; gap: 12px;
  max-width: 300px; padding: 10px 14px 10px 10px;
  background: var(--black); color: var(--white);
  border-left: 2px solid var(--gold); box-shadow: 0 10px 28px rgba(12,12,12,0.25);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.purchase-notice[hidden] { display: none; }
.purchase-notice.is-visible { opacity: 1; transform: translateY(0); }
.purchase-notice__thumb { width: 44px; height: 44px; flex-shrink: 0; background: #1c1a17; }
.purchase-notice__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.purchase-notice__body p { margin: 0; font-size: 13px; line-height: 1.35; }
.purchase-notice__body span { display: block; margin-top: 3px; font-size: 11px; color: rgba(255,255,255,0.6); }
.purchase-notice__disclosure { text-transform: uppercase; letter-spacing: 0.5px; font-style: italic; }
@media (max-width: 900px) {
  .purchase-notice { left: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); max-width: 260px; }
}

/* Product gallery: main image keeps its proportions, thumbnails below */
.product-gallery { display: flex; flex-direction: column; gap: 12px; }
.product-gallery__main {
  padding: 0; border: none; background: var(--cream); cursor: zoom-in; width: 100%;
  aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.product-gallery__thumb {
  flex: 0 0 64px; height: 80px; padding: 0; border: 1px solid rgba(0,0,0,0.12);
  background: var(--cream); cursor: pointer; overflow: hidden;
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-gallery__thumb.is-active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

/* Rating line under the product title */
.product-rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray); margin: 2px 0 10px; }
.product-rating .review-stars { color: var(--gold); letter-spacing: 1px; }

/* Trust list near the add-to-cart button */
.product-trust { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; font-size: 13px; color: var(--gray); }
.product-trust li { padding-left: 22px; position: relative; }
.product-trust li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); }

/* Dark product cards: white titles and clearly visible details link */
.fragrance-card h3 em { color: #fff; font-style: italic; }
.fragrance-card h3 { color: #fff; }
.fragrance-card__details { color: var(--gold-light); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Nos collections: compact premium grid (4 columns desktop, 2 mobile) */
.collections-page { padding: 72px 0 80px; }
.collections-page__grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.collection-tile { aspect-ratio: 4 / 5; padding: 20px; }
.collection-tile__label { font-size: 22px; }
.collection-tile__pastilles { top: 12px; right: 12px; }
.collection-tile__pastille { width: 36px; height: 36px; }
@media (max-width: 900px) {
  .collections-page__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 640px) {
  .collections-page { padding: 48px 0 56px; }
  .collection-tile { padding: 14px; }
  .collection-tile__label { font-size: 18px; }
  .collection-tile__sub { font-size: 10px; letter-spacing: 0.6px; }
}

/* Order step: customer's own selection, shown above the form */
.checkout-selection { padding: 18px 30px 0; }
.checkout-selection:empty { display: none; }
.checkout-selection__title { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); margin-bottom: 10px; }
.checkout-selection ul { list-style: none; padding: 0; margin: 0 0 14px; border-top: 1px solid rgba(0,0,0,0.1); }
.checkout-selection li { padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.1); }
.checkout-selection__line { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.checkout-selection__line span:first-child { flex: 1 1 auto; }
.checkout-selection__detail { font-size: 12px; color: var(--gray); margin: 4px 0 0; line-height: 1.5; }
.checkout-selection__remove {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15);
  background: transparent; color: var(--gray); font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.checkout-selection__remove:hover { background: var(--black); color: var(--white); border-color: var(--black); }

/* Product accordions and benefits */
.product-accordions { margin-top: 26px; border-top: 1px solid rgba(0,0,0,0.12); }
.product-accordion { border-bottom: 1px solid rgba(0,0,0,0.12); }
.product-accordion summary {
  list-style: none; cursor: pointer; padding: 16px 28px 16px 0; position: relative;
  font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--black);
}
.product-accordion summary::-webkit-details-marker { display: none; }
.product-accordion summary::after {
  content: '+'; position: absolute; right: 4px; top: 12px; font-size: 18px; color: var(--gold);
}
.product-accordion[open] summary::after { content: '−'; }
.product-accordion p { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--black); }
.product-benefits { margin-top: 24px; }
.product-benefits__title { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--black); margin-bottom: 10px; }
.product-benefits ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; }
.product-benefits li { padding-left: 22px; position: relative; }
.product-benefits li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); }

/* Bundle page: included products, value and savings */
.bundle-savings { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); padding: 5px 10px; }
.bundle-value { font-size: 13px; color: var(--gray); margin: 2px 0 16px; }
.bundle-included { margin: 22px 0 24px; }
.bundle-included__title { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--black); margin-bottom: 10px; }
.bundle-included ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(0,0,0,0.12); }
.bundle-included__item { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.12); }
.bundle-included__thumb { width: 56px; height: 64px; background: var(--cream); display: block; overflow: hidden; }
.bundle-included__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bundle-included__name { font-size: 14px; color: var(--black); }
.bundle-included__name em { font-style: normal; color: var(--gray); }
.bundle-included__price { font-size: 14px; color: var(--black); }

/* Live pack summary: pack name, progress and price */
.compose-summary__name { flex-basis: 100%; font-family: var(--serif); font-size: 15px; color: var(--black); }

/* Collection sort control */
.collection-sort { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); margin-top: 12px; }
.collection-sort[hidden] { display: none; }
.collection-sort select { font-family: var(--sans); font-size: 13px; padding: 8px 10px; border: 1px solid rgba(0,0,0,0.2); background: var(--white); color: var(--black); border-radius: 2px; }

/* ===========================================================
   VISUAL PASS — modern fashion direction (preview)
   Black / ivory / white. Gold only for small details.
   =========================================================== */
:root { --radius-ui: 2px; }

.btn { border-radius: var(--radius-ui); font-size: 12px; font-weight: 600; letter-spacing: 1.6px; padding: 16px 30px; }
.btn--small { border-radius: var(--radius-ui); padding: 10px 18px; }
.btn--gold { background: var(--black); border-color: var(--black); color: var(--white); }
.btn--gold::before { display: none; }
.btn--gold:hover { background: #2a2825; border-color: #2a2825; color: var(--white); }
.btn--outline { border-color: var(--black); color: var(--black); }
.btn--outline:hover { background: var(--black); color: var(--white); }

.topbar__text, .topbar__cta { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
.topbar__cta { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.5); border-radius: 0; padding: 4px 12px; }

.nav > a, .nav-cta-link { font-size: 11px; letter-spacing: 1.8px; }
.nav > a { position: relative; }
.nav > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;
}
.nav > a:hover::after { transform: scaleX(1); }

.products__grid { gap: 36px 22px; }
.products__grid .product-card { border: none; box-shadow: none; background: transparent; }
.products__grid .product-card:hover { box-shadow: none; transform: none; }
.product-card__bottle {
  aspect-ratio: 4 / 5; background: var(--cream); display: flex; align-items: center; justify-content: center;
}
.product-card__bottle img { width: 100%; height: 100%; object-fit: contain; }
.products__grid .product-card h3 { font-size: 17px; letter-spacing: 0; }

/* VISUAL PASS 2 — product page, footer, mobile (preview). The hero and
   collection-tile rules that used to live here were reverted so both match
   the real site's current look. */
.product-detail__info h1 { font-size: 40px; letter-spacing: -0.5px; line-height: 1.05; }
.product-detail__price { font-family: var(--sans); font-size: 22px; font-weight: 600; letter-spacing: -0.2px; }
.product-detail__visual { background: var(--cream); }

.footer__col h4 { font-family: var(--sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; }
.logo--footer { font-size: 28px; }

@media (max-width: 640px) {
  .products__grid { gap: 24px 12px; }
  .product-detail__info h1 { font-size: 30px; }
}

/* VISUAL PASS 3 — cart, checkout, composer, loyalty (preview) */
.cart-drawer__panel { background: var(--white); }
.cart-drawer__header h2, .checkout-selection__title { letter-spacing: 0.2px; }
.cart-item__info h4 { font-family: var(--serif); font-size: 17px; }
.cart-drawer__subtotal--line span:last-child, .cart-drawer__subtotal span:last-child { font-variant-numeric: tabular-nums; }
.cart-drawer__footer #cartCheckoutBtn, #checkoutReviewBtn { min-height: 54px; }

.compose-sticky-bar { border-top: 1px solid rgba(0,0,0,0.08); }
.compose-summary__name { font-size: 14px; letter-spacing: 0.2px; }
.fragrance-card.is-selected { outline: 1px solid var(--black); outline-offset: 3px; }
.compose-progress .pack-modal__progress-text { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--black); }

.loyalty-card { border: 1px solid rgba(0,0,0,0.1); box-shadow: none; border-radius: var(--radius-ui); }
#view-loyalty h2, #view-loyalty .section__title { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.4px; }

@media (max-width: 640px) {
  .checkout-form { padding-left: 20px; padding-right: 20px; }
  .checkout-selection { padding-left: 20px; padding-right: 20px; }
  .compose-sticky-bar #composePackCta { width: 100%; }
}

/* VISUAL PASS 4 — header/logo inspired by the client's own mockup (preview).
   The hero and collection-tile rules that used to live here were reverted
   so both match the real site's current look. */
.theme-switch { transform: scale(0.82); transform-origin: right center; }
.topbar__icon { margin-right: 8px; vertical-align: -2px; opacity: 0.9; }

@media (max-width: 640px) {
  .header__top { grid-template-columns: auto 1fr; }
  .logo-word { font-size: 20px; }
}

/* Persistent underline on the nav item matching the current page */
.nav > a.is-current::after { transform: scaleX(1); }

/* Hero: automatic rotation only, no visible manual arrows */
.hero-slider__arrow { display: none !important; }

/* VISUAL PASS 5 — collection banner + photo pack cards (preview) */
.collection-banner {
  position: relative; min-height: 420px; overflow: hidden;
  color: var(--white); display: flex; align-items: center;
}
.collection-banner[hidden] { display: none; }
.collection-banner__media {
  position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--black);
}
.collection-banner__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,12,12,0.82) 0%, rgba(12,12,12,0.35) 48%, rgba(12,12,12,0.1) 75%);
}
.collection-banner__content { position: relative; z-index: 2; max-width: 560px; padding: 64px 48px; }
.collection-banner .section__eyebrow { color: var(--gold); }
.collection-banner__content h1 { font-family: var(--serif); font-size: clamp(32px, 4.5vw, 52px); line-height: 1.08; margin: 10px 0 18px; }
.collection-banner__desc { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.85); max-width: 420px; margin-bottom: 26px; }
.collection-banner__cta {
  background: var(--gold); color: var(--black); border: none; padding: 14px 26px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
  cursor: pointer; display: inline-flex; gap: 10px; align-items: center; transition: background 0.3s ease;
}
.collection-banner__cta:hover { background: var(--gold-light); }
.collection-banner__tagline {
  position: absolute; right: 44px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.8);
  z-index: 2; border-right: 1px solid rgba(255,255,255,0.3); padding-right: 14px; margin: 0;
}
.collection-banner__tagline[hidden] { display: none; }
@media (max-width: 900px) {
  .collection-banner { min-height: 320px; }
  .collection-banner__content { padding: 40px 24px; max-width: 100%; }
  .collection-banner__tagline { display: none; }
}

/* Pack cards: plain card keeps a light background and a natural (non-clipped)
   height so its taller content (title/count/price/list/button) always fits,
   even though an earlier dark-themed rule above set a black background. */
.pack-card { background: var(--white); border: 1px solid rgba(0,0,0,0.08); }

/* Photo/pill card variant (.has-image) only — its own box model (fixed
   aspect-ratio, hidden overflow, flex layout) is sized for its own shorter
   top/bottom content and must not apply to the plain card above. */
.pack-card.has-image {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 4 / 5; padding: 26px; border-radius: 0; overflow: hidden;
  background: var(--white); color: inherit; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.08);
  transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s cubic-bezier(.22,1,.36,1), border-color 0.3s ease;
}
.pack-card, .pack-card:visited, .pack-card:hover, .pack-card:focus { color: var(--black); text-decoration: none; }
.pack-card.has-image, .pack-card.has-image:visited, .pack-card.has-image:hover { color: var(--white); }
.pack-card.has-image {
  border: none;
  background: var(--pack-image) center/cover no-repeat, var(--black);
  background-size: 108%, cover;
  transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s cubic-bezier(.22,1,.36,1), background-size 0.6s ease;
}
.pack-card.has-image:hover { background-size: 118%, cover; }
.pack-card.has-image::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(12,12,12,0) 35%, rgba(12,12,12,0.88) 100%);
}
.pack-card__top, .pack-card__bottom { position: relative; z-index: 1; }
.pack-card__label {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px;
}
.pack-card__label::after { content: ''; width: 36px; height: 1px; background: var(--gold); display: inline-block; transition: width 0.35s ease; }
.pack-card:hover .pack-card__label::after { width: 52px; }
.pack-card__heading { font-family: var(--serif); font-size: 26px; line-height: 1.15; margin-bottom: 8px; }
.pack-card__blurb { font-size: 13px; opacity: 0.85; margin-bottom: 20px; }
.pack-card__cta { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; }
.pack-card__cta-circle {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(.22,1,.36,1), border-color 0.3s ease;
}
.pack-card:hover .pack-card__cta-circle { background: var(--gold); color: var(--black); border-color: var(--gold); transform: translateX(4px); }
.pack-card--featured:not(.has-image) { background: var(--black); color: var(--white); border-color: var(--black); }
.pack-card--featured:not(.has-image), .pack-card--featured:not(.has-image):hover { color: var(--white); }
.pack-card.has-image:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(12,12,12,0.16); border-color: var(--gold); }
.pack-card.has-image:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Collection-page packs grid: left-aligned editorial heading (the homepage
   packs SECTION above keeps its own separate centered/cream style). */
.collection-detail__packs { text-align: left; margin: 56px 0 60px; }
.collection-detail__packs .packs__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.packs-heading-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.packs-heading-row__all { font-size: 13px; color: var(--black); display: inline-flex; gap: 6px; align-items: center; text-decoration: none; }
@media (max-width: 640px) {
  .collection-detail__packs .packs__grid { grid-template-columns: 1fr; }
  .pack-card.has-image { aspect-ratio: 4 / 4.6; }
}

/* VISUAL PASS 6 — pack composer page banner (preview). Light/cream panel on
   the left, the pack's own photo (falls back to its collection's) on the
   right; hidden entirely (text panel takes full width) when no photo is set. */
.compose-banner {
  position: relative; display: flex; align-items: stretch; min-height: 440px;
  background: var(--cream); overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.compose-banner__content {
  position: relative; z-index: 2; flex: 1 1 auto; max-width: 560px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 48px;
}
.compose-banner__content h1 { font-family: var(--serif); font-size: clamp(32px, 4.2vw, 56px); line-height: 1.05; margin: 10px 0 18px; color: var(--black); }
.compose-banner__desc { font-size: 15px; line-height: 1.6; color: var(--gray); max-width: 440px; margin-bottom: 28px; }
.compose-banner__features { display: flex; flex-wrap: wrap; gap: 20px 0; }
.compose-banner__feature {
  display: flex; align-items: center; gap: 12px;
  padding-right: 24px; margin-right: 4px; border-right: 1px solid rgba(12,12,12,0.12);
  font-size: 12px; letter-spacing: 0.3px; color: var(--black); max-width: 150px;
}
.compose-banner__feature:last-child { border-right: none; }
.compose-banner__feature-icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--white);
  border: 1px solid rgba(12,12,12,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.compose-banner__feature-icon svg { width: 18px; height: 18px; color: var(--gold-light); }
.compose-banner__media {
  position: relative; flex: 0 1 46%; min-width: 320px;
  background-size: cover; background-position: center;
}
.compose-banner__tagline {
  position: absolute; top: 20px; right: 20px; z-index: 2; text-align: right;
  font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.3;
  color: var(--white); background: rgba(12,12,12,0.55); backdrop-filter: blur(2px);
  padding: 10px 16px 9px; border-bottom: 1px solid var(--gold);
}
@media (max-width: 900px) {
  .compose-banner { flex-direction: column; min-height: 0; }
  .compose-banner__content { max-width: 100%; padding: 36px 24px 28px; }
  .compose-banner__media { flex: 0 0 220px; min-width: 0; }
  .compose-banner__tagline { font-size: 14px; top: 16px; right: 20px; }
}
@media (max-width: 640px) {
  .compose-banner__features { gap: 14px 0; }
  .compose-banner__feature { flex: 0 0 100%; border-right: none; padding-right: 0; max-width: 100%; }
}

/* Olfactory pyramid — premium circular note images with name beneath */
.olfactory-pyramid { margin: 32px 0; }
.olfactory-block { margin-bottom: 26px; }
.olfactory-block:last-child { margin-bottom: 0; }
.olfactory-block__title {
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--black); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.1);
}
.olfactory-grid { display: flex; flex-wrap: wrap; gap: 22px 18px; }
.olfactory-note { display: flex; flex-direction: column; align-items: center; width: 76px; text-align: center; }
.olfactory-note__img {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: block;
  background: var(--cream); border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s ease;
}
.olfactory-note__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.olfactory-note__placeholder { width: 100%; height: 100%; padding: 20px; color: var(--gray); }
.olfactory-note:hover .olfactory-note__img { transform: translateY(-4px) scale(1.06); box-shadow: 0 10px 22px rgba(12,12,12,0.16); }
.olfactory-note__name { margin-top: 8px; font-size: 12px; color: var(--black); line-height: 1.3; }
@media (max-width: 640px) {
  .olfactory-grid { gap: 18px 14px; justify-content: flex-start; }
  .olfactory-note { width: 64px; }
  .olfactory-note__img { width: 60px; height: 60px; }
  .olfactory-note__name { font-size: 11px; }
}

/* VISUAL PASS 7 — product card redesign: rounded pill filters, favorites
   heart, real-review star row, black pill CTA with icon (preview) */
.gender-filter__chip { border-radius: 999px; }
.gender-filter__chip.is-active { background: var(--gold); border-color: var(--gold); color: var(--black); }

.product-card__media { position: relative; }
.product-card__favorite {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.92); border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--black); transition: transform 0.2s ease, color 0.2s ease;
}
.product-card__favorite svg { width: 17px; height: 17px; }
.product-card__favorite:hover { transform: scale(1.08); }
.product-card__favorite.is-active { color: #c0392b; }
.product-card__favorite.is-active svg path { fill: currentColor; }

.product-card__rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray); margin: 2px 0 10px; }
.product-card__rating .review-stars { color: var(--gold); font-size: 13px; letter-spacing: 1px; }

.btn-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 13px 18px; border-radius: 999px; border: none;
  background: var(--black); color: var(--white); font-size: 12px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.btn-pill svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-pill:hover { background: #2a2825; transform: translateY(-1px); }

/* Second favorite heart next to the CTA, matching the mockup's bottom row */
.product-card__action-row { display: flex; align-items: center; gap: 10px; }
.product-card__action-row .btn-pill { flex: 1; width: auto; }
.product-card__favorite--inline {
  position: static; width: 44px; height: 44px; flex-shrink: 0;
  background: var(--white); border: 1px solid rgba(0,0,0,0.12);
}

/* VISUAL PASS 8 — pack composer: click-anywhere-to-add fragrance cards
   (preview). Replaces the +/- stepper with a small quantity badge; "Voir les
   détails" stays its own separate action and never adds to the selection. */
.fragrance-card--stepper { cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.fragrance-card--stepper:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(12,12,12,0.1); }
.fragrance-card--stepper:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.fragrance-card--stepper.is-full { opacity: 0.5; cursor: not-allowed; }
.fragrance-card--stepper.is-full:hover { transform: none; box-shadow: none; }
.fragrance-card--stepper .fragrance-card__details {
  position: relative; z-index: 2; /* stays its own click target, never triggers the add */
}
.fragrance-card__qty-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  background: var(--gold); color: var(--black); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.fragrance-card__qty-badge[hidden] { display: none; }

/* VISUAL PASS 9 — packs visible with no scroll: drop the redundant generic
   collection title (duplicated the packs section's own heading right below
   it) and tighten the spacing above the pack cards. The elements stay in
   the DOM (existing JS still sets their text) — just hidden, zero layout
   cost, so nothing else needs to change. */
#collectionDetailEyebrow, #collectionDetailTitle { display: none; }
.collection-detail { padding: 24px 0 110px; }
.collection-detail__back { margin-bottom: 10px; }
.collection-detail__packs { margin-top: 0; }