/* ==========================================================================
   FezaMarket - Walmart-style Design System
   Loaded last, site-wide. Owns the visual language for every page.
   Palette + geometry modelled on walmart.com (True Blue / Spark Yellow /
   Bentonville Blue, pill buttons, 16px cards, heavy display headings).
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --wm-blue:            #0071dc;   /* True Blue  - primary action / links   */
  --wm-blue-hover:      #005fbb;
  --wm-blue-active:     #004f9a;
  --wm-navy:            #041e42;   /* Bentonville Blue - headings, footer   */
  --wm-sky:             #4dbdf5;
  --wm-sky-100:         #e6f1fc;
  --wm-sky-200:         #cce4f9;
  --wm-yellow:          #ffc220;   /* Spark Yellow - logo, badges, rollback */
  --wm-yellow-dark:     #f0b000;

  /* --- Neutrals --------------------------------------------------------- */
  --wm-ink:             #2e2f32;
  --wm-ink-2:           #46474a;
  --wm-muted:           #74767c;
  --wm-line:            #e4e5e7;
  --wm-line-strong:     #d4d5d8;
  --wm-surface:         #ffffff;
  --wm-surface-2:       #f8f8f8;
  --wm-surface-3:       #f2f2f2;
  --wm-page:            #ffffff;

  /* --- Semantic --------------------------------------------------------- */
  --wm-save:            #0a8043;
  --wm-danger:          #de1c24;
  --wm-warn:            #bf5c00;
  --wm-star:            #ffc220;

  /* --- Geometry --------------------------------------------------------- */
  --wm-r-pill:          100px;
  --wm-r-lg:            24px;
  --wm-r-md:            16px;
  --wm-r-sm:            8px;
  --wm-r-xs:            4px;

  --wm-shadow-1:        0 1px 3px rgba(0,0,0,.10);
  --wm-shadow-2:        0 2px 8px rgba(0,0,0,.12);
  --wm-shadow-3:        0 8px 24px rgba(0,0,0,.16);
  --wm-shadow-menu:     0 12px 32px rgba(0,0,0,.18);

  --wm-max:             1440px;
  --wm-gutter:          24px;

  --wm-font: "Bogle", system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   1. BASE
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--wm-font) !important;
  font-size: 14px;
  line-height: 1.4;
  color: var(--wm-ink);
  background: var(--wm-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wm-font);
  color: var(--wm-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }

a { color: var(--wm-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.wm-link, a.wm-link { color: var(--wm-blue); text-decoration: underline; }
.wm-link:hover { color: var(--wm-blue-hover); }

img { max-width: 100%; }

/* Inline SVG icons (wm_icon) - inherit colour, align with text */
.wm-i { display: inline-block; vertical-align: -0.18em; flex: 0 0 auto; }
/* mobile-responsive.css forces `svg { height:auto }`; our icons carry an
   inline width/height so they cannot collapse inside flex containers. */
.wm-rating__stars { display: inline-flex; align-items: center; gap: 1px; color: var(--wm-star); }
.wm-rating__stars svg { display: block; }

:focus-visible {
  outline: 2px solid var(--wm-blue);
  outline-offset: 2px;
  border-radius: var(--wm-r-xs);
}

.wm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 5000;
  background: #fff; color: var(--wm-blue); padding: 12px 20px;
  border-radius: 0 0 var(--wm-r-sm) 0; font-weight: 700;
}
.wm-skip:focus { left: 0; }

.wm-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Content rail - widen the legacy container to Walmart's 1440px */
.container,
.wm-rail {
  max-width: var(--wm-max);
  margin-left: auto; margin-right: auto;
  padding-left: var(--wm-gutter); padding-right: var(--wm-gutter);
  width: 100%;
}

/* ==========================================================================
   2. BUTTONS  (Walmart pills)
   ========================================================================== */

.wm-btn,
.btn,
button.btn,
a.btn,
.checkout-button,
.srx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--wm-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--wm-r-pill) !important;
  background: var(--wm-surface-3);
  color: var(--wm-ink);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease,
              box-shadow .15s ease;
  text-decoration: none !important;
  white-space: nowrap;
}
.wm-btn:hover, .btn:hover, .srx-btn:hover { background: var(--wm-line); }

.wm-btn--primary,
.btn-primary, .btn.btn-primary,
.btn-success, .btn.btn-success,
.checkout-button,
.srx-btn-primary,
.add-to-cart, .btn.add-to-cart {
  background: var(--wm-blue) !important;
  color: #fff !important;
  border-color: var(--wm-blue) !important;
}
.wm-btn--primary:hover,
.btn-primary:hover, .btn-success:hover,
.checkout-button:hover, .srx-btn-primary:hover,
.add-to-cart:hover {
  background: var(--wm-blue-hover) !important;
  border-color: var(--wm-blue-hover) !important;
}

.wm-btn--secondary,
.btn-secondary, .btn.btn-secondary,
.btn-outline, .btn.btn-outline {
  background: #fff !important;
  color: var(--wm-ink) !important;
  border: 1px solid var(--wm-ink) !important;
}
.wm-btn--secondary:hover,
.btn-secondary:hover, .btn-outline:hover { background: var(--wm-surface-3) !important; }

/* A form's own submit action is the primary CTA on the page - Walmart never
   leaves it looking like a disabled grey chip. */
form button[type="submit"]:not(.wm-btn--secondary):not(.wm-btn--tertiary):not(.wm-btn--ghost):not(.btn-outline):not(.btn-secondary):not(.btn-danger):not(.wm-search__submit):not(.wm-modal__close) {
  background: var(--wm-blue); color: #fff; border-color: var(--wm-blue);
}
form button[type="submit"]:not(.wm-btn--secondary):not(.wm-btn--tertiary):not(.wm-btn--ghost):not(.btn-outline):not(.btn-secondary):not(.btn-danger):not(.wm-search__submit):not(.wm-modal__close):hover {
  background: var(--wm-blue-hover); border-color: var(--wm-blue-hover);
}

.wm-btn--tertiary { background: var(--wm-surface-3); color: var(--wm-ink); }
.wm-btn--tertiary:hover { background: var(--wm-line); }

