/* ═══════════════════════════════════════════════════════════════
   Patisserie Manon — site-wide stylesheet (maison design language)
   Tokens extracted from the studio (index.html) so every page reads
   as one product. Pages load Cormorant Garamond + Jost themselves.
   No frameworks. Classic stylesheet, mobile-first where it matters.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* base palette (studio parity) */
  --paper:    #F8F0E4;
  --linen:    #EFE4D4;
  --shell:    #E6D5BF;
  --cream:    #FFF9F0;
  --ink:      #211710;
  --cocoa:    #6F5847;
  --taupe:    #9A876F;
  --gold:     #B8924A;
  --gold-lt:  #E2C57F;
  --berry:    #B23A52;
  --sage:     #65815F;
  --line:     rgba(92, 65, 42, 0.16);
  --shadow:   0 24px 70px rgba(56, 37, 22, 0.16);

  /* maison editorial set (landing parity) */
  --mn-cream:      #F6EEDF;
  --mn-cream-2:    #EFE3CC;
  --mn-dark:       #1D130C;
  --mn-dark-2:     #2A1B10;
  --mn-ink:        #211710;
  --mn-cocoa:      #6F5847;
  --mn-gold:       #B8924A;
  --mn-gold-deep:  #7A5C24;
  --mn-gold-bright:#D8B366;
  --mn-ondark:     #F3E9DA;
  --mn-ondark-dim: rgba(243, 233, 218, 0.80);
  --mn-hairline:   rgba(33, 23, 16, 0.14);
  --mn-ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-lux:      cubic-bezier(0.22, 1, 0.36, 1);

  /* scales */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 8px;  --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --elev-1: 0 4px 14px rgba(56, 37, 22, 0.08);
  --elev-2: 0 12px 30px rgba(56, 37, 22, 0.12);
  --elev-3: 0 24px 70px rgba(56, 37, 22, 0.16);
  --dur-enter: 240ms; --dur-exit: 160ms; --dur-step: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --focus-ring: 0 0 0 3px rgba(184, 146, 74, 0.45), 0 0 0 5px rgba(33, 23, 16, 0.18);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;

  /* semantic slots the dark theme re-maps (kept out of components) */
  --mn-body-dim: #5E5546;              /* standfirst / long-form secondary text */
  --mn-hover-veil: rgba(33, 23, 16, 0.05);
  --mn-glass: rgba(246, 238, 223, 0.82);
  --mn-photo-filter: none;             /* product shots sit on white — dark mode warms them */
}

/* ── reset & base ─────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100vh;
  /* clip, not hidden: hovered cards scale past the edge without
     spawning a horizontal scrollbar, and sticky nav keeps working */
  overflow-x: clip;
  background: var(--mn-cream);
  color: var(--mn-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible,
input:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-md);
}
.mn-btn:focus-visible, .mn-nav-link:focus-visible, .cart-pill:focus-visible { border-radius: var(--r-pill); }

::selection { background: rgba(184, 146, 74, 0.30); }

/* ── editorial primitives (landing parity) ────────────────────── */
.mn-wrap { width: min(1200px, calc(100% - clamp(40px, 8vw, 128px))); margin: 0 auto; }

.mn-eyebrow {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--mn-gold-deep);
}
.mn-dark .mn-eyebrow { color: var(--mn-gold-bright); }

.mn-display {
  font-family: var(--font-display);
  /* 600: Cormorant's 500 goes wispy at display sizes against rich photos */
  font-weight: 600;
  color: var(--mn-ink);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
.mn-display em { font-style: italic; font-weight: 500; }
.mn-dark .mn-display { color: var(--mn-ondark); }

.mn-standfirst {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.35vw, 17px); font-weight: 400;
  line-height: 1.65; color: var(--mn-body-dim);
  max-width: 46ch;
}
.mn-dark .mn-standfirst { color: var(--mn-ondark-dim); }

.mn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 30px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform 0.25s var(--mn-ease), box-shadow 0.25s var(--mn-ease),
              background 0.25s, color 0.25s, border-color 0.25s;
}
.mn-btn:active { transform: scale(0.97); }
.mn-btn-gold { background: var(--mn-gold); color: #14100B; }
.mn-btn-gold:hover { background: var(--mn-gold-bright); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(138, 106, 46, 0.35); }
.mn-btn-ghost { background: transparent; color: var(--mn-ink); border-color: var(--mn-hairline); }
.mn-btn-ghost:hover { border-color: var(--mn-ink); transform: translateY(-2px); }
.mn-dark .mn-btn-ghost { color: var(--mn-ondark); border-color: rgba(243, 233, 218, 0.30); }
.mn-dark .mn-btn-ghost:hover { border-color: var(--mn-ondark); }
.mn-btn[disabled] { opacity: 0.5; cursor: default; pointer-events: none; }
/* gold-on-gold focus ring was near-invisible exactly where money moves */
.mn-btn-gold:focus-visible {
  /* transparent outline is invisible here but survives forced-colors mode,
     which strips box-shadow and repaints outlines in the system Highlight */
  outline: 3px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--mn-cream), 0 0 0 5px var(--mn-ink);
}

