/* ============================================================================
   matches-v2.css — the Matches page, rebuilt to the owner-approved rendering.

   ONE SYSTEM, NOT TWO. The tokens, type ramp and control shapes here are the same
   ones home-v2.css established for the rebuilt homepage. This file does not fork a
   parallel palette; it re-declares the same values on a scope of its own so the two
   surfaces can never drift apart silently, and every one of them is listed once, at
   the top, rather than sprinkled as literals.

   SCOPE. Everything is under `#view-match.sm-matches-v2`, which is (1,2,0) and so
   outranks the `#view-match .thing` rules left in match-shell.css without needing a
   single !important. The layout sections match-shell.css used to own were deleted
   from it in the same commit; what remains there is the product drawer, the topbar
   tweak, and the body overflow rule.

   NEVER `overflow-x: hidden` ON body. `hidden` makes body a scroll container, which
   silently makes `position: sticky` on the build rail resolve against body instead
   of the viewport — the rail stops sticking and nothing looks broken. `clip` is the
   working value and match-shell.css sets it. Do not regress it.
   ========================================================================== */

#view-match.sm-matches-v2 {
  /* surfaces */
  --mx-white:#FFFFFF;
  --mx-canvas:#FAFAF7;
  --mx-soft:#F5F8FC;
  --mx-mist:#EAF2FF;
  /* ink */
  --mx-ink:#102A43;
  --mx-navy:#061B30;
  --mx-navy-2:#0B2945;
  --mx-muted:#617386;
  /* lines */
  --mx-line:#D9E3EC;
  --mx-line-strong:#C6D4E1;
  /* accents */
  --mx-blue:#2F65F5;
  --mx-blue-2:#2354D8;
  --mx-coral:#FF624F;
  --mx-coral-2:#E14A38;
  --mx-success:#2F9E59;
  /* type */
  --mx-display:Fraunces,Georgia,serif;
  --mx-body:Karla,ui-sans-serif,system-ui,sans-serif;
  --mx-mono:"DM Mono",ui-monospace,SFMono-Regular,monospace;
  /* geometry */
  --mx-radius:12px;
  --mx-radius-sm:8px;
  --mx-gap:18px;
  --mx-rail-w:282px;
  --mx-build-w:370px;
  --mx-shadow:0 1px 2px rgba(16,42,67,.04),0 6px 18px -10px rgba(16,42,67,.18);
  --mx-header-h:64px;
}

/* The page is white, not the site's warm canvas, and it owns no background pattern.
   Gated the same way home-v2.css gates the homepage. */
