/* ============================================================
   everythingreps — MOBILE app shell (WordPress / GeneratePress)
   Recreates the mobile prototype: top app bar, bottom tab bar,
   category drawer, product cards. Activates on phones (≤768px);
   on desktop the mobile chrome is hidden and the desktop header
   (theme.css) takes over.

   Adapted from mobile/mobile.css — the fake phone frame, charcoal
   stage and faux status bar are intentionally dropped (a real
   device provides those).
   ============================================================ */

/* Mobile chrome is hidden by default (desktop). Shown inside the phone query. */
.appbar[data-er-appbar],
.tabbar[data-er-tabbar],
#er-drawer,
[data-er-drawer-scrim] { display: none; }

@media (max-width: 768px) {

  /* ---- mobile-only token layer ---- */
  :root {
    --surface: 220 30% 99.5%;
    --surface-muted: 220 18% 95%;
    --line: 219 18% 86%;
    --muted-fg: 217 16% 45%;
    --card: 0 0% 100%;
    --green: 152 58% 38%;
    --wa: 142 70% 42%;
    --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-full: 999px;
    --sh-card: 0 10px 30px -18px hsl(222 39% 13% / 0.22);
    --sh-pop: 0 24px 60px -24px hsl(222 39% 13% / 0.34);
    --sh-bar: 0 -6px 24px -12px hsl(222 39% 13% / 0.16);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-expo: cubic-bezier(0.16, 1, 0.30, 1);
    --fast: 180ms; --base: 260ms; --slow: 380ms;
    --font-d: "Roboto", system-ui, sans-serif;
    --font-s: "Roboto", system-ui, sans-serif;
    --appbar-h: 60px;
    --tabbar-h: 76px;
  }

  /* hide the desktop chrome on phones */
  .topbar, .hdr, .overlay, .mnav { display: none !important; }

  /* page padding for the fixed app bar (bottom tab bar removed) */
  .site { padding-top: calc(var(--appbar-h) + env(safe-area-inset-top, 0px)); padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  body { background: hsl(var(--paper)); }

  /* ---- top app bar ---- */
  .appbar[data-er-appbar] {
    position: fixed; top: 0; left: 0; right: 0; z-index: 95;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: calc(var(--appbar-h) + env(safe-area-inset-top, 0px));
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 14px 12px;
    background: hsl(var(--paper) / 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid hsl(var(--line) / 0.6);
  }
  .appbar__left { display: flex; align-items: center; gap: 4px; min-width: 46px; flex: none; }
  .appbar__logolink { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 3px)); }
  .appbar .appbar__logo { height: 36px !important; width: auto !important; max-width: 170px; object-fit: contain; pointer-events: none; }
  .appbar__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
  .appbar .iconbtn { width: 46px; height: 46px; flex: none; }
  /* flex:none + explicit dims — keep the bar icons from collapsing to a dot as
     shrinking flex children (the site's recurring inline-SVG width-0 trap). */
  .appbar .iconbtn svg { width: 27px; height: 27px; flex: none; }

  .iconbtn { width: 42px; height: 42px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; color: hsl(var(--ink)); position: relative; background: none; border: none; transition: background var(--fast) var(--ease); }
  .iconbtn:active { background: hsl(var(--ink) / 0.07); }
  .iconbtn svg { width: 22px; height: 22px; }
  .iconbtn__badge { position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-full); background: hsl(var(--ink)); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid hsl(var(--paper)); }
  .iconbtn__badge[hidden] { display: none; }

  /* ---- bottom tab bar ---- */
  .tabbar[data-er-tabbar] {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    height: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom, 0px));
    padding: 8px 14px calc(22px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: stretch; gap: 2px;
    background: hsl(var(--surface) / 0.9); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
    border-top: 1px solid hsl(var(--line) / 0.7); box-shadow: var(--sh-bar);
  }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: hsl(var(--muted-fg)); position: relative; background: none; border: none; text-decoration: none; transition: color var(--fast) var(--ease); }
  .tab svg { width: 24px; height: 24px; }
  .tab span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; }
  .tab.is-active { color: hsl(var(--ink)); }
  .tab__badge { position: absolute; top: -2px; right: 50%; margin-right: -22px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-full); background: hsl(var(--ink)); color: #fff; font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid hsl(var(--surface)); }
  .tab__badge[hidden] { display: none; }

  /* ---- category drawer ---- */
  .sheet-scrim[data-er-drawer-scrim] { display: block; position: fixed; inset: 0; z-index: 100; background: hsl(222 39% 8% / 0); opacity: 0; pointer-events: none; transition: opacity var(--base) var(--ease); }
  .sheet-scrim[data-er-drawer-scrim].is-open { background: hsl(222 39% 8% / 0.5); opacity: 1; pointer-events: auto; }
  #er-drawer { display: flex; position: fixed; top: 0; bottom: 0; left: 0; z-index: 101; width: 86%; max-width: 340px; background: hsl(var(--surface)); flex-direction: column; transform: translateX(-102%); transition: transform var(--slow) var(--ease-expo); box-shadow: var(--sh-pop); }
  #er-drawer.is-open { transform: translateX(0); }
  /* Keep the drawer (logo + close X) below the WP admin bar when logged in —
     the admin bar's z-index sits above the drawer and would otherwise cover them. */
  body.admin-bar #er-drawer { top: 46px; }
  .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + 20px) 18px 14px; flex: none; border-bottom: 1px solid hsl(var(--line) / 0.6); }
  .sheet__close { width: 34px; height: 34px; border-radius: var(--r-full); background: hsl(var(--ink) / 0.06); display: flex; align-items: center; justify-content: center; color: hsl(var(--ink)); border: none; }
  .sheet__close svg { width: 18px !important; height: 18px !important; max-width: none !important; flex: none !important; }
  .drawer__body { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 8px 0 24px; }
  .drawer__body::-webkit-scrollbar { display: none; }
  .drawer__row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; font-family: var(--font-d); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: hsl(var(--ink)); text-align: left; text-decoration: none; background: none; border: none; }
  .drawer__row--flat { border-bottom: 1px solid hsl(var(--line) / 0.5); }
  .drawer__acc { border-bottom: 1px solid hsl(var(--line) / 0.5); }
  .drawer__plus { transition: transform var(--base) var(--ease); color: hsl(var(--muted-fg)); }
  .drawer__row.is-open .drawer__plus { transform: rotate(45deg); }
  .drawer__panel { overflow: hidden; transition: max-height var(--slow) var(--ease-expo); }
  .drawer__chips { display: flex; flex-direction: column; gap: 0; padding: 0 20px 12px; }
  .drawer__group { padding-top: 2px; }
  .drawer__group h6 { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--muted-fg)); margin: 4px 0 0; padding: 0 20px; }
  .drawer__quick { display: flex; flex-direction: column; gap: 2px; padding: 18px 8px 0; }
  .drawer__quick a { display: flex; align-items: center; gap: 12px; padding: 14px 12px; font-weight: 600; font-size: 15px; color: hsl(var(--ink)); border-radius: var(--r-sm); white-space: nowrap; text-decoration: none; }
  .drawer__quick a svg { flex: none; }
  .drawer__quick a:active { background: hsl(var(--ink) / 0.05); }
  /* Submenu items render as a clean list (no pills) — see _preview-drawer-chips.html option C. */
  .chip { display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 2px; border: 0; border-bottom: 1px solid hsl(var(--line) / 0.55); border-radius: 0; background: none; color: hsl(var(--ink)); font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: color var(--fast) var(--ease); }
  .chip:first-child { font-weight: 700; }
  .chip:last-child { border-bottom: 0; }
  .chip:active { color: hsl(var(--muted-fg)); }
  /* Nested submenu levels (a sub-menu's sub-menu). Direct children stay at the
     base indent; grandchildren and deeper are indented + muted beneath their
     parent so no menu level is ever hidden on phones. Depth set via data-depth.
     A child that itself has children becomes a [+] toggle (button.chip--parent)
     opening its own nested panel, collapsed by default. */
  button.chip { text-align: left; cursor: pointer; font-family: var(--font-d); letter-spacing: -0.01em; }
  .drawer__sub { display: flex; flex-direction: column; }
  .chip--sub { padding-left: 18px; font-weight: 500; color: hsl(var(--muted-fg)); white-space: normal; }
  .chip--parent { justify-content: space-between; font-weight: 700; color: hsl(var(--ink)); }
  .chip__plus { flex: none; margin-left: 8px; color: hsl(var(--muted-fg)); transition: transform var(--base) var(--ease); }
  .chip--parent.is-open .chip__plus { transform: rotate(45deg); }
  .chip[data-depth="3"] { padding-left: 34px; }
  .chip[data-depth="4"] { padding-left: 50px; }
  .chip[data-depth="5"] { padding-left: 66px; }

  /* ---- section heads + layout helpers (mobile sizing) ---- */
  .wrap, .er-shell { padding: 0 18px; }
  .section { padding: 26px 0; }
  .shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 18px; margin-bottom: 14px; }
  .shead__eye { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: hsl(var(--muted-fg)); margin: 0 0 5px; }
  .shead h2 { font-family: var(--font-d); font-weight: 800; font-size: 23px; line-height: 1; letter-spacing: -0.04em; color: hsl(var(--ink)); margin: 0; }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; padding: 0 18px; }

  /* ---- mobile buttons ---- */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 22px; border-radius: var(--r-md); font-family: var(--font-s); font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; border: 1.5px solid transparent; transition: transform var(--fast) var(--ease), background var(--fast) var(--ease); white-space: nowrap; }
  .btn:active { transform: scale(0.97); }
  .btn--lg { height: 58px; font-size: 16.5px; }

  /* ====== WooCommerce → mobile product cards (pcard look) ====== */
  .woocommerce ul.products,
  ul.products { grid-template-columns: 1fr 1fr !important; gap: 13px; padding: 0; }
  ul.products li.product { padding: 0 !important; border: 1px solid hsl(var(--line) / 0.5) !important; border-radius: var(--r-lg) !important; overflow: hidden; box-shadow: var(--sh-card) !important; display: flex; flex-direction: column; }
  ul.products li.product:hover { transform: none; }
  ul.products li.product a.woocommerce-LoopProduct-link,
  ul.products li.product a.woocommerce-loop-product__link { display: flex; flex-direction: column; }
  ul.products li.product img { margin: 0 !important; border-radius: 0 !important; aspect-ratio: 1 / 1; object-fit: cover; background: hsl(var(--surface-muted)); }
  ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-d); font-weight: 700; font-size: 15px; line-height: 1.15; letter-spacing: -0.02em; padding: 11px 13px 0 !important; margin: 0; }
  ul.products li.product .price { padding: 4px 13px 0 !important; font-family: var(--font-d); font-weight: 800; font-size: 17px; letter-spacing: -0.03em; }
  ul.products li.product .star-rating { margin: 6px 13px 0; }
  ul.products li.product .button,
  ul.products li.product .added_to_cart { margin: 12px 13px 14px !important; width: calc(100% - 26px); }
  .onsale { top: 10px; left: 10px; }

  /* single product stacks; cart/account inherit theme.css + woocommerce.css */
  .single-product div.product { grid-template-columns: 1fr; gap: 22px; }
  .single-product div.product .product_title { font-size: 1.9rem; }
}