/* — scroll-reveal choreography — */
.mn-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--mn-ease), transform 0.9s var(--mn-ease); }
.mn-reveal.is-in { opacity: 1; transform: none; }
.mn-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--mn-ease), transform 0.8s var(--mn-ease); }
.mn-stagger.is-in > * { opacity: 1; transform: none; }
.mn-stagger.is-in > :nth-child(1) { transition-delay: 0.00s; }
.mn-stagger.is-in > :nth-child(2) { transition-delay: 0.07s; }
.mn-stagger.is-in > :nth-child(3) { transition-delay: 0.14s; }
.mn-stagger.is-in > :nth-child(4) { transition-delay: 0.21s; }
.mn-stagger.is-in > :nth-child(5) { transition-delay: 0.28s; }
.mn-stagger.is-in > :nth-child(6) { transition-delay: 0.35s; }
.mn-stagger.is-in > :nth-child(n+7) { transition-delay: 0.42s; }

/* ── nav ──────────────────────────────────────────────────────── */
.mn-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 clamp(20px, 4vw, 56px);
  height: 66px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}
.mn-nav.is-scrolled {
  background: var(--mn-glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border-bottom-color: var(--mn-hairline);
}
.mn-nav-brand {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600; font-style: italic;
  color: var(--mn-ink); letter-spacing: 0.01em;
  background: none; border: none; cursor: pointer; padding: 6px 2px;
  text-decoration: none;
}
.mn-nav-links { display: flex; align-items: center; gap: 4px; }
.mn-nav-link {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mn-cocoa);
  background: none; border: none; cursor: pointer;
  padding: 10px 13px; border-radius: var(--r-pill);
  transition: color 0.2s, background 0.2s;
  text-decoration: none;
}
.mn-nav-link:hover { color: var(--mn-ink); background: var(--mn-hover-veil); }
.mn-nav-link.is-active { color: var(--mn-ink); }
.mn-nav-link.is-active::after {
  content: ""; display: block; height: 1px; margin: 1px 2px 0;
  background: var(--mn-gold);
}
.mn-nav .mn-btn { min-height: 40px; padding: 9px 22px; font-size: 11px; }

/* cart pill */
.cart-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 18px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mn-ink);
  background: transparent; border: 1px solid var(--mn-hairline); border-radius: var(--r-pill);
  cursor: pointer; text-decoration: none;
  transition: border-color 0.2s, transform 0.25s var(--mn-ease);
}
.cart-pill:hover { border-color: var(--mn-ink); transform: translateY(-1px); }
.cart-pill .cart-count {
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  background: var(--mn-gold); color: #14100B; border-radius: var(--r-pill);
}
.cart-pill .cart-count:empty { display: none; }

/* mobile menu */
.mn-nav-burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--mn-hairline); border-radius: var(--r-pill);
  cursor: pointer;
}
.mn-nav-burger svg { display: block; }
.mn-mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--mn-cream);
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.mn-mobile-menu.is-open { display: flex; }
.mn-mobile-menu .mn-nav-link { font-size: 15px; padding: 14px 22px; }
.mn-mobile-close {
  position: absolute; top: 14px; right: clamp(20px, 4vw, 56px);
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--mn-hairline); border-radius: var(--r-pill);
  cursor: pointer; font-size: 18px;
}
@media (max-width: 940px) {
  .mn-nav-links { display: none; }
  .mn-nav-burger { display: inline-flex; }
}

