/* The closo.co apex home and footer, measured against mock v24 (Ivan 09.11, stream P).
   Linked only under ApexSiteFaire::on(), right after wholesale-market-apex.css, so a rule of equal
   specificity here wins over the older one in wholesale-market-faire.css and wholesale-market-apex.css.
   Where the spacing canon has a line it wins over the mock render (P-home C-01); values are the mock's. */

/* ── hero float card ── */
.wsf-hero-float-txt b { font-family: Poppins, Inter, system-ui, sans-serif; }
.wsf-ax .wsf-hero-float-price { font-family: Poppins, Inter, system-ui, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; }

/* ── the three promises ── */
.wsf-ax-trust > .wsf-ax-tr { padding: 24px clamp(16px, 2.4vw, 32px); gap: 4px 12px; }
.wsf-ax-trust p { line-height: 1.5; }

/* ── section heads ── */
.wsf-ax .wsf-ax-sh .wsm-h2 { letter-spacing: -.01em; color: #17142B; }

/* ── Shop by condition and the category squares ── */
.wsf-ax-tile { gap: 8px; }
.wsf-ax-tile b { margin-top: 0; }
.wsf-ax-cats { gap: 24px 16px; }
.wsf-ax-quad { gap: 4px; }

/* ── suppliers ── */
.wsf-ax-sup i { margin: 0 0 16px 16px; }
.wsf-ax-sup b { margin-top: 16px; padding-right: 16px; }
.wsf-ax-sup > span:last-child { padding-right: 16px; margin-bottom: 16px; }
.wsf-ax-strip { gap: 4px; }

/* ── the two doors ── */
.wsf-ax-door h2 { letter-spacing: -.01em; }
.wsf-ax-door p { font-size: 15px; line-height: 22.5px; }
.wsf-ax-door a { line-height: 1.5; box-sizing: border-box; }

/* ── trending pills ── */
.wsf-ax-pop { gap: 8px; }
.wsf-ax-pop a { gap: 8px; line-height: 1.5; box-sizing: border-box; transition: border-color .15s, background .15s; }
/* The hover is the hero chips' own (.wsf-ax-chips > a:hover, the mock's .chips a:hover): the border turns
   ink. Only a pointer that hovers gets it; a tap on a touch screen leaves no stuck border (owner 10.11:
   the pills had no hover at all). The 2px #3F2A9C focus ring is wholesale-market-faire.css's. */
.wsf-ax-pop a:hover { border-color: #E9E6F0; }
@media (hover: hover) {
  .wsf-ax-pop a:hover { border-color: #17142B; }
}
.wsf-ax .wsf-ax-trend { padding-bottom: 30px; }

/* ── Explore wholesale, the page block before the footer ── */
.wma-ftr-explore { margin-top: 0; }
.wma-ftr-h { letter-spacing: -.01em; }
.wma-xt-b { min-height: 0; display: inline-block; }
.wma-xg-toggle { min-height: 0; }

@media (max-width: 860px) {
  /* The strip keeps its measured look; the 44 px tap height is the tab's own box, label at its foot.
     The 11.75 px that adds (44 less the 32.25 px of label, pad and underline) sits in the gap above
     the strip, so nothing hangs under the strip: a pseudo tap area did (6 px), and that was the
     vertical slack an iPhone swipe drifted the labels into (Ivan 10.11). */
  .wma-xt { margin-top: -11.75px; }
  .wma-xt-b { min-height: 44px; display: inline-flex; align-items: flex-end; }
  .wma-xg-toggle { position: relative; }
  .wma-xg-toggle::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}

/* Every sideways strip on the apex home scrolls sideways only (Ivan 10.11, iPhone screen recording:
   a swipe on the Explore tabs also scrolled them up inside their own box). overflow-x: auto turns
   overflow-y to auto, so content a pixel taller than a strip gives it vertical slack; hidden closes
   that axis, contain keeps a fling at a strip's end inside it. One rule for the tab strip, the phone
   category row, the hero chips and the lot rails; each keeps its own scrollbar rule. Phone width
   only: above 520 px the hero chips wrap with overflow visible, and hidden there would turn them
   into a scroll box that clips their focus ring. No touch-action: pan-x, it would stop a vertical
   drag that starts on a strip from scrolling the page. */
@media (max-width: 520px) {
  .wma-xt, .wma-chips, .wsf-ax-chips, .wsf-ax-rail, nav.wm-catbar.wma-cb { overflow-y: hidden; overscroll-behavior-x: contain; }
}

/* ── hover and keyboard states (Ivan 10.11: the doors, the condition and category tiles and the
   supplier cards had no hover; only a title turned purple, the generic link hover of wholesale-market.css).
   One Airbnb pattern per element type, design tokens only:
   · filled pill: one shade darker (the light pill on navy to the line grey, the ink pill to black, as
     Airbnb's #222 to #000);
   · photo tile or card: the photo dims a step (Airbnb's photo grid) and the title underlines; the label
     stays ink at rest and on hover, so the purple no longer leaks in, a tap included;
   · tab: ink label over a grey underline (the mock's .ft-tab:hover, Airbnb's category bar);
   · ink text link: ink to black, its underline too.
   The paint sits under (hover: hover), so a tap on a touch screen leaves nothing stuck; 150 ms for a
   colour, 200 ms for a photo, none under reduced motion. Rings: wholesale-market-faire.css's 2px brand, the
   hero float card wholesale-market.css's .wm a:focus-visible. */
.wsf-ax-door a { transition: background-color .15s ease; }
.wsf-ax-tile img, .wsf-ax-tile .wsf-ax-ph, .wsf-ax-cats img, .wsf-ax-cats .wsf-ax-ph, .wsf-ax-quad, .wsf-ax-strip, .wsf-hero-float-th { transition: filter .2s ease; }
.wsf-ax-browse, .wma-xg-toggle { transition: color .15s ease, border-color .15s ease; }
.wma-xt-b { transition: color .15s ease, border-color .15s ease; }
.wsf-ax-tile:hover, .wsf-ax-cats a:hover, .wsf-ax-sup:hover { color: #17142B; }
a.wsf-hero-float, a.wsf-hero-float:hover { color: #17142B; }
@media (hover: hover) {
  .wsf-ax-d1 a:hover { background-color: #E9E6F0; }
  .wsf-ax-d2 a:hover { background-color: #000; }
  .wsf-ax-tile:hover img, .wsf-ax-tile:hover .wsf-ax-ph,
  .wsf-ax-cats a:hover > img, .wsf-ax-cats a:hover > .wsf-ax-ph, .wsf-ax-cats a:hover > .wsf-ax-quad,
  .wsf-ax-sup:hover .wsf-ax-strip, a.wsf-hero-float:hover .wsf-hero-float-th { filter: brightness(.9); }
  .wsf-ax-tile:hover b, .wsf-ax-cats a:hover, .wsf-ax-sup:hover b { text-decoration-line: underline; text-underline-offset: 3px; }
  .wsf-ax-browse:hover { color: #000; border-bottom-color: #000; }
  .wma-xg-toggle:hover { color: #000; }
  .wma-xt-b:not([aria-selected="true"]):hover { color: #17142B; border-bottom-color: #DEDBE4; }
}
@media (prefers-reduced-motion: reduce) {
  .wsf-ax-door a, .wsf-ax-tile img, .wsf-ax-tile .wsf-ax-ph, .wsf-ax-cats img, .wsf-ax-cats .wsf-ax-ph, .wsf-ax-quad, .wsf-ax-strip, .wsf-hero-float-th,
  .wsf-ax-browse, .wma-xg-toggle, .wma-xt-b { transition: none; }
}

/* ── the promise band and the grids on a phone ── */
@media (max-width: 560px) {
  .wsf-ax-trust > .wsf-ax-tr { padding: 16px; }
  .wsf-ax-cats { gap: 16px 12px; }
  .wsf-ax-rail, .wsf-ax-tiles, .wsf-ax-sups, .wsf-ax-doors { gap: 12px; }
}

/* Footer bottom row: the mock's run (copyright, legal links, Sitemap), and the region line as the
   control that opens the header's globe panel (TZ-MASTER section 3, X-029, X-031, X-032). */
.wma-ftr-copy { margin-right: 0; }
.wma-ftr-globe { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; color: #17142B; cursor: pointer; }
.wma-ftr-globe:hover .wma-ftr-region { text-decoration: underline; }
@media (max-width: 860px) {
  .wma-ftr-globe { position: relative; }
  .wma-ftr-globe::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}
@media (max-width: 520px) {
  .wma-ftr-explore { padding-top: 32px; }
}

/* The cookie bar is one row on a phone too (X-045): the icon stands for the title, whose text stays
   for screen readers; the answers keep their 44 px height. */
@media (max-width: 560px) {
  body:has(.wm-header--apex) .ccb { flex-wrap: nowrap; padding: 4px 8px; gap: 6px; }
  body:has(.wm-header--apex) .ccb h4 { flex: none; margin: 0; font-size: 0; gap: 0; }
  body:has(.wm-header--apex) .ccb .ccb-row { flex: 1 1 auto; min-width: 0; gap: 4px; justify-content: space-between; }
  body:has(.wm-header--apex) .ccb button { flex: 0 1 auto; padding: 0 7px; font-size: 12px; }
  body:has(.wm-header--apex) .ccb .ccb-manage { font-size: 12px; }
}

/* The HTML sitemap page: sibling tool page head, plain link lists; crumbs come from the shared rule. */
.wsa-sm { padding: 0 var(--wm-pad, 16px) 72px; box-sizing: border-box; }
.wsa-sm-h1 { margin: 0 0 32px; font: 600 40px/1.1 Poppins, Poppins Fallback, Inter, Inter Fallback, sans-serif; letter-spacing: -.02em; color: #17142B; }
.wsa-sm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.wsa-sm-grid h2 { margin: 0 0 12px; font: 600 16px/1.3 Poppins, Poppins Fallback, Inter, Inter Fallback, sans-serif; color: #17142B; }
.wsa-sm-grid ul { list-style: none; margin: 0; padding: 0; }
.wsa-sm-grid a { display: block; padding: 6px 0; font-size: 14px; line-height: 1.5; color: #6A6580; text-decoration: none; }
.wsa-sm-grid a:hover { color: #17142B; text-decoration: underline; }
@media (max-width: 860px) {
  .wsa-sm { padding-bottom: 44px; }
  .wsa-sm-h1 { margin-bottom: 24px; font-size: 30px; }
  .wsa-sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .wsa-sm-grid a { display: flex; align-items: center; min-height: 44px; padding: 0; }
}

/* Footer and Explore type and metrics as rendered in the mock (X-005, X-007, X-019, X-020, X-027). */
.wma-ftr, .wma-ftr-explore { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.wma-ftr-h, .wma-ftr-col h3 { font-family: Poppins, ui-sans-serif, system-ui, sans-serif; }
.wma-xt-b { line-height: 1.5; margin-bottom: 0; }
.wma-xg a { font-size: 13.5px; }
.wma-ftr-bot { line-height: 1.5; }
@media (max-width: 520px) {
  .wsf-ax-chips > a { padding: 0 14px; }
  /* Phone rail head as the mock: the space under the head is its own margin, not the section gap (P-098). */
  .wsf-ax .wsf-ax-sec.wsf-ax-lotsec { gap: 0; }
  .wsf-ax .wsf-ax-lotsec .wsf-ax-sh { margin-bottom: 10px; }
  /* The mock hides the mosaic itself on a phone (P-033). */
  .wsf-ax .wsf-mosaic { display: none; }
}