/* ================================================================
   NOIR MARKET — discovery, storefront, product detail.
   Scoped under .noir-v2 (public pages inherit the Talent Directory's
   paper-and-slab language). Canonical design:
   design-previews/market-design.html
   ================================================================ */

/* ── layout escape ──────────────────────────────────────────────
   Block themes (is-layout-constrained) cap direct children of
   .entry-content at the theme's content-size — 645px on this install —
   which squeezes the Market grid to 2 columns on a 1440px screen.
   Our own .noir-wrap already caps at 1320px, so this wrapper opts out.
   Scoped to Market pages deliberately: the Talent Directory and Jobs
   Board sit under the same constraint, but widening those is a
   separate visual decision, not a side effect of shipping Market. */
.noir-v2.noir-market-page { max-width: none !important; width: 100% !important; }

/* ── shared ─────────────────────────────────────────────────── */
.noir-v2 .nm-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--noir-orange);
}

/* ── discovery hero ─────────────────────────────────────────── */
.noir-v2 .mk-hero { padding: 44px 0 26px; }
.noir-v2 .mk-hero h1 {
  font-family: var(--noir-serif); font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 800; letter-spacing: -1.6px; line-height: 1.02; margin: 10px 0 0;
}
.noir-v2 .mk-hero h1 em { font-style: italic; color: var(--noir-orange); }
.noir-v2 .mk-hero__row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 28px; flex-wrap: wrap; margin-top: 14px;
}
.noir-v2 .mk-hero__lead { max-width: 440px; color: #5f584d; font-size: 15px; line-height: 1.6; }

/* search + location */
.noir-v2 .mk-search { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.noir-v2 .mk-search__field {
  flex: 1; min-width: 240px; display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--noir-hair);
  border-radius: var(--r-pill); padding: 13px 20px;
}
.noir-v2 .mk-search__field svg { color: var(--noir-muted); flex: none; }
.noir-v2 .mk-search__field input {
  border: 0; outline: 0; flex: 1; font: inherit; font-size: 15px;
  background: transparent; color: var(--noir-ink);
}
.noir-v2 .mk-search__field input::placeholder { color: var(--noir-muted); }
.noir-v2 .mk-loc {
  display: inline-flex; align-items: center; gap: 8px; background: var(--noir-ink);
  color: var(--noir-paper); border: 0; border-radius: var(--r-pill);
  padding: 13px 20px; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.noir-v2 .mk-loc.is-on { background: var(--noir-orange); }
.noir-v2 .mk-loc svg { flex: none; }
.noir-v2 .mk-loc[disabled] { opacity: .6; cursor: wait; }

/* category chips */
.noir-v2 .mk-cats {
  display: flex; gap: 9px; margin-top: 20px; overflow-x: auto;
  padding-bottom: 4px; scrollbar-width: none;
}
.noir-v2 .mk-cats::-webkit-scrollbar { display: none; }
.noir-v2 .mk-cat {
  flex: none; display: inline-flex; align-items: center; gap: 7px; background: #fff;
  border: 1px solid var(--noir-hair); border-radius: var(--r-pill);
  padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--noir-ink-2);
  cursor: pointer; transition: all var(--dur-fast); white-space: nowrap; text-decoration: none;
}
.noir-v2 .mk-cat:hover { border-color: rgba(15,15,15,.3); }
.noir-v2 .mk-cat.is-on { background: var(--noir-ink); color: var(--noir-paper); border-color: var(--noir-ink); }

/* filter bar */
.noir-v2 .mk-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-top: 22px; padding: 16px 0;
  border-top: 1px solid var(--noir-hair); border-bottom: 1px solid var(--noir-hair);
}
.noir-v2 .mk-bar__filters { display: flex; gap: 8px; flex-wrap: wrap; }
.noir-v2 .mk-sel {
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A7468' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--noir-hair); border-radius: var(--r-pill);
  padding: 9px 34px 9px 15px; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--noir-ink-2); cursor: pointer;
}
.noir-v2 .mk-sort { display: flex; background: var(--noir-paper-2); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.noir-v2 .mk-sort a {
  border: 0; background: transparent; padding: 8px 15px; border-radius: var(--r-pill);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--noir-muted);
  cursor: pointer; text-decoration: none; transition: all var(--dur-fast);
}
.noir-v2 .mk-sort a.is-on { background: #fff; color: var(--noir-ink); box-shadow: 0 1px 3px rgba(15,15,15,.1); }
.noir-v2 .mk-count { font-size: 13.5px; color: var(--noir-muted); padding: 18px 0 4px; }
.noir-v2 .mk-count b { color: var(--noir-ink); font-weight: 700; }

/* ── product grid — square media, 2-up on mobile ─────────────── */
.noir-v2 .mk-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 26px 20px; padding: 14px 0 70px;
}
.noir-v2 .nm-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
.noir-v2 .nm-card__media {
  position: relative; aspect-ratio: 1/1; border-radius: 16px;
  overflow: hidden; background: var(--noir-paper-2);
}
.noir-v2 .nm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.noir-v2 .nm-card:hover .nm-card__media img { transform: scale(1.05); }
.noir-v2 .nm-ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 44px; }
.noir-v2 .nm-card__chips {
  position: absolute; left: 11px; right: 11px; bottom: 11px; display: flex;
  justify-content: space-between; align-items: center; gap: 7px; pointer-events: none;
}
.noir-v2 .nm-chip-lite {
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px); padding: 6px 11px;
  border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 5px; color: var(--noir-ink);
}
.noir-v2 .nm-chip-lite svg { color: var(--noir-orange); }
.noir-v2 .nm-chip-dark {
  background: rgba(15,15,15,.74); backdrop-filter: blur(8px); color: #fff;
  padding: 6px 11px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600;
}
.noir-v2 .nm-card__flash {
  position: absolute; top: 11px; left: 11px; background: var(--noir-orange); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
}
.noir-v2 .nm-card__body { padding: 13px 3px 0; }
.noir-v2 .nm-card__price {
  font-family: var(--noir-serif); font-size: 19px; font-weight: 700;
  letter-spacing: -.4px; display: flex; align-items: baseline; gap: 8px;
}
.noir-v2 .nm-card__was {
  font-family: var(--noir-sans); font-size: 13px; font-weight: 400;
  color: var(--noir-muted); text-decoration: line-through;
}
.noir-v2 .nm-card__title {
  font-size: 14px; line-height: 1.4; color: var(--noir-ink-2); margin-top: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.noir-v2 .nm-card__seller {
  display: flex; align-items: center; gap: 7px; margin-top: 9px;
  font-size: 12.5px; color: var(--noir-muted);
}
.noir-v2 .nm-av {
  width: 19px; height: 19px; border-radius: 50%; background: var(--noir-plum); color: #fff;
  display: grid; place-items: center; font-size: 9px; font-weight: 700; flex: none;
  overflow: hidden;
}
.noir-v2 .nm-av img { width: 100%; height: 100%; object-fit: cover; }
.noir-v2 .nm-tick {
  width: 13px; height: 13px; border-radius: 50%; background: var(--noir-orange); color: #fff;
  display: grid; place-items: center; font-size: 8px; flex: none;
}
/* sold-out — dimmed, never hidden. Proof of past sales sells the shop. */
.noir-v2 .nm-card.is-sold .nm-card__media { opacity: .45; }
.noir-v2 .nm-card.is-sold .nm-card__price { color: var(--noir-muted); }
.noir-v2 .nm-card__sold { position: absolute; inset: 0; display: grid; place-items: center; }
.noir-v2 .nm-card__sold span {
  background: var(--noir-ink); color: var(--noir-paper); font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; padding: 7px 14px; border-radius: var(--r-pill);
}

/* ── storefront ──────────────────────────────────────────────── */
.noir-v2 .sf-banner { position: relative; height: 210px; background: linear-gradient(120deg, #3D2A52, #CB360F); background-size: cover; background-position: center; }
.noir-v2 .sf-head { position: relative; padding: 0 30px 26px; max-width: 1240px; margin: 0 auto; }
.noir-v2 .sf-logo {
  width: 104px; height: 104px; border-radius: 24px; border: 5px solid var(--noir-paper);
  background: var(--noir-butter); margin-top: -52px; display: grid; place-items: center;
  font-family: var(--noir-serif); font-size: 38px; font-weight: 700;
  position: relative; z-index: 2; overflow: hidden;
}
.noir-v2 .sf-logo img { width: 100%; height: 100%; object-fit: cover; }
.noir-v2 .sf-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: 16px; }
.noir-v2 .sf-name {
  font-family: var(--noir-serif); font-size: 33px; font-weight: 800;
  letter-spacing: -.9px; display: flex; align-items: center; gap: 10px; margin: 0;
}
.noir-v2 .sf-name .nm-tick { width: 20px; height: 20px; font-size: 11px; }
.noir-v2 .sf-tag { color: #5f584d; font-size: 14.5px; margin-top: 5px; }
.noir-v2 .sf-meta { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 13px; }
.noir-v2 .nm-meta-pill {
  display: inline-flex; align-items: center; gap: 6px; background: var(--noir-paper-2);
  border-radius: var(--r-pill); padding: 7px 13px; font-size: 12.5px; font-weight: 500; color: var(--noir-ink-2);
}
.noir-v2 .nm-meta-pill svg { color: var(--noir-muted); }
.noir-v2 .sf-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.noir-v2 .nm-icon-ghost {
  width: 42px; height: 42px; border-radius: var(--r-pill); border: 1px solid rgba(15,15,15,.22);
  background: transparent; display: grid; place-items: center; cursor: pointer;
  color: var(--noir-ink-2); font-size: 17px; text-decoration: none;
}
.noir-v2 .nm-icon-ghost:hover { background: rgba(15,15,15,.05); }
.noir-v2 .sf-tabs {
  display: flex; gap: 26px; border-bottom: 1px solid var(--noir-hair);
  margin-top: 26px; overflow-x: auto; scrollbar-width: none;
}
.noir-v2 .sf-tabs::-webkit-scrollbar { display: none; }
.noir-v2 .sf-tab {
  padding: 0 0 13px; font-size: 14px; font-weight: 600; color: var(--noir-muted);
  cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
  margin-bottom: -1px; text-decoration: none;
}
.noir-v2 .sf-tab.is-on { color: var(--noir-ink); border-bottom-color: var(--noir-orange); }

/* owner bar */
.noir-v2 .sf-owner {
  background: var(--noir-ink); color: var(--noir-paper); padding: 11px 30px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13.5px;
}
.noir-v2 .sf-owner__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--noir-lime); flex: none; }
.noir-v2 .sf-owner__sp { flex: 1; }
.noir-v2 .sf-owner a {
  color: var(--noir-paper); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(244,240,232,.4); padding-bottom: 1px;
}

/* about + reviews */
.noir-v2 .sf-about {
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 44px; padding: 38px 0;
  border-top: 1px solid var(--noir-hair); margin-top: 14px;
}
.noir-v2 .sf-about h3 { font-family: var(--noir-serif); font-size: 21px; font-weight: 700; margin: 0 0 13px; }
.noir-v2 .sf-about p { font-size: 14.5px; line-height: 1.75; color: var(--noir-ink-2); }
.noir-v2 .sf-policy { display: flex; flex-direction: column; gap: 13px; }
.noir-v2 .sf-policy__row { display: flex; gap: 11px; font-size: 13.5px; line-height: 1.55; color: var(--noir-ink-2); }
.noir-v2 .sf-policy__row svg { color: var(--noir-moss); flex: none; margin-top: 2px; }
.noir-v2 .sf-policy__row b { display: block; color: var(--noir-ink); margin-bottom: 1px; }
.noir-v2 .sf-rev { padding: 34px 0 60px; border-top: 1px solid var(--noir-hair); }
.noir-v2 .nm-report { display: block; text-align: center; margin-top: 22px; font-size: 12.5px; color: var(--noir-muted); text-decoration: underline; }

/* ── product detail ─────────────────────────────────────────── */
.noir-v2 .pd { display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; padding: 34px 0 70px; }
.noir-v2 .pd-main { aspect-ratio: 1/1; border-radius: var(--r-lg); overflow: hidden; background: var(--noir-paper-2); }
.noir-v2 .pd-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.noir-v2 .pd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.noir-v2 .pd-thumb {
  width: 74px; height: 74px; border-radius: 12px; overflow: hidden;
  background: var(--noir-paper-2); cursor: pointer; border: 2px solid transparent;
  display: grid; place-items: center; font-size: 26px; padding: 0;
}
.noir-v2 .pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.noir-v2 .pd-thumb.is-on { border-color: var(--noir-ink); }
.noir-v2 .pd-price {
  font-family: var(--noir-serif); font-size: 38px; font-weight: 800;
  letter-spacing: -1.2px; display: flex; align-items: baseline; gap: 12px;
}
.noir-v2 .pd-price .was { font-family: var(--noir-sans); font-size: 18px; font-weight: 400; color: var(--noir-muted); text-decoration: line-through; }
.noir-v2 .pd-title { font-family: var(--noir-serif); font-size: 25px; font-weight: 600; line-height: 1.25; margin: 8px 0 0; }
.noir-v2 .pd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.noir-v2 .nm-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 6px 12px; font-size: 12px; font-weight: 600; }
.noir-v2 .nm-pill--stock { background: var(--st-success-bg); color: var(--st-success-fg); }
.noir-v2 .nm-pill--out   { background: var(--st-danger-bg);  color: var(--st-danger-fg); }
.noir-v2 .nm-pill--cond  { background: var(--noir-paper-2);  color: var(--noir-ink-2); }
.noir-v2 .nm-pill--pay   { background: var(--st-info-bg);    color: var(--st-info-fg); }
.noir-v2 .pd-desc { margin-top: 20px; font-size: 14.5px; line-height: 1.7; color: var(--noir-ink-2); }
.noir-v2 .pd-block { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--noir-hair); }
.noir-v2 .pd-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--noir-muted); margin-bottom: 12px; }
.noir-v2 .pd-deliv { display: flex; flex-direction: column; gap: 9px; }
.noir-v2 .pd-deliv div { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--noir-ink-2); }
.noir-v2 .pd-deliv svg { color: var(--noir-moss); flex: none; }
.noir-v2 .pd-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.noir-v2 .pd-seller {
  display: flex; align-items: center; gap: 13px; margin-top: 24px; padding: 16px;
  background: #fff; border: 1px solid var(--noir-hair); border-radius: var(--r-md);
}
.noir-v2 .pd-seller__av {
  width: 46px; height: 46px; border-radius: 50%; background: var(--noir-plum); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none; overflow: hidden;
}
.noir-v2 .pd-seller__av img { width: 100%; height: 100%; object-fit: cover; }
.noir-v2 .pd-seller__name { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 7px; }
.noir-v2 .pd-seller__meta { font-size: 12.5px; color: var(--noir-muted); margin-top: 3px; }
.noir-v2 .pd-safety {
  margin-top: 16px; display: flex; gap: 11px; padding: 14px;
  background: rgba(63,77,47,.07); border-radius: var(--r-md);
  font-size: 12.5px; line-height: 1.6; color: #414a34;
}
.noir-v2 .pd-safety svg { color: var(--noir-moss); flex: none; margin-top: 1px; }
/* sticky mobile buy bar — the buy decision must not require scrolling back up */
.noir-v2 .pd-sticky { display: none; }

