/** * STW Plan Builder — customer-facing wizard * * ============================================================================= * THIS FILE HAS TO SURVIVE THREE THEMES * ============================================================================= * stw2021 (outgoing, heavy WooCommerce overrides), stw2026 (picostrap5 / * Bootstrap 5.3) and ep-v3. So: * * - every rule is at least TWO classes specific, so a theme's single-class * selector cannot win by source order; * - every class this plugin owns is `stw-pb-` prefixed, and every block's root * also carries the bare `stw-pb` scope class; * - resets are SCOPED to `.stw-pb`, never global. box-sizing, list-style and * button appearance are the three that themes get wrong often enough to * matter; * - `!important` appears in EXACTLY TWO places, both of them fighting a known * theme rule rather than guessing: `.stw-pb-hidden` (themes force `display` * on tables, rows and list items) and the list reset (stw2021 and ep-v3 both * ship `ul li { list-style: disc !important; }`). * * The section navigation is an ACCORDION: four headers over one relocating content * region. Read the accordion block below before changing anything there — the * absence of a per-section panel is structural, not an omission. * * ============================================================================= * STICKY AND FIXED BOTH DEPEND ON A CONTAINING BLOCK. NEITHER MEANS "VIEWPORT". * ============================================================================= * `position: sticky` only moves within its own containing block, and `position: * fixed` resolves against the viewport ONLY while no ancestor establishes a * containing block for fixed descendants. Two rules here turn on that: * * - the OPEN accordion section's header sticks, because that section holds the * relocated item pool and is therefore tall enough to have a sticky range. A * collapsed section is exactly as tall as its own header, so its range is zero * and collapsed headers cannot stack up. That is geometry, not a rule; * - the summary bar is `position: fixed`, because as a sticky element its * containing block was `.stw-pb-summary` — a wrapper exactly as tall as the bar * itself, so it had NO sticky range and simply sat in the flow below every item * row. plan-builder.js walks the bar's ancestors at boot and falls back to the * in-flow bar if any of them would capture `fixed`. * * Three custom properties are written to by plan-builder.js and are * deliberately NOT declared in the token block below — the tokens sit on `.stw-pb`, * which is inside the elements that read them, so declaring them there would shadow * a measured value with a constant: * * --stw-pb-sticky-top how far down the viewport the theme's own fixed or * sticky chrome reaches. Measured, not hardcoded, and * recomputed on scroll because it is not constant. * --stw-pb-bar-height the fixed bar's height, so nothing sits under it. * --stw-pb-header-height the open header's height, for scroll-margin. * * NO BOOTSTRAP DEPENDENCY. No .row, .col-*, .btn, .card, .modal, .d-flex, no * data-bs-* attributes, and the JS never reads window.bootstrap. Everything here * is hand-written Grid and Flexbox, so the same markup renders identically on a * theme that has never heard of Bootstrap. * * Theming is via custom properties on `.stw-pb`. A theme overrides the tokens, not * the rules. */ /* ----------------------------------------------------------------------------- * Tokens * -------------------------------------------------------------------------- */ .stw-pb { --stw-pb-accent: #1f7a4c; --stw-pb-accent-fg: #ffffff; --stw-pb-fg: #1c1c1c; --stw-pb-muted: #5c6470; --stw-pb-bg: #ffffff; --stw-pb-surface: #f5f6f7; --stw-pb-border: #d5d9de; --stw-pb-focus: #0b63c5; --stw-pb-radius: 8px; --stw-pb-gap: 12px; --stw-pb-tap: 44px; --stw-pb-shadow: 0 2px 10px rgba( 0, 0, 0, 0.12 ); } /* ----------------------------------------------------------------------------- * Scoped resets * -------------------------------------------------------------------------- */ .stw-pb, .stw-pb *, .stw-pb *::before, .stw-pb *::after { box-sizing: border-box; } .stw-pb .stw-pb-chips, .stw-pb .stw-pb-actions, .stw-pb .stw-pb-bar__row { display: flex; } /* !important #2 of 2. Both stw2021 and ep-v3 ship `ul li { list-style: disc * !important }`, so nothing weaker removes the bullets. */ .stw-pb .stw-pb-slots, .stw-pb .stw-pb-slots > .stw-pb-slot { list-style: none !important; margin: 0; padding: 0; } .stw-pb .stw-pb-acc__header, .stw-pb .stw-pb-chip, .stw-pb .stw-pb-action, .stw-pb .stw-pb-note__remove, .stw-pb .stw-pb-bar__toggle, .stw-pb .stw-pb-sheet__close { -webkit-appearance: none; appearance: none; margin: 0; font: inherit; color: inherit; line-height: 1.3; text-align: left; background: var( --stw-pb-bg ); border: 1px solid var( --stw-pb-border ); border-radius: var( --stw-pb-radius ); cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; } .stw-pb .stw-pb-acc__header:focus-visible, .stw-pb .stw-pb-chip:focus-visible, .stw-pb .stw-pb-action:focus-visible, .stw-pb .stw-pb-note__remove:focus-visible, .stw-pb .stw-pb-bar__toggle:focus-visible, .stw-pb .stw-pb-sheet__close:focus-visible, .stw-pb .stw-pb-sheet__panel:focus-visible { /* Not dependent on the theme: an outline plus an offset shows on any * background, including a dark one. */ outline: 3px solid var( --stw-pb-focus ); outline-offset: 2px; } /* ----------------------------------------------------------------------------- * !important #1 of 2. Single-class on purpose: this is applied to Mix & Match's * OWN nodes — `.mnm_item` rows, `` and `