/* Apex menus (stream M): category row, panels, Sell card, account card, locale modal, phone sheets.
   Values are mock v24's (TZ-MASTER section 3 where the two disagree). Loaded only under ApexSiteFaire::on(). */

:root{--wmx-brand:#3F2A9C;--wmx-ink:rgb(23,20,43);--wmx-muted:rgb(106,101,128);--wmx-line:rgb(233,230,240);--wmx-soft:rgb(244,241,251);--wmx-sand:rgb(246,243,238);--wmx-deep:rgb(29,22,64);--wmx-deep-ink:rgb(243,240,255);--wmx-body:Inter,ui-sans-serif,system-ui,sans-serif;--wmx-head:Poppins,ui-sans-serif,system-ui,sans-serif}

/* Category row: resting state is the page's `.m .cb` (section 3), open state is `.mx-cb`. */
nav.wm-catbar.wma-cb{display:flex;align-items:flex-start;gap:22px;margin:0;padding:11px 40px;height:auto;min-height:0;background:transparent;font:400 13.5px/20.25px var(--wmx-body);color:var(--wmx-muted);border:0;border-bottom:1px solid var(--wmx-line);overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;justify-content:flex-start;box-sizing:border-box}
.wm-header--apex.is-mini~nav.wm-catbar.wma-cb,html.wma-sc .wm-header--apex~nav.wm-catbar.wma-cb{background:#fff}
nav.wm-catbar.wma-cb::-webkit-scrollbar{display:none}
nav.wm-catbar.wma-cb .wm-catbar-item{position:relative;display:inline;flex:none;padding:0;margin:0;font:inherit;color:inherit;background:none;border:0;border-radius:0;text-decoration:none;white-space:nowrap}
nav.wm-catbar.wma-cb .wm-catbar-item:hover,nav.wm-catbar.wma-cb .wm-catbar-item[aria-expanded="true"]{color:var(--wmx-ink)}
/* The open item's ink underline is the current tab's border (9px pad + 2px = the -11px margin, so nothing moves):
   an ::after at bottom:-11px sat outside the label's box and its overflow:hidden (market-faire.css) clipped it. */
nav.wm-catbar.wma-cb .wm-catbar-item[aria-expanded="true"]{border-bottom:2px solid var(--wmx-ink);padding-bottom:9px;margin-bottom:-11px}
nav.wm-catbar.wma-cb .wm-catbar-item:focus-visible{outline:2px solid var(--wmx-ink);outline-offset:2px;border-radius:4px}
nav.wm-catbar.wma-cb .wma-cb-on{color:var(--wmx-ink);font-weight:600;border-bottom:2px solid var(--wmx-ink);padding-bottom:9px;margin-bottom:-11px}
/* A phone gets one category row (TZ section 3 "Phone chips", mock #hbp1): the chips, never the text row above them. */
@media (max-width:640px){
  nav.wm-catbar.wma-cb{display:none}
}
/* Compact, the row leaves. Its padding goes with it and the margin holds the height it had, so the page does not move. */
@media (min-width:1025px){
  nav.wm-catbar.wma-cb{transition:opacity .15s ease}
  .wm-header--apex.is-mini:not(.is-cb)~nav.wm-catbar.wma-cb,.wm-header--apex.is-open~nav.wm-catbar.wma-cb{padding-top:0;padding-bottom:0;margin-bottom:43.25px}
}

/* Mega panel */
.wma-mega{position:absolute;left:0;right:0;z-index:20;background:#fff;border-bottom:1px solid var(--wmx-line);box-shadow:rgba(30,20,70,.28) 0 18px 30px -18px;font:400 14px/1.45 var(--wmx-body);color:var(--wmx-ink)}
.wma-mega[hidden]{display:none}
.wma-mega-in{display:grid;row-gap:18px;box-sizing:border-box;max-width:1086px;margin:0 auto;padding:24px 28px 20px}
.wma-mega a{color:inherit;text-decoration:none}
.wmxp-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.wmxp-top h4{margin:0;font:600 19px/22.8px var(--wmx-head);color:var(--wmx-ink)}
.wma-mega .wmxp-top a{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px;color:var(--wmx-brand)}
.wmxp-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px}
.wmxp-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.wmxp-stack{display:grid;gap:18px;min-width:0}
.wmxp-col{min-width:0}
.wmxp-col h5{margin:0 0 8px;font:600 11.5px/11.5px var(--wmx-body);letter-spacing:.805px;text-transform:uppercase;color:var(--wmx-muted)}
.wma-mega .wmxp-col a{display:block;padding:5px 0;font-size:14px;line-height:20.3px}
.wma-mega .wmxp-col a:hover,.wma-mega .wmxp-cov:hover{text-decoration:underline;text-underline-offset:3px}
.wmxp-covs{display:flex;gap:14px;align-items:flex-start;align-self:start}
.wma-mega .wmxp-cov{display:grid;gap:8px;align-content:start;width:168px;font-weight:600;font-size:13.5px}
.wmxp-cov img{display:block;width:168px;height:200px;border-radius:12px;object-fit:cover}
.wmxp-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border-top:1px solid var(--wmx-line);padding-top:16px}
.wmxp-chips small{font:600 11.5px/1 var(--wmx-body);letter-spacing:.805px;text-transform:uppercase;color:var(--wmx-muted);margin-right:6px}
.wma-mega .wmxp-chips a{border:1px solid var(--wmx-line);border-radius:999px;padding:7px 13px;font-size:13px;box-sizing:border-box}
.wma-mega .wmxp-chips a:hover{border-color:var(--wmx-ink)}
.wmxp-dir{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.wmxp-dir h5{margin:0 0 6px;font:600 11.5px/11.5px var(--wmx-body);letter-spacing:.805px;text-transform:uppercase;color:var(--wmx-muted)}
.wma-mega .wmxp-dir a{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14px}
.wma-mega .wmxp-dir a:hover span{text-decoration:underline;text-underline-offset:3px}
.wmxp-dir img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.wmxp-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.wma-mega .wmxp-grid .wmxp-cov{width:auto}
.wmxp-grid .wmxp-cov img{width:100%;height:150px}
.wmxp-cov small{display:block;font-weight:400;color:var(--wmx-muted);font-size:12.5px;margin-top:-4px}
.wmxp-az{display:flex;flex-wrap:wrap;gap:4px}
.wma-mega .wmxp-az a{width:30px;height:30px;display:grid;place-items:center;padding:0;border-radius:8px;font-weight:600;font-size:13px;background:var(--wmx-sand)}
.wmxp-skel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;min-height:220px}
.wmxp-skel i{display:block;height:220px;border-radius:12px;background:var(--wmx-soft)}
@media (max-width:1180px){.wmxp-covs{display:none}.wmxp-body{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.wmxp-dir{grid-template-columns:repeat(3,minmax(0,1fr))}.wmxp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Header tools */
.wm-header--apex .wma-tools{gap:8px}
.wm-header--apex .wma-globe{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:0;border-radius:999px;background:none;font:500 13.5px/19.575px var(--wmx-body);color:var(--wmx-muted);text-decoration:none;box-sizing:border-box}
.wm-header--apex .wma-globe:hover{background:var(--wmx-soft)}
.wm-header--apex .wma-sell{min-height:0;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:0;border-radius:999px;background:none;font:600 13.5px/19.575px var(--wmx-body);color:var(--wmx-ink);text-decoration:none;box-sizing:border-box}
.wm-header--apex .wma-sell[aria-expanded="true"]{background:var(--wmx-soft)}
.wm-header--apex .wma-sell::after{content:"";width:12px;height:12px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
@media (min-width:1280px){.wm-header--apex:not(.is-tight) .wma-globe{min-height:0}}
.wm-header--apex .wm-header-cta a.wm-btn-ghost:not(.ca-pill):not(.wm-btn-guide){height:auto;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:0;border-radius:999px;background:none;font:600 13.5px/19.575px var(--wmx-body);color:var(--wmx-ink);box-sizing:border-box}
.wm-header--apex .wm-header-cta a.wm-btn-solid{height:auto;display:inline-flex;align-items:center;padding:10px 16px;border:0;border-radius:999px;background:var(--wmx-brand);color:#fff;font:600 13.5px/19.575px var(--wmx-body);box-sizing:border-box}
.wm-header--apex .wm-header-cta a.wm-btn-solid:hover{background:#322180}
.wm-header--apex .wmb-cluster .wm-btn-guide{display:none}
.wm-header--apex .wmb-cluster .wmb-icon{position:relative;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:none}
.wm-header--apex .wmb-cluster .wmb-icon svg{width:20px;height:20px;stroke-width:1.8}
.wm-header--apex .wmb-cluster .wmb-bag-count{position:absolute;top:3px;right:2px;left:auto;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--wmx-brand);color:#fff;font:700 10.5px/16px var(--wmx-body);text-align:center}
.wm-header--apex .wmx-av{display:inline-flex;align-items:center;gap:10px;width:auto;height:auto;padding:5px 5px 5px 12px;margin-left:6px;border:1px solid var(--wmx-line);border-radius:999px;background:#fff;color:var(--wmx-ink);box-sizing:border-box}
.wm-header--apex .wmx-av:hover,.wm-header--apex .wmx-av[aria-expanded="true"]{box-shadow:0 2px 8px rgba(0,0,0,.12)}
.wm-header--apex .wmx-av svg{width:16px;height:16px;stroke-width:2.2}
.wm-header--apex .wmx-av span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--wmx-deep);color:var(--wmx-deep-ink);font:600 11.5px/1 var(--wmx-body)}

/* Sell and account cards: the wmaPanel box is a neutral anchor, the card places itself. Absolute, so an open
   card adds no flex item to .wma-tools: a static one took a second 8px gap and moved the Sell button and the
   globe 8px sideways on every open (owner 10.11). */
.wma-panel.wma-panel--sell,.wma-panel.wma-panel--account{position:absolute;top:auto;right:auto;min-width:0;max-width:none;padding:0;margin:0;border:0;background:none;box-shadow:none;width:0;height:0}
.wmx-card{position:absolute;top:calc(100% + 8px);left:0;z-index:30;display:grid;width:300px;box-sizing:border-box;padding:8px 0;background:#fff;border-radius:12px;box-shadow:rgba(0,0,0,.12) 0 2px 16px 0;font:400 14px/20.3px var(--wmx-body);color:var(--wmx-ink);text-align:left}
.wmx-card--r{left:auto;right:0;width:280px}
.wmx-card>a,.wmx-card form button{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 18px;font:inherit;color:inherit;text-decoration:none;background:none;border:0;width:100%;box-sizing:border-box;cursor:pointer;text-align:left}
.wmx-card>a:hover,.wmx-card form button:hover{background:var(--wmx-sand)}
.wmx-card>a.b{font-weight:600}
.wmx-card>a span{color:var(--wmx-muted);font-size:13px;line-height:18.85px}
.wmx-card hr{border:0;border-top:1px solid var(--wmx-line);margin:6px 0}
.wmx-card em{font:700 10.5px/16px var(--wmx-body);min-width:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--wmx-brand);color:#fff;text-align:center}
.wmx-card form{margin:0}
.wmx-promo{align-items:center}
.wmx-promo span,.wmx-two{display:grid;justify-items:start;gap:2px;line-height:1.35}
.wmx-promo b,.wmx-two b{font-weight:600;color:var(--wmx-ink)}
.wmx-promo small,.wmx-two small{color:var(--wmx-muted);font-size:12.5px;line-height:1.35}
.wmx-promo img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none}
.wmx-card>a.wmx-two{display:grid;justify-content:start;gap:2px;line-height:1.35}
.wmx-who{display:grid;padding:8px 18px 6px;line-height:1.35}
.wmx-who b{font-weight:600}
.wmx-who small{color:var(--wmx-muted);font-size:12.5px}

/* Locale modal */
.wma-panel.wma-panel--globe{position:fixed;inset:0;top:0;right:0;min-width:0;max-width:none;padding:0;margin:0;border:0;background:none;box-shadow:none;z-index:10000;font:400 14px/1.45 var(--wmx-body);color:var(--wmx-ink)}
.wmx-scrim{position:absolute;inset:0;z-index:40;background:rgba(23,20,43,.42)}
.wmx-modal{position:absolute;z-index:50;left:50%;top:40px;transform:translateX(-50%);width:880px;max-width:calc(100vw - 32px);height:640px;max-height:min(640px,calc(100vh - 80px));overflow-y:auto;box-sizing:border-box;padding:28px 32px 32px;background:#fff;border-radius:24px;box-shadow:rgba(0,0,0,.28) 0 8px 28px}
.wmx-x{position:absolute;top:16px;left:16px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;color:var(--wmx-ink);cursor:pointer}
.wmx-x:hover{background:var(--wmx-soft)}
.wmx-tabs{display:flex;gap:26px;margin:22px 0 20px;border-bottom:1px solid var(--wmx-line)}
.wmx-tabs button{position:relative;padding:10px 0 13px;border:0;background:none;font:600 14px/20.3px var(--wmx-body);color:var(--wmx-muted);cursor:pointer}
.wmx-tabs button[aria-selected="true"]{color:var(--wmx-ink)}
.wmx-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--wmx-ink)}
.wmx-note{background:var(--wmx-soft);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:19.575px;margin-bottom:18px}
.wmx-modal h4{margin:20px 0 10px;font:600 17px/20.4px var(--wmx-head);color:var(--wmx-ink)}
.wmx-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.wmx-tiles button{display:grid;text-align:left;padding:10px 12px;border:1px solid transparent;border-radius:10px;background:none;font:400 14px/18.9px var(--wmx-body);color:var(--wmx-ink);cursor:pointer;min-width:0}
.wmx-tiles button:hover{background:rgb(244,243,246)}
.wmx-tiles button.on{border-color:var(--wmx-ink)}
/* Keyboard focus draws ONE ring over the tile's own edge (the page-wide 2px ring sat 2px outside the selected
   tile's 1px border: a double ring, owner 10.11); a mouse click draws none (html[data-wma-ptr], below). */
.wmx-tiles button:focus{outline:none}
.wmx-tiles button:focus-visible{outline:2px solid var(--wmx-ink);outline-offset:-2px}
.wmx-only{margin:-8px 0 18px;font-size:13px;line-height:18.85px;color:var(--wmx-muted)}
/* The pointer's last word (wholesale-apex-menus.js): Chromium draws :focus-visible once ANY key follows a
   click, Shift or a screenshot shortcut included, so the header menus and the locale modal keep no ring
   until a real navigation key is pressed. */
html[data-wma-ptr] .wma-globe:focus-visible,html[data-wma-ptr] .wma-sell:focus-visible,html[data-wma-ptr] .wmx-av:focus-visible,
html[data-wma-ptr] .wma-panel--globe :focus-visible,html[data-wma-ptr] .wmx-card :focus-visible{outline:none}
.wmx-tiles small{color:var(--wmx-muted);font-size:13px;line-height:1.35}
@media (max-width:900px){.wmx-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
  .wmx-modal{left:0;top:0;transform:none;width:100%;max-width:none;height:100%;max-height:none;border-radius:0;padding:60px 14px 24px;box-shadow:none}
  .wmx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wmx-x{width:44px;height:44px;top:8px;left:8px}
}

/* Phone chips row */
.wma-chips{display:none}
@media (max-width:640px){
  /* owner 10.11: 44px pictures (a thumb's size), the label 12/16 and 6px under the picture; a tab is at
     least 60px wide, so a 390 phone shows five whole and the sixth peeks in to say the row scrolls */
  .wma-chips{display:flex;gap:12px;padding:0 14px;overflow-x:auto;scrollbar-width:none;background:#fff;font:400 12px/16px var(--wmx-body);box-sizing:border-box}
  .wma-chips::-webkit-scrollbar{display:none}
  .wma-chip{display:grid;justify-items:center;align-content:start;gap:6px;flex:none;min-width:60px;color:var(--wmx-muted);padding-bottom:8px;text-decoration:none;min-height:44px;box-sizing:border-box}
  .wma-chip.is-on{color:var(--wmx-ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--wmx-ink)}
  .wma-chip img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid rgb(230,226,236);box-sizing:border-box}
  .wma-chip svg{width:44px;height:44px;padding:9px;box-sizing:border-box}
}

/* Pinned under the search pill, where it is drawn on the phone (72px: padding 10 + pill + padding 10).
   The 18px from the pill to the pictures is the row's own margin above it (the wrapper's bottom padding
   plus this: 10 + 8, on the home 8 + 10), so the pinned pill block keeps its height and, once stuck,
   the margin folds away and the row sits right under the pill (owner 10.11: it was 8px). */
@media (max-width:520px){
  .wma-chips{position:sticky;top:72px;z-index:44;margin-top:8px}
  body:has(form[data-wma-hero]) .wma-chips{margin-top:10px}
}

/* Phone sheets, above the tab bar */
.wma-panel.wma-panel--sheet{position:fixed;left:0;right:0;top:0;bottom:calc(63px + env(safe-area-inset-bottom,0px));min-width:0;max-width:none;width:auto;padding:0;margin:0;border:0;border-radius:0;box-shadow:none;background:#fff;z-index:9980;overflow-y:auto;overscroll-behavior:contain;transform:translateY(100%);transition:transform .22s ease}
.wma-panel.wma-panel--sheet.is-up{transform:none}
.wma-panel--sheet.is-sand{background:var(--wmx-sand)}
@media (min-width:641px){.wma-panel.wma-panel--sheet{display:none}}
html.wmx-lock{overflow:hidden}
.wph{display:flex;flex-direction:column;gap:10px;padding:22px 14px 16px;font:400 13px/18.2px var(--wmx-body);color:var(--wmx-ink)}
.wph--sheet{background:var(--wmx-sand);padding-top:14px;min-height:100%;box-sizing:border-box}
.wph a{color:inherit;text-decoration:none}
.wph-top{display:flex;align-items:center;gap:10px;min-height:32px}
.wph-top b{flex:1;font:600 15px/18px var(--wmx-head)}
.wph-xb,.wph-back{position:relative;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--wmx-line);border-radius:50%;background:#fff;color:var(--wmx-ink);flex:none;cursor:pointer}
.wph-xb::after,.wph-back::after{content:"";position:absolute;inset:-7px}
.wph-top .wph-xb:only-child{margin-right:auto}
.wph-cap{font:600 10.5px/10.5px var(--wmx-body);letter-spacing:.735px;text-transform:uppercase;color:var(--wmx-muted);margin-top:6px}
.wph a.wph-all{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--wmx-brand);color:#fff;border-radius:999px;padding:11px;font-weight:600;font-size:13px}
.wph-row{display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding:8px 10px;font-size:13.5px;line-height:18.9px;min-height:44px;box-sizing:border-box;border:0;width:100%;text-align:left;font-family:inherit;color:inherit;cursor:pointer;transition:background-color .1s}
.wph-row:active,.wph a.wph-all:active,.wph-fmt a:active,.wph-covs a:active{background-color:rgb(232,230,236)}
.wph-row img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.wph-row i{margin-left:auto;width:8px;height:8px;border-right:2px solid var(--wmx-muted);border-top:2px solid var(--wmx-muted);transform:rotate(45deg);flex:none}
.wph-row em{margin-left:auto;font:700 10.5px/16px var(--wmx-body);min-width:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--wmx-brand);color:#fff;text-align:center}
.wph-row em+i{margin-left:6px}
.wph-row.t{padding:11px 12px;min-height:0;position:relative}
.wph-row.t::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
.wph-row.g{background:none;border-bottom:1px solid var(--wmx-line);border-radius:0;padding:12px 2px}
.wph-row.g span{display:grid;line-height:1.3}
.wph-row.g small{color:var(--wmx-muted);font-size:12.5px;line-height:1.2}
.wph-row.b span{font-weight:600}
.wph-lo{border-bottom:0}
.wph form{margin:0}
.wph-covs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wph-covs a{display:grid;gap:5px;font-weight:600;font-size:12.5px;line-height:1.4}
.wph-covs img{display:block;width:100%;height:120px;border-radius:12px;object-fit:cover}
.wph-fmt{display:flex;flex-wrap:wrap;gap:8px}
.wph-fmt a{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--wmx-line);border-radius:999px;padding:7px 12px;font-size:13px;line-height:18.2px;box-sizing:border-box}
.wph-acc{display:grid;gap:10px;padding:10px 2px 6px}
.wph-acc h5{margin:0;font:600 24px/28.8px var(--wmx-head)}
.wph-acc p{margin:0;color:var(--wmx-muted);font-size:13px}
.wph a.wph-go{display:inline-flex;align-items:center;gap:6px;background:var(--wmx-brand);color:#fff;border-radius:12px;padding:12px 18px;font-weight:600;line-height:18.2px;box-sizing:border-box}
.wph a.wph-go.w{display:flex;justify-content:center;padding:12px}
.wph a.wph-go,.wph a.wph-ol{position:relative}
.wph a.wph-go::after,.wph a.wph-ol::after{content:"";position:absolute;left:0;right:0;top:-1px;bottom:-1px}
.wph a.wph-ol{display:flex;align-items:center;justify-content:center;border:1px solid var(--wmx-ink);border-radius:12px;padding:11px;font-weight:600;line-height:18.2px;box-sizing:border-box}
.wph a.wph-promo{display:flex;align-items:center;gap:12px;border-radius:16px;padding:14px;margin:6px 0;box-shadow:rgba(0,0,0,.1) 0 2px 14px;background:#fff;box-sizing:border-box}
.wph-promo span{display:grid;line-height:1.35;flex:1;min-width:0}
.wph-promo b{font-weight:600;font-size:14px}
.wph-promo small{color:var(--wmx-muted);font-size:12.5px;line-height:1.35}
.wph-promo img{width:58px;height:58px;border-radius:12px;object-fit:cover;flex:none}
.wph-me{display:flex;align-items:center;gap:12px;padding:8px 2px 14px;border-bottom:1px solid var(--wmx-line);box-sizing:border-box}
.wph-me>span:last-child{display:grid;line-height:1.3}
.wph-me small{color:var(--wmx-muted);font-size:12.5px}
.wph-avb{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--wmx-deep);color:var(--wmx-deep-ink);font-weight:600;font-size:15px;flex:none}

/* Tab bar */
@media (max-width:640px){
  .wma-tabbar{position:sticky;left:auto;right:auto;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:8px 0 calc(10px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--wmx-line);height:auto;box-sizing:border-box}
  .wma-tabbar .wma-tab{display:grid;justify-items:center;align-content:start;gap:3px;min-height:44px;padding:0;font:400 11.5px/17.25px var(--wmx-body);color:var(--wmx-muted);text-decoration:none;position:relative;transition:background-color .1s}
  .wma-tabbar .wma-tab:active{background-color:rgb(232,230,236)}
  .wma-tabbar .wma-tab.is-on{color:var(--wmx-brand);font-weight:600}
  .wma-tabbar .wma-tab svg{width:22px;height:22px}
  .wma-tabbar-pad{display:none}
}

/* Hover and keyboard states of the header (Ivan 10.11: Saved and Bag had none; Sell on Closo and Log in had
   theirs reset to none above). Airbnb's header: text and icon buttons get a soft pill or circle behind them
   (the mock's .mx-txt and .mx-ico:hover), the icon keeps its ink, the filled go steps to the darker brand as
   Sign up does, a category label gets a grey underline (the open one keeps its ink bar). The underline is the
   current tab's own box (.wma-cb-on: 9px pad, 2px border, -11px margin, so nothing moves): an ::after would be
   clipped by the label's overflow: hidden (its ellipsis, wholesale-market-faire.css). Only a pointer that
   hovers gets the paint. The keyboard rings are the ones already drawn (wholesale-market-apex.css, and
   wholesale-market.css's .wm a:focus-visible for the phone's chips and search pill). */
.wm-header--apex .wmb-cluster .wmb-icon{cursor:pointer;color:var(--wmx-ink);transition:background-color .15s ease}
.wma-go{transition:padding .2s ease,background-color .15s ease}
nav.wm-catbar.wma-cb .wm-catbar-item{transition:color .15s ease}
@media (hover:hover){
  .wm-header--apex .wma-sell:hover,.wm-header--apex .wm-header-cta a.wm-btn-ghost:not(.ca-pill):not(.wm-btn-guide):hover,.wm-header--apex .wmb-cluster .wmb-icon:hover{background-color:var(--wmx-soft)}
  .wm-header--apex .wmb-cluster .wmb-icon:hover{color:var(--wmx-ink)}
  .wma-go:hover{background-color:#322180}
  nav.wm-catbar.wma-cb .wm-catbar-item:not(.wma-cb-on):not([aria-expanded="true"]):hover{border-bottom:2px solid #DEDBE4;padding-bottom:9px;margin-bottom:-11px}
}
@media (prefers-reduced-motion:reduce){
  .wm-header--apex .wmb-cluster .wmb-icon,nav.wm-catbar.wma-cb .wm-catbar-item{transition:none}
}