/* ─────────────────────────────────────────────────
   SATIEN v2 — Editorial premium landing
   Cormorant Garamond · crème/beige · noir · or chaud
   ───────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --cream:      #F2EBDC;
  --cream-soft: #EDE5D2;
  --cream-deep: #E2D7BE;
  --paper:      #F8F2E4;
  --ink:        #161310;
  --ink-2:      #2C2720;
  --ink-soft:   #6E6555;
  --gold:       #C9A24A;
  --gold-deep:  #A07A2C;
  --gold-soft:  #D9BD7A;
  --line:       rgba(22, 19, 16, 0.12);
  --line-soft:  rgba(22, 19, 16, 0.06);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --max: 1320px;
  --gut: clamp(20px, 4vw, 56px);
}

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

html, body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

/* ─── Type ─── */

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow-gold { color: var(--gold-deep); }
.eyebrow-rule {
  display: inline-flex; align-items: center; gap: 14px;
}
.eyebrow-rule::before, .eyebrow-rule::after {
  content: ''; width: 28px; height: 1px; background: currentColor; opacity: .5;
}

.h-display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(64px, 13vw, 220px);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.h-mega {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(48px, 7.4vw, 124px);
  line-height: 1.0;
  letter-spacing: -0.015em;
}

.h-1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.h-2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.h-3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.18;
}

.lede {
  font-size: clamp(15px, 1.15vw, 17.5px);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 56ch;
  font-weight: 400;
}

.body-sm { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }

.mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.italic-accent {
  font-style: italic;
  font-weight: 500;
  color: var(--gold-deep);
}

/* ─── Layout ─── */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
}

section { position: relative; padding: clamp(96px, 12vw, 160px) 0; }

.section-num {
  position: absolute; top: clamp(32px, 5vw, 56px); left: var(--gut);
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--gold-deep);
  letter-spacing: 0.04em;
}

/* ─── Buttons ─── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 30px;
  border-radius: 999px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: transform .35s cubic-bezier(.2,.65,.3,1), background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--ink); color: var(--paper);
  box-shadow: 0 10px 26px -16px rgba(20,17,11,.45);
}
.btn-primary:hover { background: #000; box-shadow: 0 16px 36px -14px rgba(20,17,11,.55); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-link {
  font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 500; color: var(--ink); display: inline-flex; gap: 10px; align-items: center;
  height: 54px; padding: 0 14px;
}
.btn-link::after { content: '→'; transition: transform .3s ease; }
.btn-link:hover::after { transform: translateX(4px); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-deep); color: var(--paper); }
.btn-ghost { border: 1px solid currentColor; }
.btn-sm { height: 42px; padding: 0 20px; font-size: 11px; }
.btn-on-dark { background: var(--paper); color: var(--ink); }
.btn-on-dark:hover { background: var(--gold); }

/* ─── NAV ─── */

.nav {
  position: sticky; top: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px var(--gut);
  background: rgba(242, 235, 220, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.nav.scrolled { background: rgba(242,235,220,.92); border-bottom-color: var(--line-soft); }
.nav-brand {
  font-family: var(--serif); font-weight: 500;
  font-size: 24px; letter-spacing: -0.005em;
  display: inline-flex; align-items: baseline; gap: 2px;
}
.nav-brand::after { content: '.'; color: var(--gold-deep); }
.nav-links {
  display: flex; gap: 40px; justify-content: center;
  font-size: 13px; color: var(--ink-2);
}
.nav-links a { position: relative; padding: 6px 0; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.2,.65,.3,1);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { justify-self: end; display: flex; gap: 10px; align-items: center; }

/* ─── HERO ─── */

.hero {
  padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 120px);
  position: relative;
  text-align: center;
}

.hero-eyebrow {
  margin-top: clamp(16px, 4vw, 40px);
  margin-bottom: clamp(28px, 4vw, 48px);
}

.hero-display {
  margin: 0 auto;
  max-width: 14ch;
}
.hero-display .word { display: block; }
.hero-display .word.italic-accent {
  font-size: 0.78em;
  margin: 0.04em auto 0.06em;
  display: block;
}

.hero-cta {
  margin-top: clamp(28px, 4vw, 44px);
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; justify-content: center;
}


.hero-quiet {
  margin-top: 14px; color: var(--ink-soft);
  display: flex; gap: 16px; align-items: center;
  flex-wrap: wrap; justify-content: center;
}
.hero-quiet .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-deep); }
.hero-quiet-link { transition: color .2s ease; }
.hero-quiet-link:hover { color: var(--gold-deep); }

