/* The apex chrome (stream D, 2026-11-08, mock v10): the header tools, the three-tier footer and
   the phone tab bar of the new closo.co home. Linked by _chrome.php ONLY under
   ApexSiteFaire::on(), after wholesale-market-faire.css, and every rule is scoped to
   .wm-header--apex or a .wma- class, so no other page can wear it.

   The menus' panels (.wma-panel) are empty shells until root-22's menu spec lands; this sheet
   only keeps them out of the flow. Tokens are the storefront's own (--wm-pad, --wm-sec); the
   brand fill is the Faire header's #452B90. */

/* ── the gutter (round 2, stream P) ────────────────────────────────────── */
/* The mock's one gutter, 1 to 1: its every block is `.in { padding-inline: clamp(14px, 3.4vw, 40px) }`
   with NO column cap, so the text starts at x=14 on a 390 phone and x=40 from 1180 up, at 1440 and
   at 2000 alike. On an apex page that IS --wm-pad, the token the header, the catalogue bar, the
   home body, Explore, the footer and the catalogue already read (wholesale-market.css «THE COLUMN»),
   so this one rule moves them all together. The only token this sheet sets (archtest 1e2). */
body.wm:has(.wm-header--apex) { --wm-pad: clamp(14px, 3.4vw, 40px); }