.wm-btn--danger, .btn-danger { background: var(--wm-danger) !important; color: #fff !important; }
.wm-btn--ghost { background: transparent; }
.wm-btn--ghost:hover { background: rgba(0,0,0,.06); }

.wm-btn--lg, .btn-lg { min-height: 48px; font-size: 16px; padding: 0 28px; }
.wm-btn--sm, .btn-sm { min-height: 32px; font-size: 13px; padding: 0 14px; }
.wm-btn--block { width: 100%; }

.wm-btn[disabled], .btn[disabled], .wm-btn.is-disabled {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

.wm-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1px solid var(--wm-line-strong);
  color: var(--wm-ink); cursor: pointer;
  box-shadow: var(--wm-shadow-1);
  transition: background .15s ease, box-shadow .15s ease;
}
.wm-iconbtn:hover { background: var(--wm-surface-3); box-shadow: var(--wm-shadow-2); }

/* ==========================================================================
   3. FORMS
   ========================================================================== */

.wm-input, .form-control, input[type="text"], input[type="email"],
input[type="password"], input[type="tel"], input[type="number"],
input[type="search"], select, textarea {
  font-family: var(--wm-font);
  font-size: 14px;
  color: var(--wm-ink);
  background: #fff;
  border: 1px solid var(--wm-line-strong);
  border-radius: var(--wm-r-sm);
  padding: 11px 14px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wm-input:focus, .form-control:focus,
input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="tel"]:focus,
input[type="number"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
  border-color: var(--wm-blue);
  box-shadow: 0 0 0 1px var(--wm-blue);
  outline: none;
}
label, .form-group label { font-size: 13px; font-weight: 600; color: var(--wm-ink-2); }

/* ==========================================================================
   4. HEADER
   ========================================================================== */

.wm-header { position: relative; z-index: 900; }

.wm-bar { background: var(--wm-blue); color: #fff; }
/* Measured against walmart.com at a 1280px viewport: the blue bar is 84px
   tall (16px padding + a 52px control row), the fulfilment pill 314px wide,
   the search field 470px and the account cluster 344px. */
.wm-bar__inner {
  max-width: var(--wm-max);
  margin-left: auto; margin-right: auto;
  padding: 16px var(--wm-gutter);
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 84px;
}

/* The logo sits directly on the blue bar - no plate, no box. The asset is a
   transparent white knock-out so nothing but the mark itself is visible. */
.wm-logo { display: inline-flex; align-items: center; flex: 0 0 auto; height: 52px; }
.wm-logo:hover { text-decoration: none; opacity: .9; }
.wm-logo__img { display: block; height: 30px; width: auto; max-width: none; }
@media (max-width: 1360px) {
  .wm-logo__img { height: 26px; }
}
@media (max-width: 1200px) { .wm-logo__img { height: 24px; } }
@media (max-width: 640px)  { .wm-logo__img { height: 22px; } }

.wm-barbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px;
  border: 0; background: transparent; color: #fff;
  font-family: var(--wm-font); font-size: 14px; font-weight: 600;
  border-radius: var(--wm-r-pill); cursor: pointer; white-space: nowrap;
}
.wm-barbtn:hover, .wm-barbtn[aria-expanded="true"] {
  background: rgba(255,255,255,.18); text-decoration: none;
}
.wm-barbtn__caret { transition: transform .15s ease; }

/* burger only on small screens */
.wm-barbtn--burger { display: none; }
@media (max-width: 900px) { .wm-barbtn--burger { display: inline-flex; } }

.wm-barbtn[aria-expanded="true"] .wm-barbtn__caret { transform: rotate(180deg); }

.wm-search { flex: 1 1 470px; min-width: 160px; max-width: 620px; position: relative; }
.wm-search__form {
  display: flex; align-items: center;
  background: #fff; border-radius: var(--wm-r-pill);
  height: 52px; padding: 4px 4px 4px 20px;
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow .15s ease;
}
.wm-search__form:focus-within { box-shadow: 0 0 0 2px var(--wm-navy); }
.wm-search__input {
  flex: 1; border: 0 !important; outline: none; background: transparent;
  font-size: 15px; color: var(--wm-ink); padding: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; width: auto;
  min-width: 0;
}
.wm-search__input::placeholder { color: var(--wm-muted); }
.wm-search__submit {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--wm-blue); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.wm-search__submit:hover { background: var(--wm-blue-hover); }

/* Search by image. A quiet grey mark inside the field, so the blue submit
   button stays the one obvious action; the divider tells the eye it belongs to
   the search field rather than floating next to it. */
.wm-search__lens {
  flex: 0 0 auto; width: 40px; height: 40px; margin-right: 4px;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--wm-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; transition: background .15s ease, color .15s ease;
}
.wm-search__lens::before {
  content: ""; position: absolute; left: -4px; top: 9px; bottom: 9px;
  width: 1px; background: var(--wm-line, #e4e6e9);
}
.wm-search__lens:hover  { background: var(--wm-surface-2, #f2f3f5); color: var(--wm-ink); }
.wm-search__lens:focus-visible { outline: 2px solid var(--wm-blue); outline-offset: 2px; }

.wm-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border-radius: var(--wm-r-md);
  box-shadow: var(--wm-shadow-menu); overflow: hidden;
  display: none; z-index: 1000; padding: 8px 0;
}
.wm-suggest.is-open { display: block; }
.wm-suggest__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; font-size: 14px; color: var(--wm-ink); cursor: pointer;
  text-decoration: none;
}
.wm-suggest__item:hover, .wm-suggest__item.is-active {
  background: var(--wm-sky-100); text-decoration: none;
}
.wm-suggest__item svg { color: var(--wm-muted); flex: 0 0 auto; }

/* A product suggestion shows the product - picture, name, price - and the part
   that was typed is bolded, so the list can be scanned rather than read. */
.wm-suggest__thumb {
  width: 38px; height: 38px; flex: 0 0 38px;
  object-fit: contain; background: var(--wm-surface-2, #f5f6f7); border-radius: 6px;
}
.wm-suggest__ico   { color: var(--wm-muted); display: inline-flex; flex: 0 0 38px; justify-content: center; }
.wm-suggest__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-suggest__label b { font-weight: 700; }
.wm-suggest__price { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--wm-ink); }
.wm-suggest__meta  { flex: 0 0 auto; font-size: 12px; color: var(--wm-muted); }
.wm-suggest__group { padding: 6px 20px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--wm-muted); }

.wm-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.wm-actions__menu { position: relative; }
.wm-action {
  display: inline-flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 12px; border-radius: var(--wm-r-pill);
  color: #fff; background: transparent; border: 0; cursor: pointer;
  font-family: var(--wm-font); white-space: nowrap;
}
.wm-action:hover { background: rgba(255,255,255,.18); text-decoration: none; }
.wm-action__text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.wm-action__top { font-size: 12px; font-weight: 400; }
.wm-action__bot { font-size: 14px; font-weight: 700; }
@media (max-width: 1250px) { .wm-action__text { display: none; } }

.wm-cart { position: relative; display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; height: 52px; min-width: 52px;
  padding: 0 10px; border-radius: var(--wm-r-pill); color: #fff; }
.wm-cart:hover { background: rgba(255,255,255,.18); text-decoration: none; }
.wm-cart__count {
  position: absolute; top: 0; right: 2px;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--wm-yellow); color: var(--wm-navy);
  border-radius: var(--wm-r-pill);
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.wm-cart__total { font-size: 12px; font-weight: 700; margin-top: 2px; }
.wm-cart__count[hidden] { display: none; }

.wm-subnav { background: #f2f6fd; border-bottom: 1px solid #e3ebf7; }
.wm-pillbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px; flex: 0 0 auto;
  background: #fff; border: 1px solid transparent; border-radius: var(--wm-r-pill);
  font-family: var(--wm-font); font-size: 14px; font-weight: 700; color: var(--wm-ink);
  cursor: pointer; white-space: nowrap; box-shadow: var(--wm-shadow-1);
}
.wm-pillbtn:hover, .wm-pillbtn[aria-expanded="true"] { background: var(--wm-sky-100); }
.wm-pillbtn svg { transition: transform .15s ease; }
.wm-pillbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.wm-subnav__inner {
  max-width: var(--wm-max); margin-left: auto; margin-right: auto;
  padding: 0 var(--wm-gutter);
  display: flex; align-items: center; gap: 8px;
  height: 48px;
}

.wm-fulfil {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px 0 10px;
  background: var(--wm-sky-100); border: 0; border-radius: var(--wm-r-pill);
  color: var(--wm-ink); font-family: var(--wm-font); font-size: 13px;
  font-weight: 600; cursor: pointer; flex: 0 0 auto; white-space: nowrap;
}
.wm-fulfil:hover { background: var(--wm-sky-200); }

/* The lead pill in the blue bar.
   It sizes to its own text. A fixed 314px meant "Set delivery area" sat in a
   blue box a third wider than the words, and that dead space came straight out
   of the search field beside it - which is the element that actually wants the
   room. `max-width` still stops a long saved address from crowding the bar out;
   the label ellipsises instead. */
.wm-fulfil--lead {
  background: #002e99; color: #fff;
  height: 52px; padding: 0 20px 0 16px !important; gap: 10px;
  width: auto; max-width: 320px; flex: 0 0 auto;
}
.wm-fulfil--lead:hover { background: #00227a; }
.wm-fulfil--lead .wm-fulfil__icon { color: #fff; }
.wm-fulfil--lead .wm-fulfil__label span { font-size: 14px; font-weight: 700; }
.wm-fulfil--lead .wm-fulfil__label small { color: rgba(255,255,255,.8); }
.wm-fulfil__label span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 210px;
}
/* The label always shows. Hiding it below 1250px left a bare icon that said
   nothing about what it did or where the shopper was set to deliver. */
@media (max-width: 1250px) {
  .wm-fulfil--lead { padding: 0 14px !important; max-width: 250px; }
  .wm-fulfil--lead .wm-fulfil__label span  { font-size: 13px; max-width: 160px; }
  .wm-fulfil--lead .wm-fulfil__label small { display: none; }
}
.wm-fulfil__icon { color: var(--wm-blue); display: inline-flex; }
.wm-fulfil__label { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.wm-fulfil__label small { font-size: 11px; font-weight: 400; color: var(--wm-muted); }

.wm-navlinks {
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; scrollbar-width: none; flex: 1 1 auto;
}
.wm-navlinks::-webkit-scrollbar { display: none; }
.wm-navlinks a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px;
  font-size: 13px; font-weight: 600; color: var(--wm-ink);
  border-radius: var(--wm-r-pill); white-space: nowrap;
}
.wm-navlinks a:hover { background: #fff; text-decoration: none; }
.wm-navlinks a.is-active { background: #fff; color: var(--wm-blue); box-shadow: var(--wm-shadow-1); }
.wm-navlinks a.wm-navlinks__plus { color: var(--wm-blue); font-weight: 700; }


/* --------------------------------------------------------------------------
   Legacy neutralisation.
   css/mobile-responsive.css styles bare `button` with min-height:44px and
   12px/20px padding, which squashes the flex children of our icon buttons
   (a 40px search button ends up with a 0px content box). Re-assert geometry
   for the Walmart chrome only.
   -------------------------------------------------------------------------- */
.wm-header button,
.wm-modal button,
.wm-drawer button,
.wm-card button,
.wm-hero button,
.wm-shelf__nav,
.wm-tabbar a,
.wm-qty button {
  min-height: 0;
  padding: 0;
}
.wm-hero__dots button { width: 8px; height: 8px; }
.wm-hero__dots button.is-on { width: 22px; }
.wm-hero__nav button { width: 36px; height: 36px; }

/* css/mobile-responsive.css declares `img, video, iframe, picture, svg
   { max-width:100%; height:auto }`, which defeats every object-fit box in
   this file - images render at natural size and overflow their frame.
   Re-assert the intended geometry for the Walmart chrome only. */
.wm-card__media img,
.wm-tile__shot img,
.wm-hero__art img,
.wm-hero__feature img,
.wm-hero__tile img,
.wm-puck__img img,
.wm-line__img img,
.wm-thumb img,
.wm-stage img,
.feza-card .feza-card-img img,
.product-card .product-image img,
.srx-card .srx-card-img img,
.cart-item .item-image img {
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
.wm-stage img { height: auto !important; max-height: 100% !important; }
.wm-logo__img { height: 30px !important; width: auto !important; max-width: none !important; }
@media (max-width: 1360px) { .wm-logo__img { height: 26px !important; } }
@media (max-width: 1200px) { .wm-logo__img { height: 24px !important; } }
@media (max-width: 640px)  { .wm-logo__img { height: 22px !important; } }
.wm-search__submit {
  width: 44px !important; height: 44px !important;
  min-height: 0 !important; padding: 0 !important;
  flex: 0 0 44px !important;
}
.wm-search__lens {
  width: 40px !important; height: 40px !important;
  min-height: 0 !important; padding: 0 !important;
  flex: 0 0 40px !important;
}
.wm-barbtn  { min-height: 0 !important; padding: 0 14px !important; height: 40px; }
.wm-action  { min-height: 0 !important; padding: 0 12px !important; height: 52px; }
.wm-cart    { min-height: 0 !important; padding: 0 10px !important; height: 52px; }
.wm-fulfil  { min-height: 0 !important; padding: 0 14px 0 10px !important; height: 36px; }
.wm-fulfil--lead { height: 52px !important; padding: 0 20px 0 16px !important; }
.wm-modal__close { min-height: 0 !important; padding: 0 !important; }
.wm-card__add    { min-height: 36px !important; padding: 0 12px !important; }
.wm-i { flex: 0 0 auto !important; }

/* ==========================================================================
   5. MEGA MENU / FLYOUTS
   ========================================================================== */

.wm-flyout {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; box-shadow: var(--wm-shadow-menu);
  border-top: 1px solid var(--wm-line);
  display: none; z-index: 950;
}
.wm-flyout.is-open { display: block; }
.wm-flyout__inner {
  max-width: var(--wm-max); margin-left: auto; margin-right: auto;
  padding: 24px var(--wm-gutter) 32px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px 32px;
}
.wm-flyout__col h4 {
  font-size: 15px; font-weight: 700; color: var(--wm-ink); margin-bottom: 10px;
}
.wm-flyout__col a {
  display: block; font-size: 13px; color: var(--wm-ink-2);
  padding: 5px 0; border-radius: var(--wm-r-xs);
}
.wm-flyout__col a:hover { color: var(--wm-blue); text-decoration: underline; }
.wm-scrim {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,.4); z-index: 940; display: none;
}
.wm-scrim.is-open { display: block; }

.wm-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 260px; background: #fff; color: var(--wm-ink);
  border-radius: var(--wm-r-md); box-shadow: var(--wm-shadow-menu);
  padding: 8px; display: none; z-index: 1000;
}
.wm-menu.is-open { display: block; }
.wm-menu a, .wm-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; font-size: 14px; color: var(--wm-ink);
  border-radius: var(--wm-r-sm); background: none; border: 0;
  text-align: left; cursor: pointer; font-family: var(--wm-font);
}
.wm-menu a:hover, .wm-menu button:hover { background: var(--wm-surface-3); text-decoration: none; }
.wm-menu__sep { height: 1px; background: var(--wm-line); margin: 6px 8px; }
.wm-menu__head { padding: 12px; }
.wm-menu__head strong { display: block; font-size: 16px; }

/* ==========================================================================
   6. MODALS / DRAWERS
   ========================================================================== */

.wm-modal {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,0,0,.5);
}
.wm-modal.is-open { display: flex; }
.wm-modal__panel {
  background: #fff; border-radius: var(--wm-r-lg);
  width: 100%; max-width: 480px; max-height: 90vh; overflow: auto;
  box-shadow: var(--wm-shadow-3); padding: 24px;
}
.wm-modal__panel--wide { max-width: 760px; }

/* ---- search-by-image panel ---- */
.wm-lens__drop {
  border: 2px dashed var(--wm-line, #d7dbe0); border-radius: var(--wm-r-md);
  background: var(--wm-surface-2, #f7f8f9);
  padding: 28px 20px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--wm-muted); transition: border-color .15s ease, background .15s ease;
}
.wm-lens__drop:hover,
.wm-lens__drop.is-over  { border-color: var(--wm-blue); background: var(--wm-sky-100, #e8f2fd); }
.wm-lens__drop strong   { color: var(--wm-ink); font-size: 15px; }
.wm-lens__drop span     { font-size: 13px; }
.wm-lens__preview {
  display: block; margin: 14px auto 0; max-height: 180px;
  border-radius: var(--wm-r-md); background: var(--wm-surface-2, #f7f8f9);
}
.wm-lens__or {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 10px; color: var(--wm-muted); font-size: 13px;
}
.wm-lens__or::before, .wm-lens__or::after {
  content: ""; flex: 1; height: 1px; background: var(--wm-line, #e4e6e9);
}
.wm-lens__url   { display: flex; gap: 8px; }
/* The pill radius plus a shrink-to-fit width turned this into a circle with the
   word clipped inside it, so it gets its own width and height. */
.wm-lens__url .wm-btn {
  flex: 0 0 auto; height: 42px; min-height: 0;
  padding: 0 22px !important; white-space: nowrap;
}
.wm-lens__input {
  flex: 1; min-width: 0; height: 42px; padding: 0 14px;
  border: 1px solid var(--wm-line, #d7dbe0); border-radius: var(--wm-r-sm, 8px);
  font-size: 14px;
}
.wm-lens__status { margin: 12px 0 0; font-size: 13px; color: var(--wm-ink); min-height: 18px; }
.wm-lens__status.is-error { color: #c00e0e; }
.wm-lens__note   { margin: 10px 0 0; font-size: 12px; color: var(--wm-muted); line-height: 1.5; }
.wm-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.wm-modal__title { font-size: 20px; font-weight: 700; }
.wm-modal__close {
  border: 0; background: none; cursor: pointer; color: var(--wm-ink);
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; font-size: 20px;
}
.wm-modal__close:hover { background: var(--wm-surface-3); }

.wm-drawer {
  position: fixed; top: 0; bottom: 0; right: 0; width: min(420px, 100%);
  background: #fff; z-index: 2000; box-shadow: var(--wm-shadow-3);
  transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column;
}
.wm-drawer.is-open { transform: none; }
.wm-drawer--left { right: auto; left: 0; transform: translateX(-100%); }
.wm-drawer--left.is-open { transform: none; }
.wm-drawer__head { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--wm-line); }
.wm-drawer__body { flex: 1; overflow: auto; padding: 8px 0; }
.wm-drawer__body a { display: block; padding: 12px 20px; font-size: 15px; font-weight: 600; }
.wm-drawer__body a:hover { background: var(--wm-surface-3); text-decoration: none; }

/* ==========================================================================
   7. PRODUCT CARD  (unifies .feza-card / .product-card / .srx-card)
   ========================================================================== */

.wm-card,
.feza-card,
.product-card,
.srx-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid transparent !important;
  border-radius: var(--wm-r-md) !important;
  padding: 0 0 12px;
  box-shadow: none !important;
  transition: box-shadow .15s ease, border-color .15s ease;
  color: var(--wm-ink);
}
.wm-card:hover,
.feza-card:hover,
.product-card:hover,
.srx-card:hover {
  border-color: var(--wm-line) !important;
  box-shadow: var(--wm-shadow-2) !important;
  text-decoration: none;
}

.wm-card__media,
.feza-card .feza-card-img,
.product-card .product-image,
.srx-card .srx-card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: var(--wm-r-sm);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.wm-card__media img,
.feza-card .feza-card-img img,
.product-card .product-image img,
.srx-card .srx-card-img img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .25s ease;
}
.wm-card:hover .wm-card__media img,
.feza-card:hover .feza-card-img img,
.product-card:hover .product-image img { transform: scale(1.03); }

.wm-card__heart {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wm-ink); box-shadow: var(--wm-shadow-1);
}
.wm-card__heart:hover { background: #fff; }
.wm-card__heart.is-on { color: var(--wm-danger); }

.wm-flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; padding: 3px 8px; border-radius: var(--wm-r-xs);
  margin-bottom: 6px; width: fit-content;
}
.wm-flag--rollback  { background: var(--wm-danger); color: #fff; }
.wm-flag--rollback::before { content: "93"; font-weight: 700; }
.wm-flag--clearance { background: var(--wm-yellow); color: var(--wm-navy); }
.wm-flag--best      { background: var(--wm-sky-100); color: var(--wm-navy); }
.wm-flag--new       { background: #eaf6ee; color: var(--wm-save); }
.wm-flag--deal      { background: var(--wm-navy); color: #fff; }
.wm-flag--sponsored { background: transparent; color: var(--wm-muted);
                      font-weight: 400; text-transform: none; padding-left: 0; }
.wm-flag--plus      { background: var(--wm-blue); color: #fff; text-transform: none; }

.feza-bestseller-badge {
  position: static !important; display: inline-flex; align-items: center;
  background: var(--wm-sky-100) !important; color: var(--wm-navy) !important;
  font-size: 11px !important; font-weight: 700 !important;
  padding: 3px 8px !important; border-radius: var(--wm-r-xs) !important;
  margin-bottom: 6px; width: fit-content; text-transform: uppercase;
}
.feza-card-badge, .sale-badge, .srx-badge-discount {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--wm-yellow) !important; color: var(--wm-navy) !important;
  font-size: 11px !important; font-weight: 700 !important;
  padding: 3px 8px !important; border-radius: var(--wm-r-xs) !important;
}

.wm-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.wm-price__now,
.feza-card .feza-price-now,
.product-card .product-price,
.srx-card .srx-price-now {
  font-size: 24px !important; font-weight: 700 !important;
  color: var(--wm-ink) !important; letter-spacing: -.02em; line-height: 1.15;
}
.wm-price__was,
.feza-card .feza-price-old,
.srx-card .srx-price-was,
.original-price {
  font-size: 13px !important; color: var(--wm-muted) !important;
  text-decoration: line-through;
}
.wm-price__save, .wm-save { font-size: 13px; font-weight: 700; color: var(--wm-save); }
.wm-price__unit { font-size: 12px; color: var(--wm-muted); }

.wm-card__title,
.feza-card .feza-card-title,
.product-card .product-title,
.srx-card .srx-card-title {
  font-size: 16px !important; font-weight: 400 !important;
  color: var(--wm-ink) !important; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 6px; min-height: 42px;
}
.wm-card:hover .wm-card__title,
.feza-card:hover .feza-card-title { text-decoration: underline; }

.wm-rating,
.feza-card-rating, .product-rating, .srx-card-rating {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px !important; color: var(--wm-muted) !important;
  margin-bottom: 6px;
}
.wm-rating__stars, .feza-card-rating .stars, .product-rating .stars, .srx-star {
  color: var(--wm-star) !important; letter-spacing: 1px;
}

.wm-card__fulfil { font-size: 12px; color: var(--wm-ink-2); margin-bottom: 8px; }
.wm-card__fulfil strong { font-weight: 700; }
.wm-card__fulfil--free { color: var(--wm-save); font-weight: 600; }

.wm-card__actions { margin-top: auto; padding-top: 4px; }
.wm-card__add {
  width: 100%; min-height: 36px; border-radius: var(--wm-r-pill);
  background: var(--wm-blue); color: #fff; border: 0; cursor: pointer;
  font-family: var(--wm-font); font-size: 14px; font-weight: 600;
}
.wm-card__add:hover { background: var(--wm-blue-hover); }
.wm-card__add--out { background: var(--wm-surface-3); color: var(--wm-muted); cursor: not-allowed; }

.wm-grid { display: grid; gap: 16px; }
.wm-grid--products,
.feza-grid, .products-grid, .srx-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  justify-content: start;
}
@media (max-width: 640px) {
  .wm-grid--products, .feza-grid, .products-grid, .srx-grid {
    grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important;
  }
}

.wm-shelf { position: relative; }
.wm-shelf__track {
  /* Fixed-width columns, never 1fr: a shelf holding a single product would
     otherwise stretch that one card across the whole page. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 186px;
  justify-content: start;
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.wm-shelf__track::-webkit-scrollbar { display: none; }
.wm-shelf__track > * { scroll-snap-align: start; }
.wm-shelf__nav {
  position: absolute; top: 40%; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: #fff; box-shadow: var(--wm-shadow-2); cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.wm-shelf:hover .wm-shelf__nav { display: inline-flex; }
.wm-shelf__nav--prev { left: -18px; }
.wm-shelf__nav--next { right: -18px; }
@media (max-width: 900px) { .wm-shelf__nav { display: none !important; } }

/* ==========================================================================
   8. SECTIONS / TILES  (homepage)
   ========================================================================== */

.wm-section { margin: 0 0 24px; }
.wm-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.wm-section__head h2 { font-size: 24px; font-weight: 700; }
.wm-section__more { font-size: 14px; font-weight: 600; color: var(--wm-blue); }

.wm-mosaic { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   Tiles are product-led: a white card whose weight comes from real product
   photography, not a flat colour block. Colour modifiers stay available for
   the few promotional tiles that need them (Feza+, Live).
   -------------------------------------------------------------------------- */
.wm-tile {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--wm-line);
  border-radius: var(--wm-r-lg); overflow: hidden;
  padding: 20px; min-height: 264px; color: var(--wm-ink);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.wm-tile:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--wm-shadow-2); }
.wm-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--wm-shadow-2); }

.wm-tile__copy { flex: 0 0 auto; }
.wm-tile__eyebrow { font-size: 12px; font-weight: 700; color: var(--wm-muted);
  text-transform: uppercase; letter-spacing: .04em; }
.wm-tile__title { font-size: 20px; font-weight: 700; margin: 4px 0 0; letter-spacing: -.02em; }
.wm-tile__sub { font-size: 13px; color: var(--wm-ink-2); margin-top: 6px; max-width: 42ch; }

.wm-tile__shots {
  flex: 0 0 auto; display: grid; gap: 8px;
  margin: 14px 0 12px; min-height: 0;
}
.wm-tile__shots--quad   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wm-tile__shots--single { grid-template-columns: minmax(0, 1fr); }
/* a square cell makes the row height deterministic, so a portrait product
   photo cannot stretch the tile to its natural height */
.wm-tile__shot {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--wm-surface-2); border-radius: 12px; overflow: hidden; min-height: 0;
}
.wm-tile__shot img {
  width: 100%; height: 100%; object-fit: contain; padding: 8px;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.wm-tile:hover .wm-tile__shot img { transform: scale(1.06); }

.wm-tile__cta {
  flex: 0 0 auto; font-size: 13px; font-weight: 700;
  text-decoration: underline; align-self: flex-start;
}

.wm-tile--hero  { grid-column: span 2; grid-row: span 2; min-height: 544px; }
.wm-tile--hero .wm-tile__shots { max-width: 460px; }
.wm-tile--hero .wm-tile__title { font-size: 30px; }
.wm-tile--wide  { grid-column: span 2; }
.wm-tile--tall  { grid-row: span 2; }

/* promotional colour variants keep white text and hide the photo grid chrome */
.wm-tile--y  { background: var(--wm-yellow); border-color: transparent; }
.wm-tile--b  { background: var(--wm-blue);   border-color: transparent; color: #fff; }
.wm-tile--n  { background: var(--wm-navy);   border-color: transparent; color: #fff; }
.wm-tile--g  { background: #eaf6ee; border-color: transparent; }
.wm-tile--p  { background: #f7eefc; border-color: transparent; }
.wm-tile--o  { background: #fff1e6; border-color: transparent; }
.wm-tile--b .wm-tile__eyebrow, .wm-tile--n .wm-tile__eyebrow { color: rgba(255,255,255,.8); }
.wm-tile--b .wm-tile__sub,     .wm-tile--n .wm-tile__sub     { color: rgba(255,255,255,.9); }
.wm-tile--b .wm-tile__shot,    .wm-tile--n .wm-tile__shot    { background: rgba(255,255,255,.14); }

@media (max-width: 1100px) {
  .wm-mosaic { grid-template-columns: repeat(2, 1fr); }
  .wm-tile--hero { grid-column: span 2; grid-row: span 1; min-height: 340px; }
}
@media (max-width: 640px) {
  .wm-mosaic { grid-template-columns: 1fr; }
  .wm-tile--wide, .wm-tile--hero { grid-column: span 1; }
  .wm-tile { min-height: 240px; padding: 16px; }
}

/* --------------------------------------------------------------------------
   Hero carousel
   -------------------------------------------------------------------------- */
.wm-hero { position: relative; border-radius: var(--wm-r-lg); overflow: hidden; margin-bottom: 24px; }
.wm-hero__track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
/* walmart.com's hero banner measures 250px tall on desktop. */
.wm-hero__slide {
  flex: 0 0 100%; height: 250px;
  /* Copy, a feature product in the middle, then a stack on the right - the
     shape of the banners this is modelled on. The old two-column version put
     every image in one small box on the far right. */
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,190px) minmax(0,190px);
  align-items: center; gap: 22px;
  padding: 24px 40px; color: #fff; background: var(--wm-blue);
}
.wm-hero__slide--y { background: var(--wm-yellow); color: var(--wm-navy); }
.wm-hero__slide--n { background: var(--wm-navy); }
.wm-hero__slide--g { background: #0a8043; }
.wm-hero__slide--p { background: #5c2d8e; }
.wm-hero__eyebrow { font-size: 13px; font-weight: 700; opacity: .9; }
.wm-hero__title { font-size: 32px; font-weight: 700; letter-spacing: -.03em; margin: 4px 0 8px; color: inherit; }
.wm-hero__sub { font-size: 14px; opacity: .92; margin-bottom: 14px; max-width: 46ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wm-hero__cta { align-self: flex-start; }
/* The feature image: one big, legible product, not a thumbnail. */
.wm-hero__feature {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: var(--wm-r-md);
  aspect-ratio: 1 / 1; width: 100%; max-width: 190px;
  overflow: hidden; box-shadow: var(--wm-shadow-2);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wm-hero__feature:hover { transform: translateY(-3px); box-shadow: var(--wm-shadow-3); }
.wm-hero__feature img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }

/* The supporting stack, to its right. */
.wm-hero__art {
  display: grid; grid-template-rows: 1fr 1fr; gap: 12px;
  justify-self: end; width: 100%; max-width: 190px; height: 190px;
}
.wm-hero__tile {
  background: #fff; border-radius: var(--wm-r-md);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; box-shadow: var(--wm-shadow-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wm-hero__tile:hover { transform: translateY(-3px); box-shadow: var(--wm-shadow-2); }
.wm-hero__tile img { width: 100%; height: 100%; object-fit: contain; padding: 9px; }
/* controls sit bottom-right so they never sit on top of the product art */
.wm-hero__nav {
  position: absolute; bottom: 14px; right: 20px; display: flex; gap: 8px; z-index: 3;
}
.wm-hero__nav button {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.85); color: var(--wm-navy);
  display: inline-flex; align-items: center; justify-content: center;
}
.wm-hero__nav button:hover { background: #fff; }
.wm-hero__dots { position: absolute; left: 40px; bottom: 22px; display: flex; gap: 6px; z-index: 3; align-items: center; }
.wm-hero__dots button {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.5);
}
.wm-hero__dots button.is-on { background: #fff; width: 22px; border-radius: 100px; }
@media (max-width: 820px) {
  /* Product images used to be display:none here, which left a phone with a
     coloured rectangle and some words - no idea what was being sold. They now
     sit in a row under the copy, still tappable, still running the search. */
  .wm-hero__slide {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "art";
    padding: 20px 20px 54px;
    height: auto; min-height: 210px;
    gap: 16px;
  }
  .wm-hero__slide > div:first-child { grid-area: copy; }
  .wm-hero__title { font-size: 25px; }
  .wm-hero__sub { -webkit-line-clamp: 2; }

  /* Feature and stack become one horizontal strip. */
  .wm-hero__feature,
  .wm-hero__art { grid-area: art; }
  .wm-hero__feature {
    max-width: 104px; height: 104px;
    justify-self: start;
  }
  .wm-hero__art {
    grid-template-rows: none;
    grid-template-columns: repeat(2, 104px);
    justify-self: start;
    width: auto; max-width: none; height: 104px;
    margin-left: 116px;
  }
  .wm-hero__dots { left: 20px; bottom: 16px; }
  .wm-hero__nav { bottom: 10px; right: 16px; }
}

@media (max-width: 460px) {
  .wm-hero__feature { max-width: 88px; height: 88px; }
  .wm-hero__art { grid-template-columns: repeat(2, 88px); height: 88px; margin-left: 98px; }
  .wm-hero__title { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   Scroll reveal + motion
   -------------------------------------------------------------------------- */
[data-wm-reveal] { opacity: 0; transform: translateY(14px); }
[data-wm-reveal].is-in { opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.wm-section { scroll-margin-top: 120px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-wm-reveal] { opacity: 1; transform: none; }
}

.wm-pucks { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.wm-puck { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.wm-puck:hover { text-decoration: none; }
.wm-puck__img {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  background: var(--wm-surface-3); display: flex; align-items: center; justify-content: center;
}
.wm-puck__img img { width: 100%; height: 100%; object-fit: cover; }
.wm-puck:hover .wm-puck__img { box-shadow: var(--wm-shadow-2); }
.wm-puck__name { font-size: 13px; font-weight: 600; color: var(--wm-ink); }

.wm-dealstrip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--wm-navy); color: #fff;
  border-radius: var(--wm-r-lg); padding: 18px 24px; margin-bottom: 16px;
}
.wm-dealstrip h2 { color: #fff; font-size: 22px; }
.wm-dealstrip p { font-size: 13px; opacity: .85; }
.wm-countdown { display: flex; gap: 8px; }
.wm-countdown span {
  background: rgba(255,255,255,.15); border-radius: var(--wm-r-sm);
  padding: 6px 10px; font-size: 18px; font-weight: 700;
  min-width: 44px; text-align: center;
}
.wm-countdown span small { display: block; font-size: 10px; font-weight: 400; opacity: .8; }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.wm-footer { background: var(--wm-surface-2); border-top: 1px solid var(--wm-line); margin-top: 48px; }
.wm-footer__inner { max-width: var(--wm-max); margin-left: auto; margin-right: auto; padding: 40px var(--wm-gutter); }
.wm-footer__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
@media (max-width: 1000px) { .wm-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .wm-footer__cols { grid-template-columns: 1fr; } }
.wm-footer h4 { font-size: 15px; font-weight: 700; color: var(--wm-navy); margin-bottom: 12px; }
.wm-footer li { margin-bottom: 8px; list-style: none; }
.wm-footer ul { list-style: none; margin: 0; padding: 0; }
.wm-footer a { font-size: 13px; color: var(--wm-ink-2); }
.wm-footer a:hover { color: var(--wm-blue); text-decoration: underline; }

.wm-footer__social { display: flex; gap: 12px; margin-top: 12px; }
.wm-footer__social a {
  width: 36px; height: 36px; border-radius: 50%; background: #fff;
  border: 1px solid var(--wm-line); display: inline-flex;
  align-items: center; justify-content: center; color: var(--wm-navy);
}
.wm-footer__social a:hover { background: var(--wm-blue); color: #fff; border-color: var(--wm-blue); }

.wm-footer__bar {
  border-top: 1px solid var(--wm-line); margin-top: 32px; padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  align-items: center; justify-content: center; text-align: center;
}
.wm-footer__bar a { font-size: 12px; color: var(--wm-ink-2); }
.wm-footer__copy { width: 100%; font-size: 12px; color: var(--wm-muted); margin-top: 12px; }

/* ==========================================================================
   10. SEARCH / CATEGORY  (filter rail + results)
   ========================================================================== */

.wm-results { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .wm-results { grid-template-columns: 1fr; } }

.wm-rail-filters, .srx-facets {
  background: #fff; border-radius: var(--wm-r-md);
  padding: 4px 0; font-size: 14px;
}
.wm-facet { border-bottom: 1px solid var(--wm-line); padding: 16px 0; }
.wm-facet:last-child { border-bottom: 0; }
.wm-facet__head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--wm-font); font-size: 15px; font-weight: 700; color: var(--wm-ink);
}
.wm-facet__body { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.wm-facet__body.is-collapsed { display: none; }
.wm-check { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
.wm-check input { width: 18px; height: 18px; accent-color: var(--wm-blue); flex: 0 0 auto; }
.wm-check__count { color: var(--wm-muted); font-size: 12px; }

.wm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.wm-chip, .filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--wm-r-pill) !important;
  background: var(--wm-sky-100) !important; color: var(--wm-navy) !important;
  font-size: 13px; font-weight: 600; border: 0 !important;
}
.wm-chip button { border: 0; background: none; cursor: pointer; color: inherit; }

.srx-toolbar, .products-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 12px 0 !important;
  border: 0 !important; border-bottom: 1px solid var(--wm-line) !important;
  margin-bottom: 16px;
}
.srx-result-count, .results-info { font-size: 20px; font-weight: 700; color: var(--wm-ink); }
.sort-options select, .srx-sort-tabs select {
  border-radius: var(--wm-r-pill) !important; border: 1px solid var(--wm-line-strong) !important;
  height: 40px; padding: 0 36px 0 16px; font-weight: 600; width: auto;
}

.wm-pager, .pagination, .srx-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin: 32px 0;
}
.wm-pager a, .wm-pager span,
.pagination-btn, .srx-page {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--wm-r-pill) !important; border: 1px solid var(--wm-line-strong) !important;
  font-size: 14px; font-weight: 600; color: var(--wm-ink) !important; background: #fff !important;
}
.wm-pager a:hover, .pagination-btn:hover { background: var(--wm-surface-3) !important; text-decoration: none; }
.wm-pager .is-current, .pagination-btn.current, .srx-page.current {
  background: var(--wm-blue) !important; border-color: var(--wm-blue) !important; color: #fff !important;
}

.wm-crumb, .breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; color: var(--wm-muted); padding: 12px 0;
}
.wm-crumb a, .breadcrumb a { color: var(--wm-ink-2); }
.wm-crumb a:hover, .breadcrumb a:hover { color: var(--wm-blue); text-decoration: underline; }


/* ---- Category / search results shell -------------------------------- */
.category-content {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 28px !important; align-items: start;
}
@media (max-width: 900px) { .category-content { grid-template-columns: 1fr !important; } }

/* the legacy filter rail scrolls inside a fixed box - let it flow instead */
.filters-sidebar, .category-filters, .filters, aside.filters {
  max-height: none !important; overflow: visible !important;
  background: #fff !important; border: 0 !important; padding: 0 !important;
  position: sticky; top: 16px;
}
.filters-sidebar h3, .filters h3 { font-size: 15px; font-weight: 700; }
.filter-section, .filter-group {
  border-bottom: 1px solid var(--wm-line); padding: 16px 0;
}
.filter-checkbox, .filter-option {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; padding: 4px 0; cursor: pointer;
}
.filter-checkbox input, .filter-option input { width: 18px; height: 18px; accent-color: var(--wm-blue); }

.category-header { padding: 8px 0 16px; }
.category-header h1 { font-size: 28px; }
.category-stats, .product-count { font-size: 14px; color: var(--wm-muted); }

.products-toolbar {
  background: #fff !important; border: 0 !important;
  border-bottom: 1px solid var(--wm-line) !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding: 10px 0 14px !important; margin-bottom: 16px !important;
}
.subcategories-section { margin: 8px 0 20px; }
.subcategories-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 10px !important;
}
.subcategories-grid a {
  display: block; padding: 12px 14px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--wm-line); border-radius: var(--wm-r-pill);
  text-align: center; background: #fff;
}
.subcategories-grid a:hover { background: var(--wm-sky-100); border-color: var(--wm-sky-200); text-decoration: none; }

/* search results rail */
.srx-layout {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 28px !important; align-items: start;
}
@media (max-width: 900px) { .srx-layout { grid-template-columns: 1fr !important; } }

/* ==========================================================================
   11. PRODUCT DETAIL PAGE
   ========================================================================== */

.wm-pdp { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
@media (max-width: 1000px) { .wm-pdp { grid-template-columns: 1fr; gap: 24px; } }

.wm-pdp__gallery { display: grid; grid-template-columns: 72px 1fr; gap: 16px; }
@media (max-width: 640px) { .wm-pdp__gallery { grid-template-columns: 1fr; } }
.wm-thumbs { display: flex; flex-direction: column; gap: 8px; }
.wm-thumb {
  width: 72px; height: 72px; border-radius: var(--wm-r-sm);
  border: 1px solid var(--wm-line); background: #fff; padding: 4px; cursor: pointer;
}
.wm-thumb.is-active { border-color: var(--wm-blue); box-shadow: 0 0 0 1px var(--wm-blue); }
.wm-thumb img { width: 100%; height: 100%; object-fit: contain; }
.wm-stage {
  background: #fff; border-radius: var(--wm-r-md);
  aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.wm-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }

.wm-buybox {
  position: sticky; top: 16px;
  border: 1px solid var(--wm-line); border-radius: var(--wm-r-md);
  padding: 20px; background: #fff;
}
.wm-buybox__price { font-size: 36px; font-weight: 700; letter-spacing: -.03em; }
.wm-buybox__was { font-size: 14px; color: var(--wm-muted); text-decoration: line-through; }
.wm-buybox__title { font-size: 20px; font-weight: 700; margin: 8px 0; line-height: 1.3; }
.wm-buybox__brand { font-size: 13px; color: var(--wm-blue); font-weight: 600; }

.wm-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.wm-swatch {
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--wm-r-sm);
  border: 1px solid var(--wm-line-strong); background: #fff; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: var(--wm-font);
  display: inline-flex; align-items: center; justify-content: center;
}
.wm-swatch.is-active { border: 2px solid var(--wm-blue); }
.wm-swatch--color { width: 44px; padding: 3px; }
.wm-swatch--color i { display: block; width: 100%; height: 100%; border-radius: var(--wm-r-xs); }
.wm-swatch[disabled] { opacity: .4; cursor: not-allowed; }

.wm-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--wm-line-strong); border-radius: var(--wm-r-pill);
  overflow: hidden; height: 44px;
}
.wm-qty button {
  width: 44px; height: 100%; border: 0; background: #fff; cursor: pointer;
  font-size: 20px; color: var(--wm-blue);
}
.wm-qty button:hover { background: var(--wm-surface-3); }
.wm-qty input {
  width: 48px; text-align: center; border: 0 !important; height: 100%;
  font-weight: 700; padding: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
}

.wm-fulfilcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.wm-fulfilcard {
  border: 1px solid var(--wm-line-strong); border-radius: var(--wm-r-md);
  padding: 12px 8px; text-align: center; cursor: pointer; background: #fff;
  font-family: var(--wm-font); position: relative;
}
.wm-fulfilcard.is-active { border: 2px solid var(--wm-blue); }
.wm-fulfilcard[disabled], .wm-fulfilcard.is-off { opacity: .5; cursor: not-allowed; background: var(--wm-surface-2); }
.wm-fulfilcard__icon { color: var(--wm-blue); margin-bottom: 4px; display: block; }
.wm-fulfilcard__name { font-size: 13px; font-weight: 700; display: block; }
.wm-fulfilcard__meta { font-size: 11px; color: var(--wm-muted); display: block; }
.wm-fulfilcard__price { font-size: 12px; font-weight: 700; color: var(--wm-save); display: block; }

.wm-accordion { border-top: 1px solid var(--wm-line); }
.wm-accordion__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--wm-font); font-size: 17px; font-weight: 700; color: var(--wm-ink);
}
.wm-accordion__body { padding-bottom: 18px; font-size: 14px; line-height: 1.6; color: var(--wm-ink-2); }
.wm-accordion__body.is-collapsed { display: none; }

.wm-specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.wm-specs th, .wm-specs td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--wm-line); vertical-align: top; }
.wm-specs th { width: 40%; font-weight: 700; color: var(--wm-ink); }
.wm-specs td { color: var(--wm-ink-2); }

.wm-reviews__summary { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: start; }
@media (max-width: 700px) { .wm-reviews__summary { grid-template-columns: 1fr; gap: 16px; } }
.wm-reviews__score { font-size: 48px; font-weight: 700; line-height: 1; }
.wm-histo { display: flex; flex-direction: column; gap: 6px; }
.wm-histo__row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.wm-histo__bar { flex: 1; height: 10px; background: var(--wm-surface-3); border-radius: var(--wm-r-pill); overflow: hidden; }
.wm-histo__fill { height: 100%; background: var(--wm-yellow); }
.wm-review { border-top: 1px solid var(--wm-line); padding: 20px 0; }
.wm-review__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.wm-review__author { font-size: 13px; font-weight: 700; }
.wm-review__verified { font-size: 12px; color: var(--wm-save); font-weight: 600; }


/* ---- PDP buy box ---------------------------------------------------- */
.wm-buyrow { display: flex; align-items: center; gap: 14px; margin: 16px 0; flex-wrap: wrap; }
.wm-buyrow__stock { font-size: 13px; color: var(--wm-save); font-weight: 600; }
.wm-buyactions { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.wm-buyactions__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .wm-buyactions__row { grid-template-columns: 1fr; } }
.wm-buyactions .wm-btn { width: 100%; }

/* the legacy PDP shell adopts the Walmart grid */
.product-container { max-width: var(--wm-max); margin-inline: auto; padding: 0 var(--wm-gutter); }
/* The legacy PDP emits gallery, product-info, purchase-panel as siblings.
   Grid placement puts the buy box in the right rail under the title/price,
   the way Walmart's PDP reads, without moving any markup. */
.product-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr) !important;
  grid-template-rows: auto 1fr;
  gap: 24px 40px !important; align-items: start;
}
.product-layout > .image-gallery  { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; }
.product-layout > .image-gallery > * { position: sticky; top: 16px; }
.product-layout > .product-info   { grid-column: 2; grid-row: 1; }
.product-layout > .purchase-panel { grid-column: 2; grid-row: 2; }
@media (max-width: 980px) {
  .product-layout { grid-template-columns: 1fr !important; grid-template-rows: none; gap: 20px !important; }
  .product-layout > .image-gallery  { grid-column: 1; grid-row: auto; position: static; }
  .product-layout > .product-info   { grid-column: 1; grid-row: auto; }
  .product-layout > .purchase-panel { grid-column: 1; grid-row: auto; }
}
.purchase-panel { min-width: 0; }

/* recommendation / sponsored cards inside the PDP */
.product-card-name {
  font-size: 13px !important; font-weight: 400 !important; text-align: left !important;
  color: var(--wm-ink) !important; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card-price {
  font-size: 17px !important; font-weight: 700 !important; text-align: left !important;
  color: var(--wm-ink) !important; margin-top: 4px;
}
.ai-recommended-products .products-grid { gap: 16px !important; }
.product-info .product-title { font-size: 22px !important; font-weight: 700 !important; line-height: 1.3; }
.image-gallery .main-image, .product-layout .main-image {
  background: #fff; border-radius: var(--wm-r-md); overflow: hidden;
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1;
}
.image-gallery .main-image img, .product-layout .main-image img {
  width: 100%; height: 100%; object-fit: contain;
}
.price-section .current-price { font-size: 34px !important; font-weight: 700 !important; letter-spacing: -.03em; }
.price-section .original-price { font-size: 15px !important; }
.price-section .discount { color: var(--wm-save) !important; font-weight: 700 !important; }
.condition-section, .seller-info, .stock-status {
  font-size: 13px; color: var(--wm-ink-2);
}
.description-section { max-width: 860px; margin: 32px auto 0; }
.description-section h2 { font-size: 22px; margin-bottom: 12px; }

/* ==========================================================================
   12. CART & CHECKOUT
   ========================================================================== */

.wm-checkout-grid, .checkout-grid {
  display: grid !important; grid-template-columns: 1fr 360px !important;
  gap: 24px !important; align-items: start;
}
@media (max-width: 1000px) { .wm-checkout-grid, .checkout-grid { grid-template-columns: 1fr !important; } }

.wm-panel, .checkout-section, .order-summary, .card {
  background: #fff !important;
  border: 1px solid var(--wm-line) !important;
  border-radius: var(--wm-r-md) !important;
  padding: 20px !important;
  box-shadow: none !important;
  margin-bottom: 16px;
}
.wm-panel__title, .section-header h2, .card-title {
  font-size: 18px !important; font-weight: 700 !important; margin-bottom: 12px !important;
}

.wm-line, .cart-item {
  display: grid !important; grid-template-columns: 96px 1fr auto;
  gap: 16px; padding: 16px 0 !important;
  border-bottom: 1px solid var(--wm-line) !important;
  align-items: start;
}
.wm-line__img, .cart-item .item-image {
  width: 96px; height: 96px; border-radius: var(--wm-r-sm);
  background: #fff; border: 1px solid var(--wm-line);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.wm-line__img img, .cart-item .item-image img { width: 100%; height: 100%; object-fit: contain; }
.wm-line__name { font-size: 14px; line-height: 1.35; margin-bottom: 4px; }
.wm-line__meta { font-size: 12px; color: var(--wm-muted); }
.wm-line__price { font-size: 18px; font-weight: 700; text-align: right; }

.wm-fgroup { border: 1px solid var(--wm-line); border-radius: var(--wm-r-md); margin-bottom: 16px; overflow: hidden; }
.wm-fgroup__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; background: var(--wm-sky-100);
  font-size: 14px; font-weight: 700; color: var(--wm-navy);
}
.wm-fgroup__head small { font-weight: 400; color: var(--wm-ink-2); }
.wm-fgroup__body { padding: 0 20px; }

.wm-summary__row, .summary-line {
  display: flex !important; align-items: center; justify-content: space-between;
  font-size: 14px; padding: 8px 0 !important; color: var(--wm-ink-2);
}
.wm-summary__row--total, .summary-line.total {
  border-top: 1px solid var(--wm-line); margin-top: 8px; padding-top: 14px !important;
  font-size: 20px !important; font-weight: 700 !important; color: var(--wm-ink) !important;
}
.wm-summary__save, .summary-line.discount, .free, .text-success { color: var(--wm-save) !important; font-weight: 600; }

.wm-progress { margin: 12px 0; }
.wm-progress__bar { height: 8px; background: var(--wm-surface-3); border-radius: var(--wm-r-pill); overflow: hidden; }
.wm-progress__fill { height: 100%; background: var(--wm-save); transition: width .3s ease; }
.wm-progress__text { font-size: 12px; color: var(--wm-ink-2); margin-top: 6px; }

.section-number, .wm-step {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--wm-blue) !important; color: #fff !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex: 0 0 auto;
}

/* ==========================================================================
   13. ALERTS / MISC
   ========================================================================== */

.wm-alert, .alert {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--wm-r-md) !important; padding: 14px 16px !important;
  font-size: 14px; border: 1px solid var(--wm-line) !important;
  background: var(--wm-surface-2) !important; color: var(--wm-ink) !important;
}
.alert-info, .wm-alert--info { background: var(--wm-sky-100) !important; border-color: var(--wm-sky-200) !important; }
.alert-success, .wm-alert--success { background: #eaf6ee !important; border-color: #bfe3cd !important; }
.alert-error, .alert-danger, .wm-alert--error { background: #fdecec !important; border-color: #f6c9c9 !important; }
.alert-warning, .wm-alert--warn { background: #fff6e0 !important; border-color: #ffe0a3 !important; }

.wm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: var(--wm-r-pill);
  background: var(--wm-surface-3); font-size: 12px; font-weight: 600;
}

.wm-divider { height: 1px; background: var(--wm-line); margin: 24px 0; border: 0; }

.wm-empty { text-align: center; padding: 64px 20px; }
.wm-empty__icon { font-size: 48px; color: var(--wm-line-strong); margin-bottom: 16px; }
.wm-empty h2 { margin-bottom: 8px; }
.wm-empty p { color: var(--wm-muted); margin-bottom: 20px; }

.wm-skel { background: linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
  background-size: 400% 100%; animation: wm-shimmer 1.4s ease infinite; border-radius: var(--wm-r-sm); }
@keyframes wm-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.wm-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(200%);
  background: var(--wm-navy); color: #fff; padding: 14px 20px;
  border-radius: var(--wm-r-pill); font-size: 14px; font-weight: 600;
  box-shadow: var(--wm-shadow-3); z-index: 3000; transition: transform .25s ease;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 40px);
}
.wm-toast.is-open { transform: translateX(-50%) translateY(0); }
.wm-spin { animation: wm-rotate .9s linear infinite; }
@keyframes wm-rotate { to { transform: rotate(360deg); } }

