/* ============================================================ blafili theme — WordPress adaptation layer Extends the SIGNAL FIELD system (style.css) with the pieces WP needs: dropdown navigation (new IA: Receivers/Transmitters/ Solutions/Learn/Support/About), mobile submenu accordion, archive pagination, and core content alignment classes. Everything below uses the existing design tokens only. ============================================================ */ /* ---------- desktop dropdowns (.main-nav) ---------- */ .main-nav > ul{ display:flex; gap:6px; list-style:none; margin:0; padding:0; } .main-nav li{ position:relative; } .main-nav a{ display:inline-block; } .main-nav .sub-menu{ position:absolute; top:calc(100% + 10px); left:50%; translate:-50% 0; min-width:230px; list-style:none; margin:0; padding:10px; background:rgb(10 14 19 / .96); border:1px solid var(--line2); border-radius:18px; box-shadow:0 30px 70px -30px rgb(0 0 0 / .75); display:grid; gap:2px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } [data-theme="light"] .main-nav .sub-menu{ background:rgb(255 255 255 / .98); box-shadow:0 30px 70px -32px rgb(20 35 55 / .4); } /* invisible hover bridge so the pointer can travel to the panel */ .main-nav .sub-menu::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; } .main-nav .sub-menu a{ display:block; padding:10px 14px; border-radius:10px; font:500 .88rem/1.3 var(--f-body); color:var(--mut); white-space:nowrap; } .main-nav .sub-menu a::after{ display:none; } .main-nav .sub-menu a:hover{ color:var(--txt); background:var(--acc-soft); } .main-nav .sub-menu .sub-menu{ top:-11px; left:100%; translate:0 0; } /* hover opening is JS-driven (.is-open with a close delay for pointer travel); :focus-within keeps keyboard access. Bridges stay for the first hop. */ .main-nav li.is-open > .sub-menu, .main-nav li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); } /* ---------- mega menu (product categories) — split navigation panel ---------- Group structure: TOP > label li ("By output"/"By scene", class bf-mega-label) > link column, plus one synthetic .bf-mega-prods slot appended by the theme (live WooCommerce cards). The top li carries .bf-mega. The panel anchors to .head-inner (li.bf-mega is position:static), so it spans the whole container and sits FLUSH under the header — nav row and panel form one uninterrupted hover corridor, which is what keeps pointer drift from dropping or swapping the menu. Product panels split into a left navigation rail (the menu's own groups, big quiet links) and a right featured-products strip. */ .main-nav li.bf-mega{ position:static; } .head-inner{ position:relative; } .main-nav li.bf-mega > .sub-menu{ left:0; right:0; top:100%; translate:0 0; width:auto; min-width:0; max-width:none; display:flex; align-items:stretch; gap:0; padding:30px clamp(20px,3vw,44px) 36px; background:var(--raise); border:1px solid var(--line); border-top:none; border-radius:0 0 14px 14px; box-shadow:0 44px 90px -48px rgb(20 35 55 / .5); } .main-nav li.bf-mega.is-open > .sub-menu, .main-nav li.bf-mega:focus-within > .sub-menu{ translate:0 0; } /* closed bands must NEVER catch the pointer: every band spans the full container, so a hidden sibling sits exactly under the open one — if it stays hit-testable, entering the open band can fire ghost mouseenter events on the sibling and swap the panel. */ .main-nav li.bf-mega:not(.is-open):not(:focus-within) > .sub-menu{ pointer-events:none; } /* bridge: cover the strip between the nav row and the band across the full container width — the pointer can never fall out of the open item */ .main-nav li.bf-mega > .sub-menu::before{ top:-30px; height:30px; } /* ---- product split panel (Receivers / Transmitters) ---- */ .main-nav li.bf-mega:not(.bf-mega-apps) > .sub-menu{ display:flex; align-items:stretch; gap:clamp(32px,3vw,56px); padding:34px clamp(24px,3vw,48px) 42px; } /* left navigation rail: the menu's group columns, stacked */ .main-nav li.bf-mega:not(.bf-mega-apps) > .sub-menu > li{ flex:0 0 auto; width:clamp(200px,15.5vw,236px); padding:0 !important; border:none !important; margin:0 !important; opacity:0; transform:translateY(14px); transition:opacity .35s var(--ease), transform .35s var(--ease); } .main-nav li.bf-mega.is-open:not(.bf-mega-apps) > .sub-menu > li, .main-nav li.bf-mega:focus-within:not(.bf-mega-apps) > .sub-menu > li{ opacity:1; transform:translateY(0); } .main-nav li.bf-mega:not(.bf-mega-apps).is-open > .sub-menu > li:nth-child(2), .main-nav li.bf-mega:not(.bf-mega-apps):focus-within > .sub-menu > li:nth-child(2){ transition-delay:70ms; } .main-nav li.bf-mega:not(.bf-mega-apps).is-open > .sub-menu > li:nth-child(3), .main-nav li.bf-mega:not(.bf-mega-apps):focus-within > .sub-menu > li:nth-child(3){ transition-delay:140ms; } /* nested group lists are static content inside the rail — always visible */ .main-nav .bf-mega .sub-menu .sub-menu{ position:static; translate:0 0; opacity:1; visibility:visible; transform:none; display:grid; gap:0; background:none; border:none; box-shadow:none; padding:0; min-width:0; width:auto; } .main-nav .bf-mega .sub-menu .sub-menu::before{ display:none; } .main-nav .bf-mega .sub-menu .sub-menu a{ display:block; white-space:normal; padding:9px 0; border-radius:0; border-bottom:none; font:600 16.5px/1.35 var(--f-disp); letter-spacing:-.005em; color:var(--ink-3); transition:color .2s var(--ease); } /* the first entry of each group is the "all" page — inked like the active item on the reference rail */ .main-nav .bf-mega .sub-menu .sub-menu li:first-child > a{ color:var(--ink); } .main-nav .bf-mega .sub-menu .sub-menu a:hover{ color:var(--acc); background:none; } .main-nav .bf-mega .sub-menu .sub-menu a::before{ display:none; } /* group heading row — a non-interactive (the walker filter swaps the seeded '#' link for a span); the `> a` twin keeps the same look if an admin re-creates a link. */ .main-nav .bf-mega-label > span, .main-nav .bf-mega-label > a{ display:block; font:600 11px/1 var(--f-disp) !important; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3) !important; padding:0 !important; border-radius:0; margin-bottom:12px; cursor:default; pointer-events:none; white-space:nowrap; } .main-nav .bf-mega-label > span::before, .main-nav .bf-mega-label > a::before{ display:none; } /* ---- right side: featured product cards (synthetic .bf-mega-prods slot) ---- Same specificity as the rail rule above so it wins by source order, plus order:9 so the strip always sits after the rail whatever the DOM order. Anchor rules are scoped through .main-nav .sub-menu so the generic dropdown-link rule cannot flatten the cards back to block links. */ .main-nav li.bf-mega:not(.bf-mega-apps) > .sub-menu > li.bf-mega-prods{ order:9; flex:1 1 auto; width:auto; min-width:0; padding:0 !important; border:none !important; margin-top:0 !important; opacity:1 !important; transform:none !important; } .bmp-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:20px; } .bmp-eyebrow{ font:600 11px/1 var(--f-disp); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); } .main-nav .sub-menu a.bmp-all{ display:inline-flex; align-items:center; gap:8px; padding:0; border-radius:0; font:600 15px/1.2 var(--f-disp); color:var(--ink); white-space:nowrap; } .bmp-all .cta-arrow{ width:15px; height:15px; color:currentColor; transition:transform .3s var(--ease); } .main-nav .sub-menu a.bmp-all:hover{ color:var(--acc); background:none; } .bmp-all:hover .cta-arrow{ transform:translateX(4px); } .bmp-grid{ /* fixed three tracks, capped to the card size the Receivers panel renders — a two-product category keeps the same card size and packs left */ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:830px; } /* R7: the card chrome is shared with the PDP related rail (a.r-card.bmp-card there) — same specificity plan as the rail: the anchor rules outrank any generic link styling in either tree. */ .main-nav .sub-menu a.bmp-card, .rel-track a.bmp-card{ position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:0; border-radius:14px; overflow:hidden; background:var(--card); color:var(--ink); white-space:normal; transition:box-shadow .3s var(--ease), transform .3s var(--ease-out); } .main-nav .sub-menu a.bmp-card:hover, .rel-track a.bmp-card:hover{ box-shadow:var(--shadow-pop); transform:translateY(-3px); background:var(--card); } .main-nav .sub-menu a.bmp-card:hover .bmp-name, .rel-track a.bmp-card:hover .bmp-name{ text-decoration:underline; text-underline-offset:3px; } .bmp-rate{ position:absolute; top:12px; right:12px; z-index:1; display:inline-flex; align-items:center; gap:5px; background:var(--raise); border-radius:999px; padding:6px 11px; font:600 12.5px/1 var(--f-disp); color:var(--ink); } .bmp-rate i{ font-style:normal; color:var(--acc); font-size:12.5px; line-height:1; } .bmp-media{ display:grid; place-items:center; width:100%; margin:0; padding:32px 26px 12px; } .bmp-media img{ width:auto; max-width:min(78%,238px); height:auto; mix-blend-mode:multiply; } /* unscoped: the two-line clamp name renders in the mega panel and the PDP related rail alike; no generic `b` rule competes in either tree */ .bmp-name{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal; margin:4px 20px 0; min-height:2.8em; font:600 15.5px/1.4 var(--f-disp); letter-spacing:-.005em; color:var(--ink); } .bmp-price{ display:flex; align-items:baseline; gap:8px; margin:10px 20px 18px; margin-top:auto; padding-top:10px; font:400 13.5px/1 var(--f-body); color:var(--ink-2); } .bmp-price b{ font:600 15px/1 var(--f-disp); color:var(--ink); } .bmp-price s{ opacity:.55; } /* the synthetic slot is desktop-panel content only — never leaks into the mobile nav sheet */ .m-nav li.bf-mega-prods{ display:none !important; } /* the Support apps tile panel keeps its centered tile row */ .main-nav li.bf-mega-apps > .sub-menu{ background:var(--raise); } /* ---------- cart drawer ---------- */ /* visibility flips AFTER the slide-out finishes so closing animates too */ .bf-drawer{ position:fixed; inset:0; z-index:80; visibility:hidden; transition:visibility 0s linear .5s; } .bf-drawer.open{ visibility:visible; transition-delay:0s; } .bf-drawer-backdrop{ position:absolute; inset:0; background:rgb(4 6 9 / .55); opacity:0; transition:opacity .35s var(--ease); } .bf-drawer.open .bf-drawer-backdrop{ opacity:1; } .bf-drawer-panel{ position:absolute; top:0; right:0; bottom:0; z-index:1; width:min(420px, 100vw); background:var(--panel); border-left:1px solid var(--line2); display:flex; flex-direction:column; transform:translateX(102%); transition:transform .45s var(--ease-out); box-shadow:-40px 0 80px -30px rgb(0 0 0 / .6); } .bf-drawer.open .bf-drawer-panel{ transform:translateX(0); } [data-theme="light"] .bf-drawer-panel{ background:#fff; box-shadow:-40px 0 80px -36px rgb(20 35 55 / .45); } .bf-drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 24px; border-bottom:1px solid var(--line); } .bf-drawer-head h3{ font:600 1.05rem/1 var(--f-disp); letter-spacing:.02em; } .bf-drawer-close{ width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line2); border-radius:50%; color:var(--txt); transition:border-color .3s, color .3s; } .bf-drawer-close:hover{ border-color:var(--acc); color:var(--acc); } .bf-drawer-close svg{ width:15px; height:15px; } .bf-drawer-body{ flex:1; overflow-y:auto; padding:18px 24px; display:grid; gap:14px; align-content:start; } /* fragments swap the inner id container; the grid gap is carried by the inner container */ .bf-drawer-body #bfCartDrawerBody{ display:grid; gap:14px; align-content:start; } .bf-drawer-empty{ display:grid; gap:10px; justify-items:center; text-align:center; padding:44px 10px; } .bf-drawer-empty .w-ico{ margin:0 0 6px; } .bf-drawer-empty b{ font:600 1.02rem/1.3 var(--f-disp); } .bf-drawer-empty p{ font-size:.88rem; color:var(--mut); max-width:30ch; margin:0 0 8px; } .bf-cart-item{ display:flex; gap:14px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); } .bf-cart-item figure{ width:58px; height:58px; border-radius:12px; overflow:hidden; flex:0 0 auto; margin:0; background:linear-gradient(160deg,#fff,#e9eef3); border:1px solid var(--line); } .bf-cart-item figure img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; } .bf-cart-item .bci-info{ flex:1; min-width:0; } .bf-cart-item .bci-info b{ display:block; font:600 .9rem/1.3 var(--f-disp); } .bf-cart-item .bci-info span{ font-size:.8rem; color:var(--mut); } .bf-cart-item .bci-price{ font:600 .88rem/1 var(--f-disp); color:var(--acc); white-space:nowrap; } /* drawer line price pairs the struck regular price for promo SKUs */ .bf-cart-item .bci-price del{ color:var(--mut); font-weight:400; font-size:.85em; margin-right:4px; } .bf-cart-item .bci-price ins{ text-decoration:none; } .bf-drawer-foot{ padding:20px 24px 24px; border-top:1px solid var(--line); } .bf-drawer-foot #bfCartDrawerFoot{ display:grid; gap:14px; } .bf-drawer-subtotal{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .bf-drawer-subtotal span{ font:600 .78rem/1 var(--f-disp); letter-spacing:.18em; text-transform:uppercase; color:var(--mut); } .bf-drawer-subtotal b{ font:650 1.3rem/1 var(--f-disp); } .bf-drawer-actions{ display:grid; gap:10px; } .bf-drawer-actions .cta-btn, .bf-drawer-actions .ghost-btn{ justify-content:center; } /* explicit free-shipping promise in the drawer (free shipping on all orders) */ .bf-drawer-free{ display:flex; align-items:center; gap:8px; margin:0; font:600 .84rem/1.3 var(--f-body); color:var(--acc); } .bf-drawer-free svg{ width:17px; height:17px; flex:none; } /* ---------- native cart page: free-shipping banner + trust + cross-sell ---------- Banner reuses the .bf-form-note.ok success pattern (acc-soft bg / acc-glow border / acc text); trust chips reuse the .hero-chips pill style; cross-sell grid reuses .p-card with width reset (cards are track-sized by default). */ .bf-cart-free{ display:flex; align-items:center; gap:10px; background:var(--acc-soft); border:1px solid var(--acc-glow); border-radius:var(--r-md, 16px); color:var(--acc); padding:13px 18px; margin:0 0 14px; font:600 .92rem/1.4 var(--f-body); } .bf-cart-free svg{ width:20px; height:20px; flex:none; } /* four promises as ✓-dot benefit cards heading the cross-sell rail — same card pattern as the category landing hero. Scoped under .entry-content to outrank the shared list measure (0,1,1) that wraps every list on this page */ .entry-content .bf-cart-trust{ margin:clamp(28px,5vh,44px) 0 0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; list-style:none; padding:0; } .entry-content .bf-cart-trust li{ display:flex; align-items:center; gap:11px; background:var(--raise); border:1px solid var(--line); border-radius:12px; padding:16px 18px; font:500 14.5px/1.35 var(--f-body); color:var(--ink); min-width:0; } .entry-content .bf-cart-trust li::before{ content:"✓"; flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--acc); color:#fff; display:grid; place-items:center; font:700 12px/1 var(--f-disp); } @media (max-width:900px){ .entry-content .bf-cart-trust{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:480px){ .entry-content .bf-cart-trust{ grid-template-columns:minmax(0,1fr); } } .bf-cart-cross{ margin-top:clamp(36px,6vh,64px); clear:both; } .bf-cart-cross h2{ font:600 1.25rem/1.3 var(--f-disp); margin:0 0 18px; } /* minmax(0,1fr) — bare 1fr tracks expand to the cards' min-content (unbreakable long titles). Cards get min-width:0 for the same reason. The rail is a fixed 4-track row: cards keep quarter width even when fewer than four qualify; ≤1100 falls to 2 tracks, ≤640 single column. */ .bf-cross-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; } .bf-cross-grid .p-card{ width:auto; flex:initial; min-width:0; } @media (max-width:1100px){ .bf-cross-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:640px){ .bf-cross-grid{ grid-template-columns:minmax(0,1fr); } } @media (max-width:640px){ .bf-drawer-panel{ width:100vw; border-left:none; } } /* current item state gets the aria-current underline */ .main-nav .current-menu-item > a, .main-nav .current_page_item > a{ color:var(--txt); } .main-nav .current-menu-item > a::after, .main-nav .current_page_item > a::after{ transform:scaleX(1); } .main-nav .current-menu-ancestor > a{ color:var(--txt); } /* ---------- mobile nav — quiet single-column list ---------- Replaces the earlier giant centered overlay: rows align left under the header with hairline separators and a moderate type scale (SIGNAL FIELD tokens only). One accordion level — mega group labels (bf-mega-label) render as small section headers and their link column is revealed together with the parent row, instead of nesting a third tap level. */ @media (max-width:900px){ .m-nav{ display:block; overflow-y:auto; overscroll-behavior:contain; padding:calc(var(--head-h) + 18px) clamp(22px, 6vw, 44px) 56px; } .m-nav nav{ display:grid; gap:0; text-align:left; max-width:520px; margin-inline:auto; } .m-nav nav ul{ list-style:none; margin:0; padding:0; } .m-nav nav > ul > li{ border-bottom:1px solid var(--line); } .m-nav nav > ul > li:last-child{ border-bottom:0; } .m-nav nav > ul > li > a{ display:flex; align-items:center; justify-content:space-between; gap:14px; font:600 1.28rem/1.2 var(--f-disp); letter-spacing:.01em; color:var(--txt); padding:17px 2px; } /* one quiet chevron per expandable row */ .m-nav .menu-item-has-children > a::after{ content:""; width:8px; height:8px; flex:0 0 auto; margin-left:auto; border-right:1.6px solid var(--mut); border-bottom:1.6px solid var(--mut); transform:rotate(45deg); transition:transform .3s var(--ease); } .m-nav .menu-item-has-children.open > a::after{ transform:rotate(225deg); border-color:var(--acc); } /* submenu: slide reveal — JS sets an exact max-height while opening so the animation has no dead travel and closes as snappy as it opens */ .m-nav .sub-menu{ display:grid; gap:0; max-height:0; overflow:hidden; opacity:0; transition:max-height .38s var(--ease), opacity .3s var(--ease); } .m-nav .menu-item-has-children.open > .sub-menu{ max-height:640px; opacity:1; } .m-nav .sub-menu a{ display:block; font:500 1rem/1.4 var(--f-body); color:var(--mut); padding:10px 2px; } .m-nav .sub-menu > li:last-child > a{ padding-bottom:14px; } /* every top-level panel ends 33px above the next hairline — the same breathing room as its opening (17px row padding + 16px label padding) */ .m-nav nav > ul > li > .sub-menu{ padding-bottom:19px; } /* mega group labels are headers, not rows: not tappable (their '#' link is inert) and their column shows whenever the parent panel is open. The label may render as a (the walker swaps the seeded '#' link for it), so these rules key on the span as well as `> a` — keyed on `> a` alone the span fell through to plain 16px text and read as just another row. Same accent-uppercase-dash header language as the desktop band. */ .m-nav .bf-mega-label > a, .m-nav .bf-mega-label > span{ display:block; font:600 calc(.68rem + 1px)/1 var(--f-disp); letter-spacing:.22em; text-transform:uppercase; color:var(--acc); pointer-events:none; padding:16px 2px 5px; } .m-nav .bf-mega-label > a::before, .m-nav .bf-mega-label > span::before{ content:""; display:inline-block; width:12px; height:1px; background:var(--acc); margin-right:8px; vertical-align:3px; } .m-nav .bf-mega-label > a::after, .m-nav .bf-mega-label > span::after{ display:none; } .m-nav .bf-mega-label > .sub-menu{ max-height:none; opacity:1; overflow:visible; } .m-nav .bf-mega-label > .sub-menu a{ padding:9px 2px; } } /* ---------- footer menu columns + legal row ---------- */ .foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; } .foot-legal{ display:inline-flex; align-items:center; gap:16px; flex-wrap:wrap; } .foot-legal ul{ list-style:none; margin:0; padding:0; display:flex; gap:16px; flex-wrap:wrap; } .foot-legal a{ color:var(--mut); text-decoration:none; transition:color .3s; display:inline-block; padding:4px 0; } /* touch target ≥24px */ .foot-legal a:hover{ color:var(--acc); } /* ---------- subscription notice pill (blafili-subscribers plugin) ---------- */ /* Absolute in the document: below the breadcrumb, above the page title — scrolls away with the page instead of floating over content. */ .bf-subs-notice{ position:absolute; left:0; right:0; margin-inline:auto; width:fit-content; top:calc(var(--head-h) + 96px); z-index:20; background:rgb(10 14 19 / .96); border:1px solid var(--acc-glow); color:var(--txt); padding:14px 24px 14px 20px; border-radius:18px; font:600 .9rem/1.5 var(--f-body); box-shadow:0 20px 50px -20px rgb(0 0 0 / .6); max-width:min(92vw, 520px); text-align:center; animation:bfNoticeIn .7s var(--ease-out) .15s both; } .bf-subs-notice::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--acc); margin-right:10px; vertical-align:1px; box-shadow:0 0 10px var(--acc-glow); } [data-theme="light"] .bf-subs-notice{ background:rgb(255 255 255 / .97); border-color:var(--line2); color:var(--txt); box-shadow:0 20px 50px -24px rgb(20 35 55 / .45); } @keyframes bfNoticeIn{ from{ opacity:0; transform:translateY(-18px); } to{ opacity:1; transform:translateY(0); } } /* mobile + iPad: keep the box centered like desktop (right-align request was about the header tool buttons — see .head-tools below) */ @media (max-width:640px){ .bf-subs-notice{ top:calc(var(--head-h) + 96px); max-width:min(92vw, 420px); padding:10px 14px; font-size:.8rem; line-height:1.5; text-wrap:balance; } } /* landing page CTA row centers on small screens */ @media (max-width:640px){ .bf-landing-cta{ text-align:center; } } /* ---------- archive pagination ---------- Canonical merged block (formerly duplicated in two sections of this file; computed cascade preserved). The 46px round + SVG-arrow override lives in the misc additions section near the bottom. */ .bf-pagination{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:clamp(30px,5vh,50px); margin-bottom:clamp(44px,7vh,72px); } .bf-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; border:1px solid var(--line); border-radius:999px; text-decoration:none; font:600 .9rem/1 var(--f-disp); color:var(--mut); transition:border-color .3s, color .3s, background .3s; } .bf-pagination .page-numbers:hover{ color:var(--acc); border-color:var(--acc); } .bf-pagination .page-numbers.current{ color:#04121a; background:var(--acc); border-color:var(--acc); /* white text on the bright cyan accent would be 1.55:1 */ } [data-theme="light"] .bf-pagination .page-numbers.current{ color:#fff; } .bf-pagination .page-numbers.dots{ border-color:transparent; } /* ---------- WP core content alignment inside .post-body / .entry-content ---------- */ .entry-content > *{ min-width:0; } .entry-content img{ max-width:100%; height:auto; } .alignleft{ float:left; margin:.4em 1.6em 1em 0; } .alignright{ float:right; margin:.4em 0 1em 1.6em; } .aligncenter{ margin-inline:auto; } .alignwide{ width:min(1100px, 100%); margin-inline:auto; } .alignfull{ width:100vw; margin-inline:calc(50% - 50vw); max-width:100vw; } .wp-caption{ max-width:100%; } .wp-caption-text{ font-size:.78rem; color:var(--mut); padding-top:8px; } .wp-block-table table{ width:100%; border-collapse:collapse; } .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); } /* keep long words/URLs from breaking the grid */ .entry-content{ overflow-wrap:break-word; } /* ---------- searchform ---------- */ .bf-searchform{ display:flex; gap:8px; max-width:560px; } .bf-searchform input[type="search"]{ flex:1; min-width:0; background:var(--panel); border:1px solid var(--line2); border-radius:999px; color:var(--txt); padding:14px 20px; font:500 .92rem var(--f-body); transition:border-color .3s, box-shadow .3s; appearance:none; } .bf-searchform input[type="search"]::placeholder{ color:var(--mut); } .bf-searchform input[type="search"]:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 4px var(--acc-soft); } .bf-searchform button{ background:var(--acc); color:#04121a; border-radius:999px; padding:14px 24px; font:600 .9rem/1 var(--f-disp); transition:filter .3s; } .bf-searchform button:hover{ filter:brightness(1.08); } [data-theme="light"] .bf-searchform input[type="search"]{ background:#fff; } [data-theme="light"] .bf-searchform button{ color:#fff; } /* ---------- header tool buttons on mobile/iPad ---------- main-nav is hidden ≤900px, which removes its auto margin — without this the three round buttons hug the logo instead of the right edge. */ @media (max-width:900px){ .head-tools{ margin-left:auto; } } @media (prefers-reduced-motion:reduce){ .main-nav .sub-menu{ transition:none; } .m-nav .sub-menu{ transition:none; } } /* ---------- hero breakpoint tuning ---------- (R8: the hero is a full-bleed background carousel now — no inner grid to re-column; the old two-column tuning rules are retired.) */ /* ============================================================ WooCommerce surfaces + PDP/Category extensions Everything below reuses SIGNAL FIELD tokens only. ============================================================ */ /* ---------- quantity stepper: real input hidden, visual display kept ---------- */ .bf-qty-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .p-cart-form{ display:inline-flex; margin:0; } a.chip, a.r-sort{ text-decoration:none; } span.chip.is-on{ border-color:var(--acc); background:var(--acc-soft); color:var(--acc); } /* ---------- PDP: review form (Woo native, collapsed in an accordion) ---------- */ .bf-review-toggle summary{ list-style:none; } .bf-review-form{ padding-top:14px; } .bf-review-form #comments, .bf-review-form #reviews{ display:none; } .bf-review-form .comment-reply-title{ display:block; margin:0 0 12px; font:600 1.05rem/1.3 var(--f-disp); } .bf-review-form .comment-form{ margin:0; } .bf-review-form .comment-form p{ margin:0 0 14px; } .bf-review-form label{ display:block; margin:0 0 6px; color:var(--mut); font-size:.84rem; } /* review-form inputs share the site-wide input skin (checkout reference). Woo ships its rating-star styling in the dropped stylesheet, so the anchors render as raw "1 of 5 stars" text without this — re-create the star row: text hidden, ::before draws the glyph, hover/active fill gold. */ .bf-review-form .comment-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .bf-review-form .comment-form textarea{ width:100%; background:var(--panel); border:1px solid var(--line2); border-radius:var(--r-md, 16px); color:var(--txt); padding:12px 14px; font:400 .95rem/1.4 var(--f-body); transition:border-color .3s; } .bf-review-form .comment-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus, .bf-review-form .comment-form textarea:focus{ outline:none; border-color:var(--acc); } .bf-review-form .comment-form textarea{ min-height:150px; resize:vertical; } .bf-review-form .comment-form-rating .stars{ display:inline-flex; gap:4px; } .bf-review-form .comment-form-rating .stars span{ display:inline-flex; gap:4px; } .bf-review-form .comment-form-rating .stars a{ position:relative; display:block; width:1.25em; height:1.25em; overflow:hidden; text-indent:-999em; font-size:1.3rem; text-decoration:none; } .bf-review-form .comment-form-rating .stars a::before{ content:"★"; position:absolute; top:0; left:0; width:1.25em; height:1.25em; display:block; text-indent:0; line-height:1.25; color:var(--mut); } /* cumulative fill — every star defaults gold; stars AFTER the selected (Woo only marks the clicked one .active) or after the hovered one go gray. While hovering, the selected grays are lifted (the hover point takes over) and stars after the HOVERED one go gray — the two rules share specificity, so the lift must be declared before the hover-after gray. */ .bf-review-form .comment-form-rating .stars a::before{ color:var(--gold); } .bf-review-form .comment-form-rating .stars a.active ~ a::before{ color:var(--mut); } .bf-review-form .comment-form-rating .stars:hover a.active ~ a::before{ color:var(--gold); } .bf-review-form .comment-form-rating .stars:hover a:hover ~ a::before{ color:var(--mut); } /* ---------- cart / checkout / my-account: Woo native surfaces ---------- */ .woocommerce{ color:var(--txt); } .woocommerce:after{ content:""; display:block; clear:both; } .woocommerce form .form-row{ display:block; margin:0 0 16px; } .woocommerce form .form-row label{ display:block; margin:0 0 6px; color:var(--mut); font-size:.84rem; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container--default .select2-selection--single{ width:100%; background:var(--panel); border:1px solid var(--line2); border-radius:var(--r-md, 16px); color:var(--txt); padding:12px 14px; font:400 .95rem/1.4 var(--f-body); transition:border-color .3s; } /* select2 core pins .select2-selection--single{height:28px}; our 24px of vertical padding left the rendered text overflowing the closed box by ~4px, clipped by overflow:hidden. Declare height on our higher-specificity rule so the closed select matches the text inputs' natural height. */ .select2-container--default .select2-selection--single{ height:auto; min-height:46px; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus{ outline:none; border-color:var(--acc); } /* unified input surface — every Woo text-ish control gets the checkout skin even where Woo renders no .form-row wrapper (cart coupon field, review form, my-account screens). Select2's dropdown search keeps its own compact style; checkboxes/radios/submits are out of scope. */ .woocommerce input[type="text"]:not(.select2-search__field), .woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="url"], .woocommerce input[type="password"], .woocommerce input[type="number"]:not(.bf-qty-input), .woocommerce textarea, .woocommerce select{ width:100%; background:var(--panel); border:1px solid var(--line2); border-radius:var(--r-md, 16px); color:var(--txt); padding:12px 14px; font:400 .95rem/1.4 var(--f-body); transition:border-color .3s; } .woocommerce input[type="text"]:not(.select2-search__field):focus, .woocommerce input[type="email"]:focus, .woocommerce input[type="tel"]:focus, .woocommerce input[type="url"]:focus, .woocommerce input[type="password"]:focus, .woocommerce input[type="number"]:not(.bf-qty-input):focus, .woocommerce textarea:focus, .woocommerce select:focus{ outline:none; border-color:var(--acc); } .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--txt); line-height:1.4; padding:0; } .select2-container--default .select2-selection--single .select2-selection__arrow b{ border-color:var(--mut) transparent transparent transparent; } .select2-dropdown{ background:var(--panel); border:1px solid var(--line2); border-radius:var(--r-md, 16px); } .select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--acc-soft); color:var(--acc); } .select2-container--default .select2-results__option[aria-selected=true]{ color:var(--acc); } .select2-search__field{ background:var(--bg1); color:var(--txt); border:1px solid var(--line2) !important; border-radius:8px; } /* Woo buttons dark ink on the BRIGHT dark-theme accent (white text would be 1.56:1); the light theme re-overrides to white on its deepened accent (theme-light.css). Same contrast treatment as every site-wide CTA. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:var(--acc); color:#04121a; border:1px solid var(--acc); border-radius:999px; padding:12px 22px; font:600 .92rem/1 var(--f-body); letter-spacing:.02em; text-decoration:none; transition:filter .3s, transform .3s; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover{ filter:brightness(1.12); } .woocommerce a.button:disabled, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled]{ opacity:.5; cursor:not-allowed; } .woocommerce .woocommerce-form-login .button{ background:transparent; color:var(--txt); border-color:var(--line2); } .woocommerce .woocommerce-form-login .button:hover{ border-color:var(--acc); color:var(--acc); } /* notices → signal chips */ .woocommerce-message, .woocommerce-info, .woocommerce-error{ background:var(--panel); border:1px solid var(--line2); border-left:3px solid var(--acc); border-radius:var(--r-md, 16px); color:var(--txt); padding:14px 18px; margin:0 0 20px; list-style:none; font-size:.9rem; } .woocommerce-error{ border-left-color:#f87171; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{ display:none; } .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button{ float:right; margin-top:-6px; } /* Woo 10+ surfaces coupon errors INLINE — span.coupon-error-notice + input.has-error under the coupon field — instead of .woocommerce-error notices. We dropped Woo's stylesheets, so the affordance had no styling at all and read as zero feedback. Give it theme tokens. */ /* the bare class (0,1,0) lost to style.css `.post-body p` (0,1,1) — cart pages render inside .post-body, so the error text came out muted gray. Bump specificity (element + class) to win for good. */ .woocommerce p.coupon-error-notice{ display:block; margin:8px 2px 0; color:#f87171; font:500 .84rem/1.5 var(--f-body); } #coupon_code.has-error{ border-color:#f87171 !important; } /* cart actions restack. Making the colspan td itself display:grid takes the cell OUT of the table formatting context — the colspan collapses and auto-layout inflated the remove column to 246px while the table (873px min-content) overflowed the 717px grid column under the totals card. Keep the td a table-cell; stack INSIDE it in normal block flow instead: coupon row, then the Update button floated right, error notice full-width. */ .woocommerce-cart table.shop_table td.actions{ padding:18px 16px 20px; } .woocommerce-cart table.shop_table td.actions::after{ content:""; display:table; clear:both; } .woocommerce-cart table.shop_table td.actions .coupon{ display:flex; gap:8px; align-items:center; margin:0; flex-wrap:wrap; } .woocommerce-cart table.shop_table td.actions .coupon .input-text{ flex:1 1 240px; min-width:0; width:auto; } .woocommerce-cart table.shop_table td.actions .coupon-error-notice{ flex-basis:100%; width:100%; margin:0; } .woocommerce-cart table.shop_table td.actions .button[name="update_cart"]{ float:right; margin:14px 0 0; } .woocommerce-cart table.shop_table .product-name{ min-width:220px; } .woocommerce-cart table.shop_table .product-name a{ overflow-wrap:anywhere; } /* the two-column grid gives the form ~717px — let a squeezed table scroll inside its column instead of bleeding under the totals card. The 640px floor is desktop-only. At ≤900 the block-card layout must fit its container — the floor was forcing a 640px table into a 390px phone, pushing every td VALUE off-screen behind a horizontal scroll (labels visible, values not). Desktop columns fit 717px on their own, so ≥901 keeps the floor purely as a safety net. */ .woocommerce-cart-form{ overflow-x:auto; } @media (min-width:901px){ .woocommerce-cart-form table.shop_table{ min-width:640px; } } /* ≥641px the coupon input, Apply coupon and Update cart share ONE baseline as a form footer bar (Update floats right; 4px top nudges the 40px button onto the 47px input's center line). The coupon float gets a DEFINITE width — shrink-to-fit on a float whose children are flex items mis-measures max-content (measured 375px vs the real 463px, wrapping Apply) — and the input absorbs the slack via flex-grow. The stacked float layout above stays as the ≤640px (block-table) layout. */ @media (min-width:641px){ .woocommerce-cart table.shop_table td.actions .coupon{ float:left; width:min(500px,100%); } .woocommerce-cart table.shop_table td.actions .coupon .input-text{ flex:1 1 280px; } .woocommerce-cart table.shop_table td.actions .button[name="update_cart"]{ float:right; margin:4px 0 0; } } /* three article-context leaks made the cart read as a blog post, not a checkout surface: 1. `.entry-content table` handed both cart tables margin:18px 0, so the cart table sat 18px below the totals column's top edge; 2. `.post-body h2` gave "Cart totals" a 34px collapsed top margin and a 1.55rem article scale, floating detached above its card; 3. table auto-layout collapsed the thumbnail column to 55px while `img{max-width:100%}` squeezed the real product photo to a 23px icon that reads as a broken placeholder. */ .woocommerce-cart table.shop_table{ margin:0; } .woocommerce-cart table.shop_table td.product-thumbnail img{ width:56px; min-width:56px; height:56px; object-fit:cover; } /* Column hints are desktop-only (≥901 = native table layout). Below 901 the block-card layout sizes its own cells — these hints squeezed the quantity row and clipped the stepper's "+" button on phones. */ @media (min-width:901px){ .woocommerce-cart table.shop_table td.product-thumbnail{ width:88px; } /* Quantity column hint: auto layout gave it 164px against a 131px stepper while the fixed hints summed to 727px > the 717px grid column, so the table overflowed its scroll container by 10px and showed a scrollbar. 150px hint + 8px inline padding (the 131px control needs 147 with borders) lets the whole table fit its column again. */ .woocommerce-cart table.shop_table th.product-quantity, .woocommerce-cart table.shop_table td.product-quantity{ width:150px; padding-inline:8px; } } /* cart table */ .woocommerce table.shop_table{ width:100%; background:var(--panel); border:1px solid var(--line); border-collapse:collapse; border-radius:var(--r-lg, 26px); overflow:hidden; } .woocommerce table.shop_table th{ text-align:left; padding:14px 16px; color:var(--mut); font:600 .78rem/1 var(--f-body); text-transform:uppercase; letter-spacing:.12em; } .woocommerce table.shop_table td{ padding:16px; border-top:1px solid var(--line); vertical-align:middle; font-size:.92rem; } .woocommerce table.shop_table img{ width:64px; height:auto; border-radius:12px; background:#fff; } .woocommerce table.shop_table .product-remove a{ color:var(--mut); font-size:1.2rem; text-decoration:none; } .woocommerce table.shop_table .product-remove a:hover{ color:#f87171; } .woocommerce table.shop_table td.product-price del, .woocommerce table.shop_table td.product-subtotal del{ color:var(--mut); opacity:.7; } .woocommerce-Price-amount{ font-variant-numeric:tabular-nums; } /* cart totals + checkout grid */ .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals{ width:46%; float:right; } /* the right column becomes ONE clean card — the panel sits on .cart_totals so title, totals table and the checkout button share it (previously only the inner table was a card and the h2 floated above it). Inner table flattens to rows; the card top aligns with the cart table now that the 18px article-table margin is gone. Scoped to the cart page — checkout's #order_review has its own card. */ .woocommerce-cart .cart_totals{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg, 26px); padding:20px 24px 24px; } .woocommerce-cart .cart_totals h2{ margin:0 0 14px; font:700 .82rem/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; } .woocommerce-cart .cart_totals table.shop_table{ background:transparent; border:0; border-radius:0; } .woocommerce-cart .cart_totals table.shop_table tr:first-child th, .woocommerce-cart .cart_totals table.shop_table tr:first-child td{ border-top:0; } .woocommerce-cart .cart_totals .shipping ul{ list-style:none; margin:0; padding:0; } .woocommerce-cart .cart_totals .wc-proceed-to-checkout{ margin:16px 0 0; padding:0; } /* the PayPal express buttons render INSIDE this container — the plugin hooks woocommerce_proceed_to_checkout (its button_wrapper div lands right after the link). Stack the two CTAs full-width with a real gap: previously a shrink-to-fit pill sat glued on top of the 100%-wide PayPal iframe. */ .woocommerce-cart .wc-proceed-to-checkout{ display:flex; flex-direction:column; gap:12px; } .woocommerce-cart .wc-proceed-to-checkout .checkout-button{ width:100%; justify-content:center; } .woocommerce-cart .wc-proceed-to-checkout .ppc-button-wrapper{ margin:0; } /* express buttons under the PDP buy form (dedicated hook). The plugin stylesheet keeps line-height:0 and the per-funding-source gaps; we only seat the block in the buy column. */ .pd-info .ppc-button-wrapper{ margin-top:14px; } .pd-info .ppcp-messages{ margin-top:10px; } /* on every common desktop viewport the only Proceed-to-checkout button (inside cart_totals, below the full-width table) rendered below the fold. Woo's classic side-by-side cart (form 57% / totals 40%) therefore returns only at ≥1280px. The sticky must never float over the cross-sell rail: the grid gives every child an EXPLICIT row (auto-placement pushed the banner below the form row), the collaterals box stretches to the row height, and the sticky element is its CHILD (.cart_totals) — plain sticky-in-a-div, hard-bounded by that box: the card rides along and stops at the form row's bottom edge, exactly like the left column. Without :has() the float fallback has no sticky at all (no overlap possible). A lower cut left the sub-1280 band two-column with a squeezed left track — at 1220 the 711px table sat in a 631px container (80px inner scroll), and 145px overflow at the old lower edge. Moving the cut to 1280px stacks the form full-width below that (table fits: container ≥963px at 1024+), and the 1280~1439 band gets its own safety-net rules in the media block right after this one. */ @media (min-width:1280px){ .woocommerce-cart .woocommerce-cart-form{ float:left; width:57%; min-width:0; } .woocommerce-cart .cart-collaterals{ float:right; width:40%; } .woocommerce-cart .cart-collaterals .cart_totals{ float:none; width:100%; } .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form){ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); column-gap:clamp(28px,4vw,56px); align-items:start; } .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > *{ grid-column:1 / -1; min-width:0; } .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-notices-wrapper{ grid-row:1; } .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > .bf-cart-free{ grid-row:2; } .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-cart-form{ grid-column:1; grid-row:3; float:none; width:auto; } .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > .cart-collaterals{ grid-column:2; grid-row:3; float:none; width:auto; align-self:stretch; } .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > .cart-collaterals .cart_totals{ position:sticky; top:calc(var(--head-h) + 16px); } .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > .bf-cart-trust{ grid-row:4; } .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > .bf-cart-cross{ grid-row:5; } .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > .bf-cart-cta2{ grid-row:6; } } /* 1280~1439 narrow-desktop band: the two-column grid's left track is tightest at its lower edge. Measured table min-content ≈711px (thumb 88 + quantity 150 + name floor 220 + price/subtotal/remove); left track ≈ (viewport − wrap padding − gap) × 1.55/2.55 lands at ~700px around 1280 — no margin, and real-browser probes ran up to ~45px short in this band. Three scoped, reversible compressions close the gap without touching checkout, the mobile block-card rules, or the explicit-row grid semantics: - grid ratio 1.75fr/1fr: left ≈ +24px at 1280 (totals card still ~419px); - thumbnail hint 88→64 WITH padding-inline 4: the cart thumb img is 56px-fixed, so 64 = 56 img + 8 padding — the hint alone would be a no-op against the 88px floor set by img+16px td padding; - name floor 220→200: names already wrap (overflow-wrap:anywhere); one extra wrap at most, scoped to this band. Net: table min ≈ 667px vs left track ≥ 695px at 1280 under the worst probe model (≈734px by pure CSS math) — no inner scroll 1280~1439. */ @media (min-width:1280px) and (max-width:1439px){ .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form){ grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); } .woocommerce-cart table.shop_table td.product-thumbnail{ width:64px; padding-inline:4px; } .woocommerce-cart table.shop_table .product-name{ min-width:200px; } } /* page.php caps EVERY static page's content at 820px with an inline style — the checkout two-column grid and the cart page must have the full wrap (431px billing column + 289px order card was the old breakage). An inline style can only be beaten by an !important rule, hence the flag, scoped to the two Woo surfaces only. */ .woocommerce-checkout .post-body.entry-content{ max-width:1280px !important; margin-inline:auto; } /* 1180 → 1280 and a wider form track — product names stopped wrapping to three lines at 630px. Explicit grid rows untouched. */ .woocommerce-cart .post-body.entry-content{ max-width:1280px !important; margin-inline:auto; } /* page.php inlines the flat hero's paddings on every static page — tighten the checkout page's hero→form gap (measured 92px) via the same !important override mechanism as the width caps above. */ .woocommerce-checkout .page-hero--flat{ padding-bottom:clamp(10px,2vh,20px) !important; } /* repeated checkout CTA after the cross-sell rail (label identical to the native button; the original sits in the sticky totals card). Bottom margin keeps the page from ending flush against the footer. */ .bf-cart-cta2{ clear:both; display:flex; justify-content:center; margin-top:clamp(28px,5vh,44px); margin-bottom:clamp(48px,8vh,88px); } .bf-cart-cta2 .cta-btn{ min-width:min(320px,100%); justify-content:center; } /* native 13×13 terms checkbox → 24px custom control (same touch-target family as the other custom controls; the label stays clickable around it). */ form.woocommerce-checkout input[name="terms"], #add_payment_method input[name="terms"]{ appearance:none; -webkit-appearance:none; width:24px; height:24px; flex:none; margin:0 10px 0 0; border:1.5px solid var(--line2); border-radius:8px; background:var(--panel); vertical-align:middle; position:relative; cursor:pointer; transition:border-color .3s, background .3s; } form.woocommerce-checkout input[name="terms"]:hover, #add_payment_method input[name="terms"]:hover{ border-color:var(--acc); } form.woocommerce-checkout input[name="terms"]:checked, #add_payment_method input[name="terms"]:checked{ background:var(--acc); border-color:var(--acc); } form.woocommerce-checkout input[name="terms"]:checked::after, #add_payment_method input[name="terms"]:checked::after{ content:""; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); } form.woocommerce-checkout input[name="terms"]:focus-visible, #add_payment_method input[name="terms"]:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; } /* the classic checkout form's direct children are #customer_details (col2-set with .col-1 billing / .col-2 shipping), #order_review_heading and #order_review. Two columns ≥901px (~58% / ~42%). The form column spans both rows so the order card's grid area is taller than the card itself — that headroom is what lets position:sticky actually travel beside the long billing form. ≤900px falls back to plain block flow (DOM order: form → heading → order card). */ .woocommerce-checkout form.checkout #order_review{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg, 26px); padding:clamp(18px,3vw,30px); } /* the order-review shipping row renders Woo's options