/** * Best Days Rx Storefront - frontend styles. * Everything is scoped beneath .bdrx-storefront so it can never leak onto * theme chrome, other WooCommerce pages, or anything outside the shop * archive this plugin owns. No selector in this file targets a bare * element, `.woocommerce`, `button`, `a`, `select`, `ul.products`, `body`, * or heading tag without the .bdrx-storefront (or a more specific * .bdrx-* ) ancestor/prefix. */ /* * ---------- Full-bleed breakout ---------- * .bdrx-storefront-bleed escapes whatever width the theme's own content * wrapper imposes (max-width, percentage+float sidebar layout, a * Bootstrap-style .container, etc.). The actual escape happens entirely * via ancestor neutralization (the :has() rule below, plus * assets/js/storefront.js's initAncestorBreakout() catch-all) - both of * which force EVERY ancestor up to to width:100% - so, once * those run, this element's own containing block is already exactly as * wide as itself. width: 100% here is therefore all this element * needs. * * v0.8.34 ROOT CAUSE FIX: this rule previously used * position:relative; left:50%; width:100vw; transform:translateX(-50%) - * a common viewport-breakout technique, but one with a well-documented * flaw: 100vw is defined relative to the browser's layout viewport, * which in most browsers INCLUDES the vertical scrollbar's own track * width, while left:50% (computed against this element's actual, * scrollbar-adjusted containing block once neutralized to width:100%) * and the rest of the page's normal layout do NOT include it. Once the * ancestor-neutralization layers (unchanged, confirmed already * theme-agnostic and comprehensive on their own) make this element's * containing block exactly body-width, the extra few pixels 100vw adds * for the scrollbar are pure excess: this element became slightly * WIDER than the page's own true content width and shifted, so its * RIGHT edge no longer lined up with the theme header's own right edge * (which was never computed with vw at all) - reproducing exactly the * "storefront ends before the header on the right" symptom, and * explaining why Hero-level and Product Card-level CSS changes never * touched it: those live entirely inside this element, several layers * below the actual mismatch. It also explains why a broad Product * Layout change could shove the whole storefront right: any rule * touching a wide-enough descendant's own margin/width interacts with * this already-mismatched outer box's available space, moving where * the visibly clipped/overflowing portion sits without ever fixing the * box itself. Removing the vw/transform technique entirely and relying * solely on width:100% against an already-neutralized, scrollbar-safe * containing block removes the mismatch at its source rather than * compensating for it further down the tree. */ .bdrx-storefront-bleed { width: 100%; } /* * ---------- Ancestor neutralization (defensive, precisely scoped) ---------- * :has() lets these rules match ONLY an ancestor that actually contains * our bleed wrapper - never any other element sharing the same class name * elsewhere on the page (a theme header/footer using .container, for * example, is untouched, since it does not contain .bdrx-storefront-bleed * as a descendant). This is now the PRIMARY breakout mechanism for * themes using one of these common wrapper class names (immediate, no * JS delay); assets/js/storefront.js's initAncestorBreakout() remains * the guaranteed catch-all for any other, unrecognized theme wrapper * class name, at the cost of a brief flash before it runs on that one * case. Layout properties only - never color/font/other theme styling - * and only on the one template that ever contains .bdrx-storefront-bleed. */ .site-main:has(.bdrx-storefront-bleed), .content-area:has(.bdrx-storefront-bleed), #primary:has(.bdrx-storefront-bleed), #content:has(.bdrx-storefront-bleed), #main:has(.bdrx-storefront-bleed), .container:has(.bdrx-storefront-bleed), .container-fluid:has(.bdrx-storefront-bleed), .entry-content:has(.bdrx-storefront-bleed), .page-content:has(.bdrx-storefront-bleed), .wrapper:has(.bdrx-storefront-bleed), .wrap:has(.bdrx-storefront-bleed), .content-wrapper:has(.bdrx-storefront-bleed), .content-area-wrapper:has(.bdrx-storefront-bleed) { max-width: none !important; width: 100% !important; overflow: visible !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; } .bdrx-storefront { --bdrx-border: #e6e1d8; --bdrx-text: #1c1c1a; --bdrx-muted: #746f66; --bdrx-navy: #123c3d; /* primary CTA / quiz strip - dark navy/teal */ --bdrx-navy-hover: #0c2b2c; /* v0.8.40 - dedicated, NOT admin-customizable filter-active color - see the ROOT CAUSE comment on .bdrx-filter-term__box's own active rule below for why this exists as a separate variable from --bdrx-navy, rather than reusing it. Same default value as --bdrx-navy's own default, so nothing changes visually for any site that has never customized Button Background - this variable is simply never written to by Frontend\AppearanceStyles.php at all (confirmed by direct read - that class's own $color_map has no entry mapping any Appearance setting to this variable name), so it can never end up lighter/paler than the checkbox's own white checkmark contrast requires, no matter what an admin sets Button Background to. */ --bdrx-filter-active: #123c3d; --bdrx-button-text: #ffffff; --bdrx-coral: #cf5137; /* price / active accent - warm red/coral */ --bdrx-hero-bg: #f6f0e6; /* soft warm/off-white */ --bdrx-card-bg: #faf7f1; /* subtle warm/light-gray card background */ --bdrx-page-bg: transparent; --bdrx-hero-heading-size: clamp(44px, 4.2vw, 64px); --bdrx-base-font-size: 16px; --bdrx-tablet-cols: 2; --bdrx-mobile-cols: 1; max-width: 1560px; margin: 0 auto; padding: 0 0 64px; /* v0.8.37: horizontal padding removed - see .bdrx-storefront__gutter and Frontend\LayoutRenderer's own docblock on render_default_layout() for the full root-cause explanation. Vertical (bottom) spacing is unchanged. */ color: var(--bdrx-text); background: var(--bdrx-page-bg); box-sizing: border-box; font-size: var(--bdrx-base-font-size); } /* * v0.8.37/v0.8.39 - carries the EXACT horizontal padding .bdrx-storefront * itself used to have (28px desktop / 20px Tablet-Mobile via the * existing --bdrx-mobile-page-gutter variable, unchanged values) - * wraps every top-level section that remains after v0.8.39's removal * of the old Hero/Banner system (Catalog, Trust Strip, Quiz CTA - see * Frontend\LayoutRenderer::render_default_layout()). Originally built * so Hero specifically would never inherit this padding (v0.8.37); now * simply the real, unchanged gutter mechanism for the sections that * are still rendered, kept exactly as-is since it was never Hero- * specific plumbing to begin with. */ .bdrx-storefront__gutter { padding: 0 28px; } .bdrx-storefront *, .bdrx-storefront *::before, .bdrx-storefront *::after { box-sizing: inherit; } /* Product card size/style presets, applied via a wrapper modifier class */ .bdrx-storefront--img-compact .bdrx-product-grid li.product img { height: clamp(170px, 13vw, 200px) !important; } .bdrx-storefront--img-large .bdrx-product-grid li.product img { height: clamp(250px, 19vw, 290px) !important; } /* ==================== Body layout ==================== */ .bdrx-storefront__body { display: flex; align-items: flex-start; gap: 32px; } .bdrx-storefront__main { flex: 1 1 auto; min-width: 0; } /* ==================== Filters ==================== */ /* v0.8.25: [data-bdrx-filter-inline-mount] replaces the old .bdrx-storefront__filters wrapper - the real