/* ── Inclusive Sans, self-hosted ────────────────────────────────────────────────────────────── SELF-HOSTED AND NOT LINKED, because the storefront's CSP is `default-src 'self'`: a `fonts.googleapis.com` stylesheet and the `fonts.gstatic.com` woff2 it points at are both blocked outright, so a linked webfont would silently fall back to whatever the device happened to have. That is exactly what happened — the face this shop was matched against rendered as Optima on macOS, which is why nothing looked right at any size. Variable weight 300-700, so ONE file covers every weight the shop uses. Vietnamese is dropped (a UK vape retailer); latin and latin-ext remain, and `unicode-range` means a browser fetches only the subset a page actually needs. SIL Open Font License 1.1 — Copyright 2022 The Inclusive Sans Project Authors. The licence requires its notice to travel with the font: see OFL.txt beside the woff2 files. */ @font-face { font-family: 'Inclusive Sans'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/inclusive-sans/inclusive-sans-latin-ext-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inclusive Sans'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/inclusive-sans/inclusive-sans-latin-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inclusive Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/inclusive-sans/inclusive-sans-latin-ext-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inclusive Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/inclusive-sans/inclusive-sans-latin-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Storefront theme (customer-facing). Neutral, clean, responsive. Light + dark aware. */ :root { --sf-ink: #1a1f2b; --sf-muted: #5b6472; --sf-faint: #6a717e; --sf-bg: #ffffff; --sf-surface: #f7f8fa; --sf-border: #8c9198; /* ⚠️ --sf-faint WAS #8a93a3 AND --sf-border WAS #e5e8ee UNTIL 0104, and both failed WCAG on the stock shop — 3.1:1 and 1.2:1. They are the platform defaults, so they were what every store that never touched those two controls rendered, which is all three trading shops. · faint draws .sf-footer-legal (12px), .sf-pd-vat (14px), .sf-paynote (12px), .sf-sum-note (11px) — the VAT line and the footer legal statement, normal-size text, bar 4.5:1. · border is the ONLY visual boundary of every field a customer types into (.sf-search input, .sf-field input, .sf-coupon-form input, .sf-cart-qtyform input, .sf-sort select). Those are filled --sf-surface on a --sf-bg page, 1.05:1, so with an invisible border nothing says "type here" at all. WCAG 1.4.11 wants 3:1 and #e5e8ee gave 1.2:1. Both new values were SOLVED for the lightest colour that clears the bar, not picked, so fine print stays quieter than --sf-muted and a hairline stays a hairline. Mirrored in ThemeTokens::CATALOGUE — these two lists ARE the same list and ThemePresetContrastTest measures the PHP half on every build. The cost of the border change is a visible frame on .sf-card, which is one token doing two jobs; splitting a --sf-field-border out is owed. */ /* --sf-brand is the platform default; theme.js overrides it per store from data-sf-brand. --sf-accent derives from it (a light brand tint) so ONE colour recolours the storefront. */ --sf-brand: #4f46e5; --sf-brand-ink: #ffffff; --sf-accent: color-mix(in srgb, var(--sf-brand) 10%, #ffffff); --sf-warn-bg: #fdeddb; --sf-warn-ink: #a15c11; --sf-radius: 12px; --sf-shadow: 0 1px 3px rgba(20,24,40,.08); /* Design-panel tokens (0067). Every one of these is overridable per store via /theme.css; the values here are the platform defaults a store inherits until it sets its own. */ --sf-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sf-font-size: 16px; --sf-heading-weight: 800; --sf-heading-tracking: -0.02em; --sf-container: 1120px; --sf-header-h: 62px; /* ── WHO OWNS THE HEADER'S HEIGHT (§7 Q1, answered (b)) ──────────────────────────────────────── `--sf-header-h` is THE BAR'S OWN height and stays that way — it is the Theme → Layout slider a merchant already uses on nine presets, and taking it away (option (a)) to let chrome compute a total would remove a working control to enable one that does not exist yet. `--sf-header-total` is the WHOLE header: bar plus a second row plus an announcement strip. It defaults to the bar's height, so today the two are the same number and nothing moves. It exists so that anything positioning itself BELOW the header reads a value chrome can own once bands carry their own heights, without that ever reaching back into the slider. ⚠️ THE SHRINK KEYFRAMES DELIBERATELY DO NOT USE IT. They animate `.sf-header-in`, which IS the bar, so the bar's own height is the correct input — the plan grouped them with `.sf-filters`, and reading the rule shows they belong on the other side of the split. */ --sf-header-total: var(--sf-header-h); } /* ── THE DARK PALETTE, MEASURED (L6) ─────────────────────────────────────────────────────────── `ThemePresetContrastTest` gates all ten shipped presets on ten pairs. It has never run against the dark swap, and the dark swap failed FOUR of them: faint on surface 4.37 (bar 4.5) border on bg 1.41 (bar 3.0) border on surface 1.27 (bar 3.0) <- a hairline nobody could see brand_ink on brand 3.62 (bar 4.5) <- the buy button Every value below is the SMALLEST change that clears its bar, so the palette moves as little as it can while meeting the gate the platform already applies to every merchant preset: --sf-faint #7b8494 -> #8b94a5 surface 4.37 -> 5.39 --sf-border #2a3142 -> #646f88 surface 1.27 -> 3.27, bg 1.41 -> 3.63 ⚠️ `--sf-brand-ink` was ABSENT from this block, so dark mode inherited the light `#ffffff` onto a lighter dark-mode brand — 3.62:1. The `after_dark` preset already answers this exact question the same way (`ThemeTokens.php:517`: brand #8b83ff, brand_ink #0d0f18): on a pale brand the label goes dark, not white. #0f1729 on #7c74ff is 4.94:1. */ @media (prefers-color-scheme: dark) { :root { --sf-ink: #eef1f6; --sf-muted: #a4adbd; --sf-faint: #8b94a5; --sf-bg: #12151c; --sf-surface: #1a1f2b; --sf-border: #646f88; --sf-brand: #7c74ff; --sf-brand-ink: #0f1729; --sf-accent: color-mix(in srgb, var(--sf-brand) 24%, #12151c); --sf-warn-bg: #3a2c17; --sf-warn-ink: #f0c48a; } } * { box-sizing: border-box; } body { margin: 0; font-family: var(--sf-font); font-size: var(--sf-font-size); color: var(--sf-ink); background: var(--sf-bg); line-height: var(--sf-line-height, 1.5); } /* LINKS INSIDE A BLOCK (0101). Both values are exactly what this rule has always carried, moved behind a fallback so a block can override them — the same arrangement every other per-block control uses, and provably a no-op with nothing set. Deliberately NOT a new `.sf-block a` rule: that would tie with `.sf-page-body a` below on specificity and source order would silently decide which of the two won, on shops nobody had touched. `--sf-sec-link-*` is only ever defined inside a `.sf-sec-N` scope, so every link elsewhere on the shop resolves the fallback and is unchanged. */ a { color: var(--sf-sec-link-colour, inherit); text-decoration: var(--sf-sec-link-deco, none); } .sf-wrap { max-width: var(--sf-container); margin: 0 auto; padding: 0 20px; } .sf-header { border-bottom: var(--sf-band-bd-w, 1px) solid var(--sf-band-bd-c, var(--sf-border)); background: var(--sf-band-bg, var(--sf-bg)); background-image: var(--sf-band-img, none); background-size: var(--sf-band-img-size, cover); background-position: var(--sf-band-img-pos, center); background-repeat: var(--sf-band-img-repeat, no-repeat); color: var(--sf-band-ink, var(--sf-band-ink-auto, inherit)); position: sticky; top: 0; z-index: 10; } .sf-header-in { display: flex; align-items: center; justify-content: space-between; height: var(--sf-header-h); } .sf-brand { font-size: 19px; font-weight: var(--sf-heading-weight); letter-spacing: var(--sf-heading-tracking); } .sf-nav { display: flex; gap: 22px; align-items: center; font-size: 15px; } /* ⚠️ THE HOVER MUST NOT ASSUME A LIGHT BAND — IT DID, AND THE LINK VANISHED. * * This was written when the header was always the page background. A header may now be a PAINTED * band, and a shop that paints it with its own brand colour got `color: var(--sf-brand)` on hover * over a `--sf-brand` background: contrast 1.00, the word disappearing under the cursor. Live on * vapeandgo.co.uk, whose header band is #035c56. Reported by the owner, who could see the effect * long before any of us could name it. * * The fix is the fallback chain `.sf-header` itself already uses, so hover lands on the band's own * ink wherever one is set, and on the brand only where there is no band ink — the classic header, * whose behaviour is unchanged. The underline carries the state in that first case and, being * colour-independent, is what makes this rule safe on a band whose ink we cannot predict. * * `.sf-nav-toggle` (the "Home ⌄" / "Brands ⌄" openers) carried the identical bug and is fixed here * with it rather than left as a second, drifting answer. `.sf-cart-link:hover` further down keeps * `--sf-brand`: it is painted on its own light pill, measured at 7.87 contrast, and is fine. */ .sf-nav a:hover, .sf-nav-toggle:hover { color: var(--sf-band-ink, var(--sf-band-ink-auto, var(--sf-brand))); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } /* ⚠️ EXCEPT INSIDE A PANEL, WHICH IS NOT THE BAND — and the rule above created this bug. * * The band ink is chosen for the header's painted strip; on this shop that is #ffffff. A dropdown * panel paints its OWN ground (`--sf-bg`, white here), so sending its links to the band's ink on * hover put white on white: contrast 1.00, the column titles disappearing under the cursor. The * owner reported it as "nav link name in sub menu hiding". * * ⚠️ ONLY THE COLUMN TITLES VANISHED, which is why it survived a look at the menu. The links inside * each column are also matched by `.sf-mega .sf-nav-panel .sf-nav-link:hover` (four parts, ink), so * they were fine. The level-2 titles sit in the mega itself rather than in a nested panel, so * nothing outranked the band rule for them. Half the panel worked and half did not. * * This is the same lesson as the panel's resting ink two fixes ago, arriving from the other side: * a surface that paints its own ground owns its ink in EVERY state, hover included. Three parts * plus an element beats the two-plus-element rule above, so it applies at both levels. */ .sf-nav .sf-nav-panel a:hover { color: var(--sf-ink); } .sf-cart-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--sf-brand); color: var(--sf-brand-ink); font-size: 12px; font-weight: 700; } .sf-main { padding: 32px 20px 64px; min-height: 60vh; } /* HEADINGS, and the block-level override that has to inherit by default. `--sf-sec-head-*` is set only under a block that asked for it, so outside one — a listing page title, a checkout heading — the property is unset and every rule keeps the value it always had. Custom properties inherit, which is the whole mechanism: the block wrapper carries them and the heading anywhere inside it reads them, with no selector needing to know the block exists. THREE OF THE FIVE FALL BACK TO `inherit`, AND THAT IS NOT LAZINESS (0098). `font-family`, `text-transform` and `line-height` are all INHERITED properties, so `inherit` is by definition the value the element already had — writing it changes nothing, on any page, in any block, until a merchant sets the property. That is the same contract `var(--sf-sec-pad, 0px)` keeps for padding, arrived at from the other end: there, the old literal is the fallback; here, the old behaviour has a keyword of its own. */ .sf-h1 { font-family: var(--sf-font-heading, inherit); font-size: var(--sf-sec-head-size, 30px); font-weight: var(--sf-sec-head-weight, var(--sf-heading-weight)); line-height: var(--sf-sec-head-lh, inherit); text-transform: var(--sf-sec-head-case, inherit); font-style: var(--sf-sec-head-style, inherit); letter-spacing: var(--sf-heading-tracking); color: var(--sf-sec-head-colour, inherit); margin: 0 0 20px; } .sf-h2 { font-family: var(--sf-font-heading, inherit); font-size: var(--sf-sec-head-size, 22px); font-weight: var(--sf-sec-head-weight, 700); line-height: var(--sf-sec-head-lh, inherit); text-transform: var(--sf-sec-head-case, inherit); font-style: var(--sf-sec-head-style, inherit); color: var(--sf-sec-head-colour, inherit); margin: 36px 0 16px; } .sf-hero { text-align: center; padding: 56px 20px; background: var(--sf-surface); border-radius: var(--sf-radius); margin-bottom: 12px; } .sf-hero-title { font-family: var(--sf-font-heading, inherit); font-size: var(--sf-sec-head-size, 40px); font-weight: var(--sf-sec-head-weight, var(--sf-heading-weight)); line-height: var(--sf-sec-head-lh, inherit); text-transform: var(--sf-sec-head-case, inherit); font-style: var(--sf-sec-head-style, inherit); letter-spacing: var(--sf-heading-tracking); color: var(--sf-sec-head-colour, inherit); margin: 0 0 8px; } .sf-hero-sub { font-size: var(--sf-sec-text-size, 17px); line-height: var(--sf-sec-text-lh, inherit); color: var(--sf-sec-text-colour, var(--sf-muted)); margin: 0 0 22px; } .sf-btn { display: inline-block; padding: 12px 22px; border-radius: 999px; background: var(--sf-brand); color: var(--sf-brand-ink); font-weight: 700; font-size: 15px; border: 0; cursor: pointer; } .sf-btn:hover { filter: brightness(1.06); } .sf-search { display: flex; gap: 10px; margin-bottom: 24px; max-width: 640px; flex-wrap: wrap; align-items: center; } .sf-sort { display: inline-flex; align-items: center; gap: 6px; } .sf-sort-lbl { font-size: 13px; color: var(--sf-muted); } .sf-sort select { padding: 10px 12px; border: 1px solid var(--sf-border); border-radius: 999px; font: inherit; background: var(--sf-surface); color: var(--sf-ink); cursor: pointer; } .sf-search input { flex: 1; padding: 11px 14px; border: 1px solid var(--sf-border); border-radius: 999px; font: inherit; background: var(--sf-surface); color: var(--sf-ink); } .sf-search button { padding: 11px 20px; border-radius: 999px; border: 0; background: var(--sf-ink); color: var(--sf-bg); font-weight: 700; cursor: pointer; } .sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; } /* ⚠️ RAISED ELEMENTS SIT ON `--sf-surface`, NOT `--sf-bg`. The card, the inputs, the nav panel, the mobile drawers, the cookie bar and the age-gate card all painted themselves with the PAGE ground, and it looked right for one reason only: this shop had the two tokens the wrong way round — `bg: #ffffff`, `surface: #f2f7ff` — so "the page colour" happened to be white. Setting the shop's real ground (#f2f7ff, measured off vapeandgo.co.uk) turned every card the same colour as the page behind it and they vanished. `surface` is documented as exactly this — "Product cards, the basket summary and form panels sit on this" — so the CSS had drifted from the token model rather than the model being wrong. Nothing that was white stops being white. */ .sf-card { display: flex; flex-direction: column; border: 1px solid var(--sf-border); border-radius: var(--sf-radius); overflow: hidden; background: var(--sf-surface); box-shadow: var(--sf-shadow); transition: transform .12s ease, box-shadow .12s ease; } .sf-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20,24,40,.12); } .sf-card-thumb { aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 42px; font-weight: 800; color: var(--sf-brand); background: var(--sf-accent); overflow: hidden; } /* Product image fills its tile (cover) — the placeholder letter keeps the grid centering. */ .sf-thumb-pic { display: block; width: 100%; height: 100%; } .sf-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; } .sf-card-body { display: flex; flex-direction: column; gap: 4px; padding: 14px; } .sf-card-brand { font-size: 12px; font-weight: 600; color: var(--sf-faint); text-transform: uppercase; letter-spacing: .04em; } /* ⚠️ THE CARD'S WORDS READ THE BLOCK'S TWO TEXT CONTROLS (P1 audit A2). product_grid, carousel and featured_products all OFFERED "Text size" and "Text weight", and the only body text in those blocks is the cards — whose sizes were literals, so both controls saved, coerced cleanly and painted nothing. Blank is byte-identical: the fallbacks ARE the old literals. The price rides ONE pixel above the chosen size and keeps its 800 weight, so the merchant's number scales the card without flattening its hierarchy; the brand kicker stays its own 12px label on purpose — it is a label, not body text, and tying it to a body-size control would be a third meaning. */ .sf-card-title { font-size: var(--sf-sec-text-size, 15px); font-weight: var(--sf-sec-text-weight, 600); color: var(--sf-ink); } /* Section (brand-card) subtitle — a short teaser under a child collection's name (0044). */ .sf-card-sub { font-size: 13px; color: var(--sf-muted); line-height: 1.4; } .sf-card-price { font-size: calc(var(--sf-sec-text-size, 15px) + 1px); font-weight: 800; margin-top: 4px; } .sf-card-from { font-size: 12px; font-weight: 600; color: var(--sf-faint); } /* "Was" (compare-at) strikethrough — the crossed-out prior price beside the current one. */ .sf-card-was { font-size: 12.5px; font-weight: 600; color: var(--sf-faint); } .sf-more { margin-top: 20px; } .sf-more a { color: var(--sf-sec-link-colour, var(--sf-brand)); font-weight: 600; text-decoration: var(--sf-sec-link-deco, none); } .sf-empty { color: var(--sf-muted); padding: 40px 0; } .sf-crumb { margin-bottom: 18px; } .sf-crumb a { color: var(--sf-muted); font-size: 14px; } /* Multi-segment breadcrumb trail (0038). Inline list with a "/" separator between crumbs. */ .sf-crumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .sf-crumb-item { display: inline-flex; align-items: center; font-size: 14px; color: var(--sf-muted); } .sf-crumb-item + .sf-crumb-item::before { content: "/"; margin-right: 6px; color: var(--sf-muted); opacity: .55; } .sf-crumb-item a { color: var(--sf-muted); text-decoration: none; } .sf-crumb-item a:hover { color: var(--sf-text, inherit); text-decoration: underline; } .sf-crumb-item [aria-current="page"] { color: var(--sf-text, inherit); font-weight: 600; } .sf-pd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } @media (max-width: 760px) { .sf-pd { grid-template-columns: 1fr; gap: 24px; } } .sf-pd-media { aspect-ratio: 1 / 1; display: grid; place-items: center; font-size: 96px; font-weight: 800; color: var(--sf-brand); background: var(--sf-accent); border-radius: var(--sf-radius); } /* Real product photo (0039). object-position is set inline from the image's focal point. */ .sf-pd-media.has-photo { margin: 0; padding: 0; font-size: 0; overflow: hidden; } .sf-pd-media.has-photo picture, .sf-pd-media.has-photo img { display: block; width: 100%; height: 100%; } .sf-pd-media.has-photo img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--sf-radius); } .sf-pd-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .sf-pd-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--sf-border, #e3e6ec); } .sf-pd-brand { font-size: 13px; font-weight: 600; color: var(--sf-faint); text-transform: uppercase; letter-spacing: .05em; } .sf-pd-title { font-size: 28px; font-weight: var(--sf-heading-weight); letter-spacing: var(--sf-heading-tracking); margin: 6px 0 6px; } /* Per-store presentation (0049): marketing sub-headline under the title. */ .sf-pd-subhead { font-size: 16px; color: var(--sf-muted); margin: 0 0 12px; line-height: 1.4; } .sf-pd-price { font-size: 26px; font-weight: 800; } .sf-pd-vat { font-size: 14px; font-weight: 500; color: var(--sf-faint); } .sf-pd-from { font-size: 14px; font-weight: 600; color: var(--sf-faint); } .sf-pd-was { font-size: 16px; font-weight: 600; color: var(--sf-faint); margin-left: 6px; } .sf-nicotine { margin: 16px 0; padding: 10px 14px; border-radius: 10px; background: var(--sf-warn-bg); color: var(--sf-warn-ink); font-size: 13px; font-weight: 600; } /* Statutory TRPR/MHRA warning surfaces. Site-wide standing bar (below header, every page) + the per-product compliance note on the PDP. Both use the warn palette. */ .sf-compliance { background: var(--sf-warn-bg); color: var(--sf-warn-ink); border-bottom: 1px solid var(--sf-border); font-size: 12.5px; font-weight: 600; } .sf-compliance .sf-wrap { display: block; padding: 8px 0; } /* Above the footer the hairline belongs on TOP: a bottom border there draws a line between the notice and the footer it is sitting on, which reads as the footer having a stray edge. */ .sf-compliance-bottom { border-bottom: 0; border-top: 1px solid var(--sf-border); } .sf-compliance-note { margin: 12px 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--sf-warn-ink); background: var(--sf-warn-bg); color: var(--sf-warn-ink); font-size: 12.5px; } /* Per-store logo + trader-identity footer (0059). */ .sf-logo { max-height: 38px; width: auto; display: block; } .sf-footer-legal { font-size: 12px; color: var(--sf-band-ink, var(--sf-band-ink-auto, var(--sf-faint))); margin: 4px 0 0; } /* Coupon redemption on the basket (#17). */ .sf-coupon-form { display: flex; gap: 8px; margin: 4px 0 14px; } .sf-coupon-form input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--sf-border); border-radius: 8px; font: inherit; background: var(--sf-surface); color: var(--sf-ink); } .sf-coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 14px; padding: 8px 12px; border-radius: 8px; background: var(--sf-accent); } .sf-coupon-tag { font-size: 13px; font-weight: 700; color: var(--sf-brand); } .sf-coupon-rm { display: inline; } .sf-coupon-err { margin: -8px 0 12px; font-size: 12.5px; color: #b42318; } /* Not an error — the saving is real, it just is not settled until we know who is buying. */ .sf-coupon-note { margin: -8px 0 12px; font-size: 12.5px; color: var(--sf-muted, #667085); } .sf-sum-save b { color: var(--sf-brand); } /* Cookie notice (#9) — bottom bar, hidden until consent.js opens it (no flash for returning users). */ .sf-cookie { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 12px 18px; background: var(--sf-ink); color: var(--sf-bg); font-size: 13px; box-shadow: 0 -2px 12px rgba(20,24,40,.18); } .sf-cookie.is-open { display: flex; } .sf-cookie-text { max-width: 720px; } .sf-cookie-ok { padding: 8px 18px; border: 0; border-radius: 999px; background: var(--sf-brand); color: var(--sf-brand-ink); font: inherit; font-weight: 700; cursor: pointer; } /* Admin in-environment preview banner (StorefrontController::preview only). */ .sf-preview-bar { background: #4f46e5; color: #fff; font-size: 12.5px; font-weight: 600; } .sf-preview-bar .sf-wrap { display: block; padding: 8px 0; } .sf-add { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 22px 0; } .sf-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--sf-muted); } .sf-field select, .sf-field input { padding: 10px 12px; border: 1px solid var(--sf-border); border-radius: 10px; font: inherit; background: var(--sf-surface); color: var(--sf-ink); } .sf-qty input { width: 84px; } .sf-btn-add { align-self: flex-end; } /* Variant picker styles (0049) — chips / swatches. Zero-JS radios; the native radio is hidden and the label is the tap target, so it stays keyboard-accessible + posts name=variant_id like the dropdown. */ .sf-picker { flex-direction: row; flex-wrap: wrap; gap: 8px; } .sf-picker .sf-pick { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--sf-border); border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--sf-ink); background: var(--sf-surface); } .sf-picker .sf-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; } .sf-picker .sf-pick.is-on { border-color: var(--sf-brand); background: var(--sf-accent); box-shadow: 0 0 0 1px var(--sf-brand); } .sf-picker .sf-pick:focus-within { box-shadow: 0 0 0 2px var(--sf-brand); } .sf-picker .sf-pick-price { font-weight: 700; color: var(--sf-muted); font-size: 13px; } /* Swatches: squarer tiles that lead with the variant name; reuse the accent tint per option. */ .sf-picker-swatches { gap: 10px; } .sf-picker-swatches .sf-pick { flex-direction: column; align-items: flex-start; gap: 2px; border-radius: 12px; min-width: 96px; } /* Trust-badge strip (0049) — plain text/emoji, no external images. */ .sf-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 0; padding: 0; } .sf-trust-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sf-muted); } .sf-trust-ic { font-size: 15px; } /* Specifications table (0049). */ .sf-specs { margin: 32px 0 0; } .sf-specs-h { font-size: 20px; font-weight: 800; margin: 0 0 12px; } .sf-specs-table { width: 100%; max-width: 560px; border-collapse: collapse; font-size: 14px; } .sf-specs-table th, .sf-specs-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--sf-border); vertical-align: top; } .sf-specs-table th { width: 40%; color: var(--sf-muted); font-weight: 600; } .sf-specs-table td { color: var(--sf-ink); } .sf-pd-desc { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--sf-border); color: var(--sf-ink); } .sf-pd-desc img { max-width: 100%; height: auto; } /* ── THE FOOTER IS A BAND TOO (L4) ───────────────────────────────────────────────────────────── EVERY FALLBACK IS THE LITERAL THIS RULE ALREADY CARRIED, and two of them differ from the header's for reasons worth writing down. `transparent` — because `.sf-footer` declared NO background and transparent is what it computed to. NOT `var(--sf-bg)`: that is the HEADER's fallback because `.sf-header` really did say `background: var(--sf-bg)`, and copying it here would swap a computed transparent for #ffffff on three trading shops. `var(--sf-muted)` — because this rule's own colour is `var(--sf-muted)` and always has been. The header falls back to `inherit` only because it declared no colour at all. The BORDER takes the band's colour when there is one, so a merchant's band does not get a theme-grey seam drawn across the top of it. With nothing set it resolves to `var(--sf-border)`, byte for byte what it was. `--sf-band-*` AND NEVER `--sf-chr-*` — custom properties inherit, and every widget inside this footer reads the chrome namespace. Nothing inside the footer reads `--sf-band-*`; the three rules that do are all SIBLINGS of