body:has(#view-match.sm-matches-v2.on) { background-image:none; background-color:var(--mx-white,#FFFFFF); }
body:has(#view-match.sm-matches-v2.on)::before { display:none; }
body:has(#view-match.sm-matches-v2.on) main { max-width:none; padding:0; }
body:has(#view-match.sm-matches-v2.on) > main > footer { display:none; }

#view-match.sm-matches-v2 {
  font-family:var(--mx-body);
  color:var(--mx-ink);
  background:var(--mx-white);
}
#view-match.sm-matches-v2 *,
#view-match.sm-matches-v2 *::before,
#view-match.sm-matches-v2 *::after { box-sizing:border-box; }

#view-match.sm-matches-v2 .mx-sr {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------ THE SHARED HEADER

   The header markup is shared with every other view; only its skin changes per
   surface. home-v2.css gates a white header behind `body:has(#view-home.home-v2.on)`;
   this is the same pattern, same values, for Matches. Nothing here edits the header
   markup, so Home is untouched. */
body:has(#view-match.sm-matches-v2.on) .topbar {
  background:#FFFFFF;border-bottom:1px solid var(--mx-line,#D9E3EC);box-shadow:none;
  backdrop-filter:none;
}
body:has(#view-match.sm-matches-v2.on) .topbar-in {
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  max-width:1512px;margin:0 auto;padding:11px 24px;
}
body:has(#view-match.sm-matches-v2.on) .wordmark {
  justify-self:start;font-family:Fraunces,Georgia,serif;font-weight:600;font-size:20px;
  color:#102A43;letter-spacing:-.01em;
}
body:has(#view-match.sm-matches-v2.on) .wordmark .rule-icon { border-color:#2F65F5; }
body:has(#view-match.sm-matches-v2.on) .wordmark .rule-icon::before,
body:has(#view-match.sm-matches-v2.on) .wordmark .rule-icon::after { background:#2F65F5; }
body:has(#view-match.sm-matches-v2.on) nav.tabs {
  justify-self:center;display:flex;gap:4px;background:none;border:0;padding:0;
}
body:has(#view-match.sm-matches-v2.on) .tab {
  position:relative;background:none;border:0;border-radius:0;padding:10px 14px;
  font:600 14.5px Karla,ui-sans-serif,system-ui;color:#617386;cursor:pointer;
}
body:has(#view-match.sm-matches-v2.on) .tab:hover { background:none;color:#102A43; }
body:has(#view-match.sm-matches-v2.on) .tab[aria-current="true"] { color:#2F65F5; }
body:has(#view-match.sm-matches-v2.on) .tab[aria-current="true"]::after {
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:#2F65F5;border-radius:2px;
}
body:has(#view-match.sm-matches-v2.on) .tab:focus-visible { outline:2px solid #2F65F5;outline-offset:2px; }
body:has(#view-match.sm-matches-v2.on) .topbar-act { justify-self:end;display:flex;align-items:center;gap:14px; }
body:has(#view-match.sm-matches-v2.on) .topbar-scan {
  background:var(--mx-coral);border:1px solid var(--mx-coral);color:#fff;border-radius:999px;
  min-height:42px;padding:0 18px;font:700 14px Karla,ui-sans-serif,system-ui;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
body:has(#view-match.sm-matches-v2.on) .topbar-scan:hover {
  background:var(--mx-coral-2);border-color:var(--mx-coral-2);transform:translateY(-1px);
}
body:has(#view-match.sm-matches-v2.on) .score-pill { display:none; }
body:has(#view-match.sm-matches-v2.on) .sm-acct-ctl { display:flex;gap:8px;align-items:center; }
body:has(#view-match.sm-matches-v2.on) .sm-acct-btn {
  background:#fff;border:1px solid #D9E3EC;color:#102A43;border-radius:999px;
  min-height:42px;padding:0 14px;font:600 14px Karla,ui-sans-serif,system-ui;
}
body:has(#view-match.sm-matches-v2.on) .sm-acct-btn:hover { border-color:#2F65F5;color:#2F65F5; }
body:has(#view-match.sm-matches-v2.on) .sm-acct-btn.primary { background:#102A43;border-color:#102A43;color:#fff; }
body:has(#view-match.sm-matches-v2.on) .sm-acct-btn.primary:hover { background:#061B30;border-color:#061B30; }
body:has(#view-match.sm-matches-v2.on) .sm-avatar {
  width:40px;height:40px;border-radius:50%;border:1px solid #D9E3EC;background:#EAF2FF;
  color:#2354D8;font:700 14px Karla,ui-sans-serif,system-ui;display:grid;place-items:center;
}

/* -------------------------------------------------------------- the title band

   SHALLOW ON PURPOSE. At 1440x900 the filters and the first product row have to be
   on screen without scrolling, so this band is a strip, not a hero: 26px of padding,
   a 30px display line, one subtitle, nothing else. */
#view-match.sm-matches-v2 .mx-page-intro {
  background:var(--mx-mist);
  border-bottom:1px solid var(--mx-line);
}
#view-match.sm-matches-v2 .mx-page-intro__inner {
  max-width:1512px;margin:0 auto;padding:18px 24px 16px;
}
#view-match.sm-matches-v2 .mx-eyebrow {
  margin:0;font-family:var(--mx-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mx-blue-2);
}
#view-match.sm-matches-v2 #mxPageTitle {
  margin:5px 0 0;font-family:var(--mx-display);font-weight:600;font-size:28px;
  line-height:1.12;letter-spacing:-.015em;color:var(--mx-ink);
}
#view-match.sm-matches-v2 .mx-page-sub {
  margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--mx-muted);max-width:56ch;
}

/* ---------------------------------------------------------------- shell grid */
#view-match.sm-matches-v2 .mx-shell {
  display:grid;
  grid-template-columns:var(--mx-rail-w) minmax(660px,1fr) var(--mx-build-w);
  gap:var(--mx-gap);
  max-width:1512px;
  margin:0 auto;
  padding:16px 24px 64px;
  align-items:start;
}
#view-match.sm-matches-v2 .mx-main { min-width:0; }

/* ------------------------------------------------------- LEFT: reference rail */
#view-match.sm-matches-v2 .mx-rail { min-width:0; }
/* NO INTERNAL SCROLLBAR. The rail is as tall as its content and the page scrolls. */
#view-match.sm-matches-v2 .mx-rail-in { max-height:none;overflow:visible; }

#view-match.sm-matches-v2 .mx-section-label {
  margin:0 0 10px;font-family:var(--mx-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mx-muted);
}

#view-match.sm-matches-v2 .mx-refcard {
  background:var(--mx-white);border:1px solid var(--mx-line);border-radius:var(--mx-radius);
  padding:14px;box-shadow:var(--mx-shadow);
}

/* The garment sits in a pale-blue field, whether it is the real photograph or the
   drawn reference. One field, one garment, never both pictures at once. */
#view-match.sm-matches-v2 .mx-refphoto,
#view-match.sm-matches-v2 .mx-refimg {
  position:relative;background:var(--mx-soft);border:1px solid var(--mx-line);
  border-radius:var(--mx-radius-sm);overflow:hidden;
}
#view-match.sm-matches-v2 .mx-refimg {
  display:grid;place-items:center;min-height:212px;padding:12px;
}
#view-match.sm-matches-v2 .mx-refimg[hidden] { display:none; }
#view-match.sm-matches-v2 .mx-refimg svg { width:100%;height:auto;max-height:196px;display:block; }
/* The drawn guides are cobalt and, being decoration, are hidden from assistive tech:
   every value they mark is also a real row in .mx-refstats below. */
/* The renderer emits <line class="callout-line"> and <text class="callout">, plus one
   <path> for the garment outline. Named exactly, because a wildcard match here was
   leaving the guides terracotta from the old palette. */
#view-match.sm-matches-v2 .mx-refimg .callout-line { stroke:var(--mx-blue);stroke-width:1;opacity:.85; }
#view-match.sm-matches-v2 .mx-refimg .callout { fill:var(--mx-blue-2);font-family:var(--mx-mono);font-size:8.5px;letter-spacing:.06em; }
#view-match.sm-matches-v2 .mx-refimg svg path { stroke:var(--mx-ink);fill:rgba(47,101,245,.07); }
#view-match.sm-matches-v2 .mx-refimg .legend {
  position:absolute;left:10px;bottom:8px;font-family:var(--mx-mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mx-muted);
}

#view-match.sm-matches-v2 .mx-photo-wrap { position:relative;margin:0;display:block; }
#view-match.sm-matches-v2 .mx-photo { display:block;width:100%;height:212px;object-fit:contain; }
#view-match.sm-matches-v2 .mx-photo-wrap.is-loading { display:grid;place-items:center;height:212px; }
#view-match.sm-matches-v2 .mx-photo-note,
#view-match.sm-matches-v2 .mx-photo-none p {
  font-size:12.5px;color:var(--mx-muted);margin:0;text-align:center;line-height:1.5;
}
#view-match.sm-matches-v2 .mx-photo-none { display:grid;gap:10px;place-items:center;padding:26px 14px; }
#view-match.sm-matches-v2 .mx-photo-cta {
  font:600 12.5px var(--mx-body);color:var(--mx-blue);background:var(--mx-white);
  border:1px solid var(--mx-line-strong);border-radius:999px;padding:8px 14px;
  min-height:36px;cursor:pointer;
}
#view-match.sm-matches-v2 .mx-photo-cta:hover { background:var(--mx-blue);border-color:var(--mx-blue);color:#fff; }
/* Guides over a photograph are REAL COORDINATES ONLY (B5). overlaySvg() emits a line
   only where the scan pipeline returned landmark points for it, so a measurement with
   no geometry draws nothing and reads as a value in the list instead of a fake line. */
#view-match.sm-matches-v2 .mx-ovl { position:absolute;inset:0;width:100%;height:100%;pointer-events:none; }
#view-match.sm-matches-v2 .mx-ovl-line { stroke:var(--mx-blue);stroke-width:2;stroke-linecap:round;opacity:.9; }
#view-match.sm-matches-v2 .mx-ovl-label { fill:var(--mx-blue-2);font-family:var(--mx-mono);font-size:9px;letter-spacing:.12em; }
#view-match.sm-matches-v2 .mx-photo-toggle { display:flex;gap:4px;margin-top:8px; }
#view-match.sm-matches-v2 .mx-photo-toggle button {
  flex:1;font:600 11.5px var(--mx-body);min-height:32px;border-radius:999px;cursor:pointer;
  border:1px solid var(--mx-line);background:var(--mx-white);color:var(--mx-muted);
}
#view-match.sm-matches-v2 .mx-photo-toggle button.on { background:var(--mx-mist);border-color:var(--mx-blue);color:var(--mx-blue-2); }

/* The state line. Green ONLY when the reference really was measured. */
#view-match.sm-matches-v2 .mx-refstate {
  display:flex;align-items:center;gap:7px;margin:12px 0 0;
  font:600 12.5px var(--mx-body);color:var(--mx-muted);
}
#view-match.sm-matches-v2 .mx-refstate i {
  width:16px;height:16px;flex:none;border-radius:50%;display:block;
  background:var(--mx-line-strong);
}
#view-match.sm-matches-v2 .mx-refstate.is-ok { color:var(--mx-success); }
#view-match.sm-matches-v2 .mx-refstate.is-ok i {
  background:var(--mx-success);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.4 11.2 3.6 8.4l1.1-1.1 1.7 1.7 4.9-4.9 1.1 1.1z'/></svg>") center/14px no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.4 11.2 3.6 8.4l1.1-1.1 1.7 1.7 4.9-4.9 1.1 1.1z'/></svg>") center/14px no-repeat;
}
#view-match.sm-matches-v2 .mx-refstate.is-part { color:var(--mx-blue-2); }
#view-match.sm-matches-v2 .mx-refstate.is-part i { background:var(--mx-blue); }

