/* ============================================================================
   MANSUR ENTERPRISES — STOREFRONT DESIGN SYSTEM  "STUDIO"  (v3, 2026-07)
   ----------------------------------------------------------------------------
   A complete, from-scratch premium redesign of the customer-facing storefront.
   Replaces store.css + store-premium.css + store-enhance.css + mn-soft-ui.css
   on the 7 customer pages (home / shop / product / cart / wishlist / account /
   info).  store.css stays on disk untouched because the STAFF page manage.html
   still uses it (.mg-* classes).

   PRESENTATION ONLY. Every selector below is a hook that the existing
   storefront JavaScript already emits — no logic, data, routing, Firebase or
   markup contract was changed. The admin "Appearance" engine keeps full
   control through the same CSS custom properties it always injected
   (--cat-cols-*, --prod-cols-*, --hero-*, --card-*, --announce-* …).

   Design language
   ---------------
   · Editorial whitespace, hairline rules, no decorative chrome.
   · Ink-black type on warm paper; the brand ember (#EA580C) used as a precise
     accent, never as wallpaper.
   · One elevation step. Motion is short, eased and always transform/opacity.
   · Numerals are tabular so price columns align like a spec sheet.
   ========================================================================== */

/* ── 1. TOKENS ────────────────────────────────────────────────────────── */
:root {
  /* type — Figtree carries the display voice (it holds up at 900 weight and has
     open, confident letterforms), Inter does the reading, and Instrument Serif
     appears exactly once as an italic accent so the page has a signature. */
  --disp: 'Figtree', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ink + paper */
  --ink: #0A0C10;
  --ink-2: #414954;
  --muted: #7A828E;
  --faint: #A2A9B4;
  --paper: #FFFFFF;
  --canvas: #FFFFFF;
  --surface: #FFFFFF;
  --tint: #F4F4F1;
  --tint-2: #E9E9E4;
  --line: rgba(10, 12, 16, .10);
  --line-2: rgba(10, 12, 16, .055);
  --line-3: rgba(10, 12, 16, .16);

  /* brand ember */
  --accent: #EA580C;
  --accent-600: #D9500A;
  --accent-700: #C2410C;
  --accent-soft: #FFF4EC;
  --accent-ring: rgba(234, 88, 12, .22);

  /* legacy aliases — referenced by inline styles inside the storefront JS */
  --orange: var(--accent);
  --orange-700: var(--accent-700);

  /* semantic */
  --ok: #0E9F6E;
  --ok-soft: #ECFDF5;
  --warn: #B45309;
  --warn-soft: #FFFBEB;
  --info: #2563EB;
  --info-soft: #EFF6FF;
  --danger: #DC2626;
  --danger-soft: #FEF2F2;
  --wa: #1FA855;

  /* geometry */
  --r: 16px;
  --r-sm: 11px;
  --r-lg: 22px;
  --r-pill: 999px;
  --tile-radius: 16px;
  --hero-radius: 22px;
  --wrap-max: 1280px;
  --wrap-pad: 22px;
  --sec-gap: 76px;
  --grid-gap: 24px;
  --card-pad: 15px;

  /* elevation */
  --sh-sm: 0 1px 2px rgba(10, 12, 16, .04);
  --sh-1: 0 1px 2px rgba(10, 12, 16, .04), 0 10px 26px -16px rgba(10, 12, 16, .18);
  --sh-2: 0 2px 4px rgba(10, 12, 16, .05), 0 20px 44px -22px rgba(10, 12, 16, .26);
  --sh-pop: 0 24px 70px -28px rgba(10, 12, 16, .45);
  --sh-ink: 0 8px 20px -10px rgba(10, 12, 16, .5);
  --sh-accent: 0 8px 22px -10px rgba(234, 88, 12, .55);

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur: .26s;

  /* appearance-engine driven (admin panel) */
  --cat-cols-m: 3;  --cat-cols-d: 6;
  --brand-cols-m: 4; --brand-cols-d: 9;
  --coll-cols-m: 1;  --coll-cols-d: 3;
  --prod-cols-m: 2;  --prod-cols-d: 4;
  --card-img-aspect: 1/1;
  --card-title-lines: 2;
  --card-title-size: .93rem;
  --card-title-align: left;
  --price-size: 1.12rem;
  --sec-title-size: 2.35rem;
  --tile-label: .8rem;
  --base-font: 15px;
  --prod-fit: contain;
  --coll-fit: cover;
  --hero-overlay: 0;
  --hero-text: #FFFFFF;
  --hero-align: flex-start;
  --hero-text-align: left;
  --announce-bg: #0A0C10;
  --announce-text: #FFFFFF;

  /* chrome metrics */
  --hd-h: 66px;
  --bot-h: 60px;
}

/* ── 2. RESET + BASE ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--canvas);
}

body {
  font-family: var(--body);
  font-size: var(--base-font);
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  overflow-x: hidden;
  min-height: 100vh;
  padding-bottom: 0;
}

/* ── scroll lock while a panel is open (drawer / quick-view / lightbox) ──
   IMPORTANT: body must NOT become position:fixed here. store-core's lock
   observer reads window.scrollY *after* the .mn-lock class lands; pinning the
   body collapses the document first, so that read returns 0 and the page
   snaps to the top — which is exactly why Quick View "jumped to the top and
   didn't open in place". Locking overflow on html+body holds the scroll
   position instead, so a panel always opens exactly where the user is. */
body.mn-lock { overflow: hidden; }
html:has(body.mn-lock) { overflow: hidden; overscroll-behavior: none; }

img, svg, video { display: block; max-width: 100%; }
img { border-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5 { font-family: var(--disp); font-weight: 800; letter-spacing: -.022em; line-height: 1.14; color: var(--ink); }
b, strong { font-weight: 700; }
s { color: var(--faint); }
small { font-size: .82em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(234, 88, 12, .18); }

/* tabular numerals everywhere a figure is shown */
.now, .mrp, .amt, .mn-count, .mn-dl-ct, .ct, .cnt, .cl-price, .cl-pp, .bill-row span,
.mn-summary .row span, .qb-amt, .od-amt, .mn-step-inp, .mn-bc-cnt {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.mn-wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

main { padding-bottom: 56px; }
main.mn-wrap { padding-bottom: 56px; }

/* FULL-WIDTH BAND — a plain block child of <main>. It fills the viewport width
   with no 100vw / negative-margin arithmetic, so it stays put at every browser
   zoom level (the vw approach mis-measures against the scrollbar and pushed the
   page sideways at 75%/90%/110%). Content is held to the grid by an inner
   .mn-wrap, and the edge padding is a % of the BAND, never of the viewport. */
.mn-band { width: 100%; }

/* thin editorial eyebrow used across the new sections */
.mn-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--disp);
  font-size: .69rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-700);
}
.mn-eyebrow::before {
  content: ''; width: 18px; height: 1.5px; border-radius: 2px;
  background: var(--accent); opacity: .9;
}

.mn-rule { height: 1px; background: var(--line-2); border: 0; }

/* slim, unobtrusive scrollbars (desktop) */
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: rgba(10, 12, 16, .2) transparent; }
  *::-webkit-scrollbar { width: 11px; height: 11px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: rgba(10, 12, 16, .18);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 99px;
  }
  *::-webkit-scrollbar-thumb:hover { background: rgba(10, 12, 16, .32); background-clip: content-box; }
}

/* skeleton plates that stand in for a real panel (cart / account) */
.mn-skel-panel {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}

/* ── 3. BUTTONS ──────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--disp);
  font-size: .875rem; font-weight: 700; letter-spacing: -.005em;
  padding: 0 18px; height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--tint);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform .14s var(--ease), opacity var(--dur) var(--ease);
}
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--sh-accent);
}
.btn-primary:hover { background: var(--accent-600); box-shadow: 0 10px 26px -10px rgba(234, 88, 12, .62); }

.btn-ink { background: var(--ink); color: #fff; box-shadow: var(--sh-ink); }
.btn-ink:hover { background: #16191F; }

.btn-ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-3);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--paper); }

.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 8px 22px -12px rgba(31, 168, 85, .7); }
.btn-wa:hover { background: #1B9A4D; }

.btn-sm { height: 34px; padding: 0 13px; font-size: .8rem; border-radius: 9px; }
.btn-lg { height: 50px; padding: 0 26px; font-size: .95rem; border-radius: 13px; }
.btn-block { display: flex; width: 100%; }
.btn-icon { width: 42px; padding: 0; flex: 0 0 auto; }
.btn-lg.btn-icon { width: 50px; }
.btn-icon .ic { font-size: 1.05rem; line-height: 1; }

/* ── 4. PILLS + CHIPS ────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--disp);
  font-size: .68rem; font-weight: 800; letter-spacing: .03em;
  padding: 4px 9px; border-radius: 7px;
  background: var(--tint); color: var(--ink-2);
  border: 1px solid var(--line-2);
  white-space: nowrap;
}
.pill-ok { background: var(--ok-soft); color: #06795A; border-color: rgba(14, 159, 110, .2); }
.pill-warn { background: var(--warn-soft); color: #92400E; border-color: rgba(180, 83, 9, .18); }
.pill-info { background: var(--info-soft); color: #1D4ED8; border-color: rgba(37, 99, 235, .16); }
.pill-gray { background: var(--tint); color: var(--muted); }
.pill-orange { background: var(--accent-soft); color: var(--accent-700); border-color: rgba(234, 88, 12, .2); }

/* ── 5. FIELDS ───────────────────────────────────────────────────────── */
.mn-field { margin-bottom: 14px; }
.mn-field label {
  display: block;
  font-family: var(--disp);
  font-size: .73rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.mn-field input,
.mn-field textarea,
.mn-field select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: var(--paper);
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  font-size: .93rem;
  color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.mn-field textarea { height: auto; min-height: 84px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.mn-field input::placeholder, .mn-field textarea::placeholder { color: var(--faint); }
.mn-field input:focus, .mn-field textarea:focus, .mn-field select:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 12, 16, .07);
}
.mn-field.bad input, .mn-field.bad textarea { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .1); }
.mn-prow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── 6. ANNOUNCEMENT STRIP ───────────────────────────────────────────── */
.mn-announce {
  position: relative;
  overflow: hidden;
  background: var(--announce-bg);
  color: var(--announce-text);
  font-size: .77rem; font-weight: 600; letter-spacing: .02em;
  height: 34px;
  display: flex; align-items: center;
}
.mn-announce-track { display: flex; align-items: center; gap: 60px; white-space: nowrap; padding: 0 var(--wrap-pad); }
.mn-announce-seg { flex: 0 0 auto; }
.mn-announce-seg.dup { display: none; }
.mn-announce.mn-announce-scroll .mn-announce-track {
  padding: 0;
  animation: mnMarquee 18s linear infinite;
}
.mn-announce.mn-announce-scroll .mn-announce-seg.dup { display: block; }
@keyframes mnMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 7. HEADER ───────────────────────────────────────────────────────── */
.mn-hd {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mn-hd.mn-scrolled {
  background: rgba(255, 255, 255, .95);
  border-bottom-color: var(--line-2);
}

/* Bar order: burger · wordmark · nav  |  search (fills)  |  account · cart.
   The search takes the slack in the middle so the two ends stay anchored. */
.mn-hd-bar {
  height: var(--hd-h);
  display: flex; align-items: center; gap: 10px;
}
.mn-hd-bar > .mn-logo { margin-right: 6px; }

/* desktop primary nav — quiet text links, ember underline on hover/active */
.mn-hd-nav { display: none; align-items: center; gap: 2px; flex: 0 0 auto; }
.mn-hd-nav a {
  position: relative;
  padding: 8px 12px;
  font-family: var(--disp);
  font-size: .845rem; font-weight: 600; letter-spacing: -.008em;
  color: var(--ink-2);
  border-radius: 8px;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.mn-hd-nav a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 1.5px; border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .28s var(--ease-out);
}
.mn-hd-nav a:hover { color: var(--ink); }
.mn-hd-nav a:hover::after { transform: scaleX(1); }
body.mn-on-home .mn-hd-nav a[data-nav="home"],
body.mn-on-shop .mn-hd-nav a[data-nav="shop"] { color: var(--ink); font-weight: 700; }
body.mn-on-home .mn-hd-nav a[data-nav="home"]::after,
body.mn-on-shop .mn-hd-nav a[data-nav="shop"]::after { transform: scaleX(1); }

.mn-burger {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 11px;
  color: var(--ink);
  transition: background .18s var(--ease);
}
.mn-burger:hover { background: var(--tint); }
.mn-burger svg { width: 20px; height: 20px; }

.mn-logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 0; }
/* flat brand mark — no plate, no ring, no rounding around the logo artwork */
.mn-logo img {
  width: 34px; height: 34px;
  border-radius: 0;
  object-fit: contain;
  background: none;
  box-shadow: none;
}
.mn-logo span { display: flex; flex-direction: column; line-height: 1.02; min-width: 0; }
.mn-logo b {
  font-family: var(--disp);
  font-size: clamp(.9rem, 1.35vw, 1.06rem); font-weight: 800; letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.mn-logo b span { display: inline; color: var(--accent); }
.mn-logo small {
  font-size: .625rem; font-weight: 600; letter-spacing: .085em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* desktop search — quiet until focused, then it becomes the page's centre */
.mn-hd-search {
  flex: 1 1 auto;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  display: none;
  align-items: center; gap: 9px;
  height: 40px;
  padding: 0 13px;
  background: var(--tint);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.mn-hd-search:focus-within {
  background: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 12, 16, .06);
}
.mn-hd-search svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--muted); }
.mn-hd-search input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: 0;
  font-size: .88rem;
}
.mn-hd-search input::placeholder { color: var(--faint); }

