/* ============================================================ Simply Plants — shared mobile + iOS CRO layer Ported from the Higher CVR PDP mobile brief (Mobile Handoff/mobile-cro.css), with token names mapped to the theme's --color-* custom properties. Desktop (>980px) is untouched; every rule here either adds an iOS affordance or kicks in below 980 / 640 / 560px. Static file, linked in the head, so it ships without a Tailwind rebuild. ============================================================ */ /* ---- iOS polish (all sizes) ---- */ /* Scoped to the buy box, the gallery column and the fixed bars. This file loads on the product page, but the product page still renders the sitewide header and footer, so a bare element selector here would restyle shared chrome on this page only and leave it different everywhere else. */ .pdp-info *, .pdp-media-col *, .sp-fixedbar * { -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; } .pdp-info :is(button, a, [role="radio"], [role="button"], [role="listitem"]), .sp-fixedbar :is(button, a, [role="button"]) { touch-action: manipulation; } /* viewport-fit=cover: is the backdrop iOS paints behind the Safari toolbars and in the overscroll / safe-area zones. It is transparent by default, so iOS fills it with system grey, which shows as a grey band below the page (visible on the PDP where the content does not reach the very bottom). Match it to the page background token so the page reads edge-to-edge top to bottom, like the home page. */ html { background-color: var(--color-bg); } /* Fixed bottom bars clear the iPhone home indicator */ .sp-fixedbar { padding-bottom: env(safe-area-inset-bottom); } /* ---- Apple Pay express (mobile-only lever) ---- */ .sp-express { display: none; } .sp-applepay { display: flex; align-items: center; justify-content: center; gap: 1px; width: 100%; min-height: 52px; background: #000; color: #fff; border: none; border-radius: var(--radius-pill); cursor: pointer; } .sp-applepay:active { transform: scale(.97); } .sp-applepay svg { display: block; } .sp-express-divider { display: flex; align-items: center; gap: 12px; margin: 12px 0 10px; font-size: 12px; color: var(--color-deep-soil-400); letter-spacing: .2px; } .sp-express-divider::before, .sp-express-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-warm-stone-400); } /* ---- Phone / small tablet ---- */ @media (max-width: 980px) { .sp-express { display: block; } .sp-iconbtn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Buy box inputs at >=16px so iOS Safari never auto-zooms on focus. Scoped: the sitewide footer newsletter input renders on this page too and must not change. */ .pdp-info :is(input, select, textarea) { font-size: 16px !important; } /* Sticky bar: product name + qty are desktop-only on mobile */ .sp-sticky-name, .sp-sticky-qty { display: none !important; } } /* ============================================================ Sticky Add-to-bag bar: appearance by viewport. Phones (<=640) get a FLOATING PILL, not a bar. Researched iOS pattern (web.dev dynamic viewport units; MDN env(safe-area-inset-*); the Gymshark reference): the page scrolls behind AND around the pill, the pill floats a comfortable gap above the iPhone home indicator and the Safari bottom toolbar via calc(env(safe-area-inset-bottom) + gap), and there is no opaque full-width surface or dead filled strip below it. The wrapper only positions and is pointer-events:none so the empty area passes scroll/taps straight through to the page; only the pill itself is opaque and tappable. viewport-fit=cover (default_head_blocks.xml) is what makes the inset non-zero. The "floats higher with the toolbar expanded, drops when scrolled" behaviour is the visual-viewport tracking of a position:fixed element and needs no extra code. ============================================================ */ /* Tablet + desktop keep the translucent solid bar (moved here off the inline style). */ @media (min-width: 641px) { .sp-fixedbar { background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--color-warm-stone-400); box-shadow: 0 -6px 24px rgba(46, 46, 43, .08); } } /* Phone: floating pill. */ @media (max-width: 640px) { .sp-fixedbar { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; pointer-events: none; /* empty area scrolls/taps through */ /* Lift the whole pill ABOVE the iOS Safari bottom toolbar. --sp-ios-toolbar is the toolbar's overlap (set by the visual-viewport script in sticky-buy-bar.phtml; 0 on desktop/Android and when the toolbar is collapsed). This leaves the cream page behind the toolbar, so the translucent toolbar blends into the page like the home page instead of tinting to the pill. */ bottom: var(--sp-ios-toolbar, 0px) !important; padding-bottom: calc(env(safe-area-inset-bottom) + 12px); /* clear the home indicator */ } /* On the pill it is the CTA only: thumbnail, name, size line and qty all live in the main buy box, not the floating control. */ .sp-sticky-thumb, .sp-sticky-size, .sp-sticky-meta, .sp-sticky-qty { display: none !important; } .sp-sticky-inner { gap: 0 !important; padding: 0 16px !important; } /* side margins so the page shows at the edges */ .sp-sticky-cta { pointer-events: auto; /* only the pill is interactive */ flex: 1 1 0% !important; min-width: 0 !important; min-height: 54px; /* NEUTRAL shadow only: a coloured glow bleeds into the translucent iOS toolbar and tints it. A soft neutral lift reads clean and leaves the toolbar untinted. */ box-shadow: 0 6px 18px rgba(46, 46, 43, .22); } }