#view-match.sm-matches-v2 .mx-refname {
  margin:8px 0 0;font-family:var(--mx-display);font-weight:600;font-size:16px;
  line-height:1.25;color:var(--mx-ink);
}

#view-match.sm-matches-v2 .mx-refstats {
  display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:12px 0 0;
  background:var(--mx-line);border:1px solid var(--mx-line);border-radius:var(--mx-radius-sm);
  overflow:hidden;
}
#view-match.sm-matches-v2 .mx-stat { background:var(--mx-white);padding:9px 10px; }
#view-match.sm-matches-v2 .mx-stat dt {
  font-family:var(--mx-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mx-muted);
}
#view-match.sm-matches-v2 .mx-stat dd {
  margin:3px 0 0;font:700 17px var(--mx-body);color:var(--mx-ink);
  font-variant-numeric:tabular-nums;
}
#view-match.sm-matches-v2 .mx-stat dd small { font-size:10.5px;font-weight:600;color:var(--mx-muted);margin-left:2px; }
/* A measurement the scan did not produce says so. It is never a number. */
#view-match.sm-matches-v2 .mx-none { font:600 12px var(--mx-body);color:var(--mx-muted); }

#view-match.sm-matches-v2 .mx-linkbtn {
  display:block;width:100%;margin:12px 0 0;min-height:38px;cursor:pointer;
  font:600 12.5px var(--mx-body);color:var(--mx-blue);background:var(--mx-white);
  border:1px solid var(--mx-line-strong);border-radius:999px;
}
#view-match.sm-matches-v2 .mx-linkbtn:hover { border-color:var(--mx-blue);background:var(--mx-mist); }

/* the advanced disclosure */
#view-match.sm-matches-v2 .mx-adv {
  margin-top:12px;background:var(--mx-white);border:1px solid var(--mx-line);
  border-radius:var(--mx-radius);padding:14px;box-shadow:var(--mx-shadow);
}
#view-match.sm-matches-v2 .mx-adv[hidden] { display:none; }
#view-match.sm-matches-v2 .mx-adv-h {
  margin:0 0 8px;font-family:var(--mx-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mx-muted);
}
#view-match.sm-matches-v2 .mx-adv-h + * { margin-top:0; }
#view-match.sm-matches-v2 .mx-adv .seg { display:flex;gap:6px;margin-bottom:10px; }
#view-match.sm-matches-v2 .mx-adv .seg button {
  flex:1;min-height:38px;border-radius:var(--mx-radius-sm);cursor:pointer;
  border:1px solid var(--mx-line);background:var(--mx-white);color:var(--mx-muted);
  font:600 12.5px var(--mx-body);
}
#view-match.sm-matches-v2 .mx-adv .seg button[aria-pressed="true"] {
  background:var(--mx-mist);border-color:var(--mx-blue);color:var(--mx-blue-2);
}
#view-match.sm-matches-v2 .mx-stats { display:grid;gap:5px;font-size:12px;color:var(--mx-muted); }
#view-match.sm-matches-v2 .mx-stats b {
  font:700 13px var(--mx-mono);color:var(--mx-ink);margin-right:6px;font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------- the tabs row */
#view-match.sm-matches-v2 .mx-tabs {
  display:flex;gap:2px;margin:0 0 8px;border-bottom:1px solid var(--mx-line);
}
#view-match.sm-matches-v2 .mx-tab {
  position:relative;background:none;border:0;padding:8px 2px;margin-right:20px;cursor:pointer;
  font:700 13.5px var(--mx-body);color:var(--mx-muted);
}
#view-match.sm-matches-v2 .mx-tab.on { color:var(--mx-ink); }
#view-match.sm-matches-v2 .mx-tab.on::after {
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--mx-blue);
}
#view-match.sm-matches-v2 .mx-tab:focus-visible { outline:2px solid var(--mx-blue);outline-offset:2px;border-radius:4px; }

/* ---------------------------------------------------------- the filter toolbar

   ONE COMPACT TOOLBAR, TWO ROWS. Row 1 is the audience segment and the brand search.
   Row 2 is the five named facets plus Filters. Everything that expands does so in an
   anchored popover or the one drawer; nothing expands inline and pushes the grid down. */
#view-match.sm-matches-v2 .mx-filters {
  background:var(--mx-white);border:1px solid var(--mx-line);border-radius:var(--mx-radius);
  padding:10px 12px;margin:0 0 12px;box-shadow:var(--mx-shadow);
}
#view-match.sm-matches-v2 .mx-bar { display:grid;gap:9px; }
#view-match.sm-matches-v2 .mx-filter-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
#view-match.sm-matches-v2 .mx-filter-row--primary { justify-content:space-between; }

/* audience segment — the selected one is dark navy */
#view-match.sm-matches-v2 .genseg,
#view-match.sm-matches-v2 .mx-inline-facet {
  display:flex;align-items:center;gap:2px;padding:3px;margin:0;border:1px solid var(--mx-line);
  border-radius:999px;background:var(--mx-soft);
}
#view-match.sm-matches-v2 .mx-inline-facet .facet-lbl { display:none; }
#view-match.sm-matches-v2 .genseg label {
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:0 15px;border-radius:999px;cursor:pointer;
  font:600 13px var(--mx-body);color:var(--mx-muted);white-space:nowrap;
  transition:background .14s ease,color .14s ease;
}
#view-match.sm-matches-v2 .genseg label:hover { color:var(--mx-ink); }
#view-match.sm-matches-v2 .genseg input { position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer; }
#view-match.sm-matches-v2 .genseg label:has(input:checked) { background:var(--mx-navy);color:#fff; }
#view-match.sm-matches-v2 .genseg label:has(input:focus-visible) { outline:2px solid var(--mx-blue);outline-offset:2px; }