.mn-search-clear {
  display: none;
  width: 24px; height: 24px; flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--tint-2);
  color: var(--ink-2);
  font-size: .7rem; line-height: 1;
}
.mn-search-clear.show { display: grid; }
.mn-search-clear:hover { background: var(--ink); color: #fff; }
.mn-search-clear svg { width: 11px; height: 11px; }

.mn-hd-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: 0 0 auto; }
.mn-icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  color: var(--ink);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.mn-icon-btn:hover { background: var(--tint); }
.mn-icon-btn svg { width: 19px; height: 19px; }

.mn-count {
  position: absolute; top: 3px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  font-family: var(--disp);
  font-size: .62rem; font-weight: 800;
  box-shadow: 0 0 0 2px var(--paper);
  transition: transform .3s var(--spring), opacity .2s var(--ease);
}
.mn-count.is-zero { opacity: 0; transform: scale(.4); }
.mn-count.pop { animation: mnPop .42s var(--spring); }
@keyframes mnPop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* mobile expanding search row */
.mn-msearch {
  align-items: center; gap: 9px;
  padding: 0 0 12px;
  position: relative;
}
.mn-msearch input {
  flex: 1; min-width: 0; height: 44px;
  padding: 0 14px;
  background: var(--tint);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: .9rem; outline: 0;
}
.mn-msearch input:focus { background: var(--paper); border-color: var(--ink); }
.mn-msearch .mn-search-clear { position: absolute; right: 92px; }

/* legacy desktop category nav (currently disabled in JS — styled for safety) */
.mn-catnav { border-top: 1px solid var(--line-2); background: var(--paper); }
.mn-catnav-row { display: flex; gap: 22px; overflow-x: auto; padding: 11px 0; scrollbar-width: none; }
.mn-catnav-row::-webkit-scrollbar { display: none; }
.mn-catnav-row a {
  font-size: .82rem; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.mn-catnav-row a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ── 8. TYPE-AHEAD SUGGESTIONS ───────────────────────────────────────── */
.mn-suggest {
  position: absolute; top: calc(100% + 9px); left: 0; right: 0;
  z-index: 960;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-pop);
  overflow: hidden auto;
  max-height: 62vh;
  -webkit-overflow-scrolling: touch;
  animation: mnFadeDown .18s var(--ease-out);
}
@keyframes mnFadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mn-sug-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line-2);
  transition: background .14s var(--ease);
}
.mn-sug-item:hover { background: var(--tint); }
.mn-sug-item img {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 9px; object-fit: contain;
  background: var(--tint);
}
.mn-sug-tx { display: flex; flex-direction: column; min-width: 0; }
.mn-sug-tx b {
  font-size: .855rem; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mn-sug-tx small { font-size: .72rem; color: var(--muted); }
.mn-sug-all {
  display: block; padding: 11px 13px;
  font-family: var(--disp);
  font-size: .79rem; font-weight: 700; color: var(--accent-700);
  background: var(--accent-soft);
}
.mn-sug-all:hover { background: #FFE9DA; }

/* ── 9. DRAWER + SCRIM ───────────────────────────────────────────────── */
.mn-scrim {
  position: fixed; inset: 0; z-index: 980;
  background: rgba(10, 12, 16, .42);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.mn-scrim.open { opacity: 1; visibility: visible; }

.mn-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 990;
  width: min(370px, 88vw);
  background: var(--paper);
  border-right: 1px solid var(--line-2);
  box-shadow: var(--sh-pop);
  display: flex; flex-direction: column;
  transform: translateX(-102%);
  transition: transform .38s var(--ease-out);
}
.mn-drawer.open { transform: none; }

.mn-drawer-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line-2);
  flex: 0 0 auto;
}
.mn-drawer-brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.mn-drawer-brand img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 1px var(--line-2); }
.mn-drawer-brand div { display: flex; flex-direction: column; min-width: 0; }
.mn-drawer-brand b { font-family: var(--disp); font-size: .92rem; font-weight: 800; letter-spacing: -.01em; }
.mn-drawer-brand span { font-size: .7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-drawer-x {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 10px; background: var(--tint); color: var(--ink);
}
.mn-drawer-x:hover { background: var(--ink); color: #fff; }
.mn-drawer-x svg { width: 15px; height: 15px; }

.mn-drawer-lbl {
  display: block;
  font-family: var(--disp); font-size: .7rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-700);
  padding: 12px 16px 0;
}
.mn-drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 0 26px; }
.mn-drawer-body.mn-filter-host { padding: 0; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }

.mn-facet-lbl {
  font-family: var(--disp);
  font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
  padding: 4px 16px 8px;
}
.mn-drawer-cats { display: flex; flex-direction: column; }

.mn-drawer-link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px;
  font-size: .885rem; font-weight: 600; color: var(--ink);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.mn-drawer-link:hover { background: var(--tint); }
.mn-drawer-link.on { background: var(--accent-soft); border-left-color: var(--accent); color: var(--accent-700); }
.mn-drawer-link .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-drawer-link.mn-dl-sub { padding-left: 16px; font-size: .83rem; font-weight: 500; color: var(--ink-2); }
.mn-dl-ico {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--tint); overflow: hidden;
}
.mn-dl-ico img { width: 100%; height: 100%; object-fit: contain; padding: 10%; background: var(--paper); }
.mn-dl-ico .ph { font-size: .95rem; }
.mn-dl-ct {
  font-family: var(--disp);
  font-size: .68rem; font-weight: 800; color: var(--faint);
  background: var(--tint); border-radius: 6px; padding: 2px 7px;
  flex: 0 0 auto;
}
.mn-drawer-link.on .mn-dl-ct { background: rgba(234, 88, 12, .12); color: var(--accent-700); }
.mn-drawer-link .chev { display: grid; place-items: center; color: var(--faint); transition: transform .25s var(--ease); }
.mn-drawer-link.exp .chev { transform: rotate(90deg); }
.mn-drawer-sub { display: none; padding: 2px 0 8px 62px; }
.mn-drawer-sub.show { display: block; animation: mnFadeDown .2s var(--ease-out); }
.mn-drawer-sub a {
  display: block; padding: 6px 0;
  font-size: .83rem; color: var(--ink-2);
}
.mn-drawer-sub a:hover { color: var(--accent-700); }

/* filter layout: scrolling categories + pinned foot */
.mn-filt { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.mn-filt-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 0 8px; }
.mn-filt-foot { flex: 0 0 auto; border-top: 1px solid var(--line-2); background: var(--paper); padding: 4px 0 0; }

.mn-facet { border-bottom: 1px solid var(--line-2); }
.mn-facet-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  font-family: var(--disp);
  font-size: .8rem; font-weight: 800; letter-spacing: -.005em;
  cursor: pointer;
}
.mn-facet-hd .chev { display: grid; place-items: center; color: var(--faint); transition: transform .25s var(--ease); }
.mn-facet.collapsed .mn-facet-hd .chev { transform: rotate(-90deg); }
.mn-facet-body { padding: 0 16px 14px; max-height: 210px; overflow-y: auto; }
.mn-facet.collapsed .mn-facet-body { display: none; }

.mn-facet-opt { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: .85rem; cursor: pointer; }
.mn-facet-opt input { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; }
.mn-facet-opt .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-facet-opt .ct { font-size: .72rem; font-weight: 700; color: var(--faint); }

.mn-price-row { display: flex; align-items: center; gap: 9px; }
.mn-price-row input {
  flex: 1; min-width: 0; height: 40px; padding: 0 11px;
  background: var(--paper); border: 1px solid var(--line-3); border-radius: 10px;
  font-size: .86rem; outline: 0;
}
.mn-price-row input:focus { border-color: var(--ink); }
.mn-price-row span { color: var(--faint); font-weight: 700; }

.mn-facets-actions { display: flex; gap: 9px; padding: 13px 16px 16px; }
.mn-facets-actions .btn { flex: 1; }

/* ── 10. BOTTOM NAV (mobile) ─────────────────────────────────────────── */
/* FLOATING ISLAND — the nav lifts off the bottom edge instead of being a full
   width bar, so content stays visible underneath it. */
