/* ========================================================================== BASED — Minimal mobile bug-fixes only. Do NOT override Instant layout. ========================================================================== */ /* Prevent horizontal overflow */ html { overflow-x: hidden; } /* iOS input zoom prevention — inputs below 16px trigger Safari zoom */ @media (max-width: 768px) { input, select, textarea { font-size: 16px !important; } } /* Reviews — single column on mobile, full-screen lightbox */ @media (max-width: 600px) { #basedReviews .br-grid { columns: 1 !important; } #basedReviews .br-overlay-inner { max-width: 100%; max-height: 100vh; border-radius: 0; margin: 0; } #basedReviews .br-overlay { padding: 0; } } /* Discount popup — fit on small screens */ @media (max-width: 480px) { #based-discount-popup > div { max-width: calc(100vw - 24px) !important; padding: 28px 20px !important; } } /* Quiz — fit on small screens */ @media (max-width: 480px) { #based-quiz { padding: 20px 16px 40px !important; } #based-quiz .bq-rec { flex-direction: column !important; text-align: center !important; } } /* Stop scroll-trigger animations from re-firing (causes bouncing) */ .instant-scroll-trigger--hidden { opacity: 1 !important; transform: none !important; visibility: visible !important; } .instant-reveal--fade, .instant-reveal--transform, .instant-reveal--transform-fade { opacity: 1 !important; transform: none !important; transition: none !important; } [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } /* Hide truly broken images (empty src) */ img[src=""], img:not([src]) { visibility: hidden; height: 0; } /* --- Nav / header menu text: match live site exactly --- */ /* Live site uses font-weight: 500 (Paralucent Medium) for nav links. Now that we have the correct font files from instant.so, weight 500 maps to the Medium file — matching the live site 1:1. */ /* Desktop nav links */ .iztzfnM2EL72rqFPp, .i1q9Y0ZAI70wysHJz, .iefaoSFXgcTmJUGF7, .i994rLoeZYg6KFCTo, .iGeEhEC2SlaexA0d8 { font-weight: 500 !important; } /* Desktop nav links (mega-menu variant) */ .irlmWxYw8ktEId9yW, .iLa2XVbzaPRLbQUfO, .im3bwADieYUCogodX, .iXgQ8PFW4mUcvJHcU { font-weight: 500 !important; } /* Hide sold-out overlay containers — all products are available */ .iTF3EOp17B5R1GNwW { display: none !important; } /* Fix grey ATC buttons on collection pages (bodywash + deodorant were sold-out, converted from grey
to but kept the grey CSS class). Matches the real gold ATC button: class iG1mvd0umRK5GPbqS in instant-dF2TGq5NuDHDgrdZ.css */ .iE3UYE4lDDlAD83EU[data-instant-action-type="add-to-cart"], .ie2XCNQnGjrtqz1Ei[data-instant-action-type="add-to-cart"], .iYecayYvcY7wfnQKS[data-instant-action-type="add-to-cart"], .inkkhIc3Nl4n3xOay[data-instant-action-type="add-to-cart"] { align-items: center !important; background: linear-gradient(0deg, #9c8539, #c8ac56) !important; border-radius: 5px !important; column-gap: 4px !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; margin: 0 !important; padding: 12px 0 !important; position: relative !important; row-gap: 4px !important; width: 100% !important; text-decoration: none !important; cursor: pointer !important; } /* Match the inner text style of real gold ATC buttons */ .iE3UYE4lDDlAD83EU[data-instant-action-type="add-to-cart"] .instant-rich-text, .ie2XCNQnGjrtqz1Ei[data-instant-action-type="add-to-cart"] .instant-rich-text, .iYecayYvcY7wfnQKS[data-instant-action-type="add-to-cart"] .instant-rich-text, .inkkhIc3Nl4n3xOay[data-instant-action-type="add-to-cart"] .instant-rich-text { color: #fff !important; font-family: Paralucent !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: -0.03em !important; line-height: 0.8 !important; text-align: start !important; } .iE3UYE4lDDlAD83EU[data-instant-action-type="add-to-cart"] p, .ie2XCNQnGjrtqz1Ei[data-instant-action-type="add-to-cart"] p, .iYecayYvcY7wfnQKS[data-instant-action-type="add-to-cart"] p, .inkkhIc3Nl4n3xOay[data-instant-action-type="add-to-cart"] p { color: #fff !important; font-family: Paralucent !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: -0.03em !important; margin: 0 !important; } /* Mobile touch targets — ensure minimum 44px tap size on interactive elements */ @media (max-width: 768px) { /* Scent variant buttons — padding too small (3px 6px) on mobile */ [data-instant-action-type="select-variant-option"] { min-height: 44px !important; display: flex !important; align-items: center !important; } /* Mobile menu close button */ .ilPIkDUgaiDBHLJQB { min-width: 44px !important; min-height: 44px !important; } /* Discount popup close button */ #based-discount-popup .bdp-close { min-width: 44px !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; } } /* Ensure ATC buttons are clickable (but don't force display — causes double buttons) */ [data-instant-action-type="add-to-cart"]:not([style*="display: none"]) { opacity: 1 !important; pointer-events: auto !important; cursor: pointer !important; filter: none !important; } /* Hide ghost/empty product forms in collection hero sections (static export artefact) */ form[data-instant-form-product-url=""][data-instant-form-product-id=""] { display: none !important; } /* Hide Instant badge — stronger override */ [class*="instant-badge"], [data-instant-badge], div[style*="position: fixed"][style*="bottom"] a[href*="instant.so"] { display: none !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* Hide "Revival" accordion in nav — products don't exist on this site */ .irHIVxbNsMdFvDcJL { display: none !important; } /* ========================================================================== CLS mitigation — reserve space for late-loading regions The 320×568 home hit CLS 1.056 pre-fix due to scroll-triggered reveal elements and late-loading image containers pushing content. These rules reserve minimum heights so text doesn't reflow on reveal. ========================================================================== */ /* Stats ticker + marquees — reserve a minimum band height so the row below * doesn't jump up when the ticker fully initializes. */ .instant-ticker-container { min-height: 100px; } @media (max-width: 600px) { .instant-ticker-container { min-height: 80px; } } /* Feature strip (Safe Formulas / Formulated in USA / Paraben-free) — * reserve vertical space so bestsellers below don't jump. */ .instant-marquee-container { min-height: 48px; } /* Review images — belt-and-braces on top of the inline width/height now * added to every tag. */ #basedReviews img[src*="reviews/"] { aspect-ratio: 4/5; width: 100%; height: auto; } /* Product grid cards — all share the same Instant product-card wrapper. * Reserve a minimum card height so text lines don't jump as images load. */ .instant-product-card, [data-instant-type="container"][class*="product-card"] { contain: layout paint; } /* Honor any scroll-trigger animations that survive cleanup by forcing * pre-shown opacity. mobile-fix already does this for main classes; * this is a widened fallback for late-added variants. */ [class*="instant-scroll-trigger"], [data-instant-scroll-trigger] { opacity: 1 !important; transform: none !important; visibility: visible !important; animation: none !important; } /* ========================================================================== Mobile responsiveness hardening (additive only — do NOT alter layout) ========================================================================== */ /* Prevent any accidental horizontal scroll on mobile viewports (iPhone SE 375px) Original rule on `html` was too narrow — also pin body to viewport width. */ @media (max-width: 768px) { html, body { max-width: 100vw; overflow-x: hidden; } } /* Safe-area insets for iPhone notch/home-indicator. Pads the discount popup so the Close (top) and CTA (bottom) aren't obscured. */ @supports (padding: max(0px)) { #based-discount-popup .bdp-close { top: max(16px, env(safe-area-inset-top)) !important; left: max(16px, env(safe-area-inset-left)) !important; } #based-discount-popup .bdp-inner { padding-bottom: max(0px, env(safe-area-inset-bottom)) !important; } } /* Header icons (account + cart) — bump tap targets to 44×44 on mobile without shifting visual position. The SVG icon inside stays 24px; we enlarge the clickable box only. */ @media (max-width: 768px) { .ij9SmL2LSTNycVvUs.new_cart_toggle, .iXL7K6wJgChmVRVLC.new_cart_toggle, a.new_cart_toggle { min-width: 44px !important; min-height: 44px !important; } /* Hamburger button */ .i2m1H0Gw9Mskl8lS2 { min-width: 44px !important; min-height: 44px !important; } } /* Prevent iOS zoom on popup/footer email inputs (explicit 16px floor). Inline style from based-custom.js may set 18px, but ensure ≥16px always. */ #based-discount-popup .bdp-input, input.based-footer-email-input, input.based-notify-email, input.bq-email-input { font-size: 16px !important; } @media (min-width: 601px) { #based-discount-popup .bdp-input { font-size: 18px !important; } } /* Reviews lightbox close button — bump tap target */ @media (max-width: 768px) { #basedReviews .br-overlay-close { min-width: 44px !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; } } /* Ensure CHOOSE SCENT / ADD TO CART buttons have min 44px tap height on mobile */ @media (max-width: 768px) { a[data-instant-action-type="add-to-cart"], a[href*="/cart/"][data-instant-action-variant-id] { min-height: 44px !important; } } /* Cart drawer — ensure full-height scroll works on iOS (avoid content-clip) */ .ihS5V319Ud0Q7VTfH { -webkit-overflow-scrolling: touch; } /* Reviews grid: extra breakpoint for very narrow phones (320px devices) — 1 col already, but shrink card margin so grid is comfortable */ @media (max-width: 380px) { #basedReviews { padding: 12px 0 !important; } #basedReviews .br-card { margin-bottom: 10px !important; } } /* Slider arrows (product image carousel) — pre-launch audit flagged 32×32. * Bump to 44×44 on mobile without changing visual icon size. */ @media (max-width: 768px) { .instant-slider-button, button.instant-slider-button, .instant-slider-container button { min-width: 44px !important; min-height: 44px !important; } } /* Filter chips on collection/pages (audit flagged 97-103×32-40) — expand * tap area without changing padded appearance. */ @media (max-width: 768px) { [data-instant-type="tabs-trigger"], button[data-instant-type="tabs-trigger"] { min-height: 44px !important; } } /* Footer links — audit flagged 70-114×16. Add vertical padding on mobile so * the tap box is 44px without changing horizontal spacing. */ @media (max-width: 768px) { .iBmYz8EfpfKdMitH9, footer a, [role="contentinfo"] a { display: inline-block; padding-top: 14px !important; padding-bottom: 14px !important; } } /* Popup Continue button — ensure minimum tap height on very small screens */ @media (max-width: 380px) { #based-discount-popup .bdp-continue, #based-discount-popup .bdp-cat { padding: 16px !important; font-size: 18px !important; } #based-discount-popup .bdp-word { font-size: 56px !important; line-height: 44px !important; } #based-discount-popup .bdp-eyebrow { font-size: 22px !important; } }