/* brand search */
#view-match.sm-matches-v2 .mx-brand { position:relative;flex:0 1 300px;min-width:210px; }
#view-match.sm-matches-v2 .mx-brand .facet-lbl { display:none; }
#view-match.sm-matches-v2 #fBrandSearch {
  width:100%;min-height:40px;padding:0 12px 0 34px;border-radius:999px;
  border:1px solid var(--mx-line-strong);background:var(--mx-white);
  font:400 13.5px var(--mx-body);color:var(--mx-ink);
}
#view-match.sm-matches-v2 #fBrandSearch::placeholder { color:var(--mx-muted); }
#view-match.sm-matches-v2 #fBrandSearch:focus-visible { outline:2px solid var(--mx-blue);outline-offset:1px;border-color:var(--mx-blue); }
#view-match.sm-matches-v2 .mx-brand::before {
  content:"";position:absolute;left:13px;top:50%;width:14px;height:14px;
  transform:translateY(-50%);pointer-events:none;background:var(--mx-muted);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M7 1a6 6 0 1 0 3.7 10.7l3.3 3.3 1.1-1.1-3.3-3.3A6 6 0 0 0 7 1zm0 1.6a4.4 4.4 0 1 1 0 8.8 4.4 4.4 0 0 1 0-8.8z'/></svg>") center/14px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M7 1a6 6 0 1 0 3.7 10.7l3.3 3.3 1.1-1.1-3.3-3.3A6 6 0 0 0 7 1zm0 1.6a4.4 4.4 0 1 1 0 8.8 4.4 4.4 0 0 1 0-8.8z'/></svg>") center/14px no-repeat;
  z-index:1;
}
#view-match.sm-matches-v2 .brandfacet,
#view-match.sm-matches-v2 #fBrandList {
  display:none;position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;
  max-height:280px;overflow:auto;overscroll-behavior:contain;padding:8px;
  background:var(--mx-white);border:1px solid var(--mx-line-strong);
  border-radius:var(--mx-radius);box-shadow:0 12px 34px -12px rgba(16,42,67,.32);
}
#view-match.sm-matches-v2 .mx-brand.open #fBrandList { display:block; }
#view-match.sm-matches-v2 .bchip {
  display:flex;align-items:center;gap:8px;min-height:36px;padding:0 8px;border-radius:var(--mx-radius-sm);
  font:500 13px var(--mx-body);color:var(--mx-ink);cursor:pointer;
}
#view-match.sm-matches-v2 .bchip:hover { background:var(--mx-soft); }
#view-match.sm-matches-v2 .bchip.on { background:var(--mx-mist);color:var(--mx-blue-2);font-weight:700; }

/* the five facet popovers + Filters — all cobalt-outlined */
#view-match.sm-matches-v2 .mx-pop { position:relative; }
#view-match.sm-matches-v2 .mx-pop-btn {
  display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;
  border:1px solid var(--mx-blue);border-radius:999px;background:var(--mx-white);
  color:var(--mx-blue-2);font:600 13px var(--mx-body);cursor:pointer;white-space:nowrap;
  transition:background .14s ease,border-color .14s ease;
}
#view-match.sm-matches-v2 .mx-pop-btn:hover { background:var(--mx-mist); }
#view-match.sm-matches-v2 .mx-pop-btn:focus-visible { outline:2px solid var(--mx-blue);outline-offset:2px; }
#view-match.sm-matches-v2 .mx-pop.on .mx-pop-btn,
#view-match.sm-matches-v2 .mx-pop-btn[aria-expanded="true"] { background:var(--mx-blue);border-color:var(--mx-blue);color:#fff; }
#view-match.sm-matches-v2 .mx-pop-caret { width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6; }
#view-match.sm-matches-v2 .mx-pop-btn[aria-expanded="true"] .mx-pop-caret { transform:rotate(180deg); }
#view-match.sm-matches-v2 .mx-pop-n {
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--mx-blue);
  color:#fff;font:700 10.5px var(--mx-mono);display:inline-grid;place-items:center;
}
#view-match.sm-matches-v2 .mx-pop-btn[aria-expanded="true"] .mx-pop-n { background:#fff;color:var(--mx-blue-2); }
#view-match.sm-matches-v2 .mx-pop-n[hidden] { display:none; }
#view-match.sm-matches-v2 .mx-all-filters {
  display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;
  border:1px solid var(--mx-blue);border-radius:999px;background:var(--mx-white);
  color:var(--mx-blue-2);font:600 13px var(--mx-body);cursor:pointer;
}

/* ANCHORED, NEVER INLINE. A panel is absolutely positioned against its trigger so
   opening a facet cannot reflow the grid underneath it. */
#view-match.sm-matches-v2 .mx-pop-panel {
  display:none;position:absolute;z-index:60;top:calc(100% + 7px);left:0;min-width:268px;
  max-height:min(430px,60vh);overflow:auto;overscroll-behavior:contain;
  background:var(--mx-white);border:1px solid var(--mx-line-strong);
  border-radius:var(--mx-radius);box-shadow:0 14px 38px -14px rgba(16,42,67,.34);
}
#view-match.sm-matches-v2 .mx-pop-btn[aria-expanded="true"] + .mx-pop-panel { display:block; }
#view-match.sm-matches-v2 .mx-pop-wide .mx-pop-panel { min-width:min(560px,86vw); }
/* the last two triggers open leftward so a panel cannot fall off the column */
#view-match.sm-matches-v2 .mx-filter-row--facets .mx-pop:nth-last-child(-n+2) .mx-pop-panel { left:auto;right:0; }
#view-match.sm-matches-v2 .mx-pop-body { padding:12px 13px;display:grid;gap:11px; }
#view-match.sm-matches-v2 .mx-pop-foot {
  position:sticky;bottom:0;display:flex;justify-content:space-between;gap:8px;
  padding:9px 13px;border-top:1px solid var(--mx-line);background:var(--mx-white);
}
#view-match.sm-matches-v2 .mx-pop-clear {
  background:none;border:0;padding:6px 2px;min-height:34px;cursor:pointer;
  font:600 12.5px var(--mx-body);color:var(--mx-muted);
}
#view-match.sm-matches-v2 .mx-pop-clear:hover { color:var(--mx-ink);text-decoration:underline; }
#view-match.sm-matches-v2 .mx-pop-done {
  background:var(--mx-blue);border:1px solid var(--mx-blue);color:#fff;border-radius:999px;
  padding:0 16px;min-height:34px;cursor:pointer;font:700 12.5px var(--mx-body);
}
#view-match.sm-matches-v2 .mx-pop-done:hover { background:var(--mx-blue-2);border-color:var(--mx-blue-2); }