/* ─── Marquee (compatibilité) ─── */

.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  background: var(--paper);
  overflow: hidden;
  position: relative;
}
.marquee-eyebrow {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  background: var(--paper); padding: 0 14px;
}
.marquee-track {
  display: flex; gap: 0;
  animation: marquee 40s linear infinite;
  white-space: nowrap;
  align-items: center;
}
.marquee-track .seg {
  display: inline-flex; gap: 80px; align-items: center; padding-right: 80px;
}
.marquee-item {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 36px);
  color: var(--gold-deep);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.marquee-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-deep);
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ─── Phrase choc (dark) ─── */

.choc {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: clamp(120px, 16vw, 220px) 0;
  position: relative;
  overflow: hidden;
}
.choc::before {
  content: '';
  position: absolute; inset: -10% -5%;
  background:
    radial-gradient(40% 30% at 50% 50%, rgba(201,162,74,.10), transparent 70%),
    radial-gradient(60% 40% at 50% 80%, rgba(201,162,74,.05), transparent 70%);
  pointer-events: none;
}
.choc .h-display {
  position: relative;
  max-width: 16ch; margin: 0 auto;
  font-weight: 500;
}
.choc .h-display .strike {
  text-decoration: line-through;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 3px;
  font-style: italic;
  color: var(--gold-soft);
}
.choc-lede {
  margin: 36px auto 0;
  max-width: 52ch;
  color: rgba(248, 242, 228, 0.7);
  position: relative;
}
.choc-eyebrow {
  position: relative;
  margin-bottom: 36px;
  color: var(--gold);
}

/* ─── Produit (présentation) ─── */

.product {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  width: min(calc(100vw - clamp(32px, 6vw, 96px)), 1680px);
  margin-inline: 0;
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: none;
}
.product-visuals{display:block}
@media (min-width: 1025px) {
  .product-visuals { position: sticky; top: 120px; }
  .product-visual { max-width: 75%; }
}
.product-visual .carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.product-visual .carousel-slide.is-active{opacity:1;pointer-events:auto}
.product-visual-alt{
  position:absolute;right:20px;bottom:20px;z-index:3;
  width:84px;aspect-ratio:910/1024;
  border-radius:10px;overflow:hidden;padding:0;
  border:2px solid var(--paper);
  background:var(--cream);
  box-shadow:0 10px 24px -10px rgba(20,17,11,.4);
  cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.65,.3,1),box-shadow .3s ease;
}
.product-visual-alt:hover{transform:translateY(-3px);box-shadow:0 16px 32px -12px rgba(20,17,11,.5)}
.product-visual-alt image-slot{width:100%;height:100%}
.product-visual-alt-label{
  position:absolute;left:0;right:0;bottom:0;
  padding:4px 0;font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  text-align:center;color:#fff;background:rgba(20,17,11,.6);backdrop-filter:blur(4px);
}
.carousel-dots{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  display:flex;gap:8px;
}
.carousel-dot{
  appearance:none;border:0;padding:0;width:8px;height:8px;border-radius:50%;
  background:rgba(248,242,228,.55);cursor:pointer;
  box-shadow:0 0 0 1px rgba(20,17,11,.25);
  transition:background .2s ease,transform .2s ease;
}
.carousel-dot:hover{transform:scale(1.15)}
.carousel-dot.is-active{background:var(--gold)}

/* Arrows: always visible so it's obvious there's more than one photo — a
   little more prominent on hover/tap. */