/* ── empty states ───────────────────────────────────────────── */
.noir-v2 .nm-empty { text-align: center; padding: 64px 24px; }
.noir-v2 .nm-empty__ico { font-size: 44px; }
.noir-v2 .nm-empty__t { font-family: var(--noir-serif); font-size: 22px; font-weight: 700; margin-top: 14px; }
.noir-v2 .nm-empty__b { font-size: 14.5px; line-height: 1.65; color: var(--noir-muted); max-width: 400px; margin: 9px auto 0; }
.noir-v2 .nm-empty__cta { margin-top: 20px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* buttons that only exist in Market */
.noir-v2 .noir-btn--wa { background: #1f2937; color: #fff; border-color: #1f2937; }
.noir-v2 .noir-btn--wa:hover { background: #111827; }
.noir-v2 .noir-btn--shop { background: var(--noir-ink); color: var(--noir-paper); border-color: var(--noir-ink); }
.noir-v2 .noir-btn--shop:hover { background: var(--noir-ink-2); }

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .noir-v2 .pd { grid-template-columns: 1fr; gap: 28px; }
  .noir-v2 .sf-about { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  /* 2-up: browsing goods is a scanning task; 1-up makes a long feed feel endless */
  .noir-v2 .mk-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .noir-v2 .nm-card__price { font-size: 16.5px; }
  .noir-v2 .nm-card__title { font-size: 13px; }
  .noir-v2 .sf-banner { height: 140px; }
  .noir-v2 .sf-logo { width: 80px; height: 80px; margin-top: -40px; font-size: 29px; }
  .noir-v2 .sf-name { font-size: 25px; }
  .noir-v2 .sf-head { padding: 0 18px 22px; }
  .noir-v2 .sf-owner { padding: 11px 18px; }
  .noir-v2 .pd-price { font-size: 31px; }

  /* Pin the buy decision into the thumb zone. */
  .noir-v2 .pd-sticky {
    /* bottom: var(--noir-kb) lifts the bar above the software keyboard; the
       padding then only needs comfort spacing, since the lift already cleared
       the keys and the home indicator sits behind them. */
    display: flex; position: fixed; left: 0; right: 0; bottom: var(--noir-kb, 0px); z-index: 900;
    align-items: center; gap: 12px; padding: 12px 16px calc(12px + var(--noir-bottom-clear, 0px));
    transition: bottom .18s cubic-bezier(.2,.9,.3,1);
    background: rgba(244,240,232,.96); backdrop-filter: blur(16px);
    border-top: 1px solid var(--noir-hair);
  }
  .noir-v2 .pd-sticky__price { font-family: var(--noir-serif); font-size: 21px; font-weight: 800; flex: none; }
  .noir-v2 .pd-sticky .noir-btn { flex: 1; }
  .noir-v2 .pd-actions { display: none; }
  .noir-v2 .nm-market-pad { padding-bottom: 88px; }
}

/* ================================================================
   SELLER MANAGEMENT (.nsm) — shared by the member (v2) and trainee
   (v3) dashboards. Scoped to .nsm, NOT .noir-v2, precisely because it
   has to render inside both shells. Both are dark, so one skin serves.
   ================================================================ */
.nsm { --nsm-text:#F4F0E8; --nsm-muted:rgba(244,240,232,.55);
       --nsm-surface:rgba(244,240,232,.045); --nsm-line:rgba(244,240,232,.1);
       --nsm-lime:#D6E36A; color: var(--nsm-text); font-family: var(--noir-sans); }

.nsm-alert { padding:12px 16px; border-radius:var(--r-md); font-size:13.5px; margin-bottom:18px; }
.nsm-alert--err { background:rgba(203,54,15,.16); color:#ff8a5c; }
.nsm-alert--ok  { background:rgba(214,227,106,.14); color:var(--nsm-lime); }

.nsm-head { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:22px; }
.nsm-head h2 { font-family:var(--noir-serif); font-size:24px; font-weight:700; color:var(--nsm-text); margin:0; }
.nsm-head p  { font-size:13px; color:var(--nsm-muted); margin:3px 0 0; }
.nsm-head a  { color:var(--nsm-muted); }

.nsm-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; }
.nsm-kpi { background:var(--nsm-surface); border:1px solid var(--nsm-line); border-radius:var(--r-md); padding:15px 17px; }
.nsm-kpi__n { font-family:var(--noir-serif); font-size:24px; font-weight:800; letter-spacing:-.6px; }
.nsm-kpi__l { font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--nsm-muted); margin-top:5px; }
.nsm-kpi--pay .nsm-kpi__n { color:var(--nsm-lime); }

.nsm-tabs { display:flex; gap:5px; background:var(--nsm-surface); border-radius:var(--r-pill); padding:4px; margin-bottom:20px; width:fit-content; flex-wrap:wrap; }
.nsm-tab { padding:9px 18px; border-radius:var(--r-pill); font-size:13px; font-weight:600; color:var(--nsm-muted); text-decoration:none; }
.nsm-tab.is-on { background:var(--noir-orange); color:#fff; }
/* The pill slides under the tab you picked instead of snapping (v5.5.0). */
.nsm-tab { transition: background-color .22s ease, color .22s ease; }

/* Tab panes slide in on arrival (v5.5.0).
   The tabs are real links and the server renders ONLY the active pane, so there
   are never two panes on screen to transition between — this is an entry
   animation, which is what actually reads as a smooth switch. Doing it properly
   (cross-fading live panes) would mean rendering all six panes on every load or
   fetching them over AJAX, for a visual nicety.
   `backwards` fill matters: without it the pane paints at full opacity for one
   frame before the animation starts, which shows up as a flash. */
.nsm-pane {
  animation: nsm-slide-in .34s cubic-bezier(.22, .8, .3, 1) backwards;
}
@keyframes nsm-slide-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nsm-pane { animation: none; }
  .nsm-tab  { transition: none; }
}

.nsm-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 18px;
  border-radius:var(--r-pill); font-size:13.5px; font-weight:600; border:1px solid transparent;
  cursor:pointer; text-decoration:none; font-family:inherit; }
.nsm-btn--primary { background:var(--noir-orange); color:#fff; }
.nsm-btn--primary:hover { background:var(--noir-orange-2); }
.nsm-btn--ghost { background:transparent; color:var(--nsm-text); border-color:var(--nsm-line); }
.nsm-btn--ghost:hover { background:rgba(244,240,232,.06); }
.nsm-btn--sm { padding:8px 14px; font-size:12.5px; }

/* product rows */
.nsm-row-item { display:flex; align-items:center; gap:13px; padding:13px; background:var(--nsm-surface);
  border:1px solid var(--nsm-line); border-radius:var(--r-md); margin-bottom:9px; }
.nsm-row-item__img { width:52px; height:52px; border-radius:11px; overflow:hidden; flex:none;
  display:grid; place-items:center; font-size:22px; font-weight:700; color:#fff; }
.nsm-row-item__img img { width:100%; height:100%; object-fit:cover; }
.nsm-row-item__main { flex:1; min-width:0; }
.nsm-row-item__t { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nsm-row-item__m { font-size:12px; color:var(--nsm-muted); margin-top:4px; display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.nsm-row-item__p { font-family:var(--noir-serif); font-size:16px; font-weight:700; flex:none; }
.nsm-icon { width:32px; height:32px; border-radius:9px; background:rgba(244,240,232,.07); border:1px solid var(--nsm-line);
  color:var(--nsm-muted); display:grid; place-items:center; cursor:pointer; flex:none; text-decoration:none; font-size:14px; }
.nsm-icon:hover { background:rgba(244,240,232,.13); }

.nsm-pill { border-radius:var(--r-pill); padding:4px 10px; font-size:10.5px; font-weight:700; }
.nsm-pill--live { background:rgba(214,227,106,.16); color:var(--nsm-lime); }
.nsm-pill--off  { background:rgba(244,240,232,.1);  color:var(--nsm-muted); }
.nsm-pill--new  { background:rgba(203,54,15,.2);    color:#ff8a5c; }

/* orders */
.nsm-order { background:var(--nsm-surface); border:1px solid var(--nsm-line); border-radius:var(--r-md); padding:15px; margin-bottom:10px; }
.nsm-order__top { display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:13.5px; }
.nsm-order__sp { flex:1; }
.nsm-order__body { margin-top:9px; font-size:13.5px; color:var(--nsm-text); }
.nsm-order__acts { display:flex; gap:9px; margin-top:12px; align-items:center; flex-wrap:wrap; }
.nsm-order__acts form { display:inline; }

/* earnings */
.nsm-payout { background:linear-gradient(135deg,rgba(214,227,106,.13),rgba(63,77,47,.1));
  border:1px solid rgba(214,227,106,.25); border-radius:var(--r-md); padding:20px;
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.nsm-payout__n { font-family:var(--noir-serif); font-size:30px; font-weight:800; color:var(--nsm-lime); letter-spacing:-.8px; }
.nsm-payout__l { font-size:12px; color:var(--nsm-muted); margin-top:4px; }
.nsm-earn-row { display:flex; gap:9px; margin-top:12px; flex-wrap:wrap; }

/* forms */
.nsm-form { background:var(--nsm-surface); border:1px solid var(--nsm-line); border-radius:var(--r-md); padding:20px; margin-bottom:20px; }
.nsm-form h3 { font-family:var(--noir-serif); font-size:16px; font-weight:700; margin:22px 0 12px; color:var(--nsm-text); }
.nsm-form h3:first-child { margin-top:0; }
.nsm-field { margin-bottom:14px; flex:1; min-width:150px; }
.nsm-field label { display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--nsm-muted); margin-bottom:6px; }
.nsm-row { display:flex; gap:12px; flex-wrap:wrap; }
/* IDs would be cleaner, but the member dashboard's global textarea reset is
   aggressive — these need to win on their own. */
.nsm .nsm-field input[type=text], .nsm .nsm-field input[type=number],
.nsm .nsm-field input[type=file], .nsm .nsm-field select, .nsm .nsm-field textarea {
  width:100% !important; background:rgba(0,0,0,.25) !important; border:1px solid var(--nsm-line) !important;
  border-radius:var(--r-sm) !important; padding:10px 12px !important; font:inherit !important;
  font-size:14px !important; color:var(--nsm-text) !important; box-sizing:border-box !important;
}
.nsm .nsm-field textarea { min-height:90px !important; resize:vertical !important; line-height:1.55 !important; }
.nsm .nsm-field input::placeholder, .nsm .nsm-field textarea::placeholder { color:rgba(244,240,232,.35) !important; }
.nsm .nsm-field select option { background:#1a1510; color:var(--nsm-text); }
.nsm-hint { display:block; font-size:11.5px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--nsm-muted); margin-top:5px; }
.nsm-hint__tel { color: var(--noir-orange, #CB360F); font-weight: 600; text-decoration: none; }
.nsm-hint__tel:hover { text-decoration: underline; }
.nsm-check { display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; font-size:13.5px; cursor:pointer; }
.nsm-check input { margin-top:2px; flex:none; }
.nsm-actions { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.nsm-thumbs { display:flex; gap:8px; margin-top:9px; }
.nsm-thumbs img { width:52px; height:52px; border-radius:9px; object-fit:cover; }

/* empty */
.nsm-empty { text-align:center; padding:52px 20px; }
.nsm-empty__ico { font-size:38px; }
.nsm-empty__t { font-family:var(--noir-serif); font-size:19px; font-weight:700; margin-top:12px; }
.nsm-empty p { font-size:13.5px; color:var(--nsm-muted); margin:8px 0 18px; }

@media (max-width:768px) {
  .nsm-kpis { grid-template-columns:repeat(2,1fr); }
  .nsm-row-item__p { display:none; }
  .nsm-tabs { width:100%; }
}

/* ================================================================
   QUICK VIEW / ADD-TO-ORDER MODAL (.qv)
   Bottom sheet on mobile, centred dialog on desktop — the Uber Eats
   item sheet. NOT scoped to .noir-v2: the root is appended to <body>,
   outside the plugin wrapper.
   ================================================================ */
.qv-root { position: fixed; inset: 0; z-index: 10000; display: none; }
.qv-root.is-open { display: block; }
body.qv-lock { overflow: hidden; }

.qv-scrim {
  position: absolute; inset: 0; background: rgba(15,15,15,.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  animation: qvFade .2s ease both;
}
@keyframes qvFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes qvRise { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } }
@keyframes qvPop  { from { opacity: 0; transform: translate(-50%,-48%) scale(.97) } to { opacity: 1; transform: translate(-50%,-50%) scale(1) } }

.qv-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(560px, calc(100vw - 40px)); max-height: min(88vh, 780px);
  border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column;
  animation: qvPop .24s cubic-bezier(.34,1.3,.5,1) both;

  /* Glass (v5.8.0). The panel used to be flat `--noir-paper`, which read as a
     beige card floating on a blurred page rather than glass. Three things make
     it glass and all three matter: a TRANSLUCENT tint so the scrim shows
     through, the blur that focuses it, and a hairline top highlight — without
     that highlight it just looks like a semi-transparent box. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(244,240,232,.80) 60%, rgba(244,240,232,.84) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 30px 80px rgba(15,15,15,.38),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* Where blur is unsupported the tint alone reads as washed-out beige, so go
   opaque instead — the same fallback strategy noir-dash-glass.css already uses. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .qv-panel { background: var(--noir-paper, #F4F0E8); }
}
.qv-loading { display: grid; place-items: center; min-height: 260px; gap: 12px; color: #7A7468; font-size: 14px; }
.qv-spin { width: 26px; height: 26px; border: 2.5px solid rgba(15,15,15,.14); border-top-color: #CB360F;
  border-radius: 50%; animation: qvSpin .7s linear infinite; }
@keyframes qvSpin { to { transform: rotate(360deg) } }

.qv { display: flex; flex-direction: column; min-height: 0; flex: 1; position: relative; }
.qv-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; }

.qv-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  font-size: 21px; line-height: 1; color: #0F0F0F; display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(15,15,15,.18);
}
.qv-close:hover { background: #fff; }

.qv-hero { aspect-ratio: 16/9; background: #EBE6DB; overflow: hidden; flex: none; }
.qv-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qv-hero .nm-ph { width: 100%; height: 100%; display: grid; place-items: center; }

.qv-body { padding: 20px 22px 16px; }
.qv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.qv-title { font-family: var(--noir-serif, Georgia); font-size: 21px; font-weight: 700;
  line-height: 1.25; margin: 0; letter-spacing: -.3px; }
.qv-shop { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size: 13px; color: #7A7468; text-decoration: none; }
.qv-shop:hover { color: #CB360F; }
.qv-price { font-family: var(--noir-serif, Georgia); font-size: 22px; font-weight: 800;
  letter-spacing: -.5px; white-space: nowrap; flex: none; }
.qv-price .was { display: block; font-family: var(--noir-sans, sans-serif); font-size: 13px;
  font-weight: 400; color: #7A7468; text-decoration: line-through; text-align: right; }
.qv-desc { font-size: 14px; line-height: 1.6; color: #2A2A2A; margin: 12px 0 0; }
.qv-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }

/* option groups */
.qv-group { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(15,15,15,.1); }
.qv-group__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.qv-group__head h3 { font-size: 15px; font-weight: 700; margin: 0; }
.qv-group__head p { font-size: 12.5px; color: #7A7468; margin: 3px 0 0; }
.qv-req { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #7A7468; background: rgba(15,15,15,.06); padding: 4px 9px; border-radius: 999px; flex: none; }
.qv-req.is-req { background: rgba(203,54,15,.12); color: #CB360F; }

.qv-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.qv-opts--list { flex-direction: column; flex-wrap: nowrap; }

.qv-opt {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: #fff; border: 1.5px solid rgba(15,15,15,.12); border-radius: 999px;
  padding: 10px 15px; font-size: 13.5px; font-weight: 600; color: #2A2A2A;
  transition: border-color .15s, background .15s, color .15s;
  user-select: none;
}
.qv-opts--list .qv-opt { width: 100%; border-radius: 12px; justify-content: flex-start; }
.qv-opt input { position: absolute; opacity: 0; pointer-events: none; }
.qv-opt:hover { border-color: rgba(15,15,15,.3); }
.qv-opt:has(input:checked) { border-color: #CB360F; background: rgba(203,54,15,.07); color: #0F0F0F; }
.qv-opt.is-out { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.qv-opt.is-out:hover { border-color: rgba(15,15,15,.12); }
.qv-opt__delta { font-size: 12.5px; color: #7A7468; font-weight: 600; }
.qv-opt:has(input:checked) .qv-opt__delta { color: #CB360F; }
.qv-opt__out { font-size: 11px; color: #7A1F12; text-decoration: none; }
.qv-opts--list .qv-opt__delta { margin-left: auto; }
.qv-swatch { width: 18px; height: 18px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgba(15,15,15,.15); }

/* Fallback for browsers without :has() — JS-free degradation keeps it usable. */
@supports not selector(:has(*)) {
  .qv-opt input { position: static; opacity: 1; pointer-events: auto; margin-right: 2px; }
}

.qv-note {
  width: 100%; border: 1.5px solid rgba(15,15,15,.12); border-radius: 12px;
  padding: 11px 13px; font: inherit; font-size: 14px; resize: vertical;
  background: #fff; color: #0F0F0F; box-sizing: border-box;
}
.qv-note::placeholder { color: #9a9086; }

/* Guest checkout fields — same field chrome as .qv-note, laid out as
   labeled single-line inputs instead of one textarea.

   SPECIFICITY: this page is wrapped in `.noir-v2`, whose global form reset
   ( `.noir-v2 input:not([type=checkbox])…six more…` ) sits at roughly
   (0,7,1) with every declaration `!important` — same trap documented for
   the admin search field and the DM composer. A plain `.qv-field input`
   rule (0,1,1) loses outright, `!important` included, because specificity
   is compared before source order among `!important` rules too. Each field
   already has its own id for the JS/label pairing, so targeting by id here
   is free — id beats any run of classes. Do not "simplify" this back to a
   class selector; it will silently revert to the reset's paper-2 fill and
   transparent border, and the mobile 16px rule (which stops iOS zooming
   the whole page in on focus) will lose to the reset's unconditional 15px. */
.qv-field { display: flex; flex-direction: column; gap: 6px; }
.qv-field + .qv-field { margin-top: 12px; }
.qv-field label { font-size: 12.5px; font-weight: 700; color: #4a4138; }
#qv-buyer-name, #qv-buyer-phone, #qv-buyer-email {
  width: 100% !important; box-sizing: border-box !important;
  border: 1.5px solid rgba(15,15,15,.12) !important; border-radius: 12px !important;
  padding: 11px 13px !important; font: inherit !important; font-size: 15px !important;
  background: #fff !important; color: #0F0F0F !important;
}
.qv-field input::placeholder { color: #9a9086; }
#qv-buyer-name:focus, #qv-buyer-phone:focus, #qv-buyer-email:focus {
  outline: none !important; border-color: #CB360F !important;
}
.qv-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.qv-guest-hint { margin: 10px 0 0; font-size: 12px; color: #7A7468; }
.qv-guest-hint a { color: #CB360F; font-weight: 600; text-decoration: none; }
.qv-guest-hint a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .qv-field-row { grid-template-columns: 1fr; }
  #qv-buyer-name, #qv-buyer-phone, #qv-buyer-email { font-size: 16px !important; }
}

.qv-offline {
  margin-top: 18px; padding: 13px 15px; border-radius: 12px;
  background: rgba(63,77,47,.08); color: #414a34; font-size: 12.5px; line-height: 1.6;
}

/* sticky footer */
.qv-foot {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 14px 18px calc(14px + var(--noir-bottom-clear, 0px));
  background: linear-gradient(180deg, rgba(244,240,232,.55), rgba(244,240,232,.78));
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid rgba(255,255,255,.5);
}
.qv-qty { display: flex; align-items: center; gap: 2px; background: #fff;
  border: 1.5px solid rgba(15,15,15,.12); border-radius: 999px; padding: 4px; flex: none; }
.qv-qty__btn { width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer;
  font-size: 19px; line-height: 1; color: #0F0F0F; border-radius: 50%; display: grid; place-items: center; }
.qv-qty__btn:hover { background: rgba(15,15,15,.06); }
.qv-qty input { width: 34px; border: 0; background: transparent; text-align: center;
  font: inherit; font-size: 15px; font-weight: 700; color: #0F0F0F; -moz-appearance: textfield; }
.qv-qty input::-webkit-outer-spin-button, .qv-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qv-cta { flex: 1; justify-content: center; gap: 6px; padding: 14px 20px !important; font-size: 15px !important; }
/* "Pick a size first", not "this button is broken". At .55 on the old UA-grey
   button it read as disabled; now that the real brand orange comes through,
   .72 keeps it clearly inactive while still looking like the primary action. */
.qv-cta.is-blocked { opacity: .72; }
.qv-cta.is-busy { opacity: .7; pointer-events: none; }
.qv-err { margin: 0; padding: 0 18px 14px; color: #7A1F12; font-size: 12.5px; background: rgba(244,240,232,.97); }

/* ── mobile: true bottom sheet ── */
@media (max-width: 640px) {
  .qv-panel {
    /* The sheet carries a "note for the seller" textarea, so it has to ride
       the keyboard or the Add-to-order button lands behind it. Height is
       capped against the VISIBLE viewport, not 92vh (which includes the
       keyboard). */
    left: 0; top: auto; bottom: var(--noir-kb, 0px); transform: none;
    width: 100%; max-width: none;
    max-height: min(92vh, calc(var(--noir-vh, 100svh) - 24px));
    transition: bottom .18s cubic-bezier(.2,.9,.3,1);
    border-radius: 22px 22px 0 0;
    animation: qvRise .28s cubic-bezier(.34,1.2,.5,1) both;
  }
  .qv-hero { aspect-ratio: 3/2; }
  .qv-body { padding: 18px 18px 14px; }
  .qv-title { font-size: 19px; }
  /* Drag-handle affordance so it reads as a sheet, not a stuck page. */
  .qv-panel::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.75); z-index: 4;
  }
}

/* quick-add on the card — sits above the anchor, opens the sheet in place */
.noir-v2 .nm-card__media { position: relative; }
.noir-v2 .nm-card__add {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  color: var(--noir-ink); font-size: 20px; line-height: 1; font-weight: 500;
  display: grid; place-items: center; padding: 0;
  box-shadow: 0 2px 10px rgba(15,15,15,.2);
  opacity: 0; transform: scale(.85); transition: opacity .16s, transform .16s, background .16s;
}
.noir-v2 .nm-card:hover .nm-card__add,
.noir-v2 .nm-card__add:focus-visible { opacity: 1; transform: scale(1); }
.noir-v2 .nm-card__add:hover { background: var(--noir-orange); color: #fff; }
/* Touch devices get no hover, so keep it permanently visible there. */
@media (hover: none) {
  .noir-v2 .nm-card__add { opacity: 1; transform: scale(1); }
}

/* option summary on the product page */
.noir-v2 .pd-optpreview { display: flex; flex-direction: column; gap: 9px; }
.noir-v2 .pd-optpreview__row { font-size: 13.5px; line-height: 1.5; }
.noir-v2 .pd-optpreview__row strong { display: block; color: var(--noir-ink); font-size: 12.5px; }
.noir-v2 .pd-optpreview__row span { color: var(--noir-muted); }

/* seller-side option groups */
.nsm-optgroup { background: rgba(0,0,0,.18); border: 1px solid var(--nsm-line); border-radius: var(--r-md);
  padding: 13px 15px; margin-bottom: 10px; }
.nsm-optgroup__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.nsm-optgroup__head form { display: inline; }
.nsm-optvals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nsm-optval { display: inline-flex; align-items: center; gap: 6px; background: rgba(244,240,232,.07);
  border-radius: 999px; padding: 5px 11px; font-size: 12.5px; color: var(--nsm-text); }
.nsm-optval i { width: 12px; height: 12px; border-radius: 50%; display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.nsm-optval b { color: var(--nsm-lime); font-weight: 700; }
.nsm-optval.is-off { opacity: .45; text-decoration: line-through; }
.nsm-form code { background: rgba(244,240,232,.1); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }

/* ── gallery builder (reuses the .nsm dark form skin) ── */
.gm-reel { display:flex; gap:15px; align-items:center; flex-wrap:wrap; margin-bottom:22px; padding:15px;
  background:linear-gradient(135deg,rgba(203,54,15,.12),rgba(61,42,82,.14));
  border:1px solid rgba(203,54,15,.28); border-radius:14px; }
.gm-reel__thumb { width:104px; height:60px; border-radius:9px; overflow:hidden; background:rgba(0,0,0,.3);
  flex:none; position:relative; }
.gm-reel__thumb img { width:100%; height:100%; object-fit:cover; opacity:.75; }
.gm-reel__thumb i { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:17px; font-style:normal; }
.gm-reel__thumb--empty { border:1.5px dashed var(--nsm-line); }
.gm-reel__m { flex:1; min-width:180px; }
.gm-reel__m strong { font-size:14.5px; color:var(--nsm-text); }
.gm-reel__m p { font-size:12.5px; color:var(--nsm-muted); margin-top:3px; }
.gm-reel form { display:inline; }

.nsm-tools { margin-bottom:12px; }
.gm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.gm-tile { position:relative; border-radius:12px; overflow:hidden; background:rgba(0,0,0,.25);
  aspect-ratio:1/1; cursor:grab; text-decoration:none; display:block; }
.gm-tile.is-drag { opacity:.4; cursor:grabbing; }
.gm-tile img { width:100%; height:100%; object-fit:cover; }
.gm-tile__noimg { width:100%; height:100%; display:grid; place-items:center;
  font-family:var(--noir-serif); font-size:34px; color:var(--nsm-muted); }
.gm-tile__grip { position:absolute; top:8px; left:8px; background:rgba(11,10,9,.72); backdrop-filter:blur(6px);
  color:#fff; border-radius:7px; width:24px; height:24px; display:grid; place-items:center; font-size:11px; }
.gm-tile__num { position:absolute; top:8px; right:8px; background:rgba(11,10,9,.72); backdrop-filter:blur(6px);
  color:#fff; border-radius:99px; min-width:22px; height:22px; display:grid; place-items:center;
  font-size:11px; font-weight:700; padding:0 6px; }
.gm-tile__flag { position:absolute; top:38px; right:8px; background:var(--noir-orange); color:#fff;
  font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:99px; }
.gm-tile__vid { position:absolute; bottom:34px; left:8px; background:rgba(11,10,9,.72); color:#fff;
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:9px; }
.gm-tile__bar { position:absolute; left:0; right:0; bottom:0; padding:22px 9px 8px; display:flex;
  align-items:center; gap:6px; background:linear-gradient(180deg,rgba(11,10,9,0),rgba(11,10,9,.9)); }
.gm-tile__t { flex:1; font-size:11.5px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gm-tile__a { width:22px; height:22px; border-radius:6px; background:rgba(244,240,232,.16); color:#fff;
  display:grid; place-items:center; font-size:11px; text-decoration:none; flex:none; }
.gm-tile.is-off img { opacity:.32; filter:grayscale(1); }
.gm-tile--add { border:1.5px dashed var(--nsm-line); display:grid; place-items:center; background:transparent; cursor:pointer; }
.gm-tile--add span { color:var(--nsm-muted); font-size:12px; text-align:center; line-height:1.5; }
.gm-tile--add b { display:block; font-size:26px; font-weight:400; color:var(--nsm-text); }

.gm-aspects { display:flex; gap:7px; flex-wrap:wrap; }
.gm-asp { cursor:pointer; }
.gm-asp input { position:absolute; opacity:0; pointer-events:none; }
.gm-asp span { display:inline-block; border:1px solid var(--nsm-line); border-radius:8px; padding:8px 12px;
  font-size:12px; font-weight:600; color:var(--nsm-muted); transition:all .15s; }
.gm-asp:has(input:checked) span { border-color:var(--noir-orange); color:var(--nsm-text); background:rgba(203,54,15,.1); }

.gm-quick { display:flex; flex-direction:column; gap:6px; margin-top:18px; }
.gm-quick__f { display:flex; align-items:center; gap:8px; padding:8px 12px; background:rgba(244,240,232,.045);
  border:1px solid var(--nsm-line); border-radius:10px; }
.gm-quick__t { flex:1; font-size:12.5px; color:var(--nsm-text); }

@media(max-width:768px){
  .gm-grid { grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; }
}

/* ── inline buy block on the product page ──
   Reuses the .qv-* option markup so the sheet and the page can't drift apart.
   Only the chrome differs: no scroll container, no sticky footer. */
.noir-v2 .pd-buy { margin-top: 22px; }
.noir-v2 .pd-buy .qv-group:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.noir-v2 .pd-buy__bar {
  display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap;
}
.noir-v2 .pd-buy__bar .qv-cta { flex: 1; min-width: 190px; justify-content: center; }
.noir-v2 .pd-buy .qv-err { padding: 10px 0 0; margin: 0; color: #7A1F12; font-size: 12.5px; background: none; }
/* The sticky mobile bar duplicates this form's CTA — hide it where the real
   controls are already on screen. */
@media (max-width: 640px) {
  .noir-v2 .pd-buy ~ .pd-sticky, .noir-v2 .noir-gal-page .pd-sticky { display: none; }
}

/* ================================================================
   REVIEWS
   ================================================================ */
.noir-v2 .nm-card__rating { font-size: 12.5px; color: var(--noir-ink-2); margin-top: 6px; font-weight: 600; }
.noir-v2 .nm-card__rating span { color: var(--noir-muted); font-weight: 400; }
.noir-v2 .nm-pill--rating,
.noir-v2 .nm-meta-pill--rating { text-decoration: none; background: var(--st-warn-bg); color: var(--st-warn-fg); }

.noir-v2 .mrv { padding: 34px 0 20px; border-top: 1px solid var(--noir-hair); margin-top: 14px; }
.noir-v2 .mrv__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.noir-v2 .mrv__head h3 { font-family: var(--noir-serif); font-size: 21px; font-weight: 700; margin: 0; }
.noir-v2 .mrv__score { display: flex; align-items: baseline; gap: 9px; }
.noir-v2 .mrv__avg { font-family: var(--noir-serif); font-size: 27px; font-weight: 800; letter-spacing: -.7px; }
.noir-v2 .mrv__stars { color: var(--noir-orange); letter-spacing: 1px; font-size: 14px; }
.noir-v2 .mrv__n { font-size: 13px; color: var(--noir-muted); }

.noir-v2 .mrv__bars { display: flex; flex-direction: column; gap: 5px; max-width: 320px; margin-bottom: 22px; }
.noir-v2 .mrv__bar { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--noir-muted); }
.noir-v2 .mrv__bar-k { width: 26px; flex: none; }
.noir-v2 .mrv__bar-t { flex: 1; height: 6px; border-radius: 99px; background: var(--noir-paper-2); overflow: hidden; }
.noir-v2 .mrv__bar-t i { display: block; height: 100%; background: var(--noir-orange); border-radius: 99px; }
.noir-v2 .mrv__bar-n { width: 20px; text-align: right; flex: none; }

/* write form — only ever rendered for a verified buyer */
.noir-v2 .mrv-write {
  background: #fff; border: 1px solid var(--noir-hair); border-radius: var(--r-md);
  padding: 17px; margin-bottom: 22px;
}
.noir-v2 .mrv-write__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.noir-v2 .mrv-write__head strong { font-size: 14.5px; }
.noir-v2 .mrv-verified { font-size: 11.5px; font-weight: 600; color: var(--st-success-fg); background: var(--st-success-bg);
  padding: 3px 9px; border-radius: 99px; }
.noir-v2 .mrv-write textarea {
  width: 100%; margin-top: 12px; border: 1px solid var(--noir-hair); border-radius: var(--r-sm);
  padding: 11px 13px; font: inherit; font-size: 14px; resize: vertical; box-sizing: border-box;
}
.noir-v2 .mrv-write__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.noir-v2 .mrv-hint { font-size: 11.5px; color: var(--noir-muted); }

/* star picker — rendered RTL so the CSS sibling selector can light up
   the chosen star and everything to its left. */
.noir-v2 .mrv-stars-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; margin-top: 10px; }
.noir-v2 .mrv-stars-input input { position: absolute; opacity: 0; pointer-events: none; }
.noir-v2 .mrv-stars-input label {
  font-size: 27px; line-height: 1; color: rgba(15,15,15,.18); cursor: pointer; padding: 0 2px; transition: color .12s;
}
.noir-v2 .mrv-stars-input label:hover,
.noir-v2 .mrv-stars-input label:hover ~ label,
.noir-v2 .mrv-stars-input input:checked ~ label { color: var(--noir-orange); }

.noir-v2 .mrv-empty { font-size: 14px; color: var(--noir-muted); padding: 6px 0 18px; }
.noir-v2 .mrv__list { display: flex; flex-direction: column; gap: 14px; }
.noir-v2 .mrv-item { background: #fff; border: 1px solid var(--noir-hair); border-radius: var(--r-md); padding: 16px; }
.noir-v2 .mrv-item__top { display: flex; align-items: center; gap: 10px; }
.noir-v2 .mrv-item__who { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.noir-v2 .mrv-item__who strong { font-size: 14px; }
.noir-v2 .mrv-item__stars { color: var(--noir-orange); letter-spacing: 1px; font-size: 13px; flex: none; }
.noir-v2 .mrv-item__on { font-size: 12px; color: var(--noir-muted); margin-top: 7px; }
.noir-v2 .mrv-item__body { font-size: 14px; line-height: 1.65; color: var(--noir-ink-2); margin: 9px 0 0; }
.noir-v2 .mrv-item__when { font-size: 11.5px; color: var(--noir-muted); margin-top: 9px; }
.noir-v2 .mrv-reply {
  margin-top: 12px; padding: 12px 14px; background: var(--noir-paper-2);
  border-radius: var(--r-sm); border-left: 3px solid var(--noir-orange);
}
.noir-v2 .mrv-reply strong { font-size: 12.5px; }
.noir-v2 .mrv-reply p { font-size: 13.5px; line-height: 1.6; color: var(--noir-ink-2); margin: 4px 0 0; }
.noir-v2 .mrv-replyform { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.noir-v2 .mrv-replyform input {
  flex: 1; min-width: 180px; border: 1px solid var(--noir-hair); border-radius: var(--r-sm);
  padding: 9px 12px; font: inherit; font-size: 13.5px;
}

/* seller reviews tab + buyer "rate your order" prompt */
.nsm-av-sm { width:24px;height:24px;border-radius:50%;background:var(--noir-plum);color:#fff;
  display:grid;place-items:center;font-size:10px;font-weight:700;flex:none; }
.nsm-reply { margin-top:11px;padding:11px 13px;background:rgba(244,240,232,.06);
  border-left:3px solid var(--noir-orange);border-radius:8px; }
.nsm-reply strong { font-size:12px;color:var(--nsm-text); }
.nsm-reply p { font-size:13px;color:var(--nsm-muted);margin-top:4px;line-height:1.55; }
.nsm-rate { display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:18px;padding:15px 17px;
  background:linear-gradient(135deg,rgba(244,220,138,.14),rgba(203,54,15,.10));
  border:1px solid rgba(244,220,138,.3);border-radius:var(--r-md); }
.nsm-rate__i { font-size:24px;color:#F4DC8A;flex:none; }
.nsm-rate__m { flex:1;min-width:210px; }
.nsm-rate__m strong { font-size:14.5px;color:var(--nsm-text); }
.nsm-rate__m p { font-size:12.5px;color:var(--nsm-muted);margin-top:3px;line-height:1.5; }
.nsm-rate__l { display:flex;gap:7px;flex-wrap:wrap; }
.nsm-prate { color:#F4DC8A !important; text-decoration:none; font-weight:600; }

/* ── Cart (v5.5.0) ────────────────────────────────────────────────────
   The popup itself is styled by noir-store-editor.css: it reuses that
   file's `.nse-scrim` / `.nse` / `.nse__head` / `.nse__body` / `.nse__foot`
   shell so it is visually the same modal as "Add an item". Only the parts
   that file has no equivalent for live here — the basket lines and the
   floating button. ────────────────────────────────────────────────── */

.nmc-fab {
  /* MIDDLE of the right edge, not the bottom corner (v5.10.0).
     The live theme puts its own back-to-top button at
     `a.pxl-scroll-top { position:fixed; right:25px; bottom:20px; z-index:9999 }`
     — measured, not guessed — so a bottom-right cart sat in exactly the same
     46px square AND underneath it, since this was z-index 900. Vertically
     centred clears it completely, and the z-index now goes above the theme's
     so nothing can bury the cart again. */
  position: fixed;
  right: max(18px, var(--noir-safe-right, 0px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--noir-orange, #cb360f); color: #fff;
  box-shadow: 0 8px 22px -6px rgba(203, 54, 15, .55);
  transition: transform .18s ease, box-shadow .18s ease;
}
.nmc-fab[hidden] { display: none; }
.nmc-fab:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 12px 26px -6px rgba(203, 54, 15, .6); }
.nmc-fab svg { width: 24px; height: 24px; }

.nmc-fab__n {
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #1c1712; color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
  border: 2px solid var(--noir-paper, #f4f0e8);
}

/* Bump on add — the whole point of a fixed cart icon is that you SEE it react.
   Class is removed and re-added by JS (with a forced reflow) so a rapid second
   add replays it instead of doing nothing. */
.nmc-fab.is-bump { animation: nmc-bump .42s cubic-bezier(.2, .9, .3, 1.4); }
/* Every frame keeps translateY(-50%) — the button is centred BY a transform, so
   a keyframe that sets transform without it snaps the cart to the bottom of the
   viewport mid-animation. */
@keyframes nmc-bump {
  0%   { transform: translateY(-50%) scale(1); }
  35%  { transform: translateY(-50%) scale(1.18) rotate(-6deg); }
  70%  { transform: translateY(-50%) scale(.94) rotate(3deg); }
  100% { transform: translateY(-50%) scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nmc-fab.is-bump { animation: none; }
  .nmc-fab { transition: none; }
}

.nmc-line {
  display: grid;
  grid-template-columns: 52px 1fr auto auto 24px;
  align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--nse-line, rgba(0, 0, 0, .1));
}
.nmc-line:last-child { border-bottom: 0; }
.nmc-line__img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.nmc-line__img--none { background: rgba(0, 0, 0, .07); }
.nmc-line__main { min-width: 0; }
.nmc-line__t { margin: 0; font-size: 14px; font-weight: 600; }
.nmc-line__o { margin: 2px 0 0; font-size: 12px; opacity: .65; }
.nmc-line__p { margin: 2px 0 0; font-size: 12px; opacity: .65; }
.nmc-line__tot { font-size: 14px; font-weight: 700; white-space: nowrap; }
.nmc-line__x {
  border: 0; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; opacity: .45;
  color: inherit;
}
.nmc-line__x:hover { opacity: 1; }

.nmc-qty { display: flex; align-items: center; gap: 8px; }
.nmc-qty__b {
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--nse-line, rgba(0, 0, 0, .15));
  background: none; color: inherit; font-size: 15px; line-height: 1;
}
.nmc-qty span { min-width: 16px; text-align: center; font-size: 14px; font-weight: 600; }

.nmc-block { margin-top: 18px; }

.nmc-choice { display: grid; gap: 8px; }
.nmc-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--nse-line, rgba(0, 0, 0, .15)); border-radius: 12px;
}
.nmc-opt[hidden] { display: none; }
.nmc-opt:has(input:checked) {
  border-color: var(--noir-orange, #cb360f);
  background: rgba(203, 54, 15, .06);
}
.nmc-opt input { margin-top: 3px; }
.nmc-opt span { display: flex; flex-direction: column; gap: 2px; }
.nmc-opt strong { font-size: 14px; font-weight: 600; }
.nmc-opt i { font-style: normal; font-size: 12px; opacity: .65; }

.nmc-err { color: var(--noir-orange, #cb360f); }
.nmc-err[hidden] { display: none; }

.nmc-others {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--nse-line, rgba(0, 0, 0, .1));
  font-size: 12.5px;
}
.nmc-others[hidden] { display: none; }
.nmc-others__l { opacity: .65; }
.nmc-others__b {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; cursor: pointer;
  border: 1px solid var(--nse-line, rgba(0, 0, 0, .15)); border-radius: 999px;
  background: none; color: inherit; font-size: 12.5px;
}
.nmc-others__b:hover { border-color: var(--noir-orange, #cb360f); }
.nmc-others__b i {
  font-style: normal; font-size: 11px; font-weight: 700;
  background: var(--noir-orange, #cb360f); color: #fff;
  border-radius: 999px; padding: 1px 6px;
}

/* Cart popup glass (v5.8.0).
   The cart borrows the product editor's `.nse` shell, which is opaque by
   design. The quick view and the cart sit one tap apart in the same flow, so
   one being frosted and the other flat reads as a bug rather than a choice.
   Same tint/blur/highlight as .qv-panel — keep them in step if either moves. */
/* Compound selector on purpose: the element carries BOTH `nse-scrim` and
   `nmc-scrim`, noir-store-editor.css loads after this file, and its
   `.nse-scrim` blur(6px) is the same specificity — so a bare `.nmc-scrim`
   loses on source order. (0,2,0) wins and matches the quick view's blur. */
.nse-scrim.nmc-scrim {
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
}
.nse-scrim.nmc-scrim .nse {
  background:
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(244,240,232,.80) 60%, rgba(244,240,232,.84) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 30px 80px rgba(15,15,15,.38), inset 0 1px 0 rgba(255,255,255,.75);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nse-scrim.nmc-scrim .nse { background: var(--noir-paper, #F4F0E8); }
}

/* ── Owner / team banner (v5.10.0) ───────────────────────────────── */
.nm-ownerbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 1180px; margin: 14px auto 0; padding: 12px 16px;
  border-radius: 14px; font-size: 13.5px; line-height: 1.45;
  background: rgba(203, 54, 15, .08);
  border: 1px solid rgba(203, 54, 15, .22);
  color: var(--noir-ink, #1c1712);
}
.nm-ownerbar--team { background: rgba(61, 42, 82, .08); border-color: rgba(61, 42, 82, .25); }
.nm-ownerbar__ico { font-size: 17px; line-height: 1; flex: none; }
.nm-ownerbar__t   { flex: 1; min-width: 200px; }
.nm-ownerbar__a {
  flex: none; padding: 7px 14px; border-radius: 999px; text-decoration: none;
  font-size: 12.5px; font-weight: 700;
  background: var(--noir-orange, #cb360f); color: #fff;
}
.nm-ownerbar__a:hover { opacity: .9; }

/* ── Shop pages drop the site header (v5.10.0) ───────────────────────
   Selectors MEASURED on noirgh.com, not guessed — the previous full-width
   attempt failed precisely because it listed plausible-sounding wrappers that
   the live theme does not use. Stotage renders TWO headers, one desktop and one
   mobile, both 90px at top:0:
       header#pxl-header-elementor
       div#pxl-header-mobile
   The generic selectors after them cover the LocalWP theme (Twenty Twenty-Five)
   and anything else, and match nothing where they do not apply.

   Scoped with :has() to pages carrying the market marker, so the header is
   untouched everywhere else on the site. A browser without :has() simply keeps
   its header — a cosmetic miss, never a broken page. */
/* `.nm-shop-page`, NOT `.noir-market-page` — the marker is on the storefront and
   product page only. The discovery index (/uni-market/) carries
   `.noir-market-page` too, and hiding the header there would strip navigation
   from the marketplace landing page itself, which is not a shop. */
body:has(.nm-shop-page) #pxl-header-elementor,
body:has(.nm-shop-page) #pxl-header-mobile,
body:has(.nm-shop-page) .pxl-header-elementor,
body:has(.nm-shop-page) > header,
body:has(.nm-shop-page) .site-header,
body:has(.nm-shop-page) header.wp-block-template-part {
  display: none !important;
}

/* ── Seller pickup-pin picker (v5.11.0) ──────────────────────────── */
.nsm-pinfield{margin-top:14px}
.nsm-pinmap{height:230px;border-radius:14px;overflow:hidden;border:1px solid var(--nsm-line,rgba(255,255,255,.12));
  background:#E8E4DC;margin:8px 0 0;z-index:0}
.nsm-pinmap .leaflet-container{background:#E8E4DC}
.nsm-pinbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:10px 0 6px}
.nsm-pinbar .nsm-hint{margin:0}
.nsm-pinbar .nsm-hint.is-set{color:var(--noir-lime,#D6E36A);font-weight:600}
/* the pin itself — same teardrop as the market map so the two read as one system */
.npin{background:none;border:0}
.npin__b{width:26px;height:26px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);
  background:linear-gradient(160deg,#FF8A62,#CB360F);border:2px solid #fff;
  box-shadow:0 4px 10px rgba(0,0,0,.45)}

/* ═══════════════════════════════════════════════════════════
   MAP VIEW (v5.12.0)
   Uses the market page's own tokens — no second palette. Map
   surface stays light so the category pins carry the colour.
   ═══════════════════════════════════════════════════════════ */
.noir-market-page .mm{
  display:grid;grid-template-columns:minmax(320px,380px) 1fr;gap:0;
  border:1px solid var(--noir-hair);border-radius:20px;overflow:hidden;
  background:#fff;margin:0 0 28px;min-height:520px;
}
.noir-market-page .mm.is-loading{opacity:.6;pointer-events:none}
.noir-market-page .mm__side{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--noir-hair)}
.noir-market-page .mm__head{padding:16px 18px 12px;border-bottom:1px solid var(--noir-hair)}
.noir-market-page .mm__ttl{display:flex;align-items:center;justify-content:space-between;gap:10px}
.noir-market-page .mm__ttl b{font-family:var(--noir-slab,inherit);font-size:1.05rem;letter-spacing:-.01em}
.noir-market-page .mm__sub{font-size:.82rem;color:var(--noir-muted);margin-top:2px}
.noir-market-page .mm__note{
  margin-top:8px;font-size:.76rem;padding:7px 10px;border-radius:10px;
  background:color-mix(in srgb,var(--noir-orange) 10%,#fff);
  color:color-mix(in srgb,var(--noir-orange) 78%,#000);
}
.noir-market-page .mm__locate{
  border:1px solid var(--noir-hair);background:#fff;border-radius:999px;
  padding:6px 12px;font-size:.76rem;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.noir-market-page .mm__locate:hover{border-color:var(--noir-orange);color:var(--noir-orange)}
.noir-market-page .mm__locate.is-busy{opacity:.5;pointer-events:none}

/* radius + category rows: horizontal scroll, no wrap-induced height jumps */
.noir-market-page .mm__rad,.noir-market-page .mm__chips{
  display:flex;gap:6px;overflow-x:auto;padding:10px 18px;
  border-bottom:1px solid var(--noir-hair);scrollbar-width:none;
}
.noir-market-page .mm__rad::-webkit-scrollbar,
.noir-market-page .mm__chips::-webkit-scrollbar{display:none}
.noir-market-page .mm__rad button,.noir-market-page .mm-chip{
  flex:0 0 auto;border:1px solid var(--noir-hair);background:#fff;color:var(--noir-ink);
  border-radius:999px;padding:6px 13px;font-size:.78rem;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s;
}
.noir-market-page .mm__rad button:hover,.noir-market-page .mm-chip:not([disabled]):hover{border-color:var(--noir-orange)}
.noir-market-page .mm__rad button.is-on,.noir-market-page .mm-chip.is-on{
  background:var(--noir-ink);border-color:var(--noir-ink);color:var(--noir-paper);
}
.noir-market-page .mm-chip i{font-style:normal;opacity:.55;font-size:.72rem;margin-left:2px}
.noir-market-page .mm-chip[disabled]{opacity:.35;cursor:default}

/* shop list */
.noir-market-page .mm__list{flex:1;overflow-y:auto;padding:8px;max-height:560px}
.noir-market-page .mm-card{
  display:flex;gap:11px;width:100%;text-align:left;align-items:flex-start;
  background:#fff;border:1px solid transparent;border-radius:14px;
  padding:11px;cursor:pointer;transition:background .16s,border-color .16s;
}
.noir-market-page .mm-card:hover{background:var(--noir-paper)}
.noir-market-page .mm-card.is-on{border-color:var(--noir-orange);background:color-mix(in srgb,var(--noir-orange) 6%,#fff)}
.noir-market-page .mm-card__i{
  flex:0 0 auto;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  font-size:19px;background:linear-gradient(160deg,var(--c1),var(--c2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 5px rgba(0,0,0,.14);
}
.noir-market-page .mm-card__b{min-width:0;flex:1}
.noir-market-page .mm-card__t{
  display:block;font-weight:600;font-size:.9rem;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.noir-market-page .mm-tick{
  font-style:normal;font-size:.66rem;color:#fff;background:var(--noir-orange);
  border-radius:50%;width:14px;height:14px;display:inline-grid;place-items:center;
  vertical-align:1px;margin-left:5px;
}
.noir-market-page .mm-card__m{
  display:flex;flex-wrap:wrap;gap:4px 9px;font-size:.75rem;
  color:var(--noir-muted);margin-top:3px;
}
.noir-market-page .mm-card__m b{color:var(--noir-ink)}
.noir-market-page .mm-eta{font-style:normal;color:var(--noir-orange)}
.noir-market-page .mm-card__p{
  display:block;font-size:.73rem;color:var(--noir-muted);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.noir-market-page .mm-card__p i{font-style:normal;opacity:.65}

/* map */
.noir-market-page .mm__map{min-height:520px;background:var(--noir-paper)}
.noir-market-page .mm__map .leaflet-container{font:inherit;background:#f2f0ec}
.noir-market-page .mm-mk{background:none;border:0}
.noir-market-page .mm-mk__b{
  width:34px;height:34px;border-radius:50% 50% 50% 6px;transform:rotate(-45deg);
  background:linear-gradient(160deg,var(--c1),var(--c2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 7px rgba(0,0,0,.28);
  display:grid;place-items:center;border:2px solid #fff;
}
.noir-market-page .mm-mk__b span{transform:rotate(45deg);font-size:15px;line-height:1}
.noir-market-page .mm-cl{
  width:40px;height:40px;border-radius:50%;background:var(--noir-ink);color:var(--noir-paper);
  display:grid;place-items:center;line-height:1;border:2px solid #fff;
  box-shadow:0 3px 8px rgba(0,0,0,.3);
}
.noir-market-page .mm-cl b{font-size:.9rem}
.noir-market-page .mm-cl i{font-style:normal;font-size:.5rem;opacity:.7;letter-spacing:.04em}
.noir-market-page .mm-me{
  width:16px;height:16px;border-radius:50%;background:#2e7de0;border:3px solid #fff;
  box-shadow:0 0 0 6px rgba(46,125,224,.22);
}
@media (prefers-reduced-motion:no-preference){
  .noir-market-page .mm-me{animation:mmPulse 2.4s ease-out infinite}
  @keyframes mmPulse{
    0%,100%{box-shadow:0 0 0 5px rgba(46,125,224,.26)}
    50%{box-shadow:0 0 0 11px rgba(46,125,224,.06)}
  }
}

/* view toggle */
.noir-market-page .mk-view{display:flex;gap:4px;background:var(--noir-paper);border-radius:999px;padding:4px;margin:0 0 16px;width:max-content}
.noir-market-page .mk-view a{
  padding:7px 18px;border-radius:999px;font-size:.82rem;text-decoration:none;
  color:var(--noir-ink);transition:background .18s,color .18s;
}
.noir-market-page .mk-view a.is-on{background:var(--noir-ink);color:var(--noir-paper)}

@media (max-width:860px){
  .noir-market-page .mm{grid-template-columns:1fr;min-height:0}
  .noir-market-page .mm__side{border-right:0;order:2}
  .noir-market-page .mm__map{order:1;min-height:320px;border-bottom:1px solid var(--noir-hair)}
  .noir-market-page .mm__list{max-height:none;overflow:visible}
}

/* ═══════════════════════════════════════════════════════════
   MOBILE BREAKOUT (v5.12.0)
   The block theme wraps this page in TWO nested 30px-padded
   groups, and .noir-wrap adds 28px more — on a 375px phone that
   left the market 199px wide (95px product cards, and a map too
   narrow to read). Pre-existing, but the map view makes it
   unusable, so break out of the inherited padding on small
   screens and set our own. Margins, not transform: a transformed
   ancestor changes the containing block for the fixed cart
   button and Leaflet's overlay panes.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:860px){
  /* Cancel the padding on the wrappers instead of doing viewport maths on the
     page itself. The usual `margin-left:calc(50% - 50vw)` full-bleed assumes the
     containing block is centred in the viewport; these .alignfull groups are not
     (they sit flush left), so that trick lands 30px off. :has() lets us reach the
     actual offenders, and only ever on a page that contains the market. */
  .wp-block-group:has(.noir-v2.noir-market-page),
  .entry-content:has(.noir-v2.noir-market-page){
    padding-left:0 !important;
    padding-right:0 !important;
    /* The negative margins must go too. .alignfull uses them to cancel exactly
       the padding we just removed, so leaving them would over-pull the page
       60px off the left edge. */
    margin-left:0 !important;
    margin-right:0 !important;
    max-width:none !important;
    width:100% !important;
  }
  /* !important is required, not decorative: an earlier rule already pins this
     element to width:100% !important and the theme sets margin auto !important. */
  .noir-v2.noir-market-page{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .noir-market-page .noir-wrap{padding-left:16px;padding-right:16px}
  /* Edge-to-edge reads as intentional at this width; the border would
     otherwise sit flush against the viewport edge. */
  .noir-market-page .mm{border-radius:16px}
}

/* In map view the product filter bar, category row and sort control operate on
   the item grid and do nothing to the map — showing them there teaches shoppers
   the controls are broken. Item search still lives on "Browse items". */
.noir-market-page.is-map .mk-bar,
.noir-market-page.is-map .mk-cats{display:none}

/* ═══════════════════════════════════════════════════════════
   CART FAB — 3D puck, shopper pushing a trolley (v5.15.0)
   Ported from design-previews/market-map-preview.html. Lives in
   noir-market.css, not the map sheet: the cart appears on
   storefronts and product pages too, which do not load the map
   stylesheet.
   ═══════════════════════════════════════════════════════════ */
.nmc-fab{
  width:58px;height:58px;border:0;padding:0;cursor:pointer;background:none;
  border-radius:50%;isolation:isolate;position:fixed;
}
.nmc-fab__face{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 18%, #FF8A62 0%, #CB360F 46%, #9B2708 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.62),
    inset 0 -7px 14px rgba(90,20,0,.55),
    0 12px 20px -8px rgba(155,39,8,.72),
    0 2px 5px rgba(0,0,0,.35);
  transition:transform .26s cubic-bezier(.22,.9,.3,1), box-shadow .26s cubic-bezier(.22,.9,.3,1);
}
/* specular sheen — above the face, below the art */
.nmc-fab__face::after{
  content:'';position:absolute;inset:4px 4px 52% 4px;
  border-radius:50% 50% 46% 46%;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));
  pointer-events:none;
}
.nmc-fab:hover .nmc-fab__face{
  transform:translateY(-3px) rotateX(16deg) scale(1.04);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -7px 14px rgba(90,20,0,.5),
             0 18px 26px -10px rgba(155,39,8,.8),0 2px 5px rgba(0,0,0,.35);
}
.nmc-fab:active .nmc-fab__face{
  transform:translateY(1px) scale(.97);
  box-shadow:inset 0 3px 8px rgba(90,20,0,.6),0 6px 12px -6px rgba(155,39,8,.7);
}
.nmc-fab svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.nmc-fab .cf-ink{stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none}
.nmc-fab .cf-solid{fill:#fff}
.nmc-fab .cf-ground{
  stroke:rgba(255,255,255,.65);stroke-width:2;stroke-linecap:round;stroke-dasharray:5 7;
}
.nmc-fab .cf-drop{opacity:0}
.nmc-fab__n{
  position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;border-radius:99px;
  background:#0B0B0C;color:#fff;font-size:11.5px;font-weight:700;
  display:grid;place-items:center;border:2.5px solid #fff;z-index:2;
}

/* The walk cycle. Motion is opt-in: a permanently animating button in the corner
   of every page is exactly what prefers-reduced-motion exists to stop. */
@media (prefers-reduced-motion:no-preference){
  .nmc-fab .cf-walker{animation:cf-bob .62s steps(2,end) infinite}
  .nmc-fab .cf-legA{transform-origin:14px 29px;animation:cf-legA .62s ease-in-out infinite}
  .nmc-fab .cf-legB{transform-origin:14px 29px;animation:cf-legB .62s ease-in-out infinite}
  .nmc-fab .cf-wheel{transform-box:fill-box;transform-origin:center;animation:cf-spin .62s linear infinite}
  .nmc-fab .cf-ground{animation:cf-road .62s linear infinite}
  /* item dropped into the trolley when the count changes */
  .nmc-fab.is-bump .cf-drop{animation:cf-drop .62s cubic-bezier(.22,.9,.3,1)}
  .nmc-fab.is-bump .nmc-fab__face{animation:cf-pop .5s cubic-bezier(.22,.9,.3,1)}
  @keyframes cf-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.9px)}}
  @keyframes cf-legA{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-22deg)}}
  @keyframes cf-legB{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(20deg)}}
  @keyframes cf-spin{to{transform:rotate(360deg)}}
  @keyframes cf-road{to{stroke-dashoffset:-12}}
  @keyframes cf-drop{
    0%{opacity:1;transform:translate(4px,-16px) scale(.7)}
    70%{opacity:1;transform:translate(0,0) scale(1)}
    100%{opacity:0;transform:translate(0,2px) scale(.9)}
  }
  @keyframes cf-pop{40%{transform:scale(1.16) rotate(-7deg)}70%{transform:scale(.95) rotate(3deg)}}
}

/* Pickup-pin safety warning (v5.20.0). Sits ABOVE the map so it is read before
   the pin is dropped. Deliberately not a dismissible toast: the hazard applies
   every time the pin is edited, not once. */
.nsm-pinwarn{
  display:flex;gap:10px;align-items:flex-start;
  margin:0 0 10px;padding:11px 13px;border-radius:12px;
  background:rgba(255,193,86,.12);
  border:1px solid rgba(255,193,86,.42);
  font-size:12.5px;line-height:1.5;
  color:var(--nsm-text,#F4F0E8);
}
.nsm-pinwarn__i{flex:none;font-size:15px;line-height:1.3;color:#FFC156}
.nsm-pinwarn strong{color:#FFD489;font-weight:700}
/* The seller dashboard renders light for members and dark for trainees; the
   amber reads on both, but the body colour has to follow the shell. */
.noir-dash--light .nsm-pinwarn{color:#3A3A3D;background:rgba(203,54,15,.06);border-color:rgba(203,54,15,.28)}
.noir-dash--light .nsm-pinwarn__i{color:#CB360F}
.noir-dash--light .nsm-pinwarn strong{color:#8A2408}