/* ==========================================================================
   14. RESPONSIVE HEADER / MOBILE TAB BAR
   ========================================================================== */

@media (max-width: 900px) {
  .wm-bar__inner { flex-wrap: wrap; min-height: 0; padding: 10px var(--wm-gutter); gap: 8px; }
  .wm-barbtn--dept span, .wm-barbtn--svc { display: none; }
  .wm-search { order: 3; flex-basis: 100%; }
  .wm-actions { margin-left: auto; }
  .wm-subnav__inner { height: auto; padding: 8px var(--wm-gutter); flex-wrap: wrap; gap: 8px; }
  .wm-flyout__inner { grid-template-columns: repeat(2, 1fr); }
}

.wm-tabbar { display: none; }
@media (max-width: 640px) {
  .wm-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: #fff; border-top: 1px solid var(--wm-line);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  }
  .wm-tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 10px; font-weight: 600; color: var(--wm-ink-2);
  }
  .wm-tabbar a.is-active { color: var(--wm-blue); }
  body { padding-bottom: 64px; }
}


/* ==========================================================================
   16. ACCOUNT / CHECKOUT / LIVE  - legacy shells adopt the Walmart language
   ========================================================================== */

/* --- account ---------------------------------------------------------- */
.account-container, .account-wrapper, .account-layout {
  max-width: var(--wm-max); margin-inline: auto; padding: 0 var(--wm-gutter);
}
.account-sidebar, .account-nav, .account-menu {
  background: #fff !important; border: 1px solid var(--wm-line) !important;
  border-radius: var(--wm-r-md) !important; padding: 8px !important;
  position: sticky; top: 16px;
}
.account-sidebar a, .account-nav a, .account-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--wm-r-pill);
  font-size: 14px; font-weight: 600; color: var(--wm-ink) !important;
}
.account-sidebar a:hover, .account-nav a:hover { background: var(--wm-surface-3); text-decoration: none; }
.account-sidebar a.active, .account-nav a.active, .account-menu a.active {
  background: var(--wm-sky-100) !important; color: var(--wm-blue) !important;
}
.account-content, .account-main, .account-panel, .settings-section {
  background: #fff; border: 1px solid var(--wm-line);
  border-radius: var(--wm-r-md); padding: 24px; margin-bottom: 16px;
}
.account-content h2, .settings-section h2 { font-size: 20px; margin-bottom: 14px; }