.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(22,19,16,.55);color:#fff;border:0;cursor:pointer;
  opacity:.85;pointer-events:auto;
  transition:opacity .2s ease,background .2s ease;
  backdrop-filter:blur(4px);
}
.product-visual:hover .carousel-arrow,
.product-visual.controls-shown .carousel-arrow{opacity:1}
.carousel-arrow:hover{background:rgba(22,19,16,.8)}
.carousel-arrow.prev{left:16px}
.carousel-arrow.next{right:16px}
.product-visual {
  aspect-ratio: 910/1024;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  background:
    var(--cream);
  border: 0;
  /* The swipe-between-photos handler only reads touch coordinates and
     never calls preventDefault, but some mobile browsers still hesitate
     on vertical scroll starting over an element with touch listeners,
     waiting to see if it'll be claimed — this tells them upfront that
     vertical panning always wins here, so scrolling past the photo never
     feels stuck. */
  touch-action: pan-y;
}
.product-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.product-visual .shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: shimmer 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
.product-text { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.product-heading-mobile { display: none; }

/* Concrete, scannable benefits under the short lede — replaces the old
   dense single paragraph. */
.product-quality-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 20px; }
.product-quality-badge {
  flex: 1; min-width: 96px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 14px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.product-quality-badge svg { color: var(--gold-deep); flex-shrink: 0; }
.product-quality-badge-img { height: 52px; width: auto; flex-shrink: 0; }
.product-quality-badge span { font-size: 11px; font-weight: 600; color: var(--ink); line-height: 1.3; }

.product-benefits-list { display: flex; flex-direction: column; gap: 10px; margin-top: -8px; }
.product-benefits-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.4;
}
.product-benefits-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--gold-deep); }

/* Rating link: quick social proof next to the price, before the CTA. */
.product-rating {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font-size: 13px; color: var(--ink-soft);
}
.product-rating-stars { color: var(--gold-deep); font-size: 13px; letter-spacing: 1px; }
.product-rating:hover { color: var(--ink); }

/* Full-width reassurance strip, below the whole product grid (not squeezed
   into the narrow text column) — its own breathing room instead of piling
   up against the quality badges right under the CTA. */
.product-trust-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 56px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.product-trust-item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
}
.product-trust-item svg { color: var(--ink); }
.product-trust-item strong {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.product-trust-item span { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }

/* Pack picker: pick 1 vs 2 as two selectable cards, real prices (2 is just
   2x the unit price — no fabricated discount). The 2-pack states its real
   savings (free shipping + wash bag, a genuine combined value) up front,
   and — since it holds 2 units — lets each be a different color. */
.product-pack-picker { display: flex; flex-direction: column; gap: 12px; margin-top: -4px; }
.product-pack-option {
  position: relative;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--paper);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.product-pack-option:hover { border-color: var(--gold-deep); }
.product-pack-option.is-active {
  border-color: var(--ink); border-width: 2px;
  box-shadow: 0 12px 28px -18px rgba(20,17,11,.35);
}
button.product-pack-option, .product-pack-main {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 16px 18px;
}
.product-pack-option.is-active button.product-pack-option,
.product-pack-option.is-active .product-pack-main { padding: 15px 17px; }
.product-pack-radio {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
}
.product-pack-option.is-active .product-pack-radio { border-color: var(--ink); }
.product-pack-option.is-active .product-pack-radio::after {
  content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ink);
}
.product-pack-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.product-pack-name { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); }
.product-pack-sub { font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
.product-pack-savings { font-size: 12.5px; color: var(--gold-deep); font-weight: 600; }
.product-pack-savings-detail { font-weight: 400; color: var(--ink-soft); }
.product-pack-price { font-family: var(--serif); font-size: 19px; color: var(--ink); flex-shrink: 0; }
.product-pack-banner {
  background: var(--ink); color: var(--gold);
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
  padding: 9px 12px;
}

.product-pack-colors {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 18px 16px;
}
.product-pack-color-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.product-pack-color-label { font-size: 12px; color: var(--ink-soft); }
.product-pack-color-toggle { display: flex; gap: 8px; }
.product-pack-color-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; color: var(--ink-2);
  transition: border-color .2s ease;
}
.product-pack-color-btn .product-swatch-dot { width: 14px; height: 14px; }
.product-pack-color-btn:hover { border-color: var(--gold-deep); }
.product-pack-color-btn.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 500; color: var(--ink); }