.mn-botnav {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 870;
  display: none;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  box-shadow: 0 12px 34px -14px rgba(10, 12, 16, .34);
  overflow: hidden;
}
.mn-botnav a {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 56px;
  font-family: var(--disp);
  font-size: .625rem; font-weight: 700; letter-spacing: .02em;
  color: var(--muted);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.mn-botnav a svg { width: 20px; height: 20px; stroke-width: 1.9; }
.mn-botnav a.on { color: var(--ink); }
.mn-botnav a.on svg { color: var(--accent); }
.mn-botnav a.on::before {
  content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 2px; border-radius: 2px; background: var(--accent);
}
.mn-botnav .mn-count { top: 4px; right: 50%; margin-right: -20px; }

/* ── 11. STICKY CART / QUOTE BARS ────────────────────────────────────── */
.mn-cartbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 880;
  padding: 10px var(--wrap-pad) calc(10px + env(safe-area-inset-bottom));
  transform: translateY(130%);
  /* ⚠️⚠️ THE HIDDEN STATE MUST NOT DEPEND ON THE TRANSFORM ALONE (fixed 2026-08).
     Reported: "the cart bar shows even though there are no items, and it looks weird."
     `translateY(130%)` is 130% of the BAR'S OWN HEIGHT (~65px) — which only clears the
     screen while `bottom: 0`. The mobile rule raises the bar to
     `bottom: calc(var(--bot-h) + safe-area)` to sit above the bottom nav, so ~65px of
     downward shift no longer reaches off-screen and the empty bar stayed visible,
     parked over the nav with no count in it (the JS was correct all along — it only
     adds `.show` when count > 0).
     `visibility` + `opacity` make "hidden" absolute regardless of any bottom offset,
     and `visibility` is delayed on the way out so the slide-down still animates. */
  opacity: 0;
  visibility: hidden;
  transition: transform .4s var(--ease-out), opacity .25s linear, visibility 0s linear .4s;
  pointer-events: none;
}
.mn-cartbar.show {
  transform: none; opacity: 1; visibility: visible;
  transition: transform .4s var(--ease-out), opacity .2s linear, visibility 0s;
  pointer-events: auto;
}
.mn-cartbar-inner {
  max-width: 620px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  height: 52px; padding: 0 8px 0 18px;
  background: var(--ink); color: #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-pop);
}
.mn-cartbar-inner .l { font-size: .84rem; color: rgba(255, 255, 255, .78); }
.mn-cartbar-inner .l b { color: #fff; font-weight: 700; }
.mn-cartbar-inner .r {
  font-family: var(--disp); font-size: .82rem; font-weight: 800;
  background: var(--accent); color: #fff;
  padding: 9px 18px; border-radius: var(--r-pill);
}
body.mn-cartbar-on { padding-bottom: 74px; }
/* the PDP's own sticky action bar owns the bottom edge */
body.mn-stickbar .mn-cartbar { display: none; }

.mn-quotebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 885;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px var(--wrap-pad) calc(11px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  transform: translateY(130%);
  transition: transform .4s var(--ease-out);
}
.mn-quotebar.show { transform: none; }
.mn-quotebar .qb-l { display: flex; flex-direction: column; line-height: 1.2; }
.mn-quotebar .qb-amt { font-family: var(--disp); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.mn-quotebar .qb-sub { font-size: .72rem; color: var(--muted); }
.mn-quotebar .qb-btn {
  height: 46px; padding: 0 24px;
  border-radius: var(--r-sm);
  background: var(--accent); color: #fff;
  font-family: var(--disp); font-size: .9rem; font-weight: 800;
  box-shadow: var(--sh-accent);
  transition: background .2s var(--ease), transform .14s var(--ease);
}
.mn-quotebar .qb-btn:hover { background: var(--accent-600); }
.mn-quotebar .qb-btn:active { transform: scale(.97); }
body.mn-has-quotebar { padding-bottom: 82px; }

/* ── 12. TOAST + PROGRESS ────────────────────────────────────────────── */
/* the toast must outrank the modal (2147482550) and the lightbox (2147482600):
   "Added to cart" fires from inside Quick View, and at a lower z-index it was
   dimmed behind that modal's scrim. Still below the boot preloader. */
#mnToast {
  position: fixed; left: 50%; bottom: 30px; z-index: 2147482650;
  transform: translate(-50%, 22px);
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  background: var(--ink); color: #fff;
  border-radius: var(--r-sm);
  font-size: .855rem; font-weight: 600;
  box-shadow: var(--sh-pop);
  opacity: 0; visibility: hidden;
  transition: opacity .26s var(--ease), transform .32s var(--ease-out), visibility .26s;
}
#mnToast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
#mnToast.ok { background: #08301F; box-shadow: 0 24px 60px -26px rgba(8, 48, 31, .8); }
#mnToast.ok .mn-toast-msg::before { content: '✓'; margin-right: 8px; color: #34D399; font-weight: 800; }
#mnToast.err { background: #3B0A0A; }
#mnToast.err .mn-toast-msg::before { content: '!'; margin-right: 8px; color: #FCA5A5; font-weight: 800; }
.mn-toast-act {
  font-family: var(--disp); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #FDBA74;
  padding: 4px 2px;
  border-bottom: 1.5px solid rgba(253, 186, 116, .45);
}
.mn-toast-act:hover { color: #fff; border-bottom-color: #fff; }

#mnTop {
  position: fixed; top: 0; left: 0; z-index: 2147482400;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent), #FB923C);
  box-shadow: 0 0 12px rgba(234, 88, 12, .7);
  transition: width .25s var(--ease), opacity .3s var(--ease);
}

#mnScrollProg {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2147482380;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%;
  opacity: .85;
  pointer-events: none;
}

#mnTopBtn {
  position: fixed; right: 26px; bottom: 30px; z-index: 860;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s, background .18s;
}
#mnTopBtn.show { opacity: 1; visibility: visible; transform: none; }
#mnTopBtn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
#mnTopBtn svg { width: 18px; height: 18px; }

/* spinner */
.mn-spin {
  width: 26px; height: 26px; margin: 40px auto;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: mnSpin .8s linear infinite;
}
.mn-spin-lg { width: 40px; height: 40px; border-width: 3px; }
@keyframes mnSpin { to { transform: rotate(360deg); } }

/* ── 13. FOOTER ──────────────────────────────────────────────────────── */
.mn-ft {
  background: var(--ink);
  color: rgba(255, 255, 255, .68);
  padding: 62px 0 0;
  margin-top: 34px;
}
.mn-ft-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 60px;
}
.mn-ft h4 {
  font-family: var(--disp);
  font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
  margin-bottom: 20px;
}
/* the store name becomes a proper wordmark */
.mn-ft-grid > div:first-child h4 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  letter-spacing: -.045em; text-transform: none; line-height: 1;
  color: #fff; margin-bottom: 20px;
}
.mn-ft-grid > div:first-child p:first-of-type {
  color: rgba(255, 255, 255, .82);
  font-size: .93rem;
}
.mn-ft p { font-size: .855rem; line-height: 1.75; }
.mn-ft a {
  display: block;
  font-size: .855rem; line-height: 2.1;
  color: rgba(255, 255, 255, .68);
  transition: color .18s var(--ease);
}
.mn-ft a:hover { color: #fff; }
.mn-ft-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 20px 0;
  text-align: center;
  font-size: .76rem;
  color: rgba(255, 255, 255, .4);
}

/* ── 14. SECTIONS ────────────────────────────────────────────────────── */
.mn-sec { margin: var(--sec-gap) 0 0; }
.mn-sec.mn-sec-tight { margin-top: 40px; }

.mn-sec-hd {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.mn-sec-hd h2 {
  font-size: var(--sec-title-size);
  font-weight: 800; letter-spacing: -.042em; line-height: 1.02;
  display: flex; flex-direction: column; gap: 9px;
  text-wrap: balance;
}
.mn-sec-hd h2 small {
  font-family: var(--body);
  font-size: .88rem; font-weight: 400; letter-spacing: 0; line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
}
/* the "see more" affordance is a plain text link with a travelling arrow —
   no pill, no button chrome */
.mn-sec-hd > a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding-bottom: 3px;
  font-family: var(--disp);
  font-size: .82rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink);
  border-bottom: 1.5px solid var(--line-3);
  transition: color .2s var(--ease), border-color .2s var(--ease), gap .2s var(--ease);
}
.mn-sec-hd > a:hover { color: var(--accent-700); border-bottom-color: var(--accent); gap: 12px; }
.mn-sec-hd > a svg { width: 13px; height: 13px; }

html.mn-upper-head .mn-sec-hd h2 { text-transform: uppercase; letter-spacing: .01em; font-size: calc(var(--sec-title-size) * .82); }

/* ── 15. HERO / BANNER ───────────────────────────────────────────────── */
/* HERO — held inside the 1280px grid, so the banner is ALWAYS exactly as wide as
   the content below it. Earlier versions bled it to the viewport with 100vw /
   negative margins: at 33%–75% zoom the banner became a giant band while the
   copy stayed in a narrow column, which is what looked broken. No vw units are
   used anywhere here, so nothing drifts as you zoom. */
.mn-hero {
  position: relative;
  width: 100%;
  margin-top: 20px;
  border-radius: var(--hero-radius);
  overflow: hidden;
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.mn-hero .mn-hero-overlay { padding-inline: clamp(20px, 4%, 54px); }
.mn-hero-slides { position: relative; width: 100%; height: var(--hero-h, auto); }
.mn-hero-slide {
  position: absolute; inset: 0;
  background-position: center; background-repeat: no-repeat; background-size: cover;
  display: flex; align-items: flex-end; justify-content: var(--hero-align);
  opacity: 0; visibility: hidden;
  transition: opacity .8s var(--ease), visibility .8s;
}
.mn-hero-slide.active { opacity: 1; visibility: visible; }
.mn-hero-slide.has-img { background-color: var(--tint); }
.mn-hero-slide.has-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 8, 11, calc(.55 + var(--hero-overlay) * .45)) 0%, rgba(6, 8, 11, calc(var(--hero-overlay) * .5)) 46%, rgba(6, 8, 11, 0) 78%);
  opacity: 1;
  pointer-events: none;
}
.mn-hero-slide:not(.has-img) { background: linear-gradient(120deg, #12151B 0%, #23272F 58%, #2E241D 100%); }
/* a full-image banner with NO heading / sub / CTA needs no legibility scrim */
@supports selector(:has(*)) {
  .mn-hero-slide.has-img:not(:has(.mn-hero-overlay h1:not(:empty))):not(:has(.mn-hero-overlay p)):not(:has(.mn-hero-overlay a))::after { opacity: 0; }
}
.mn-hero-shim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--tint) 20%, var(--tint-2) 38%, var(--tint) 56%);
  background-size: 220% 100%;
  animation: mnShim 1.5s linear infinite;
  transition: opacity .5s var(--ease);
}
.mn-hero-slide.img-ok .mn-hero-shim { opacity: 0; }

.mn-hero-overlay {
  position: relative; z-index: 2;
  width: 100%;
  max-width: none;
  padding-block: clamp(24px, 5vw, 62px);
  text-align: var(--hero-text-align);
  color: var(--hero-text);
}
.mn-hero-overlay h1 {
  max-width: 20ch;
  font-size: clamp(1.65rem, 5vw, 3.9rem);
  font-weight: 800; letter-spacing: -.045em; line-height: .98;
  color: var(--hero-text);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .4);
  text-wrap: balance;
}
.mn-hero-overlay h1:empty { display: none; }
.mn-hero-overlay p {
  margin-top: 14px;
  max-width: 46ch;
  font-size: clamp(.88rem, 1.5vw, 1.1rem);
  line-height: 1.6;
  color: var(--hero-text);
  opacity: .9;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .4);
}
.mn-hero-overlay .btn { margin-top: 22px; }
/* centred banners keep their copy centred inside the full-bleed frame */
.mn-hero-slide[style*="center"] .mn-hero-overlay h1,
.mn-hero-slide[style*="center"] .mn-hero-overlay p { margin-inline: auto; }

