/* =========================================================================== OG SCENTS — zz-final.css (register LAST) Forces cart + checkout to behave, desktop and mobile. THE OVERFLOW: the shipping-calculator fields inside "Cart totals" (Country / Province / Town / Postcode) render at their own intrinsic width, ignoring the panel. They stick out past the screen edge, which creates horizontal scroll — and horizontal scroll is what lets the page pinch-zoom and crop. Everything below is box-sizing + width:100% applied with enough force that nothing can escape its container. =========================================================================== */ /* ---- 1) EVERYTHING inside cart/checkout stays in its box ---- SCOPED TO .ogs-page__content ON PURPOSE. The old rule was .woocommerce-cart *, .woocommerce-checkout * { max-width:100% !important } which also hit .ogs-cursor's children, .ogs-tray__toggle and .ogs-seal. Those are position:absolute/fixed inside parents that have no intrinsic size, so their containing block is 0px wide — and max-width:100% of 0 is 0. It collapsed the custom cursor to 0x0 on these two pages only. */ .woocommerce-cart .ogs-page__content *, .woocommerce-checkout .ogs-page__content * { box-sizing: border-box !important; max-width: 100% !important; } /* ONE overflow owner. html clips, body stays visible. Both being non-visible made body a second scroll container (per spec a non-visible overflow-x forces overflow-y from visible to auto), which is what produced the second scrollbar and the dead strip beside it. */ html { max-width: 100% !important; overflow-x: clip !important; } body { max-width: 100% !important; overflow-x: visible !important; overflow-y: visible !important; } .woocommerce-cart .ogs-page__wrap, .woocommerce-checkout .ogs-page__wrap, .woocommerce-cart .ogs-page, .woocommerce-checkout .ogs-page { max-width: 100% !important; } /* ---- 1b) BODY GUTTER — THE LEFT/RIGHT DEAD SPACE ---- Something enqueued (likely one of the module stylesheets that is currently 404ing) puts clamp(20px,4vw,56px) of horizontal padding on . That pushed the ENTIRE page inward — ticker, header, everything — which is why editing .ogs-page / __wrap / __content never moved it. The gutter belongs on the inner container, never on body. Verified: body computed paddingLeft was 40.224px (= 4vw @ 1006px). */ body { padding-left: 0 !important; padding-right: 0 !important; } /* ---- 1c) CUSTOM CURSOR OFF on cart + checkout ---- .ogs-cursor has no intrinsic size (all three children are absolute), so its content box is 0px wide. The old universal max-width:100% clamped the 38px ring to 0 while its border + border-radius still painted — that is the thin vertical "stick" that appeared on these two pages only. Form pages want a real caret and pointer anyway. */ body.woocommerce-cart .ogs-cursor, body.woocommerce-checkout .ogs-cursor, body.woocommerce-cart .ogs-mist-layer, body.woocommerce-checkout .ogs-mist-layer { display: none !important; } body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-cart *, body.woocommerce-checkout * { cursor: auto !important; } body.woocommerce-cart a, body.woocommerce-checkout a, body.woocommerce-cart button, body.woocommerce-checkout button, body.woocommerce-cart label, body.woocommerce-checkout label, body.woocommerce-cart select, body.woocommerce-checkout select, body.woocommerce-cart [role="button"], body.woocommerce-checkout [role="button"] { cursor: pointer !important; } body.woocommerce-cart textarea, body.woocommerce-checkout textarea, body.woocommerce-cart input:not([type=checkbox]):not([type=radio]), body.woocommerce-checkout input:not([type=checkbox]):not([type=radio]) { cursor: text !important; } /* ---- 2) THE CULPRIT: shipping calculator fields ---- */ .woocommerce-shipping-calculator, .shipping-calculator-form, .shipping-calculator-form p, .shipping-calculator-form .form-row, .woocommerce-shipping-calculator select, .woocommerce-shipping-calculator input, .shipping-calculator-form select, .shipping-calculator-form input, .shipping-calculator-form .select2, .shipping-calculator-form .select2-container, .shipping-calculator-form .select2-selection { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; box-sizing: border-box !important; } .shipping-calculator-form { display: block !important; padding: 14px 0 0 !important; margin: 10px 0 0 !important; border-top: 1px solid rgba(15,14,12,.12); } .shipping-calculator-form .form-row { margin: 0 0 10px !important; } .shipping-calculator-form label { display: block !important; margin: 0 0 6px !important; font-size: 10px !important; letter-spacing: .14em; text-transform: uppercase; color: #6B665E !important; } .shipping-calculator-form select, .shipping-calculator-form input, .shipping-calculator-form .select2-selection { font-size: 15px !important; padding: 12px 14px !important; border: 1px solid rgba(15,14,12,.16) !important; border-radius: 9px !important; background: #fff !important; height: auto !important; } .shipping-calculator-form button { width: 100% !important; margin-top: 4px !important; padding: 13px !important; border-radius: 9999px !important; font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; background: #0F0E0C !important; color: #fff !important; border: 0 !important; } /* ---- 3) ALL form fields, everywhere on these pages ---- */ .woocommerce-cart input, .woocommerce-cart select, .woocommerce-cart textarea, .woocommerce-checkout input, .woocommerce-checkout select, .woocommerce-checkout textarea, .woocommerce-cart .select2-container, .woocommerce-checkout .select2-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .woocommerce-cart .form-row, .woocommerce-checkout .form-row, .woocommerce-cart p, .woocommerce-checkout .woocommerce-billing-fields p { max-width: 100% !important; box-sizing: border-box !important; } /* ---- 4) TICKER never wider than the page ---- */ .ogs-ticker { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; left: auto !important; right: auto !important; transform: none !important; overflow: hidden !important; } /* ---- 5) YOUR DETAILS FIRST, order summary second ---- */ @media (max-width: 999px) { .ogs-co__grid { display: flex !important; flex-direction: column !important; gap: 26px !important; } .ogs-co__details { order: 1 !important; } .ogs-co__aside { order: 2 !important; } } /* ---- 6) PANELS — clean, contained, roomy ---- */ .ogs-co__step--order, .ogs-cartpg__totals .cart_totals { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: #F5F2EC !important; border: 1px solid rgba(15,14,12,.12) !important; border-radius: 12px !important; padding: 24px 20px !important; margin: 0 !important; overflow: hidden !important; } @media (min-width: 1000px) { .ogs-co__step--order, .ogs-cartpg__totals .cart_totals { padding: 30px !important; } } /* totals rows never overflow */ .ogs-cartpg__totals table, .ogs-cartpg__totals tbody, .ogs-cartpg__totals tr, .ogs-review, .ogs-review tbody, .ogs-review tfoot { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .ogs-cartpg__totals tr, .ogs-review tfoot tr { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 14px !important; padding: 13px 0 !important; width: 100% !important; } .ogs-cartpg__totals th, .ogs-cartpg__totals td, .ogs-review tfoot th, .ogs-review tfoot td { border: 0 !important; padding: 0 !important; background: none !important; font-size: 14px !important; font-weight: 400 !important; text-align: left !important; min-width: 0 !important; max-width: 100% !important; } .ogs-cartpg__totals td, .ogs-review tfoot td { text-align: right !important; } /* the shipping row needs to stack — it holds a whole form */ .ogs-cartpg__totals tr.woocommerce-shipping-totals, .ogs-cartpg__totals tr.shipping { display: block !important; width: 100% !important; } .ogs-cartpg__totals tr.woocommerce-shipping-totals th, .ogs-cartpg__totals tr.shipping th { display: block !important; width: 100% !important; margin-bottom: 6px !important; } .ogs-cartpg__totals tr.woocommerce-shipping-totals td, .ogs-cartpg__totals tr.shipping td { display: block !important; width: 100% !important; text-align: left !important; } .ogs-cartpg__totals ul#shipping_method, .ogs-cartpg__totals .woocommerce-shipping-methods { list-style: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } .ogs-cartpg__totals .woocommerce-shipping-destination { display: block !important; font-size: 12.5px !important; color: #6B665E !important; margin-top: 5px !important; } .ogs-cartpg__totals .shipping-calculator-button { display: inline-block !important; margin-top: 8px !important; font-size: 11px !important; letter-spacing: .1em; text-transform: uppercase; color: #C4506A !important; } .ogs-cartpg__totals .order-total { border-bottom: 0 !important; padding-top: 16px !important; } .ogs-cartpg__totals .order-total th, .ogs-cartpg__totals .order-total td, .ogs-review tfoot .order-total th, .ogs-review tfoot .order-total td { font-family: "Fraunces", Georgia, serif !important; font-size: 23px !important; } /* ---- 7) BUTTONS ---- */ .ogs-cartpg__totals .checkout-button, #place_order, .woocommerce .cart_totals .checkout-button { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 18px 0 0 !important; padding: 18px 14px !important; border-radius: 9999px !important; background: #E8788E !important; border: 1px solid #E8788E !important; color: #fff !important; font-size: 11.5px !important; letter-spacing: .14em !important; text-transform: uppercase; white-space: normal !important; line-height: 1.3 !important; position: relative !important; z-index: 3 !important; } [class*="afterpay"], [id*="afterpay"], [class*="affirm"], .klarna-placement { display: block !important; position: static !important; clear: both !important; width: 100% !important; margin: 8px 0 12px !important; float: none !important; z-index: 1 !important; box-sizing: border-box !important; } /* ---- 8) duplicate price / member line cleanup ---- */ .ogslive-offer__price s, .ogslive-kcap__price s, .ogsbk-price s, .ogs-heroffer__price s, .ogs-promo__card--kit .was { display: none !important; } .ogs-codechip { display: none !important; } .ogs-memberline ~ .ogs-memberline { display: none !important; } .ogs-herokit{ position:absolute; left:clamp(20px,5vw,72px); bottom:clamp(20px,5vh,64px); z-index:60; display:flex; align-items:center; gap:16px; max-width:min(420px,86vw); padding:14px 22px 14px 14px; background:rgba(252,251,248,.82); backdrop-filter:blur(10px); border:1px solid rgba(232,120,142,.4); border-radius:16px; box-shadow:0 24px 60px -30px rgba(196,80,106,.5); font-family:var(--ff-body,"Inter Tight",system-ui,sans-serif); color:var(--ink,#0F0E0C); cursor:pointer; text-align:left; transition:transform .25s, box-shadow .25s; } .ogs-herokit:hover{ transform:translateY(-2px); box-shadow:0 30px 70px -30px rgba(196,80,106,.6); } .ogs-herokit__img{ width:76px; height:76px; object-fit:cover; border-radius:10px; flex:none; background:var(--paper-2,#F5F2EC); } .ogs-herokit__txt{ display:grid; gap:3px; min-width:0; } .ogs-herokit__eyebrow{ font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--seal-deep,#C4506A); } .ogs-herokit__spec{ font-size:12px; color:var(--ash,#6B665E); } .ogs-herokit__price{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; } .ogs-herokit__price s{ font-size:13px; color:var(--ash,#6B665E); } .ogs-herokit__price b{ font-family:var(--ff-display,"Fraunces",Georgia,serif); font-weight:300; font-size:28px; line-height:1; color:var(--seal-deep,#C4506A); } .ogs-herokit__price em{ font-style:normal; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ash,#6B665E); } .ogs-herokit__go{ margin-left:auto; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--seal-deep,#C4506A); white-space:nowrap; } @media(max-width:820px){ .ogs-herokit{ left:16px; right:16px; max-width:none; bottom:16px; padding:12px 16px 12px 12px; } .ogs-herokit__img{ width:58px; height:58px; } .ogs-herokit__go{ display:none; } .ogs-herokit__price b{ font-size:24px; } } @media(prefers-reduced-motion:reduce){ .ogs-herokit{ transition:none; } }