/* ============================================================================ Microcript reseller storefronts — THEME LAYERS. Loaded immediately AFTER store.css on every tenant storefront. store.css is the base sheet ("Studio"); each layer below re-skins it for one theme, keyed on which the layout renders from Setting::storeTheme(). An unknown/absent value simply matches nothing and the store renders as Studio — a theme can never break a storefront. ── The cascade contract (read before adding a theme) ───────────────────── store.css ends with a DAY/NIGHT block on html[data-theme="dark"] (0,1,1) that redefines the surface tokens. This file loads later, so an unscoped html[data-store-theme="x"] rule (also 0,1,1) would beat it and leak light surfaces into dark mode. Therefore: · SHAPE tokens (radius, shadows, spacing, weights) → html[data-store-theme="x"] They are mode-independent and are meant to apply in both. · LIGHT COLOUR tokens → html[data-store-theme="x"]:not([data-theme="dark"]) Cannot collide with dark mode at all: it only matches when dark is off. · DARK COLOUR tokens → html[data-store-theme="x"][data-theme="dark"] (0,2,1) Outranks the generic dark block, so each theme keeps its own character at night. Omit it and the theme falls back to the generic dark palette. NEVER set --sky / --blue here. Those are the RESELLER's brand colours, emitted inline by the layout; a theme suggests a palette (StoreThemes) which is written to their settings when they apply it — it is not imposed in CSS. ============================================================================ */ /* Optional display face for headings. The layout defines --sf-display only for themes that declare one, so everywhere else this resolves to `inherit` and headings keep the body font. */ h1, h2, h3, .sf-shead h2, .sf-slide h2, .sf-centered h2, .sf-banner h2, .sf-feat h3, .sf-stp h3, .sf-show-row .body h3 { font-family: var(--sf-display, inherit); } /* ════════════════════════════════════════════════════════════════════════════ STUDIO — the base sheet itself. Intentionally EMPTY: "studio" must render byte-for-byte what every existing store renders today, so it adds no rules. ════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════ EDITORIAL — warm paper, serif headlines, hairline rules, no shadows. ════════════════════════════════════════════════════════════════════════════ */ html[data-store-theme="editorial"] { --sf-rad: 4px; --radius: 4px; --radius-sm: 3px; --radius-lg: 6px; --sf-shadow: none; --sf-shadow-lg: none; /* A FLAT gradient, not a bare colour. store.css feeds --grad to `.sf-slide { background-image: … , var(--sf-sgrad, var(--grad)) }`, and a colour is not a valid background-image: the declaration is dropped and a brand-styled hero renders white-on-white. A two-stop gradient of the same colour is valid in every context --grad is used in and paints flat. */ --grad: linear-gradient(var(--sky), var(--sky)); } html[data-store-theme="editorial"]:not([data-theme="dark"]) { --sf-bg: #f7f3ec; --sf-card: #fffdf9; --sf-ink: #1c1917; --sf-mut: #6f6558; --sf-line: #e3dbcd; --sf-glass: rgba(247, 243, 236, .92); --sf-tint: color-mix(in srgb, var(--sky) 8%, #fffdf9); --sf-tint2: color-mix(in srgb, var(--sky) 15%, #fffdf9); } html[data-store-theme="editorial"][data-theme="dark"] { --sf-bg: #14120e; --sf-card: #1d1a15; --sf-ink: #f2ede4; --sf-mut: #a89e8e; --sf-line: #2f2a22; --sf-glass: rgba(20, 18, 14, .9); } /* Flat paper — the base sheet's brand blooms are too glossy for this look. */ html[data-store-theme="editorial"] body.store { background: var(--sf-bg); } html[data-store-theme="editorial"] .sf-head { backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--sf-ink); } /* Serif headlines, set larger and looser than the base sans. */ html[data-store-theme="editorial"] .sf-shead h2 { font-weight: 700; letter-spacing: -.01em; font-size: 26px; } @media (min-width: 720px) { html[data-store-theme="editorial"] .sf-shead h2 { font-size: 34px; } } html[data-store-theme="editorial"] .sf-slide h2, html[data-store-theme="editorial"] .sf-centered h2, html[data-store-theme="editorial"] .sf-banner h2 { font-weight: 700; letter-spacing: -.01em; } /* Rules, not cards: hairline borders and no lift on hover. */ html[data-store-theme="editorial"] .sf-pcard, html[data-store-theme="editorial"] .sf-feat, html[data-store-theme="editorial"] .sf-stp, html[data-store-theme="editorial"] .sf-testi, html[data-store-theme="editorial"] .sf-qa, html[data-store-theme="editorial"] .sf-cline, html[data-store-theme="editorial"] .sf-cform, html[data-store-theme="editorial"] .sf-stats, html[data-store-theme="editorial"] .sf-cat { box-shadow: none; } html[data-store-theme="editorial"] .sf-pcard:hover, html[data-store-theme="editorial"] .sf-feat:hover, html[data-store-theme="editorial"] .sf-cat:hover, html[data-store-theme="editorial"] a.sf-cline:hover { transform: none; box-shadow: none; border-color: var(--sf-ink); } html[data-store-theme="editorial"] .sf-car, html[data-store-theme="editorial"] .sf-banner, html[data-store-theme="editorial"] .sf-centered, html[data-store-theme="editorial"] .sf-video, html[data-store-theme="editorial"] .sf-map, html[data-store-theme="editorial"] .sf-show-row { border-radius: 3px; box-shadow: none; } html[data-store-theme="editorial"] .sf-stats, html[data-store-theme="editorial"] .sf-cform { border-radius: 4px; } /* Section labels read as small-caps standfirsts. */ html[data-store-theme="editorial"] .sf-logos-title, html[data-store-theme="editorial"] .sf-foot h5 { letter-spacing: .16em; } html[data-store-theme="editorial"] .sf-sbadge { border-radius: 2px; letter-spacing: .18em; } html[data-store-theme="editorial"] .btn, html[data-store-theme="editorial"] .sf-chip, html[data-store-theme="editorial"] .sf-search, html[data-store-theme="editorial"] .sf-search .btn, html[data-store-theme="editorial"] .sf-qty { border-radius: 3px; } /* ════════════════════════════════════════════════════════════════════════════ BOLD — thick outlines and hard offset shadows. The offset is drawn in --sf-line, so it is black on the light palette and bone-white on the dark one without a second set of rules. ════════════════════════════════════════════════════════════════════════════ */ html[data-store-theme="bold"] { --sf-rad: 16px; --radius: 12px; --radius-sm: 10px; --radius-lg: 16px; --sf-shadow: 4px 4px 0 var(--sf-line); --sf-shadow-lg: 7px 7px 0 var(--sf-line); } html[data-store-theme="bold"]:not([data-theme="dark"]) { --sf-bg: #fdf7ee; --sf-card: #ffffff; --sf-ink: #0b0b0f; --sf-mut: #4b4b55; --sf-line: #0b0b0f; --sf-glass: #ffffff; } html[data-store-theme="bold"][data-theme="dark"] { --sf-bg: #15131b; --sf-card: #1e1b26; --sf-ink: #f7f5ef; --sf-mut: #b3aec2; --sf-line: #f7f5ef; --sf-glass: #1e1b26; } html[data-store-theme="bold"] body.store { background: var(--sf-bg); } html[data-store-theme="bold"] .sf-head { backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 2px solid var(--sf-line); } html[data-store-theme="bold"] .sf-shead h2 { font-weight: 800; letter-spacing: -.03em; } /* Everything gets a real outline. */ html[data-store-theme="bold"] .sf-pcard, html[data-store-theme="bold"] .sf-feat, html[data-store-theme="bold"] .sf-stp, html[data-store-theme="bold"] .sf-testi, html[data-store-theme="bold"] .sf-qa, html[data-store-theme="bold"] .sf-cline, html[data-store-theme="bold"] .sf-cform, html[data-store-theme="bold"] .sf-stats, html[data-store-theme="bold"] .sf-cat, html[data-store-theme="bold"] .sf-chip, html[data-store-theme="bold"] .gbtn, html[data-store-theme="bold"] .sf-search { border-width: 2px; } html[data-store-theme="bold"] .btn { border: 2px solid var(--sf-line); box-shadow: 3px 3px 0 var(--sf-line); } html[data-store-theme="bold"] .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--sf-line); } html[data-store-theme="bold"] .btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--sf-line); } /* The lift moves INTO the shadow rather than floating above it. */ html[data-store-theme="bold"] .sf-pcard:hover, html[data-store-theme="bold"] .sf-feat:hover, html[data-store-theme="bold"] .sf-cat:hover, html[data-store-theme="bold"] a.sf-cline:hover { transform: translate(-2px, -2px); box-shadow: var(--sf-shadow-lg); border-color: var(--sf-line); } html[data-store-theme="bold"] .sf-car, html[data-store-theme="bold"] .sf-banner, html[data-store-theme="bold"] .sf-centered, html[data-store-theme="bold"] .sf-video, html[data-store-theme="bold"] .sf-map, html[data-store-theme="bold"] .sf-show-row { border: 2px solid var(--sf-line); box-shadow: var(--sf-shadow-lg); } /* --sf-line is a near-solid ink here, so the two "empty state" glyphs that colour themselves with it would land as a 44px black blob. Grey them. */ html[data-store-theme="bold"] .sf-empty i, html[data-store-theme="bold"] .sf-cempty i { color: var(--sf-mut); opacity: .45; } /* ════════════════════════════════════════════════════════════════════════════ MINIMAL — flat, quiet and tight. No gradients, no shadows, no lift. ════════════════════════════════════════════════════════════════════════════ */ html[data-store-theme="minimal"] { --sf-rad: 7px; --radius: 6px; --radius-sm: 5px; --radius-lg: 8px; --sf-shadow: none; --sf-shadow-lg: 0 6px 18px -12px rgba(15, 23, 42, .4); /* A FLAT gradient, not a bare colour. store.css feeds --grad to `.sf-slide { background-image: … , var(--sf-sgrad, var(--grad)) }`, and a colour is not a valid background-image: the declaration is dropped and a brand-styled hero renders white-on-white. A two-stop gradient of the same colour is valid in every context --grad is used in and paints flat. */ --grad: linear-gradient(var(--sky), var(--sky)); } html[data-store-theme="minimal"]:not([data-theme="dark"]) { --sf-bg: #ffffff; --sf-card: #ffffff; --sf-ink: #111827; --sf-mut: #6b7280; --sf-line: #e5e7eb; --sf-glass: rgba(255, 255, 255, .94); --sf-tint: color-mix(in srgb, var(--sky) 6%, #fff); --sf-tint2: color-mix(in srgb, var(--sky) 11%, #fff); } html[data-store-theme="minimal"][data-theme="dark"] { --sf-bg: #0b0d10; --sf-card: #131720; --sf-ink: #e7eaf0; --sf-mut: #9aa4b2; --sf-line: #232a35; --sf-glass: rgba(11, 13, 16, .9); } html[data-store-theme="minimal"] body.store { background: var(--sf-bg); } html[data-store-theme="minimal"] .sf-head { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Denser rhythm — more of the catalogue above the fold. */ html[data-store-theme="minimal"] .sf-sec { padding: 32px 0; } @media (min-width: 1000px) { html[data-store-theme="minimal"] .sf-sec { padding: 44px 0; } } html[data-store-theme="minimal"] .sf-shead { margin-bottom: 16px; } html[data-store-theme="minimal"] .sf-shead h2 { font-size: 20px; font-weight: 700; } @media (min-width: 720px) { html[data-store-theme="minimal"] .sf-shead h2 { font-size: 24px; } } html[data-store-theme="minimal"] .sf-pcard:hover, html[data-store-theme="minimal"] .sf-feat:hover, html[data-store-theme="minimal"] .sf-cat:hover, html[data-store-theme="minimal"] a.sf-cline:hover { transform: none; box-shadow: none; border-color: var(--sky); } html[data-store-theme="minimal"] .sf-car, html[data-store-theme="minimal"] .sf-banner, html[data-store-theme="minimal"] .sf-centered, html[data-store-theme="minimal"] .sf-video, html[data-store-theme="minimal"] .sf-map, html[data-store-theme="minimal"] .sf-show-row, html[data-store-theme="minimal"] .sf-stats, html[data-store-theme="minimal"] .sf-cform { border-radius: 10px; box-shadow: none; } /* Drop the glossy sheen; the slide keeps whatever designed style it was given, and a brand-styled slide paints flat via --grad above. Overriding the whole background here is what broke the hero the first time round - see --grad. */ html[data-store-theme="minimal"] .sf-slide { background-image: var(--sf-sgrad, var(--grad)); } html[data-store-theme="minimal"] .sf-banner::after, html[data-store-theme="minimal"] .sf-slide.st-festive::before, html[data-store-theme="minimal"] .sf-slide.st-sale::before { display: none; } html[data-store-theme="minimal"] .sf-feat .ic, html[data-store-theme="minimal"] .sf-cline .ic, html[data-store-theme="minimal"] .sf-cat .ic { border-radius: 8px; } html[data-store-theme="minimal"] .sf-stp .num { border-radius: 8px; box-shadow: none; } /* ════════════════════════════════════════════════════════════════════════════ AURORA — big soft corners, gradient blooms and coloured glows. ════════════════════════════════════════════════════════════════════════════ */ html[data-store-theme="aurora"] { --sf-rad: 20px; --radius: 14px; --radius-sm: 12px; --radius-lg: 20px; --sf-shadow: 0 4px 16px -10px color-mix(in srgb, var(--sky) 60%, transparent); --sf-shadow-lg: 0 28px 64px -30px color-mix(in srgb, var(--sky) 75%, transparent); } html[data-store-theme="aurora"]:not([data-theme="dark"]) { --sf-bg: #f6f2ff; --sf-card: #ffffff; --sf-ink: #1b1233; --sf-mut: #6b6486; --sf-line: #ece3ff; --sf-glass: rgba(255, 255, 255, .74); --sf-tint: color-mix(in srgb, var(--sky) 12%, #fff); --sf-tint2: color-mix(in srgb, var(--sky) 22%, #fff); } html[data-store-theme="aurora"][data-theme="dark"] { --sf-bg: #0e0a1a; --sf-card: #17122b; --sf-ink: #efe9ff; --sf-mut: #a99fc4; --sf-line: #2a2142; --sf-glass: rgba(14, 10, 26, .74); } /* A third bloom, and the two base ones pushed brighter. */ html[data-store-theme="aurora"] body.store { background: radial-gradient(820px 460px at 92% -10%, var(--sf-tint2), transparent 62%), radial-gradient(700px 420px at -12% 6%, var(--sf-tint), transparent 58%), radial-gradient(600px 380px at 50% 104%, var(--sf-tint), transparent 60%), var(--sf-bg); background-attachment: fixed; } html[data-store-theme="aurora"] .sf-head { border-bottom-color: color-mix(in srgb, var(--sky) 22%, transparent); } html[data-store-theme="aurora"] .sf-shead h2 { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; /* A clipped gradient has no fallback colour if the paint fails, so keep the descender room and let the sub-line stay solid. */ padding-bottom: .06em; } html[data-store-theme="aurora"] .sf-car, html[data-store-theme="aurora"] .sf-banner, html[data-store-theme="aurora"] .sf-centered, html[data-store-theme="aurora"] .sf-video, html[data-store-theme="aurora"] .sf-map, html[data-store-theme="aurora"] .sf-show-row { border-radius: 28px; } html[data-store-theme="aurora"] .sf-stats, html[data-store-theme="aurora"] .sf-cform { border-radius: 24px; } html[data-store-theme="aurora"] .btn-primary { box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--sky) 85%, transparent); } html[data-store-theme="aurora"] .btn-primary:hover { box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--sky) 90%, transparent); } html[data-store-theme="aurora"] .sf-feat .ic, html[data-store-theme="aurora"] .sf-cline .ic, html[data-store-theme="aurora"] .sf-cat .ic { background: var(--grad); color: #fff; border-radius: 16px; } html[data-store-theme="aurora"] .sf-pcard:hover, html[data-store-theme="aurora"] .sf-feat:hover { transform: translateY(-5px); } /* ════════════════════════════════════════════════════════════════════════════ CORPORATE — solid dark navbar, accent-topped cards, dense businesslike type. ════════════════════════════════════════════════════════════════════════════ */ html[data-store-theme="corporate"] { --sf-rad: 8px; --radius: 7px; --radius-sm: 6px; --radius-lg: 9px; --sf-shadow: 0 1px 2px rgba(15, 23, 42, .09); --sf-shadow-lg: 0 14px 30px -20px rgba(15, 23, 42, .55); } html[data-store-theme="corporate"]:not([data-theme="dark"]) { --sf-bg: #f1f5f9; --sf-card: #ffffff; --sf-ink: #0f172a; --sf-mut: #5b6b80; --sf-line: #dbe3ec; --sf-glass: rgba(241, 245, 249, .92); } html[data-store-theme="corporate"][data-theme="dark"] { --sf-bg: #0b1220; --sf-card: #131c2b; --sf-ink: #e6edf7; --sf-mut: #93a3b8; --sf-line: #223046; --sf-glass: rgba(11, 18, 32, .92); } html[data-store-theme="corporate"] body.store { background: var(--sf-bg); } /* Solid navy bar. Only the HEADER inverts — the mobile tab bar keeps the page surface, so the two never fight for attention on a phone. */ html[data-store-theme="corporate"] .sf-head { background: #0f172a; border-bottom: 1px solid #0f172a; backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-store-theme="corporate"] .sf-head .sb-word, html[data-store-theme="corporate"] .sf-head .sf-nav a { color: #fff; } html[data-store-theme="corporate"] .sf-head .sb-dot { background: #fff; } html[data-store-theme="corporate"] .sf-head .sf-nav a:hover, html[data-store-theme="corporate"] .sf-head .sf-nav a.on { color: #fff; opacity: 1; text-decoration: underline; text-underline-offset: 6px; } html[data-store-theme="corporate"] .sf-head .gbtn { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .16); color: #fff; } html[data-store-theme="corporate"] .sf-head .gbtn:hover { background: rgba(255, 255, 255, .18); } /* Structured cards: a brand rule across the top edge. */ html[data-store-theme="corporate"] .sf-feat, html[data-store-theme="corporate"] .sf-stp, html[data-store-theme="corporate"] .sf-testi { border-top: 3px solid var(--sky); } html[data-store-theme="corporate"] .sf-feat:hover, html[data-store-theme="corporate"] .sf-pcard:hover { transform: translateY(-2px); } html[data-store-theme="corporate"] .sf-shead h2 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; } @media (min-width: 720px) { html[data-store-theme="corporate"] .sf-shead h2 { font-size: 26px; } } html[data-store-theme="corporate"] .sf-sec { padding: 36px 0; } @media (min-width: 1000px) { html[data-store-theme="corporate"] .sf-sec { padding: 48px 0; } } html[data-store-theme="corporate"] .sf-car, html[data-store-theme="corporate"] .sf-banner, html[data-store-theme="corporate"] .sf-centered, html[data-store-theme="corporate"] .sf-video, html[data-store-theme="corporate"] .sf-map, html[data-store-theme="corporate"] .sf-show-row, html[data-store-theme="corporate"] .sf-stats, html[data-store-theme="corporate"] .sf-cform { border-radius: 10px; } html[data-store-theme="corporate"] .sf-sbadge { border-radius: 4px; } /* ════════════════════════════════════════════════════════════════════════════ DARK-MODE ACCENT — only the EXTRA selectors these themes need. --sf-acc is NOT defined here any more. It is computed per tenant and per mode in PHP (App\Storefront\Contrast), emitted by the layout and mapped in store.css, which guarantees WCAG AA for ANY brand colour instead of the fixed 45% white-mix this block used to apply. That fixed mix outranked the computed value on specificity, so leaving it in would have quietly overridden the real fix for every non-studio theme. What remains is the list below: glyphs sitting on a --sf-tint tile. In dark mode that tile is itself a dark mix, so they need the same lift the text gets; on the LIGHT tint they are perfectly legible, which is why store.css leaves them on the raw brand colour. Scoped off "studio" so the base sheet every pre-existing store renders is left exactly as it is. ════════════════════════════════════════════════════════════════════════════ */ html[data-store-theme]:not([data-store-theme="studio"])[data-theme="dark"] .sf-feat .ic, html[data-store-theme]:not([data-store-theme="studio"])[data-theme="dark"] .sf-cat .ic, html[data-store-theme]:not([data-store-theme="studio"])[data-theme="dark"] .sf-cline .ic, html[data-store-theme]:not([data-store-theme="studio"])[data-theme="dark"] .sf-step-ic, html[data-store-theme]:not([data-store-theme="studio"])[data-theme="dark"] .sf-cthumb, html[data-store-theme]:not([data-store-theme="studio"])[data-theme="dark"] .sf-pthumb, html[data-store-theme]:not([data-store-theme="studio"])[data-theme="dark"] .sf-show-row .media, html[data-store-theme]:not([data-store-theme="studio"])[data-theme="dark"] .sf-testi .ava, html[data-store-theme]:not([data-store-theme="studio"])[data-theme="dark"] .sf-addon-ic, html[data-store-theme]:not([data-store-theme="studio"])[data-theme="dark"] .sf-chip i, html[data-store-theme]:not([data-store-theme="studio"])[data-theme="dark"] .sf-map-addr i, html[data-store-theme]:not([data-store-theme="studio"])[data-theme="dark"] .sf-addon-line > i { color: var(--sf-acc); } /* ════════════════════════════════════════════════════════════════════════════ OWNER-ONLY SETUP WARNING BAR. Shown only to a signed-in reseller when RequireStoreEssentials is turning the public away (see storefront/layout.blade.php). Deliberately loud and NOT brand-coloured: this is a platform message about a broken store, and dressing it in the reseller's own palette would make it read as part of their design. Sits above the fixed header, so the header offset is nudged for its height. ════════════════════════════════════════════════════════════════════════════ */ .sf-setupbar { /* FIXED, not relative. The comment above always said "sits above the fixed header" but `relative` left it in normal flow, so body's padding-top (which reserves room for the header AND the bar) pushed it BELOW the header: the store opened with a blank 76px band, then the header, then the bar. */ position: fixed; top: 0; left: 0; right: 0; z-index: 61; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #7f1d1d; color: #fff; padding: 10px 16px; font-size: 13px; line-height: 1.45; } .sf-setupbar i { font-size: 18px; flex: none; } .sf-setupbar span { flex: 1 1 260px; min-width: 0; } .sf-setupbar a { flex: none; background: #fff; color: #7f1d1d; font-weight: 800; font-size: 12.5px; padding: 6px 13px; border-radius: 8px; white-space: nowrap; } .sf-setupbar a:hover { background: #fee2e2; color: #7f1d1d; } /* Second tier: the store IS open to the public, but something on it does not work for customers (today: no SMS provider, so nobody can create an account). Amber, not maroon -- the store is trading. Same class + a modifier so the header-offset rules below, which key off :has(.sf-setupbar), still apply. */ /* Compact on a phone. This bar is only ever shown to the signed-in reseller, on top of their OWN storefront, so every line it takes is a line of their shop they cannot see. */ @media (max-width: 560px) { .sf-setupbar { padding: 8px 12px; gap: 8px; font-size: 12.5px; line-height: 1.4; } .sf-setupbar i { font-size: 16px; } .sf-setupbar a { padding: 5px 11px; font-size: 12px; } } .sf-setupbar.warn { background: #92400e; } .sf-setupbar.warn a { color: #92400e; } .sf-setupbar.warn a:hover { background: #fef3c7; color: #78350f; } /* The header drops by the bar's height and the body reserves both. --sf-bar is MEASURED by store.js, because the bar's height depends on how the sentence wraps: the hardcoded 44/76px guess was 60px short on a phone, which is what shoved the header on top of it. The literals below are only the fallback for the frame before JS runs (and if it never does), so they are deliberately generous — too much room is a gap, too little is an overlap. */ body.store:has(.sf-setupbar) { padding-top: calc(var(--sf-head) + var(--sf-bar, 48px)); } body.store:has(.sf-setupbar) .sf-head { top: var(--sf-bar, 48px); } @media (max-width: 560px) { body.store:has(.sf-setupbar) { padding-top: calc(var(--sf-head) + var(--sf-bar, 104px)); } body.store:has(.sf-setupbar) .sf-head { top: var(--sf-bar, 104px); } }