/* --- checkout --------------------------------------------------------- */
.checkout-container { max-width: var(--wm-max); margin-inline: auto; padding: 0 var(--wm-gutter); }
.checkout-section { position: relative; }
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.shipping-options { display: flex; flex-direction: column; gap: 10px; }
.shipping-option {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--wm-line-strong) !important; border-radius: var(--wm-r-md) !important;
  padding: 14px 16px !important; cursor: pointer; background: #fff !important;
}
.shipping-option.selected, .shipping-option:has(input:checked) {
  border: 2px solid var(--wm-blue) !important; background: var(--wm-sky-100) !important;
}
.shipping-name { font-weight: 700; font-size: 14px; }
.shipping-description, .shipping-delivery { font-size: 12px; color: var(--wm-muted); }
.shipping-price { margin-left: auto; font-weight: 700; }
.coupon-input-group { display: flex; gap: 8px; }
.coupon-input-group .form-control { flex: 1; }
.applied-coupon {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #eaf6ee; border: 1px solid #bfe3cd; border-radius: var(--wm-r-sm);
  padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--wm-save);
}
.order-summary-sidebar { position: sticky; top: 16px; }
.cart-item-preview {
  display: grid !important; grid-template-columns: 56px 1fr auto; gap: 12px;
  align-items: center; padding: 10px 0 !important; border-bottom: 1px solid var(--wm-line);
}
.cart-item-preview .item-image { width: 56px; height: 56px; border-radius: var(--wm-r-sm);
  border: 1px solid var(--wm-line); overflow: hidden; background: #fff; }
.cart-item-preview .item-name { font-size: 13px; line-height: 1.35; }
.cart-item-preview .item-quantity { font-size: 12px; color: var(--wm-muted); }
.cart-item-preview .item-price { font-weight: 700; font-size: 14px; }
.security-badge { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--wm-muted); }
.stripe-element {
  border: 1px solid var(--wm-line-strong); border-radius: var(--wm-r-sm);
  padding: 12px 14px; background: #fff;
}

