/*
 * Storefront design preset: Modern (Shopify-inspired).
 *
 * Loaded by header.php ONLY for a store whose `storefront_design` setting is "modern", so every other
 * store and domain keeps its current look. It restyles existing markup and nothing else: no page,
 * form, script or price calculation differs between presets.
 *
 * Design language (from the Shopify DESIGN.md "light / transactional" track):
 *   - white canvas with a barely-warm cream for tiles and bands, black ink, #e4e4e7 hairlines
 *   - thin display headlines (weight 330) over an Inter UI body
 *   - pill-shaped buttons only; 12px cards, 20px photo frames; stacked tiny shadows on pricing cards
 *   - mint / pistachio accents as surface fills only, never as text colour
 *
 * Cascade contract:
 *   - Plain :root tokens load after the page and header defaults and BEFORE the tenant colour/font
 *     tokens, so colours and fonts chosen in Admin still override this preset.
 *   - Every element rule is scoped to html[data-storefront-design="modern"], which is also what lets it
 *     win over footer.php's stylesheet, printed later in the page.
 *   - The few !important declarations exist only to beat inline style="" attributes in page markup.
 */

:root {
    --bg: #ffffff;
    --card-bg: #fbfbf5;
    --surface: #ffffff;
    --text: #000000;
    --text-main: #000000;
    --text-dark: #000000;
    --muted: #71717a;
    --text-light: #71717a;
    --text-grey: #71717a;
    --border: #e4e4e7;
    --border-color: #e4e4e7;
    --menu-bg: #ffffff;
    --menu-footer-bg: rgba(255, 255, 255, 0.92);

    --sd-canvas: var(--bg);
    --sd-cream: var(--card-bg);
    --sd-ink: var(--text);
    --sd-muted: var(--muted);
    --sd-hairline: var(--border);
    /* Every --theme-* property below comes from Admin > Colours & Fonts (storefront_theme_section_css)
       and is unset until the store picks one, so each fallback is this preset's own built-in look. */
    --sd-btn-bg: var(--theme-button-bg, var(--primary, var(--text)));
    --sd-btn-ink: var(--theme-button-text, var(--primary-contrast, #ffffff));
    /* Hover shade is mixed from the button's own colours, so a light brand colour (yellow) darkens
       under dark text instead of turning into a dark grey that its text cannot be read on. */
    --sd-btn-hover: color-mix(in srgb, var(--sd-btn-bg) 84%, var(--sd-btn-ink));
    --sd-btn-radius: var(--theme-button-radius, 999px);
    /* A tenant primary colour tints the accent surfaces; without one they fall back to Shopify's aloe mint. */
    --sd-accent-soft: var(--theme-band-bg, color-mix(in srgb, var(--primary, #34c779) 14%, #ffffff));
    --sd-accent: color-mix(in srgb, var(--primary, #34c779) 30%, #ffffff);
    --sd-header-bg: var(--theme-header-bg, rgba(255, 255, 255, 0.92));
    /* The page's own text colour, resolved here once, so a panel inside a recoloured header can go back to it. */
    --sd-page-text: var(--text);
    --sd-page-muted: var(--muted);
    --sd-page-border: var(--border);
    --sd-display-weight: var(--theme-heading-weight, 330);

    --sd-font-display: var(--font-heading, "Inter", "Helvetica Neue", Helvetica, Arial, "Apple SD Gothic Neo", "Malgun Gothic", "PingFang SC", "Microsoft YaHei", sans-serif);
    --sd-font-body: var(--font-body, "Inter", "Helvetica Neue", Helvetica, Arial, "Apple SD Gothic Neo", "Malgun Gothic", "PingFang SC", "Microsoft YaHei", sans-serif);

    --sd-max: 1440px;
    --sd-gutter: clamp(16px, 3.4vw, 48px);
    --sd-section: clamp(56px, 7vw, 104px);
    --sd-radius-card: var(--theme-card-radius, 12px);
    --sd-radius-frame: var(--theme-frame-radius, 20px);
    --sd-shadow-card: 0 8px 8px rgba(0, 0, 0, 0.04), 0 4px 4px rgba(0, 0, 0, 0.04), 0 2px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.06);
    --sd-shadow-float: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

html[data-storefront-theme="dark"] {
    --bg: #0a0a0a;
    --card-bg: #141414;
    --surface: #141414;
    --text: #ffffff;
    --text-main: #ffffff;
    --text-dark: #ffffff;
    --muted: #a1a1aa;
    --text-light: #a1a1aa;
    --text-grey: #a1a1aa;
    --border: #27272a;
    --border-color: #27272a;
    --menu-bg: #0a0a0a;
    --menu-footer-bg: rgba(10, 10, 10, 0.92);
    --sd-btn-bg: var(--theme-button-bg, var(--primary, #ffffff));
    --sd-btn-ink: var(--theme-button-text, var(--primary-contrast, #000000));
    --sd-page-text: var(--text);
    --sd-page-muted: var(--muted);
    --sd-page-border: var(--border);
    --sd-accent-soft: color-mix(in srgb, var(--primary, #34c779) 16%, #0a0a0a);
    --sd-accent: color-mix(in srgb, var(--primary, #34c779) 28%, #0a0a0a);
    --sd-header-bg: rgba(10, 10, 10, 0.92);
}

/* ================================================================ base */
html[data-storefront-design="modern"] body {
    background-color: var(--sd-canvas);
    color: var(--sd-ink);
    font-family: var(--sd-font-body);
    font-weight: 400;
    font-feature-settings: "ss03";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* One typeface everywhere, the one the header uses. Pages written for the classic design hard-code
   Playfair, Georgia, Courier, Poppins, Manrope and Outfit in their own stylesheets and inline style=""
   attributes, hence !important. Icons (Font Awesome <i> / fa-* classes) and code keep their own font;
   :where() keeps those exclusions from adding specificity, so the heading rule below still wins. */
html[data-storefront-design="modern"] body,
html[data-storefront-design="modern"] body *:where(:not(i, [class*="fa-"], .fa, .fas, .far, .fab, code, pre, kbd, samp)) {
    font-family: var(--sd-font-body) !important;
}
html[data-storefront-design="modern"] :is(h1, h2, h3, h4, h5, h6, .serif-text, .serif-italic, .brand-logo, .site-brand-name, .footer-brand-logo) {
    font-family: var(--sd-font-display) !important;
}
html[data-storefront-design="modern"] .serif-text,
html[data-storefront-design="modern"] .serif-italic { font-style: normal; }

html[data-storefront-design="modern"] :focus-visible {
    outline: 2px solid var(--sd-ink);
    outline-offset: 3px;
}
/* Text fields show focus their own way, never with that black box drawn around them: a boxed field
   darkens its border, an underlined one (sign-in, register, newsletter) gets a darker, thicker line.
   Buttons, links, checkboxes and radios keep the ring above, where it is the only sign of focus. */
html[data-storefront-design="modern"] :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"], [type="reset"]), textarea, select):focus-visible {
    outline: none;
    border-color: var(--sd-ink);
}
html[data-storefront-design="modern"] :is(.line-input, .subscribe-input):focus-visible {
    border-bottom-color: var(--sd-ink);
    box-shadow: 0 1px 0 0 var(--sd-ink);
}

/* ================================================================ part-by-part colours from Admin */
/* Each part re-points the preset's ink, muted and hairline tokens at the colour the store chose for it,
   so every rule inside keeps working unchanged. The page-level --text family is re-pointed too, for the
   header markup styled by header.php itself. Unset, every value falls back to the page's own colour. */
html[data-storefront-design="modern"] :is(.desktop-header-wrapper, .mobile-header, .global-mobile-nav) {
    --sd-ink: var(--theme-header-text, var(--sd-page-text));
    --sd-muted: var(--theme-header-muted, var(--sd-page-muted));
    --sd-hairline: var(--theme-header-line, var(--sd-page-border));
    --text: var(--sd-ink);
    --text-main: var(--sd-ink);
    --text-dark: var(--sd-ink);
    --muted: var(--sd-muted);
    --text-grey: var(--sd-muted);
    --text-light: var(--sd-muted);
    --border-color: var(--sd-hairline);
    color: var(--sd-ink);
}
/* Panels that open from the header keep a white card of their own, so they go back to the page text. */
html[data-storefront-design="modern"] :is(.desktop-header-wrapper, .mobile-header) :is(.nav-dropdown-panel, .store-update-notification-panel, .luxury-search-overlay, .luxury-mobile-menu) {
    --sd-ink: var(--sd-page-text);
    --sd-muted: var(--sd-page-muted);
    --sd-hairline: var(--sd-page-border);
    --text: var(--sd-page-text);
    --text-main: var(--sd-page-text);
    --text-dark: var(--sd-page-text);
    --muted: var(--sd-page-muted);
    --text-grey: var(--sd-page-muted);
    --text-light: var(--sd-page-muted);
    --border-color: var(--sd-page-border);
    color: var(--sd-page-text);
}
html[data-storefront-design="modern"] .luxury-footer {
    --sd-ink: var(--theme-footer-text, var(--sd-page-text));
    --sd-muted: var(--theme-footer-muted, var(--sd-page-muted));
    --sd-hairline: var(--theme-footer-line, var(--sd-page-border));
    --sd-footer-field: var(--theme-footer-field, var(--sd-canvas));
    --text: var(--sd-ink);
    --text-dark: var(--sd-ink);
    --text-grey: var(--sd-muted);
}
html[data-storefront-design="modern"] .editorial-section { --sd-ink: var(--theme-band-text, var(--sd-page-text)); }
html[data-storefront-design="modern"] .feature-box {
    --sd-ink: var(--theme-feature-text, var(--sd-page-text));
    --sd-muted: var(--theme-feature-muted, var(--sd-page-muted));
    --sd-hairline: var(--theme-feature-line, var(--sd-page-border));
}
html[data-storefront-design="modern"] .pkg-card.popular { --sd-ink: var(--theme-popular-text, var(--sd-page-text)); --sd-muted: var(--sd-ink); }

/* ================================================================ header (single row on desktop) */
html[data-storefront-design="modern"] .desktop-header-wrapper {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: clamp(16px, 2.4vw, 32px);
    min-height: 72px;
    padding-inline: max(var(--sd-gutter), calc((100% - var(--sd-max)) / 2 + var(--sd-gutter)));
    background: var(--sd-header-bg);
    border-bottom: 1px solid var(--sd-hairline);
    font-family: var(--sd-font-body);
}
html[data-storefront-design="modern"] .desktop-header-wrapper.scrolled { box-shadow: 0 1px 0 var(--sd-hairline), 0 8px 24px rgba(0, 0, 0, 0.04); }
/* The top bar's three slots and the menu become one grid row: logo | menu | search | icons.
   The menu spans the whole row and reserves the same width on both sides, so it is centred on the
   PAGE, not on the gap between a short logo and a wider search-and-icons cluster. --sd-nav-side must be
   at least as wide as the wider side; storefront-navigation.js moves whatever no longer fits into "More". */
html[data-storefront-design="modern"] .desktop-header-wrapper { --sd-nav-side: 280px; padding-block: 8px; }
html[data-storefront-design="modern"] .desktop-top-bar { display: contents; }
html[data-storefront-design="modern"] .header-center { position: relative; z-index: 1; grid-column: 1; grid-row: 1; justify-content: flex-start; max-width: var(--sd-nav-side); }
html[data-storefront-design="modern"] .desktop-menu-bar {
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 0;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0 calc(var(--sd-nav-side) + 16px);
    justify-content: center;
    column-gap: clamp(18px, 2vw, 30px);
}
html[data-storefront-design="modern"] .header-left { position: relative; z-index: 1; grid-column: 3; grid-row: 1; }
html[data-storefront-design="modern"] .header-right { position: relative; z-index: 1; grid-column: 4; grid-row: 1; gap: 4px; }

html[data-storefront-design="modern"] .brand-logo,
html[data-storefront-design="modern"] .site-brand-name {
    font-family: var(--sd-font-display) !important;
    text-transform: none;
    font-weight: 600;
    color: var(--sd-ink);
}
/* A long store name wraps and is shown in full instead of being cut off, and the line box is tall
   enough for descenders (g, y, p), which line-height: 1 with overflow: hidden used to clip. */
html[data-storefront-design="modern"] .site-brand-name {
    padding-block: 0.06em;
    line-height: 1.22;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
html[data-storefront-design="modern"] .desktop-top-bar .brand-logo { min-height: 40px; font-size: 22px; letter-spacing: 0.01em; justify-content: flex-start; text-align: left; }
html[data-storefront-design="modern"] .desktop-top-bar .brand-logo-image { max-height: 60px; max-width: min(240px, 20vw); }

html[data-storefront-design="modern"] .desktop-menu-bar a,
html[data-storefront-design="modern"] .desktop-menu-bar summary {
    font-family: var(--sd-font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sd-ink);
    opacity: 0.86;
    padding: 6px 0;
}
html[data-storefront-design="modern"] .desktop-menu-bar details[open] > summary { padding: 6px 0; }
html[data-storefront-design="modern"] .desktop-menu-bar a:hover,
html[data-storefront-design="modern"] .desktop-menu-bar summary:hover { opacity: 1; }
/* Underline grows out from the centre of the word, and the word dips a pixel when pressed. */
html[data-storefront-design="modern"] .desktop-menu-bar > a::after,
html[data-storefront-design="modern"] .desktop-menu-bar details > summary::after {
    bottom: -1px;
    height: 1.5px;
    border-radius: 2px;
    background-color: var(--sd-ink);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html[data-storefront-design="modern"] .desktop-menu-bar > a:hover::after,
html[data-storefront-design="modern"] .desktop-menu-bar summary:hover::after,
html[data-storefront-design="modern"] .desktop-menu-bar > a:focus-visible::after,
html[data-storefront-design="modern"] .desktop-menu-bar details[open] > summary::after { content: ""; transform: scaleX(1); transform-origin: center; }
html[data-storefront-design="modern"] .desktop-menu-bar > a,
html[data-storefront-design="modern"] .desktop-menu-bar summary { transition: opacity 0.2s ease, transform 0.15s ease; }
html[data-storefront-design="modern"] .desktop-menu-bar > a:active,
html[data-storefront-design="modern"] .desktop-menu-bar summary:active { transform: translateY(1px); }
/* Menu items fade up one after another when the page opens. Transform and opacity only, so the
   overflow measurement in storefront-navigation.js is unaffected. */
@keyframes sd-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sd-drop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
/* "backwards", not "both": a finished animation must not keep holding transform, or :active could not move the link. */
html[data-storefront-design="modern"] .desktop-menu-bar > * { animation: sd-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
html[data-storefront-design="modern"] .desktop-menu-bar > :nth-child(2) { animation-delay: 0.04s; }
html[data-storefront-design="modern"] .desktop-menu-bar > :nth-child(3) { animation-delay: 0.08s; }
html[data-storefront-design="modern"] .desktop-menu-bar > :nth-child(4) { animation-delay: 0.12s; }
html[data-storefront-design="modern"] .desktop-menu-bar > :nth-child(5) { animation-delay: 0.16s; }
html[data-storefront-design="modern"] .desktop-menu-bar > :nth-child(6) { animation-delay: 0.2s; }
html[data-storefront-design="modern"] .desktop-menu-bar > :nth-child(n+7) { animation-delay: 0.24s; }
html[data-storefront-design="modern"] .desktop-menu-bar details[open] > .nav-dropdown-panel { transform-origin: top left; animation: sd-drop 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
html[data-storefront-design="modern"] .desktop-menu-bar [data-nav-overflow][open] > .nav-dropdown-panel { transform-origin: top right; }
/* The panel floats 14px below the word. Crossing that gap left the menu, and storefront-navigation.js
   closes a menu the pointer leaves, so the panel vanished before it could be reached. This invisible
   strip belongs to the summary, so the pointer never leaves the menu on its way down. */
html[data-storefront-design="modern"] .desktop-menu-bar details[open] > summary::before {
    content: "";
    position: absolute;
    top: 100%;
    left: -12px;
    right: -12px;
    height: 20px;
}
html[data-storefront-design="modern"] .desktop-menu-bar .nav-dropdown-panel {
    top: calc(100% + 14px);
    padding: 8px;
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-card);
    background: var(--sd-canvas);
    box-shadow: var(--sd-shadow-float);
}
html[data-storefront-design="modern"] .desktop-menu-bar .nav-dropdown-panel a {
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    opacity: 1;
}
html[data-storefront-design="modern"] .desktop-menu-bar .nav-dropdown-panel a { transition: background-color 0.15s ease, padding-left 0.2s ease; }
html[data-storefront-design="modern"] .desktop-menu-bar .nav-dropdown-panel a:hover { background: var(--sd-cream); text-decoration: none; padding-left: 16px; }
html[data-storefront-design="modern"] .desktop-menu-bar .nav-dropdown-panel a.nav-sub-link { padding-left: 26px; font-size: 13px; color: var(--sd-muted); }
html[data-storefront-design="modern"] .desktop-menu-bar .nav-dropdown-panel a.nav-sub-link:hover { padding-left: 30px; color: var(--sd-ink); }

html[data-storefront-design="modern"] .search-btn-wrapper {
    gap: 8px;
    min-height: 40px;
    padding: 0 16px 0 14px;
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-btn-radius);
    color: var(--sd-ink);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
html[data-storefront-design="modern"] .search-btn-wrapper:hover { opacity: 1; border-color: var(--sd-ink); }
html[data-storefront-design="modern"] .search-btn-wrapper span {
    font-family: var(--sd-font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

html[data-storefront-design="modern"] .header-icon,
html[data-storefront-design="modern"] .menu-toggle-btn {
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 50%;
    color: var(--sd-ink);
    transition: background-color 0.2s ease;
}
html[data-storefront-design="modern"] .header-icon:hover,
html[data-storefront-design="modern"] .menu-toggle-btn:hover { opacity: 1; transform: none; background: color-mix(in srgb, var(--sd-ink) 6%, transparent); }
html[data-storefront-design="modern"] .luxury-badge {
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid var(--theme-header-bg, var(--sd-canvas));
    background: var(--sd-btn-bg);
    color: var(--sd-btn-ink);
    font-family: var(--sd-font-body);
    font-size: 10px;
    transform: translate(35%, -35%);
}

html[data-storefront-design="modern"] .mobile-header {
    /* Grows for a store name that needs more than one line, rather than cutting it off. */
    height: auto;
    min-height: 60px;
    padding-block: 6px !important;
    background: var(--sd-header-bg);
    border-bottom: 1px solid var(--sd-hairline);
    box-shadow: none;
    padding: 0 clamp(8px, 3vw, 16px);
}
/* Each icon cluster keeps its full width; the name takes what is left and wraps inside it. */
html[data-storefront-design="modern"] .mobile-header { grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); }
html[data-storefront-design="modern"] .mobile-header .brand-logo {
    max-width: 100%;
    font-size: clamp(13px, 4.1vw, 18px);
    letter-spacing: 0.01em;
    white-space: normal;
    text-align: center;
}
html[data-storefront-design="modern"] .mobile-header .site-brand-name { line-height: 1.18; }
html[data-storefront-design="modern"] .mobile-header .brand-logo-image { max-height: 46px; }
html[data-storefront-design="modern"] .mobile-header .header-icon,
html[data-storefront-design="modern"] .mobile-header .menu-toggle-btn { width: 38px; height: 38px; flex-basis: 38px; padding: 9px; }

html[data-storefront-design="modern"] .storefront-theme-toggle {
    border-color: var(--sd-hairline);
    background: var(--sd-canvas);
    color: var(--sd-ink);
    box-shadow: var(--sd-shadow-card);
}

/* Mobile slide-in menu */
html[data-storefront-design="modern"] .luxury-mobile-menu { background: var(--sd-canvas); font-family: var(--sd-font-body); }
html[data-storefront-design="modern"] .menu-header { padding: 18px 20px 14px; border-bottom-color: var(--sd-hairline); }
html[data-storefront-design="modern"] .menu-header span {
    font-family: var(--sd-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--sd-muted);
}
html[data-storefront-design="modern"] .menu-header button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sd-cream);
    font-size: 16px;
    color: var(--sd-ink);
}
html[data-storefront-design="modern"] .menu-scrollable { padding: 0 20px; }
html[data-storefront-design="modern"] .menu-links a,
html[data-storefront-design="modern"] .menu-links .mobile-collection > summary {
    padding: 18px 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sd-ink);
    border-bottom-color: var(--sd-hairline) !important;
}
html[data-storefront-design="modern"] .menu-links .mobile-collection-links { padding-left: 4px; }
html[data-storefront-design="modern"] .menu-links .mobile-collection-links a { padding: 12px 0; font-size: 16px; line-height: 22px; color: var(--sd-muted); border-bottom: 0 !important; }
html[data-storefront-design="modern"] .menu-links .mobile-collection-links a.nav-sub-link { padding-left: 16px; font-size: 15px; }
html[data-storefront-design="modern"] .menu-links a span.plus { color: var(--sd-muted); }
html[data-storefront-design="modern"] .menu-footer { padding: 20px; gap: 14px; background: var(--sd-cream); border-top-color: var(--sd-hairline); }
html[data-storefront-design="modern"] .menu-footer a { font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: 1; color: var(--sd-ink); }

/* Search overlay */
html[data-storefront-design="modern"] .luxury-search-overlay { background: color-mix(in srgb, var(--sd-canvas) 97%, transparent); }
html[data-storefront-design="modern"] .search-overlay-header { padding: 20px var(--sd-gutter); }
html[data-storefront-design="modern"] .search-overlay-header button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sd-cream);
    font-size: 18px;
    color: var(--sd-ink);
}
html[data-storefront-design="modern"] .search-overlay-form { gap: 12px; padding-bottom: 12px; border-bottom-color: var(--sd-hairline); }
html[data-storefront-design="modern"] .search-overlay-form::after { background: var(--sd-ink); }
html[data-storefront-design="modern"] .search-overlay-form input {
    font-family: var(--sd-font-display);
    font-style: normal;
    font-weight: var(--sd-display-weight);
    font-size: clamp(28px, 4.4vw, 48px);
    color: var(--sd-ink);
}
html[data-storefront-design="modern"] .search-overlay-form input::placeholder { color: #a1a1aa; }
/* The preset's focus ring (:focus-visible above) drew a black box round this borderless field. The
   form's own underline already grows across while the field has focus, so that is the cue here. */
html[data-storefront-design="modern"] .search-overlay-form input:focus-visible { outline: none; }
html[data-storefront-design="modern"] .search-overlay-form button {
    flex: 0 0 auto;
    margin-left: 0;
    padding: 12px 24px;
    border-radius: var(--sd-btn-radius);
    background: var(--sd-btn-bg);
    color: var(--sd-btn-ink);
    font-family: var(--sd-font-body);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
}
html[data-storefront-design="modern"] .search-overlay-form button:hover { background: var(--sd-btn-hover); }

/* ================================================================ buttons */
/* Shopify's pill is the only button shape. */
html[data-storefront-design="modern"] .btn-discover,
html[data-storefront-design="modern"] .pkg-btn,
html[data-storefront-design="modern"] .btn-apply,
html[data-storefront-design="modern"] .btn-clear,
html[data-storefront-design="modern"] .subscribe-btn,
html[data-storefront-design="modern"] .btn-add-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid var(--sd-btn-bg);
    border-radius: var(--sd-btn-radius);
    background: var(--sd-btn-bg);
    /* !important: some page markup writes its own inline text colour (the empty-catalogue "Clear
       Filters" link used var(--text)), which would otherwise paint black text on the black pill. */
    color: var(--sd-btn-ink) !important;
    font-family: var(--sd-font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    opacity: 1;
    cursor: pointer;
    animation: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
html[data-storefront-design="modern"] .btn-discover:hover,
html[data-storefront-design="modern"] .pkg-btn:hover,
html[data-storefront-design="modern"] .btn-apply:hover,
html[data-storefront-design="modern"] .subscribe-btn:hover,
html[data-storefront-design="modern"] .btn-add-cart:hover {
    letter-spacing: 0;
    opacity: 1;
    border-color: var(--sd-btn-hover);
    background: var(--sd-btn-hover);
    color: var(--sd-btn-ink) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.45);
}
html[data-storefront-design="modern"] .btn-discover::after {
    content: "\2192";
    position: static;
    width: auto;
    height: auto;
    background: none;
    transform: none;
    transition: transform 0.2s ease;
}
html[data-storefront-design="modern"] .btn-discover:hover::after { transform: translateX(3px); }
html[data-storefront-design="modern"] .pkg-btn.outline,
html[data-storefront-design="modern"] .btn-clear {
    background: transparent;
    color: var(--sd-ink) !important;
    border-color: var(--sd-ink);
}
html[data-storefront-design="modern"] .pkg-btn.outline:hover,
html[data-storefront-design="modern"] .btn-clear:hover { background: var(--sd-ink); border-color: var(--sd-ink); color: var(--sd-canvas) !important; }
html[data-storefront-design="modern"] .btn-add-cart:disabled,
html[data-storefront-design="modern"] .btn-add-cart:disabled:hover { border-color: #e4e4e7; background: #e4e4e7; color: #52525b !important; transform: none; box-shadow: none; }

/* Press feedback shared by every tappable control in this preset. */
html[data-storefront-design="modern"] :is(.btn-discover, .pkg-btn, .btn-apply, .btn-clear, .subscribe-btn, .btn-add-cart, .btn-checkout, .btn-black-solid, .btn-auth-primary, .btn-submit, .filter-btn, .search-btn-wrapper, .header-icon, .menu-toggle-btn, .bag-btn, .wish-heart, .hero-control, .spec-btn, .social-icons-modern a, .storefront-theme-toggle, .search-overlay-form button):active:not(:disabled) {
    transform: scale(0.96);
    transition-duration: 0.08s;
}

/* Buttons that live on other storefront pages: keep their colours, give them the pill. */
html[data-storefront-design="modern"] .btn-checkout,
html[data-storefront-design="modern"] .btn-black-solid,
html[data-storefront-design="modern"] .btn-auth-primary,
html[data-storefront-design="modern"] .btn-submit,
html[data-storefront-design="modern"] .btn-outline,
html[data-storefront-design="modern"] .outline-btn,
html[data-storefront-design="modern"] .user-pill-btn,
html[data-storefront-design="modern"] .referral-input-wrapper button,
html[data-storefront-design="modern"] .coupon-row button { border-radius: var(--sd-btn-radius); font-family: var(--sd-font-body); }
/* Checkout only: the claim and points buttons sit in the same column as Apply, so they share its shape. */
html[data-storefront-design="modern"] .summary-col :is(.voucher-claim-item button, .points-box-row button) { border-radius: var(--sd-btn-radius); font-family: var(--sd-font-body); }

/* ================================================================ hero */
/* Photo in a rounded frame, headline in clean space below it: no scrim, no text over the artwork. */
html[data-storefront-design="modern"] .hero {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas: "hero-media" "hero-caption";
    align-items: stretch;
    justify-content: normal;
    width: 100%;
    max-width: var(--sd-max);
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0 auto;
    padding: clamp(12px, 1.6vw, 24px) var(--sd-gutter) 0;
    text-align: left;
    background: transparent;
    overflow: visible;
}
html[data-storefront-design="modern"] .hero-slider-wrapper {
    position: relative;
    grid-area: hero-media;
    inset: auto;
    width: 100%;
    height: auto;
    border-radius: var(--sd-radius-frame);
    overflow: hidden;
    background: var(--sd-cream);
    z-index: 0;
    isolation: isolate;
}
html[data-storefront-design="modern"] .hero[data-hero-fit="cover"] .hero-slider-wrapper { aspect-ratio: 16 / 7; max-height: min(78vh, 720px); }
html[data-storefront-design="modern"] .hero-slide { background: var(--sd-cream); }
html[data-storefront-design="modern"] .hero-overlay,
html[data-storefront-design="modern"] .scroll-indicator { display: none; }
html[data-storefront-design="modern"] .hero-controls {
    position: relative;
    grid-area: hero-media;
    inset: auto;
    align-self: center;
    justify-self: stretch;
    margin: 0 clamp(10px, 1.6vw, 20px);
    transform: none;
    z-index: 3;
}
html[data-storefront-design="modern"] .hero-control {
    width: 44px;
    height: 44px;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    color: #000000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    backdrop-filter: none;
}
html[data-storefront-design="modern"] .hero-control:hover { background: #ffffff; }
html[data-storefront-design="modern"] .hero-indicators {
    position: relative;
    grid-area: hero-media;
    inset: auto;
    align-self: end;
    justify-self: center;
    margin: 0 0 clamp(12px, 1.6vw, 20px);
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(6px);
    transform: none;
    z-index: 3;
}
html[data-storefront-design="modern"] .hero-indicator { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); }
html[data-storefront-design="modern"] .hero-indicator:hover { width: 8px; background: rgba(255, 255, 255, 0.85); }
html[data-storefront-design="modern"] .hero-indicator.active { width: 24px; background: #ffffff; }
html[data-storefront-design="modern"] .hero-video-play {
    position: relative;
    grid-area: hero-media;
    inset: auto;
    align-self: start;
    justify-self: end;
    margin: clamp(10px, 1.4vw, 18px);
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    padding: 8px 14px;
    z-index: 3;
}
/* Sound and larger-player buttons sit in the frame's bottom-right corner, styled like the slide arrows. */
html[data-storefront-design="modern"] .hero-media-tools {
    position: relative;
    grid-area: hero-media;
    inset: auto;
    align-self: end;
    justify-self: end;
    margin: clamp(12px, 1.6vw, 20px);
    z-index: 3;
}
html[data-storefront-design="modern"] .hero-media-tool {
    width: 44px;
    height: 44px;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    color: #000000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    backdrop-filter: none;
}
html[data-storefront-design="modern"] .hero-media-tool:hover { background: #ffffff; }
html[data-storefront-design="modern"] .hero-media-tool[aria-pressed="true"] { background: #000000; color: #ffffff; }
html[data-storefront-design="modern"] .hero-content {
    position: relative;
    grid-area: hero-caption;
    /* One left-aligned column: title, text, button. Two columns put the button in the middle of the
       page whenever a slide had a title but no text, with nothing beside it. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "copy" "action";
    align-items: start;
    justify-items: start;
    row-gap: 18px;
    max-width: none;
    margin: 0;
    padding: clamp(28px, 3.6vw, 56px) 0 0;
    color: var(--sd-ink);
    background: transparent;
    text-align: left;
    z-index: 1;
}
html[data-storefront-design="modern"] .hero-content h1,
html[data-storefront-design="modern"] .hero-content h2 {
    grid-area: title;
    margin: 0;
    color: var(--sd-ink);
    font-family: var(--sd-font-display);
    font-size: clamp(2.25rem, 5.2vw, 4.5rem);
    font-weight: var(--sd-display-weight);
    line-height: 1.02;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}
html[data-storefront-design="modern"] .hero-content p {
    grid-area: copy;
    display: block;
    margin: 0;
    overflow: visible;
    color: var(--sd-muted);
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    font-weight: 420;
    line-height: 1.56;
    opacity: 1;
    -webkit-line-clamp: unset;
    max-width: 62ch;
}
/* A slide without text leaves no empty row between the title and the button. */
html[data-storefront-design="modern"] .hero-content p:empty { display: none; }
html[data-storefront-design="modern"] .hero-content .btn-discover { grid-area: action; justify-self: start; margin-top: 4px; }

/* ================================================================ section headings */
html[data-storefront-design="modern"] .category-header-row {
    align-items: flex-end;
    gap: 16px 24px;
    max-width: var(--sd-max);
    /* !important: several of these rows carry inline padding written for the classic layout. */
    padding: var(--sd-section) var(--sd-gutter) clamp(20px, 2.4vw, 32px) !important;
}
html[data-storefront-design="modern"] .category-parent {
    margin-bottom: 12px;
    color: var(--sd-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
html[data-storefront-design="modern"] .category-title-area h1,
html[data-storefront-design="modern"] .category-title-area h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0;
    color: var(--sd-ink);
    font-family: var(--sd-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--sd-display-weight);
    line-height: 1.12;
    letter-spacing: 0;
}
html[data-storefront-design="modern"] .category-title-area span.count {
    font-family: var(--sd-font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--sd-muted);
}
html[data-storefront-design="modern"] .filter-btn {
    flex: 0 0 auto;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid var(--sd-ink);
    border-radius: var(--sd-btn-radius);
    color: var(--sd-ink);
    font-family: var(--sd-font-body);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
html[data-storefront-design="modern"] .filter-btn:hover { background: var(--sd-ink); color: var(--sd-canvas); }
html[data-storefront-design="modern"] .filter-btn svg { stroke: currentColor; }

/* ================================================================ product / voucher cards */
html[data-storefront-design="modern"] .grid-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(32px, 3vw, 44px) clamp(16px, 1.8vw, 24px);
    max-width: var(--sd-max);
    padding: 0 var(--sd-gutter) var(--sd-section);
}
html[data-storefront-design="modern"] .product-card { min-width: 0; }
html[data-storefront-design="modern"] .img-box {
    aspect-ratio: 1 / 1;
    margin-bottom: 14px;
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-card);
    background: var(--sd-cream);
}
html[data-storefront-design="modern"] .carousel-track img {
    padding: 0;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-storefront-design="modern"] .product-card:hover .carousel-track img { transform: scale(1.03); }
html[data-storefront-design="modern"] .img-box { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
html[data-storefront-design="modern"] .product-card:hover .img-box { border-color: color-mix(in srgb, var(--sd-ink) 18%, transparent); box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.35); }
html[data-storefront-design="modern"] .img-box h4 { font-family: var(--sd-font-display) !important; font-weight: 400; }
html[data-storefront-design="modern"] .carousel-btn { width: 34px; height: 34px; background: rgba(255, 255, 255, 0.94); color: #000000; }
html[data-storefront-design="modern"] .dot { width: 6px; height: 6px; background: rgba(0, 0, 0, 0.22); border: 0; box-shadow: none; }
html[data-storefront-design="modern"] .dot.active { background: #000000; transform: none; width: 16px; border-radius: 999px; }

/* The add-to-bag button sits over the bottom-right of the square photo, so the text below is one clean
   column and every card in a row lines up. A percentage margin resolves against the card WIDTH, which for
   a 1:1 photo is also its height. */
html[data-storefront-design="modern"] .product-card { position: relative; }
html[data-storefront-design="modern"] .product-info-row { display: block; }
html[data-storefront-design="modern"] .product-info-row > form,
html[data-storefront-design="modern"] .product-info-row > .bag-btn {
    position: absolute;
    top: 0;
    right: 10px;
    margin-top: calc(100% - 50px);
    z-index: 11;
}
html[data-storefront-design="modern"] .card-text { min-width: 0; }
html[data-storefront-design="modern"] .merchant-row { gap: 8px; margin-bottom: 6px; }
html[data-storefront-design="modern"] .merchant-label {
    min-width: 0;
    overflow: hidden;
    font-family: var(--sd-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sd-muted);
}
html[data-storefront-design="modern"] .rating-display i,
html[data-storefront-design="modern"] .rating-display span { color: var(--sd-ink); }
/* Two lines at most. The title is no longer padded to two lines: a one-line name left an empty
   line above the price. Prices still line up across a row, because the price sits at the bottom
   of the card (margin-top: auto below), so a gap opens only when a neighbour's name wraps. */
html[data-storefront-design="modern"] .card-text h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 6px !important;
    color: var(--sd-ink);
    font-family: var(--sd-font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}
html[data-storefront-design="modern"] .card-text h3:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
html[data-storefront-design="modern"] .card-text .price {
    margin-top: auto;
    padding-top: 4px;
    color: var(--sd-ink);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
html[data-storefront-design="modern"] .card-text ul { padding-left: 16px !important; }
html[data-storefront-design="modern"] .bag-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    /* A white chip over the photo, like the wishlist heart: black would vanish on dark album covers. */
    background: rgba(255, 255, 255, 0.96);
    color: #000000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
html[data-storefront-design="modern"] .bag-btn svg { width: 16px; height: 16px; stroke: currentColor; }
/* The voucher "redeem" button draws its star with an inline colour meant for a white button. */
html[data-storefront-design="modern"] .bag-btn i { color: currentColor !important; }
html[data-storefront-design="modern"] .bag-btn:hover { background: var(--sd-btn-bg); color: var(--sd-btn-ink); transform: none; }
html[data-storefront-design="modern"] .bag-btn:hover svg { stroke: currentColor; }

/* ================================================================ collaborator plans (pricing cards) */
html[data-storefront-design="modern"] .subscription-packages { max-width: 1120px; padding: 0 var(--sd-gutter) var(--sd-section); }
html[data-storefront-design="modern"] .subscription-packages .category-header-row { padding-inline: 0 !important; }
html[data-storefront-design="modern"] .pkg-grid { gap: 24px; margin-top: 8px; }
html[data-storefront-design="modern"] .pkg-card {
    padding: 32px;
    border: 0;
    border-radius: var(--sd-radius-card);
    background: var(--sd-canvas);
    box-shadow: var(--sd-shadow-card);
    text-align: left;
}
html[data-storefront-design="modern"] .pkg-card:hover { transform: translateY(-2px); box-shadow: var(--sd-shadow-card), 0 16px 32px -16px rgba(0, 0, 0, 0.18); }
html[data-storefront-design="modern"] .pkg-card.popular { background: var(--theme-popular-bg, var(--sd-accent)); box-shadow: none; }
html[data-storefront-design="modern"] .pkg-badge {
    top: 24px;
    left: auto;
    right: 24px;
    transform: none;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--sd-ink);
    color: var(--sd-canvas);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
}
html[data-storefront-design="modern"] .pkg-title {
    margin-bottom: 4px;
    font-family: var(--sd-font-display);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sd-ink);
}
html[data-storefront-design="modern"] .pkg-subtitle { margin-bottom: 20px; font-size: 12px; letter-spacing: 0.08em; color: var(--sd-muted); }
html[data-storefront-design="modern"] .pkg-card.popular .pkg-subtitle { color: var(--sd-ink); opacity: 0.7; }
html[data-storefront-design="modern"] .pkg-price {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom-color: color-mix(in srgb, var(--sd-ink) 12%, transparent);
    font-family: var(--sd-font-display);
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: var(--sd-display-weight);
    line-height: 1.14;
    color: var(--sd-ink);
}
html[data-storefront-design="modern"] .pkg-price span { font-family: var(--sd-font-body); font-size: 16px; }
html[data-storefront-design="modern"] .pkg-features li { font-size: 15px; line-height: 1.5; color: var(--sd-ink); }
html[data-storefront-design="modern"] .pkg-features li i.fa-check { color: var(--sd-ink); }
html[data-storefront-design="modern"] .pkg-features li i.fa-times { color: var(--sd-muted); opacity: 1; }
html[data-storefront-design="modern"] .pkg-btn { width: 100%; }

/* ================================================================ editorial band */
html[data-storefront-design="modern"] .editorial-section {
    gap: clamp(28px, 5vw, 80px);
    width: calc(100% - 2 * var(--sd-gutter));
    max-width: calc(var(--sd-max) - 2 * var(--sd-gutter));
    margin: 0 auto var(--sd-section);
    padding: clamp(24px, 4.4vw, 64px);
    border-radius: var(--sd-radius-frame);
    background: var(--sd-accent-soft);
}
html[data-storefront-design="modern"] .editorial-text .mono-accent {
    margin-bottom: 16px !important;
    color: var(--sd-ink) !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    opacity: 0.7;
}
html[data-storefront-design="modern"] .editorial-text h2 {
    margin-bottom: 20px;
    color: var(--sd-ink);
    font-family: var(--sd-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--sd-display-weight);
    line-height: 1.14;
}
html[data-storefront-design="modern"] .editorial-text p { margin-bottom: 28px; color: var(--sd-ink); opacity: 0.78; font-size: 17px; font-weight: 400; line-height: 1.6; }
html[data-storefront-design="modern"] .editorial-text .btn-discover { color: var(--sd-btn-ink); }
/* The frame takes the picture's own shape. A fixed 5:4 frame left a blurred band beside any other shape. */
html[data-storefront-design="modern"] .editorial-image { aspect-ratio: auto; border-radius: var(--sd-radius-card); background: var(--sd-cream); }
html[data-storefront-design="modern"] .editorial-image img { height: auto; }
html[data-storefront-design="modern"] .editorial-image img { filter: none; }

/* ================================================================ feature cards */
html[data-storefront-design="modern"] .features-section {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.8vw, 24px);
    max-width: var(--sd-max);
    padding: 0 var(--sd-gutter) var(--sd-section);
    border-top: 0;
    text-align: left;
}
html[data-storefront-design="modern"] .feature-box {
    padding: clamp(24px, 2.4vw, 32px);
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius-card);
    background: var(--theme-feature-bg, var(--sd-cream));
}
html[data-storefront-design="modern"] .feature-icon {
    width: 48px;
    height: 48px;
    margin: 0 0 20px;
    border-radius: 50%;
    background: var(--theme-icon-bg, var(--sd-accent));
    color: var(--theme-icon, var(--sd-ink));
    font-size: 19px;
    opacity: 1;
}
html[data-storefront-design="modern"] .feature-icon img { width: 60%; height: 60%; }
html[data-storefront-design="modern"] .feature-box h4 {
    margin-bottom: 8px;
    color: var(--sd-ink);
    font-family: var(--sd-font-body);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}
html[data-storefront-design="modern"] .feature-box p { max-width: none; margin: 0; color: var(--sd-muted); font-size: 15px; font-weight: 400; line-height: 1.55; }

/* ================================================================ store updates strip */
html[data-storefront-design="modern"] .store-updates-home { padding: var(--sd-section) var(--sd-gutter) 0; border: 0; background: transparent; }
html[data-storefront-design="modern"] .store-updates-inner { width: 100%; max-width: calc(var(--sd-max) - 2 * var(--sd-gutter)); }
html[data-storefront-design="modern"] .store-updates-kicker { color: var(--sd-muted); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; }
html[data-storefront-design="modern"] .store-updates-heading h2 {
    color: var(--sd-ink);
    font-family: var(--sd-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--sd-display-weight);
}

/* ================================================================ toast, filter drawer */
html[data-storefront-design="modern"] .toast-notification {
    padding: 14px 22px;
    border-radius: 999px;
    background: var(--sd-btn-bg);
    color: var(--sd-btn-ink);
    font-family: var(--sd-font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: var(--sd-shadow-float);
}
html[data-storefront-design="modern"] .luxury-filter-drawer { background: var(--sd-canvas); border-radius: var(--sd-radius-frame) 0 0 var(--sd-radius-frame); box-shadow: var(--sd-shadow-float); }
html[data-storefront-design="modern"] .filter-header { padding: 24px 28px; border-bottom-color: var(--sd-hairline); }
html[data-storefront-design="modern"] .filter-header h3 { font-size: 20px; font-weight: 500; letter-spacing: 0; text-transform: none; }
html[data-storefront-design="modern"] .filter-header button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sd-cream);
    font-size: 16px;
}
html[data-storefront-design="modern"] .filter-content { padding: 28px; }
html[data-storefront-design="modern"] .filter-section-title {
    margin-bottom: 20px !important;
    font-family: var(--sd-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--sd-muted);
}
html[data-storefront-design="modern"] .filter-radio { margin-bottom: 20px; font-size: 16px; color: var(--sd-ink); }
html[data-storefront-design="modern"] .checkmark { border-color: #a1a1aa; }
html[data-storefront-design="modern"] .filter-footer { gap: 12px; padding: 20px 28px; background: var(--sd-canvas); border-top-color: var(--sd-hairline); }
html[data-storefront-design="modern"] .filter-footer button,
html[data-storefront-design="modern"] .filter-footer a { padding: 12px 16px; border-radius: var(--sd-btn-radius); font-size: 15px; letter-spacing: 0; text-transform: none; }

/* ================================================================ product page */
html[data-storefront-design="modern"] .product-container {
    max-width: var(--sd-max);
    margin-top: clamp(20px, 3vw, 40px);
    padding: 0 var(--sd-gutter);
    gap: clamp(32px, 5vw, 80px);
}
html[data-storefront-design="modern"] .main-image-container {
    border-color: var(--sd-hairline);
    border-radius: var(--sd-radius-frame);
    background: var(--sd-cream);
}
html[data-storefront-design="modern"] .nav-arrow { border: 0; background: rgba(255, 255, 255, 0.94); color: #000000; }
html[data-storefront-design="modern"] .thumb { border-radius: 8px; border: 1px solid var(--sd-hairline); background: var(--sd-cream); }
html[data-storefront-design="modern"] .thumb.active { border: 2px solid var(--sd-ink); }
html[data-storefront-design="modern"] .breadcrumb { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; }
html[data-storefront-design="modern"] .product-title {
    margin-bottom: 14px;
    font-family: var(--sd-font-display);
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    font-weight: 400;
    font-style: normal;
    line-height: 1.14;
}
html[data-storefront-design="modern"] .product-price { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-storefront-design="modern"] .product-desc {
    padding: 20px 22px;
    border-color: var(--sd-hairline);
    border-radius: var(--sd-radius-card);
    background: var(--sd-cream);
    color: #3f3f46;
    font-size: 15px;
}
/* The fixed dark grey above is unreadable on the dark description panel. */
html[data-storefront-design="modern"][data-storefront-theme="dark"] .product-desc { color: #d4d4d8; }
html[data-storefront-design="modern"] .variant-label { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
html[data-storefront-design="modern"] .spec-btn { padding: 10px 18px; border-color: var(--sd-hairline); border-radius: var(--sd-btn-radius); background: var(--sd-canvas); font-size: 14px; }
html[data-storefront-design="modern"] .spec-option:hover .spec-btn { border-color: var(--sd-ink); }
html[data-storefront-design="modern"] .spec-option input[type="radio"]:checked + .spec-btn { border-color: var(--sd-ink); background: var(--sd-ink); color: var(--sd-canvas); }
html[data-storefront-design="modern"] .variant-group div:has(> .qty-btn) { border-color: var(--sd-hairline) !important; border-radius: var(--sd-btn-radius) !important; }
html[data-storefront-design="modern"] .qty-btn:hover { background: var(--sd-cream); }
html[data-storefront-design="modern"] .btn-add-cart { width: 100%; min-height: 52px; letter-spacing: 0.04em; }
html[data-storefront-design="modern"] .referral-box { border-color: var(--sd-hairline); border-radius: var(--sd-radius-card); background: var(--sd-cream); }
html[data-storefront-design="modern"] .referral-input-wrapper input { border-color: var(--sd-hairline); border-radius: 8px; }

/* ================================================================ footer (light track) */
html[data-storefront-design="modern"] .luxury-footer {
    padding: clamp(48px, 6vw, 80px) var(--sd-gutter) 32px;
    background-color: var(--theme-footer-bg, var(--sd-cream));
    border-top: 1px solid var(--sd-hairline);
    color: var(--sd-ink);
    font-family: var(--sd-font-body);
}
html[data-storefront-design="modern"] .footer-inner { max-width: calc(var(--sd-max) - 2 * var(--sd-gutter)); }
html[data-storefront-design="modern"] .luxury-footer h4 {
    margin-bottom: 16px;
    font-family: var(--sd-font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sd-ink);
}
html[data-storefront-design="modern"] .cs-block p { font-size: 14px; font-weight: 400; line-height: 1.7; color: var(--sd-muted); }
html[data-storefront-design="modern"] .cs-block a { color: var(--sd-ink); border-bottom-color: currentColor; }
html[data-storefront-design="modern"] .accordion-btn { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--sd-ink); }
html[data-storefront-design="modern"] .accordion-content a { font-size: 14px; font-weight: 400; color: var(--sd-muted); }
html[data-storefront-design="modern"] .accordion-content a:hover { color: var(--sd-ink); }
html[data-storefront-design="modern"] .newsletter-block p { font-size: 14px; font-weight: 400; color: var(--sd-muted); margin-bottom: 16px; }
html[data-storefront-design="modern"] .subscribe-input {
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-btn-radius);
    background: var(--sd-footer-field);
    font-size: 15px;
    color: var(--sd-ink);
}
html[data-storefront-design="modern"] .subscribe-input:focus { border-color: var(--sd-ink); }
html[data-storefront-design="modern"] .subscribe-btn { width: 100%; margin-top: 10px; }
html[data-storefront-design="modern"] .social-icons-modern { gap: 8px; }
html[data-storefront-design="modern"] .social-icons-modern a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--sd-hairline);
    border-radius: 50%;
    background: var(--sd-footer-field);
    font-size: 16px;
    color: var(--sd-ink);
}
html[data-storefront-design="modern"] .social-icons-modern a:hover { opacity: 1; border-color: var(--sd-ink); }
html[data-storefront-design="modern"] .ship-to { font-family: var(--sd-font-body); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--sd-muted); }
html[data-storefront-design="modern"] .footer-brand-logo { font-family: var(--sd-font-display); font-size: 20px; font-weight: 600; letter-spacing: 0.01em; color: var(--sd-ink); }
html[data-storefront-design="modern"] .footer-copyright { font-size: 13px; font-weight: 400; color: var(--sd-muted); }

/* Mobile bottom navigation and its sheets */
html[data-storefront-design="modern"] .global-mobile-nav { padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); background: var(--sd-header-bg); border-top-color: var(--sd-hairline); }
html[data-storefront-design="modern"] .global-nav-item {
    min-width: 64px;
    min-height: 44px;
    justify-content: center;
    gap: 4px;
    color: var(--sd-muted);
    font-family: var(--sd-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
html[data-storefront-design="modern"] .global-nav-item.active { color: var(--sd-ink); }
html[data-storefront-design="modern"] .global-nav-item.active i { transform: none; }
html[data-storefront-design="modern"] .global-nav-badge { top: -2px; right: 10px; border-radius: 999px; border-color: var(--theme-header-bg, var(--sd-canvas)); background: var(--sd-btn-bg); color: var(--sd-btn-ink); }
html[data-storefront-design="modern"] .global-sheet { padding: 28px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: var(--sd-radius-frame) var(--sd-radius-frame) 0 0; background: var(--sd-canvas); }
html[data-storefront-design="modern"] .global-sheet-header h3 { font-family: var(--sd-font-body); font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; }
html[data-storefront-design="modern"] .global-sheet-header button { width: 36px; height: 36px; background: var(--sd-cream); color: var(--sd-ink); }
html[data-storefront-design="modern"] .global-sheet-item { padding: 16px 0; font-size: 16px; font-weight: 400; color: var(--sd-ink) !important; border-bottom-color: var(--sd-hairline); }
html[data-storefront-design="modern"] .global-sheet-item i { color: var(--sd-muted); }

/* ================================================================ responsive */
@media (min-width: 900px) and (max-width: 1199px) {
    /* Narrower desktop: search becomes an icon, so less width is reserved on each side of the menu. */
    html[data-storefront-design="modern"] .desktop-header-wrapper { --sd-nav-side: 200px; }
    html[data-storefront-design="modern"] .header-center { max-width: 190px; }
    html[data-storefront-design="modern"] .desktop-top-bar .brand-logo { font-size: 19px; }
    html[data-storefront-design="modern"] .search-btn-wrapper { width: 40px; padding: 0; justify-content: center; border-color: transparent; }
    html[data-storefront-design="modern"] .search-btn-wrapper span { display: none; }
    html[data-storefront-design="modern"] .search-btn-wrapper:hover { background: var(--sd-cream); border-color: transparent; }
    html[data-storefront-design="modern"] .grid-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html[data-storefront-design="modern"] .hero[data-hero-fit="cover"] .hero-slider-wrapper { aspect-ratio: 16 / 8; }
}

@media (min-width: 900px) {
    html[data-storefront-design="modern"] .footer-inner { gap: 48px; }
    html[data-storefront-design="modern"] .footer-bottom-links { padding-top: 28px; margin-top: 48px; border-top-color: var(--sd-hairline); align-items: center; }
    html[data-storefront-design="modern"] .accordion-btn { padding-bottom: 14px; }
}

@media (max-width: 899px) {
    :root { --sd-section: 48px; }

    html[data-storefront-design="modern"] .hero {
        padding: 12px 16px 0;
        min-height: 0;
        height: auto;
        text-align: left;
    }
    html[data-storefront-design="modern"] .hero-slider-wrapper { border-radius: 16px; }
    /* Wide banners usually carry their own text, so the phone frame stays landscape to keep most of it. */
    html[data-storefront-design="modern"] .hero[data-hero-fit="cover"] .hero-slider-wrapper { aspect-ratio: 16 / 10; max-height: none; }
    html[data-storefront-design="modern"] .hero-content {
        grid-template-columns: 100%;
        grid-template-areas: "title" "copy" "action";
        row-gap: 14px;
        padding: 24px 0 0;
        text-align: left;
    }
    html[data-storefront-design="modern"] .hero-content h1,
    html[data-storefront-design="modern"] .hero-content h2 { font-size: clamp(2rem, 9vw, 2.75rem); color: var(--sd-ink); margin: 0; }
    html[data-storefront-design="modern"] .hero-content p { color: var(--sd-muted); font-size: 16px; margin: 0; }
    /* A lighter pill on phones, so the button does not outweigh the headline above it. */
    html[data-storefront-design="modern"] .btn-discover { min-height: 40px; padding: 9px 18px; gap: 6px; font-size: 14px; }
    html[data-storefront-design="modern"] .hero-content .btn-discover { font-size: 14px; color: var(--sd-btn-ink); }
    html[data-storefront-design="modern"] .hero-controls { margin: 0 8px; }
    html[data-storefront-design="modern"] .hero-control { width: 36px; height: 36px; }
    html[data-storefront-design="modern"] .hero-indicators { margin-bottom: 10px; padding: 6px 10px; }
    html[data-storefront-design="modern"] .hero-media-tools { margin: 8px; gap: 6px; }
    html[data-storefront-design="modern"] .hero-media-tool { width: 36px; height: 36px; font-size: 14px; }

    html[data-storefront-design="modern"] .category-header-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        text-align: left;
        padding: var(--sd-section) 16px 20px !important;
    }
    html[data-storefront-design="modern"] .category-title-area { min-width: 0; flex: 1 1 200px; }
    html[data-storefront-design="modern"] .category-title-area h1,
    html[data-storefront-design="modern"] .category-title-area h2 { justify-content: flex-start; font-size: clamp(1.75rem, 7.4vw, 2.25rem); }
    html[data-storefront-design="modern"] .filter-btn { width: auto; min-height: 40px; padding: 0 16px; font-size: 14px; border: 1px solid var(--sd-ink); }

    html[data-storefront-design="modern"] .grid-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; padding: 0 16px var(--sd-section); }
    html[data-storefront-design="modern"] .img-box { aspect-ratio: 1 / 1; margin-bottom: 10px; border-radius: 10px; }
html[data-storefront-design="modern"] .product-info-row > form,
    html[data-storefront-design="modern"] .product-info-row > .bag-btn { right: 6px; margin-top: calc(100% - 42px); }
    html[data-storefront-design="modern"] .card-text h3 { font-size: 15px; }
    html[data-storefront-design="modern"] .card-text .price { font-size: 14px; }
    html[data-storefront-design="modern"] .bag-btn { width: 36px; height: 36px; }

    html[data-storefront-design="modern"] .subscription-packages { margin: 0 auto; padding: 0 16px var(--sd-section); }
    html[data-storefront-design="modern"] .pkg-grid { grid-template-columns: 1fr; gap: 16px; }
    html[data-storefront-design="modern"] .pkg-card { padding: 28px 24px; }
    html[data-storefront-design="modern"] .pkg-badge { top: 20px; right: 20px; }

    html[data-storefront-design="modern"] .editorial-section {
        grid-template-columns: 1fr;
        gap: 24px;
        width: calc(100% - 32px);
        margin: 0 auto var(--sd-section);
        padding: 24px;
        border-radius: 16px;
        text-align: left;
    }
    html[data-storefront-design="modern"] .editorial-text h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); }

    html[data-storefront-design="modern"] .features-section { grid-template-columns: 1fr; gap: 12px; padding: 0 16px var(--sd-section); }
    html[data-storefront-design="modern"] .feature-box { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 20px; }
    html[data-storefront-design="modern"] .feature-icon { grid-row: span 2; margin: 0; }
    html[data-storefront-design="modern"] .feature-box h4 { font-size: 16px; margin: 2px 0 4px; }
    html[data-storefront-design="modern"] .feature-box p { font-size: 14px; }

    html[data-storefront-design="modern"] .store-updates-home { padding: var(--sd-section) 16px 0; }

    html[data-storefront-design="modern"] .luxury-filter-drawer { border-radius: 0; }
    html[data-storefront-design="modern"] .filter-header { padding: 18px 20px; }
    html[data-storefront-design="modern"] .filter-content { padding: 24px 20px; }
    html[data-storefront-design="modern"] .filter-footer { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }

    html[data-storefront-design="modern"] .product-container { padding: 0; margin-top: 0; gap: 0; }
    html[data-storefront-design="modern"] .main-image-container { border-radius: 0; border-width: 0 0 1px; }
    html[data-storefront-design="modern"] .product-info-col { padding: 24px 16px 40px; }
    html[data-storefront-design="modern"] .product-title { font-size: clamp(1.6rem, 7vw, 2rem); }

    /* footer.php keeps the body's last 75px clear for the bottom bar. The footer's own colour runs on under
       the bar, so no strip of page colour shows between the footer and the bar. */
    html[data-storefront-design="modern"] .luxury-footer {
        padding: 40px 16px calc(28px + 75px + env(safe-area-inset-bottom));
        margin-bottom: calc(-75px - env(safe-area-inset-bottom));
    }
    html[data-storefront-design="modern"] .footer-accordion { border-top-color: var(--sd-hairline); }
    html[data-storefront-design="modern"] .accordion-item { border-bottom-color: var(--sd-hairline); }
    html[data-storefront-design="modern"] .accordion-btn { padding: 18px 0; }
    html[data-storefront-design="modern"] .newsletter-block { border-top: 0; text-align: left; padding-top: 8px; margin-bottom: 40px; }
    html[data-storefront-design="modern"] .newsletter-form { max-width: none; }
    html[data-storefront-design="modern"] .footer-bottom-links { align-items: flex-start; text-align: left; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-storefront-design="modern"] .carousel-track img,
    html[data-storefront-design="modern"] .pkg-card,
    html[data-storefront-design="modern"] .btn-discover::after,
    html[data-storefront-design="modern"] .desktop-menu-bar > a::after,
    html[data-storefront-design="modern"] .desktop-menu-bar details > summary::after { transition: none; }
    html[data-storefront-design="modern"] .desktop-menu-bar > *,
    html[data-storefront-design="modern"] .desktop-menu-bar details[open] > .nav-dropdown-panel { animation: none; }
    html[data-storefront-design="modern"] .product-card:hover .carousel-track img,
    html[data-storefront-design="modern"] :is(.btn-discover, .pkg-btn, .btn-apply, .subscribe-btn, .btn-add-cart):hover,
    html[data-storefront-design="modern"] :is(.btn-discover, .pkg-btn, .btn-apply, .btn-clear, .subscribe-btn, .btn-add-cart, .btn-checkout, .btn-black-solid, .btn-auth-primary, .btn-submit, .filter-btn, .search-btn-wrapper, .header-icon, .menu-toggle-btn, .bag-btn, .wish-heart, .hero-control, .spec-btn, .social-icons-modern a, .storefront-theme-toggle, .search-overlay-form button):active,
    html[data-storefront-design="modern"] .desktop-menu-bar > a:active,
    html[data-storefront-design="modern"] .desktop-menu-bar summary:active { transform: none; }
}