Mobile · one fold at a time
How mobile works: one fold at a time
On phones, every horizontal section is rebuilt to show one fold at a time instead of the desktop layout. The desktop 3D orbit carousel is intentionally disabled on mobile and replaced with a swipe-one-card experience: the Everyday Deals rotator centers a single deal card, auto-advances every 4.5s, hands the glowing “Shop the drop” CTA to whichever card is centered, shows dots, and pauses when you swipe. Category icons collapse from 9-across to a clean 3-column grid; the store drawer goes full-width with its close button back on-screen; long product names clamp to two lines so the CTA never breaks; and tapping a card opens the product modal.
Mobile bugs fixed in this window (12):
- Everyday Deals mobile carousel — Everyday Deals mobile carousel: RAF-free auto-scroll via native scrollTo({behavior:smooth}) — RAF tween was throttled on heavy page and froze the scroll; glow+d…
- Deal name mobile — Deal name mobile: #root specificity so 17px shrink actually applies (was overridden by #root h3 clamp)
- Deal cards mobile — Deal cards mobile: clamp long product name to 2 lines + smaller font so it doesn't push/break the CTA; card height auto
- Everyday Deals mobile auto-scroll — Everyday Deals mobile auto-scroll: snap mandatory->proximity (mandatory reverted the RAF tween's incremental writes, keeping it static)
- Everyday Deals mobile — Everyday Deals mobile: auto-scroll the swipe row (was static — desktop 3D auto-rotate is disabled on mobile by design); pauses after manual swipe, honours reduc…
- Category grid — Category grid: make .sc-cat-grid mobile rule self-sufficient (display:grid + repeat(3,1fr) directly, no fragile [style*=grid-template-columns] dependency that f…
- Category labels — Category labels: small-phone font notch (11px <=480) + overflow-wrap so long words like CONCENTRATES never overflow the 3-col cells
- Category icons mobile — Category icons mobile: gate whileHover to hover-capable devices (fix stuck halo/lift on touch), repeat(9,minmax(0,1fr)) equal columns, .sc-cat-grid 3-col on pho…
- Fix mobile drawer — Fix mobile drawer: scope [class*=drawer] full-width rule to containers only (.sc-drawer/.sc-store-drawer) so children (store-pill/header/search) no longer force…
- Mobile fixes — Mobile fixes: store-card hero width:100% (collapse), locations toolbar flex-wrap, tier comet PAD responsive (no off-screen bleed)
- homepage hero mobile — homepage hero mobile: fix SHRED 2nd-banner vertical layout (max-width/transform overrides) + dots de-inflate + position
- Everyday Deals carousel — Everyday Deals carousel: category-priority sort (hero cats first) + cap 16, same on-sale catalog source as shop