.mn-hero-arrow {
  position: absolute; top: 50%; z-index: 3;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 1.25rem; line-height: 1;
  box-shadow: var(--sh-1);
  opacity: 0;
  transition: opacity .28s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.mn-hero-arrow.prev { left: 16px; }
.mn-hero-arrow.next { right: 16px; }
.mn-hero:hover .mn-hero-arrow { opacity: 1; }
.mn-hero-arrow:hover { background: #fff; }
.mn-hero-arrow:active { transform: translateY(-50%) scale(.92); }

.mn-hero-dots {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 7px;
  padding: 7px 11px;
  border-radius: var(--r-pill);
  background: rgba(10, 12, 16, .3);
  backdrop-filter: blur(8px);
}
.mn-hero-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: width .3s var(--ease), background .3s var(--ease);
}
.mn-hero-dots i.on { width: 22px; border-radius: var(--r-pill); background: #fff; }

/* ── 16. TILE GRIDS (categories / brands / collections) ──────────────── */
.mn-cat-grid {
  display: grid;
  grid-template-columns: repeat(var(--cat-cols-m), minmax(0, 1fr));
  gap: var(--grid-gap);
}
.mn-brand-grid { grid-template-columns: repeat(var(--brand-cols-m), minmax(0, 1fr)); }
.mn-showcase-grid {
  display: grid;
  grid-template-columns: repeat(var(--coll-cols-m), minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* category tiles follow the same borderless gallery logic as product cards */
.mn-cat-tile {
  display: block;
  background: transparent;
  border: 0;
  transition: transform .3s var(--ease);
}
.mn-cat-tile:hover { transform: translateY(-3px); }
.mn-cat-thumb {
  position: relative;
  aspect-ratio: 1/1;
  background: linear-gradient(160deg, #FAFAF8 0%, var(--tint) 62%, #EDEDE8 100%);
  border-radius: var(--tile-radius);
  overflow: hidden;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow .3s var(--ease);
}
.mn-cat-tile:hover .mn-cat-thumb {
  box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 30px -20px rgba(10, 12, 16, .3);
}
/* an ember arrow slides in on hover so a tile reads as something you can open */
.mn-cat-thumb::after {
  content: '';
  position: absolute; right: 9px; bottom: 9px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent) no-repeat center/9px 9px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'><path d='m9 6 6 6-6 6'/></svg>");
  opacity: 0; transform: translate(6px, 6px) scale(.7);
  transition: opacity .28s var(--ease), transform .34s var(--spring);
  pointer-events: none;
}
.mn-cat-tile:hover .mn-cat-thumb::after { opacity: 1; transform: none; }
.mn-brand-tile .mn-cat-thumb::after { display: none; }
#mnTrust .mn-cat-tile .mn-cat-thumb::after { display: none; }
/* Tile artwork is CONTAINED, never cropped — these are product/logo shots on a
   white background, so `cover` zoomed in and chopped the edges. */
.mn-cat-thumb { background: var(--paper); }
.mn-cat-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 6%;
  transition: transform .55s var(--ease);
}
.mn-cat-tile:hover .mn-cat-thumb img { transform: scale(1.04); }
.mn-cat-thumb .ph { font-size: 1.5rem; opacity: .35; }
.mn-cat-tile .meta { padding: 10px 2px 0; text-align: center; }
.mn-cat-tile .meta b {
  font-family: var(--disp);
  font-size: var(--tile-label); font-weight: 700; letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.64em;
}
.mn-cat-tile .meta span {
  display: block; margin-top: 3px;
  font-size: .69rem; font-weight: 600; color: var(--faint);
}

/* brand marks sit FLAT on the page — no plate, no ring, no rounded box */
.mn-brand-tile .mn-cat-thumb {
  aspect-ratio: 1/1;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.mn-brand-tile:hover .mn-cat-thumb { box-shadow: none; }
.mn-brand-tile .mn-cat-thumb img { object-fit: contain; padding: 14%; }
.mn-brand-tile:hover .mn-cat-thumb img { transform: none; }
.mn-brand-tile .meta { padding: 8px 2px 0; }
.mn-brand-tile .meta b {
  display: block;
  font-size: .74rem; font-weight: 700; color: var(--ink-2);
  min-height: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* admin-managed trust strip (#mnTrust renders horizontal icon rows) — these are
   content panels, so they keep a plate + hairline unlike the gallery tiles */
#mnTrust .mn-cat-tile {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
#mnTrust .mn-cat-tile:hover { transform: none; box-shadow: none; }
#mnTrust .mn-cat-tile .meta { text-align: left; }
#mnTrust .mn-cat-tile .meta b {
  display: block; white-space: normal; min-height: 0;
  font-size: .875rem; font-weight: 800;
}
#mnTrust .mn-cat-tile .meta span { margin-top: 1px; font-size: .76rem; color: var(--muted); }

.mn-showcase-card {
  display: block;
  position: relative;
  border-radius: var(--tile-radius);
  overflow: hidden;
  background: var(--tint);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.mn-showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 22px 46px -24px rgba(10, 12, 16, .34);
}
.mn-showcase-img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.mn-showcase-img .mn-slider { position: absolute; inset: 0; }
.mn-showcase-img img { width: 100%; height: 100%; object-fit: var(--coll-fit); }
.mn-showcase-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 18px 16px;
  font-family: var(--disp);
  font-size: 1.02rem; font-weight: 800; letter-spacing: -.018em;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
  background: linear-gradient(to top, rgba(6, 8, 11, .9) 0%, rgba(6, 8, 11, .62) 42%, rgba(6, 8, 11, 0) 100%);
}

/* skeleton tiles (static, from first paint) */
.mn-tskel { pointer-events: none; }
.mn-tskel .meta b {
  display: block; height: 11px; border-radius: 4px;
  background: var(--tint-2); color: transparent;
}
.mn-shim, .mn-tskel .mn-shim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--tint) 20%, var(--tint-2) 38%, var(--tint) 56%);
  background-size: 220% 100%;
  animation: mnShim 1.5s linear infinite;
  transition: opacity .45s var(--ease);
}
@keyframes mnShim { from { background-position: 140% 0; } to { background-position: -60% 0; } }

/* ── 17. PRODUCT GRID + CARD ─────────────────────────────────────────── */
.mn-prod-grid {
  display: grid;
  grid-template-columns: repeat(var(--prod-cols-m), minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}

/* GALLERY CARD — no box, no border, no shadow. The product sits on a soft
   neutral plate and the copy lives on the page itself, so a grid reads as a
   gallery of objects rather than a wall of boxes. */
.mn-card {
  position: relative;
  display: flex; flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: transform .34s var(--ease);
}
.mn-card:hover { transform: translateY(-3px); }
html.mn-no-cardborder .mn-card { border-color: transparent; }

.mn-card-imgwrap {
  position: relative;
  aspect-ratio: var(--card-img-aspect);
  background: linear-gradient(165deg, #FBFBF9 0%, var(--tint) 58%, #EDEDE8 100%);
  border-radius: 18px;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow .34s var(--ease);
}
.mn-card:hover .mn-card-imgwrap {
  box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 38px -22px rgba(10, 12, 16, .3);
}
.mn-card-imgwrap > img,
.mn-card-imgwrap .mn-slider img {
  width: 100%; height: 100%;
  object-fit: var(--prod-fit);
  padding: 4%;
  opacity: 0;
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.mn-card-imgwrap > img.loaded { opacity: 1; }
.mn-card:hover .mn-card-imgwrap > img.loaded { transform: scale(1.045); }
html.mn-card-hover-zoom .mn-card:hover .mn-card-imgwrap > img.loaded { transform: scale(1.09); }
.mn-card-imgwrap > img.loaded ~ .shim { opacity: 0; visibility: hidden; }
.mn-card-imgwrap .shim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--tint) 20%, var(--tint-2) 38%, var(--tint) 56%);
  background-size: 220% 100%;
  animation: mnShim 1.5s linear infinite;
  transition: opacity .45s var(--ease), visibility .45s;
}
.mn-card-imglink { position: absolute; inset: 0; z-index: 2; }

.mn-card-off {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--ink); color: #fff;
  font-family: var(--disp);
  font-size: .63rem; font-weight: 800; letter-spacing: .05em;
}
.mn-card-badge { position: absolute; top: 10px; left: 10px; z-index: 3; }

.mn-card-fav, .mn-card-qv {
  position: absolute; z-index: 4;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  box-shadow: var(--sh-sm);
  transition: color .2s var(--ease), background .2s var(--ease), transform .2s var(--spring), opacity .2s var(--ease);
}
.mn-card-fav { top: 10px; right: 10px; }
.mn-card-qv { top: 48px; right: 10px; opacity: 0; transform: scale(.85); }
.mn-card:hover .mn-card-qv { opacity: 1; transform: none; }
/* touch devices have no hover — Quick View must always be reachable there */
@media (hover: none) {
  .mn-card-qv { opacity: 1; transform: none; }
}
.mn-card-fav svg, .mn-card-qv svg { width: 15px; height: 15px; }
.mn-card-fav:hover { color: var(--accent); }
.mn-card-fav.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.mn-card-fav.on svg { fill: currentColor; }
.mn-card-qv:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.mn-card-body {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 13px 2px 0;
  flex: 1 1 auto;
}
.mn-card-brand {
  font-family: var(--disp);
  font-size: .655rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint);
  min-height: .9em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mn-card-title {
  font-size: var(--card-title-size);
  font-weight: 600; line-height: 1.4;
  color: var(--ink);
  text-align: var(--card-title-align);
  display: -webkit-box;
  -webkit-line-clamp: var(--card-title-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--card-title-size) * 1.4 * 2);
  transition: color .18s var(--ease);
}
.mn-card-title:hover { color: var(--accent-700); }

.mn-card-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.mn-card-price .now {
  font-family: var(--disp);
  font-size: var(--price-size); font-weight: 800; letter-spacing: -.03em;
  color: var(--ink);
}
.mn-card-price .mrp { font-size: .78rem; color: var(--faint); text-decoration: line-through; }
.mn-card-price .off { font-size: .7rem; font-weight: 800; color: var(--ok); }
.mn-card-price.req { min-height: 26px; align-items: center; }
.mn-price-req {
  font-family: var(--disp);
  font-size: .8rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--accent-700);
}
.mn-card-body .gst {
  font-size: .655rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint);
}
/* the CTA is pushed to the card's baseline and separated by a hairline, so a
   grid of cards has one clean horizontal line running across it */
.mn-card-ctl {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--line-2);
}
/* card CTA is quieter than a page-level primary button: flat ember, no glow,
   so a grid of 24 cards doesn't turn into a wall of orange blocks */
.mn-card-ctl .btn {
  width: 100%; height: 38px;
  font-size: .82rem;
  border-radius: 10px;
  background: var(--paper);
  color: var(--accent-700);
  border: 1.5px solid rgba(234, 88, 12, .32);
  box-shadow: none;
}
.mn-card-ctl .btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: none; }

