`, the WC widget * wrappers, AND every Elementor container that ISN'T inside a * header or footer template (those keep their original styling * so the Sonaar nav + footer don't go transparent). */ /* v3.6.2: PITCH BLACK body + nuclear fixed-overlay strategy. * * The user kept reporting "background still grey" because Elementor * paints individual sections with their own background-color (often * inherited from a global theme color or an inline `--bg-color` * variable). Even when we strip those, a stray wrapper sometimes * keeps a non-transparent fill. * * The bullet-proof solution: paint `body::before` as a fixed-layer * charcoal gradient (slightly lighter than #000, still deep) AND keep * wrappers transparent so the layer shows through (`z-index: -1`). * * We also force `color-scheme: dark` so native UI (scrollbars, form * controls) renders dark. */ html.woocommerce-checkout, html:has(body.woocommerce-checkout) { min-height: 100% !important; height: auto !important; max-height: none !important; background-color: #060608 !important; background-image: none !important; overflow-x: hidden !important; overflow-y: visible !important; } /* v3.8.17 — Document is the only vertical scroller; html/body must not be scrollports. */ html.woocommerce-checkout, html:has(body.woocommerce-checkout), body.woocommerce-checkout { color-scheme: dark !important; } body.woocommerce-checkout { background-color: transparent !important; background-image: none !important; /* Canvas is body::before (position:fixed). `fixed` here hurts scroll perf / chaining. */ background-attachment: scroll !important; background-repeat: no-repeat !important; color: #fafafa !important; position: relative !important; overflow-x: hidden !important; overflow-y: visible !important; height: auto !important; max-height: none !important; overscroll-behavior-y: auto !important; } /* v3.7.19: no ::before on html (wallet stacking). Body::before = canvas. */ body.woocommerce-checkout::before { content: "" !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; min-height: 100vh !important; background-color: #030304 !important; background-image: radial-gradient(ellipse 115% 72% at 50% -10%, rgba(255, 255, 255, 0.075) 0%, transparent 55%), linear-gradient(168deg, #161616 0%, #0b0b0c 46%, #040404 100%) !important; background-repeat: no-repeat !important; background-size: cover !important; z-index: -1 !important; pointer-events: none !important; display: block !important; } /* v3.9.0 — Theme header must stay above checkout main (esp. short “gate” pages) so * `a[href="#login"]` / cart in the header receive clicks. Popup Login modal uses * z-index 999999+ when `.active` — still above the header. */ body.woocommerce-checkout [data-elementor-type="header"], body.woocommerce-checkout .elementor-location-header, body.woocommerce-checkout header.site-header, body.woocommerce-checkout #masthead, body.woocommerce-checkout .site-header { position: relative !important; z-index: 200000 !important; } /* Pull main content below the raised header stacking context on gate checkout */ @supports selector(:has(*)) { body.woocommerce-checkout:has(.tgp-co-v2--gate) #content, body.woocommerce-checkout:has(.tgp-co-v2--gate) main, body.woocommerce-checkout:has(.tgp-co-v2--gate) .site-content, body.woocommerce-checkout:has(.tgp-co-v2--gate) .site-main { position: relative !important; z-index: 0 !important; } } /* ── v3.6.8: Theme wrapper backgrounds — force transparent ──────── * * The Hello Elementor theme (and most others) wraps content in * #page > main > #content / #primary > article > .entry-content. * These wrappers can carry a background-color from the theme * stylesheet (not inline — so JS can't strip them). They sit ON * TOP of the body and the ::before overlay, meaning their lighter * grey background shows through and overrides our #111. * * Fix: force every wrapper that could sit between and the * Elementor content to be transparent so the #111 body shows. * * Elementor Columns/Sections: even after clearing the Section * background in the Elementor editor, the COLUMN inside it may * still have a background set. If you have cleared only the * Section, also clear the Column: click the column → Style → * Background → remove colour. This rule handles it in CSS too. */ body.woocommerce-checkout #page, body.woocommerce-checkout #wrapper, body.woocommerce-checkout #content, body.woocommerce-checkout #primary, body.woocommerce-checkout .content-area, body.woocommerce-checkout main, body.woocommerce-checkout #main, body.woocommerce-checkout .site-main, body.woocommerce-checkout .site-content, body.woocommerce-checkout .site-inner, body.woocommerce-checkout .entry-content, body.woocommerce-checkout article.type-page, body.woocommerce-checkout .hentry, body.woocommerce-checkout .elementor-section-wrap, body.woocommerce-checkout .elementor-inner, /* Elementor column (the one the user may have forgotten to clear) */ body.woocommerce-checkout .elementor-column, body.woocommerce-checkout .elementor-column-wrap, /* Common theme wrappers */ body.woocommerce-checkout .ast-container, body.woocommerce-checkout .ast-row, body.woocommerce-checkout .fl-builder-content, body.woocommerce-checkout .page-content, body.woocommerce-checkout .wp-site-blocks, body.woocommerce-checkout .is-root-container { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* Apply same transparent treatment to the cart page */ body.woocommerce-cart #page, body.woocommerce-cart #wrapper, body.woocommerce-cart #content, body.woocommerce-cart #primary, body.woocommerce-cart .content-area, body.woocommerce-cart main, body.woocommerce-cart #main, body.woocommerce-cart .site-main, body.woocommerce-cart .site-content, body.woocommerce-cart .site-inner, body.woocommerce-cart .entry-content, body.woocommerce-cart article.type-page, body.woocommerce-cart .hentry, body.woocommerce-cart .elementor-section-wrap, body.woocommerce-cart .elementor-inner, body.woocommerce-cart .elementor-column, body.woocommerce-cart .elementor-column-wrap, body.woocommerce-cart .ast-container, body.woocommerce-cart .ast-row, body.woocommerce-cart .page-content, body.woocommerce-cart .wp-site-blocks, body.woocommerce-cart .is-root-container { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ── v3.6.5: Inline background stripping REMOVED (v3.7.21) — it broke * PayPal + Google Pay. Elementor grey is handled by transparency + * wrapper rules below. */ /* v3.6: NUCLEAR — every Elementor section / container / column / widget * INSIDE

on the checkout page is forced transparent. We also * zero-out the CSS variables Elementor inlines on individual sections * so a `--bg-color: #1a1a1a` declaration on a section block can't * fight us. Header and footer Elementor docs are excluded so the * Sonaar nav + footer keep their styling. */ body.woocommerce-checkout main [class*="elementor"]:not([data-elementor-type="header"]):not([data-elementor-type="footer"]), body.woocommerce-checkout #content [class*="elementor"]:not([data-elementor-type="header"]):not([data-elementor-type="footer"]), body.woocommerce-checkout main .e-con, body.woocommerce-checkout main .e-con-inner, body.woocommerce-checkout main .e-con-full, body.woocommerce-checkout #content .e-con, body.woocommerce-checkout #content .e-con-inner, body.woocommerce-checkout #content .e-con-full { background-color: transparent !important; background-image: none !important; --bg-color: transparent !important; --background-color: transparent !important; --e-section-bg-color: transparent !important; --e-global-color-background: transparent !important; } /* :has() fallback — paint EVERY ancestor chain of `.tgp-co-v2` transparent * (except the page header/footer). This catches a few wrappers that * don't have the elementor class on them. */ @supports selector(:has(*)) { body.woocommerce-checkout :is(div, section, main, article, aside):has(.tgp-co-v2):not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not(.tgp-co-v2) { background-color: transparent !important; background-image: none !important; --bg-color: transparent !important; --background-color: transparent !important; --e-section-bg-color: transparent !important; --e-global-color-background: transparent !important; } } /* Theme-level wrappers (Astra, Hello Elementor, WP defaults, * GeneratePress, OceanWP — common WC themes). */ body.woocommerce-checkout #page, body.woocommerce-checkout .site, body.woocommerce-checkout .site-wrapper, body.woocommerce-checkout #content, body.woocommerce-checkout main, body.woocommerce-checkout main#main, body.woocommerce-checkout .site-main, body.woocommerce-checkout .site-content, body.woocommerce-checkout .entry-content, body.woocommerce-checkout .entry, body.woocommerce-checkout article.page, body.woocommerce-checkout article.post, body.woocommerce-checkout .ast-container, body.woocommerce-checkout .ast-row, body.woocommerce-checkout .ast-primary-header-bar, body.woocommerce-checkout .ast-content, body.woocommerce-checkout #primary, body.woocommerce-checkout #secondary, body.woocommerce-checkout .container, body.woocommerce-checkout .container-fluid, body.woocommerce-checkout .page-header, body.woocommerce-checkout .page-content, body.woocommerce-checkout .inside-article, body.woocommerce-checkout .grid-container, body.woocommerce-checkout .content-area, body.woocommerce-checkout .hfeed, body.woocommerce-checkout .post-inner, body.woocommerce-checkout .single-content, body.woocommerce-checkout #wpadminbar + #page, /* FSE / block themes */ body.woocommerce-checkout .wp-site-blocks, body.woocommerce-checkout .is-root-container { background-color: transparent !important; background-image: none !important; color: inherit !important; } /* Elementor wrappers — ONLY the ones that aren't inside a `header` * or `footer` Theme Builder location. The `[data-elementor-type]` * attribute is on the outermost Elementor wrapper for each location * (header / footer / single-page / single-post / wp-page / wp-post / * archive / popup / etc.). We exclude header & footer so the * site-wide Sonaar nav keeps its dark theme intact and doesn't * leak transparent through to the body. */ body.woocommerce-checkout [data-elementor-type]:not([data-elementor-type="header"]):not([data-elementor-type="footer"]), body.woocommerce-checkout [data-elementor-type]:not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-section, body.woocommerce-checkout [data-elementor-type]:not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-container, body.woocommerce-checkout [data-elementor-type]:not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-column, body.woocommerce-checkout [data-elementor-type]:not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-widget-wrap, body.woocommerce-checkout [data-elementor-type]:not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-widget, body.woocommerce-checkout [data-elementor-type]:not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-element, body.woocommerce-checkout [data-elementor-type]:not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .e-con, body.woocommerce-checkout [data-elementor-type]:not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .e-con-inner, body.woocommerce-checkout [data-elementor-type]:not([data-elementor-type="header"]):not([data-elementor-type="footer"]) .elementor-widget-wp-widget-woocommerce_checkout { background-color: transparent !important; background-image: none !important; } /* Belt-and-braces — also target `

