/** * WooCommerce bridge. * * The Woo DVLA Private Plates plugin fully styles the plate product page, * cart, checkout, order confirmation and My Account (its CSS scopes to * `.woocommerce-cart .site-main > .woocommerce`, `.entry-content`, etc.). * The theme's job here is only to provide a clean shell those styles can * land in: shared canvas, container width and spacing - and never to * fight the plugin with heavier selectors. */ .woocommerce-page .site-main, .single-product .site-main { background: var(--bp-canvas); } .woo-shell { padding: var(--bp-s6) 0 var(--bp-s7); } /* The plate product page brings its own full-bleed layout via the plugin; give it the whole width with no shell padding at all - the template's own bands run flush from header to footer. */ .single-product .woo-shell { padding: 0; } .single-product .woo-shell .bp-container { max-width: none; padding: 0; } /* Generic Woo notices outside cart/checkout (the plugin styles those pages itself) - keep the same voice. */ .woocommerce-message, .woocommerce-info, .woocommerce-error { font-family: var(--bp-font); border-radius: var(--bp-radius-sm); } /* Buttons rendered by Woo templates the plugin does not touch */ .site-main .woocommerce a.button, .site-main .woocommerce button.button { font-family: var(--bp-font); font-weight: 600; border-radius: var(--bp-radius-pill); background: var(--bp-navy); color: var(--bp-white); transition: background var(--bp-fast) var(--bp-ease); } .site-main .woocommerce a.button:hover, .site-main .woocommerce button.button:hover { background: var(--bp-royal); color: var(--bp-white); } /* ============================================================ MY ACCOUNT SHELL v2 (theme v1.3.13) Brings the account pages in line with the landing-page design language: grander full-bleed navy hero, wider content shell, canvas background. Component styling (nav, cards, tabs) lives in the plugins' account stylesheets. ============================================================ */ /* Hero: taller, gradient navy like the lp heroes, tighter type. */ body.woocommerce-account .band.band--tight { background: linear-gradient(150deg, var(--bp-navy) 0%, var(--bp-navy-soft) 100%); padding: var(--bp-s8) 0; } body.woocommerce-account .band.band--tight h1 { font-size: var(--bp-text-3xl); letter-spacing: -0.01em; margin: 0; } /* Shell: canvas background, wider container, clear breathing room between the hero band and the tab bar / first card. */ body.woocommerce-account .woo-shell { background: var(--bp-canvas); padding: var(--bp-s6) 0 var(--bp-s8); } body.woocommerce-account .woo-shell > .bp-container { max-width: var(--bp-container); } /* Account pages: clip any stray horizontal overflow so the hero band always spans edge-to-edge with no phantom gap/scrollbar on narrow viewports. `clip` (not hidden) so sticky positioning keeps working. Note: overflow set on alone gets PROPAGATED to the viewport by the spec — which can leave the gap visible at some widths — so the clip is applied at the html level too (via :has), with body and shell as belt-and-braces. */ html:has(body.woocommerce-account) { overflow-x: clip; } body.woocommerce-account { overflow-x: clip; max-width: 100%; } body.woocommerce-account .woo-shell { overflow-x: clip; max-width: 100%; }