/* qty stepper (cards / quick-view / PDP / cart share the same language) */
.mn-card-step, .mn-qv-step, .mn-pdp-step, .cl-step {
  display: flex; align-items: center;
  height: 42px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  background: var(--paper);
  overflow: hidden;
}
.mn-card-step button, .mn-qv-step button, .mn-pdp-step button, .cl-step button {
  width: 38px; height: 100%; flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 1.15rem; font-weight: 600; line-height: 1;
  color: var(--ink);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.mn-card-step button:hover, .mn-qv-step button:hover, .mn-pdp-step button:hover, .cl-step button:hover { background: var(--tint); }
.mn-card-step button:active, .cl-step button:active { background: var(--accent); color: #fff; }
.mn-step-inp {
  flex: 1; min-width: 0; width: 100%;
  height: 100%;
  text-align: center;
  background: none; border: 0; outline: 0;
  font-family: var(--disp);
  font-size: .92rem; font-weight: 800;
  color: var(--ink);
}
.mn-card-step { height: 38px; }
.mn-card-step button { width: 34px; }
.mn-pdp-step.big { height: 50px; border-radius: 13px; }
.mn-pdp-step.big button { width: 50px; font-size: 1.3rem; }
.mn-pdp-step.big .mn-step-inp { font-size: 1.02rem; }
.cl-step { height: 36px; border-radius: 9px; }
.cl-step button { width: 32px; font-size: 1rem; }

/* auto-sliding image set */
.mn-slider { position: absolute; inset: 0; overflow: hidden; }
.mn-slider img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: var(--prod-fit);
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.mn-slider img.on.ld { opacity: 1; }
.mn-slider img.ld ~ .mn-shim { opacity: 0; }
/* category / brand tiles fill their thumb via a slider when they have >1 image —
   keep the SAME contained fit as the single-image case (no zoom, no crop). */
.mn-cat-thumb .mn-slider img { object-fit: contain; padding: 6%; }
.mn-brand-tile .mn-cat-thumb .mn-slider img { padding: 14%; }
.mn-showcase-img .mn-slider img { object-fit: var(--coll-fit); padding: 0; }

/* ── 18. SKELETONS + EMPTY STATES ────────────────────────────────────── */
.mn-skel-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding-bottom: 4px;
}
.mn-skel-img {
  aspect-ratio: var(--card-img-aspect);
  border-radius: 18px;
  background: linear-gradient(100deg, var(--tint) 20%, var(--tint-2) 38%, var(--tint) 56%);
  background-size: 220% 100%;
  animation: mnShim 1.5s linear infinite;
  margin-bottom: 14px;
}
.mn-skel-line {
  height: 10px; border-radius: 5px;
  margin: 0 2px 9px;
  background: linear-gradient(100deg, var(--tint) 20%, var(--tint-2) 38%, var(--tint) 56%);
  background-size: 220% 100%;
  animation: mnShim 1.5s linear infinite;
}
.mn-skel-line.w35 { width: 35%; }
.mn-skel-line.w50 { width: 50%; }
.mn-skel-line.w90 { width: 90%; }
.mn-skel-btn {
  height: 38px; border-radius: 10px;
  margin: 13px 2px 0;
  background: linear-gradient(100deg, var(--tint) 20%, var(--tint-2) 38%, var(--tint) 56%);
  background-size: 220% 100%;
  animation: mnShim 1.5s linear infinite;
}

.mn-empty {
  text-align: center;
  padding: 60px 22px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-size: .92rem;
  color: var(--ink-2);
  line-height: 1.7;
}
.mn-empty .ico { font-size: 2.4rem; margin-bottom: 12px; opacity: .5; }
.mn-empty b { display: block; font-family: var(--disp); font-size: 1.08rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.mn-empty small { color: var(--muted); }

/* small thumbnail with shimmer + spinner (cart / order lines) */
span.mn-tl {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--tint);
}
span.mn-tl::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%;
  animation: mnSpin .8s linear infinite;
  transition: opacity .3s var(--ease);
}
span.mn-tl.done::after { opacity: 0; }
span.mn-tl img {
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
span.mn-tl img.ld { opacity: 1; }

/* ============================================================================
   UI STATES (paired with store-state.js) — offline · slow · failed · session
   expired · inline form validation. Every one is a real, styled state rather
   than a blank area.
   ========================================================================== */

/* offline bar — pinned bottom-left so it never covers the cart/quote bars */
/* z-index sits ABOVE all page chrome (bottom bars 870-886) but deliberately BELOW
   the toast (2147482500), the modal (2147482550) and the lightbox (2147482600) —
   when a customer has a product modal open, that is their focus, and a corner
   status bar must never cover its buttons. */
.mn-netbar {
  position: fixed; z-index: 2147482450;
  left: 16px; bottom: 16px;
  max-width: min(420px, calc(100% - 32px));
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  background: var(--ink); color: #fff;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-pop);
  font-size: .82rem; line-height: 1.45;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .28s var(--ease), transform .3s var(--ease-out), visibility .28s;
}
.mn-netbar.show { opacity: 1; visibility: visible; transform: none; }
.mn-netbar .dot {
  width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, .2);
  animation: mnBlink 1.4s var(--ease) infinite;
}
@keyframes mnBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.mn-netbar .tx { flex: 1; color: rgba(255, 255, 255, .78); }
.mn-netbar .tx b { color: #fff; }
.mn-netbar .act {
  flex: 0 0 auto;
  font-family: var(--disp); font-size: .76rem; font-weight: 800;
  padding: 7px 13px; border-radius: 9px;
  background: var(--accent); color: #fff;
}
.mn-netbar .act:hover { background: var(--accent-600); }

/* session-expired bar — an IN-FLOW strip at the top of <main>, not a fixed/sticky
   overlay: it is injected at runtime, so a sticky bar appended to the end of the
   body would only reveal itself at the very bottom of the page, and a fixed one
   would cover the header. In-flow means no overlap and no z-index contest. A
   toast fires alongside it so a scrolled-down customer still notices. */
.mn-sessbar {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--wrap-pad);
  background: var(--warn-soft);
  border-bottom: 1px solid rgba(180, 83, 9, .22);
  color: #7C3E06;
  font-size: .82rem;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .3s var(--ease), opacity .3s var(--ease), padding .3s var(--ease);
}
.mn-sessbar.show { max-height: 80px; opacity: 1; }
.mn-sessbar .tx { flex: 1; }
.mn-sessbar .act {
  font-family: var(--disp); font-size: .78rem; font-weight: 800;
  padding: 6px 13px; border-radius: 8px;
  background: var(--ink); color: #fff;
}
.mn-sessbar .x { color: #92400E; font-size: .9rem; padding: 2px 4px; }

/* "still loading" hint appended inside whichever block is waiting */
.mn-slowhint {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 18px 0 2px;
  font-size: .82rem; font-weight: 500; color: var(--muted);
}
.mn-slowhint .s {
  width: 14px; height: 14px; flex: 0 0 auto;
  border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%;
  animation: mnSpin .8s linear infinite;
}

/* failed / error state block (replaces a block that never finished loading) */
.mn-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 52px 24px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.mn-state .ico { font-size: 2.2rem; margin-bottom: 12px; }
.mn-state b {
  display: block;
  font-family: var(--disp);
  font-size: 1.12rem; font-weight: 800; letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: 6px;
}
.mn-state p { font-size: .875rem; line-height: 1.65; color: var(--muted); max-width: 44ch; margin: 0 auto; }
.mn-state .ax, .mn-state-ax {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.mn-empty .mn-state-ax { margin-top: 16px; }

/* inline field validation */
.mn-fmsg {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 6px;
  font-size: .765rem; font-weight: 600; line-height: 1.4;
  color: var(--danger);
}
.mn-fmsg::before { content: '!'; font-weight: 800; }
.mn-field.bad input, .mn-field.bad textarea, .mn-field.bad select {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .09);
}

@media (max-width: 899px) {
  .mn-netbar { left: 12px; right: 12px; max-width: none; bottom: calc(var(--bot-h) + 12px + env(safe-area-inset-bottom)); }
  .mn-state { padding: 38px 18px; }
}

/* ── UNIVERSAL IMAGE LOADING STATE (paired with store-imgload.js) ──────────
   Any image that has not settled yet carries no `.mn-imgld` class, so it shows
   a shimmer in its own box. This covers the surfaces that had NO loading state:
   the shop category rail, drawer category icons, the PDP thumbnail strip and the
   search-suggestion rows. Surfaces that already have their own shimmer/spinner
   (product cards, category tiles, PDP hero, cart thumbs) are left alone. */
.mn-sugg .th img:not(.mn-imgld),
.mn-dl-ico img:not(.mn-imgld),
.mn-thumbs img:not(.mn-imgld),
.mn-sug-item img:not(.mn-imgld) {
  background-image: linear-gradient(100deg, var(--tint) 20%, var(--tint-2) 38%, var(--tint) 56%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: mnShim 1.5s linear infinite;
}
/* the rail circles also breathe while they wait, so a row of empty rings never
   looks like a rendering fault */
.mn-sugg .th:not(.mn-imgdone) { animation: mnPulseRing 1.6s var(--ease) infinite; }
@keyframes mnPulseRing {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--line-2); }
  50%      { box-shadow: inset 0 0 0 1px var(--line-3); }
}
.mn-sugg.on .th:not(.mn-imgdone) { animation: none; }
/* a failed image keeps a quiet plate instead of a broken-picture glyph */
img.mn-imgerr { background-image: none; animation: none; }

/* skeleton chips for the category rail while the categories load */
.mn-sugg.mn-sk { pointer-events: none; }
.mn-sugg.mn-sk .th {
  background-image: linear-gradient(100deg, var(--tint) 20%, var(--tint-2) 38%, var(--tint) 56%);
  background-size: 220% 100%;
  animation: mnShim 1.5s linear infinite;
}
.mn-sugg.mn-sk .lb {
  width: 70%; height: 8px; border-radius: 4px;
  background-image: linear-gradient(100deg, var(--tint) 20%, var(--tint-2) 38%, var(--tint) 56%);
  background-size: 220% 100%;
  animation: mnShim 1.5s linear infinite;
  color: transparent;
}

/* generic "image is loading" wrapper (PDP main / quick view) */
.mn-imgwrap-load { position: relative; background: var(--tint); overflow: hidden; }
.mn-imgwrap-load::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--tint) 20%, var(--tint-2) 38%, var(--tint) 56%);
  background-size: 220% 100%;
  animation: mnShim 1.5s linear infinite;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.mn-imgwrap-load.ld::after { opacity: 0; }

/* ── 19. BREADCRUMB ─────────────────────────────────────────────────── */
.mn-bc {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  padding: 20px 0 14px;
  font-size: .785rem;
  color: var(--muted);
}
.mn-bc a { color: var(--muted); transition: color .16s var(--ease); }
.mn-bc a:hover { color: var(--accent-700); }
.mn-bc .sep { color: var(--faint); }
.mn-bc b { color: var(--ink); font-weight: 700; }
.mn-bc-cnt, .mn-bc .cnt {
  margin-left: 6px;
  font-family: var(--disp);
  font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-700);
  background: var(--accent-soft);
  border: 1px solid rgba(234, 88, 12, .18);
  border-radius: 6px;
  padding: 3px 8px;
}

/* ── 20. SHOP PAGE ──────────────────────────────────────────────────── */
.mn-shop-top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.mn-shop-top h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  letter-spacing: -.045em;
  line-height: 1;
}
.mn-shop-top .sub { font-size: .855rem; color: var(--muted); margin-top: 5px; }

.mn-shop-sticky {
  position: sticky; top: var(--hd-h); z-index: 700;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  margin: 0 calc(var(--wrap-pad) * -1);
  padding: 12px var(--wrap-pad) 12px;
  border-bottom: 1px solid var(--line-2);
}

.mn-shop-search {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  height: 46px;
  padding: 0 15px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 13px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.mn-shop-search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 12, 16, .06); }
.mn-shop-search svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted); }
.mn-shop-search input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: 0;
  font-size: .92rem;
}
.mn-shop-search input::placeholder { color: var(--faint); }

/* category rail (Swiggy-style image chips) */
.mn-shop-chips {
  display: flex; gap: 12px;
  margin: 2px 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.mn-shop-chips::-webkit-scrollbar { display: none; }
.mn-sugg {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  /* 68px could not fit a single real category word ("Kitchenware" ≈ 66px at .68rem),
     so the word overflowed and was chopped by the clamp — the reported
     "Commercia / Kitchenwar". Slightly wider + word breaking (below) fixes it. */
  width: 78px;
  cursor: pointer;
}
.mn-sugg .th {
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tint);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
/* the rail artwork must FIT the circle — contained + inset, never zoom-cropped */
.mn-sugg .th { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); }
.mn-sugg .th img { width: 100%; height: 100%; object-fit: contain; padding: 13%; }
.mn-sugg .th .ph { font-size: 1.15rem; opacity: .4; }
.mn-sugg .lb {
  font-size: .68rem; font-weight: 600; color: var(--ink-2);
  text-align: center; line-height: 1.22;
  max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /* ⚠️ WITHOUT THIS A LONG WORD IS CLIPPED, NOT WRAPPED. `-webkit-line-clamp` only
     ellipsises when the CONTENT exceeds two lines; a single word wider than the tile
     just overflows and `overflow:hidden` slices it mid-word, which is what produced
     "Commercia" and "Kitchenwar" on the shop rail. Allowing a break means the word
     wraps to the second line and the clamp can ellipsise it properly. */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.mn-sugg:hover .th { transform: translateY(-2px); border-color: var(--line-3); }
.mn-sugg.on .th { border-color: var(--accent); }
.mn-sugg.on .lb { color: var(--accent-700); font-weight: 800; }

.mn-shop-filtrow {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
}
.mn-applied { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; flex: 1; min-width: 0; }
.mn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 11px;
  border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font-size: .755rem; font-weight: 600;
}
.mn-chip .lbl { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-chip button {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: #fff;
  font-size: .62rem; line-height: 1;
}
.mn-chip button:hover { background: rgba(255, 255, 255, .34); }
.mn-chip[data-clr="all"], .mn-applied > button.mn-chip {
  padding: 5px 12px;
  background: var(--danger-soft) !important; color: var(--danger) !important;
  border: 1px solid rgba(220, 38, 38, .2);
  font-weight: 700;
}

.mn-filtpill {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line-3);
  font-family: var(--disp);
  font-size: .8rem; font-weight: 700;
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.mn-filtpill:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.mn-sort {
  flex: 0 0 auto;
  height: 38px; padding: 0 34px 0 14px;
  border-radius: var(--r-pill);
  background: var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A828E' stroke-width='2.4' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 12px center;
  background-size: 13px;
  border: 1px solid var(--line-3);
  font-family: var(--disp);
  font-size: .8rem; font-weight: 700;
  color: var(--ink);
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  outline: 0;
}
.mn-sort:focus { border-color: var(--ink); }

.mn-shop-body { padding-top: 22px; }

.mn-loadmore {
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  padding: 40px 0 10px;
}
.mn-loadmore .rem {
  font-family: var(--disp);
  font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint);
}
.mn-loadmore .btn { min-width: 190px; }

/* ── 21. PRODUCT DETAIL PAGE ────────────────────────────────────────── */
.mn-pdp-search { max-width: 560px; }

.mn-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding-top: 6px;
}