/* Each 2-pack perk listed on its own row with its own OFFERT pill, rather
   than folded into one sentence — easier to scan, and each gift gets its
   own visual confirmation. */
.product-pack-perks { border-top: 1px solid var(--line); }
.product-pack-perk-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
}
.product-pack-perk-row + .product-pack-perk-row { border-top: 1px solid var(--line-soft); }
.product-pack-perk-row > svg { color: var(--gold-deep); flex-shrink: 0; }
.product-pack-perk-text { font-size: 13px; color: var(--ink-2); flex: 1; min-width: 0; }
.product-pack-perk-was { font-size: 12.5px; color: var(--ink-soft); text-decoration: line-through; flex-shrink: 0; }
.product-pack-perk-pill {
  flex-shrink: 0;
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: var(--gold); color: var(--ink);
}

/* Mini FAQ: answers the same purchase-critical questions as the main FAQ
   section, right next to the CTA. Reuses the same content via faq.item{i}
   Editable ids, so edits made in the main FAQ stay in sync here. */
.product-mini-faq { display: none; }
.product-faq-item { border-bottom: 1px solid var(--line); }
.product-faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 0; text-align: left;
  font-size: 14.5px; font-weight: 500; color: var(--ink);
}
.product-faq-toggle {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  transition: transform .3s cubic-bezier(.2,.65,.3,1), background .25s, color .25s, border-color .25s;
}
.product-faq-item.open .product-faq-toggle {
  transform: rotate(45deg); background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.product-faq-a { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.2,.65,.3,1), padding .4s ease; }
.product-faq-item.open .product-faq-a { max-height: 260px; padding: 0 0 16px; }
.product-faq-a p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