/* ── footer ───────────────────────────────────────────────────── */
.mn-footer {
  background: var(--mn-dark);
  color: var(--mn-ondark);
  padding: clamp(48px, 7vw, 88px) 0 40px;
  margin-top: clamp(64px, 9vw, 128px);
}
.mn-footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 5vw, 72px);
  padding-bottom: 44px; border-bottom: 1px solid rgba(243, 233, 218, 0.14);
}
.mn-footer-brand {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 600; font-style: italic;
}
.mn-footer-tag { margin-top: 10px; font-size: 14px; color: var(--mn-ondark-dim); max-width: 34ch; }
.mn-footer h4 {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--mn-gold-bright); margin-bottom: 16px;
}
.mn-footer ul { list-style: none; display: grid; gap: 9px; font-size: 14px; }
.mn-footer a { color: var(--mn-ondark-dim); text-decoration: none; transition: color 0.2s; }
.mn-footer a:hover { color: var(--mn-ondark); }
.mn-footer-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 26px; font-size: 12.5px; color: rgba(243, 233, 218, 0.55);
}
/* discreet staff sign-in row (each login portal) */
.mn-staff {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(243, 233, 218, 0.10);
  font-size: 11.5px;
}
.mn-staff-label {
  font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mn-gold-bright); margin-right: 4px;
}
.mn-staff a { color: rgba(243, 233, 218, 0.55); text-decoration: none; transition: color 0.2s; }
.mn-staff a:hover { color: var(--mn-ondark); }
@media (max-width: 760px) { .mn-footer-grid { grid-template-columns: 1fr; } }

/* ── store components (cards, badges, forms) ──────────────────── */
.pm-section { padding: clamp(48px, 7vw, 96px) 0 0; }
.pm-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: clamp(24px, 4vw, 44px); }
.pm-section-head .mn-display { font-size: clamp(30px, 3.6vw, 46px); }

.pm-grid {
  display: grid; gap: clamp(16px, 2.4vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.pm-card {
  position: relative;
  z-index: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.5s var(--mn-ease), box-shadow 0.5s var(--mn-ease);
}
/* a card the cursor just left keeps shrinking on its own layer:
   above the static grid, below the freshly hovered card — sweeping
   across the grid can't make two animating cards fight for the top */
.pm-card.is-leaving { z-index: 5; }
/* whole-card lift toward the viewer — hover-capable pointers only,
   so touch taps never leave a card stuck scaled over the grid */
@media (hover: hover) and (pointer: fine) {
  .pm-card:hover {
    transform: scale(1.35);
    z-index: 6;
    box-shadow: 0 22px 48px rgba(33, 23, 16, 0.24), 0 6px 16px rgba(33, 23, 16, 0.12);
    transition: transform 0.9s var(--mn-ease), box-shadow 0.9s var(--mn-ease);
  }
  /* a card with its order panel open holds still — zooming under the
     customer's cursor while they pick a size reads as a fight */
  .pm-card:has(.pm-card-toggle[aria-expanded="true"]):hover {
    transform: none;
    box-shadow: var(--elev-2);
  }
}
.pm-card-media { aspect-ratio: 4 / 3; background: var(--linen); overflow: hidden; }
/* bias the crop toward the top of the photo: the decorated crown is the
   product — a centered crop was beheading 38 of the 40 cakes */
.pm-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.pm-card-body { padding: 16px 18px 18px; }
.pm-card-name { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.15; }
.pm-card-desc { margin-top: 6px; font-size: 13.5px; color: var(--cocoa); line-height: 1.5; }
.pm-card-gf {
  display: inline-block; margin-top: 8px;
  padding: 3px 9px;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sage);
  border: 1px solid var(--sage);
  border-radius: var(--r-pill);
}
.pm-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pm-price { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; }

/* 44px minimum tap targets on the purchase controls (page styles size
   these by padding only; phones deserve real targets) */
.pm-card-toggle, .pm-pill { min-height: 44px; }

.pm-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--linen); color: var(--mn-gold-deep);
}
.pm-badge-new { background: var(--mn-gold); color: #14100B; }
.pm-badge-berry { background: var(--berry); color: var(--cream); }

.pm-input, .pm-select, .pm-textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit; color: var(--mn-ink);
  background: var(--cream);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color 0.2s;
}
.pm-input:hover, .pm-select:hover, .pm-textarea:hover { border-color: var(--taupe); }
.pm-label {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mn-gold-deep);
}
.pm-field { margin-bottom: var(--sp-4); }
/* cocoa, not taupe: taupe smalls sat at ~3:1 against cream (AA fail) */
.pm-help { margin-top: 5px; font-size: 12.5px; color: var(--cocoa); }
.pm-error { margin-top: 5px; font-size: 12.5px; color: var(--berry); }

/* ── catalog filter row + sort control ────────────────────────── */
/* the pills stay a filter; the sort is a separate, right-aligned pill.
   .pm-filter-row carries the vertical rhythm the pills used to own, so the
   inner .pm-filter margin is zeroed. Both tuck into one line and wrap on
   narrow. Tokens (--mn-*) auto-remap under html[data-theme="dark"]; the
   global reduced-motion block neutralises the transition. */