.mn-gallery { position: sticky; top: calc(var(--hd-h) + 20px); }
.mn-gallery .main {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--r-lg);
  background: var(--tint);
  border: 1px solid var(--line-2);
  overflow: hidden;
  cursor: zoom-in;
}
.mn-gallery .main img {
  position: relative; z-index: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 6%;
}
.mn-imgwrap-load::after { z-index: 1; }
.mn-gallery-arrow {
  position: absolute; top: 50%; z-index: 4;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-size: 1.2rem; line-height: 1;
  box-shadow: var(--sh-1);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.mn-gallery-arrow.prev { left: 12px; }
.mn-gallery-arrow.next { right: 12px; }
.mn-gallery-arrow:hover { background: var(--ink); color: #fff; }
.mn-gallery-arrow:active { transform: translateY(-50%) scale(.92); }

.mn-thumbs {
  display: flex; gap: 9px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 3px;
}
.mn-thumbs::-webkit-scrollbar { display: none; }
.mn-thumbs img {
  width: 66px; height: 66px; flex: 0 0 auto;
  object-fit: contain;
  padding: 5px;
  border-radius: 11px;
  background: var(--tint);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.mn-thumbs img:hover { transform: translateY(-2px); }
.mn-thumbs img.on { border-color: var(--ink); background: var(--paper); }

.mn-pdp-info { padding-top: 4px; }
.mn-pdp-brand {
  font-family: var(--disp);
  font-size: .69rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
  color: var(--accent-700);
  margin-bottom: 11px;
}
.mn-pdp-info h1 {
  font-size: clamp(1.42rem, 3vw, 2.1rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.13;
}
.mn-pdp-sku {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}
.mn-pdp-sku > div {
  font-size: .73rem; font-weight: 500;
  color: var(--muted);
  background: var(--tint);
  border-radius: 7px;
  padding: 5px 10px;
}
.mn-pdp-sku b { color: var(--ink); font-weight: 700; }

.mn-specs {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.mn-specs h3 {
  font-size: .69rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 11px;
}
.mn-spec-line {
  font-size: .86rem; color: var(--ink-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--line-2);
}
.mn-spec-line:last-child { border-bottom: 0; padding-bottom: 0; }

.mn-pdp-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 11px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.mn-pdp-price .now {
  font-family: var(--disp);
  font-size: clamp(1.7rem, 3.6vw, 2.35rem);
  font-weight: 800; letter-spacing: -.04em;
  color: var(--ink);
}
.mn-pdp-price .mrp { font-size: .92rem; color: var(--faint); text-decoration: line-through; }
.mn-pdp-price .gst {
  font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint);
  border-left: 1px solid var(--line);
  padding-left: 11px;
}
.mn-pdp-price.req .mn-price-req { font-size: 1.25rem; }

.mn-pdp-note {
  margin-top: 16px;
  padding: 13px 15px;
  background: var(--accent-soft);
  border: 1px solid rgba(234, 88, 12, .16);
  border-radius: var(--r-sm);
  font-size: .825rem; line-height: 1.6;
  color: #8A3708;
}

.mn-pdp-actions { display: flex; align-items: stretch; gap: 10px; margin-top: 20px; }

.mn-pdp-trust {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.mn-tb {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px;
  background: var(--paper);
  font-size: .795rem; font-weight: 600; color: var(--ink-2);
}
.mn-tb .i { font-size: 1.05rem; line-height: 1; }

.mn-desc {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
  font-size: .9rem; line-height: 1.8;
  color: var(--ink-2);
  white-space: pre-line;
}

/* mobile sticky action bar */
.mn-pdp-stick {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 886;
  display: none;
  align-items: center; gap: 9px;
  padding: 10px var(--wrap-pad) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
}

/* lightbox */
.mn-lb {
  position: fixed; inset: 0; z-index: 2147482600;
  display: grid; place-items: center;
  background: rgba(8, 10, 13, .93);
  backdrop-filter: blur(8px);
  padding: 28px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.mn-lb.open { opacity: 1; visibility: visible; }
.mn-lb img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: var(--r-sm); }
.mn-lb-x {
  position: absolute; top: 20px; right: 22px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff; font-size: 1.05rem;
  transition: background .18s var(--ease);
}
.mn-lb-x:hover { background: rgba(255, 255, 255, .26); }

/* ── 22. MODALS (quick view / order detail) ──────────────────────────── */
.mn-modal {
  position: fixed; inset: 0; z-index: 2147482550;
  display: grid; place-items: center;
  padding: 22px;
  background: rgba(10, 12, 16, .5);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s;
}
.mn-modal.open { opacity: 1; visibility: visible; }
.mn-modal-card {
  position: relative;
  width: 100%; max-width: 780px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  transform: translateY(14px) scale(.985);
  transition: transform .34s var(--ease-out);
}
.mn-modal.open .mn-modal-card { transform: none; }
.mn-modal-x {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-size: .82rem;
  box-shadow: var(--sh-sm);
}
.mn-modal-x:hover { background: var(--ink); color: #fff; }

#mnQvCard { display: grid; grid-template-columns: 1fr 1fr; max-width: 820px; }
.mn-qv-img { aspect-ratio: 1/1; background: var(--tint); }
.mn-qv-img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.mn-qv-body { padding: 26px 26px 28px; display: flex; flex-direction: column; }
.mn-qv-body .br {
  font-family: var(--disp);
  font-size: .67rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-700);
  margin-bottom: 9px;
}
.mn-qv-body h2 { font-size: 1.28rem; letter-spacing: -.03em; line-height: 1.22; }
.mn-qv-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.mn-qv-price .now { font-family: var(--disp); font-size: 1.55rem; font-weight: 800; letter-spacing: -.035em; }
.mn-qv-price .mrp { font-size: .85rem; color: var(--faint); text-decoration: line-through; }
.mn-qv-price .gst { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.mn-qv-desc {
  margin-top: 14px;
  font-size: .855rem; line-height: 1.7; color: var(--ink-2);
  max-height: 150px; overflow-y: auto;
}
.mn-qv-actions { display: flex; gap: 10px; margin-top: 22px; }

/* ── 23. QUOTE FLOW — STEPPER ────────────────────────────────────────── */
.mn-steps {
  display: flex; align-items: center; gap: 10px;
  padding: 26px 0 24px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.mn-steps::-webkit-scrollbar { display: none; }
.mn-step {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
  font-family: var(--disp);
  font-size: .8rem; font-weight: 700;
  color: var(--faint);
  transition: color .25s var(--ease);
}
.mn-step .n {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--line-3);
  font-size: .7rem; font-weight: 800;
  color: var(--faint);
  transition: all .25s var(--ease);
}
.mn-step.on { color: var(--ink); }
.mn-step.on .n { background: var(--ink); border-color: var(--ink); color: #fff; }
.mn-step.done { color: var(--ok); }
.mn-step.done .n { background: var(--ok); border-color: var(--ok); color: #fff; font-size: 0; }
.mn-step.done .n::after { content: '✓'; font-size: .7rem; }
.mn-step-sep { flex: 1 1 auto; min-width: 18px; height: 1px; background: var(--line); }

/* ── 24. CART ───────────────────────────────────────────────────────── */
.mn-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 26px;
  align-items: start;
}

.mn-save-ban {
  display: block;
  padding: 12px 15px;
  margin-bottom: 16px;
  background: var(--ok-soft);
  border: 1px solid rgba(14, 159, 110, .2);
  border-radius: var(--r-sm);
  font-size: .84rem; font-weight: 600;
  color: #06795A;
}
.mn-save-ban b { font-weight: 800; }

.mn-cart-card {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 18px;
}
.mn-cart-cardhd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line-2);
}
.mn-cart-cardhd b { font-family: var(--disp); font-size: .93rem; font-weight: 800; letter-spacing: -.015em; }
.cl-clear {
  font-family: var(--disp);
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--danger);
}
.cl-clear:hover { text-decoration: underline; }

.mn-cline {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-2);
}
.mn-cline:last-of-type { border-bottom: 0; }
.mn-cline > .mn-tl, .cl-thumb-link {
  display: block;
  width: 74px; height: 74px;
  border-radius: var(--r-sm);
  background: var(--tint);
  overflow: hidden;
}
.cl-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cl-br {
  font-family: var(--disp);
  font-size: .63rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint);
}
.cl-info b, .cl-name-link b {
  font-size: .9rem; font-weight: 600; line-height: 1.42; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cl-name-link:hover b { color: var(--accent-700); }
.cl-pp { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.cl-pp s { color: var(--faint); }
.cl-off { color: var(--ok); font-weight: 800; font-size: .74rem; }
.cl-rm {
  align-self: flex-start;
  margin-top: 6px;
  font-family: var(--disp);
  font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
}
.cl-rm:hover { color: var(--danger); }
.cl-right { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.cl-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; }
.cl-price b { font-family: var(--disp); font-size: 1rem; font-weight: 800; letter-spacing: -.025em; }
.cl-price s { font-size: .74rem; color: var(--faint); }
.cl-pc { font-size: .68rem; color: var(--faint); }

.mn-addmore {
  display: block;
  padding: 14px 18px;
  border-top: 1px solid var(--line-2);
  font-family: var(--disp);
  font-size: .84rem; font-weight: 800;
  color: var(--accent-700);
  text-align: center;
  transition: background .18s var(--ease);
}
.mn-addmore:hover { background: var(--accent-soft); }

.mn-billcard { padding: 4px 0 0; }
.bill-hd {
  padding: 15px 18px 12px;
  font-family: var(--disp);
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}
.bill-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 18px;
  font-size: .855rem;
  color: var(--ink-2);
}
.bill-row.save { color: var(--ok); font-weight: 700; }
.bill-row.total {
  margin-top: 6px;
  padding: 14px 18px;
  border-top: 1px solid var(--line-2);
  font-family: var(--disp);
  font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink);
}
.bill-note {
  padding: 0 18px 16px;
  font-size: .74rem; line-height: 1.6; color: var(--muted);
}

/* right-hand summary (desktop) */
.mn-summary {
  position: sticky; top: calc(var(--hd-h) + 20px);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--sh-1);
}
.mn-summary h3 {
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 14px;
}
.mn-summary .row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 6px 0;
  font-size: .845rem;
  color: var(--ink-2);
}
.mn-summary .row span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-summary .row.total {
  margin-top: 8px; padding-top: 14px;
  border-top: 1px solid var(--line-2);
  font-family: var(--disp);
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.022em;
  color: var(--ink);
}
.mn-summary .note {
  margin: 14px 0 16px;
  font-size: .745rem; line-height: 1.65; color: var(--muted);
}
.mn-summary .btn { margin-top: 2px; }
/* step-2 forms reuse .mn-summary as their card (inside the LEFT column) — those
   headings are real page headings, not the small "summary" label. */
.mn-cart-layout > div > .mn-summary { box-shadow: none; }
.mn-cart-layout > div > .mn-summary h3 {
  font-family: var(--disp);
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; text-transform: none;
  color: var(--ink);
  margin-bottom: 8px;
}
.mn-cart-layout > div > .mn-summary { padding: 24px; }