/* --- live shopping ---------------------------------------------------- */
.live-container, .live-wrapper { max-width: var(--wm-max); margin-inline: auto; padding: 0 var(--wm-gutter); }
.live-grid, .streams-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}
.stream-card, .live-card {
  background: #fff; border: 1px solid var(--wm-line); border-radius: var(--wm-r-md);
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.stream-card:hover, .live-card:hover { transform: translateY(-3px); box-shadow: var(--wm-shadow-2); }
.stream-thumb, .live-thumb {
  position: relative; aspect-ratio: 16/9; background: var(--wm-surface-3); overflow: hidden;
}
.stream-thumb img, .live-thumb img { width: 100% !important; height: 100% !important; object-fit: cover; }
.live-badge, .stream-live-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--wm-danger); color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--wm-r-pill); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.live-badge::before, .stream-live-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: wm-pulse 1.4s ease-in-out infinite;
}
@keyframes wm-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.stream-body, .live-body { padding: 14px; }
.stream-title, .live-title { font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.stream-meta, .live-meta { font-size: 12px; color: var(--wm-muted); }

/* --- video player shell ----------------------------------------------- */
.video-player, .stream-player {
  background: #000; border-radius: var(--wm-r-md); overflow: hidden; aspect-ratio: 16/9;
}
.video-player video, .stream-player video, .video-player iframe, .stream-player iframe {
  width: 100% !important; height: 100% !important; display: block; border: 0;
}

/* ==========================================================================
   15. LEGACY OVERRIDES - neutralise leftover eBay chrome
   ========================================================================== */

.feza-top-header, .feza-main-header, .feza-nav-bar, .ebay-footer,
.mobile-nav-overlay { display: none !important; }
.feza-logo .f, .feza-logo .e, .feza-logo .z, .feza-logo .a { color: inherit !important; }

.feza-section { margin-bottom: 28px !important; }
.feza-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.feza-section-head h2 { font-size: 24px !important; font-weight: 700 !important; }
.feza-section-head .more { font-size: 14px; font-weight: 600; color: var(--wm-blue); }

.skiptranslate { display: none !important; }

@media print {
  .wm-header, .wm-footer, .wm-tabbar, .wm-toast { display: none !important; }
}

/* ==========================================================================
   17. RESPONSIVE HARDENING
   Every component the redesign introduces, checked down to a 320px viewport.
   ========================================================================== */

/* nothing may cause a horizontal scrollbar */
html, body { overflow-x: hidden; }
.wm-rail, .container, main, section { min-width: 0; }
img, svg, video, table { max-width: 100%; }

/* wide content scrolls inside its own box, never the page */
.wm-specs, .data-table, .orders-table { display: block; overflow-x: auto; }
.wm-panel > table { min-width: 0; }

@media (max-width: 1024px) {
  :root { --wm-gutter: 16px; }
  .wm-flyout__inner { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .wm-bar__inner { align-items: center; }
  .wm-fulfil--lead { order: 4; flex-basis: 100%; max-width: none; justify-content: flex-start; }
  .wm-fulfil--lead .wm-fulfil__label { display: flex; }
  .wm-fulfil__label span { max-width: none; }
  .wm-subnav__inner { overflow-x: auto; }
  .wm-pillbtn { flex: 0 0 auto; }
}

@media (max-width: 768px) {
  h1 { font-size: 26px; }
  h2, .wm-section__head h2 { font-size: 20px; }
  .wm-hero__title { font-size: 26px; }
  .wm-buybox__price, .price-section .current-price { font-size: 28px !important; }
  .wm-reviews__score { font-size: 38px; }

  /* cart / order lines stack instead of squeezing three columns */
  .wm-line, .cart-item {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    grid-template-areas: "img body" "price price";
    row-gap: 10px;
  }
  .wm-line__img, .cart-item .item-image { grid-area: img; width: 84px; height: 84px; }
  .wm-line__price { grid-area: price; text-align: left; }

  .wm-fgroup__body { padding: 0 14px; }
  .wm-fgroup__head { padding: 12px 14px; flex-wrap: wrap; }
  .wm-fgroup__head small { margin-left: 0 !important; flex-basis: 100%; }

  .wm-fulfilcards { grid-template-columns: 1fr; }
  .wm-fulfilcard { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; }
  .wm-fulfilcard__icon { margin-bottom: 0; }

  .wm-specs th, .wm-specs td { display: block; width: auto; padding: 6px 0; }
  .wm-specs th { border-bottom: 0; padding-top: 12px; }

  .wm-dealstrip { padding: 16px; }
  .wm-countdown span { min-width: 38px; font-size: 16px; padding: 5px 8px; }

  .wm-modal { padding: 0; align-items: flex-end; }
  .wm-modal__panel {
    max-width: none; border-radius: var(--wm-r-lg) var(--wm-r-lg) 0 0;
    max-height: 92vh; padding: 20px;
  }
}

@media (max-width: 640px) {
  .wm-tile--hero { min-height: 360px; }
  .wm-tile--hero .wm-tile__title { font-size: 24px; }
  .wm-tile__shots { margin: 12px 0 10px; }
  .wm-pucks { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
  .wm-puck__img { width: 68px; height: 68px; }
  .wm-puck__name { font-size: 12px; }
  .wm-shelf__track { grid-auto-columns: 156px; }
  .wm-section { margin-bottom: 20px; }
  .wm-footer__inner { padding: 28px var(--wm-gutter); }
  .wm-footer__bar { justify-content: flex-start; text-align: left; }
  .wm-btn--lg, .btn-lg { min-height: 46px; font-size: 15px; }
  .srx-result-count, .results-info { font-size: 17px; }
  .wm-crumb, .breadcrumb { font-size: 12px; }
}

@media (max-width: 420px) {
  .wm-grid--products, .feza-grid, .products-grid, .srx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important;
  }
  .wm-card { padding: 8px; }
  .wm-card__title { font-size: 13px !important; min-height: 34px; }
  .wm-price__now { font-size: 17px !important; }
  .wm-logo__img { height: 20px !important; }
  .wm-cart__total { display: none; }
  .wm-hero__slide { padding: 22px 18px; }
}

/* touch targets stay comfortable without breaking the icon buttons */
@media (pointer: coarse) {
  .wm-navlinks a, .wm-menu a, .wm-drawer__body a { min-height: 44px; }
  .wm-card__heart { width: 36px; height: 36px; }
}

/* ==========================================================================
   18. LIVE STUDIO
   ========================================================================== */

.wm-studio {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px; align-items: start;
}
@media (max-width: 1000px) { .wm-studio { grid-template-columns: 1fr; } }

.wm-studio__stage {
  position: relative; background: #000; border-radius: var(--wm-r-md);
  overflow: hidden; aspect-ratio: 16 / 9;
}
.wm-studio__video { width: 100% !important; height: 100% !important; object-fit: contain; display: block; }

.wm-studio__overlay {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; z-index: 2;
}
.wm-studio__pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.62); color: #fff; backdrop-filter: blur(4px);
  border-radius: var(--wm-r-pill); padding: 6px 12px;
  font-size: 12px; font-weight: 700;
}
.wm-studio__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wm-muted); }
.wm-studio__pill[data-state="live"] { background: var(--wm-danger); }
.wm-studio__pill[data-state="live"] .wm-studio__dot { background: #fff; animation: wm-pulse 1.3s ease-in-out infinite; }
.wm-studio__pill[data-state="reconnecting"] { background: var(--wm-warn); }
.wm-studio__pill[data-state="reconnecting"] .wm-studio__dot { background: #fff; animation: wm-pulse .7s ease-in-out infinite; }
.wm-studio__pill[data-state="preview"] .wm-studio__dot { background: var(--wm-save); }

.wm-studio__nosignal {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: #fff; background: linear-gradient(160deg, #041e42, #0a2c5c);
  text-align: center; padding: 24px;
}
.wm-studio__nosignal p { font-size: 14px; opacity: .85; }

.wm-studio__controls {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px;
}
@media (max-width: 560px) { .wm-studio__controls .wm-btn { flex: 1 1 calc(50% - 5px); } }

.wm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 0; }
.wm-stats div { min-width: 0; }
.wm-stats dt { font-size: 11px; color: var(--wm-muted); text-transform: uppercase; letter-spacing: .03em; }
.wm-stats dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; }