.pm-filter-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin: clamp(28px, 4vw, 44px) 0 clamp(20px, 3vw, 32px);
}
.pm-filter-row .pm-filter { margin: 0; }
.pm-sort-wrap {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-left: auto;
}
.pm-sort-label {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mn-cocoa); white-space: nowrap;
}
.pm-select.pm-sort {
  width: auto; min-height: 44px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 12px; letter-spacing: 0.02em;
  color: var(--mn-cocoa);
  background: transparent;
  border: 1px solid var(--mn-hairline);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.pm-select.pm-sort:hover { color: var(--mn-ink); border-color: var(--mn-ink); }
.pm-select.pm-sort:focus-visible { border-radius: var(--r-pill); }
/* mobile: drop the sort onto its own left-aligned line so its box never sits
   under the fixed .pm-float-cart (bottom-right). A right-aligned sort passes
   beneath the FAB at some scroll offsets and swallows taps; on its own line at
   the left the two boxes never intersect. Desktop keeps the inline sort. */
@media (max-width: 560px) {
  .pm-sort-wrap { flex-basis: 100%; margin-left: 0; }
}

/* toast */
.pm-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 100;
  transform: translate(-50%, 20px);
  padding: 12px 22px;
  font-size: 14px; font-weight: 500;
  background: var(--mn-dark); color: var(--mn-ondark);
  border-radius: var(--r-pill); box-shadow: var(--elev-2);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--mn-ease), transform 0.3s var(--mn-ease);
}
.pm-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
/* a toast carrying an action ("Added — Checkout") must be clickable —
   but only while visible; a faded toast must never intercept taps */
.pm-toast.is-shown.has-action { pointer-events: auto; }
.pm-toast a {
  margin-left: 10px;
  color: var(--mn-gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 179, 102, 0.5);
}
.pm-toast a:hover { color: var(--mn-ondark); border-color: var(--mn-ondark); }

/* ── floating cart (frosted-glass corner widget) ──────────────── */
.pm-float-cart {
  position: fixed; right: 22px; bottom: 22px; z-index: 55;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px;
  color: var(--mn-ink); text-decoration: none;
  background: rgba(253, 249, 242, 0.58);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 19px;
  box-shadow:
    0 0 0 0.5px rgba(33, 23, 16, 0.14),
    0 14px 36px rgba(33, 23, 16, 0.16),
    0 3px 10px rgba(33, 23, 16, 0.08);
  opacity: 0; transform: translateY(14px) scale(0.96);
  transition: opacity 0.7s var(--mn-ease), transform 0.7s var(--mn-ease),
              box-shadow 0.35s var(--mn-ease), background-color 0.35s var(--mn-ease);
}
.pm-float-cart.is-mounted { opacity: 1; transform: none; }
.pm-float-cart:hover {
  background: rgba(255, 252, 246, 0.78);
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 0 0 0.5px rgba(33, 23, 16, 0.16),
    0 20px 46px rgba(33, 23, 16, 0.2),
    0 4px 12px rgba(33, 23, 16, 0.1);
}
.pm-float-cart:active { transform: translateY(-1px) scale(0.99); transition-duration: 0.15s; }
.pm-float-cart:focus-visible { outline: 2px solid var(--mn-gold-deep); outline-offset: 3px; }
.pm-float-cart-icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: var(--mn-gold-deep);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 13px;
  box-shadow: 0 1px 3px rgba(33, 23, 16, 0.08);
}
.pm-float-cart-badge {
  position: absolute; top: -7px; right: -7px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--cream); background: var(--berry);
  border-radius: var(--r-pill);
  box-shadow: 0 1px 4px rgba(33, 23, 16, 0.25);
}
.pm-float-cart-badge:empty { display: none; }
.pm-float-cart-text { display: flex; flex-direction: column; gap: 1px; padding-right: 4px; }
.pm-float-cart-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mn-gold-deep);
}
.pm-float-cart-sub { font-size: 14.5px; font-weight: 600; }
@keyframes pm-cart-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.pm-float-cart.is-bumped .pm-float-cart-icon { animation: pm-cart-bump 0.5s var(--mn-ease); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pm-float-cart { background: rgba(253, 249, 242, 0.94); }
}
@media (max-width: 560px) {
  .pm-float-cart { right: 14px; bottom: 14px; padding: 10px; border-radius: 16px; }
  .pm-float-cart-text { display: none; }
}
@media print {
  .pm-float-cart { display: none; }
}