`'s Elementor descendants * regardless of `[data-elementor-type]` (some setups omit the attr * on inner containers). */ body.woocommerce-checkout main .elementor-section, body.woocommerce-checkout main .elementor-container, body.woocommerce-checkout main .elementor-column, body.woocommerce-checkout main .elementor-widget-wrap, body.woocommerce-checkout main .elementor-widget, body.woocommerce-checkout main .elementor-element, body.woocommerce-checkout main .e-con, body.woocommerce-checkout main .e-con-inner, body.woocommerce-checkout #content .elementor-section, body.woocommerce-checkout #content .elementor-container, body.woocommerce-checkout #content .elementor-column, body.woocommerce-checkout #content .elementor-widget-wrap, body.woocommerce-checkout #content .elementor-widget, body.woocommerce-checkout #content .e-con, body.woocommerce-checkout #content .e-con-inner { background-color: transparent !important; background-image: none !important; } /* v3.7.20: Let `.tgp-co-v2` set typography; do not force WC wrapper grey * (it sat on white cards and washed text). */ body.woocommerce-checkout form.checkout.woocommerce-checkout { color: inherit !important; } /* ─── BODY-LEVEL DEFENSIVE HIDES ────────────────────────────────── */ /* These selectors are intentionally NOT scoped under .tgp-co-v2 — the * default WC coupon notice renders OUTSIDE our form (inside a sibling * `