/* Sticky mobile buy bar, shown once the real CTA scrolls out of view. */
.product-sticky-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(248,242,228,.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -12px rgba(20,17,11,.2);
}
.product-sticky-bar-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.product-sticky-bar-thumb { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.product-sticky-bar-thumb image-slot { width: 100%; height: 100%; }
.product-sticky-bar-text { display: flex; flex-direction: column; min-width: 0; }
.product-sticky-bar-text strong { font-size: 13px; font-weight: 500; }
.product-sticky-bar-text span { font-size: 12.5px; color: var(--ink-soft); }
.product-sticky-bar .btn { flex-shrink: 0; }

@media (max-width: 700px) {
  .product-description { display: none; }

  .product-mini-faq { display: block; margin-top: -4px; }

  .product-sticky-bar { display: flex; }

  .carousel-dots { gap: 6px; }
  .carousel-dot { width: 16px; height: 3px; border-radius: 2px; }
}

.product-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.product-meta {
  margin-top: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.product-meta dt { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.product-meta dd { font-family: var(--serif); font-size: 22px; }

/* ─── Variantes (couleur) & stock ─── */
.product-variant { display: flex; flex-direction: column; gap: 10px; }
.product-variant-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.product-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.product-swatch {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 16px 0 8px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper);
  font-size: 12.5px; letter-spacing: 0.02em;
  transition: border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.product-swatch:hover { border-color: var(--gold-deep); }
.product-swatch.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.product-swatch.is-unavailable { opacity: .4; text-decoration: line-through; }
.product-swatch-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); flex-shrink: 0; }
/* ─── Précommande (launch) ─── */
.product-preorder {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid var(--gold-deep);
  border-radius: 10px;
  background: var(--paper);
}
.product-preorder-badge {
  align-self: flex-start;
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: var(--gold); color: var(--ink);
}
.product-preorder-title {
  font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.32;
  color: var(--ink);
}
.product-preorder-sub { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.product-preorder-notes { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.product-preorder-note { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

.product-price { display: flex; align-items: baseline; gap: 10px; }
.product-price-amount { font-family: var(--serif); font-size: 30px; }
.product-price-compare { font-size: 14px; color: var(--ink-soft); text-decoration: line-through; }
.product-stock { font-size: 12.5px; display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); }
.product-stock-dot { width: 7px; height: 7px; border-radius: 50%; background: #4a8f5c; }
.product-stock.is-out .product-stock-dot { background: #b3261e; }
.product-stock.is-low .product-stock-dot { background: var(--gold-deep); }
.product-status-msg { font-size: 12.5px; color: var(--ink-soft); }
.product-status-msg.is-error { color: #b3261e; }

/* SVG cap rendering inside placeholder */
.cap-render {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.cap-render svg {
  width: 70%;
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(20,17,11,0.18));
}

/* ─── Bénéfices ─── */

.benefits {
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.benefits-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: end;
  margin-bottom: 80px;
}
.benefits-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line);
}
.benefit {
  padding: 48px 32px 56px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 28px;
  position: relative;
  transition: background .4s ease;
}
.benefit:last-child { border-right: 0; }
.benefit:hover { background: var(--cream-soft); }
.benefit-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  align-self: center;
}
.benefit-icon-num {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 24px;
  color: var(--gold-deep);
}
.benefit h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.15; text-align: center; }
.benefit p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; text-align: center; }

/* ─── How it works ─── */

.how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: 64px;
}
.how-step {
  display: flex; flex-direction: column; gap: 24px;
}
.how-visual {
  aspect-ratio: 4/5;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background:
    repeating-linear-gradient(45deg, var(--cream-soft) 0 12px, var(--cream-deep) 12px 24px);
  border: 1px solid var(--line-soft);
}
.how-visual.dark {
  background:
    radial-gradient(70% 50% at 50% 40%, #221C12, #0E0C09 80%);
  border-color: rgba(255,255,255,.06);
}
.how-num-tag {
  position: absolute; top: 18px; left: 18px;
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: var(--paper);
  background: rgba(20,17,11,.78);
  padding: 6px 16px; border-radius: 999px;
  backdrop-filter: blur(8px);
}
.how-step h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: 28px; line-height: 1.15;
}
.how-step p { color: var(--ink-soft); }

/* ─── Témoignages ─── */

.testimonials {
  background: var(--cream-soft);
  border-top: 1px solid var(--line-soft);
}
.testimonial-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin-top: 64px;
}
.testimonial {
  padding: 40px 36px 36px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 24px;
  transition: transform .4s ease, box-shadow .4s ease;
}
.testimonial:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(20,17,11,.18);
}
.stars { display: flex; gap: 3px; color: var(--gold-deep); font-size: 14px; }
.testimonial-quote {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px; line-height: 1.32;
  color: var(--ink);
}
.testimonial-author { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.testimonial-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cream-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 18px; color: var(--ink);
  border: 1px solid var(--line);
}
.testimonial-author-meta { display: flex; flex-direction: column; }
.testimonial-author-meta strong { font-weight: 500; font-size: 14px; }
.testimonial-author-meta span { font-size: 12px; color: var(--ink-soft); }
/* Mobile testimonial carousel: one full-width card at a time, sliding
   horizontally; see TestimonialCarousel. All 3 reviews share the same grid
   cell and are positioned with inline transforms rather than classes; the
   wrapper's own height is set inline (measured off the active card) and
   animated here so a short review doesn't sit in a box sized for the
   longest one. */
.testimonial-carousel { margin-top: 40px; overflow: hidden; }
/* align-items: start keeps each card at its own natural height instead of
   the grid's default stretch-to-fill-the-row — stretch would make every
   card match the tallest one, which also self-locks once the wrapper
   below gets an explicit JS-measured height (the "tallest" card can then
   never grow past whatever height was first measured). */