/* auth / confirmation card */
.mn-auth-card {
  max-width: 460px;
  margin: 26px auto 40px;
  padding: 30px 28px 32px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.mn-auth-card h1 { font-size: 1.5rem; letter-spacing: -.032em; }
.mn-auth-card .sub { margin: 8px 0 20px; font-size: .865rem; line-height: 1.65; color: var(--muted); }
.mn-auth-card .btn + .btn { margin-top: 10px; }

/* ── 25. ACCOUNT — ORDERS ───────────────────────────────────────────── */
.mn-order-card {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 13px;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.mn-order-card:hover { border-color: var(--line); box-shadow: var(--sh-1); transform: translateY(-2px); }
.mn-order-card .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mn-order-card .qid {
  font-family: var(--disp);
  font-size: .95rem; font-weight: 800; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.mn-order-card .dt { font-size: .74rem; color: var(--faint); margin-top: 4px; }
.mn-order-card .lines {
  margin-top: 10px;
  font-size: .845rem; line-height: 1.6; color: var(--ink-2);
}
.mn-order-card .lines b { color: var(--muted); font-weight: 700; }
.mn-order-card .ft {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--line-2);
}
.mn-order-card .amt { font-family: var(--disp); font-size: 1.12rem; font-weight: 800; letter-spacing: -.025em; }

.mn-od-line {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
}
.mn-od-line > .mn-tl { width: 52px; height: 52px; border-radius: 10px; }
.mn-od-line:last-child { border-bottom: 0; }
.mn-od-line .nm { min-width: 0; font-size: .855rem; font-weight: 500; color: var(--ink); line-height: 1.45; }
.mn-od-line .qt { margin-top: 3px; font-size: .74rem; color: var(--muted); }
.od-off { color: var(--ok); font-weight: 800; }
.od-amt { font-family: var(--disp); font-size: .87rem; font-weight: 800; white-space: nowrap; }

/* status timeline */
div.mn-tl {
  display: flex; align-items: flex-start;
  margin: 20px 0 18px;
  padding: 16px 12px 12px;
  background: var(--tint);
  border-radius: var(--r);
}
.mn-tl-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.mn-tl-step::before {
  content: ''; position: absolute; top: 12px; left: 0; right: 50%;
  height: 2px; background: var(--line);
}
.mn-tl-step::after {
  content: ''; position: absolute; top: 12px; left: 50%; right: 0;
  height: 2px; background: var(--line);
}
.mn-tl-step:first-child::before, .mn-tl-step:last-child::after { display: none; }
.mn-tl-step .dot {
  position: relative; z-index: 2;
  width: 25px; height: 25px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line-3);
  font-family: var(--disp);
  font-size: .68rem; font-weight: 800;
  color: var(--faint);
}
.mn-tl-step .lb {
  font-size: .66rem; font-weight: 700; text-align: center; line-height: 1.3;
  color: var(--faint);
  max-width: 74px;
}
.mn-tl-step.done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.mn-tl-step.done .lb { color: var(--ink-2); }
.mn-tl-step.done::before, .mn-tl-step.done::after { background: var(--ok); }
.mn-tl-step.on .dot { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 0 0 4px rgba(10, 12, 16, .09); }
.mn-tl-step.on .lb { color: var(--ink); font-weight: 800; }
.mn-tl-step.on::before { background: var(--ok); }

/* ── 26. INFO PAGE ──────────────────────────────────────────────────── */
.mn-info { max-width: 880px; }
.mn-info h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.036em; margin: 6px 0 4px; }
.mn-info .lede { font-size: 1rem; color: var(--muted); line-height: 1.7; margin-bottom: 26px; max-width: 620px; }
.mn-info-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.mn-info-nav a {
  font-family: var(--disp);
  font-size: .79rem; font-weight: 700;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line-3);
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.mn-info-nav a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.mn-info section {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 26px 26px 28px;
  margin-bottom: 16px;
  scroll-margin-top: calc(var(--hd-h) + 20px);
}
.mn-info h2 { font-size: 1.22rem; letter-spacing: -.026em; margin-bottom: 14px; }
.mn-info p, .mn-info li { font-size: .9rem; color: var(--ink-2); line-height: 1.78; }
.mn-info p + p { margin-top: 12px; }
.mn-info ul { margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.mn-info li { position: relative; padding-left: 18px; }
.mn-info li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.mn-info .contact-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: .9rem;
}
.mn-info .contact-row:last-child { border-bottom: 0; }
.mn-info .contact-row b {
  min-width: 96px; flex: 0 0 auto;
  font-family: var(--disp);
  font-size: .69rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
}
.mn-info .contact-row a { display: inline; color: var(--accent-700); font-weight: 700; }
.mn-info small { color: var(--muted); }

/* ── 26b. HOME MASTHEAD (editorial statement block) ─────────────────── */
.mn-mast {
  padding: clamp(40px, 6vw, 86px) 0 clamp(30px, 4vw, 54px);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: end;
}
.mn-mast h1 {
  font-size: clamp(2.15rem, 6.4vw, 4.4rem);
  font-weight: 800; letter-spacing: -.05em; line-height: .96;
  text-wrap: balance;
  margin-top: 18px;
}
/* the single serif-italic accent in the whole design — gives the masthead a
   signature without turning the page into a lifestyle brochure */