/* skip link */
.pm-skip {
  position: absolute; left: 16px; top: -48px; z-index: 90;
  padding: 10px 18px;
  background: var(--mn-dark); color: var(--mn-ondark);
  border-radius: var(--r-md); text-decoration: none; font-size: 13px;
  transition: top 0.2s;
}
.pm-skip:focus { top: 12px; }

/* ── motion safety ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
  .mn-reveal, .mn-stagger > * { opacity: 1; transform: none; }
  .pm-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   APRÈS-SERVICE — the dark theme (working name; see naming notes)
   The shop after close: warm espresso and dark-chocolate surfaces,
   cream type, candlelit gold. Product photos shot on white stay as
   they are and read as lit vitrine windows against the dark room —
   framed, not fought. html[data-theme] is stamped pre-paint by a
   tiny inline head script (cookie pm_theme, else system preference)
   so there is no flash; the toggle lives in the nav via site.js.
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  /* base palette re-map */
  --paper:    #241811;
  --linen:    #2E2015;
  --shell:    #382817;
  --cream:    #271B13;
  --ink:      #F3E9DA;
  --cocoa:    #C9B69C;
  --taupe:    #97836B;
  --gold:     #C89F56;
  --gold-lt:  #E2C57F;
  --berry:    #D97B8E;
  --sage:     #8FAE89;
  --line:     rgba(226, 197, 127, 0.16);
  --shadow:   0 24px 70px rgba(0, 0, 0, 0.55);

  /* maison editorial re-map */
  --mn-cream:      #1F140D;
  --mn-cream-2:    #281A11;
  --mn-dark:       #150C06;                  /* footer sinks deeper than the room */
  --mn-dark-2:     #1D130C;
  --mn-ink:        #F3E9DA;
  --mn-cocoa:      #C9B69C;
  --mn-gold-deep:  #D8B366;                  /* labels: candlelit, not muddy */
  --mn-hairline:   rgba(243, 233, 218, 0.15);

  --mn-body-dim:   #C4B098;
  --mn-hover-veil: rgba(243, 233, 218, 0.07);
  --mn-glass:      rgba(26, 16, 10, 0.78);

  --elev-1: 0 4px 14px rgba(0, 0, 0, 0.35);
  --elev-2: 0 12px 30px rgba(0, 0, 0, 0.45);
  --elev-3: 0 24px 70px rgba(0, 0, 0, 0.55);
  --focus-ring: 0 0 0 3px rgba(216, 179, 102, 0.55), 0 0 0 5px rgba(0, 0, 0, 0.5);

  /* white-background product shots: a touch of warmth so the
     "vitrine glow" sits in the room instead of glaring */
  --mn-photo-filter: brightness(0.96) saturate(1.02);

  color-scheme: dark;
}

/* product photography as lit vitrine windows */
html[data-theme="dark"] .pm-card-media img,
html[data-theme="dark"] .pm-door img,
html[data-theme="dark"] .pm-hero-arch img {
  filter: var(--mn-photo-filter);
}
html[data-theme="dark"] .pm-card-media,
html[data-theme="dark"] .pm-hero-arch {
  box-shadow: inset 0 0 0 1px rgba(243, 233, 218, 0.08);
}

/* the toast flips to candlelight so it still pops from the room */
html[data-theme="dark"] .pm-toast {
  background: var(--mn-ondark);
  color: #211710;
}
/* literals, not tokens: the dark block remaps --mn-gold-deep to the
   bright gold, which vanishes on this cream toast */
html[data-theme="dark"] .pm-toast a {
  color: #7A5C24;
  border-color: rgba(122, 92, 36, 0.45);
}
html[data-theme="dark"] .pm-toast a:hover {
  color: #211710;
  border-color: #211710;
}

/* frosted corner cart: dark glass */
html[data-theme="dark"] .pm-float-cart {
  color: var(--mn-ink);
  background: rgba(31, 20, 13, 0.66);
  border-color: rgba(243, 233, 218, 0.18);
  box-shadow:
    0 0 0 0.5px rgba(243, 233, 218, 0.12),
    0 14px 36px rgba(0, 0, 0, 0.5),
    0 3px 10px rgba(0, 0, 0, 0.3);
}

/* gold buttons keep their dark-on-gold text in both modes; ghost
   buttons and hairlines inherit from the re-mapped tokens above */

