/* ============================================================================
   match-shell.css — the three-column Matches page.
   Uses ONLY the tokens already defined in redesign-system.css:
   --paper --card --card-2 --ink --ink-2 --ink-3 --line --clay --clay-deep
   --disp (Fraunces) --body (Karla) --mono (DM Mono) --r-xs..--r-lg --ease
   No new fonts, no new colours.
   ========================================================================== */

/* the match page earns more width than the rest of the site */
main:has(#view-match.on) { max-width: 1560px; }

/* WHY THE MATCH PAGE SWAPS body's `overflow-x: hidden` FOR `clip`. (2026-08-07)

   redesign-system.css:881 sets `html,body{overflow-x:hidden}` site-wide. `hidden`
   makes body a SCROLL CONTAINER, and a scroll container that never itself scrolls
   is a dead end for `position: sticky` inside it: the sticky box resolves against a
   scrollport that cannot move, so it silently never sticks. The computed style
   still says `sticky`, which is what makes this so hard to see - the rail reported
   `position: sticky` while scrolling 1:1 with the page.

   Isolated at 1440x1400, everything else held constant, toggling ONE property:
       body overflow-x: hidden -> rail top at -607px on a 700px scroll (not stuck)
       body overflow-x: clip   -> rail top at   82px on a 700px scroll (stuck)
   html's value made no difference either way; only body's did.

   `clip` prevents exactly the same horizontal scrolling but does not create a
   scroll container. Scoped to the match route, so no other page changes. */
body:has(#view-match.on) { overflow-x: clip; }

/* SUPERSEDED BY matches-v2.css (2026-08-07).
   The shell grid, left rail, centre head, scan photo panel, filter bar, chip row,
   result area, product card and Build-the-look presentation that used to live here
   were the pre-rebuild system. Keeping them alongside the new stylesheet would be two
   near-identical systems fighting over the same boxes, which is what the duplicate
   media queries at the bottom of this file were already doing. They are deleted, not
   commented out and not merely overridden.
   WHAT STAYS HERE: the body overflow-x rule above (load-bearing for the sticky rail)
   and the product drawer below, which is shared with Closet and Home and is therefore
   not a matches-only block.
   670 lines removed. */

/* ==================================================== THE PRODUCT DRAWER (mxpd)
   Slides in from the right edge over the builder column. Same cream paper, same
   Fraunces display, same monospaced labels, same warm rust as the rest of the page
   - it is another surface of this site, not a component borrowed from a dashboard.
   Restrained: one hairline border, one soft shadow, no elevation stack. */
.mxpd-scrim {
  position: fixed; inset: 0; z-index: 70; background: rgba(42, 32, 24, .30);
  opacity: 0; transition: opacity .2s var(--ease);
}
.mxpd-host.is-open .mxpd-scrim { opacity: 1; }
.mxpd-scrim[hidden] { display: none; }

.mxpd {
  position: fixed; top: 0; right: 0; z-index: 71; height: 100%;
  width: min(420px, 100vw); max-width: 100vw;
  background: var(--paper); border-left: 1px solid var(--line);
  box-shadow: -26px 0 60px -34px rgba(42, 32, 24, .5);
  transform: translateX(100%); transition: transform .22s var(--ease);
  overflow-y: auto; overscroll-behavior: contain;
}
.mxpd[hidden] { display: none; }
.mxpd-host.is-open .mxpd { transform: none; }
.mxpd:focus { outline: none; }
.mxpd-in { padding: 0 20px 24px; }

.mxpd-head {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end;
  padding: 12px 0 6px; margin: 0 -20px; padding-right: 20px;
  background: linear-gradient(var(--paper) 72%, rgba(244, 241, 234, 0));
}
.mxpd-x {
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.mxpd-x svg { width: 13px; height: 13px; fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; }
.mxpd-x:hover { border-color: var(--clay); }
.mxpd-x:hover svg { stroke: var(--clay); }

.mxpd-fig {
  margin: 0 0 16px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
.mxpd-fig img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: center; }
/* a generated tile is a garment on transparency: contain it, never crop it, and
   caption it OUTSIDE the picture so it can never read as a product photograph */
.mxpd-fig.is-tile { background: var(--card); }
.mxpd-fig.is-tile img { object-fit: contain; padding: 14px; }
.mxpd-fig figcaption {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em; line-height: 1.45;
  color: var(--ink-3); padding: 8px 11px 9px; border-top: 1px solid var(--line);
  background: var(--card);
}

.mxpd-brand {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 5px;
}
.mxpd-title h2 {
  font-family: var(--disp); font-size: 22px; line-height: 1.14; font-weight: 600;
  letter-spacing: -.015em; margin: 0; color: var(--ink);
}
.mxpd-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; }
.mxpd-price { font-family: var(--mono); font-size: 18px; color: var(--ink); }
.mxpd-stock {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px; border: 1px solid;
}
.mxpd-stock.in { color: var(--match); border-color: rgba(95, 122, 87, .4); }
.mxpd-stock.out { color: var(--ink-3); border-color: var(--line); }

.mxpd-sect { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line-2); }
.mxpd-sect h3 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 9px; font-weight: 500;
}
/* Colour and size lists print the values the feed published, as text. No swatch is
   drawn: the catalog holds colour NAMES, never hex, and painting a guess next to a
   real product is inventing product data. */
.mxpd-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.mxpd-chips li {
  font-family: var(--body); font-size: 12.5px; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 10px;
  background: var(--card);
}
.mxpd-sizes li { font-family: var(--mono); font-size: 12px; min-width: 34px; text-align: center; }
.mxpd-src { font-size: 13.5px; color: var(--ink-2); margin: 0; }

.mxpd-foot { margin-top: 22px; }
.mxpd-buy {
  display: block; text-align: center; text-decoration: none;
  font-family: var(--body); font-size: 14px; font-weight: 600;
  background: var(--clay); color: #FBF6EC; border: 1px solid var(--clay);
  border-radius: var(--r-sm); padding: 12px 18px;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.mxpd-buy:hover { background: var(--clay-deep); border-color: var(--clay-deep); }
.mxpd-nolink { font-size: 12.5px; color: var(--ink-3); margin: 0; }

.mxpd-x:focus-visible, .mxpd-buy:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
body.mxpd-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mxpd, .mxpd-scrim { transition: none; }
}
/* On a phone the drawer is a full-width sheet rising from the bottom: a 420px panel
   sliding over a 390px screen is just a modal with extra steps. */
@media (max-width: 560px) {
  .mxpd {
    top: auto; bottom: 0; right: 0; left: 0;
    width: 100%; height: auto; max-height: 88vh;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: var(--r-md) var(--r-md) 0 0;
    transform: translateY(100%);
    box-shadow: 0 -26px 60px -34px rgba(42, 32, 24, .5);
  }
  .mxpd-host.is-open .mxpd { transform: none; }
  .mxpd-fig img { height: 220px; }
}

/* ------------------------------------------------------------- topbar tweak */
.topbar-act { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topbar-scan { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
@media (max-width: 720px) {
  .topbar-act .score-pill { display: none; }
}