.mn-mast h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--accent);
}
.mn-mast .mn-mast-side { padding-bottom: 6px; }
.mn-mast p {
  font-size: 1rem; line-height: 1.7; color: var(--ink-2);
  max-width: 44ch;
}
.mn-mast .ax { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
/* headline stats — a confident three-up figure row instead of tick chips */
.mn-mast-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(26px, 4vw, 44px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.mn-mast-stats > div {
  display: flex; flex-direction: column; gap: 5px;
  padding-right: 18px;
  border-left: 1px solid var(--line-2);
  padding-left: 18px;
}
.mn-mast-stats > div:first-child { border-left: 0; padding-left: 0; }
.mn-mast-stats b {
  font-family: var(--disp);
  font-size: clamp(1.05rem, 1.7vw, 1.4rem); font-weight: 800; letter-spacing: -.032em;
  color: var(--ink);
}
.mn-mast-stats span {
  font-size: .78rem; line-height: 1.45; color: var(--muted);
}

/* ── 27. NEW STATIC SECTIONS (home) ─────────────────────────────────── */
/* ── SUPPLY TERMS — a full-width DARK reference table.
      (This replaced a testimonial row: invented customer quotes read as fake,
      so the band now carries verifiable trade terms instead.) ─────────────── */
#mnTermsSec {
  margin: var(--sec-gap) 0 0;
  padding: clamp(44px, 6vw, 86px) 0;
  background: var(--ink);
  color: #fff;
}
#mnTermsSec .mn-sec-hd { border-bottom-color: rgba(255, 255, 255, .14); }
#mnTermsSec .mn-sec-hd h2 { color: #fff; }
#mnTermsSec .mn-sec-hd h2 small { color: rgba(255, 255, 255, .58); }
#mnTermsSec .mn-eyebrow { color: #FDBA74; }
#mnTermsSec .mn-eyebrow::before { background: #FDBA74; }

.mn-terms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r);
  overflow: hidden;
}
.mn-terms-grid > div {
  background: var(--ink);
  padding: 24px 22px 26px;
  transition: background .3s var(--ease);
}
.mn-terms-grid > div:hover { background: #14171D; }
.mn-terms-grid dt {
  font-family: var(--disp);
  font-size: .69rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #FDBA74;
  margin-bottom: 10px;
}
.mn-terms-grid dd {
  font-size: .9rem; line-height: 1.68;
  color: rgba(255, 255, 255, .8);
}

/* ── ABOUT — editorial two-column: heading rail + running copy ───────── */
.mn-about {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  padding-top: 8px;
  border-top: 1px solid var(--line-2);
}
.mn-about-hd h2 {
  margin-top: 16px;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -.04em; line-height: 1.06;
  text-wrap: balance;
}
.mn-about-tx { padding-top: 6px; }
.mn-about-tx p {
  font-size: .975rem; line-height: 1.8; color: var(--ink-2);
  max-width: 62ch;
}
.mn-about-tx p + p { margin-top: 16px; }
.mn-about-tx p:last-child { color: var(--ink); font-weight: 500; }

/* closing CTA band */
.mn-cta {
  position: relative;
  margin-top: var(--sec-gap);
  padding: clamp(34px, 6vw, 62px) clamp(24px, 5vw, 56px);
  border-radius: var(--r-lg);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.mn-cta::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 140% at 88% 110%, rgba(234, 88, 12, .34) 0%, rgba(234, 88, 12, .1) 38%, transparent 66%),
    linear-gradient(100deg, transparent 55%, rgba(234, 88, 12, .07) 100%);
  pointer-events: none;
}
.mn-cta .tx { position: relative; z-index: 2; max-width: 560px; }
.mn-cta h2 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.3rem); letter-spacing: -.036em; }
.mn-cta p { margin-top: 12px; font-size: .93rem; line-height: 1.7; color: rgba(255, 255, 255, .7); }
.mn-cta .ax { position: relative; z-index: 2; display: flex; gap: 11px; flex-wrap: wrap; }
.mn-cta .mn-eyebrow { color: #FDBA74; margin-bottom: 14px; }
.mn-cta .mn-eyebrow::before { background: #FDBA74; }
.mn-cta .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.mn-cta .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ── 28. APPEARANCE VISIBILITY FLAGS (admin toggles) ────────────────── */
html.mn-hide-cardbrand .mn-card-brand { display: none; }
html.mn-hide-offbadge .mn-card-off, html.mn-hide-offbadge .mn-card-price .off { display: none; }
html.mn-hide-qv .mn-card-qv { display: none; }
html.mn-hide-cardfav .mn-card-fav { display: none; }
html.mn-hide-gst .mn-card-body .gst, html.mn-hide-gst .mn-pdp-price .gst { display: none; }
html.mn-hide-search .mn-hd-search, html.mn-hide-search #mnSearchToggle, html.mn-hide-search .mn-msearch { display: none !important; }
html.mn-hide-botnav .mn-botnav { display: none !important; }
html.mn-hide-cartbar .mn-cartbar { display: none !important; }
html.mn-hide-cats #mnCatSec { display: none !important; }
html.mn-hide-featured #mnFeaturedSec { display: none !important; }
html.mn-hide-brands #mnBrandSec { display: none !important; }
html.mn-hide-showcase #mnShowcaseSec { display: none !important; }
html.mn-hide-trust #mnTrust { display: none !important; }
/* .mn-valuebar (the retired four-tile promise strip) intentionally has no rules —
   its markup and admin fields were removed; the masthead figures, Supply terms
   band and Visit-us block carry that information instead. */

/* ============================================================================
   28b. PAGE-STATE BEHAVIOUR (body classes set by store-core injectChrome)
   These are FUNCTIONAL rules, not decoration — they stop duplicate controls
   appearing on a page. Carried over 1:1 from the previous stylesheet.
   ========================================================================== */

/* SHOP + PRODUCT pages carry their OWN search field, so the header search (and
   its mobile toggle / expanding row) must stay hidden there — otherwise two
   search boxes stack on top of each other. */
body.mn-on-shop .mn-hd-search,
body.mn-on-shop #mnSearchToggle,
body.mn-on-shop #mnMSearch { display: none !important; }

/* floating "View Cart" bar: never on the cart page, never on home (home has its
   own CTAs), never on the PDP (its sticky action bar owns the bottom edge). */
body.mn-on-cart .mn-cartbar,
body.mn-on-home .mn-cartbar,
body.mn-stickbar .mn-cartbar { display: none !important; }

/* PDP sticky bar internals — the Add control must dominate, icons stay square */
.mn-pdp-stick > #pAddWrap2 { flex: 1 1 auto; min-width: 0; display: flex; }
.mn-pdp-stick > #pAddWrap2 .btn { width: 100%; min-width: 0; }
.mn-pdp-stick .mn-pdp-step { width: 100%; }
.mn-pdp-stick .btn-icon { flex: 0 0 auto; width: 44px; min-width: 0; padding: 0; }

/* ── 29. MOTION LAYER (store-fx.js / store-motion.js hooks) ─────────── */
html.mn-fx-reveal .mn-card,
html.mn-fx-reveal .mn-cat-tile,
html.mn-fx-reveal .mn-showcase-card,
html.mn-fx-reveal .mn-sec-hd {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
html.mn-fx-reveal .mn-fx-in { opacity: 1; transform: none; }

.mn-fx-btn { position: relative; overflow: hidden; }
.mn-fx-ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .38);
  transform: scale(0);
  animation: mnRipple .6s var(--ease-out) forwards;
  pointer-events: none;
}
.btn-ghost .mn-fx-ripple, .btn:not(.btn-primary):not(.btn-ink):not(.btn-wa) .mn-fx-ripple { background: rgba(10, 12, 16, .09); }
/* card CTAs are light-on-white, so their ripple has to be ember, not white */
.mn-card-ctl .btn .mn-fx-ripple { background: rgba(234, 88, 12, .18); }
@keyframes mnRipple { to { transform: scale(1); opacity: 0; } }

.mn-fx-mag-active { transition: transform .16s var(--ease); }
.mn-fx-tilt-active { transition: transform .12s linear, box-shadow .3s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.mn-fx-reveal .mn-card, html.mn-fx-reveal .mn-cat-tile,
  html.mn-fx-reveal .mn-showcase-card, html.mn-fx-reveal .mn-sec-hd { opacity: 1; transform: none; }
}

/* ============================================================================
   30. RESPONSIVE
   Mobile-first: the *-m column vars drive small screens, the *-d vars take
   over from 900px, matching the admin Appearance controls exactly.
   ========================================================================== */

/* ── ≤ 899px — phones + small tablets ───────────────────────────────── */
@media (max-width: 899px) {
  /* --bot-h = the floating nav island's whole footprint (height + its gap) */
  :root { --hd-h: 58px; --bot-h: 78px; --wrap-pad: 15px; --sec-gap: 46px; --grid-gap: 13px; --sec-title-size: 1.55rem; --card-pad: 12px; --hero-radius: 0px; }

  body { padding-bottom: calc(var(--bot-h) + env(safe-area-inset-bottom)); }

  .mn-hd-search { display: none !important; }
  .mn-hd-bar { gap: 8px; }
  .mn-logo img { width: 31px; height: 31px; }
  .mn-logo b { font-size: .9rem; }
  .mn-logo small { display: none; }
  .mn-botnav { display: flex; }

  .mn-msearch { display: flex; }
  .mn-msearch #mnMSearchClose { height: 44px; }

  .mn-sec-hd { margin-bottom: 16px; padding-bottom: 12px; align-items: center; }
  .mn-sec-hd h2 small { font-size: .77rem; }
  .mn-sec-hd > a { padding: 6px 11px; font-size: .74rem; }

  .mn-hero { margin-top: 14px; }
  .mn-hero-arrow { opacity: 1; width: 32px; height: 32px; font-size: 1rem; }
  .mn-hero-arrow.prev { left: 9px; }
  .mn-hero-arrow.next { right: 9px; }
  .mn-hero-dots { bottom: 10px; padding: 5px 9px; }
  .mn-hero-overlay { padding: 18px 16px 20px; }

  .mn-mast { grid-template-columns: 1fr; padding: 30px 0 26px; gap: 18px; }
  .mn-mast h1 { margin-top: 12px; }
  .mn-mast .mn-mast-side { padding-bottom: 0; }
  .mn-mast .ax .btn { flex: 1; }

  .mn-hero { margin-top: 12px; }
  .mn-mast-stats { grid-template-columns: 1fr 1fr; gap: 16px 0; margin-top: 20px; padding-top: 18px; }
  .mn-mast-stats > div { padding-right: 10px; padding-left: 14px; }
  .mn-mast-stats > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .mn-mast-stats span { font-size: .73rem; }

  #mnTermsSec { padding: 34px 0 38px; }
  .mn-terms-grid { grid-template-columns: 1fr; }
  .mn-terms-grid > div { padding: 18px 16px 20px; }
  .mn-terms-grid dd { font-size: .86rem; }

  .mn-about { grid-template-columns: 1fr; gap: 14px; }
  .mn-about-hd h2 { margin-top: 12px; }
  .mn-about-tx p { font-size: .91rem; }



  .mn-cta { flex-direction: column; align-items: flex-start; border-radius: var(--r); }
  .mn-cta .ax { width: 100%; }
  .mn-cta .ax .btn { flex: 1; }

  /* iOS zooms the whole page when a focused field is under 16px — every text
     control stays at 16px on phones so tapping a field never zooms the layout. */
  input, select, textarea,
  .mn-field input, .mn-field textarea, .mn-field select,
  .mn-hd-search input, .mn-msearch input, .mn-shop-search input,
  .mn-price-row input, .mn-step-inp, .mn-sort { font-size: 16px; }

  /* cards */
  .mn-card-qv { width: 29px; height: 29px; top: 44px; right: 8px; }
  .mn-card-qv svg { width: 13px; height: 13px; }
  .mn-card-fav { width: 29px; height: 29px; top: 8px; right: 8px; }
  .mn-card-fav svg { width: 13px; height: 13px; }
  .mn-card-body { gap: 3px; }
  .mn-card-title { font-size: calc(var(--card-title-size) * .94); }
  .mn-card-price .now { font-size: calc(var(--price-size) * .93); }
  .mn-card-ctl { padding-top: 9px; }
  .mn-card-ctl .btn { height: 34px; font-size: .78rem; }

  /* shop */
  .mn-shop-sticky { padding: 10px var(--wrap-pad); }
  .mn-shop-search { height: 42px; padding: 0 13px; }
  .mn-shop-filtrow { flex-wrap: wrap; }
  .mn-applied { order: 3; flex-basis: 100%; }
  .mn-applied:empty { display: none; }
  .mn-sort { flex: 1; height: 38px; padding: 0 28px 0 12px; }
  .mn-filtpill { height: 38px; padding: 0 14px; font-size: .8rem; }
  .mn-shop-chips { margin: 0 0 14px; gap: 10px; }
  .mn-shop-body { padding-top: 16px; }
  .mn-loadmore { padding: 26px 0 6px; }
  .mn-loadmore .btn { width: 100%; }

  /* pdp */
  .mn-pdp { grid-template-columns: 1fr; gap: 22px; }
  .mn-gallery { position: static; }
  .mn-gallery .main { border-radius: var(--r); }
  .mn-thumbs img { width: 56px; height: 56px; }
  .mn-pdp-actions { display: none; }
  .mn-pdp-stick {
    display: flex;
    left: 12px; right: 12px;
    bottom: calc(var(--bot-h) + env(safe-area-inset-bottom));
    padding: 9px 10px;
    border: 1px solid var(--line-2);
    border-radius: 18px;
    box-shadow: 0 12px 34px -14px rgba(10, 12, 16, .34);
  }
  body.mn-stickbar { padding-bottom: calc(var(--bot-h) + 66px + env(safe-area-inset-bottom)); }
  .mn-pdp-trust { grid-template-columns: 1fr; }
  .mn-pdp-price { margin-top: 18px; }
  .mn-pdp-sku > div { font-size: .7rem; }

  /* cart */
  .mn-cart-layout { grid-template-columns: 1fr; gap: 0; }
  .mn-cart-side { display: none; }
  .mn-cline { grid-template-columns: 62px minmax(0, 1fr); padding: 14px; gap: 12px; }
  .mn-cline > .mn-tl, .cl-thumb-link { width: 62px; height: 62px; }
  .cl-right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .cl-price { align-items: flex-end; }
  .mn-steps { padding: 18px 0 16px; }
  .mn-step { font-size: .74rem; }

  /* account */
  .mn-prow { grid-template-columns: 1fr; }
  div.mn-tl { padding: 14px 6px 10px; }
  .mn-tl-step .lb { font-size: .6rem; max-width: 60px; }

  /* every bottom bar becomes a floating island, stacked above the nav island */
  .mn-cartbar { bottom: calc(var(--bot-h) + env(safe-area-inset-bottom)); padding: 0 12px; }
  .mn-cartbar-inner { height: 50px; }
  body.mn-cartbar-on { padding-bottom: calc(var(--bot-h) + 62px + env(safe-area-inset-bottom)); }
  /* …but home / cart / PDP hide that bar, so they must not reserve room for it */
  body.mn-on-home.mn-cartbar-on,
  body.mn-on-cart.mn-cartbar-on { padding-bottom: calc(var(--bot-h) + env(safe-area-inset-bottom)); }

  body.mn-has-quotebar { padding-bottom: calc(var(--bot-h) + 74px + env(safe-area-inset-bottom)); }
  .mn-quotebar {
    left: 12px; right: 12px;
    bottom: calc(var(--bot-h) + env(safe-area-inset-bottom));
    padding: 9px 10px 9px 16px;
    border: 1px solid var(--line-2);
    border-radius: 18px;
    box-shadow: 0 12px 34px -14px rgba(10, 12, 16, .34);
  }
  .mn-quotebar .qb-amt { font-size: 1.08rem; }
  .mn-quotebar .qb-btn { height: 42px; padding: 0 18px; font-size: .84rem; border-radius: 12px; }

  /* modals become bottom sheets */
  .mn-modal { padding: 0; place-items: end stretch; }
  .mn-modal-card {
    max-width: 100%; max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%);
  }
  .mn-modal.open .mn-modal-card { transform: none; }
  #mnQvCard { grid-template-columns: 1fr; }
  .mn-qv-img { aspect-ratio: 16/11; }
  .mn-qv-body { padding: 18px 18px 24px; }

  /* footer */
  .mn-ft { padding-top: 40px; margin-top: 52px; }
  .mn-ft-grid { grid-template-columns: 1fr 1fr; gap: 26px; padding-bottom: 34px; }
  .mn-ft-grid > div:first-child { grid-column: 1 / -1; }
  .mn-ft-grid > div:first-child h4 { font-size: 1.16rem; }

  #mnToast { bottom: calc(var(--bot-h) + 18px + env(safe-area-inset-bottom)); left: 16px; right: 16px; max-width: none; transform: translateY(20px); }
  #mnToast.show { transform: none; }
  /* clear whichever bottom bar is showing */
  body.mn-cartbar-on #mnToast,
  body.mn-has-quotebar #mnToast { bottom: calc(var(--bot-h) + 84px + env(safe-area-inset-bottom)); }
  body.mn-stickbar #mnToast { bottom: calc(var(--bot-h) + 74px + env(safe-area-inset-bottom)); }

  .mn-empty { padding: 42px 18px; }
  .mn-auth-card { padding: 24px 20px 26px; margin: 16px auto 30px; border-radius: var(--r); }

  .mn-info section { padding: 20px 18px 22px; }
  .mn-info .contact-row { flex-wrap: wrap; gap: 4px 10px; }
  .mn-info .contact-row b { min-width: 100%; }
}

/* ── ≤ 420px — compact phones ───────────────────────────────────────── */
@media (max-width: 420px) {
  :root { --grid-gap: 10px; }
  .mn-cat-tile .meta { padding: 8px 7px 10px; }
  .mn-card-body { padding: 10px; }
  .mn-chip .lbl { max-width: 120px; }
  .mn-sugg { width: 60px; }
  .mn-sugg .th { width: 50px; height: 50px; }
}

/* ── ≥ 900px — tablet landscape + desktop ───────────────────────────── */
@media (min-width: 900px) {
  .mn-hd-search { display: flex; }
  #mnSearchToggle { display: none; }
  .mn-msearch { display: none !important; }

  .mn-cat-grid { grid-template-columns: repeat(var(--cat-cols-d), minmax(0, 1fr)); }
  .mn-brand-grid { grid-template-columns: repeat(var(--brand-cols-d), minmax(0, 1fr)); }
  .mn-showcase-grid { grid-template-columns: repeat(var(--coll-cols-d), minmax(0, 1fr)); }
  .mn-prod-grid { grid-template-columns: repeat(var(--prod-cols-d), minmax(0, 1fr)); }

  .mn-billcard { display: none; }
  .mn-pdp-stick { display: none !important; }
  body.mn-stickbar { padding-bottom: 0; }

  /* desktop: the floating cart bar tucks into the bottom-right corner so it
     never sits under the toast or over the page's own CTAs */
  .mn-cartbar { left: auto; right: 24px; bottom: 24px; width: auto; max-width: 380px; padding: 0; }
  .mn-cartbar-inner { max-width: none; }
  body.mn-cartbar-on { padding-bottom: 0; }

  /* desktop cart page uses the sticky summary card's button — the mobile
     proceed bar would be a duplicate CTA */
  .mn-quotebar { display: none !important; }
  body.mn-has-quotebar { padding-bottom: 0; }

  /* one toolbar row: search · applied filters · sort · filters */
  .mn-shop-sticky { display: flex; align-items: center; gap: 12px; padding: 12px var(--wrap-pad); }
  .mn-shop-sticky .mn-shop-search { flex: 0 1 420px; }
  .mn-shop-filtrow { margin-top: 0; flex: 1 1 auto; justify-content: flex-end; }
  .mn-applied { justify-content: flex-end; }
}

/* ── ≥ 1200px — roomy desktop ───────────────────────────────────────── */
@media (min-width: 1200px) {
  :root { --wrap-pad: 32px; --sec-gap: 92px; --grid-gap: 28px; --sec-title-size: 2.7rem; }
  .mn-sec-hd { margin-bottom: 36px; }
}

/* ── ≥ 1080px — room for the primary nav ────────────────────────────── */
@media (min-width: 1080px) {
  .mn-hd-nav { display: flex; }
  :root { --hd-h: 72px; }
}

/* ── print ──────────────────────────────────────────────────────────── */
@media print {
  .mn-hd, .mn-botnav, .mn-cartbar, .mn-quotebar, .mn-pdp-stick,
  .mn-drawer, .mn-scrim, #mnTopBtn, #mnScrollProg, #mnToast, .mn-ft { display: none !important; }
  body { background: #fff; padding: 0; }
}