/* ── theme toggle (injected into .mn-nav by site.js) ──────────── */
.mn-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  background: none; border: 1px solid var(--mn-hairline); border-radius: var(--r-pill);
  color: var(--mn-cocoa);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.25s var(--mn-ease);
}
.mn-theme-toggle:hover { color: var(--mn-ink); border-color: var(--mn-ink); transform: translateY(-1px); }
.mn-theme-toggle svg { display: block; }
.mn-theme-toggle .tt-sun { display: none; }
.mn-theme-toggle .tt-moon { display: block; }
html[data-theme="dark"] .mn-theme-toggle .tt-sun { display: block; }
html[data-theme="dark"] .mn-theme-toggle .tt-moon { display: none; }

/* ── la vitrine vivante — recent-orders ticker (working name) ──── */
/* Freed's-style corner note: real recent orders (never names), plus
   owner-curated lines. Injected by site.js; decorative for SR users
   (aria-hidden) and capped per session so it stays charming. */
.pm-ticker {
  position: fixed; left: 22px; bottom: 22px; z-index: 54;
  max-width: min(340px, calc(100vw - 44px));
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px 15px 18px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 2px solid var(--mn-gold);
  border-radius: var(--r-md) var(--r-lg) var(--r-lg) var(--r-md);
  box-shadow: var(--elev-2);
  opacity: 0; transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.6s var(--mn-ease), transform 0.6s var(--mn-ease);
}
.pm-ticker.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.pm-ticker-when {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mn-gold-deep);
}
.pm-ticker-text {
  margin-top: 3px;
  font-family: var(--font-display);
  font-style: italic; font-size: 16px; line-height: 1.35;
  color: var(--mn-ink);
}
.pm-ticker-close {
  flex: none; margin: -4px -6px 0 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--r-pill);
  color: var(--taupe); font-size: 14px; line-height: 1;
  cursor: pointer;
}
.pm-ticker-close:hover { color: var(--mn-ink); background: var(--mn-hover-veil); }
@media (max-width: 700px) {
  .pm-ticker { left: 14px; bottom: 14px; }
}
/* keep the ticker clear of the compact floating cart's corner */
@media (max-width: 560px) {
  .pm-ticker { bottom: 82px; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-ticker { transform: none; transition: opacity 0.4s; }
}

/* ── la fiche — click-to-expand item detail ───────────────────── */
/* Click a catalog card (photo or name): the photo grows from the
   card rect to the left half of the page (top half on mobile) and
   the maison's notes — long summary, tasting notes, ordering —
   settle on the other half. One overlay per page, driven by
   PM.expand in site.js; the grow/return is animated with inline
   top/left/width/height set by JS while .is-anim is present. */
html.pm-expand-lock { overflow: hidden; }

.pm-expand { position: fixed; inset: 0; z-index: 80; }
.pm-expand [hidden] { display: none !important; }

.pm-expand-backdrop {
  position: absolute; inset: 0;
  background: rgba(29, 19, 12, 0.44);
  opacity: 0;
  transition: opacity 0.5s var(--mn-ease);
}
.pm-expand.is-open .pm-expand-backdrop { opacity: 1; }

.pm-expand-media {
  position: absolute; left: 0; top: 0;
  width: 50%; height: 100%;
  margin: 0; overflow: hidden;
  background: var(--linen);
}
.pm-expand-media.is-anim {
  transition: top 0.65s var(--mn-ease), left 0.65s var(--mn-ease),
              width 0.65s var(--mn-ease), height 0.65s var(--mn-ease),
              border-radius 0.65s var(--mn-ease);
}
.pm-expand-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
/* plated dishes sit centered in their photos — the cake-crown top bias
   beheads them; site.js toggles the modifier from the page's section opts */
.pm-expand--food .pm-expand-media img { object-position: 50% 50%; }
.pm-expand-media.is-empty { display: flex; align-items: center; justify-content: center; }
.pm-expand-media.is-empty span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(64px, 10vw, 140px);
  color: var(--taupe);
}
/* storefront empty-cover note — sits under the monogram; --taupe remaps
   for dark. The aspect box reserves height, so no layout shift. */
.pm-card-media.is-empty .pm-empty-note {
  margin-top: 10px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 10.5px;
  font-variant: small-caps;
  letter-spacing: 0.14em;
  color: var(--cocoa);
}

.pm-expand-panel {
  position: absolute; right: 0; top: 0;
  width: 50%; height: 100%;
  background: var(--mn-cream);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(28px, 5vh, 72px) clamp(24px, 4.5vw, 72px) clamp(28px, 4vh, 48px);
  opacity: 0; transform: translateX(28px);
  transition: opacity 0.55s var(--mn-ease) 0.12s, transform 0.55s var(--mn-ease) 0.12s;
}
.pm-expand.is-open .pm-expand-panel { opacity: 1; transform: none; }