`) so a scoped rule * wouldn't reach it. Limited to `body.woocommerce-checkout` so it * cannot affect any other page. */ body.woocommerce-checkout .woocommerce-form-coupon-toggle, body.woocommerce-checkout > .woocommerce-form-coupon-toggle, body.woocommerce-checkout .woocommerce > .woocommerce-form-coupon-toggle, body.woocommerce-checkout form.checkout_coupon, body.woocommerce-checkout .woocommerce-info > .showcoupon, body.woocommerce-checkout > .woocommerce-info:not(.woocommerce-message):not(.woocommerce-error) { display: none !important; } /* Re-show success / error notices that we don't want hidden */ body.woocommerce-checkout > .woocommerce-message, body.woocommerce-checkout > .woocommerce-error { display: block !important; } /* Belt: hide ANY reward-points checkout banner that's still rendering * OUTSIDE our `.tgp-co-v2` wrapper (e.g. when functions.php hasn't been * deployed yet, or another plugin re-attached the old hook). The banner * we want is now re-hooked to `woocommerce_review_order_before_payment` * which renders INSIDE `.tgp-co-v2 #payment` — anything outside is * either the legacy raw DOM or a duplicate. */ body.woocommerce-checkout > .woocommerce-reward-points-text-container, body.woocommerce-checkout > .woocommerce > .woocommerce-reward-points-text-container, body.woocommerce-checkout .entry-content > .woocommerce-reward-points-text-container, body.woocommerce-checkout .site-main > .woocommerce-reward-points-text-container, body.woocommerce-checkout main > .woocommerce-reward-points-text-container { display: none !important; } /* v3.7.27: Do not flat-paint `#page` / wrappers #000 — that hid the gradient. * Transparent wrappers + `body::before` (critical CSS + rules above). */ body.woocommerce-checkout :is(.woocommerce, .woocommerce-checkout, form.checkout, .tgp-co-v2-form, .tgp-co-v2, .tgp-co-v2__grid, .tgp-co-v2__main, .tgp-co-v2__summary, .tgp-co-v2__summary-sticky) { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* v3.7.29 — Remove double top chrome (theme + Elementor section padding). */ body.woocommerce-checkout #primary, body.woocommerce-checkout #content, body.woocommerce-checkout .content-area, body.woocommerce-checkout .site-main, body.woocommerce-checkout .site-content, body.woocommerce-checkout article.page .entry-content, body.woocommerce-checkout .page-content { padding-top: 0 !important; margin-top: 0 !important; } body.woocommerce-checkout form.checkout.tgp-co-v2-form { margin-top: 0 !important; padding-top: 0 !important; } /* v3.8.17 — Nested overflow:auto on Elementor/theme wrappers → “double scroll” / iOS pan fights */ body.woocommerce-checkout form.checkout.tgp-co-v2-form, body.woocommerce-checkout .tgp-co-v2__grid { overflow: visible !important; min-height: 0 !important; } @supports selector(:has(*)) { body.woocommerce-checkout main .e-con:has(.tgp-co-v2), body.woocommerce-checkout main .e-con-inner:has(.tgp-co-v2), body.woocommerce-checkout main .elementor-section:has(.tgp-co-v2), body.woocommerce-checkout #content .e-con:has(.tgp-co-v2), body.woocommerce-checkout #content .elementor-section:has(.tgp-co-v2) { overflow-x: hidden !important; overflow-y: visible !important; max-height: none !important; min-height: 0 !important; height: auto !important; } } body.woocommerce-checkout .woocommerce-notices-wrapper { margin-top: 6px !important; } @supports selector(:has(*)) { body.woocommerce-checkout main .e-con-inner:has(.tgp-co-v2), body.woocommerce-checkout main .e-con:has(.tgp-co-v2):not([data-elementor-type="header"]):not([data-elementor-type="footer"]), body.woocommerce-checkout main .elementor-section:has(.tgp-co-v2):not([data-elementor-type="header"]):not([data-elementor-type="footer"]), body.woocommerce-checkout main .elementor-widget-wrap:has(.tgp-co-v2) { padding-top: 0 !important; margin-top: 0 !important; } } /* ─── ROOT TOKENS (page chrome on gradient canvas — header, steps) ─── */ .tgp-co-v2 { --co-surface: rgba(255, 255, 255, 0.06); --co-surface-2: rgba(255, 255, 255, 0.08); --co-surface-3: rgba(255, 255, 255, 0.10); --co-border: rgba(255, 255, 255, 0.12); --co-border-strong: rgba(255, 255, 255, 0.18); --co-text: #fafafa; --co-text-2: #e5e5e5; --co-text-3: #a3a3a3; --co-text-4: #737373; --co-accent: #ffffff; --co-accent-soft: rgba(255, 255, 255, 0.06); --co-accent-border: rgba(255, 255, 255, 0.18); --co-success: #10b981; --co-success-soft: rgba(16, 185, 129, 0.10); --co-success-border: rgba(16, 185, 129, 0.30); --co-error: #ef4444; --co-radius: 12px; --co-radius-sm: 8px; --co-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.22); --co-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.14); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--co-text); display: flex; flex-direction: column; gap: 18px; margin: 0 auto; /* Top: keep tight under theme header — back link row adds its own padding (v3.7.77). */ padding: 0 clamp(12px, 4vw, 22px) 0; box-sizing: border-box; max-width: 1200px; width: 100%; letter-spacing: -0.005em; } /* Thin row above Checkout title — return link only (no extra wrapper top padding). */ .tgp-co-v2__back-strip { margin: 0 !important; } .tgp-co-v2__back-cart-link { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.35 !important; color: var(--co-text-3) !important; text-decoration: none !important; border: none !important; background: transparent !important; transition: color 140ms ease, opacity 140ms ease !important; box-shadow: none !important; margin: 0 !important; padding: 6px 0 !important; } .tgp-co-v2__back-cart-link:hover { color: var(--co-text) !important; opacity: 1 !important; } /* v3.7.24: All checkout sections use Ghost-Coins style dark surface. */ .tgp-co-v2__card, .tgp-co-v2__summary-card, .tgp-co-v2__sidecard--coupon { --co-surface: rgba(255, 255, 255, 0.04); --co-surface-2: rgba(255, 255, 255, 0.06); --co-surface-3: rgba(255, 255, 255, 0.10); --co-border: rgba(255, 255, 255, 0.10); --co-border-strong: rgba(255, 255, 255, 0.16); --co-text: #fafafa; --co-text-2: #d4d4d8; --co-text-3: #a1a1aa; --co-text-4: #6b7280; --co-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 30px rgba(0, 0, 0, 0.44); color: var(--co-text); color-scheme: dark !important; } .tgp-co-v2__card, .tgp-co-v2__summary-card { background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.065), transparent 62%), radial-gradient(circle at 12% 88%, rgba(255, 255, 255, 0.02), transparent 55%), var(--co-surface) !important; } .tgp-co-v2 #payment { color-scheme: dark !important; } /* ─── HEADER ───────────────────────────────────────────────────── */ .tgp-co-v2__header { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 4px 0; } .tgp-co-v2__header-text { min-width: 0; } .tgp-co-v2__title { margin: 0; font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.03em; color: var(--co-text); font-family: 'Inter', sans-serif; line-height: 1.1; } .tgp-co-v2__sub { margin: 6px 0 0; font-size: 13px; color: var(--co-text-3); line-height: 1.5; font-weight: 500; } /* Step pills — minimal monochrome */ .tgp-co-v2__steps { list-style: none; margin: 0; padding: 4px; display: inline-flex; align-items: center; gap: 2px; background: var(--co-surface); border: 1px solid var(--co-border); border-radius: 999px; } .tgp-co-v2__steps li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--co-text-3); letter-spacing: 0; } .tgp-co-v2__steps-num { width: 20px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--co-text-3); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .tgp-co-v2__steps li.is-done { color: var(--co-success); } .tgp-co-v2__steps li.is-done .tgp-co-v2__steps-num { background: var(--co-success-soft); color: var(--co-success); } .tgp-co-v2__steps li.is-active { color: var(--co-text); background: rgba(255, 255, 255, 0.06); } .tgp-co-v2__steps li.is-active .tgp-co-v2__steps-num { background: var(--co-text); color: #0a0a0a; } /* Mobile summary toggle removed — keep selector hidden if stale markup/cache. */ .tgp-co-v2__mobile-summary-toggle { display: none !important; } /* ─── GRID ─────────────────────────────────────────────────────── */ /* v3.8.16: Outer stack is flex — checkout form only (login lives inside Account card). * The form itself is a real two-column grid (replaces display:contents — Safari often broke scroll ancestry). */ .tgp-co-v2__grid { display: flex; flex-direction: column; gap: 18px; align-items: stretch; min-width: 0; } /* Empty POST target for checkout login fields — display:none removes any scroll/interaction oddities. */ .tgp-co-v2-screen-reader-form { display: none !important; } .tgp-co-v2-form--inner-grid.checkout, form.checkout.tgp-co-v2-form--inner-grid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 18px; align-items: start; width: 100%; min-width: 0; } /* When WC's checkout AJAX rejects a submission (e.g. "Please read and accept * the terms…"), it `$('form.checkout').prepend(notice)` — so the notice * becomes the FIRST grid item. With our 1fr / 430px grid that pushed * `.__main` into the right column and forced `.__summary` to a new row, * leaving an empty left half. Force any directly-prepended WC notice (the * div, the legacy ul, or the NoticeGroup wrapper) to span BOTH columns. */ form.checkout.tgp-co-v2-form--inner-grid > .woocommerce-NoticeGroup, form.checkout.tgp-co-v2-form--inner-grid > .woocommerce-NoticeGroup-checkout, form.checkout.tgp-co-v2-form--inner-grid > .woocommerce-notices-wrapper, form.checkout.tgp-co-v2-form--inner-grid > .woocommerce-error, form.checkout.tgp-co-v2-form--inner-grid > .woocommerce-info, form.checkout.tgp-co-v2-form--inner-grid > .woocommerce-message, form.checkout.tgp-co-v2-form--inner-grid > ul.woocommerce-error, form.checkout.tgp-co-v2-form--inner-grid > ul.woocommerce-info, form.checkout.tgp-co-v2-form--inner-grid > ul.woocommerce-message { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; margin: 0 0 4px !important; padding: 0 !important; background: transparent !important; border: 0 !important; list-style: none !important; } /* Inner notice element gets its own padded chip surface. */ form.checkout.tgp-co-v2-form--inner-grid > .woocommerce-NoticeGroup .woocommerce-error, form.checkout.tgp-co-v2-form--inner-grid > .woocommerce-NoticeGroup .woocommerce-info, form.checkout.tgp-co-v2-form--inner-grid > .woocommerce-NoticeGroup .woocommerce-message { margin: 0 0 12px !important; } .tgp-co-v2__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; } /* ─── CARD ─────────────────────────────────────────────────────── */ /* v3.8.15: overflow:hidden on large cards trapped vertical pan on iOS (scroll stuck). * Corners still read cleanly from surface + border; payment/login override anyway. */ .tgp-co-v2__card { background: var(--co-surface); border: 1px solid var(--co-border); border-radius: var(--co-radius); box-shadow: var(--co-shadow-sm); overflow: visible; transition: border-color 160ms ease; } /* v3.7.17: Payment stacks PayPal + Google Pay; bottom iframe/shadow extends past the box. */ .tgp-co-v2__card--payment { overflow: visible !important; } /* Login card — legacy hook if markup still uses wrapper */ .tgp-co-v2__card--login { overflow: visible !important; } .tgp-co-v2__account-login-wrap .tgp-co-v2__checkout-login { padding: 0; } /* ─── Checkout login — optional dropdown (toggle + panel) ─ */ .tgp-co-v2__checkout-login { padding: 0; } .tgp-co-v2__checkout-login-dropdown { border: 1px solid var(--co-border); border-radius: var(--co-radius-sm); background: rgba(0, 0, 0, 0.22); overflow: hidden; } .tgp-co-v2__checkout-login-toggle { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100% !important; margin: 0 !important; min-height: 44px !important; padding: 12px 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--co-text) !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; text-align: left !important; cursor: pointer !important; box-shadow: none !important; transition: background-color 140ms ease !important; } .tgp-co-v2__checkout-login-toggle:hover, .tgp-co-v2__checkout-login-toggle:focus-visible { background: rgba(255, 255, 255, 0.05) !important; outline: none !important; } .tgp-co-v2__checkout-login-toggle:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important; } .tgp-co-v2__checkout-login-toggle-text { flex: 1; min-width: 0; } .tgp-co-v2__checkout-login-toggle-chev { flex-shrink: 0; display: flex; color: var(--co-text-3); transition: transform 180ms ease; } .tgp-co-v2__checkout-login-dropdown.is-open .tgp-co-v2__checkout-login-toggle-chev { transform: rotate(180deg); color: var(--co-text-2); } .tgp-co-v2__checkout-login-panel { padding: 16px 16px 18px; border-top: 1px solid var(--co-border); } .tgp-co-v2__checkout-login-panel[hidden] { display: none !important; } .tgp-co-v2__checkout-login-panel-hint { margin: 0 0 16px; padding-top: 0; font-size: 12px; line-height: 1.55; font-weight: 500; color: var(--co-text-3); } .tgp-co-v2__checkout-login-form { display: flex; flex-direction: column; gap: 0; } /* Stack label + input with gap so theme / `woocommerce.css` `.form-row { margin !important }` cannot collapse label–input spacing (was visually “stuck together”). */ .tgp-co-v2__checkout-login-form .woocommerce-form-row.form-row-wide, .tgp-co-v2__checkout-login-form p.form-row.form-row-wide { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; margin: 0 0 22px !important; padding: 0 !important; } .tgp-co-v2__checkout-login-form .form-row:not(.tgp-co-v2__checkout-login__actions):not(.form-row-wide) { margin: 0 0 18px !important; padding: 0 !important; } .tgp-co-v2__checkout-login-form label { display: block !important; margin: 0 !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--co-text-3) !important; line-height: 1.45 !important; } .tgp-co-v2__checkout-login-form input.input-text { width: 100% !important; box-sizing: border-box !important; height: 44px !important; margin: 0 !important; padding: 0 14px !important; border-radius: var(--co-radius-sm) !important; border: 1px solid var(--co-border-strong) !important; background: rgba(0, 0, 0, 0.35) !important; color: var(--co-text) !important; font-size: 14px !important; font-family: 'Inter', sans-serif !important; } .tgp-co-v2__checkout-login-form input.input-text:focus { outline: none !important; border-color: rgba(255, 255, 255, 0.42) !important; } .tgp-co-v2__checkout-login__actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 16px !important; margin: 18px 0 0 !important; } .tgp-co-v2__checkout-login__actions .woocommerce-form-login__rememberme { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--co-text-2) !important; margin: 0 !important; } .tgp-co-v2__checkout-login__submit { width: 100% !important; margin: 0 !important; min-height: 46px !important; border-radius: var(--co-radius-sm) !important; background: var(--co-accent) !important; color: #0a0a0a !important; border: 0 !important; font-weight: 700 !important; font-size: 13.5px !important; cursor: pointer !important; } .tgp-co-v2__checkout-login__submit:hover { opacity: 0.94 !important; } .tgp-co-v2__checkout-login__lost { margin: 18px 0 0 !important; text-align: center !important; font-size: 12.5px !important; } .tgp-co-v2__checkout-login__lost a { color: var(--co-text-3) !important; text-decoration: underline !important; text-underline-offset: 3px !important; } .tgp-co-v2__checkout-login__lost a:hover { color: var(--co-text) !important; } /* ─── Checkout gate: account required (no guest / no checkout signup) ─ */ .tgp-co-v2--gate { max-width: 560px; } .tgp-co-v2__gate-layout { display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0; } .tgp-co-v2__card--gate-reason { padding: 20px 22px 22px; } .tgp-co-v2__gate-reason-top { display: flex; gap: 16px; align-items: flex-start; } .tgp-co-v2__gate-reason-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--co-success-soft); border: 1px solid var(--co-success-border); color: var(--co-success); } .tgp-co-v2__gate-reason-copy { min-width: 0; } .tgp-co-v2__gate-reason-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--co-text); font-family: 'Inter', sans-serif; line-height: 1.25; } .tgp-co-v2__gate-reason-lead { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--co-text-3); font-weight: 500; } .tgp-co-v2__gate-points { margin: 16px 0 0; padding: 0 0 0 18px; color: var(--co-text-2); font-size: 13px; line-height: 1.5; font-weight: 500; } .tgp-co-v2__gate-points li { margin: 0 0 8px; padding-left: 4px; } .tgp-co-v2__gate-points li:last-child { margin-bottom: 0; } .tgp-co-v2__gate-notice { padding: 14px 16px; border-radius: var(--co-radius-sm); border: 1px solid var(--co-border); background: rgba(0, 0, 0, 0.28); } .tgp-co-v2__gate-notice-text { margin: 0; font-size: 13px; line-height: 1.45; color: var(--co-text-2); font-weight: 500; } .tgp-co-v2__card--gate-fallback .tgp-co-v2__gate-fallback-body { padding: 20px 22px 22px; } .tgp-co-v2__gate-fallback-text { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--co-text-3); } .tgp-co-v2__gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 4px 2px 8px; } .tgp-co-v2__gate-actions-label { font-size: 13px; font-weight: 600; color: var(--co-text-3); } .tgp-co-v2__gate-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none !important; transition: opacity 140ms ease, transform 140ms ease, border-color 140ms ease, background 140ms ease; box-sizing: border-box; } /* Gate “Create account” uses

Review Licenses