.testimonial-vstack { display: grid; align-items: start; transition: height .4s cubic-bezier(.2,.65,.3,1); }
.testimonial-vslide { grid-row: 1; grid-column: 1; }
.testimonial-vslide .testimonial { padding: 40px 30px 34px; gap: 24px; }
.testimonial-vslide .stars { font-size: 15px; }
.testimonial-vslide .testimonial-quote { font-size: 21px; line-height: 1.42; }
.testimonial-vslide .testimonial-author-meta strong { font-size: 15px; }
.testimonial-vslide .testimonial-author-meta span { font-size: 13px; }
.testimonial-nav { display: flex; justify-content: center; gap: 16px; margin-top: 28px; }
.testimonial-nav-btn {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--ink); cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.testimonial-nav-btn:hover { background: var(--cream-deep); transform: translateY(-2px); }

/* ─── FAQ ─── */

.faq-wrap {
  display: grid; grid-template-columns: 0.9fr 1.4fr; gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.faq-side { position: sticky; top: 120px; }
.faq-list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 28px 0;
  text-align: left;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--ink);
  transition: color .25s;
}
.faq-q:hover { color: var(--gold-deep); }
.faq-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform .35s cubic-bezier(.2,.65,.3,1), background .25s, color .25s, border-color .25s;
}
.faq-item.open .faq-toggle {
  transform: rotate(45deg);
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.2,.65,.3,1), padding .45s ease;
  color: var(--ink-soft);
  font-size: 15px; line-height: 1.65;
}
.faq-item.open .faq-a {
  max-height: 320px;
  padding: 0 0 28px;
}
.faq-a p { max-width: 64ch; }

/* ─── Garantie ─── */

.guarantee {
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.guarantee-inner {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.guarantee-seal {
  width: clamp(220px, 22vw, 320px); aspect-ratio: 1; margin: 0 auto;
  position: relative;
}
.guarantee-seal .seal-circle {
  position: absolute; inset: 0;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
}
.guarantee-seal .seal-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px; text-align: center;
  font-family: var(--serif);
}
.guarantee-seal .seal-num {
  font-size: clamp(64px, 7vw, 120px);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
.guarantee-seal .seal-tag {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-deep); font-family: var(--sans); font-weight: 500;
}
.guarantee-seal .seal-italic {
  font-style: italic; color: var(--gold-deep); font-size: 14px;
}
.guarantee-seal svg.spin-text {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: rotate 36s linear infinite;
}
@keyframes rotate { to { transform: rotate(360deg); } }

/* ─── Newsletter ─── */

.newsletter {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: clamp(96px, 12vw, 140px) 0;
  position: relative;
  overflow: hidden;
}
.newsletter::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 50%, rgba(201,162,74,.08), transparent 60%);
}
.newsletter .h-1 { color: var(--paper); position: relative; }
.newsletter-eyebrow { color: var(--gold-deep); position: relative; margin-bottom: 28px; }
.newsletter-lede { color: rgba(248,242,228,.65); margin: 24px auto 0; max-width: 48ch; position: relative; }
.newsletter-form {
  display: flex; gap: 8px; max-width: 520px; margin: 40px auto 0;
  padding: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  position: relative;
}
.newsletter-form input {
  flex: 1; height: 48px; padding: 0 22px;
  border: 0; background: transparent; color: var(--paper);
  font: inherit; font-size: 14px; outline: none;
}
.newsletter-form input::placeholder { color: rgba(248,242,228,.4); }
.newsletter-form button {
  height: 48px; padding: 0 28px;
  background: var(--gold); color: var(--ink);
  border-radius: 999px; font-weight: 500;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}