.pm-expand-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  color: var(--mn-ink);
  background: var(--mn-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--mn-hairline); border-radius: var(--r-pill);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s var(--mn-ease) 0.2s, transform 0.25s var(--mn-ease);
}
.pm-expand.is-open .pm-expand-close { opacity: 1; }
.pm-expand-close:hover { transform: scale(1.06); }

.pm-expand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1.05; letter-spacing: -0.01em;
  text-wrap: balance;
  margin-top: var(--sp-3);
}
.pm-expand-desc {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--cocoa);
  max-width: 46ch;
}
.pm-expand-story {
  margin-top: var(--sp-4);
  font-size: 15px; line-height: 1.75;
  color: var(--mn-body-dim);
  max-width: 52ch;
}
.pm-expand-notes {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-5); padding: 0;
}
.pm-expand-notes li {
  padding: 6px 14px;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mn-gold-deep);
  border: 1px solid var(--mn-hairline);
  border-radius: var(--r-pill);
}
.pm-expand-pairing {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-style: italic; font-size: 16px;
  color: var(--mn-gold-deep);
}
.pm-expand-order {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--mn-hairline);
  display: grid; gap: var(--sp-3);
}
.pm-expand-price { font-size: 20px; font-weight: 600; letter-spacing: 0.02em; }
.pm-expand-row { display: flex; gap: var(--sp-2); }
.pm-expand-row > div { flex: 1 1 auto; min-width: 0; }
.pm-expand-row > .pm-expand-qty { flex: 0 0 96px; }
.pm-expand-order .mn-btn { width: 100%; }
.pm-expand-lead {
  font-size: 12px; letter-spacing: 0.03em;
  color: var(--cocoa);
  text-align: center;
}

/* ── fiche allergen block (Contains line + sage GF chip + disclaimer) ─ */
.pm-allergens {
  margin-top: var(--sp-5);
  display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--sp-2) var(--sp-3);
}
.pm-allergen-contains {
  margin: 0;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cocoa);
}
.pm-allergen-chip {
  display: inline-block;
  padding: 4px 12px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sage);
  border: 1px solid var(--sage);
  border-radius: var(--r-pill);
  background: transparent;
}
.pm-allergens .pm-allergen-note {
  flex-basis: 100%;
  margin-top: var(--sp-3); margin-bottom: 0;
  text-align: left;
  font-size: 11.5px; line-height: 1.6;
  color: var(--taupe);
}
/* untagged product: the disclaimer is the only child, so its top margin would
   stack on the container's margin-top — zero it so tagged and untagged fiches
   keep the same gap above the allergen block. */
.pm-allergens .pm-allergen-note:first-child { margin-top: 0; }

/* ── fiche image gallery (multi-photo products) ────────────────── */
/* All chrome lives INSIDE the single .pm-expand-media FLIP figure and
   stays hidden while the figure is mid-flight (.is-anim). It fades in a
   beat after the open flight settles and hides again before the return.
   Frosted controls reuse the same glass recipe as .pm-expand-close. */
.pmx-hero { transition: opacity 0.2s var(--mn-ease); }

.pmx-gallery-ui {
  position: absolute; inset: 0; z-index: 2;
  opacity: 0; pointer-events: none;               /* click-through: swipe reaches the hero */
  transition: opacity 0.4s var(--mn-ease);
}
/* the interactive chrome is inert until the flight settles */
.pmx-nav, .pmx-thumb { pointer-events: none; }
.pm-expand.is-open .pm-expand-media:not(.is-anim) .pmx-gallery-ui {
  opacity: 1;
  transition: opacity 0.4s var(--mn-ease) 0.15s;  /* appear after the flight settles */
}
.pm-expand.is-open .pm-expand-media:not(.is-anim) .pmx-nav,
.pm-expand.is-open .pm-expand-media:not(.is-anim) .pmx-thumb { pointer-events: auto; }

.pmx-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--mn-ink);
  background: var(--mn-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--mn-hairline); border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform 0.25s var(--mn-ease), opacity 0.2s var(--mn-ease);
}
.pmx-prev { left: 16px; }
.pmx-next { right: 16px; }
.pmx-nav:hover { transform: translateY(-50%) scale(1.06); }
.pmx-nav svg { display: block; }
.pmx-nav:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.pmx-counter {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  padding: 5px 13px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; font-variant: all-small-caps;
  color: var(--mn-ink);
  background: var(--mn-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--mn-hairline); border-radius: var(--r-pill);
}

