/* ==========================================================================
   mobile.css — the 390 breakpoint, measured off the Mobile frames.

   Loaded last so it wins without !important games. Everything here is inside
   @media (max-width: 900px) except the mobile-only chrome, which is hidden
   above that width.

   MEASURED  Web/Header Device=Mobile 390x145
       promo-strip 29 (pad 6/12, #f8f8f8, 13px)
       bar 60 (pad 12, gap 12) — menu 36x36 r6 #00805f, logo, 2 actions 24 g14
       search-row 56 (pad 0/12/12/12) — field 366x44 r8, button 44x36 r6
     Web/Subpage Hero Mobile 390x128, pad 16, gap 10 — title 26, crumbs 14
     Content Mobile pad 26/16/40/16, gap 24 → gutter 16, width 358
     Web/Callout Card Mobile pad 28/22, gap 14
     Web/Footer Mobile pad 28/16/20/16 gap 20 — brand stacked, newsletter
       Layout=Stacked, Location Group 172 wide (two per row), legal wraps
     Layout/Mobile Dock 390x75 pad 8/8/10/8 — item 75, icon 23, label 11
   ========================================================================== */

/* mobile-only chrome is hidden on desktop */
.wmbar, .wmsearch, .mdock, .mtopbar { display: none; }

@media (max-width: 900px) {

/* ---- storefront header --------------------------------------------------- */
.wtop__contact { display: none; }              /* Call Us / Email Us go to the drawer */
.wtop { padding: 6px 12px; }
.wtop__strip .wtop__msg, .wtop__strip { font-size: 13px; }
.wmain, .wnav { display: none; }               /* main row + nav bar replaced */

.wmbar { display: flex; align-items: center; gap: 12px; height: 60px;
         padding: 12px; background: #fff; }
.wmbar__menu { width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: 6px;
               background: #00805f; color: #fff; cursor: pointer;
               display: inline-grid; place-items: center; }
.wmbar__logo { display: inline-flex; flex: 1 1 auto; }
.wmbar__logo img { height: 34px; width: auto; }
.wmbar__acts { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.wmbar__acts a { position: relative; display: inline-grid; place-items: center; }
.wmbar__acts svg { fill: #364153; }

.wmsearch { display: block; padding: 0 12px 12px; background: #fff; }
.wmsearch__f { display: flex; align-items: center; height: 44px; border-radius: 8px;
               background: #fff; box-shadow: inset 0 0 0 1px #e5e7eb; padding-left: 16px; }
.wmsearch__f input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none;
                     font: 400 13px/1.3 Inter, sans-serif; color: #101828; }
.wmsearch__f input::placeholder { color: #656772; }
.wmsearch__f button { width: 44px; height: 36px; margin-right: 4px; flex: 0 0 44px;
                      border: 0; border-radius: 6px; background: #00805f; color: #fff;
                      cursor: pointer; display: inline-grid; place-items: center; }

/* ---- drawer — `Web/Mobile Menu` 18762:57616 (Products) / 57745 (Nav) -----
   320 wide. Green 52 header, a four-up account row, then a Products/Menu tab
   pair that swaps the body between the category tree and the site nav.     */
.mdrawer { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.45); }
.mdrawer__p { position: absolute; inset: 0 auto 0 0; width: min(320px, 88vw);
              background: #fff; display: flex; flex-direction: column; }

.mdrawer__hd { flex: 0 0 52px; height: 52px; display: flex; align-items: center;
               justify-content: space-between; gap: 10px; padding: 16px 12px 16px 16px;
               background: #00805f; }
.mdrawer__hd span { font: 600 14px/1.3 Inter, sans-serif; color: #fff; }
.mdrawer__x { border: 0; background: none; cursor: pointer; color: #fff;
              display: inline-grid; place-items: center; }

.mdrawer__acts { flex: 0 0 69px; display: flex; padding: 14px 8px; background: #f8f8f8;
                 box-shadow: inset 0 -1px 0 rgba(0,0,0,.07); }
.mdrawer__a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
              text-decoration: none; }
.mdrawer__ai { position: relative; display: inline-grid; place-items: center; }
.mdrawer__ai svg { fill: #364153; }
.mdrawer__a span:last-child { font: 400 11px/1.25 Inter, sans-serif; color: #364153; }
.mdrawer__badge { position: absolute; top: -5px; right: -10px; min-width: 17px; height: 14px;
                  padding: 0 6px; border-radius: 999px; background: #e55a33;
                  display: inline-grid; place-items: center;
                  font: 600 8px/1 Inter, sans-serif; color: #fff; }

.mdrawer__tabs { flex: 0 0 44px; display: flex; background: #fff;
                 box-shadow: inset 0 -1px 0 rgba(0,0,0,.07); }
.mdrawer__tab { flex: 1 1 0; height: 44px; border: 0; background: none; cursor: pointer;
                padding: 13px 0; font: 500 12px/1.25 Inter, sans-serif; color: #656772;
                box-shadow: inset 0 -2px 0 transparent; }
.mdrawer__tab.is-on { color: #00805f; box-shadow: inset 0 -2px 0 #00805f; }

.mdrawer__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mdrawer__lab { padding: 14px 16px 6px; font: 600 10px/1.2 Inter, sans-serif;
                letter-spacing: .05em; color: #656772; }
.mdrawer__list { padding: 0 8px 16px; display: flex; flex-direction: column; }

/* Web/Category Row — three states, the Plain one having no chevron at all */
.mcat { display: flex; align-items: center; gap: 10px; min-height: 33px;
        padding: 9px 12px 9px 14px; border-radius: 6px; text-decoration: none; }
.mcat__l { flex: 1 1 auto; font: 500 12px/1.25 Inter, sans-serif; color: #101828; }
.mcat__c { flex: 0 0 15px; color: #656772; }
.mcat--active { background: rgba(0,128,95,.07); }
.mcat--active .mcat__l { color: #00805f; }
.mcat--active .mcat__c { color: #00805f; transform: rotate(90deg); }
.mcat__subs { display: flex; flex-direction: column; padding: 2px 0 6px 14px; }
.mcat__sub { min-height: 31px; display: flex; align-items: center; padding: 8px 14px;
             font: 400 12px/1.25 Inter, sans-serif; color: #364153; text-decoration: none; }
.mcat__sub:active { color: #00805f; }

/* Tab=Nav */
.mnav__i { display: flex; align-items: center; justify-content: space-between;
           min-height: 39px; padding: 12px 14px; text-decoration: none; }
.mnav__i span { font: 500 12px/1.25 Inter, sans-serif; color: #101828; }
.mnav__i svg { color: #656772; }
.mnav__ctaw { padding: 12px 14px 0; }
.mnav__cta { display: flex; align-items: center; justify-content: center; min-height: 37px;
             border-radius: 6px; background: #e55a33; text-decoration: none;
             font: 500 12px/1.25 Inter, sans-serif; color: #fff; }
body.is-locked { overflow: hidden; }

/* ---- hero + content gutters ---------------------------------------------- */
.shero { height: 128px; padding: 16px; gap: 10px; }
.shero__t { font-size: 26px; }
.crumbs__c { font-size: 14px; }
.wwrap { width: 100%; }
.cpage, .spage, .lqpage, .lqdetail, .acct, .co, .codone {
  width: 100%; padding-left: 16px; padding-right: 16px; }
.spage { padding-top: 26px; padding-bottom: 40px; gap: 24px; }
.cpage { padding-top: 26px; padding-bottom: 40px; }
.spage__lead { font-size: 16px; }
.ssec__h, .spanel h2, .scallout__in h2 { font-size: 24px; }

/* stat cards stack; callout tightens */
.sstats { flex-direction: column; gap: 20px; }
.sstat { flex: 1 1 auto; }
.scallout__in { padding: 28px 22px; gap: 14px; }
.scallout__in p { font-size: 16px; }

/* card grids go two-up, then one-up on the narrowest phones */
.scards, .locgrid, .bloggrid, .lqgrid, .wlgrid { gap: 16px; }

/* ---- category + subcategory grids ---------------------------------------
   `Categories - Mobile` 17212:44665 and `Subcategories - Mobile` 17217:11080
   are Header / Hero / Category-Grid and nothing else — neither frame has a
   Category Index in any form, so the desktop rail is dropped rather than
   stacked below 42 cards where it cannot be reached.
   Grid: pad 20/16/28/16, wrap, both gaps 12, cards a fixed 173 —
   16 + 173 + 12 + 173 + 16 = 390, which is what makes it two columns.      */
.cpage { padding: 0; }
/* `.wwrap` already supplies the 16px gutter, so the grid only adds 20/28 */
.cpage__grid { display: block; width: auto; margin: 0; padding: 20px 0 28px; }
.cidx { display: none; }
.ccards, .ccards--sub {
  display: grid; grid-template-columns: repeat(2, 1fr);
  align-items: start; column-gap: 12px; row-gap: 12px;
}
/* card pad is 0/0/20/0 — the image is flush to the top and both sides, and
   the 1px stroke is INSIDE, so it must not be a border. */
.ccard {
  flex: none; width: auto; gap: 14px; padding: 0 0 20px; border: 0;
  border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
}
.ccard__img { aspect-ratio: 244 / 191.836; }
.ccard__l { padding: 0; font-size: 15px; line-height: 18px; white-space: normal; }

/* the desktop grids are auto-fill; on a phone they pin to two up and one up */
.scards { grid-template-columns: 1fr 1fr; }
.locgrid, .bloggrid { grid-template-columns: 1fr; }
.scard { width: auto; }
/* the catalogue cards are a fixed 288 on desktop; on a phone they take the
   whole column rather than sitting in a narrow left-aligned strip */
.scatalogs { flex-direction: column; gap: 16px; }
.scat { width: 100%; }
.loccard, .blogcard { width: 100%; }
.lqgrid { grid-template-columns: 1fr 1fr; }
.lqgrid > .lcard { width: auto; }
.wlgrid > .icard { flex: 1 1 calc(50% - 10px); width: auto; }
.sfaqitem { flex-direction: column; }
.sfaqitem__img { width: 100%; flex: 0 0 auto; }
.sstyle__imgs { flex-direction: column; }
.sspecs { flex-wrap: wrap; gap: 16px; }
.saisle, .sstyle, .saboutcard, .sexample, .scompare__c { flex: 1 1 100%; }

/* archive + product listing */
/* `Archive - Mobile` 17294:24303 — Content is pad 20/16/24/16 and `.wwrap`
   already gives the 16, so the rail's desktop `min(1546px, 100vw - 48px)`
   has to go or the list centres itself 8px in on each side. */
.arch { flex-direction: column; width: auto; margin: 0; padding: 20px 0 24px; }
.lqrow { flex-direction: column; }
/* `Archive - Mobile` item-card: 358 wide, pad 16, gap 12, r12, and the photo
   is a FIXED 120x90 (4:3), not a full-width banner. 17294:24303 */
.pcard--row { padding: 16px; gap: 12px; border-radius: 12px; }
.pcard--row .iimg { width: 120px !important; height: 90px !important; }
.icard__img { height: auto; aspect-ratio: 4 / 3; }
.arch__filters, .lqsum { width: 100%; flex: 0 0 auto; }
.cidx { width: 100%; flex: 0 0 auto; }

/* ---- filters become a modal ----------------------------------------------
   On a phone the rail is replaced by a Filters / Sort trigger pair that opens
   `filters-mobile-overlay` 17360:26451 and `sort-mobile-overlay` 17360:26453.
   Measured off those frames; both were adversarially re-verified.          */
.frail { display: none; }
.ltool__sort, .vtog { display: none; }          /* the Sort trigger replaces them */
.ltool { flex-wrap: wrap; gap: 16px; height: auto; }
.ltool__n { flex: 1 1 100%; }

/* `triggers` 358x48, gap 12, two FILL buttons of 173 */
.ftrig { display: flex; flex: 1 1 100%; gap: 12px; }
.ftrig__b { flex: 1 1 0; min-width: 0; height: 48px; border: 0; cursor: pointer;
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 18px; border-radius: 10px; background: #f0f0f0;
            font: 600 14px/1.28 Inter, sans-serif; color: #101828; }
.ftrig__b.is-on { background: rgba(0, 128, 95, .07); color: #00805f;
                  box-shadow: inset 0 0 0 1.5px #00805f; }
.ftrig__l { display: inline-flex; align-items: center; gap: 6px; }
/* the count pill is 17x18 and hugs, so a two-digit count widens it */
.ftrig__n { min-width: 17px; height: 18px; padding: 0 5px; border-radius: 999px;
            background: #00805f; display: inline-grid; place-items: center;
            font: 600 10px/1 Inter, sans-serif; color: #fff; }
.ftrig__c { display: inline-grid; place-items: center; }
.ftrig__c svg { stroke: currentColor; }

/* ---- filters-mobile-overlay: scrim + a 344x804 panel inset 23/20 -------- */
.fsheet, .ssheet { display: block; position: fixed; inset: 0; z-index: 400;
                   background: rgba(0, 0, 0, .35); }
.fsheet__p { position: absolute; inset: 20px 23px; display: flex; flex-direction: column;
             border-radius: 16px; background: #fff; overflow: hidden;
             box-shadow: 0 24px 60px -10px rgba(0, 0, 0, .2); }
/* header 344x58 pad 14/28 on #364153 — the round top corners come from the
   panel's clip, the header itself has no radius */
.fsheet__hd { flex: 0 0 58px; display: flex; align-items: center;
              justify-content: space-between; gap: 12px; padding: 14px 28px;
              background: #364153; }
.fsheet__hd h3 { font: 600 15px/1.28 Inter, sans-serif; color: #fff; margin: 0; }
.fsheet__x { width: 16px; height: 16px; padding: 0; border: 0; background: none;
             cursor: pointer; display: grid; place-items: center; color: #fff; }
.fsheet__x svg { stroke: currentColor; stroke-width: 1.5; }
.fsheet__b { flex: 1 1 auto; overflow-y: auto; background: #fff;
             -webkit-overflow-scrolling: touch; }
.fsheet__ft { flex: 0 0 80px; display: flex; align-items: center; gap: 12px;
              padding: 16px 24px; background: #fff;
              box-shadow: inset 0 1px 0 rgba(0, 0, 0, .15); }
.fsheet__clear, .fsheet__go { flex: 1 1 0; height: 48px; border: 0; cursor: pointer;
              border-radius: 10px; display: grid; place-items: center;
              font: 600 14px/1 Inter, sans-serif; }
.fsheet__clear { background: #fff; color: #364153;
                 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.fsheet__go { background: #00805f; color: #fff; }

/* the accordion groups, restyled to the sheet's own metrics */
.fsheet__b .frail__g { padding: 6px 24px; display: flex; flex-direction: column;
                       gap: 10px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); }
.fsheet__b .frail__g:last-child { box-shadow: none; }
.fsheet__b .frail__gh { min-height: 24px; padding: 0; }
.fsheet__b .frail__gh span { font: 500 14px/1.21 Inter, sans-serif; color: #364153; }
.fsheet__b .frail__opts { gap: 4px; }
.fsheet__b .fopt { min-height: 34px; padding: 8px 10px; gap: 10px; border-radius: 8px; }
.fsheet__b .fopt__l { font: 400 13px/1.28 Inter, sans-serif; color: #364153; }
.fsheet__b .fopt.is-on .fopt__l { font: 500 12px/1.28 Inter, sans-serif; color: #101828; }
.fsheet__b .fopt__n { font: 400 13px/1.28 Inter, sans-serif; color: #656772; }
.fsheet__b .frng { gap: 12px; }

/* ---- sort-mobile-overlay: a 358x482 panel, 16 in from each side --------- */
.ssheet__p { position: absolute; left: 16px; right: 16px; top: 181.5px;
             display: flex; flex-direction: column; max-height: calc(100% - 40px);
             border-radius: 16px; background: #fff; overflow: hidden;
             box-shadow: 0 24px 60px -10px rgba(0, 0, 0, .2); }
.ssheet__hd { flex: 0 0 64px; display: flex; align-items: center;
              justify-content: space-between; gap: 12px; padding: 16px;
              box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); }
.ssheet__hd h3 { font: 500 15px/1.2 Inter, sans-serif; color: #101828; margin: 0; }
/* close is a 32 pill on #f8f8f8 holding a 10x10 glyph — not the 16px X the
   filter sheet uses */
.ssheet__x { width: 32px; height: 32px; flex: none; padding: 0; border: 0;
             cursor: pointer; border-radius: 999px; background: #f8f8f8;
             display: grid; place-items: center; color: #364153; }
.ssheet__x svg { stroke: currentColor; stroke-width: 1.5; }
.ssheet__o { flex: 1 1 auto; overflow-y: auto; padding: 6px 0; background: #fff; }
.ssheet__i { width: 100%; border: 0; background: none; cursor: pointer;
             display: flex; align-items: center; justify-content: space-between;
             padding: 10px 16px; text-align: left;
             font: 400 13px/1.28 Inter, sans-serif; color: #364153; }
.ssheet__i.is-on { background: rgba(0, 128, 95, .07);
                   font: 500 12px/1.28 Inter, sans-serif; color: #00805f; }
/* the tick sits in a 16x16 box, and that box is what makes the selected
   row 36 tall against the 37 of the others */
.ssheet__ck { flex: 0 0 16px; width: 16px; height: 16px;
              display: inline-grid; place-items: center; color: #00805f; }
.ssheet__ck svg { stroke: currentColor; stroke-width: 2; }
.arch__rows .pcard--row { flex-direction: column; }
.pcard--row .pcard__body { flex-direction: column; gap: 14px; }
/* `Archive - Mobile` 17294:24303 is a ONE-column list, and a product tile
   cannot shrink to 171 anyway — two-up made the row overflow the wrapper. */
.arch__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pcard--tile, .arch__grid > * { width: 100%; min-width: 0; }
/* the PDP's phone rules live in product-detail.css, beside the frame
   they were measured from */

/* ---- footer -------------------------------------------------------------- */
.wfoot { padding: 28px 16px 20px; gap: 20px; }
.wfoot__brand, .wfoot__brandrow { flex-direction: column; align-items: flex-start; gap: 14px; }
.wfoot__nl, .wnews { flex-direction: column; align-items: stretch; gap: 14px; }
/* The newsletter form is `flex: 0 0 600px` on desktop. Once its parent becomes
   a column that 600px basis is a HEIGHT, which left a 600px void in the
   footer. It has to hug on mobile. */
.wfoot__form { flex: 0 0 auto !important; display: flex; gap: 10px; }
.wfoot__form input { flex: 1 1 auto; min-width: 0; }
.wfoot__form .btn { flex: 0 0 auto; }
/* Web/Location Group 172x227 — two per row at 358, city title Semi Bold 14
   over a 128% line box with the card's 12px padding above it and its 12px
   gap below, and a photo pinned to 90 tall. */
.wfoot__cities { grid-template-columns: 1fr 1fr; gap: 14px; }
.wfoot__city h5 { font-size: 14px; line-height: 18px; }
.wloc__row { flex-wrap: wrap; gap: 14px; }
.wfoot__cities > *, .wloc__group { min-width: 0; }
.wfoot__legal, .wfoot__links { flex-wrap: wrap; gap: 14px; }

/* ---- checkout ------------------------------------------------------------
   Measured off the "- Mobile" twins in section 18862:48329 — mainly
   `… S2 C Will Call Location - Mobile` 18930:61841 and
   `… S2 D Will Call Transfer / Split - Mobile` 18930:62179 / 18930:63601.
   Content is 390 wide, pad 20/16/32/16, gap 16 — so every card is 358.     */
.comain { padding: 20px 16px 32px !important; }
/* `.co` carries a 16px gutter of its own on desktop — inside `.comain`'s 16
   that is a double gutter and the cards come out 326 instead of 358. */
.co { padding: 0; gap: 16px; }
.co__title { font-size: 26px; }
.co__body { flex-direction: column; align-items: stretch; gap: 16px; }
.co__main { width: 100%; flex: 0 0 auto; gap: 16px; }

/* `Data/Step Indicator` Device=Mobile is 358x31 — a counter over a 6px
   progress track, not the desktop rail of chips. */
.costeps { display: none; }
.costepm { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.costepm__t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.costepm__n { font: 600 13px/1.3 Inter, sans-serif; color: #00805f; }
.costepm__l { font: 500 12px/1.25 Inter, sans-serif; color: #364153; }
.costepm__track { height: 6px; border-radius: 999px; background: #f0f0f0; overflow: hidden; }
.costepm__track i { display: block; height: 6px; border-radius: 999px; background: #00805f; }

/* Web/Section Header keeps its 18/24 padding; only the type comes down */
.cosec__hd { min-height: 0; padding: 18px 24px; }
.cosec__title { font-size: 19px; }
.cosec__sum { font-size: 12px; }
.cosec__change, .cosec__redo { font-size: 13px; }
.cosec__lead { font-size: 13px; }
.cosec__locked { font-size: 12px; }
.cosec__body { padding: 0 24px 20px; }

/* Web/Choice Row — 310 wide, title 13 over meta 11 */
.cochoice__t strong { font-size: 13px; }
.cochoice__t span { font-size: 11px; }
.cochoice__cost { font-size: 13px; }
.coline__t strong { font-size: 13px; }
.coline__t span { font-size: 11px; }
.coline__v { font-size: 13px; }

/* Web/Alert — title 14 over body 12 */
.coalert__t strong { font-size: 14px; }
.coalert__t span { font-size: 12px; }

/* Web/Shipment Header Device=Mobile — 84 tall, pad 14, gap 8. The origin
   prefix drops onto its own line above the city instead of running inline. */
.coship__hd { padding: 14px; gap: 8px; }
.coship__top { gap: 10px; }
.coship__badge { font-size: 10px; }
.coship__origin { display: flex; flex-direction: column; min-width: 0;
                  font: 600 14px/1.28 Inter, sans-serif; color: #101828; }
.coship__origin strong { font: 500 12px/1.25 Inter, sans-serif; color: #364153; }
.coship__cost { flex: 0 0 auto; font-size: 14px; }
.coship__meta { font-size: 12px; }
.coship__addr { padding: 4px 20px 8px; font-size: 11px; }
.coship__toggle { padding: 8px 20px; }
.coship__toggle span { font-size: 11px; }

/* the note under the cards, then Web/Order Summary as a normal block —
   358x349 pad 16 gap 14. It is NOT pinned to the bottom of the viewport. */
.cofoot { font-size: 11px; }
.osum { position: static; width: 100%; flex: 0 0 auto; padding: 16px; gap: 14px; }
.osum__h { font-size: 19px; }
.osum__r span:first-child, .osum__r span:last-child { font-size: 14px; }
.osum__total > span:first-child { font-size: 14px; }
.osum__tv { font-size: 20px; }
.osum__cta { font-size: 14px; }
.osum__gate { font-size: 11px; }

/* the later steps keep the desktop skeleton, narrowed to the 358 column */
.copanel { padding: 16px; }
.copanel__hd h2 { font-size: 19px; }
.copanel__hd p { font-size: 13px; }
.cosecure__t strong { font-size: 14px; }
.cosecure__t span { font-size: 12px; }
.coaddr__hd { flex-wrap: wrap; gap: 10px; }
.coaddr__hd h3 { font-size: 16px; }
.coaddr__add { flex: 1 1 100%; height: 44px; }
.cosub { font-size: 16px; }
/* the gallery is a desktop-width modal; on a phone the thumbs shrink but
   keep their 4:3 so more than two fit before the strip scrolls */
.gal__body { padding: 16px; gap: 12px; }
.gal__thumbs { gap: 8px; }
.gal__thumbs .gal__thumb { flex: 0 0 72px; }
.gal__ctl { left: 12px; right: 12px; bottom: 12px; }
.cofields { flex-wrap: wrap; }
.cofields > .cofield { flex: 1 1 100%; }
.corow { flex-direction: column; gap: 12px; }
.crow { flex-wrap: wrap; }
.crow__money { flex: 1 1 auto; align-items: flex-start; }
/* the three Express Pay buttons stay 3-across on a phone — 95.33 each at
   gap 12 inside the 310 panel column. 18929:58515 */
.coexpress__row > .copay { min-width: 0; font-size: 14px; }
.codoc__parties, .codoc__terms { flex-direction: column; gap: 14px; }
.codoc__thead { display: none; }               /* the doc table stacks on a phone */
.codoc__row { flex-wrap: wrap; gap: 8px 16px; }
.codoc__it { flex: 1 1 100%; }

/* ---- My Account ---------------------------------------------------------- */
.acct__body { flex-direction: column; gap: 20px; }
.anav, .acct__panels { width: 100%; flex: 0 0 auto; }
.anav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.anav__list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.anav__i { padding: 9px 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
.anav__rule, .anav__out { display: none; }
.acct__title { font-size: 26px; }
.acct__sec { font-size: 24px; }
.ocard__body { flex-wrap: wrap; gap: 12px; }
.ocard__total { align-items: flex-start; }
.ocard__acts { flex-wrap: wrap; }
.ocard__acts .btn { flex: 1 1 auto; width: auto; }
.apanel__fields, .apanel__terms { flex-direction: column; gap: 14px; }
.acard { flex-wrap: wrap; }
.acard__r { flex: 1 1 100%; justify-content: flex-end; }
/* Compare scrolls sideways with the attribute column frozen */
.cmp { overflow-x: auto; }
.cmp__head, .cmp__row { width: max-content; }
.cmp__k { position: sticky; left: 0; z-index: 2; background: inherit; }
.cmp__spacer { position: sticky; left: 0; z-index: 2; background: #fff; }

/* ---- auth ---------------------------------------------------------------- */
.authhd { padding: 16px; height: auto; flex: 0 0 auto; }
.authmain { padding: 26px 16px 40px; }
.auth__col { width: 100%; }
.auth__card { padding: 22px; }
.authft { padding: 20px 16px; }
.authft__top { flex-direction: column; align-items: flex-start; gap: 14px; }
.authft__links { flex-wrap: wrap; gap: 14px; }

/* ---- Rackman ------------------------------------------------------------- */
.side { display: none; }                        /* sidebar → dock */
.app { display: block; }
.panel { padding: 16px 16px 96px; }             /* clear the dock */
.panel__hd { gap: 12px; }
.panel__hd h1 { font-size: 16px; }
.panel__hd p { font-size: 11px; }
/* the header's primary action becomes an icon-only 40x40 */
.panel__hd .btn--primary { width: 40px; height: 40px; padding: 0; border-radius: 10px;
                           font-size: 0; gap: 0; flex: 0 0 40px; overflow: hidden; }
.panel__hd .btn--primary svg { display: block; }

.searchbar { height: 38px; }
.dtoolbar { flex-wrap: wrap; }
.dtoolbar .searchbar { flex: 1 1 100%; }
.usel { width: calc(50% - 6px); }

/* Every Rackman table becomes a stack of cards — the row labels come from the
   th text via data-label, so no view needs a second markup path. */
.dcard { border: 0; background: none; }
.qtbl, .qtbl thead, .qtbl tbody, .qtbl tfoot, .qtbl tr, .qtbl th, .qtbl td { display: block; }
.qtbl thead { display: none; }
.qtbl { width: 100%; }
.qtbl tbody tr { margin-bottom: 10px; padding: 13px 14px; border-radius: 12px;
                 background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
.qtbl tbody td { border: 0; padding: 3px 0 !important; text-align: left !important;
                 display: flex; align-items: center; justify-content: space-between; gap: 10px;
                 font-size: 12.5px; }
.qtbl tbody td::before { content: attr(data-label); flex: 0 0 auto;
                         font: 600 10px/1.4 Inter, sans-serif; letter-spacing: .05em;
                         color: #656772; text-transform: uppercase; }
.qtbl tbody td:empty { display: none; }
.qtbl tbody td.col-expand, .qtbl tbody .col-iv-rule { display: none; }
.qtbl tfoot tr { padding: 12px 14px; border-radius: 10px; background: #f8f8f8; }
.qtbl tfoot td { display: flex; justify-content: space-between; }
.ivscroll { overflow-x: visible; }
.ivtbl { width: 100%; }
.ivsum { padding: 0 0 8px; }
.ivcards { padding: 0; }
.ivcard { width: calc(50% - 8px); }
.cdstats { gap: 8px; }
.cdstat { flex: 1 1 calc(50% - 4px); }
.idgrid, .ascols, .idhead, .locdetail { flex-direction: column; }
.idacts { flex-wrap: wrap; }
.asinline { grid-template-columns: 1fr 1fr; }
.asdash__hd { display: none; }
.asdash__r { grid-template-columns: 20px 1fr; gap: 6px; padding: 12px 0; }
.pager__pages { flex-wrap: wrap; }

/* Layout/Mobile Dock */
.mdock { display: flex; align-items: flex-end; justify-content: space-between;
         position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
         height: 75px; padding: 8px 8px 10px; background: #fff;
         box-shadow: 0 -1px 0 rgba(0,0,0,.07); }
.mdock__i { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
            padding: 4px 2px; border: 0; background: none; border-radius: 10px;
            cursor: pointer; text-decoration: none;
            font: 500 11px/1.2 Inter, sans-serif; color: #364153; }
.mdock__i svg { fill: #364153; }
.mdock__i.is-on { color: #275cd3; font-weight: 600; }
.mdock__i.is-on svg { fill: #275cd3; }
.mdock__hero { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
               text-decoration: none; }
.mdock__herob { width: 46px; height: 44px; border-radius: 14px; background: #275cd3;
                color: #fff; display: inline-grid; place-items: center; margin-top: -14px; }
.mdock__herol { font: 600 11px/1.2 Inter, sans-serif; color: #275cd3; }

/* the dock's Menu slot */
.msheet { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.45);
          display: flex; align-items: flex-end; }
.msheet__p { width: 100%; max-height: 82vh; overflow-y: auto; background: #fff;
             border-radius: 16px 16px 0 0; padding: 10px 16px 28px;
             display: flex; flex-direction: column; gap: 14px; }
.msheet__grab { width: 44px; height: 4px; border-radius: 999px; background: rgba(0,0,0,.15);
                align-self: center; }
.msheet__u { display: flex; align-items: center; gap: 10px; }
.msheet__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.msheet__i { display: flex; align-items: center; gap: 10px; padding: 12px;
             border-radius: 10px; background: #f8f8f8; cursor: pointer;
             font: 500 13px/1.3 Inter, sans-serif; color: #101828; text-decoration: none; }
.msheet__i svg { fill: #656772; }
.msheet__out { display: flex; align-items: center; gap: 10px; padding: 12px;
               font: 600 14px/1.3 Inter, sans-serif; color: #e55a33; cursor: pointer;
               text-decoration: none; }
.msheet__out svg { fill: #e55a33; }

/* overlays go full-width on a phone */
.modal, .picker, .addit { width: calc(100vw - 24px) !important; max-width: none !important; }
}

/* ---- the narrowest phones ------------------------------------------------ */
@media (max-width: 560px) {
  .scard, .arch__grid > *, .ivcard, .lqgrid > .lcard,
  .wlgrid > .icard { width: 100%; flex-basis: 100%; }
  .wfoot__cities > *, .wloc__group { flex: 1 1 100%; }
  .asinline, .msheet__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Home rows — `Home - Mobile` 17097:40757, measured and re-verified.
   Content is a zero-gap, zero-padding column: every Row-* is 390 wide and
   pads itself 20/12/8/12, so each scroller is a 366 column that CLIPS. The
   rows are edge-clipped, not edge-bleeding. Cards are 164 wide over an
   exactly 4:3 image (164x123); Featured rides a 272 rail with a 240x180.
   ========================================================================== */
@media (max-width: 900px) {
  /* `.wwrap` carries a 16px gutter and the rows want 12, so they reach back
     out to the frame edge and re-pad. Content's own gap is 0 — the rhythm is
     20 top / 8 bottom on each row, not a margin between them. */
  .wrow { margin: 0 -16px; padding: 20px 12px 8px; gap: 14px; }
  .wrow--29 { padding-bottom: 20px; }          /* Row-FeaturedProducts */

  /* Web/Section Heading 366x68 — SPACE_BETWEEN with a FIXED 233 text column */
  .wsec { flex-direction: row; flex-wrap: nowrap; align-items: center;
          justify-content: space-between; gap: 24px; }
  .wsec__t { flex: 0 1 233px; min-width: 0; gap: 4px; }
  .wsec__t h2 { font-size: 22px; line-height: 1.28; }
  .wsec__t p  { font-size: 14px; line-height: 1.28; }
  .wsec__all { flex: 0 0 auto; font-size: 15px; font-weight: 400; gap: 0;
               color: #364153; border-bottom-color: #00805f; }

  /* ---- Web/Banner Row 358x344 — the carousel then two 171x128 promos ----
     `@media (max-width:1280px)` drops `.wbanner` to `height: auto`, which
     left the image's `flex: 1 1 auto` with nothing to fill and collapsed the
     hero to 0. The image carries its own locked ratio instead.            */
  .wbanner { margin: 0; padding: 0; height: auto;
             grid-template-columns: 1fr; gap: 16px; }
  .wcarousel { flex: 0 0 auto; max-width: none; height: auto; border-radius: 8px; }
  .wcarousel__img { flex: 0 0 auto; width: 100%; aspect-ratio: 5 / 2; }
  .wcarousel__ctl { height: 57px; padding: 9px 12px 8px; gap: 12px; }
  .wdots--big { gap: 8px; }
  .wcarousel__nav { display: flex; gap: 9px; }   /* the frame keeps the arrows */

  .wpromos { flex: 0 0 auto; flex-direction: row; gap: 16px; }
  .wpromos > .wpromo { flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 3; border-radius: 8px; }
  .wpromo__ctl { left: 8px; right: 8px; bottom: 8px; height: 30px; }
  .wdots--sm { gap: 5px; }
  .wpromo__nav { gap: 4px; padding: 3px; border-radius: 8px; }
  .wpromo__nav button { width: 24px; height: 24px; }

  /* ---- the three scrollers — 366 wide, gap 14, clipped ---------------- */
  .wcats, .wliqs, .wprods {
    display: flex; grid-template-columns: none; gap: 14px;
    overflow-x: auto; max-width: none;
    /* No scroll snapping: it is not on the frame, and it fought the 1px of
       ring room below by parking the scroller at scrollLeft 1. */
    /* `overflow-x: auto` forces the other axis away from `visible`, so the
       scroller clips — and its content box is exactly the card height, which
       shaved off the cards' 1px OUTSIDE ring on every edge. One pixel of room,
       taken straight back, so the ring paints and nothing moves. */
    padding: 1px; margin: -1px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .wcats::-webkit-scrollbar, .wliqs::-webkit-scrollbar,
  .wprods::-webkit-scrollbar { height: 0; }
  .wcats > *, .wliqs > *, .wprods > * { flex: 0 0 164px; width: 164px; }

  /* category-card 164x172 — image 164x123 is EXACTLY 4:3 and flush to the
     top and both sides; the 1px #000@15% stroke is OUTSIDE, so it is an
     outer ring, not a border and not an inset. */
  .wcat { gap: 14px; padding: 0 0 20px; border: 0; border-radius: 10px;
          box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
  .wcat:hover { box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 24px rgba(16,24,40,.10); }
  .wcat__img { height: auto; aspect-ratio: 4 / 3; }
  .wcat__n { padding: 0; font-size: 12px; line-height: 15px; font-weight: 500;
             text-align: center; color: #101828; }

  /* liquidation-card 164x180 — image-bg 164x123 (4:3), gap 10, pad 0/0/12/0,
     r5, 1px #000@15% OUTSIDE. The text frame insets 12 and its title is a
     single clipped line, not a wrapping two-liner: on the frame the node is
     232.87 wide and the CARD clips it. */
  .wliqs > .wcard, .wprods > .wcard {
    gap: 10px; padding: 0 0 12px; border: 0; border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
  }
  .wliqs > .wcard:hover, .wprods > .wcard:hover {
    box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 24px rgba(16,24,40,.10);
  }
  .wcard__img { height: auto; aspect-ratio: 4 / 3; }
  .wcard__d { gap: 8px; padding: 0 12px; }
  .wliqs .wcard__t, .wprods .wcard__t {
    font-size: 12px; font-weight: 500; line-height: 15px; color: #101828;
    white-space: nowrap; overflow: hidden;
  }
  .wliqs .wcard__m, .wprods .wcard__m { font-size: 10px; font-weight: 500;
    line-height: 12px; color: #656772; white-space: nowrap; overflow: hidden; }

  /* Products Carousel — a 272 rail. The desktop paging transform is inline,
     so it has to be overridden or the track sits translated off-screen. */
  .wfeat { overflow: hidden; }
  .wfeat__track { display: flex; gap: 14px; overflow-x: auto; margin: 0;
                  padding: 0 0 4px; transform: none !important;
                  scrollbar-width: none; }
  .wfeat__track::-webkit-scrollbar { height: 0; }
  /* item-card 272x530 pad 16 — its stroke is INSIDE, so a border would eat
     2px of the 240 the image needs to stay 4:3. */
  .wfeat__track > .icard { flex: 0 0 272px; width: 272px; border: 0;
                           box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
  .wfeat__track .icard__imgwrap .iimg { height: 180px !important; }
  .wfeat__ctl { display: none; }        /* the Slider closes the row instead */

  /* `Slider` 366x4 — track #000@7%, thumb #656772, both r999 */
  .wslider { display: block; height: 4px; border-radius: 999px;
             background: rgba(0, 0, 0, .07); }
  .wslider i { display: block; height: 4px; width: 33.33%; border-radius: 999px;
               background: #656772; }

  /* Row-QuoteGenie 390x419 FIXED, pad 36/24, gap 18, over an IMAGE fill with
     a 55% solid scrim stacked on it. `QuoteGenie_v1 1` is 304.26x216.53
     ABSOLUTELY placed at x20.87 y215.42 and clipped by the row.
     The bug: at <=1280 `.wgenie__img` turns `position: static`, so the
     absolutely-positioned `.wgenie__bg` painted straight over the artwork and
     the genie looked see-through. Both layers now carry a stacking order. */
  .wgenie { display: flex; flex-direction: column; gap: 18px;
            margin: 0 -16px; padding: 36px 24px;
            height: 419px; min-height: 0; border-radius: 0; }
  .wgenie__bg { z-index: 0; opacity: .45; }
  .wgenie__img { position: absolute; z-index: 1; left: 21px; top: 215px;
                 width: 304px; height: 217px; margin: 0; max-width: none;
                 background-size: contain; }
  .wgenie__c { position: relative; z-index: 2; min-height: 0; max-width: none;
               padding: 0; justify-content: flex-start; }
  .wgenie__c h2 { font-size: 26px; line-height: 1.28; }
  .wgenie__c p { margin-top: 18px; font-size: 16px; line-height: 1.19; }
  .wgenie__c .row { margin-top: 18px; flex-direction: column; gap: 10px;
                    align-self: stretch; }
  .wgenie__c .row > .btn { width: 100%; height: 50px; }
  .wabout { flex-direction: column; gap: 12px; margin: 0 -16px; padding: 24px 12px; }
  .wabout__r { padding-top: 0; }
  .wabout__stats { grid-template-columns: 1fr; }
  .wabout__c h2 { font-size: 22px; }
  .wtrust { flex-wrap: wrap; gap: 16px; }
  .wtrust__i { flex: 1 1 calc(50% - 8px); }
}

/* The footer legal bar is one non-wrapping row on desktop; on a phone its
   payment marks ran 58px past the viewport and gave every page a horizontal
   scrollbar. Both the bar and the mark row wrap. */
@media (max-width: 900px) {
  .wfoot__legal { flex-wrap: wrap; gap: 14px; }
  .wfoot__legal > span { flex: 1 1 100%; }
  .wfoot__pay { flex-wrap: wrap; gap: 8px; }
  .wfoot__pay img { height: 22px; width: auto; }
}

/* ---- remaining overflow offenders, each verified by measurement ---------- */
@media (max-width: 900px) {
  /* the storefront wrap carries the gutter on a phone, so the scrolling rows
     no longer need negative margins to reach the edge */
  .wwrap { padding-left: 16px; padding-right: 16px; }
  .cpage, .spage, .lqpage, .lqdetail, .acct { padding-left: 0; padding-right: 0; }
  /* the scrollers are handled in the Home block above — they clip inside the
     row's 12px padding rather than bleeding, which is what the frame draws */


  /* a flex child will not shrink below its content unless told to */
  .arch__list, .lqlist, .co__main, .acct__panels, .panel { min-width: 0; }
}

/* The card conversion turns cells into blocks, but the column width classes
   (.col-date, .col-iv-item …) still apply and force the card wide. Neutralise
   every fixed column width inside the mobile card layout. */
@media (max-width: 900px) {
  .qtbl th, .qtbl td, .qtbl tbody tr,
  .qtbl [class*="col-"] { width: auto !important; min-width: 0 !important;
                          max-width: none !important; }
  .ivtbl { width: 100% !important; table-layout: auto !important; }
  .ivscroll { overflow-x: visible; }
  /* the inventory rule cell is a 1px divider that has no meaning in a card */
  .qtbl .col-iv-rule, .qtbl .col-iv-info, .qtbl .col-iv-exp { display: none !important; }
}

/* Tab rows scroll rather than wrap — a wrapped tab strip reads as two rows
   of unrelated buttons. */
@media (max-width: 900px) {
  .idtabs, .astabs, .qd__tabs {
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    margin: 0 -16px; padding: 0 16px;
  }
  .idtabs::-webkit-scrollbar, .astabs::-webkit-scrollbar { height: 0; }
  .idtab, .astab { flex: 0 0 auto; white-space: nowrap; }

  /* the dashboard is a multi-column grid of cards on desktop */
  .dash, .dash__grid, .dash__row, .dash__cols { display: flex; flex-direction: column; gap: 12px; }
  .dash__grid > *, .dash__row > *, .dash__cols > * { width: 100% !important; flex: 1 1 auto !important; min-width: 0; }
  .dash table, .dash .qtbl { width: 100% !important; }
  .dash [class*="col-"] { width: auto !important; }
  .dcard, .card { min-width: 0; }
  /* any residual wide chart scrolls inside its own card */
  .chart, .dash__chart, .chartwrap { overflow-x: auto; }
}

/* The dashboard's own table (.dtbl, separate from .qtbl) is a wide data grid.
   Figma has a mobile dashboard I have not measured, so rather than invent a
   card layout for it the table scrolls inside its card and the page does not. */
@media (max-width: 900px) {
  .dash__card { overflow: hidden; }
  .dtbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dtbl__head, .dtbl__row { width: max-content; min-width: 100%; }
  .dash__stats { flex-wrap: wrap; gap: 10px; }
  .dash__stats > * { flex: 1 1 calc(50% - 5px); }
}

/* ---- My Account on a phone — `My Account - Menu - Mobile` 17564:14063 ----
   /account is a menu page (Welcome + a white list); each tab is its own
   screen reached from it, with a back bar where the sidebar would be.      */
.abackbar { display: none; }
@media (max-width: 900px) {
  .acct--menu { padding: 24px 0 32px; gap: 18px; }
  .amenu__hello { display: flex; flex-direction: column; gap: 4px; }
  .amenu__hello h1 { font: 400 26px/1.28 Inter, sans-serif; color: #101828; margin: 0; }
  .amenu__hello span { font: 500 12px/1.25 Inter, sans-serif; color: #656772; }
  .amenu { display: flex; flex-direction: column; gap: 16px; }
  .amenu__list { background: #fff; border-radius: 10px; overflow: hidden;
                 box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
  .amenu__i { display: flex; align-items: center; gap: 12px; min-height: 50px;
              padding: 15px 16px; text-decoration: none;
              box-shadow: inset 0 -1px 0 rgba(0,0,0,.07); }
  .amenu__list > .amenu__i:last-child { box-shadow: none; }
  .amenu__i.is-on { background: rgba(0,128,95,.07); }
  .amenu__i > span { flex: 1 1 auto; font: 500 15px/1.3 Inter, sans-serif; color: #101828; }
  /* The leading glyph is a fig() filled path; the trailing chevron is an
     icon() stroke. Filling the chevron is what made it read heavier than the
     ones further down the list. */
  .amenu__i > svg:first-child { fill: #656772; }
  .amenu__i > svg:last-child { fill: none; stroke: #656772; }
  .amenu__i.is-on > span { color: #00805f; }
  .amenu__i.is-on > svg:first-child { fill: #00805f; }
  .amenu__i.is-on > svg:last-child { stroke: #00805f; }

  /* the per-tab screens: back bar in, sidebar and page title out */
  .abackbar { display: inline-flex; align-items: center; gap: 6px;
              font: 600 14px/1.3 Inter, sans-serif; color: #00805f;
              text-decoration: none; padding: 4px 0; }
  .acct .anav { display: none; }
  .acct .acct__title { display: none; }
}