.wm-log {
  max-height: 220px; overflow-y: auto; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  display: flex; flex-direction: column; gap: 4px;
}
.wm-log__row { padding: 5px 8px; border-radius: 6px; background: var(--wm-surface-2); color: var(--wm-ink-2); }
.wm-log__row span { color: var(--wm-muted); }
.wm-log__row--ok    { background: #eaf6ee; color: #0a5d33; }
.wm-log__row--warn  { background: #fff6e0; color: #7a4a00; }
.wm-log__row--error { background: #fdecec; color: #96161c; }

/* ---- viewer player ---------------------------------------------------- */
.wm-live { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .wm-live { grid-template-columns: 1fr; } }
.wm-live__stage { position: relative; background: #000; border-radius: var(--wm-r-md); overflow: hidden; aspect-ratio: 16/9; }
.wm-live__video { width: 100% !important; height: 100% !important; object-fit: contain; display: block; }
.wm-live__badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; z-index: 2; }
.wm-live__status {
  position: absolute; inset: 0; z-index: 3; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: #fff; background: rgba(4,30,66,.86); text-align: center; padding: 24px;
}
.wm-live__status.is-on { display: flex; }
.wm-live__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
}
.wm-live__bar button {
  background: rgba(255,255,255,.16); color: #fff; border: 0; cursor: pointer;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.wm-live__bar button:hover { background: rgba(255,255,255,.3); }
.wm-live__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: #fff;
}
.wm-live__live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--wm-danger); }
.wm-live__live.is-behind::before { background: var(--wm-muted); }

/* live.php shipped a red gradient banner with unreadable dark text - bring it
   into the Walmart language and make the copy legible. */
.live-header {
  background: var(--wm-navy) !important;
  border-radius: var(--wm-r-lg) !important;
  padding: 28px 32px !important;
  margin-bottom: 24px !important;
  color: #fff !important;
}
.live-header h1 { color: #fff !important; font-size: 30px !important; }
.live-header p  { color: rgba(255,255,255,.9) !important; font-size: 15px !important; }
.live-now-section .section-header,
.live-header + .live-now-section .section-header { margin-bottom: 12px; }
.live-count {
  background: var(--wm-danger) !important; color: #fff !important;
  border-radius: var(--wm-r-pill) !important; padding: 6px 14px !important;
  font-size: 12px !important; font-weight: 700 !important;
}
.live-streams-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 16px !important;
}
.live-video-player { border-radius: var(--wm-r-md); overflow: hidden; }

/* ==========================================================================
   19. MOBILE LAYOUT CORRECTIONS
   css/styles.css:2483 sets `body { padding-top: 110px }` under 576px to clear
   the *old* fixed eBay header. This header is static, so that rule leaves a
   110px empty band above the page. The header itself also stacked into three
   rows (289px tall on a 412px phone); it is compacted here to two.
   ========================================================================== */

@media (max-width: 900px) {
  body { padding-top: 0 !important; }

  /* --- row 1: burger + logo + account/cart on one 56px line --- */
  .wm-bar__inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "burger logo actions" "search search search";
    align-items: center;
    gap: 8px 10px;
    padding: 8px var(--wm-gutter) 10px;
    min-height: 0;
  }
  .wm-barbtn--burger { grid-area: burger; }
  .wm-logo          { grid-area: logo; height: 40px; justify-self: start; }
  .wm-actions       { grid-area: actions; gap: 0; }
  .wm-search        { grid-area: search; max-width: none; }

  /* the fulfilment pill moves to the sub-nav so it does not add a third row */
  .wm-fulfil--lead {
    grid-area: auto; order: 0;
    height: 34px !important; flex: 0 0 auto; width: auto; max-width: 62vw;
    padding: 0 12px !important; font-size: 12px;
    background: var(--wm-sky-100) !important; color: var(--wm-ink) !important;
  }
  .wm-fulfil--lead .wm-fulfil__icon { color: var(--wm-blue); }
  .wm-fulfil--lead .wm-fulfil__label { display: flex; }
  .wm-fulfil--lead .wm-fulfil__label span { font-size: 12px; max-width: 46vw; }
  .wm-fulfil--lead .wm-fulfil__label small { display: none; }

  .wm-search__form { height: 44px; padding-left: 16px; }
  .wm-search__submit { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; }
  .wm-search__lens   { width: 34px !important; height: 34px !important; flex: 0 0 34px !important;
                       margin-right: 2px; }
  .wm-search__lens::before { top: 8px; bottom: 8px; }
  .wm-action  { height: 44px; padding: 0 8px !important; }
  .wm-cart    { height: 44px; min-width: 44px; padding: 0 6px !important; }

  /* --- row 2: one scrolling line, never a stacked wall of links --- */
  .wm-subnav__inner {
    height: auto; flex-wrap: nowrap !important;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px var(--wm-gutter);
    gap: 8px;
    scroll-padding-left: var(--wm-gutter);
  }
  .wm-subnav__inner::-webkit-scrollbar { display: none; }
  .wm-navlinks {
    flex-wrap: nowrap !important; overflow: visible;
    gap: 6px; flex: 0 0 auto;
  }
  .wm-navlinks a {
    flex: 0 0 auto; height: 32px; padding: 0 12px;
    font-size: 13px; background: var(--wm-surface-3);
  }
  .wm-navlinks a.is-active { background: var(--wm-sky-100); }
  .wm-pillbtn { height: 32px; padding: 0 14px; font-size: 13px; }

  /* fades hint that the row scrolls */
  .wm-subnav { position: relative; }
  .wm-subnav::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 28px;
    background: linear-gradient(to right, rgba(242,246,253,0), #f2f6fd);
    pointer-events: none;
  }
}

@media (max-width: 576px) {
  body { padding-top: 0 !important; }
  .wm-logo__img { height: 22px !important; }
  .wm-action__text { display: none; }
  .wm-cart__total { font-size: 11px; }
  /* styles.css forces a single product column under 576px; Walmart shows two */
  .products-grid, .feza-grid, .srx-grid, .wm-grid--products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important; padding: 0 !important;
  }
  .product-image { height: auto !important; }
}

/* ==========================================================================
   20. TABS  (admin screens written against the Bootstrap pill markup)
   Bootstrap's CSS is not loaded either, so panes need their own show/hide.
   ========================================================================== */
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }

.nav-pills, .nav-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none;
  padding: 0; margin: 0 0 18px; border-bottom: 1px solid var(--wm-line);
}
.nav-pills .nav-item, .nav-tabs .nav-item { list-style: none; }
.nav-pills .nav-link, .nav-tabs .nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: var(--wm-r-pill) var(--wm-r-pill) 0 0;
  font-size: 14px; font-weight: 600; color: var(--wm-ink-2);
  text-decoration: none; cursor: pointer; border: 0; background: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.nav-pills .nav-link:hover, .nav-tabs .nav-link:hover {
  color: var(--wm-blue); background: var(--wm-surface-3); text-decoration: none;
}
.nav-pills .nav-link.active, .nav-tabs .nav-link.active {
  color: var(--wm-blue); border-bottom-color: var(--wm-blue); background: transparent;
}
.nav-pills .badge, .nav-tabs .badge {
  background: var(--wm-surface-3); color: var(--wm-ink-2);
  border-radius: var(--wm-r-pill); padding: 2px 8px; font-size: 11px; font-weight: 700;
}
.nav-pills .nav-link.active .badge { background: var(--wm-sky-100); color: var(--wm-blue); }

/* ---- item condition -------------------------------------------------- */
.wm-cond { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; }
.wm-cond__blurb { display: block; font-size: 12px; color: var(--wm-muted); margin-top: 4px; }
.wm-condlist { display: flex; flex-direction: column; gap: 8px; }
.wm-condlist label {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--wm-line-strong); border-radius: var(--wm-r-md); cursor: pointer;
}
.wm-condlist label:has(input:checked) { border: 2px solid var(--wm-blue); background: var(--wm-sky-100); }
.wm-condlist strong { display: block; font-size: 13px; }
.wm-condlist span { font-size: 12px; color: var(--wm-muted); }

/* ============================================================ 20. Delivery
   Replaces the old pickup/delivery chooser on the product page. This shop
   ships every order, so the block states the window, the charge and the
   origin rather than asking the shopper to choose a fulfilment method. */