/* small phones */
@media (max-width: 380px) {
  .grid2 { gap: 10px; }
}

/* ============================================================
   MOBILE HOME — match the everythingreps mobile mockup
   (hero with overlaid app bar + USA horizontal rail)
   ============================================================ */
@media (max-width: 768px) {
  /* safety: never let anything (e.g. the WP admin bar on small screens) widen
     the document and create a side gutter */
  html, body { overflow-x: hidden; max-width: 100%; }
  /* Root-cause fix for the side-gutter / horizontal overflow: the theme has no
     global border-box reset, so `.wrap { width:100%; padding:0 18px }` was
     computing to 100% + 36px = 36px wider than the phone (previously only
     masked by overflow-x:hidden, and it pushed the USA "All" link off-screen).
     Make the content rails border-box on phones so width:100% includes padding. */
  .wrap, .er-shell { box-sizing: border-box; }
  .appbar[data-er-appbar], .tabbar[data-er-tabbar] { width: 100vw; max-width: 100vw; box-sizing: border-box; }

  /* --- app bar overlays the hero on the homepage, solid once scrolled --- */
  body.home .appbar[data-er-appbar] { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; transition: background var(--base) var(--ease), border-color var(--base) var(--ease); }
  body.home .appbar[data-er-appbar] .iconbtn { color: #fff; }
  body.home .appbar[data-er-appbar] .appbar__logo { filter: brightness(0) invert(1); }
  body.home .appbar[data-er-appbar].is-scrolled { background: hsl(var(--paper) / 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: hsl(var(--line) / 0.6); }
  body.home .appbar[data-er-appbar].is-scrolled .iconbtn { color: hsl(var(--ink)); }
  body.home .appbar[data-er-appbar].is-scrolled .appbar__logo { filter: none; }

  /* homepage sits under the (overlaid) app bar — remove the top padding */
  body.home .site { padding-top: 0; }

  /* The mobile mockup home goes straight from the hero into the USA-stock
     product band — the desktop trust strip + Trustpilot "Excellent" bar are
     NOT part of it, so hide them on phones. (Trustpilot returns later as the
     green band that sits AFTER the USA stock grid in the mockup.) */
  /* Mobile home = the mockup's lean set. Hide the desktop-only sections;
     the rest are reordered below to the mockup sequence. */
  body.home .trust,
  body.home .tp-bar,
  body.home .section--reviews,
  body.home #why,
  body.home .about,
  body.home #newsletter { display: none; }

  /* section order on phones: Hero · USA · Trustpilot(green) · Best sellers · QC · New arrivals */
  body.home #main { display: flex; flex-direction: column; }
  body.home #main > .hero        { order: 1; }
  body.home #main > #usa-stock   { order: 2; }
  body.home #main > #tp-mobile   { order: 3; }
  body.home #main > #best-sellers{ order: 4; }
  body.home #main > #qc          { order: 5; }
  body.home #main > #new-arrivals{ order: 6; }

  /* New-arrivals is a mobile-only section (hidden on desktop via .er-mobile-only) */
  .er-mobile-only { display: block; }

  /* ============ Trustpilot review carousel — green band (mockup heroI flow) ============ */
  .tpsec { background: #00b67a; padding: 32px 0 34px; }
  .tpwrap { display: flex; flex-direction: column; gap: 11px; }
  .tpwidget { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 18px; }
  .tpw__row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; }
  .tpw__row--single { flex-wrap: nowrap; gap: 10px; }
  .tpw__row--single .tpw__score { font-size: 13px; }
  .tpw__score { font-size: 12.5px; color: hsl(var(--muted-fg)); white-space: nowrap; }
  .tpw__score b { color: hsl(var(--ink)); font-weight: 700; }
  .tprate { position: relative; display: inline-flex; line-height: 0; }
  .tprate__row { display: inline-flex; gap: 3px; }
  .tpsq { width: 19px; height: 19px; border-radius: 3px; display: flex; align-items: center; justify-content: center; flex: none; }
  .tpsq svg { width: 64%; height: 64%; }
  .tprate__green { position: absolute; top: 0; left: 0; overflow: hidden; }
  .tpcarousel { display: flex; align-items: center; gap: 9px; padding: 0 14px; }
  .tparrow { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 99px; border: 1px solid hsl(var(--line) / 0.7); background: hsl(var(--card)); color: hsl(var(--ink)); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-card); transition: transform var(--fast) var(--ease); cursor: pointer; }
  .tparrow:active { transform: scale(0.9); }
  .tparrow svg { width: 18px !important; height: 18px !important; max-width: none !important; flex: none !important; }
  .tpslide { flex: 1 1 auto; min-width: 0; box-sizing: border-box; background: hsl(var(--card)); border: 1px solid hsl(var(--line) / 0.6); border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: 16px 18px; display: flex; flex-direction: column; }
  .tpslide--single { min-height: 178px; }
  .tpslide__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
  .tpslide__stars { display: inline-flex; gap: 3px; }
  .tpslide__date { font-size: 12px; font-weight: 600; color: hsl(var(--muted-fg)); }
  .tpslide__q { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; color: hsl(var(--ink)); margin-bottom: 6px; }
  .tpslide__t { font-size: 13px; line-height: 1.5; color: hsl(var(--muted-fg)); margin: 0 0 12px; }
  .tpslide__who { font-size: 12.5px; font-weight: 700; color: hsl(var(--ink)); margin-top: auto; }
  .tpdots { display: flex; justify-content: center; gap: 6px; margin-top: 3px; }
  .tpdot { width: 6px; height: 6px; padding: 0; border: none; border-radius: 99px; background: hsl(var(--line)); transition: width var(--fast) var(--ease), background var(--fast) var(--ease); cursor: pointer; }
  .tpdot.is-on { width: 17px; background: hsl(var(--ink)); }
  .tpw__readbtn { align-self: center; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 12px 22px; border: none; border-radius: 99px; font-family: var(--font-display); font-size: 14px; font-weight: 700; background: #fff; color: #00854f; box-shadow: 0 4px 14px rgba(0,0,0,0.12); cursor: pointer; text-decoration: none; transition: transform var(--fast) var(--ease); }
  .tpw__readbtn:active { transform: scale(0.96); }
  .tpw__readbtn svg { width: 15px; height: 15px; }
  /* green-band: header stars + score go white; review card stays white */
  .tpwrap--green .tpw__score, .tpwrap--green .tpw__score b { color: #fff; }
  .tpwrap--green .tparrow { background: hsl(0 0% 100% / 0.92); border-color: transparent; color: #0d0f14; }
  .tpwrap--green .tpdot { background: hsl(0 0% 100% / 0.45); }
  .tpwrap--green .tpdot.is-on { background: #fff; }

  /* --- hero: IMMERSIVE cover (mirrors the mobile mockup's heroI) ---
     ONE full-bleed image block (aspect 5/6.7) with the copy OVERLAID at the
     bottom over a legibility scrim — NOT a separate solid dark panel. The
     transparent app bar sits over the top of the same image. --- */
  .hero { position: relative; min-height: 0; height: auto; display: block; background: #ffc2e8; aspect-ratio: 5 / 6.7; overflow: hidden; }
  .hero__bg { position: absolute; inset: 0; top: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: contain; object-position: center 24%; transform: scale(1.5); transform-origin: center 30%; }
  .hero__mega, .hero__shoe { display: none; }
  /* dark at the very top (white app-bar icons), clear over the shoe, dark again
     at the bottom (copy legibility) — same stops as the mockup scrim. */
  .hero__scrim { display: block; position: absolute; inset: 0; top: 0; left: 0; right: 0; height: 100%; z-index: 1; background: linear-gradient(180deg, hsl(222 45% 6% / 0.5) 0%, hsl(222 45% 6% / 0.1) 17%, hsl(222 45% 6% / 0) 36%, hsl(222 45% 6% / 0.18) 58%, hsl(222 45% 6% / 0.92) 100%); }
  .hero__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: block; padding: 22px 20px 24px; }
  .hero__top { display: block; text-align: left; padding: 0; }
  .hero__kicker { margin: 0 0 9px; position: static; font-size: 11px; letter-spacing: 0.18em; }
  .hero h1 { font-size: 33px; line-height: 0.98; letter-spacing: -0.045em; margin: 0 0 14px; max-width: none; text-align: left; }
  .hero__foot { display: block; padding: 0; margin-top: 0; }
  .hero__sub { display: none; }
  .hero__right { display: block; align-items: stretch; width: 100%; }
  .hero .rating-line { font-size: 0.92rem; margin-bottom: 16px; }
  .hero__cta { display: flex; flex-direction: column; width: 100%; gap: 10px; }
  /* flex:none — keep the CTA from collapsing as a shrinking flex item (the
     site's recurring flex-shrink trap; without it the button renders ~17px). */
  .hero__cta .btn { flex: none; width: 100%; height: 58px; font-size: 1.02rem; }
  .hero__cta .btn--outline { display: none; } /* mockup hero shows a single primary action */
  .hero .btn--light { background: #fff; color: hsl(var(--ink)); }

  /* --- USA stock: match the mobile mockup ("Ships from the US") ---
     Light band, NO giant "USA" watermark, NO red hairline, NO bullet row,
     a compact "All ›" head link, and a TWO-COLUMN product grid (not a rail).
     The cards drop the desktop add-to-cart + "in stock · ships" line so the
     foot reads price + rating like the mockup. --- */
  .usa-dark { overflow: visible; }
  .usa-dark .usa-dark__mega { display: none; }            /* giant watermark */
  .usa-dark .sec-head h2::after { display: none; }        /* red hairline */
  .usa-dark .usa-bullets { display: none; }               /* truck/clock/shield row */
  .usa-head { position: relative; display: block; margin-bottom: 16px; }
  .usa-head .sec-head { padding-right: 52px; }
  .usa-head .sec-head h2 { font-size: 26px; line-height: 1.02; letter-spacing: -0.04em; }
  .usa-head .sec-head p { font-size: 13.5px; line-height: 1.5; margin-top: 8px; padding-right: 0; }
  .usa-head .sec-head p.eyebrow { font-size: 11px; margin-bottom: 8px; padding-right: 0; }
  .usa-eye-d { display: none; }   /* mockup eyebrow: "In stock · United States" */
  /* compact "All ›" link pinned top-right (the desktop "Shop all USA stock" pill) */
  .usa-head__cta { position: absolute; top: 2px; right: 0; flex: none; border: none; background: none; padding: 0; height: auto; min-height: 0; font-size: 14px; font-weight: 700; color: hsl(var(--ink)); gap: 3px; }
  .usa-head__cta svg { width: 15px; height: 15px; }

  /* ---- product grids: 2-up on phones across ALL sections (mockup) ---- */
  .prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 0; padding: 0; overflow: visible; }
  .prod-grid > .prod { flex: none; max-width: none; width: auto; }
  .prod__media { aspect-ratio: 1 / 1; }
  .prod__body { padding: 13px 13px 14px; gap: 3px; }
  /* full product name on phones — mirror the mockup .pcard__name (no 2-line
     clamp, which was cutting long WooCommerce titles in category archives). */
  .prod__name { font-size: 15px; line-height: 1.15; display: block; -webkit-line-clamp: unset; line-clamp: unset; -webkit-box-orient: initial; overflow: visible; }
  .prod__brand { font-size: 10px; }
  /* keep Add to cart, but stack the foot so it fits a narrow 2-up card:
     price on top, full-width button below */
  /* margin-top:auto pins the price+Add-to-cart block to the card bottom so
     buttons line up across a row even when one card has a reviews line and its
     neighbour doesn't (that mismatch was pushing one button lower). */
  .prod__foot { flex-direction: column; align-items: stretch; gap: 9px; margin-top: auto; }
  .prod__foot .prod__price { font-size: 17px; }
  .prod__foot .add-btn { width: 100%; justify-content: center; height: 42px; }

  .usa-dark .prod__media { aspect-ratio: 1 / 1; }
  /* green "US STOCK" pill (desktop badge is dark) */
  .usa-dark .prod__tag--usa { background: hsl(140 62% 40%); color: #fff; }
  /* USA cards drop the "in stock · ships" line (mockup) but keep Add to cart */
  .usa-dark .prod .usa-ship { display: none; }
  /* mockup copy on phones: "Ships from the US" + "All" */
  .usa-h2-d, .usa-sub-d, .usa-cta-d { display: none; }
  .usa-h2-m, .usa-cta-m { display: inline; }
  .usa-sub-m { display: block; }

  /* ---- section-head row + "All" link for best sellers / new arrivals ---- */
  .sec-head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .sec-head__link { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 700; color: hsl(var(--ink)); margin-top: 4px; }
  .sec-head__link svg { width: 15px; height: 15px; }

  /* ---- QC submissions: even 2-up grid on phones (mockup) ---- */
  .qc-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 13px; }
  .qc-card { min-width: 0; padding: 10px; gap: 9px; }
  .qc-card__shot { aspect-ratio: 1 / 1; }
  .qc-card__prod { font-size: 12.5px; line-height: 1.2; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .qc-card__order { font-size: 11px; }

  /* ---- hero decorative N1KE wordmark behind the headline (mockup) ---- */
  .hero__nike { position: absolute; left: 8px; bottom: 132px; z-index: 2; font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 78px; line-height: 1; letter-spacing: -0.04em; color: hsl(0 78% 48% / 0.5); transform: skewX(-8deg); pointer-events: none; user-select: none; white-space: nowrap; }
}

/* ============================================================
   Cart + Checkout — guarantee side gutters on phones.
   The shared .er-shell.wrap gutter (18px) was being lost on these two
   templates in some deployed environments, so the line items, dividers
   and summary card ran flush to both screen edges. Pin the gutter
   deterministically: zero the outer rail and move a fixed 18px onto the
   inner .er-woo, so the inset is ALWAYS exactly 18px whatever an ancestor
   (GeneratePress container / cache) does to the wrap padding.
   ============================================================ */
@media (max-width: 768px) {
  /* 1) Clamp the whole cart/checkout container chain to the viewport width so
     NOTHING (an oversized ancestor, a stray wide element, a stale rule, a
     builder/cache plugin) can make the block wider than the phone and shift the
     centered content so both edges clip off-screen. */
  .woocommerce-cart #page, .woocommerce-checkout #page,
  .woocommerce-cart .site-content, .woocommerce-checkout .site-content,
  .woocommerce-cart .content-area, .woocommerce-checkout .content-area,
  .woocommerce-cart #primary, .woocommerce-checkout #primary,
  .woocommerce-cart .inside-article, .woocommerce-checkout .inside-article,
  .woocommerce-cart .entry-content, .woocommerce-checkout .entry-content,
  .woocommerce-cart .er-shell.wrap, .woocommerce-checkout .er-shell.wrap,
  .woocommerce-cart .er-woo, .woocommerce-checkout .er-woo {
    max-width: 100% !important; overflow-x: clip;
  }
  /* 2) Deterministic side gutter: zero the shared outer rail and pin a fixed
     18px on the inner .er-woo, so the inset is ALWAYS exactly 18px regardless of
     what an ancestor does to the wrap padding. Never doubles, never disappears. */
  .woocommerce-cart .er-shell.wrap,
  .woocommerce-checkout .er-shell.wrap { padding-left: 0 !important; padding-right: 0 !important; }
  .woocommerce-cart .er-woo,
  .woocommerce-checkout .er-woo { padding-left: 18px !important; padding-right: 18px !important; box-sizing: border-box; }
  /* 3) Keep grid/flex children from forcing a track wider than the phone
     (a long product name or size chip with default min-width:auto would push
     the row wider than its column → horizontal overflow). */
  .woocommerce-cart .cart-wrap, .woocommerce-cart .cart-wrap > *,
  .woocommerce-cart .crow, .woocommerce-cart .crow__main, .woocommerce-cart .crow__right,
  .woocommerce-checkout .co-wrap, .woocommerce-checkout .co-wrap > *,
  .woocommerce-checkout .co-main { min-width: 0; }
  .woocommerce-cart .crow__name, .woocommerce-cart .crow__name a,
  .woocommerce-cart .size-chip { overflow-wrap: anywhere; }
}