`), so it is an exact open-state hook. This handles desktop browsers; legit-loop-bundles.js adds the position:fixed lock that iOS Safari additionally requires. */ @media (max-width: 1023.98px) { body:has(.loop-bottom-sheet-header-container) { overflow: hidden; } } .loop-bottom-sheet-wrapper, .loop-bottom-sheet-body-container { overscroll-behavior: contain; } .loop-drawer-overlay { background: rgba(23, 24, 26, .55); backdrop-filter: blur(2px); overscroll-behavior: none; } .loop-drawer-content { border-radius: var(--lg-radius-panel) 0 0 var(--lg-radius-panel); } .loop-drawer-header, .loop-drawer-footer { border-color: var(--lg-line); } .loop-drawer-product-title { font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; } .loop-drawer-discounted-price { font-weight: 900; } .loop-drawer-product-price { text-decoration: line-through; } .loop-drawer-go-back-btn { border: 1.5px solid var(--lg-stage); border-radius: var(--lg-radius-btn); font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .loop-bottom-sheet-header-container, .loop-bottom-sheet-purchase-options-container { border-color: var(--lg-line); } .loop-bottom-sheet-wrapper { border-radius: var(--lg-radius-panel) var(--lg-radius-panel) 0 0; overflow: hidden; } .loop-bottom-sheet-header-title { font-weight: 900; text-transform: uppercase; letter-spacing: .03em; color: var(--lg-stage); } .loop-toast { border-radius: var(--lg-radius-btn); font-weight: 700; font-size: 13px; box-shadow: var(--lg-shadow-lift); } /* ========================================================================== 12. SKELETONS + MOTION ========================================================================== */ .loop-skeleton, .loop-skeleton-box { background: linear-gradient(90deg, #f2f2f3 25%, #e9e9eb 37%, #f2f2f3 63%); background-size: 400% 100%; border-radius: 8px; } @media (prefers-reduced-motion: reduce) { .loop-container *, .loop-bundle-footer * { transition: none !important; animation: none !important; } .loop-card:hover, .loop-btn-add-product:hover, .loop-btn-add-to-cart:hover { transform: none !important; } } /* ========================================================================== 12b. MOBILE BOTTOM SHEET — give "YOUR STACK" its space back -------------------------------------------------------------------------- The sheet is a flex column: header · progress · products(flex:1) · purchase options · footer. Everything except the product list is fixed-height, so any growth in the purchase options is taken straight out of the list — which is why only one product was visible. Rebalance it: · product list gets a real floor (min-height) and is the primary scroller · purchase options are capped and scroll internally on short phones · rows are compacted so ~4 fit instead of ~1.5 (The USP block is also collapsed here — see legit-loop-bundles.js.) ========================================================================== */ @media (max-width: 767.98px) { /* progress / "you unlocked…" header — trim the dead height */ .loop-bottom-sheet-body-container { padding: 10px 16px 0 !important; } .loop-bottom-sheet-body-info-text, .loop-higher-discount-rate { font-size: 12.5px !important; line-height: 1.4; } .loop-bundle-progress-bar-container, .loop-bundle-progress-bar-new-container { margin-bottom: 14px !important; } .loop-progress-range-dot { width: 18px; height: 18px; } /* the product list is the scroller (Loop nests two overflow:auto boxes) */ .loop-bottom-sheet-body-products-container, .loop-bottom-sheet-body-products-container-expanded { flex: 1 1 auto !important; min-height: 30vh; padding: 0 16px !important; overflow: hidden !important; /* inner container does the scrolling */ } .loop-bottom-sheet-products-inner-container { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--lg-scroll) transparent; padding-bottom: 4px !important; } .loop-bottom-sheet-products-inner-container::-webkit-scrollbar { width: 5px; } .loop-bottom-sheet-products-inner-container::-webkit-scrollbar-track { background: transparent; } .loop-bottom-sheet-products-inner-container::-webkit-scrollbar-thumb { background: var(--lg-scroll); border-radius: 999px; } /* fade the clipped row so it reads as "more below" */ .loop-bottom-sheet-body-products-container-expanded:has(.loop-bottom-sheet-products-inner-container.is-scrollable:not(.is-at-end)) { position: relative; } .loop-bottom-sheet-body-products-container-expanded:has(.loop-bottom-sheet-products-inner-container.is-scrollable:not(.is-at-end))::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 80%); pointer-events: none; } /* purchase options: capped, and they yield before the product list does */ .loop-bottom-sheet-purchase-options-container { flex: 0 1 auto !important; max-height: 44vh; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 0 !important; border-top-width: 1px !important; } /* --- FREQUENCY DROPDOWN ------------------------------------------------ Loop renders the plan list as `position:absolute; z-index:10` inside a `.relative` wrapper. An absolutely-positioned box is CLIPPED by any overflow:auto ancestor — z-index cannot escape an overflow context — so inside the capped scroller above, the plans were cut off below the fold and unreachable. Put the panel back in NORMAL FLOW: it then grows the container (which is what we actually want on a phone) instead of floating over it, and nothing clips it. Also drops Loop's own 14rem inner scroller, so the whole list is one piece. Same specificity + later file → no !important needed. */ .loop-bundle-widget-frequency-dropdown-options { position: static; /* Loop: absolute — the whole bug */ max-height: none; /* Loop: 14rem + a nested scroller */ overflow: visible; width: 100%; margin-top: 8px; box-shadow: none; border-color: var(--lg-line); border-radius: var(--lg-radius-btn); } /* While it's open the shopper is mid-decision, so hand the space over: the options take what they need and the product list gives up its floor (it scrolls anyway, and it isn't what's being looked at). The panel only exists while open, so :has() is an exact open-state hook. */ .loop-bottom-sheet-purchase-options-container:has(.loop-bundle-widget-frequency-dropdown-options) { max-height: 72vh; } body:has(.loop-bundle-widget-frequency-dropdown-options) .loop-bottom-sheet-body-products-container, body:has(.loop-bundle-widget-frequency-dropdown-options) .loop-bottom-sheet-body-products-container-expanded { min-height: 0; /* release the 30vh floor set above */ } .loop-bundle-radio-widget-container { gap: 8px; } .loop-bundle-widget-selling-plan-container { padding: 12px; } /* compact rows — ~4 visible instead of ~1.5 */ .loop-selected-variant-container { margin-top: 8px; padding: 8px; gap: 10px; } .loop-selected-variant-container img, .loop-image-product-sm img { width: 40px; height: 40px; } .loop-selected-variant-title { font-size: 12px; } .loop-selected-variant-price-discount { font-size: 12.5px; } .loop-selected-variant-price-actual { font-size: 11px; } .loop-bottom-sheet-footer-container { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; } } /* ========================================================================== 13. SMALL SCREENS ========================================================================== */ @media (max-width: 600px) { .loop-container, .loop-bs-container { padding-inline: 16px; } .loop-h1, .loop-bundle-title { font-size: 34px; } .loop-btn-add-to-cart { height: 52px; padding: 0 12px; } .loop-bundle-total-label { font-size: 13px; } .loop-bundle-add-to-cart-text { font-size: 11px; } .loop-bundle-saved-label { font-size: 8.5px; padding: 3px 7px; } .loop-selected-bundle { padding: 14px; border-radius: 12px !important; } /* in the bottom bar the list must stay short — and scroll without dragging the page with it (overscroll-behavior:contain is set in §7). */ .loop-bundle-footer .loop-selected-bundle-items { max-height: 132px; } } @media (max-width: 600px) { .loop-bottom-sheet-header-container { border-color: #ffffff; } } /* ========================================================================== 14. MOBILE 2-UP GRID (driven by --loop-bundle-number-of-cards-mobile-view) -------------------------------------------------------------------------- Fixes the horizontal spill at 2-up. Loop's grid is repeat(N, 1fr), and 1fr = minmax(auto, 1fr) — the `auto` floor is each card's content min-size, so the tracks refuse to shrink and the row overflows the screen. minmax(0, 1fr) lets them shrink to fit; min-width:0 on the items removes their auto floor. Also neutralises Loop's `.loop-background{min-width:100vw}`: it's transparent in this theme (invisible), but 100vw includes the scrollbar gutter and causes sideways page scroll. To go back to 1-up, set --loop-bundle-number-of-cards-mobile-view: 1 (§2). ========================================================================== */ .loop-background { min-width: 0 !important; } /* Loop: min-width:100vw */ @media (max-width: 600px) { .loop-products-align, .loop-products-align-new { grid-template-columns: repeat(var(--loop-bundle-number-of-cards-mobile-view, 1), minmax(0, 1fr)) !important; gap: 12px; } /* let the cards (grid items) shrink below their content min-size */ .loop-bundle-product-wrapper, .loop-bundle-product-container, .loop-card, .loop-bundle-product-card, .loop-image-product-lg { min-width: 0 !important; } /* Loop img box: min-width:100px */ .loop-products-align img, .loop-products-align-new img { max-width: 100%; } /* keep the cards tidy at ~150px wide */ .loop-bundle-product-image-container { padding: 10px 10px 0; } .loop-card-body { padding: 10px 10px 0 !important; } .loop-card-footer { padding: 10px 10px 12px !important; } select.loop-select-variant { padding: 10px 28px 10px 12px; font-size: 12px; } .loop-btn-add-product { height: 44px; font-size: 11px; letter-spacing: .06em; } } /* ========================================================================== §15 STACK HERO + §16 STACK FOOTER — REMOVED FROM THIS FILE 2026-07-21. -------------------------------------------------------------------------- They now live ONLY in legit-loop-bundles.js (LEGIT_INJECTED_CSS, injected into ). They were duplicated here AND there; this copy loaded LAST (end of ) and, with its mobile @media block cut off by the ~2000-line field cap, its leftover DESKTOP hero rules overrode the JS's correct mobile rules — squashing the header into 2 columns on phones. Keep hero/footer edits in the JS. This file is §1–14 only: the brand tokens + the .loop-* overrides, which MUST stay here (they beat Loop's own CSS by loading after it — a JS inject can't guarantee that order). ========================================================================== */