.pmx-thumbs {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: flex-start; gap: 8px;
  padding: 12px; max-height: 64px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: linear-gradient(to top, rgba(20, 12, 6, 0.52), rgba(20, 12, 6, 0));
}
/* centered while the thumbs fit, but every thumb stays reachable once the rail
   scrolls: auto margins collapse to 0 under overflow, so the leftmost thumbs
   are no longer stranded off the scroll origin (justify-content:center clips
   them in an overflowing flex row). */
.pmx-thumbs > :first-child { margin-left: auto; }
.pmx-thumbs > :last-child { margin-right: auto; }
.pmx-thumb {
  flex: 0 0 auto;
  width: 44px; height: 40px; padding: 0;
  background: none; cursor: pointer;
  border: 1px solid rgba(243, 233, 218, 0.5); border-radius: var(--r-sm);
  overflow: hidden; opacity: 0.72;
  transition: opacity 0.2s var(--mn-ease), border-color 0.2s var(--mn-ease);
}
.pmx-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.pmx-thumb:hover { opacity: 1; }
.pmx-thumb[aria-current="true"] {
  opacity: 1;
  border-color: var(--mn-gold-bright);
  box-shadow: 0 0 0 1px var(--mn-gold-bright);
}
.pmx-thumb:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* dark: glass + hairline tokens already re-map; keep the thumb chrome legible */
html[data-theme="dark"] .pmx-thumbs {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
html[data-theme="dark"] .pmx-thumb { border-color: rgba(243, 233, 218, 0.4); }

/* reduced motion: the chrome is simply present — no dip on the hero, and no
   cross-fade on the gallery UI. Zero the whole transition (property none), not
   just the delay, so the UI snaps in with no residual opacity fade. */
@media (prefers-reduced-motion: reduce) {
  .pmx-hero { transition: none; }
  .pmx-gallery-ui,
  .pm-expand.is-open .pm-expand-media:not(.is-anim) .pmx-gallery-ui { transition: none; }
}

/* very narrow screens: drop the thumb rail — arrows + swipe still page */
@media (max-width: 360px) {
  .pmx-thumbs { display: none; }
}

/* clickable card affordances (catalog pages hand clicks to PM.expand) */
.pm-card-media[role="button"] { cursor: pointer; }
.pm-card-name { cursor: pointer; }

/* serves context riding the card price line ("From $46.99 · serves 7-8") */
.pm-price-serves {
  margin-left: 6px;
  font-weight: 400; font-size: 12.5px;
  color: var(--cocoa);
  white-space: nowrap;
}

/* reassurance strip under catalog headers */
.pm-reassure {
  margin-top: var(--sp-5);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cocoa);
}
.pm-reassure a { color: var(--mn-gold-deep); text-decoration: none; }
.pm-reassure a:hover { color: var(--mn-ink); }

/* allergen note under catalog grids */
.pm-allergen-note {
  margin-top: var(--sp-6);
  font-size: 12.5px;
  text-align: center;
  color: var(--cocoa);
}
.pm-allergen-note a { color: var(--mn-gold-deep); }

/* gold call button appended to the mobile menu */
.mn-mobile-menu .pm-menu-call { margin-top: var(--sp-4); }

html[data-theme="dark"] .pm-expand-backdrop { background: rgba(0, 0, 0, 0.58); }
html[data-theme="dark"] .pm-expand-media img { filter: var(--mn-photo-filter); }
html[data-theme="dark"] .pm-expand-media { box-shadow: inset 0 0 0 1px rgba(243, 233, 218, 0.08); }

@media (max-width: 860px) {
  .pm-expand-media { width: 100%; height: 44%; }
  .pm-expand-panel { width: 100%; height: 56%; top: auto; bottom: 0; transform: translateY(28px); }
  .pm-expand.is-open .pm-expand-panel { transform: none; }
}

/* ── announcement banner (owner-set, above the nav) ───────────── */
.pm-banner {
  position: relative; z-index: 41;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 9px clamp(16px, 4vw, 56px);
  background: var(--mn-dark);
  color: var(--mn-ondark);
  font-size: 12.5px; letter-spacing: 0.04em;
  text-align: center;
}
.pm-banner b { color: var(--mn-gold-bright); font-weight: 500; }
.pm-banner-close {
  position: absolute; right: clamp(8px, 2vw, 24px);
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--r-pill);
  color: var(--mn-ondark-dim); font-size: 14px; cursor: pointer;
}
.pm-banner-close:hover { color: var(--mn-ondark); }