/* ── header (mock v24 #header, .m .hd) ───────────────────────────────── */
.wm-header--apex .wm-wordmark { font: 700 21px/21px Poppins, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em; color: #17142b; }
.wma-nav { display: contents; }
.wma-tools { display: flex; align-items: center; gap: 8px; position: relative; }
.wma-globe, .wma-sell, .wm-header--apex .wm-header-cta .wm-btn-ghost, .wm-header--apex .wm-header-cta .wm-btn-solid {
  display: inline-flex; align-items: center; box-sizing: border-box; min-height: 0; padding: 8px 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; line-height: 1.5; white-space: nowrap; text-decoration: none;
  transition: background .15s, filter .15s, border-color .15s;
}
.wma-globe { gap: 8px; color: #6a6580; }
.wma-sell { color: #17142b; border: 1px solid #e9e6f0; }
.wm-header--apex .wm-header-cta { gap: 8px; }
.wm-header--apex .wm-header-cta .wm-btn-ghost { color: #17142b; border: 0; background: none; }
.wma-globe:hover, .wma-sell:hover, .wma-globe[aria-expanded="true"], .wma-sell[aria-expanded="true"], .wm-header--apex .wm-header-cta .wm-btn-ghost:hover { background: #f4f1fb; }
.wma-sell:hover, .wma-sell[aria-expanded="true"] { border-color: #17142b; }
.wma-sell-w { display: block; line-height: 0; }
.wma-globe:focus-visible, .wma-sell:focus-visible, .wm-header--apex .wm-header-cta a:focus-visible { outline: 2px solid #3f2a9c; outline-offset: 2px; }
.wma-globe-t { display: inline-flex; align-items: center; }
.wm-header--apex .wm-header-cta .wm-btn-solid { background: #3f2a9c; border: 0; color: #fff; }
.wm-header--apex .wm-header-cta .wm-btn-solid:hover { filter: brightness(.88); background: #3f2a9c; }
/* The guest header has no assistant control (mock nav: globe, Sell on Closo, Log in, Sign up to buy). */
.wm-header--apex .wma-cb-new { white-space: nowrap; }
/* Every catbar label sits in a cell (New this week included), so each label is a block: its
   padding then sets the strip's height on the phone too, and the labels share one baseline. */
body:has(.wm-header--apex) .wm-catbar-cell > .wm-catbar-item { display: block; }
/* The search stays on ONE line at every width (Ivan 08.11): the placeholder is the short
   brand-first copy and, in a narrower language, ends in an ellipsis instead of wrapping. */
.wm-header--apex .wm-search > svg { flex: none; }
.wm-header--apex .wm-search input, .wm-header--apex .wm-search input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* The panels: out of the flow, painted only when the panel controller opens one that has
   contents (an empty shell never opens: wholesale-market-apex.js lets the link navigate). */
.wma-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 280px; max-width: min(92vw, 420px);
  background: #fff; border: 1px solid #E4E2EE; border-radius: 16px; box-shadow: 0 12px 32px rgba(26, 32, 44, .14); }
.wma-panel[hidden] { display: none; }

/* ── header on scroll and the search bars (mock v24 #header, #search) ─────
   Desktop (1025px up): the first row is 84px; past 24px of scroll (.is-mini, set by the script, and
   on a results page from the top) it is 64px tall plus its 1px line, with a shadow, and the bar
   shows the compact pill. The page does not jump: the header keeps 84px in the flow through its
   margin. The category row (46px) is sticky under the compact row, hides while scrolling down and
   comes back on scroll up (.is-cb), with the box extended under it so the shadow sits below it.
   An open bar (.is-open) is the full pill with its panel, the category row gone.
   Below 1025px the header has no bar: a pinned pill stands in (.wma-psrch-w) and opens the sheet. */
.wm-header--apex { transition: height .2s ease, margin .2s ease, box-shadow .2s ease; }
.wm-header--apex.is-tucked { transform: none; }
.wma-sd, .wma-seg, .wma-go, .wma-mini, .wma-pan { display: none; }
.wma-hero { display: none; }
.wma-q { display: contents; }
.wma-k { display: none; }
.wma-ph { display: none; }
.wma-scrim { position: fixed; inset: 0; z-index: 44; background: rgba(23, 20, 43, .3); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.wma-scrim.is-on { opacity: 1; pointer-events: auto; }
.wma-scrim.is-top { z-index: 60; }
@keyframes wma-mm-in { from { visibility: hidden; } to { visibility: visible; } }

/* the bar: ONE component for the header and the home hero. Painted from 521px; the header's copy from 1025px */
@media (min-width: 521px) {
  .wm-search.wma-bar { display: flex; align-items: center; position: relative; box-sizing: border-box; width: 100%; min-width: 0; max-width: 540px; gap: 0; padding: 0;
    border: 1px solid #e9e6f0; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .05);
    transition: opacity .18s, transform .2s ease, box-shadow .2s, background .2s; container: wmabar / inline-size; }
  .wm-search.wma-bar:focus-within { background: #fff; border-color: #e9e6f0; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .05); }
  .wm-search.wma-bar.is-open, .wm-search.wma-bar.is-open:focus-within { background: #ebe9ef; border-color: #ebe9ef; }
  .wma-bar > svg { display: none; }
  .wma-bar > :not(.wma-mini):not(.wma-pan):not(.wss-pan) { transition: opacity .18s ease; }
  /* a field is the bar's full height, so its hover and active pill are too (Airbnb); 32px in on the first, 24px on the rest */
  .wma-q, .wma-seg { display: grid; grid-template-rows: 15px 18px; align-self: stretch; align-content: center; min-width: 0; box-sizing: border-box; padding: 14px 24px; border: 0; border-radius: 999px; line-height: 1.25; color: #17142b; text-align: left; transition: background .15s, box-shadow .15s; }
  .wma-q { position: relative; flex: 1.7 1 0; padding-left: 32px; cursor: text; }
  .wma-seg { flex: 1 1 0; background: none; font: inherit; line-height: 1.25; cursor: pointer; }
  .wma-k, .wma-seg b { display: block; font-size: 12px; line-height: 15px; font-weight: 600; color: #17142b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wma-seg small, .wma-ph { display: block; font-size: 14px; line-height: 18px; color: #6a6580; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wma-q input, .wma-ph { grid-row: 2; grid-column: 1; }
  .wma-ph { pointer-events: none; }
  .wma-q:has(input:not(:placeholder-shown)) .wma-ph { visibility: hidden; }
  .wma-bar .wma-q input { width: 100%; min-width: 0; height: 18px; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; line-height: 18.2px; color: #17142b;
    -webkit-appearance: none; appearance: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wma-bar .wma-q input::placeholder { color: transparent; }
  .wma-bar .wma-q input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .wma-q .wss-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
  .wma-q:has(.wss-x:not([hidden])) { padding-right: 44px; }
  /* hover: a neutral grey pill (Airbnb #ebebeb, here the mock's grey), a shade darker inside the open grey bar */
  .wma-q:hover, .wma-seg:hover { background: #ebe9ef; }
  .wma-bar.is-open .wma-q:hover, .wma-bar.is-open .wma-seg:hover { background: #dedbe4; }
  .wma-q.is-on, .wma-seg.is-on, .wma-bar.is-open .wma-q.is-on:hover, .wma-bar.is-open .wma-seg.is-on:hover { background: #fff; box-shadow: 0 6px 20px rgba(23, 20, 43, .14); }
  /* The keyboard's ring: 2px brand inside the segment's pill (the bar's edge would cut one outside), 8:1 on the
     grey and the white pill. A pointer press draws none until a navigation key (html[data-wma-ptr], set by
     wholesale-market-apex.js): a key pressed after a click ringed the last field and the go inside it (owner 10.11) */
  .wma-seg:focus-visible { outline: 2px solid #3f2a9c; outline-offset: -2px; }
  .wma-seg:focus-visible:not(.is-on) { background: #ebe9ef; }
  .wma-bar.is-open .wma-seg:focus-visible:not(.is-on) { background: #dedbe4; }
  .wma-go:focus-visible, .wma-mini button:focus-visible, .wma-fclr:focus-visible { outline: 2px solid #3f2a9c; outline-offset: 2px; }
  html[data-wma-ptr] .wma-seg:focus-visible, html[data-wma-ptr] .wma-go:focus-visible, html[data-wma-ptr] .wma-mini button:focus-visible { outline: none; }
  .wma-sd { display: block; flex: none; width: 1px; height: 28px; background: #e9e6f0; }
  .wma-bar.is-open > .wma-sd { background: #d6d3dd; }
  /* the dividers next to a hovered or active field step aside (Airbnb); Ship to is followed by its hidden input */
  .wma-q:hover + .wma-sd, .wma-q.is-on + .wma-sd, .wma-sd:has(+ .wma-seg:hover), .wma-sd:has(+ .wma-seg.is-on), .wma-seg:hover + input + .wma-sd, .wma-seg.is-on + input + .wma-sd { opacity: 0; }
  .wma-go { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 8px; height: 46px; min-width: 46px; padding: 0;
    border: 0; border-radius: 999px; background: #3f2a9c; color: #fff; font: inherit; cursor: pointer; transition: padding .2s ease; }
  .wma-go span { display: none; font-size: 14px; font-weight: 600; }
  .wma-bar.is-open > .wma-go { padding: 0 18px; }
  .wma-bar.is-open > .wma-go span { display: inline; }
  .wma-bar > .wma-go { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin: 0; z-index: 2; }
  /* the last field reserves the go button's room; open, its width is the language's word (--wma-go-w, measured
     on every open; 108px is the English go) */
  .wma-bar > .wma-last, .wma-bar:not(:has(.wma-seg)) > .wma-q { padding-right: 70px; }
  .wma-bar.is-open > .wma-q { flex-grow: 1.2; }
  /* the active Search field takes the room (Airbnb: Where about a third), so a typed query reads whole up to its x;
     Ship to and Format give way (owner 10.11: «Cosmetics dref» showed as «Cosmetics dr») */
  .wma-bar.is-open > .wma-q.is-on { flex-grow: 3.4; }
  .wma-bar.is-open > .wma-last, .wma-bar.is-open:not(:has(.wma-seg)) > .wma-q { flex-grow: 1.4; padding-right: calc(var(--wma-go-w, 108px) + 28px); }
  /* a narrow bar keeps the round go open and reserves only its room; under 300px the bar keeps just the query */
  @container wmabar (max-width: 439px) {
    .wma-bar.is-open > .wma-go { padding: 0; }
    .wma-bar.is-open > .wma-go span { display: none; }
    .wma-bar.is-open > .wma-last, .wma-bar.is-open:not(:has(.wma-seg)) > .wma-q { padding-right: 70px; }
  }
  /* under 560px (the header's bar, at most 540px) the fields keep 18px in and 13.5px values, so Ship to still
     reads whole when open (measured at 1280 and 1440: 14px cuts «United States» by 3px) */
  @container wmabar (max-width: 559px) {
    .wma-bar > .wma-q, .wma-bar > .wma-seg { padding-left: 18px; }
    .wma-bar > .wma-q, .wma-bar > .wma-seg:not(.wma-last) { padding-right: 18px; }
    .wma-bar .wma-seg small, .wma-bar .wma-ph { font-size: 13.5px; }
  }
  @container wmabar (max-width: 299px) {
    .wma-bar > .wma-sd, .wma-bar > .wma-seg { display: none; }
    .wma-bar > .wma-q, .wma-bar.is-open > .wma-q { padding-right: 70px; }
  }

  /* the hero's bar sits on the page above the scrim while open (the scrim then covers the header too) */
  .wm-search.wma-hero { display: flex; max-width: 600px; }
  .wsf-hero-copy > .wma-hero { flex: none; margin-top: 6px; }
  .wma-hero.is-open { z-index: 61; }
  body:has(.wma-hero.is-open) .wsf-hero-copy > :not(.wma-hero) { opacity: .55; }

  /* the panels: 12px under the bar, one shell (mock #search). Airbnb's rules (owner 10.11): radius 32, 16px on every
     side, borderless rows 16px in with a light grey rounded hover, the heading on the rows' text line, a check on the
     selected row; the suggestions panel (wholesale-search.css) follows them */
  .wma-pan { display: block; position: absolute; top: calc(100% + 13px); left: 0; z-index: 46; box-sizing: border-box; max-width: calc(100vw - 32px); max-height: 600px; overflow-y: auto;
    padding: 16px; background: #fff; border-radius: 32px; box-shadow: 0 8px 28px rgba(0, 0, 0, .22); color: #17142b; }
  .wma-pan[hidden] { display: none; }
  .wma-pan--s { width: 380px; }
  .wma-pan--f { width: 320px; }
  .wma-pan-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 8px 16px 10px; font-size: 11.5px; line-height: 1; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #6a6580; }
  .wma-pan ul { list-style: none; margin: 0; padding: 0; }
  .wma-pan li[hidden] { display: none; }
  .wma-fclr { padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #17142b; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .wma-fclr[hidden] { display: none; }
  .wma-sfield { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 11px 16px; border: 1px solid #e9e6f0; border-radius: 16px; color: #6a6580; }
  .wma-sfield svg { flex: none; }
  .wma-sfield { position: relative; }
  .wma-sph { position: absolute; left: 42px; right: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #6a6580; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wma-sfield input::placeholder { color: transparent; }
  .wma-sfield:has(input:not(:placeholder-shown)) .wma-sph { visibility: hidden; }
  .wma-sfield input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: #17142b; }
  .wma-cty { display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box; padding: 10px 16px; border: 0; border-radius: 16px; background: none; font: inherit; font-size: 14.5px; line-height: 1.45; color: #17142b; text-align: left; text-decoration: none; cursor: pointer; }
  .wma-cty:hover, .wma-fmt button:hover { background: #f4f3f6; }
  .wma-cty:focus-visible, .wma-fmt button:focus-visible { outline: 2px solid #3f2a9c; outline-offset: -2px; background: #ebe9ef; }
  html[data-wma-ptr] .wma-cty:focus-visible, html[data-wma-ptr] .wma-fmt button:focus-visible { outline: none; }
  .wma-cty small { color: #6a6580; font-size: 12.5px; }
  .wma-cty.is-on { font-weight: 600; }
  .wma-cty.is-on::after { content: ""; width: 8px; height: 14px; margin: -4px 4px 0 0; border-right: 2px solid #17142b; border-bottom: 2px solid #17142b; transform: rotate(45deg); }
  .wma-fmt { display: grid; gap: 2px; }
  .wma-fmt button { position: relative; display: grid; width: 100%; box-sizing: border-box; padding: 10px 44px 10px 16px; border: 0; border-radius: 16px; background: none; font: inherit; font-size: 14.5px; line-height: 1.35; color: #17142b; text-align: left; cursor: pointer; }
  .wma-fmt button[aria-pressed="true"]::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 14px; margin-top: -9px; border-right: 2px solid #17142b; border-bottom: 2px solid #17142b; transform: rotate(45deg); }
  .wma-fmt b { font-weight: 600; }
  .wma-fmt small { font-size: 12.5px; color: #6a6580; }
}

@media (min-width: 1025px) {
  /* the row: 84, compact 64 plus its line */
  .wm-header--apex { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; box-sizing: border-box; position: sticky; top: 0; z-index: 50; height: 84px; padding: 0 28px; background: #fff; }
  .wm-header--apex > .wm-header-spacer { display: none; }
  .wma-nav { display: flex; align-items: center; gap: inherit; grid-column: 3 / -1; }
  .wm-header--apex .wma-tools { margin-right: -8px; }
  .wm-header--apex.is-mini { height: 65px; margin-bottom: 19px; border-bottom: 1px solid #e9e6f0; box-shadow: 0 1px 12px rgba(23, 20, 43, .09); }
  .wm-header--apex.is-mini.is-cb { height: 111px; margin-bottom: -27px; }
  .wm-header--apex.is-mini.is-cb:not(.is-open) { align-content: start; }
  .wm-header--apex.is-mini.is-cb:not(.is-open) > * { margin-top: 9px; }
  .wm-header--apex.is-mini.is-open { height: 84px; margin-bottom: 0; }

  /* the home: at the top the first row is logo and nav only, the bar is in the hero */
  body:has(form[data-wma-hero]) .wm-header--apex:not(.is-mini) { gap: 18px; padding: 14px 40px; }
  body:has(form[data-wma-hero]) .wm-header--apex:not(.is-mini):not(.is-open) .wm-search, .wm-header--apex.is-hero:not(.is-mini):not(.is-open) .wm-search { visibility: hidden; pointer-events: none; }

  .wm-header--apex .wm-search.wma-bar { justify-self: center; }

  /* compact: the full pill shrinks away, the mini pill takes its place. Children of the form cannot be
     faded together with it, so the form scales and the mini pill is scaled back by the inverse */
  .wm-header--apex.is-mini:not(.is-open) .wm-search.wma-bar { background: transparent; border-color: transparent; box-shadow: none; transform: scale(.6, .7); }
  .wm-header--apex.is-mini:not(.is-open) .wm-search.wma-bar > :not(.wma-mini) { opacity: 0; visibility: hidden; pointer-events: none; }
  .wma-mini { display: flex; position: absolute; left: 50%; top: 50%; z-index: 2; align-items: center; box-sizing: border-box; height: 46px; padding: 0 7px 0 6px; border: 1px solid #e9e6f0; border-radius: 999px; background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .04); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -50%) scale(1.4, 1.25);
    transition: opacity .18s ease, transform .2s ease, box-shadow .2s ease, visibility 0s linear .2s; white-space: nowrap; }
  .wm-header--apex.is-mini:not(.is-open) .wma-mini { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1.6667, 1.4286); transition-delay: 0s; }
  .wma-mini:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 8px 22px rgba(23, 20, 43, .16); }
  .wma-mini button { flex: 0 1 auto; min-width: 0; max-width: 220px; height: 30px; padding: 0 14px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: #17142b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  .wma-mini button + button { border-left: 1px solid #e9e6f0; }
  .wma-mini button.wma-m-dim { color: #6a6580; font-weight: 500; }
  .wma-mini .wma-go { display: inline-flex; flex: none; justify-content: center; width: auto; height: 34px; min-width: 34px; margin-left: 8px; padding: 0 14px; border-left: 0; border-radius: 999px; background: #3f2a9c; color: #fff; }
  .wma-mini .wma-go, .wma-mini button + .wma-go { border-left: 0; }

  /* the category row: sticky under the compact row, away while compact, back with .is-cb */
  .wm-header--apex ~ .wm-catbar { position: sticky; top: 65px; z-index: 44; height: 46px; box-sizing: border-box; background: #fff; transition: height .2s ease, margin .2s ease, opacity .15s ease; }
  .wm-header--apex.is-cb ~ .wm-catbar { z-index: 51; }
  /* the row folds to nothing and its margin keeps the 46px it held, so the page under it does not jump */
  .wm-header--apex.is-mini:not(.is-cb) ~ .wm-catbar, .wm-header--apex.is-open ~ .wm-catbar { height: 0; margin-bottom: 46px; border-width: 0; overflow: hidden; opacity: 0; pointer-events: none; }
  /* the mega menu opens after 0.12s of hover (a pass over the row opens nothing), closes on scroll (.wma-mm-off) */
  .wm-header--apex ~ .wm-catbar .wm-catbar-cell:hover > .wm-catbar-panel { animation: wma-mm-in .12s step-end; }
  .wm-catbar.wma-mm-off .wm-catbar-panel { display: none !important; }
}
/* 1025-1279px (coordinator 09.11, the Airbnb pattern): the tools give way, the search never does.
   "Ask Closo Assistant" becomes a 40px round icon (its aria-label and live dot stay), the globe
   shows the icon alone (its aria-label names country, language and currency), Sell on Closo
   stays, and the bar keeps 300px so the go sits inside the last field with its text clear.
   The band ends at 1279, not 1180: with the full labels the bar is 217px at 1181 and reaches
   300px only at ~1264 (316px at 1280). */
@media (min-width: 1025px) and (max-width: 1279px) {
  .wm-header--apex .wma-globe { width: 40px; padding: 0; justify-content: center; }
  .wm-header--apex .wma-globe-t { display: none; }
  .wm-header--apex .wm-search.wma-bar { min-width: 300px; }
}
/* 1280px and up, the same rule when the labels are longer than English (fr «Vendre sur Closo»,
   «Inscrivez-vous pour acheter»: ~575px of tools, the bar 154px at 1280 and 245px at 1440): the
   script lays the header out offscreen with its full labels and sets .is-tight when that bar
   would be under 300px. The search never gives way; English at 1280 (316px) stays as it is. */
@media (min-width: 1280px) {
  .wm-header--apex.is-tight .wma-globe { width: 40px; padding: 0; justify-content: center; }
  .wm-header--apex.is-tight .wma-globe-t { display: none; }
  .wm-header--apex.is-tight .wm-search.wma-bar { min-width: 300px; }
}
/* fallback until the script has measured (.is-fit, fresh review P2-4): fr and es at 1280px and up take
   the .is-tight rules from the first paint, so a page whose script is late or failed never shows the
   overflowing full-label header; the script's own answer replaces it once it has run. */
@media (min-width: 1280px) {
  html[lang|="fr"] .wm-header--apex:not(.is-fit) .wma-globe, html[lang|="es"] .wm-header--apex:not(.is-fit) .wma-globe { width: 40px; padding: 0; justify-content: center; }
  html[lang|="fr"] .wm-header--apex:not(.is-fit) .wma-globe-t, html[lang|="es"] .wm-header--apex:not(.is-fit) .wma-globe-t { display: none; }
  html[lang|="fr"] .wm-header--apex:not(.is-fit) .wm-search.wma-bar, html[lang|="es"] .wm-header--apex:not(.is-fit) .wm-search.wma-bar { min-width: 300px; }
}
@media (max-width: 1024px) {
  .wm-header--apex .wm-search { display: none; }
  .wm-header--apex .wma-tools { order: 2; }
  .wm-header--apex .wma-globe-t, .wm-header--apex .wma-sell, .wm-header--apex .wma-sell-w { display: none; }
  .wm-header--apex .wma-globe { padding: 0 12px; min-height: 40px; }
  .wm-header--apex { position: static; }
  .wm-header--apex ~ .wm-catbar { position: sticky; top: var(--wma-hh, 0px); z-index: 44; background: #fff; transition: box-shadow .2s ease; }
  html.wma-sc .wm-header--apex ~ .wm-catbar { box-shadow: 0 2px 12px rgba(23, 20, 43, .12); }
}
.wma-rr { display: none; }
.wma-bk, .wma-flt { display: none; }
.wma-psrch-w { display: none; position: sticky; top: 0; z-index: 45; box-sizing: border-box; padding: 10px 14px; background: #fff; transition: box-shadow .2s; }
html.wma-sc .wma-psrch-w { box-shadow: 0 2px 12px rgba(23, 20, 43, .12); }
.wma-psrch { display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-height: 52.6px; padding: 10px 16px; border: 1px solid #e9e6f0; border-radius: 999px; background: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, .1); color: #17142b; text-decoration: none; transition: background .1s; }
.wma-psrch:active { background: #f4f1fb; }
body:not(:has(form[data-wma-hero])) .wma-psrch:not(:active) { background: transparent; }
.wma-psrch svg { flex: none; }
.wma-psrch span { display: grid; min-width: 0; line-height: 1.25; }
.wma-psrch b { font-size: 13px; font-weight: 600; line-height: 16.3px; }
.wma-psrch small { font-size: 11.5px; color: #6a6580; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the pill is a link on every page (the registry's too): Airbnb's hover lift; its keyboard ring is .wm a:focus-visible */
@media (hover: hover) { .wma-psrch:hover { border-color: #DEDBE4; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); } }
@media (hover: hover) { .wma-bk:hover, .wma-flt:hover { background: #F4F1FB; border-color: #DEDBE4; } }
/* the pill stands in for the bar: from 521px on the home only once the hero bar has scrolled away */
@media (max-width: 1024px) {
  body:not(:has(form[data-wma-hero])) .wma-psrch-w, html.wma-hero-gone .wma-psrch-w { display: block; }
}
/* The phone back button (Ivan 11.11, Airbnb): up to 640px every page but the home puts a round Back left of the
   pill, and Filters right of it where the page has filters; the pill gives way, so nothing leaves a 320px screen.
   The row keeps its height (the pill's 52.6 is taller than a 40px circle), so the chips still pin at 72px. */
@media (max-width: 640px) {
  body:not(:has(form[data-wma-hero])) .wma-psrch-w { display: flex; align-items: center; gap: 8px; }
  body:not(:has(form[data-wma-hero])) .wma-psrch-w > .wma-bk,
  body:not(:has(form[data-wma-hero])) .wma-psrch-w > .wma-flt:not([hidden]) { display: grid; }
  .wma-psrch-w > .wma-psrch { flex: 1 1 auto; min-width: 0; }
  .wma-bk, .wma-flt { place-items: center; position: relative; flex: none; box-sizing: border-box; width: 40px; height: 40px; padding: 0; border: 1px solid #E9E6F0; border-radius: 50%; background: #FFFFFF; color: #17142B; font: inherit; text-decoration: none; cursor: pointer; }
  /* the hit area reaches 44px without changing the drawn circle */
  .wma-bk::after, .wma-flt::after { content: ""; position: absolute; inset: -2px; }
  .wma-flt em { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; border-radius: 8px; background: #17142B; color: #FFFFFF; font: 700 10px/15px inherit; font-style: normal; text-align: center; }
  .wma-flt em[hidden] { display: none; }
}
/* The pinned row's globe (_chrome.php, review 12.11 P1): the one language switcher wherever the header row is not
   drawn, a 40px circle like Back and Filters, last in the row; .wma-globe's own hover, open and keyboard ring. */
.wma-pglobe { display: none; }
.wma-psrch-w > .wma-pglobe { position: relative; flex: none; order: 9; box-sizing: border-box; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 1px solid #E9E6F0; border-radius: 50%; background: #FFFFFF; color: #17142B; }
.wma-psrch-w > .wma-pglobe:hover, .wma-psrch-w > .wma-pglobe[aria-expanded="true"] { background: #F4F1FB; border-color: #DEDBE4; }
.wma-psrch-w > .wma-pglobe::after { content: ""; position: absolute; inset: -2px; }
@media (max-width: 520px) {
  /* C-12: drawn as the mock, a thumb gets 44px */
  .wm-header--apex .wm-wordmark, .wm-header--apex .wmfab-btn { position: relative; }
  .wm-header--apex .wm-wordmark::after, .wm-header--apex .wmfab-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; min-width: 44px; height: 44px; transform: translate(-50%, -50%); }
  .wma-psrch-w { display: block; }
  /* the home keeps its header row: logo, the globe and Sign up to buy (mock .m .hd); elsewhere the pill and the chips are the whole pinned block */
  body:not(:has(form[data-wma-hero])) .wm-header--apex { display: none; }
  /* that row's one language switcher: the pinned row's globe (_chrome.php), right of the pill and Filters */
  body:not(:has(form[data-wma-hero])) .wma-psrch-w > .wma-pglobe { display: grid; place-items: center; }
  body:has(form[data-wma-hero]) .wm-header--apex { display: flex; align-items: center; gap: 10px; padding: 14px; }
  /* Log in steps aside as in the mock (.m .hd nav a:not(.f)): wholesale-apex-menus.css draws the guest's Log in with a
     longer selector, which outranked the short one below, so a guest's Log in and sign-up door wrapped to a second
     line at 320 to 390 (review 12.11) */
  body:has(form[data-wma-hero]) .wm-header--apex .wm-header-cta a.wm-btn-ghost:not(.wm-btn-guide),
  body:has(form[data-wma-hero]) .wm-header--apex .wm-header-cta .wm-btn-ghost,
  body:has(form[data-wma-hero]) .wm-header--apex .wm-header-cta .wm-cta-div,
  body:has(form[data-wma-hero]) .wm-header--apex > .wm-header-spacer { display: none; }
  body:has(form[data-wma-hero]) .wm-header--apex .wm-header-cta { margin-left: auto; }
  .wm-header--apex .wm-header-cta .wm-btn-solid { min-height: 44px; padding: 8px 12px; font-size: 13px; }
  .wma-hero { display: none; }
  body:has(form[data-wma-hero]) .wma-psrch-w { padding: 10px 14px 8px; }
  body:has(form[data-wma-hero]) .wma-psrch { gap: 12px; min-height: 54px; padding: 6px 18px; box-shadow: 0 6px 18px -10px rgba(40, 25, 110, .4); transition: box-shadow .2s, transform .1s; }
  body:has(form[data-wma-hero]) .wma-psrch:active { transform: scale(.98); }
  body:has(form[data-wma-hero]) .wma-psrch b { font-size: 14px; line-height: 1.25; }
  body:has(form[data-wma-hero]) .wma-psrch small { font-size: 12.5px; }

  /* results (mock #hbp2): back, the search as a centred pill, the filters */
  .wma-psrch-w.is-res { padding: 10px 14px; }
  .wma-psrch-w.is-res > .wma-psrch { display: none; }
  .wma-psrch-w.is-res > .wma-rr { display: flex; align-items: center; gap: 8px; }
  .wma-rr > .wma-psrch { flex: 1; justify-content: center; min-height: 48.6px; padding: 8px 12px; text-align: center; }
  .wma-rr > .wma-psrch b { font-size: 13px; line-height: 16.3px; }
  .wma-rr > .wma-psrch small { font-size: 11.5px; }
  .wma-rr-c { display: grid; place-items: center; position: relative; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid #e9e6f0; border-radius: 50%; background: #fff; color: #17142b; text-decoration: none; cursor: pointer; }
  /* the hit area reaches 44px on a phone without changing the drawn circle */
  .wma-rr-c::after { content: ""; position: absolute; inset: -4px; }
  .wma-rr-c em { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; border-radius: 8px; background: #17142b; color: #fff; font: 700 10px/15px inherit; font-style: normal; text-align: center; }
  .wma-rr-c em[hidden] { display: none; }
  /* a results page keeps ONE back: its results bar's; the row's own buttons step aside, the bar takes the line */
  body:not(:has(form[data-wma-hero])) .wma-psrch-w.is-res > .wma-bk, body:not(:has(form[data-wma-hero])) .wma-psrch-w.is-res > .wma-flt { display: none; }
  .wma-psrch-w.is-res > .wma-rr { flex: 1 1 auto; min-width: 0; }
}
/* The phone chips row to the page's first line: 24px on every page that has the row, one rule (owner
   10.11; it was 14 on the home, 18 on a catalogue, 16 on a page that opens on its crumbs). The first
   block is the home's hero, a catalogue head, or the breadcrumbs (beside the row or first in a hub's
   main); a head that follows crumbs keeps its 0 (the crumbs carry that step), and nothing inside a
   block moves. */
@media (max-width: 520px) {
  .wma-chips ~ .wsf-ax .wsf-hero,
  .wma-chips ~ :is(.wm-cathead, .pg-crumbs, .wsl-breadcrumb):not(:is(.pg-crumbs, .wsl-breadcrumb) ~ *),
  .wma-chips ~ main > :is(.pg-crumbs, .wsl-breadcrumb):first-child { padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-header--apex, .wm-header--apex .wm-search, .wma-bar, .wma-bar > *, .wma-q, .wma-seg, .wma-go, .wma-mini, .wma-scrim, .wm-header--apex ~ .wm-catbar, .ca-dock, .wma-psrch, .wma-psrch-w, .wma-globe, .wma-sell, .wm-header--apex .wm-header-cta a { transition: none !important; }
  .wm-header--apex ~ .wm-catbar .wm-catbar-cell:hover > .wm-catbar-panel { animation: none; }
}

/* ── footer ───────────────────────────────────────────────────────────── */
/* Mock footer section 1 to 1 (Ivan 09.11, stream P): Explore wholesale is a white page block BEFORE the
   footer (#4); the footer is two sand tiers, four columns then the bottom line. Each tier carries
   only --wm-pad, the header's own centring pad, so its text starts on the header's x at every
   width (#3: a max-width box plus that pad counted the gutter twice, x=725 against 363 at 2000). */
.wma-ftr { margin-top: var(--wm-sec, 64px); background: #F6F3EE; color: #17142B; font-size: 13px; }
.wma-ftr-explore + .wma-ftr { margin-top: 0; }
.wma-ftr a, .wma-ftr-explore a { color: inherit; text-decoration: none; }
.wma-ftr a:hover, .wma-ftr-explore a:hover { text-decoration: underline; }
.wma-ftr a:focus-visible, .wma-ftr button:focus-visible,
.wma-ftr-explore a:focus-visible, .wma-ftr-explore button:focus-visible { outline: 2px solid #452B90; outline-offset: 2px; border-radius: 4px; }
.wma-ftr-explore, .wma-ftr-cols, .wma-ftr-bot { padding-left: var(--wm-pad, 16px); padding-right: var(--wm-pad, 16px); box-sizing: border-box; }
.wma-ftr-explore { background: #fff; border-top: 1px solid #E9E6F0; margin-top: var(--wm-sec, 64px); padding-top: 30px; padding-bottom: 30px; display: grid; gap: 14px; color: #17142B; }
.wma-ftr-h { margin: 0; font: 600 18px/1.3 Poppins, Inter, system-ui, sans-serif; letter-spacing: 0; }
.wma-xt { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #E9E6F0; white-space: nowrap; }
.wma-xt::-webkit-scrollbar { display: none; }
.wma-xt-b { flex: none; padding: 0 0 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none;
  font: inherit; font-size: 13.5px; font-weight: 400; color: #6A6580; cursor: pointer; min-height: 44px; display: inline-flex; align-items: flex-end; }
.wma-xt-b[aria-selected="true"] { color: #17142B; border-bottom-color: #17142B; font-weight: 600; }
.wma-xp[hidden] { display: none; }
.wma-xg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; }
.wma-xg a { display: grid; gap: 2px; min-width: 0; }
.wma-xg b { display: block; font-weight: 600; font-size: 13.5px; }
.wma-xg small { display: block; font-weight: 400; color: #6A6580; font-size: 12.5px; }
.wma-xp.is-folded .wma-xg-more { display: none; }
/* Show more is the grid's 12th cell (mock `.xg .more`); unfolded, Show less goes to the end. */
.wma-xg-mi { align-self: center; }
.wma-xg-mi .wma-xg-toggle { margin-top: 0; }
.wma-xp:not(.is-folded) .wma-xg-mi { order: 1; }
.wma-xg-toggle { margin-top: 14px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: underline; cursor: pointer; min-height: 44px; color: #17142B; }
.wma-ftr-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; padding-top: 28px; padding-bottom: 28px; border-top: 1px solid #E9E6F0; }
.wma-ftr-col h3 { margin: 0 0 8px; font: 600 13.5px/1.3 Poppins, Inter, system-ui, sans-serif; }
.wma-ftr-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.wma-ftr-col a { display: block; color: #6A6580; line-height: 1.9; }
.wma-ftr-bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 16px; padding-bottom: 16px; border-top: 1px solid #E9E6F0; font-size: 12.5px; color: #6A6580; }
.wma-ftr-legal { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; }
.wma-ftr-copy { margin-right: 14px; }
.wma-ftr-bot > .wma-ftr-copy + .wma-ftr-legal { margin-right: auto; }
/* mock .fb .lang: the globe, then «United States · English · USD» as plain ink text (round 2) */
.wma-ftr-globe { display: inline-flex; align-items: center; gap: 8px; color: #17142B; font-weight: 600; }
.wma-ftr-region { scroll-margin-bottom: 96px; }
@media (max-width: 860px) {
  .wma-xg, .wma-ftr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The cookie card on an apex page is the mock's thin cookie bar: one line (title, then the three
   answers), its long paragraph off screen. Same ids, same buttons, same storage key; CSS only. */
body:has(.wm-header--apex) .ccb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: 760px; padding: 10px 12px 10px 16px; border-color: #E9E6F0; border-radius: 14px; box-shadow: 0 10px 30px rgba(23,20,43,.14); }
body:has(.wm-header--apex) .ccb p { display: none; }
body:has(.wm-header--apex) .ccb h4 { margin: 0 auto 0 0; font-size: 14px; white-space: nowrap; }
body:has(.wm-header--apex) .ccb .ccb-row { flex-wrap: nowrap; gap: 8px; }
body:has(.wm-header--apex) .ccb button { padding: 8px 14px; font-size: 13.5px; border-radius: 999px; white-space: nowrap; }
body:has(.wm-header--apex) .ccb .ccb-manage { margin-left: 0; white-space: nowrap; }
@media (max-width: 560px) {
  body:has(.wm-header--apex) .ccb { padding: 8px 10px 8px 12px; gap: 6px 10px; }
  body:has(.wm-header--apex) .ccb h4 { flex: 1 1 100%; font-size: 13.5px; }
  body:has(.wm-header--apex) .ccb .ccb-row { flex: 1 1 100%; flex-wrap: nowrap; gap: 6px; }
  body:has(.wm-header--apex) .ccb button { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 9px; font-size: 12.5px; }
  body:has(.wm-header--apex) .ccb .ccb-accept { flex-basis: auto; }
  body:has(.wm-header--apex) .ccb .ccb-manage { flex: none; min-height: 44px; padding: 0 2px; display: inline-flex; align-items: center; font-size: 12.5px; }
}

/* ── phone tab bar ────────────────────────────────────────────────────── */
.wma-tabbar, .wma-tabbar-pad { display: none; }
@media (max-width: 640px) {
  /* the globe stays: it is the header's one language control at every width (Ivan 12.11: only one switcher) */
  .wm-header--apex .wm-search { min-height: 48px; box-sizing: border-box; border-radius: 999px; }
  .wma-tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
    padding: 8px max(8px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-right));
    background: #fff; border-top: 1px solid #E4E2EE;
  }
  .wma-tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 50px; color: #6B7280; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .wma-tab.is-on { color: #452B90; }
  .wma-tab:focus-visible { outline: 2px solid #452B90; outline-offset: -2px; border-radius: 8px; }
  .wma-tab-l { font-size: 11px; font-weight: 500; line-height: 1.2; }
  .wma-tab.is-on .wma-tab-l { font-weight: 600; }
  .wma-tab-n {
    position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    border-radius: 8px; background: #452B90; color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
  }
  .wma-tab-n[hidden] { display: none; }
  .wma-tabbar-pad { display: block; height: calc(62px + env(safe-area-inset-bottom)); }
  /* The fixed widgets that also live on the bottom edge ride above the bar. The assistant's dock
     becomes the v15 pill (signed-in only: a guest gets no assistant config, so no dock), and it
     steps aside while the page scrolls down (html.wma-down). */
  body:has(.wma-tabbar) .ca-dock { left: auto; right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); padding: 0; background: none; border: 0;
    box-shadow: none; transition: transform .2s ease, opacity .2s ease; }
  body:has(.wma-tabbar) .ca-dock .ca-in { width: auto; max-width: calc(100vw - 28px); min-height: 0; gap: 8px; padding: 11px 15px !important; line-height: 1;
    border: 0 !important; border-radius: 999px; background: #1d1640 !important; color: #f3f0ff; font-size: 13px; font-weight: 600; box-shadow: 0 8px 20px rgba(23, 20, 43, .3); }
  body:has(.wma-tabbar) .ca-dock .ca-in .ph { flex: 0 1 auto; color: #f3f0ff; }
  body:has(.wma-tabbar) .ca-dock .ca-in .snd { display: none; }
  body:has(.wma-tabbar) .ca-dock .ca-in .ca-ico { width: 24px; height: 24px; flex-basis: 24px; background: none; box-shadow: none; }
  html.wma-down body:has(.wma-tabbar) .ca-dock { transform: translateY(24px); opacity: 0; pointer-events: none; }
  body.ca-has-dock:has(.wma-tabbar) { padding-bottom: 0; }
  body:has(.wma-tabbar) .ccb { bottom: calc(74px + env(safe-area-inset-bottom)); }
  /* The results row (Sort, Filters) sticks under the pinned search and chips, not under the bar. */
  body:has(.wm-header--apex) .wcf .wm-toolbar { top: calc(var(--wma-hh, 0px) + var(--wma-cbh, 0px)); transition: top .24s ease; }
}