/* controls inside a panel */
#view-match.sm-matches-v2 .mx-pop-body .row,
#view-match.sm-matches-v2 .mx-pop-body .fld { display:grid;gap:5px;margin:0; }
#view-match.sm-matches-v2 .mx-pop-body .row > span,
#view-match.sm-matches-v2 .mx-pop-body .facet-lbl {
  font-family:var(--mx-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mx-muted);
}
#view-match.sm-matches-v2 select,
#view-match.sm-matches-v2 .mx-pop-body select {
  width:100%;min-height:38px;padding:0 30px 0 11px;border-radius:var(--mx-radius-sm);
  border:1px solid var(--mx-line-strong);background:var(--mx-white);color:var(--mx-ink);
  font:500 13px var(--mx-body);appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23617386' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;background-size:10px 6px;
}
#view-match.sm-matches-v2 select:focus-visible { outline:2px solid var(--mx-blue);outline-offset:1px;border-color:var(--mx-blue); }
#view-match.sm-matches-v2 input[type="range"] { width:100%;accent-color:var(--mx-blue); }
#view-match.sm-matches-v2 .mx-tolhead { display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px; }
#view-match.sm-matches-v2 .mx-tolhead span:first-child {
  font-family:var(--mx-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mx-muted);
}
#view-match.sm-matches-v2 .tolval { font:700 13px var(--mx-mono);color:var(--mx-blue-2);font-variant-numeric:tabular-nums; }
#view-match.sm-matches-v2 .hint { font-size:11.5px;line-height:1.45;color:var(--mx-muted);margin-top:5px; }
#view-match.sm-matches-v2 .checks { display:flex;flex-wrap:wrap;gap:6px; }
#view-match.sm-matches-v2 .checkpill {
  display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;
  border:1px solid var(--mx-line-strong);border-radius:999px;background:var(--mx-white);
  font:600 12.5px var(--mx-body);color:var(--mx-ink);cursor:pointer;
}
#view-match.sm-matches-v2 .checkpill:has(input:checked) { background:var(--mx-mist);border-color:var(--mx-blue);color:var(--mx-blue-2); }
#view-match.sm-matches-v2 .checkpill input { accent-color:var(--mx-blue);width:15px;height:15px;margin:0; }
#view-match.sm-matches-v2 .szchip,
#view-match.sm-matches-v2 .svchip {
  display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;
  border:1px solid var(--mx-line-strong);border-radius:999px;background:var(--mx-white);
  font:600 12.5px var(--mx-body);color:var(--mx-ink);cursor:pointer;
}
#view-match.sm-matches-v2 .szchip.on,
#view-match.sm-matches-v2 .svchip.on { background:var(--mx-mist);border-color:var(--mx-blue);color:var(--mx-blue-2); }
#view-match.sm-matches-v2 .facet { display:grid;gap:6px; }
#view-match.sm-matches-v2 .facet .chips,
#view-match.sm-matches-v2 .fsize,
#view-match.sm-matches-v2 .svfacet { display:flex;flex-wrap:wrap;gap:5px; }
/* The facet host stays in the DOM so late-arriving style facets have somewhere to
   land; sweep() moves them into the drawer. It must never be visible itself. */
#view-match.sm-matches-v2 .mx-leftover { display:none; }

/* one drawer, for everything that is not one of the five named facets */
#view-match.sm-matches-v2 .mx-filter-drawer[hidden] { display:none; }
#view-match.sm-matches-v2 .mx-filter-drawer {
  margin-top:9px;padding-top:11px;border-top:1px solid var(--mx-line);
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}

/* active-filter chips */
#view-match.sm-matches-v2 .mx-chips { display:flex;flex-wrap:wrap;gap:6px;margin-top:9px; }
#view-match.sm-matches-v2 .mx-chips[hidden] { display:none; }
#view-match.sm-matches-v2 .mx-chip {
  display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 6px 0 11px;
  border-radius:999px;background:var(--mx-mist);border:1px solid transparent;
  font:600 12px var(--mx-body);color:var(--mx-blue-2);
}
#view-match.sm-matches-v2 .mx-chip button {
  width:20px;height:20px;border:0;border-radius:50%;background:none;cursor:pointer;
  color:var(--mx-blue-2);font-size:13px;line-height:1;display:grid;place-items:center;
}
#view-match.sm-matches-v2 .mx-chip button:hover { background:rgba(47,101,245,.16); }
#view-match.sm-matches-v2 .mx-chip-clear {
  background:none;border:0;font:600 12px var(--mx-body);color:var(--mx-muted);
  cursor:pointer;min-height:30px;padding:0 6px;
}
#view-match.sm-matches-v2 .mx-chip-clear:hover { color:var(--mx-ink);text-decoration:underline; }
#view-match.sm-matches-v2 .cat-chips:empty { display:none; }

/* ---------------------------------------------------------- the results header */
#view-match.sm-matches-v2 .mx-results-head {
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin:0 0 12px;flex-wrap:wrap;
}
#view-match.sm-matches-v2 .mx-results-headline { min-width:0; }
#view-match.sm-matches-v2 #mxResultsTitle {
  margin:0;font-family:var(--mx-display);font-weight:600;font-size:19px;line-height:1.25;
  letter-spacing:-.01em;color:var(--mx-ink);
}
#view-match.sm-matches-v2 #resCount { font-variant-numeric:tabular-nums; }
/* The empty case swaps the whole sentence rather than writing prose into the count. */
#view-match.sm-matches-v2 #mxResultsTitle[data-empty="true"] { font-size:0; }
#view-match.sm-matches-v2 #mxResultsTitle[data-empty="true"]::after {
  content:attr(data-empty-text);font-size:19px;
}
#view-match.sm-matches-v2 .mx-fitnote { margin:4px 0 0;font-size:12.5px;color:var(--mx-muted); }
#view-match.sm-matches-v2 .mx-sortwrap { display:inline-flex;align-items:center;gap:8px;flex:none; }
#view-match.sm-matches-v2 .mx-flabel {
  font-family:var(--mx-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mx-muted);
}
#view-match.sm-matches-v2 .mx-sortwrap select { width:auto;min-width:150px; }

/* ------------------------------------------------------------- the product grid
   THREE PER ROW. No carousel, no horizontal scroll: the grid wraps and the page
   scrolls, which is the only scrollbar on this page. */
#view-match.sm-matches-v2 .mx-results-pane { display:block; }
#view-match.sm-matches-v2 .mx-product-grid {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
#view-match.sm-matches-v2 .empty,
#view-match.sm-matches-v2 .banner {
  grid-column:1/-1;background:var(--mx-soft);border:1px solid var(--mx-line);
  border-radius:var(--mx-radius);padding:20px;color:var(--mx-ink);
}
#view-match.sm-matches-v2 .empty h3 { margin:0 0 6px;font-family:var(--mx-display);font-size:17px;font-weight:600; }
#view-match.sm-matches-v2 .empty p,
#view-match.sm-matches-v2 .banner { font-size:13.5px;color:var(--mx-muted);margin:0; }
#view-match.sm-matches-v2 .banner b { color:var(--mx-ink); }

#view-match.sm-matches-v2 .pc {
  display:flex;flex-direction:column;background:var(--mx-white);
  border:1px solid var(--mx-line);border-radius:var(--mx-radius);overflow:hidden;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
#view-match.sm-matches-v2 .pc:hover {
  border-color:var(--mx-line-strong);box-shadow:0 10px 26px -14px rgba(16,42,67,.30);
}
@media (prefers-reduced-motion:no-preference) {
  #view-match.sm-matches-v2 .pc:hover { transform:translateY(-2px); }
}
#view-match.sm-matches-v2 .pc-img {
  position:relative;aspect-ratio:4/5;background:var(--mx-soft);
  border-bottom:1px solid var(--mx-line);
}
#view-match.sm-matches-v2 .pc-imgbtn {
  display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;
}
#view-match.sm-matches-v2 .pc-img img { display:block;width:100%;height:100%;object-fit:cover; }
/* A tile is a cutout on transparency with its own margin, so it is CONTAINED and
   padded; a retailer photograph fills the frame. */
