/* ── st88: Self-hosted Outfit (SIL Open Font License) ───────────────── The default --mbpos-font-family names Outfit first, but only the Bricks site ever loaded the font files — on every other theme the stack fell through to system fonts. Bundling the variable woff2 makes the default typeface real everywhere the POS renders. Browsers only download it when the family is actually used. */ @font-face { font-family: 'Outfit'; src: url('../fonts/Outfit-VariableFont_wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /** * mbpos-pos-layout.css * * Default skin for [mbpos_pos_layout] shortcode. * * Structure: * 1. Design tokens — all customisable values. Override via admin * appearance settings or custom CSS. * 2. Layout shell — two-column grid, nav, responsive breakpoints. * (Written fresh — replaces Bricks grid compilation.) * 3. Component styles — extracted from Bricks template inline CSS block. * Cart, receipt, checkout, payment methods, etc. * * To customise colours, fonts, and shape: use the MBPOS Appearance admin tab. * The admin generates a small :root block that overrides these defaults. * * To customise HTML structure: copy templates/pos-layout.php to your theme at * {theme}/microbite-pos/pos-layout.php */ /* ============================================================ 0. BRICKS TOKEN FALLBACKS ------------------------------------------------------------ The shared component stylesheets (mbpos-lightbox.css, mbpos-epo.css) and the cart/receipt CSS reference Bricks theme tokens (--dark, --space-m, --radius-s, --text-s, etc.). On a Bricks page these come from Bricks' global settings. On any OTHER builder they are undefined, which is what makes the product modal, cart items, and EPO options render "not quite right". These fallbacks define every referenced token. We scope them to the POS layout AND :root with low specificity so that when Bricks DOES define them globally, Bricks still wins (Bricks injects its tokens on :root too, later in the cascade / via its own stylesheet). Using @property-free plain fallbacks keeps this safe everywhere. Values follow Bricks' default fluid scale and a neutral palette so the look matches the esmart template closely. SCOPING: these are defined on .mbpos-pos-layout (and the detached lightbox/receipt roots that get moved to ), NOT on :root. That way, on a Bricks page we never overwrite Bricks' own global tokens — we only supply fallbacks inside the shortcode's own subtree. The lightbox/receipt get the tokens too because we also scope to their class roots (they are moved to body on open, escaping .mbpos-pos-layout). ============================================================ */ .mbpos-pos-layout, .mbpos-lightbox, .mbpos-receipt, .mbpos-pickup-modal, #mbpos-page-overlay { /* Palette */ --dark: var(--mbpos-color-text, #1a1a1a); --dark-80: rgba(26, 26, 26, 0.8); --dark-60: rgba(26, 26, 26, 0.6); --dark-30: rgba(26, 26, 26, 0.3); --dark-20: rgba(26, 26, 26, 0.2); --dark-10: rgba(26, 26, 26, 0.1); --light: var(--mbpos-color-surface, #ffffff); --success: var(--mbpos-color-success, #16a34a); --error: var(--mbpos-color-danger, #dc2626); --error-80: rgba(220, 38, 38, 0.8); --base-3: #f3f4f6; --base-5: #e5e7eb; /* Fluid spacing scale (Bricks defaults, approx) */ --space-3xs: clamp(2.5px, 2.3px + 0.1vw, 3.1px); --space-2xs: clamp(5px, 4.6px + 0.2vw, 6.3px); --space-xs: clamp(7.5px, 6.9px + 0.3vw, 9.4px); --space-s: clamp(10px, 9.2px + 0.4vw, 12.5px); --space-m: clamp(15px, 13.8px + 0.6vw, 18.8px); --space-l: clamp(20px, 18.4px + 0.8vw, 25px); /* Radii */ --radius-s: var(--mbpos-radius-s, 6px); --radius-m: var(--mbpos-radius, 10px); /* Type scale */ --text-s: clamp(8.75px, 8.4px + 0.18vw, 10px); --text-m: clamp(10px, 9.5px + 0.25vw, 11.25px); --text-xs: clamp(7.5px, 7.2px + 0.15vw, 8.75px); /* Star rating tokens (used by the rating widget in the modal) */ --mbpos-star: #f59e0b; --mbpos-star-empty: #d1d5db; } /* ============================================================ 1. DESIGN TOKENS (the --mbpos-* namespace — safe on :root) ============================================================ */ :root { /* Colours — "Ember" palette (v1.20.0). Warm neutrals + burnt-orange primary, designed for food photography and appetite appeal. Override any of these via the MBPOS Appearance tab. */ --mbpos-color-primary: #171717; /* st89: CTA buttons — near-black (Peter's brand), AA white text */ --mbpos-color-primary-text: #ffffff; --mbpos-color-surface: #ffffff; /* cards, nav, cart panel — pure white for photo fidelity */ --mbpos-color-border: rgba(120,113,108,0.22); /* warm-tinted hairlines */ --mbpos-color-border-strong: rgba(120,113,108,0.38); /* qty controls — slightly more defined */ --mbpos-color-text: #1D1C1B; /* st89: body text — near-black (was warm stone #44403C) */ --mbpos-color-heading: #1C1917; /* titles + selected states — warm ink */ --mbpos-color-selected: var(--mbpos-color-heading); /* selected pills/slots (Appearance can override) */ --mbpos-color-text-muted: #78716C; /* muted / inactive pill text — warm stone */ --mbpos-color-success: #15803D; /* herb green — AA white text, pairs with the orange */ --mbpos-color-danger: #B91C1C; /* deepened — clearly distinct from the orange primary */ --mbpos-color-bg: #ffffff; /* st88: white field matching the cart panel (was warm paper #F5F4F1 — still available via the Background picker) */ --mbpos-color-pill-bg: #EFEDE8; /* st87: solid warm chip (Border mixed 40% to Surface) — matches skin derivation */ --mbpos-color-pill-bg-active:#1C1917; /* active chip — ink */ /* sk1: derived neutrals — same derivations as the skin emitter, so the checkout/receipt chrome retints when the Appearance palette changes. */ --mbpos-color-surface-2: #f7f7f7; /* recessed panels (receipt totals, fee strips) — Surface mixed 3.5% toward Text */ --mbpos-color-border-soft: #f2f0ee; /* light dividers — Border mixed 50% toward Surface */ --mbpos-color-text-soft: rgba(29,28,27,0.35); /* placeholders / faint text — Text at 35% */ --mbpos-color-warning: #9A6700; /* low stock, EPO limits, caution notices */ --mbpos-color-warning-subtle:rgba(154,103,0,0.1); /* Typography — Outfit pinned first (the Bricks look) with a full system fallback so it stays clean under any theme. NOTE: Outfit itself is loaded by the Bricks child theme; if you move to a theme that doesn't load it, either enqueue Outfit or the stack below takes over gracefully. */ --mbpos-font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mbpos-font-size-base: 14px; --mbpos-font-size-xs: 11px; --mbpos-font-size-s: 12px; --mbpos-font-size-l: 16px; --mbpos-font-size-xl: 20px; /* st89: category h2 headings */ --mbpos-font-size-pill: 14px; /* Bricks pills ≈ 14.2px */ /* Shape */ --mbpos-radius: 10px; /* st87: was 12 — derives rs=6 / rb=8, the Bricks values */ --mbpos-radius-s: 6px; --mbpos-radius-btn: 8px; --mbpos-radius-card: 20px; /* st87: was 18 — Bricks cards are 20 and Bricks is the north star */ /* Elevation — soft shadows replace borders for the Bricks "floating card" look */ --mbpos-color-primary-hover: #151515; /* st89: darken(primary, 10%) — hovers go DARKER, never lighter */ --mbpos-cart-item-padding: var(--mbpos-space-xs); /* st87: was space-m (24px) — Bricks rows are ~10px, xs (12px) keeps tap comfort */ /* st85: qty dims rem→px. The rem values were tuned on a 10px-root Bricks site (4rem = 40px); on a 16px-root theme they ballooned to 64px. Pin the tuned rendering. */ --mbpos-qty-height: 40px; /* stepper row height (cart + modal) */ --mbpos-qty-btn-width: 60px; /* +/- button width */ --mbpos-qty-input-width: 70px; /* number input width */ --mbpos-qty-font-size: var(--mbpos-font-size-base); /* ± labels and number */ --mbpos-qty-gap: var(--mbpos-space-3xs); /* gap between cart item head and footer */ --mbpos-qty-border-color: var(--mbpos-color-border-strong); /* stepper outer border */ --mbpos-qty-btn-hover-bg: rgba(0,0,0,0.08); /* ± button hover background */ --mbpos-card-shadow: 0 2px 6px rgba(87,60,38,0.10); --mbpos-card-shadow-hover: 0 6px 16px rgba(87,60,38,0.16); --mbpos-nav-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Spacing — scaled by --mbpos-density multiplier. st85: PX-BASED, never rem. rem reaches outside the isolation boundary to the THEME's root font-size (Bricks 62.5% = 10px vs vanilla 16px), so the old rem scale rendered 62.5% denser on Bricks-convention sites than elsewhere — same plugin, different product. px makes the POS identical under every theme. Scale is the standard 4-base ramp the original rem values intended (0.25rem…3rem @ 16px root). */ --mbpos-density: 1; --mbpos-space-3xs: calc(4px * var(--mbpos-density)); --mbpos-space-2xs: calc(8px * var(--mbpos-density)); --mbpos-space-xs: calc(12px * var(--mbpos-density)); --mbpos-space-s: calc(16px * var(--mbpos-density)); --mbpos-space-m: calc(24px * var(--mbpos-density)); --mbpos-space-l: calc(32px * var(--mbpos-density)); --mbpos-space-xl: calc(48px * var(--mbpos-density)); /* Option-group headers (Size, Toppings, …) — driven by the Appearance "Product modal & EPO" card; the skin file overrides these on save. st85: warm stone chip, one step deeper than the paper bg so it reads as a tappable surface on both the paper page and white modal. */ --mbpos-epo-head-bg: #EFEDE8; --mbpos-epo-head-bg-hover: #E5E2DC; --mbpos-epo-head-bg-active: #DEDAD3; --mbpos-epo-head-size: var(--mbpos-font-size-base); --mbpos-epo-head-weight: 600; --mbpos-epo-option-size: var(--mbpos-font-size-base); /* Layout */ --mbpos-sidebar-width: 415px; /* st85: was 41.5rem (tuned @10px root) */ --mbpos-nav-top: 0px; /* set to header height if fixed header */ --mbpos-peek-height: 90px; /* JS auto-measures and overwrites this on :root at ≤1024px — see _updatePeekHeight() in woo-functionality.js. Value here is the SSR fallback only (no JS / first paint). */ } /* ============================================================ 1b. THEME ISOLATION [data-mbpos] ------------------------------------------------------------ When POS elements sit inside a theme (Hello Elementor, Astra, GeneratePress, Kadence, etc.) broad selectors like `button`, `[type="button"]`, `input` inject unwanted backgrounds, borders, and colours. When the lightbox is hoisted to even class-scoped theme rules land on POS elements. This reset neutralises common theme interference for all form elements inside [data-mbpos]. Each POS component class then re-applies only the styles it needs on top of this clean baseline — no !important required. KEY: :where() contributes zero specificity. So: :where([data-mbpos]) button = specificity (0,0,1) This ties with a theme's bare `button` rule and wins on source order (our stylesheet loads after the theme). But any POS class like .mbpos-lightbox__close at (0,1,0) beats it naturally — our component rules always win over this reset. [fix7] THAT CLAIM WAS FALSE FOR THE SECOND SELECTOR, and it cost a live defect. `[type="button"]` is an ATTRIBUTE selector, which sits at CLASS TIER — so :where([data-mbpos]) [type="button"] = (0,1,0) tied with every bare POS component rule and beat them on source order, because mbpos-pos-layout.css is enqueued by the shortcode and lands after mbpos-epo.css. The EPO segment pill is emitted `