.wm-delivery {
  border: 1px solid var(--wm-line, #e4e7ec);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0;
  background: #fff;
  display: grid;
  gap: 8px;
}
.wm-delivery__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
}
.wm-delivery__row svg { flex: none; margin-top: 2px; color: var(--wm-blue, #0071dc); }
.wm-delivery__muted { color: var(--wm-muted, #667085); font-size: 13px; }
.wm-delivery__muted svg { color: var(--wm-muted, #667085); }

/* Spec table: long supplier sheets are collapsed behind a toggle. */
.wm-specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.wm-specs th,
.wm-specs td { padding: 10px 12px; border-bottom: 1px solid #f1f3f5; vertical-align: top; text-align: left; }
.wm-specs th { width: 40%; max-width: 260px; font-weight: 600; color: var(--wm-muted, #667085); }
.wm-specs td { color: var(--wm-ink, #14161a); overflow-wrap: anywhere; }
.wm-specs tr:last-child th,
.wm-specs tr:last-child td { border-bottom: 0; }

@media (max-width: 640px) {
  .wm-specs th, .wm-specs td { display: block; width: auto; max-width: none; padding: 6px 0; }
  .wm-specs th { border-bottom: 0; padding-bottom: 0; font-size: 12.5px; }
  .wm-specs td { padding-top: 2px; border-bottom: 1px solid #f1f3f5; }
  .wm-delivery { padding: 12px 14px; }
}

/* The delivery-area pill in the header. The old copy (How do you want your

/* The delivery-area pill in the header. The old copy overflowed its white
   plate on phones and spilled onto the blue bar, showing "how do you wan",
   so the label is now short and the pill clips its own text. */
.wm-fulfil-note {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wm-muted, #667085);
}
.wm-header .wm-fulfil,
.wm-header [data-wm-fulfil] {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.wm-header .wm-fulfil__label,
.wm-header [data-wm-fulfil] span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
@media (max-width: 640px) {
  .wm-header .wm-fulfil,
  .wm-header [data-wm-fulfil] {
    background: #fff;
    border-radius: 100px;
    padding: 6px 12px;
    max-width: calc(100vw - 32px);
  }
}

/* ==========================================================================
   21. MOBILE HEADER  (phones)
   The top bar carried a burger, logo, wishlist, account and cart. On a 390px
   screen that squeezed the logo into a sliver and left dead space at the far
   left. My Items and Cart already sit in the bottom tab bar, so they are
   dropped from the top and the space goes to a bigger, centred logo.
   ========================================================================== */
@media (max-width: 900px) {
  .wm-bar__inner {
    /* Equal side columns are what actually centres the logo: the burger and
       the account button occupy the same width, so the middle column is
       symmetric about the viewport. */
    grid-template-columns: 44px 1fr 44px !important;
    padding-left: 2px !important;
    padding-right: 6px !important;
    gap: 8px 4px !important;
  }

  /* Burger tight against the edge - it was floating with a gutter of dead space. */
  .wm-barbtn--burger {
    justify-self: start;
    width: 44px; height: 44px;
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .wm-logo {
    grid-area: logo;
    justify-self: center !important;
    display: flex; align-items: center; justify-content: center;
    height: 44px; width: 100%; min-width: 0;
  }
  .wm-logo__img {
    height: 34px !important;          /* was 22px */
    max-width: 100%;
    object-fit: contain;
  }

  /* Only the account icon stays on the right. My Items and Cart are one tap
     away in the bottom tab bar, so duplicating them here only stole width. */
  .wm-actions {
    grid-area: actions;
    justify-self: end;
    gap: 0 !important;
  }
  .wm-actions > .wm-action[href*="reorder"],
  .wm-actions > a.wm-cart {
    display: none !important;
  }
  .wm-actions__menu .wm-action {
    width: 44px; height: 44px;
    padding: 0 !important;
    justify-content: center;
  }
  .wm-actions__menu .wm-action__text { display: none !important; }
}

@media (max-width: 576px) {
  .wm-logo__img { height: 32px !important; }
}

/* Very narrow phones: keep the logo readable rather than letting it shrink. */
@media (max-width: 360px) {
  .wm-bar__inner { grid-template-columns: 40px 1fr 40px !important; }
  .wm-logo__img { height: 28px !important; }
}

/* Protection plans: collapsed accordion. Expanded by default they occupied a
   third of the first screen on a phone before the shopper had seen the specs. */
.wm-protect { padding: 0 !important; overflow: hidden; }
.wm-protect__head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 14px 16px; font: inherit; min-height: 0;
}
.wm-protect__title { font-size: 15px; font-weight: 600; flex: 1; }
.wm-protect__meta { font-size: 12.5px; color: var(--wm-muted, #667085); }
.wm-protect__chev { display: inline-flex; transition: transform .18s ease; color: var(--wm-muted, #667085); }
.wm-protect.is-open .wm-protect__chev { transform: rotate(180deg); }
.wm-protect__body { padding: 0 16px 16px; }
.wm-protect__head:hover { background: rgba(0,0,0,.02); }

/* ==========================================================================
   22. BEST SELLER BADGE
   Amazon's badge, which shoppers already recognise: crimson plate, white bold
   text, square-ish corners and a small tail on the trailing edge. The previous
   badge was pale blue and read as just another chip.
   ========================================================================== */
.wm-flag--best {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #cc0c39 !important;      /* Amazon best-seller crimson */
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1;
  letter-spacing: .01em;
  padding: 5px 9px 5px 8px !important;
  border-radius: 3px 0 0 3px !important;
  text-transform: none !important;
  margin: 0 10px 6px 0;
}
/* The tail: a notched flag end, as on Amazon's listing badge. */
.wm-flag--best::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: 10px;
  background: #cc0c39;
  clip-path: polygon(0 0, 100% 0, 45% 50%, 100% 100%, 0 100%);
}
.wm-flag--best:dir(rtl) { border-radius: 0 3px 3px 0 !important; }

@media (max-width: 576px) {
  .wm-flag--best { font-size: 11px !important; padding: 4px 7px !important; }
  .wm-flag--best::after { width: 8px; }
}

/* ==========================================================================
   23. WIDE PROMO TILE  (the Feza+ membership card on the homepage)
   It spans two columns but stacked its copy above a 2x2 photo grid, so it grew
   to roughly twice the height of the tiles beside it and left a tall empty
   column of navy on the right. Walmart lays this card out horizontally: copy on
   one side, a single row of product shots on the other. Same here.
   ========================================================================== */
.wm-tile--wide {
  flex-direction: row;
  align-items: center;
  gap: 24px;
  min-height: 264px;              /* matches the tiles either side of it */
}
.wm-tile--wide .wm-tile__copy {
  flex: 1 1 46%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wm-tile--wide .wm-tile__sub { max-width: 34ch; }

/* One row of shots, sized to the tile rather than the other way round. */
.wm-tile--wide .wm-tile__shots,
.wm-tile--wide .wm-tile__shots--quad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 1 1 54%;
  margin: 0;
  align-self: center;
  gap: 10px;
}
.wm-tile--wide .wm-tile__shot { aspect-ratio: 1 / 1; }

/* The call to action sits under the copy, not stranded at the card foot. */
.wm-tile--wide .wm-tile__cta {
  margin-top: 12px;
  align-self: flex-start;
}

@media (max-width: 1100px) {
  .wm-tile--wide .wm-tile__shots,
  .wm-tile--wide .wm-tile__shots--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* On a phone the mosaic is one column, so the card stacks again - but with a
   short two-across strip of shots instead of a tall 2x2 block. */
@media (max-width: 900px) {
  .wm-tile--wide {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    min-height: 0;
  }
  .wm-tile--wide .wm-tile__copy { flex: 0 0 auto; }
  .wm-tile--wide .wm-tile__shots,
  .wm-tile--wide .wm-tile__shots--quad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 0 0 auto;
    gap: 8px;
  }
  .wm-tile--wide .wm-tile__sub { max-width: none; }
}

/* ==========================================================================
   24. SHARE PANEL  (Walmart-style)
   Hands the shopper a clean canonical link plus the channels people use, with
   a one-tap copy. Product URLs carry an fmAsset attribution blob, so the panel
   shares a canonical URL rather than whatever is in the address bar.
   ========================================================================== */
.wm-sharebtn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--wm-line, #e4e7ec);
  border-radius: 100px; padding: 7px 14px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--wm-ink, #14161a); cursor: pointer; min-height: 0;
}
.wm-sharebtn:hover { background: var(--wm-surface-2, #f6f7f9); }
.wm-sharebtn svg { flex: none; }

.wm-sharewrap { position: fixed; inset: 0; z-index: 4000; display: flex;
                align-items: center; justify-content: center; padding: 16px; }
.wm-sharewrap[hidden] { display: none !important; }
.wm-sharewrap__scrim { position: absolute; inset: 0; background: rgba(16,24,40,.55); }

.wm-sharepanel {
  position: relative; background: #fff; border-radius: 16px;
  width: min(440px, 100%); padding: 20px; box-shadow: 0 24px 56px rgba(16,24,40,.28);
}
.wm-sharepanel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wm-sharepanel__head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.wm-sharepanel__x { border: 0; background: none; font-size: 26px; line-height: 1;
                    cursor: pointer; color: var(--wm-muted, #667085); min-height: 0; padding: 0 4px; }

.wm-sharelink { display: flex; gap: 8px; margin-bottom: 16px; }
.wm-sharelink input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px;
  border: 1px solid #cfd4dc; border-radius: 10px; padding: 10px 12px;
  background: var(--wm-surface-2, #f6f7f9); color: var(--wm-ink, #14161a);
}
.wm-sharelink .wm-btn { flex: 0 0 auto; white-space: nowrap; }

.wm-sharegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wm-sharegrid__item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px; border: 1px solid var(--wm-line, #e4e7ec); border-radius: 12px;
  font-size: 12.5px; font-weight: 600; color: var(--wm-ink, #14161a); text-decoration: none;
}
.wm-sharegrid__item:hover { background: var(--wm-surface-2, #f6f7f9); text-decoration: none; }
.wm-sharegrid__dot { width: 34px; height: 34px; border-radius: 50%; display: block; }

@media (max-width: 480px) {
  .wm-sharewrap { align-items: flex-end; padding: 0; }
  .wm-sharepanel { width: 100%; border-radius: 16px 16px 0 0; }
  .wm-sharegrid { grid-template-columns: repeat(3, 1fr); }
}

/* Title and share sit on one line; the share button never squeezes the title. */
.product-title-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.product-title-row .product-title { flex: 1 1 260px; min-width: 0; margin-bottom: 0; }
.product-title-row .wm-sharebtn { flex: 0 0 auto; margin-top: 2px; }
@media (max-width: 640px) { .product-title-row .wm-sharebtn span { display: none; } }

/* ==========================================================================
   25. SEARCH FACETS
   Built from the products that match, so the options are relevant and the
   counts are true. Replaces a fixed list of phone specs that was never
   applied to the query.
   ========================================================================== */
.wm-facets { font-size: 14px; }
.wm-facets__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.wm-facets__head h2 { font-size: 16px; font-weight: 700; margin: 0; }
.wm-facets__clear { font-size: 12.5px; color: var(--wm-blue, #0071dc); text-decoration: underline; }

.wm-facet { border-top: 1px solid var(--wm-line, #e4e7ec); padding: 14px 0; }
.wm-facet:first-of-type { border-top: 0; }
.wm-facet h3 { font-size: 13.5px; font-weight: 700; margin: 0 0 8px; }

.wm-facet__row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; margin: 0 -8px; border-radius: 8px;
  color: var(--wm-ink, #14161a); text-decoration: none; font-size: 13.5px;
}
.wm-facet__row:hover { background: var(--wm-surface-2, #f6f7f9); text-decoration: none; }
.wm-facet__row.is-on { background: var(--wm-sky-100, #eff6ff); font-weight: 600; }
.wm-facet__row.is-on::before { content: '\2713'; margin-right: 6px; color: var(--wm-blue, #0071dc); }
.wm-facet__row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-facet__row em { font-style: normal; color: var(--wm-muted, #667085); font-size: 12px; flex: none; }

.wm-facet__price { display: flex; align-items: center; gap: 6px; }
.wm-facet__price input {
  width: 100%; min-width: 0; font: inherit; font-size: 13px;
  border: 1px solid #cfd4dc; border-radius: 8px; padding: 7px 8px;
}
.wm-facet__price span { color: var(--wm-muted, #667085); font-size: 12.5px; }
.wm-facet__price button {
  flex: none; font: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid var(--wm-blue, #0071dc); background: var(--wm-blue, #0071dc);
  color: #fff; border-radius: 8px; padding: 7px 12px; cursor: pointer; min-height: 0;
}

/* --------------------------------------------------------------------------
   Filters on a phone: a drawer, not a column.

   The sidebar is first in the source, so on a narrow screen a shopper who
   searched for "kettle" used to get a screenful of refinements before a single
   kettle. Amazon, eBay and Walmart all do the same thing instead - results
   first, a Filter control above them - so that is the pattern here: the panel
   slides in from the right over the results, and closing it puts you straight
   back where you were.

   Every control inside reloads the page, so the footer button is a way BACK to
   the results rather than a submit.
   -------------------------------------------------------------------------- */
.wm-facets__open,
.wm-facets__close,
.wm-facets__foot,
.wm-facets__scrim { display: none; }

@media (max-width: 900px) {
  .wm-facets {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(88vw, 380px);
    z-index: 2100; background: #fff;
    border: 0; border-radius: 0;
    padding: 14px 16px 92px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(101%);
    transition: transform .22s ease;
    box-shadow: -8px 0 28px rgba(0, 0, 0, .18);
  }
  .wm-facets.is-open { transform: none; }

  .wm-facets__scrim {
    display: block; position: fixed; inset: 0;
    background: rgba(0, 0, 0, .45); z-index: 2050;
  }
  .wm-facets__scrim[hidden] { display: none; }

  .wm-facets__head {
    position: sticky; top: 0; z-index: 1;
    background: #fff; padding-bottom: 10px;
  }
  .wm-facets__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; min-height: 0; padding: 0;
    margin-left: auto; border: 0; background: none;
    font-size: 26px; line-height: 1; color: var(--wm-ink); cursor: pointer;
  }

  .wm-facets__open {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; min-height: 0; padding: 0 14px;
    border: 1px solid var(--wm-line, #d7dbe0); border-radius: 100px;
    background: #fff; color: var(--wm-ink);
    font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  }
  .wm-facets__count {
    display: inline-block; min-width: 18px; padding: 0 5px;
    background: var(--wm-blue, #0071dc); color: #fff; border-radius: 100px;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  }

  .wm-facets__foot {
    display: block; position: fixed; right: 0; bottom: 0;
    width: min(88vw, 380px);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--wm-line, #e4e7ec);
    z-index: 2110;
  }
  .wm-facets__foot[data-open="0"] { display: none; }

  /* The drawer scrolls; the page behind it does not. */
  body.wm-facets-open { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   Delivery-area picker fields
   -------------------------------------------------------------------------- */
.wm-fulfil-field { display: block; margin-top: 14px; }
.wm-fulfil-field > span {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--wm-ink);
}
.wm-fulfil-field small { font-weight: 400; color: var(--wm-muted, #667085); }
.wm-fulfil-input {
  width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid var(--wm-line, #d7dbe0); border-radius: 8px;
  font: inherit; font-size: 14px; background: #fff; color: var(--wm-ink);
}
.wm-fulfil-input:focus { outline: 2px solid var(--wm-blue, #0071dc); outline-offset: 1px; }

/* --------------------------------------------------------------------------
   FezaMarket Live promo (home page)

   Shows the real state of the channel - who is on air, their thumbnail and
   viewer count - because a promo for live shopping that shows nothing live is
   just a paragraph about live shopping.
   -------------------------------------------------------------------------- */
.wm-live-promo__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 28px; align-items: center;
  background: linear-gradient(135deg, #041e42 0%, #0b3f86 55%, #0071dc 100%);
  border-radius: var(--wm-r-lg, 16px);
  padding: 28px 30px;
  color: #fff;
}
.wm-live-promo__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: #ffc220;
}
.wm-live-promo__dot {
  width: 9px; height: 9px; border-radius: 50%; background: #ff4d4f;
  box-shadow: 0 0 0 0 rgba(255, 77, 79, .7); animation: wmLivePulse 1.6s infinite;
}
@keyframes wmLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 77, 79, .7); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 77, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0); }
}
.wm-live-promo__title {
  margin: 10px 0 8px; font-size: 30px; line-height: 1.15; font-weight: 800; color: #fff;
}
.wm-live-promo__sub { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.86); max-width: 46ch; }
.wm-live-promo__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wm-live-promo__actions .wm-btn--secondary {
  background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.65) !important;
}
.wm-live-promo__actions .wm-btn--secondary:hover { background: rgba(255,255,255,.12) !important; }
.wm-live-promo__sell { color: #ffc220; font-size: 14px; font-weight: 600; text-decoration: none; }
.wm-live-promo__sell:hover { text-decoration: underline; }

.wm-live-promo__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wm-live-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: #fff; }
.wm-live-card__shot {
  position: relative; display: block; aspect-ratio: 4 / 5;
  border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.12);
}
.wm-live-card__shot img { width: 100%; height: 100%; object-fit: cover; }
.wm-live-card:hover .wm-live-card__shot { outline: 2px solid #ffc220; outline-offset: 2px; }
.wm-live-card__pill {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.66); color: #fff; border-radius: 4px;
  padding: 2px 7px; font-size: 10px; font-weight: 800; letter-spacing: .6px;
}
.wm-live-card__pill.is-live { background: #ff4d4f; }
.wm-live-card__count {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(0,0,0,.6); color: #fff; border-radius: 100px;
  padding: 2px 8px; font-size: 11px; font-weight: 600;
}
.wm-live-card__title {
  font-size: 13px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wm-live-card__by { font-size: 12px; color: rgba(255,255,255,.7); }

@media (max-width: 900px) {
  .wm-live-promo__inner { grid-template-columns: 1fr; padding: 22px 18px; gap: 20px; }
  .wm-live-promo__title { font-size: 24px; }
  .wm-live-promo__rail  { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 520px) {
  .wm-live-promo__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-live-promo__rail .wm-live-card:nth-child(3) { display: none; }
}

/* The first-visit country prompt. No close button and no dismiss-on-backdrop:
   the answer decides the currency AND the shipping price, so there is nothing
   sensible to fall back to if it is skipped. */
.wm-modal--blocking { background: rgba(4, 30, 66, .72); }
.wm-modal--blocking .wm-modal__panel { max-width: 440px; }
.wm-modal--blocking .wm-modal__head { margin-bottom: 8px; }
.wm-gate-note {
  margin: 12px 0 0; padding: 10px 12px;
  background: var(--wm-sky-100, #e8f2fd); border-radius: 8px;
  font-size: 13px; line-height: 1.5; color: var(--wm-ink);
}

/* "Not in the United States? Choose your country" on a product page. */
.wm-delivery__country {
  border: 0; background: none; padding: 0; min-height: 0;
  font: inherit; font-size: 13px; color: var(--wm-blue, #0071dc);
  text-decoration: underline; cursor: pointer; text-align: left;
}

/* Unread badge on the Messages entry in the account menu. */
.wm-menu__count {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px;
  background: #d92d20; color: #fff; border-radius: 100px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* ==========================================================================
   24. <picture> PASS-THROUGH
   Product images are wrapped in <picture> so the browser (not a Vary header
   Cloudflare's free plan ignores) chooses WebP vs original. That wrapper became
   the layout child of every image frame, and since <picture> is inline by
   default it collapsed - the <img> inside sized to nothing instead of filling
   its frame, which shrank the membership tile shots and the card media.
   Make the wrapper fill its frame so the existing "img { width:100%;height:100% }"
   rules keep working unchanged.
   ========================================================================== */
.wm-card__media picture,
.wm-tile__shot picture,
.wm-hero__art picture,
.wm-hero__feature picture,
.wm-hero__tile picture,
.feza-card .feza-card-img picture,
.product-card .product-image picture,
.srx-card .srx-card-img picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   25. FULFILMENT PILL ON PHONES
   The pill sat under the search bar as a bare icon in a small rounded square
   with a run of empty blue to its right - it read as a stray button rather than
   "tell us where to deliver". Let the light rounded background wrap the icon AND
   the label so the whole thing is one tappable pill that says what it does.
   ========================================================================== */
@media (max-width: 900px) {
  .wm-fulfil--lead {
    display: inline-flex !important;
    width: auto !important;
    max-width: calc(100vw - 2 * var(--wm-gutter)) !important;
    height: 36px !important;
    padding: 0 16px 0 12px !important;
    gap: 8px !important;
    border-radius: var(--wm-r-pill) !important;
    background: #fff !important;
    color: var(--wm-ink) !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.10);
  }
  .wm-fulfil--lead .wm-fulfil__icon { color: var(--wm-blue) !important; flex: 0 0 auto; }
  .wm-fulfil--lead .wm-fulfil__label { display: flex !important; min-width: 0; }
  .wm-fulfil--lead .wm-fulfil__label span {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    max-width: none !important;      /* the pill's own max-width does the limiting */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--wm-ink);
  }
  .wm-fulfil--lead .wm-fulfil__label small { display: none !important; }
  .wm-fulfil--lead > .wm-i { flex: 0 0 auto; opacity: .55; }
}

/* ==========================================================================
   26. WIDE MEMBERSHIP TILE - FULL-BLEED ART PANEL
   The card spans two columns but its four product shots were small squares
   floating mid-card, leaving a wide run of empty navy on the right. The copy,
   the shots and the call to action were three flex siblings in a row, so the
   CTA claimed the right-hand third and the art could never reach the edge.
   Lay it out as a two-column grid instead - copy and CTA stacked on the left,
   art spanning both rows on the right and bleeding to the card edge, the way
   Walmart fills this banner.
   ========================================================================== */
.wm-tile--wide {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  grid-template-rows: 1fr auto;
  align-items: start;
  gap: 0 24px;
  padding-right: 0;
  overflow: hidden;
}
.wm-tile--wide .wm-tile__copy {
  grid-column: 1; grid-row: 1;
  align-self: center;
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.wm-tile--wide .wm-tile__sub { max-width: 34ch; }
.wm-tile--wide .wm-tile__cta {
  grid-column: 1; grid-row: 2;
  align-self: start; justify-self: start;
  margin: 12px 0 0;
}
.wm-tile--wide .wm-tile__shots,
.wm-tile--wide .wm-tile__shots--quad {
  grid-column: 2; grid-row: 1 / span 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin: -20px 0;                 /* bleed past the card padding, top and bottom */
  height: calc(100% + 40px);
  min-height: 0;
}
.wm-tile--wide .wm-tile__shot {
  aspect-ratio: auto;              /* the grid row owns the height now */
  border-radius: 0;
  background: rgba(255, 255, 255, .96);
  min-height: 0;
}
.wm-tile--wide .wm-tile__shot img { padding: 14px; }
.wm-tile--wide .wm-tile__shots--single {
  grid-template-columns: 1fr; grid-template-rows: 1fr;
}

@media (max-width: 900px) {
  .wm-tile--wide {
    display: flex; flex-direction: column;
    padding-right: 20px;
  }
  .wm-tile--wide .wm-tile__shots,
  .wm-tile--wide .wm-tile__shots--quad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto;
    margin: 14px 0 12px;
    height: auto;
    gap: 8px;
  }
  .wm-tile--wide .wm-tile__shot { aspect-ratio: 1 / 1; border-radius: 12px; }
  .wm-tile--wide .wm-tile__shot img { padding: 8px; }
}

/* The title inherited a muted colour on the navy variants and read as grey on
   navy - barely legible. State it. */
.wm-tile--b .wm-tile__title,
.wm-tile--n .wm-tile__title { color: #fff; }
.wm-tile--b .wm-tile__cta,
.wm-tile--n .wm-tile__cta   { color: #fff; }