#view-match.sm-matches-v2 .pc-img.is-generated img { object-fit:contain;padding:10px; }
#view-match.sm-matches-v2 .pc-img.noimg::after {
  content:"No photo on file";position:absolute;inset:0;display:grid;place-items:center;
  font:600 12px var(--mx-body);color:var(--mx-muted);
}
/* circular cobalt fit badge */
#view-match.sm-matches-v2 .pc-fit {
  position:absolute;top:10px;left:10px;width:52px;height:52px;border-radius:50%;
  background:var(--mx-blue);color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  font:700 17px var(--mx-body);line-height:1;font-variant-numeric:tabular-nums;
  box-shadow:0 2px 8px rgba(16,42,67,.22);
}
#view-match.sm-matches-v2 .pc-fit small {
  display:block;font:500 7px var(--mx-mono);letter-spacing:.06em;text-transform:uppercase;
  opacity:.8;margin-top:2px;line-height:1;
}
#view-match.sm-matches-v2 .pc-fit.v-exact { background:var(--mx-success); }
#view-match.sm-matches-v2 .pc-fit.v-far { background:var(--mx-muted); }
#view-match.sm-matches-v2 .pc-bm {
  position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--mx-line);background:rgba(255,255,255,.94);cursor:pointer;
  display:grid;place-items:center;color:var(--mx-muted);
}
#view-match.sm-matches-v2 .pc-bm svg { width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5; }
#view-match.sm-matches-v2 .pc-bm[aria-pressed="true"] { color:var(--mx-coral);border-color:var(--mx-coral); }
#view-match.sm-matches-v2 .pc-bm[aria-pressed="true"] svg { fill:currentColor; }
#view-match.sm-matches-v2 .pc-merch,
#view-match.sm-matches-v2 .pc-oos {
  position:absolute;left:10px;bottom:10px;padding:3px 8px;border-radius:999px;
  font:500 9.5px var(--mx-mono);letter-spacing:.08em;text-transform:uppercase;
  background:rgba(6,27,48,.82);color:#fff;
}
#view-match.sm-matches-v2 .pc-oos { left:auto;right:10px;background:var(--mx-coral-2); }

#view-match.sm-matches-v2 .pc-body { display:flex;flex-direction:column;gap:8px;padding:12px 13px 13px;flex:1; }
#view-match.sm-matches-v2 .pc-name {
  margin:0;font:600 14px var(--mx-body);line-height:1.32;color:var(--mx-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#view-match.sm-matches-v2 .pc-row { display:flex;align-items:baseline;justify-content:space-between;gap:10px; }
#view-match.sm-matches-v2 .pc-brand {
  font-family:var(--mx-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mx-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#view-match.sm-matches-v2 .pc-price { font:700 15px var(--mx-body);color:var(--mx-ink);font-variant-numeric:tabular-nums;flex:none; }
#view-match.sm-matches-v2 .pc-sizes { display:flex;flex-wrap:wrap;gap:4px; }
#view-match.sm-matches-v2 .pc-sz {
  font:600 10.5px var(--mx-mono);padding:3px 7px;border-radius:5px;
  border:1px solid var(--mx-line);color:var(--mx-muted);
}
#view-match.sm-matches-v2 .pc-sz.on { border-color:var(--mx-blue);color:var(--mx-blue-2);background:var(--mx-mist); }
#view-match.sm-matches-v2 .pc-sz.oos { opacity:.4;text-decoration:line-through; }

/* the 4-up delta row */
#view-match.sm-matches-v2 .pc-meas {
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--mx-line);
  border:1px solid var(--mx-line);border-radius:var(--mx-radius-sm);overflow:hidden;
}
#view-match.sm-matches-v2 .pc-m { background:var(--mx-white);padding:6px 4px;text-align:center; }
#view-match.sm-matches-v2 .pc-mk {
  display:block;font-family:var(--mx-mono);font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mx-muted);
}
#view-match.sm-matches-v2 .pc-mv {
  display:block;font:700 12.5px var(--mx-body);color:var(--mx-ink);margin-top:2px;
  font-variant-numeric:tabular-nums;
}
#view-match.sm-matches-v2 .pc-mv small { font-size:8.5px;font-weight:600;color:var(--mx-muted); }
#view-match.sm-matches-v2 .pc-md {
  display:block;font:600 10px var(--mx-mono);margin-top:1px;color:var(--mx-muted);
  font-variant-numeric:tabular-nums;
}
#view-match.sm-matches-v2 .pc-md.match { color:var(--mx-success); }
#view-match.sm-matches-v2 .pc-md.near { color:var(--mx-blue-2); }
#view-match.sm-matches-v2 .pc-md.off { color:var(--mx-coral-2); }
#view-match.sm-matches-v2 .pc-nomeas {
  margin:0;font-size:11.5px;color:var(--mx-muted);background:var(--mx-soft);
  border-radius:var(--mx-radius-sm);padding:8px 10px;
}
#view-match.sm-matches-v2 .pc-fitline {
  font:400 12px var(--mx-body);font-style:normal;color:var(--mx-muted);margin-top:auto;
}
#view-match.sm-matches-v2 .pc-act { display:flex;gap:7px;align-items:stretch; }
#view-match.sm-matches-v2 .pc-view {
  flex:1;min-height:40px;border-radius:999px;cursor:pointer;
  background:var(--mx-blue);border:1px solid var(--mx-blue);color:#fff;
  font:700 13px var(--mx-body);
}
#view-match.sm-matches-v2 .pc-view:hover { background:var(--mx-blue-2);border-color:var(--mx-blue-2); }
#view-match.sm-matches-v2 .pc-bm2 {
  display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;
  border:1px solid var(--mx-line-strong);border-radius:999px;background:var(--mx-white);
  color:var(--mx-muted);font:600 12.5px var(--mx-body);cursor:pointer;
}
#view-match.sm-matches-v2 .pc-bm2 svg { width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5; }
#view-match.sm-matches-v2 .pc-bm2[aria-pressed="true"] { color:var(--mx-coral);border-color:var(--mx-coral); }
#view-match.sm-matches-v2 .pc-bm2[aria-pressed="true"] svg { fill:currentColor; }
#view-match.sm-matches-v2 .pc :focus-visible { outline:2px solid var(--mx-blue);outline-offset:2px; }