.newsletter-form button:hover { background: var(--paper); }
.newsletter-form button:disabled { opacity: .6; cursor: not-allowed; }
.newsletter-error { margin-top: 12px; font-size: 12.5px; color: #E8A9A0; }
.newsletter-fineprint {
  margin-top: 16px; font-size: 12px; color: rgba(248,242,228,.5);
  position: relative;
}

/* ─── Footer ─── */

.footer {
  background: var(--paper);
  padding: clamp(80px, 10vw, 120px) 0 32px;
  border-top: 1px solid var(--line-soft);
}
.footer-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
}
.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-brand .logo {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.01em;
  display: inline-flex; align-items: baseline;
}
.footer-brand .logo::after { content: '.'; color: var(--gold-deep); }
.footer-brand p { color: var(--ink-soft); font-size: 14px; max-width: 38ch; }
.footer-col h4 {
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--ink-2); transition: color .2s; }
.footer-col a:hover { color: var(--gold-deep); }
.footer-copy-btn {
  appearance: none; border: 0; background: none; padding: 0;
  font: inherit; font-size: 14px; color: var(--ink-2);
  cursor: pointer; text-align: left; transition: color .2s;
}
.footer-copy-btn:hover { color: var(--gold-deep); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px; gap: 16px;
  font-size: 12px; color: var(--ink-soft);
  flex-wrap: wrap;
}
.footer-mega {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(80px, 14vw, 220px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--cream-deep);
  text-align: center;
  padding: clamp(40px, 6vw, 80px) 0 0;
  user-select: none;
}

/* ─── Reveal animations ─── */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.1s cubic-bezier(.2,.65,.3,1),
    transform 1.1s cubic-bezier(.2,.65,.3,1);
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .40s; }

[data-reveal-words] {
  display: inline-block; line-height: inherit;
}
[data-reveal-words] .word-r {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity .9s cubic-bezier(.2,.65,.3,1), transform .9s cubic-bezier(.2,.65,.3,1);
}
[data-reveal-words].in .word-r { opacity: 1; transform: none; }

/* ─── Section header (shared) ─── */

.sec-hd {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: end;
}
.sec-hd .lede { justify-self: start; }
.sec-num-inline {
  font-family: var(--serif); font-style: italic;
  color: var(--gold-deep); font-size: 14px;
  display: block; margin-bottom: 14px;
}