#view-match.sm-matches-v2 .mx-more { margin-top:30px; }
#view-match.sm-matches-v2 .mx-more[hidden] { display:none; }
#view-match.sm-matches-v2 .mx-more-head { margin-bottom:12px;padding-top:22px;border-top:1px solid var(--mx-line); }
#view-match.sm-matches-v2 .mx-more-head h2 {
  margin:0;font-family:var(--mx-display);font-weight:600;font-size:19px;color:var(--mx-ink);
}
#view-match.sm-matches-v2 .mx-more-head p { margin:4px 0 0;font-size:12.5px;color:var(--mx-muted); }
#view-match.sm-matches-v2 .mx-empty { font-size:13.5px;color:var(--mx-muted);padding:24px 0; }

/* ------------------------------------------------------ RIGHT: build the look

   STICKY, WITH NO INTERNAL SCROLL. The rail pins under the header while the page
   scrolls behind it. match-shell.js measures the rail against the viewport and adds
   .is-tall when it would be taller than the space available, which drops it back to
   static so its bottom stays reachable. Neither mode grows a scrollbar of its own. */
#view-match.sm-matches-v2 .mx-build { min-width:0;position:sticky;top:calc(var(--mx-header-h) + 18px); }
#view-match.sm-matches-v2 .mx-build.is-tall { position:static; }
#view-match.sm-matches-v2 .mx-build-in {
  background:var(--mx-white);border:1px solid var(--mx-line);border-radius:var(--mx-radius);
  overflow:visible;max-height:none;box-shadow:var(--mx-shadow);
}
#view-match.sm-matches-v2 .mx-build-head {
  background:var(--mx-navy);color:#fff;padding:14px 16px 15px;
  border-radius:calc(var(--mx-radius) - 1px) calc(var(--mx-radius) - 1px) 0 0;
}
#view-match.sm-matches-v2 .mx-build-head .mx-eyebrow { color:#8FB4FF; }
#view-match.sm-matches-v2 .mx-build-h {
  margin:7px 0 0;font-family:var(--mx-display);font-weight:600;font-size:19px;
  line-height:1.25;letter-spacing:-.01em;color:#fff;
}
#view-match.sm-matches-v2 .mx-stage { padding:14px 14px 0; }
#view-match.sm-matches-v2 #smOutfitPicker { padding:0 14px; }
#view-match.sm-matches-v2 .ob-filternote { margin:10px 14px 0; }
#view-match.sm-matches-v2 .mx-meter {
  display:flex;align-items:center;gap:8px;margin:14px 14px 0;padding-top:12px;
  border-top:1px solid var(--mx-line);font:600 12.5px var(--mx-body);color:var(--mx-ink);
}
#view-match.sm-matches-v2 .mx-meter-sep { color:var(--mx-line-strong); }
#view-match.sm-matches-v2 #smOutfitCost { color:var(--mx-muted);font-weight:500; }
#view-match.sm-matches-v2 .mx-savebtn,
#view-match.sm-matches-v2 .mx-swapbtn {
  display:block;width:calc(100% - 28px);margin:10px 14px 0;min-height:44px;
  border-radius:999px;cursor:pointer;font:700 13.5px var(--mx-body);
}
#view-match.sm-matches-v2 .mx-savebtn { background:var(--mx-coral);border:1px solid var(--mx-coral);color:#fff; }
#view-match.sm-matches-v2 .mx-savebtn:hover { background:var(--mx-coral-2);border-color:var(--mx-coral-2); }
#view-match.sm-matches-v2 .mx-savebtn[disabled] { opacity:.6;cursor:default; }
#view-match.sm-matches-v2 .mx-swapbtn { background:var(--mx-white);border:1px solid var(--mx-line-strong);color:var(--mx-ink); }
#view-match.sm-matches-v2 .mx-swapbtn:hover { border-color:var(--mx-blue);color:var(--mx-blue-2); }
#view-match.sm-matches-v2 .mx-savenote { margin:9px 14px 0;font-size:12px;color:var(--mx-success); }
#view-match.sm-matches-v2 .mx-savenote.bad { color:var(--mx-coral-2); }
#view-match.sm-matches-v2 .mx-savenote:empty { display:none; }
#view-match.sm-matches-v2 .mx-how { margin:12px 14px 14px;border-top:1px solid var(--mx-line);padding-top:11px; }
#view-match.sm-matches-v2 .mx-how summary {
  cursor:pointer;font:600 12px var(--mx-body);color:var(--mx-muted);list-style:none;
  min-height:32px;display:flex;align-items:center;
}
#view-match.sm-matches-v2 .mx-how summary::-webkit-details-marker { display:none; }
#view-match.sm-matches-v2 .mx-how summary::before { content:"+ ";font-family:var(--mx-mono);margin-right:5px; }
#view-match.sm-matches-v2 .mx-how[open] summary::before { content:"– "; }
#view-match.sm-matches-v2 .mx-how summary:hover { color:var(--mx-ink); }
#view-match.sm-matches-v2 .mx-how p { font-size:12px;line-height:1.55;color:var(--mx-muted);margin:7px 0 0; }
#view-match.sm-matches-v2 .mx-how b { color:var(--mx-ink); }

/* ------------------------------------------------------------------ responsive */

/* 1121-1360: everything narrows, the three columns survive. */
@media (max-width:1360px) {
  #view-match.sm-matches-v2 { --mx-rail-w:226px;--mx-build-w:326px;--mx-gap:14px; }
  #view-match.sm-matches-v2 .mx-shell { grid-template-columns:var(--mx-rail-w) minmax(480px,1fr) var(--mx-build-w);padding-left:18px;padding-right:18px; }
  #view-match.sm-matches-v2 .mx-page-intro__inner { padding-left:18px;padding-right:18px; }
  #view-match.sm-matches-v2 .mx-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #view-match.sm-matches-v2 .mx-refstats { grid-template-columns:1fr 1fr; }
}

/* 761-1120: reference + results side by side, the builder full-width underneath. */
@media (max-width:1120px) {
  #view-match.sm-matches-v2 .mx-shell {
    grid-template-columns:242px minmax(0,1fr);
  }
  #view-match.sm-matches-v2 .mx-build {
    grid-column:1/-1;position:static;max-width:430px;margin:22px auto 0;width:100%;
  }
  #view-match.sm-matches-v2 .mx-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* <=760: one column, everything reachable, no sticky rail, no nested scrolling. */