/* ─── Responsive ─── */

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .product { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit:nth-child(2) { border-right: 0; }
  .benefit:nth-child(1), .benefit:nth-child(2) { border-bottom: 1px solid var(--line); }
  .how-grid, .testimonial-grid { grid-template-columns: 1fr; }
  .faq-wrap, .guarantee-inner, .benefits-head, .sec-hd { grid-template-columns: 1fr; gap: 24px; }
  .faq-side { position: static; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .marquee-track { animation-duration: 8s; gap: 0; }
  .marquee-track .seg { gap: 32px; padding-right: 32px; }
  .marquee-item { font-size: 20px; }
  .wrap > *, .product > * { min-width: 0; }
  .product-cta { flex-direction: column; align-items: stretch; }
  .product-cta .btn { justify-content: center; text-align: center; }
  .product-visual-alt { display: none; }
  .product-heading-mobile { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

  /* The pill-shaped newsletter form has no responsive rule at all, so on a
     narrow phone the button overflows past the rounded container instead
     of staying inside it — stack input and button into two full-width
     rounded rows instead of one fixed-height row. */
  .newsletter-form { flex-direction: column; border-radius: 22px; }
  .newsletter-form input { width: 100%; text-align: center; }
  .newsletter-form button { width: 100%; }
}

@media (max-width: 600px) {
  .hero-display { font-size: clamp(56px, 18vw, 96px); }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit { padding: 28px 18px 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .benefit:nth-child(2n) { border-right: 0; }
  .benefit:nth-child(n+3) { border-bottom: 0; }
  .benefit h3 { font-size: 20px; min-height: 46px; display: flex; align-items: center; justify-content: center; }
  .benefit-icon { width: 44px; height: 44px; }
  .footer-top { grid-template-columns: 1fr; }
  .nav { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}

/* ─── Cart drawer — right-side panel on desktop, bottom sheet on mobile ─── */
.cart-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20,17,11,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
  width: 420px; max-width: 92vw;
  background: var(--paper);
  box-shadow: -20px 0 60px -20px rgba(20,17,11,.35);
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.2,.65,.3,1);
  display: flex; flex-direction: column;
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px; border-bottom: 1px solid var(--line);
}
.cart-drawer-head h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.cart-drawer-close {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); transition: background .2s ease, color .2s ease;
}
.cart-drawer-close:hover { background: var(--cream-deep); color: var(--ink); }
.cart-drawer-progress {
  margin: 18px 28px 4px; padding: 18px 18px 4px;
  border-radius: 14px; background: var(--cream);
  border: 1px solid var(--line-soft);
}
.cart-drawer-progress-headline {
  display: flex; align-items: center; gap: 7px;
  font-size: 14.5px; color: var(--ink); line-height: 1.35;
  margin-bottom: 12px;
}
.cart-drawer-progress-headline svg { width: 16px; height: 16px; color: var(--gold-deep); flex-shrink: 0; }
.cart-drawer-progress.is-complete .cart-drawer-progress-headline { font-weight: 700; }
.cart-drawer-progress-headline strong { color: var(--gold-deep); font-weight: 700; }
.cart-drawer-progress-track {
  height: 9px; border-radius: 999px; background: var(--cream-deep);
  overflow: hidden;
}
.cart-drawer-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold-deep));
  transition: width .4s cubic-bezier(.2,.65,.3,1);
}
.cart-drawer-progress.is-complete .cart-drawer-progress-fill { background: var(--ink); }
.cart-drawer-progress-scale {
  display: flex; justify-content: space-between;
  margin-top: 5px; font-size: 11px; color: var(--ink-soft);
}
.cart-drawer-progress-perks { margin-top: 14px; }
.cart-drawer-progress-perk { padding: 12px 0; }
.cart-drawer-progress-perk.is-locked > svg { color: var(--ink-soft); opacity: .55; }
.cart-drawer-progress-perk.is-locked .product-pack-perk-text { color: var(--ink-soft); }
.cart-drawer-progress-perk-locked {
  flex-shrink: 0;
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: var(--cream-deep); color: var(--ink-soft);
}
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 12px 28px; }
.cart-drawer-empty { color: var(--ink-soft); font-size: 14px; padding: 24px 0; }
.cart-drawer-error { margin: 0 28px 16px; font-size: 13px; color: #b3261e; }
.cart-line {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 0; border-bottom: 1px solid var(--line-soft);
}
.cart-line-img { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--cream); }
.cart-line-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-info { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.cart-line-title { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink); }
.cart-line-color { font-size: 12px; color: var(--ink-soft); }
.cart-line-qty {
  display: inline-flex; align-items: center; gap: 2px; margin-top: 4px;
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden; width: fit-content;
}
.cart-line-qty button { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background .2s ease; }
.cart-line-qty button:hover:not(:disabled) { background: var(--cream-deep); }
.cart-line-qty button:disabled { opacity: .4; cursor: not-allowed; }
.cart-line-qty span { min-width: 22px; text-align: center; font-size: 13px; }
.cart-line-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.cart-line-price { font-family: var(--serif); font-size: 14.5px; color: var(--ink); }
.cart-line-price-was { text-decoration: line-through; color: var(--ink-soft); margin-right: 6px; }
.cart-line-price-free { color: var(--gold-deep); }
.cart-line-remove { color: var(--ink-soft); transition: color .2s ease; }
.cart-line-remove:hover { color: var(--ink); }
.cart-drawer-foot { padding: 20px 28px; border-top: 1px solid var(--line); }
.cart-drawer-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; font-size: 14px; }
.cart-drawer-subtotal span:last-child { font-family: var(--serif); font-size: 20px; color: var(--ink); }
.cart-drawer-checkout { display: flex; width: 100%; }

@media (max-width: 700px) {
  .cart-drawer {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: 100%;
    max-height: 82vh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -16px 50px -16px rgba(20,17,11,.35);
    transform: translateY(100%);
  }
  .cart-drawer.is-open { transform: translateY(0); }
  .cart-drawer-head { padding: 14px 20px 16px; position: relative; }
  .cart-drawer-head::before {
    content: ''; position: absolute; top: 8px; left: 50%;
    width: 36px; height: 4px; border-radius: 999px;
    background: var(--line); transform: translateX(-50%);
  }
  .cart-drawer-body { padding: 8px 20px; }
  .cart-drawer-foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
  .cart-drawer-progress { margin: 12px 20px 4px; }
  .cart-drawer-error { margin: 0 20px 16px; }
}