@media (max-width:760px) {
  #view-match.sm-matches-v2 .mx-page-intro__inner { padding:16px 16px 14px; }
  #view-match.sm-matches-v2 #mxPageTitle { font-size:23px; }
  #view-match.sm-matches-v2 .mx-page-sub { font-size:13px; }
  #view-match.sm-matches-v2 .mx-shell { grid-template-columns:1fr;padding:14px 16px 48px;gap:16px; }
  #view-match.sm-matches-v2 .mx-build { max-width:none;margin-top:8px; }

  /* the reference becomes a compact horizontal summary, not a tall card */
  #view-match.sm-matches-v2 .mx-refcard { display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:start; }
  #view-match.sm-matches-v2 .mx-refphoto,
  #view-match.sm-matches-v2 .mx-refimg { grid-row:1/span 2;min-height:0; }
  #view-match.sm-matches-v2 .mx-photo,
  #view-match.sm-matches-v2 .mx-photo-wrap.is-loading { height:136px; }
  #view-match.sm-matches-v2 .mx-refimg svg { max-height:118px; }
  #view-match.sm-matches-v2 .mx-refstate { margin-top:0; }
  #view-match.sm-matches-v2 .mx-refstats { grid-column:2;grid-template-columns:1fr 1fr; }
  #view-match.sm-matches-v2 .mx-linkbtn { grid-column:1/-1; }

  /* filters become a two-column grid of full-width triggers */
  #view-match.sm-matches-v2 .mx-filter-row--facets { display:grid;grid-template-columns:1fr 1fr;gap:7px; }
  #view-match.sm-matches-v2 .mx-filter-row--facets .mx-pop { width:100%; }
  #view-match.sm-matches-v2 .mx-pop-btn,
  #view-match.sm-matches-v2 .mx-all-filters { width:100%;min-height:44px;justify-content:space-between; }
  #view-match.sm-matches-v2 .mx-brand { flex:1 1 100%; }
  #view-match.sm-matches-v2 .genseg { width:100%;justify-content:space-between; }
  #view-match.sm-matches-v2 .genseg label { flex:1;min-height:44px;padding:0 8px;font-size:12.5px; }

  /* a panel is a bottom sheet on a phone, so it can never be clipped by the column */
  #view-match.sm-matches-v2 .mx-pop-panel {
    position:fixed;left:0;right:0;bottom:0;top:auto;min-width:0;width:100%;
    max-height:76vh;border-radius:16px 16px 0 0;
    box-shadow:0 -10px 40px -12px rgba(16,42,67,.42);
  }
  #view-match.sm-matches-v2 .mx-filter-row--facets .mx-pop:nth-last-child(-n+2) .mx-pop-panel { right:0;left:0; }
  #view-match.sm-matches-v2 .mx-pop-body { padding:14px 16px; }
  #view-match.sm-matches-v2 .mx-pop-foot { padding:11px 16px calc(11px + env(safe-area-inset-bottom)); }
  #view-match.sm-matches-v2 .mx-pop-done,
  #view-match.sm-matches-v2 .mx-pop-clear { min-height:44px; }
  #view-match.sm-matches-v2 .mx-filter-drawer { grid-template-columns:1fr 1fr; }

  #view-match.sm-matches-v2 .mx-results-head { align-items:flex-start; }
  #view-match.sm-matches-v2 .mx-sortwrap { width:100%; }
  #view-match.sm-matches-v2 .mx-sortwrap select { flex:1;min-height:44px; }
  #view-match.sm-matches-v2 .mx-product-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
  #view-match.sm-matches-v2 .pc-view,
  #view-match.sm-matches-v2 .pc-bm2 { min-height:44px; }
  #view-match.sm-matches-v2 .pc-bm { width:44px;height:44px; }
  #view-match.sm-matches-v2 .mx-linkbtn { min-height:44px; }
  #view-match.sm-matches-v2 .checkpill,
  #view-match.sm-matches-v2 .szchip,
  #view-match.sm-matches-v2 .svchip,
  #view-match.sm-matches-v2 .bchip { min-height:44px; }
}
@media (max-width:430px) {
  #view-match.sm-matches-v2 .mx-product-grid { grid-template-columns:1fr; }
  /* The reference stays a COMPACT HORIZONTAL SUMMARY on a phone - that is the point of
     it there - so only the measurement grid drops to one column and the picture keeps
     its place beside the copy. */
  #view-match.sm-matches-v2 .mx-refcard { grid-template-columns:96px minmax(0,1fr);gap:10px; }
  #view-match.sm-matches-v2 .mx-photo,
  #view-match.sm-matches-v2 .mx-photo-wrap.is-loading { height:118px; }
  #view-match.sm-matches-v2 .mx-refimg svg { max-height:100px; }
  #view-match.sm-matches-v2 .mx-refimg .legend { display:none; }
  #view-match.sm-matches-v2 .mx-refname { font-size:15px; }
  #view-match.sm-matches-v2 .mx-stat dd { font-size:15px; }
}
@media (max-width:340px) {
  #view-match.sm-matches-v2 .mx-refcard { grid-template-columns:1fr; }
  #view-match.sm-matches-v2 .mx-refphoto,
  #view-match.sm-matches-v2 .mx-refimg { grid-row:auto; }
  #view-match.sm-matches-v2 .mx-refstats { grid-column:auto; }
}

/* THE SHARED HEADER ON A PHONE. Mirrors the home-v2.css breakpoint block one-for-one:
   the wordmark and the actions share the top line, the nav drops to a scrollable second
   line. Without it the 1fr/auto/1fr desktop grid pushes the coral button off-screen. */
@media (max-width:860px) {
  body:has(#view-match.sm-matches-v2.on) .topbar-in {
    grid-template-columns:1fr auto;padding:10px 18px 6px;gap:6px 10px;
  }
  body:has(#view-match.sm-matches-v2.on) .wordmark { grid-row:1;grid-column:1;font-size:18px; }
  body:has(#view-match.sm-matches-v2.on) .topbar-act { grid-row:1;grid-column:2;gap:8px; }
  body:has(#view-match.sm-matches-v2.on) nav.tabs {
    grid-row:2;grid-column:1/-1;justify-self:stretch;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  body:has(#view-match.sm-matches-v2.on) nav.tabs::-webkit-scrollbar { display:none; }
  body:has(#view-match.sm-matches-v2.on) .tab { padding:8px 10px;font-size:14px;white-space:nowrap; }
  body:has(#view-match.sm-matches-v2.on) .tab[aria-current="true"]::after { left:10px;right:10px; }
  body:has(#view-match.sm-matches-v2.on) .topbar-scan { min-height:40px;padding:0 14px;font-size:13.5px; }
  body:has(#view-match.sm-matches-v2.on) .sm-acct-btn { min-height:40px;padding:0 12px;font-size:13.5px; }
  body:has(#view-match.sm-matches-v2.on) .sm-avatar { width:36px;height:36px; }
}
@media (max-width:420px) {
  body:has(#view-match.sm-matches-v2.on) .topbar-in { padding:9px 14px 5px; }
  body:has(#view-match.sm-matches-v2.on) .wordmark { font-size:16.5px;gap:7px; }
  body:has(#view-match.sm-matches-v2.on) .topbar-scan { padding:0 11px;font-size:13px; }
  body:has(#view-match.sm-matches-v2.on) .sm-acct-btn { padding:0 10px;font-size:13px; }
}

/* The phone bottom-sheet locks the page behind it. Set by match-shell.js. */
html.mx-pop-open, html.mx-pop-open body { overflow:hidden; }

@media (prefers-reduced-motion:reduce) {
  #view-match.sm-matches-v2 *,
  #view-match.sm-matches-v2 *::before,
  #view-match.sm-matches-v2 *::after {
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}