@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(https://extensions.bud-authority.dutchie.partners/static/css/assets/inter-latin-wght-normal.3100e775.woff2) format('woff2-variations');
  }

  @font-face {
    font-family: 'Fraunces Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(https://extensions.bud-authority.dutchie.partners/static/css/assets/fraunces-latin-wght-normal.7f9d191d.woff2) format('woff2-variations');
  }

  @font-face {
    font-family: 'Fraunces Variable';
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    src: url(https://extensions.bud-authority.dutchie.partners/static/css/assets/fraunces-latin-wght-italic.bceec2ef.woff2) format('woff2-variations');
  }

  @font-face {
    font-family: 'Cinzel Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 400 900;
    src: url(https://extensions.bud-authority.dutchie.partners/static/css/assets/cinzel-latin-wght-normal.09941fb1.woff2) format('woff2-variations');
  }

  :root:root {

    /* ------------------------------------------------------------------ *
     * BRAND PRIMITIVES (identical values to the marketing site's ramps)
     * ------------------------------------------------------------------ */

    /* Abyss / deep navy night */
    --cc-pine-500: #28395d;
    --cc-pine-700: #131f38;
    --cc-pine-800: #0c1628;
    --cc-pine-900: #060c18;

    /* Fog-white */
    --cc-cream-50:  #fbfcfe;
    --cc-cream-100: #f4f7fb;
    --cc-cream-200: #eaf0f6;
    --cc-cream-300: #d7e2ec;
    --cc-cream-400: #b6c6d6;
    --cc-cream-500: #93a8bd;

    /* Ink. ink-75 is the AA-safe subtle tone; ink-50 measured under the floor
       for the 11-12px labels that consume it, so it is deliberately absent. */
    --cc-ink-75:  #606b7c;
    --cc-ink-100: #47525f;
    --cc-ink-200: #2a323d;
    --cc-ink-300: #171d27;
    --cc-ink-500: #070b12;

    /* Lighthouse gold */
    --cc-brass-50:  #f8f1dd;
    --cc-brass-100: #eedca8;
    --cc-brass-200: #e0c277;
    --cc-brass-300: #d2a94f;
    --cc-brass-400: #bc9038;
    --cc-brass-500: #99722a;
    --cc-brass-600: #6f521a;

    /* Tide teal + brand navy + sky */
    --cc-sage-100: #dce8e4;
    --cc-sage-300: #8daca3;
    --cc-sage-500: #4f6e66;
    --cc-berry-400: #334f81;
    --cc-sea-400: #73a1c4;
    --cc-sea-500: #4e7b9e;

    /* Cosmic flavour pops */
    --cc-coral-400:     #d0383f;
    --cc-coral-500:     #a82a30;
    /* Derived step. The brand ramp stops at coral-400, which measures 3.8:1 on
       the navy nav bar and so cannot carry the small bold "CLOSED" label.
       This lightened coral measures 6.3:1 on the same ground. On-dark use only;
       it is too light for the fog-white page. */
    --cc-coral-300:     #e8737a;
    --cc-tangerine-400: #e97146;
    --cc-tangerine-500: #c2552e;
    --cc-sunglow-300:   #f4e2a6;
    --cc-orchid-400:    #8f4a8a;
    --cc-orchid-500:    #6e3669;
    --cc-peach-300:     #efceb5;

    /* ------------------------------------------------------------------ *
     * TYPOGRAPHY
     * The header and footer were already written against these three names
     * but nothing ever defined them, so both were falling back to Georgia.
     * ------------------------------------------------------------------ */
    --font-sans: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Fraunces Variable', ui-serif, Georgia, serif;
    --font-cinzel: 'Cinzel Variable', ui-serif, Georgia, serif;
    --font-emblem: var(--font-cinzel);

    --dcm-font-primary: var(--font-sans);
    --dcm-font-secondary: var(--font-display);

    /* ------------------------------------------------------------------ *
     * CORE SURFACES
     * The base set moves as one block. The host derives a number of unset
     * tokens (product chips, progress bars, modal footers) from these via
     * var() chains, so shifting only some of them leaks a stale surface onto
     * a page far away from the one being styled.
     * ------------------------------------------------------------------ */
    --dcm-color-body-bg: var(--cc-cream-200);
    --dcm-color-text-primary: var(--cc-ink-500);

    --dcm-color-primary: var(--cc-brass-600);
    --dcm-color-surface: var(--cc-cream-50);
    --dcm-color-surface-hover: var(--cc-cream-100);
    --dcm-color-surface-muted: var(--cc-cream-100);
    --dcm-color-text-secondary: var(--cc-ink-100);
    --dcm-color-text-inverted: var(--cc-cream-100);
    --dcm-color-text-muted: var(--cc-ink-75);
    --dcm-color-border: rgba(7, 11, 18, 0.12);
    --dcm-color-border-dark: rgba(7, 11, 18, 0.24);
    --dcm-color-focus: var(--cc-brass-400);
    --dcm-color-focus-shadow: rgba(188, 144, 56, 0.4);

    /* Border radius. The marketing site's card language is 8/16/24. */
    --dcm-radius-sm: 4px;
    --dcm-radius-md: 8px;
    --dcm-radius-lg: 16px;
    --dcm-radius-buttons: 9999px;
    --dcm-radius-cards: 16px;

    /* ------------------------------------------------------------------ *
     * HOST NAVIGATION BAR
     * This is Dutchie's own shop bar, which sits directly beneath our navy
     * masthead. It was a solid brass band, which read as a second unrelated
     * header. Navy with a brass hairline lets the two rows resolve into one
     * masthead. Revert by setting --dcm-header-bg back to var(--cc-brass-400)
     * and the two text colours back to var(--cc-ink-500).
     * ------------------------------------------------------------------ */
    --dcm-header-bg: var(--cc-pine-800);
    --dcm-header-text-color: var(--cc-cream-200);
    --dcm-header-border-color: rgba(210, 169, 79, 0.2);
    --dcm-header-shadow: none;
    --dcm-header-divider-color: rgba(234, 240, 246, 0.15);
    /* Heading inside the Shop dropdown ("Categories"). Despite the "header-"
       prefix this does NOT sit on the header bar, it sits on --dcm-popover-bg,
       so it follows the popover rather than the nav. Grouped with the header
       tokens it was given cream, which put #eaf0f6 on the #fbfcfe popover at
       about 1.1:1 and made the heading disappear. Same trap as #307 on the
       Elevate theme, inverted: there a dark value was left on a darkened
       popover, here a light value was left on a light one. */
    --dcm-header-nav-title-text-color: var(--cc-ink-500);

    /* Cart button: the brass pill, matching the masthead's SHOP MENU CTA */
    --dcm-cart-btn-bg-active: var(--cc-brass-300);
    --dcm-cart-btn-bg-empty: var(--cc-brass-300);
    --dcm-cart-btn-text-empty: var(--cc-ink-500);
    --dcm-cart-btn-border-radius: 9999px;
    --dcm-cart-btn-bg-hover: var(--cc-brass-200);
    --dcm-cart-btn-border-color: var(--cc-brass-300);

    /* Search */
    --dcm-search-input-border-color: rgba(234, 240, 246, 0.24);
    --dcm-search-input-border-radius: 9999px;
    --dcm-search-input-focus-border-color: var(--cc-brass-300);
    --dcm-search-input-focus-shadow: 0 0 0 3px rgba(210, 169, 79, 0.35);

    /* Popover / Dropdown */
    --dcm-popover-bg: var(--cc-cream-50);
    --dcm-popover-item-color: var(--cc-ink-300);
    --dcm-popover-item-hover-bg: var(--cc-cream-200);
    --dcm-popover-border-radius: 12px;
    --dcm-popover-shadow: 0 20px 50px rgba(6, 12, 24, 0.26), 0 6px 12px rgba(6, 12, 24, 0.12);

    /* Info Bar */
    --dcm-infobar-bg: var(--cc-cream-50);
    --dcm-infobar-text-color: var(--cc-ink-300);
    --dcm-infobar-border-color: rgba(7, 11, 18, 0.12);
    /* The "MENU" label above Recreational/Medical sits on the navy nav bar, not
       on the fog-white page. Grouped with the light-surface tokens it was given
       ink, which measured 1.15:1 against #0c1628 and was effectively invisible.
       cream-400 measures about 10:1 there and matches the OPEN/CLOSED label
       beside it. */
    --dcm-menu-type-label-color: var(--cc-cream-400);

    /* Menu Drawer */
    --dcm-drawer-bg: var(--cc-cream-100);
    --dcm-drawer-tab-active-color: var(--cc-brass-600);
    --dcm-drawer-tab-inactive-color: var(--cc-ink-75);
    --dcm-drawer-accent-color: var(--cc-brass-600);
    --dcm-drawer-nav-heading-color: var(--cc-ink-75);
    --dcm-drawer-nav-link-color: var(--cc-ink-300);

    /* Footer. Our own footer component paints itself; these cover the host's
       privacy strip so it does not flash a warm cream band under the navy. */
    --dcm-footer-bg: var(--cc-ink-500);
    --dcm-footer-text-color: var(--cc-cream-200);
    --dcm-privacy-footer-bg: var(--cc-ink-500);
    --dcm-privacy-footer-border-color: rgba(234, 240, 246, 0.12);
    --dcm-privacy-footer-text-color: var(--cc-cream-400);
    --dcm-privacy-footer-text-hover-color: var(--cc-cream-100);

    /* Status colors */
    --dcm-color-status-open: var(--cc-sage-500);
    --dcm-color-status-closed: var(--cc-coral-500);
    --dcm-color-status-preorder: var(--cc-sea-500);
    --dcm-color-status-coming-soon: var(--cc-brass-600);

    /* Skeleton / Loading placeholders. Cool-family, so the loading state does
       not flash warm beige over a fog-white page. */
    --dcm-skeleton-bg: var(--cc-cream-300);
    --dcm-skeleton-border-color: rgba(7, 11, 18, 0.1);
    --dcm-skeleton-shimmer-from: rgba(7, 11, 18, 0.04);
    --dcm-skeleton-shimmer-to: rgba(7, 11, 18, 0.09);
    --dcm-skeleton-shimmer-dark-from: rgba(7, 11, 18, 0.04);
    --dcm-skeleton-shimmer-dark-to: rgba(7, 11, 18, 0.09);

    /* Login nudge */
    --dcm-login-nudge-bg: var(--cc-cream-50);
    --dcm-login-nudge-text-color: var(--cc-ink-300);
    --dcm-login-nudge-link-color: var(--cc-brass-600);
    --dcm-logged-out-cta-bg: var(--cc-pine-800);
    --dcm-logged-out-cta-link-color: var(--cc-brass-300);
    --dcm-logged-out-cta-border-color: rgba(234, 240, 246, 0.16);
    --dcm-logged-out-cta-subtext-color: var(--cc-cream-400);
    --dcm-logged-out-cta-text-color: var(--cc-cream-100);

    /* Categories */
    --dcm-categories-card-bg: var(--cc-cream-50);
    --dcm-categories-card-border-color: rgba(7, 11, 18, 0.12);
    --dcm-categories-card-text-color: var(--cc-ink-500);
    --dcm-categories-view-all-bg: var(--cc-cream-100);

    /* Brands */
    --dcm-brands-card-bg: var(--cc-cream-50);
    --dcm-brands-card-border-color: rgba(7, 11, 18, 0.12);
    --dcm-brands-card-border-radius: 16px;
    --dcm-brands-card-name-color: var(--cc-ink-500);

    /* Product */
    --dcm-product-page-bg: var(--cc-cream-200);
    --dcm-product-name-color: var(--cc-ink-500);
    --dcm-product-brand-color: var(--cc-ink-75);
    --dcm-product-price-color: var(--cc-ink-500);
    --dcm-product-description-color: var(--cc-ink-100);
    --dcm-product-option-bg: var(--cc-cream-50);
    --dcm-product-option-border-color: rgba(7, 11, 18, 0.14);

    /* Cart drawer */
    --dcm-cart-bg: var(--cc-cream-100);
    --dcm-cart-content-bg: var(--cc-cream-50);
    --dcm-cart-text-color: var(--cc-ink-300);
    --dcm-cart-border-color: rgba(7, 11, 18, 0.12);
    --dcm-cart-item-bg: var(--cc-cream-50);

    /* Carousel navigation */
    --dcm-carousel-btn-bg: var(--cc-brass-600);
    --dcm-carousel-btn-hover-bg: var(--cc-ink-500);
    --dcm-carousel-btn-arrow-color: var(--cc-cream-50);

    /* Filter sidebar */
    --dcm-filter-heading-color: var(--cc-ink-500);
    --dcm-filter-text-color: var(--cc-ink-200);
    --dcm-filter-border-color: rgba(7, 11, 18, 0.12);

    /* Modal */
    --dcm-modal-bg: var(--cc-cream-50);
    --dcm-modal-text-color: var(--cc-ink-300);
    --dcm-modal-border-radius: 16px;
    --dcm-modal-shadow: 0 20px 50px rgba(6, 12, 24, 0.26), 0 6px 12px rgba(6, 12, 24, 0.12);

    /* Checkout */
    --dcm-checkout-heading-color: var(--cc-ink-500);
    --dcm-checkout-text-color: var(--cc-ink-200);
    --dcm-checkout-input-bg: var(--cc-cream-50);
    --dcm-checkout-summary-bg: var(--cc-cream-50);

    /* Breadcrumbs */
    --dcm-breadcrumb-link-color: var(--cc-ink-75);
    --dcm-breadcrumb-active-color: var(--cc-ink-500);

    /* Section titles */
    --dcm-section-title-color: var(--cc-ink-500);
    --dcm-section-subtitle-color: var(--cc-ink-100);

    /* Content header */
    --dcm-content-header-text-color: var(--cc-ink-500);
    --dcm-content-header-border-color: rgba(7, 11, 18, 0.12);

    /* Primary buttons and links.
       The host hardcodes its primary-button label ("Add to cart") to white and
       exposes no token for it, so whatever colour lands here has to carry white
       text on its own. brass-400 #bc9038 is only 2.9:1 against white and would
       fail; brass-600 #6f521a measures 7.2:1, and 7.2:1 as a link colour on the
       fog-white page too. */
    --dct--customized-colors-buttonsLinks: var(--cc-brass-600);

    /* Generic aliases consumed directly by header.tsx and footer.tsx */
    --background: var(--cc-ink-500);
    --foreground: var(--cc-cream-200);
    --accent: var(--cc-brass-300);
    --surface: var(--cc-cream-50);
    --surface-hover: var(--cc-cream-100);
    --rule: rgba(234, 240, 246, 0.16);
    --button-radius: 9999px;
    --button-height-sm: 2rem;
    --radius-sm: 4px;
    --header-h: 4.5rem;
    --dcm-color-card-price: var(--cc-ink-500);
    --dcm-color-badge-text: var(--cc-cream-100);
    --dcm-color-badge-background: var(--cc-brass-600);
    --dcm-color-price-card-background: var(--cc-cream-100);

    /* ------------------------------------------------------------------ *
     * HOST TOKENS THE STYLING DOC DOES NOT LIST
     *
     * The doc covers ~100 properties; the host actually defines 600+ on the
     * page, and everything below was still sitting on a Dutchie stock value
     * after the brand pass. Found by enumerating every custom property on the
     * live storefront and diffing against the brand ramp, which is the only
     * way these surface: they are stock greys, a stock teal and a stock blue,
     * so they look "fine" in isolation and only read as wrong next to the
     * brand. Re-run that diff after any SDK upgrade, since new stock tokens
     * arrive unset and therefore unbranded.
     * ------------------------------------------------------------------ */

    /* The potency meters on category pages rendered stock teal #43ab92 */
    --dcm-product-progress-fill: var(--cc-brass-400);

    --dcm-checkout-link-color: var(--cc-brass-600);
    --dcm-account-popover-logout-color: var(--cc-brass-600);

    /* ------------------------------------------------------------------ *
     * TOKENS THAT ARE UNSET RATHER THAN STOCK
     *
     * Enumerating the custom properties present on the page has a blind spot:
     * a token the theme never sets and the host never declares does not show
     * up at all, yet the component reading it still falls back to a hardcoded
     * colour. Those are invisible to that method and were missed on the first
     * two passes.
     *
     * The complete list comes from the host's own bundles instead: scrape
     * /--dcm-[a-z0-9-]+/ out of every first-party js/css asset the storefront
     * loads. That yields 515 names against the ~205 this theme sets. To find
     * which of the remainder actually paint, set them all to a sentinel colour
     * on the live page and look for what changes.
     * ------------------------------------------------------------------ */

    /* The "Shop All Products" anchor on every category page. This is the one
       #0b99e6 that survived the previous pass: it is NOT driven by
       --dcm-checkout-link-color, which that commit message claimed. It has its
       own token, and that token was simply never declared. */
    --dcm-shop-all-products-link-color: var(--cc-brass-600);

    /* Two parallel status families exist and only the second is read for the
       header's open/closed label. --dcm-color-status-* (set above) is a
       different, similarly named set, which is why the "CLOSED" text stayed
       stock red through both previous passes.

       These sit on the navy nav bar, not on the fog-white page, so each one is
       measured against #0c1628: sage-300 7.5:1, coral-300 6.3:1, sea-400 6.7:1,
       brass-300 8.3:1, cream-400 10:1. The darker ramp steps used elsewhere in
       this file would all land under 4:1 here. */
    --dcm-status-open-color: var(--cc-sage-300);
    --dcm-status-closed-color: var(--cc-coral-300);
    --dcm-status-preorder-color: var(--cc-sea-400);
    --dcm-status-coming-soon-color: var(--cc-brass-300);
    --dcm-status-label-color: var(--cc-cream-400);

    /* Google / Apple buttons in the login nudge. Left explicit so the vendor
       logos keep a light ground no matter what the host default becomes. */
    --dcm-login-nudge-social-btn-bg: var(--cc-cream-50);

    /* Was #F8F7F2, a warm cream left over from the Elevate palette */
    --dcm-color-navbar-bg: var(--cc-cream-200);
    --dcm-storefront-header-bg: var(--cc-cream-50);
    --dcm-storefront-header-border-color: rgba(7, 11, 18, 0.12);
    --dcm-nav-link-color: var(--cc-cream-200);

    --dcm-specials-multi-tier-badge-bg: var(--cc-brass-600);
    --dcm-collections-timer-bg: var(--cc-ink-500);
    --dcm-collections-timer-text-color: var(--cc-cream-100);
    --dcm-collections-description-color: var(--cc-ink-100);
    --dcm-locations-pin-highlight-color: var(--cc-sea-500);

    /* The host's own strain pills, distinct from the ones our product cards
       draw. Tinted grounds with a dark hue on top, so each one clears 4.5:1
       (tangerine 5.2, orchid 7.6, navy 6.6, sage 4.6) rather than relying on
       colour alone. */
    --dcm-strain-type-pill-bg-sativa: #f7ece7;
    --dcm-strain-type-pill-text-sativa: var(--cc-tangerine-500);
    --dcm-strain-type-pill-bg-sativa-hybrid: #f7ece7;
    --dcm-strain-type-pill-text-sativa-hybrid: var(--cc-tangerine-500);
    --dcm-strain-type-pill-bg-indica: #f3ecf2;
    --dcm-strain-type-pill-text-indica: var(--cc-orchid-500);
    --dcm-strain-type-pill-bg-indica-hybrid: #f3ecf2;
    --dcm-strain-type-pill-text-indica-hybrid: var(--cc-orchid-500);
    --dcm-strain-type-pill-bg-hybrid: var(--cc-cream-200);
    --dcm-strain-type-pill-text-hybrid: var(--cc-berry-400);
    --dcm-strain-type-pill-bg-cbd: #e9efec;
    --dcm-strain-type-pill-text-cbd: var(--cc-sage-500);
    --dcm-strain-type-pill-bg-high-cbd: #e9efec;
    --dcm-strain-type-pill-text-high-cbd: var(--cc-sage-500);
    --dcm-strain-type-pill-bg-cbg: #e9efec;
    --dcm-strain-type-pill-text-cbg: var(--cc-sage-500);
    --dcm-strain-type-pill-bg-thc: var(--cc-cream-200);
    --dcm-strain-type-pill-text-thc: var(--cc-ink-200);
    --dcm-strain-type-pill-bg-seed: var(--cc-cream-200);
    --dcm-strain-type-pill-text-seed: var(--cc-ink-200);

    /* Account, checkout, locations and referral panels were a stock grey-blue
       family that reads cooler and flatter than the brand's ink ramp. */
    --dcm-account-bg: var(--cc-cream-100);
    --dcm-account-divider-color: rgba(7, 11, 18, 0.12);
    --dcm-account-icon-accent: var(--cc-cream-400);
    --dcm-account-icon-fill: var(--cc-cream-200);
    --dcm-account-icon-stroke: var(--cc-ink-100);
    --dcm-account-label-color: var(--cc-ink-75);
    --dcm-account-link-icon-color: var(--cc-ink-75);
    --dcm-account-nav-color: var(--cc-ink-200);
    --dcm-account-popover-divider-color: rgba(7, 11, 18, 0.14);
    --dcm-account-popover-item-color: var(--cc-ink-200);
    --dcm-account-popover-item-hover-bg: var(--cc-cream-200);
    --dcm-account-surface-shadow: rgba(7, 11, 18, 0.1);
    --dcm-user-btn-name-border-color: rgba(7, 11, 18, 0.16);

    --dcm-age-gate-body-color: var(--cc-ink-100);
    --dcm-brands-card-placeholder-color: var(--cc-ink-100);
    --dcm-brands-title-color: var(--cc-ink-500);
    --dcm-breadcrumb-separator-color: var(--cc-cream-500);
    --dcm-categories-view-all-color: var(--cc-ink-200);

    --dcm-checkout-disclaimer-color: var(--cc-ink-75);
    --dcm-checkout-payment-icon-color: var(--cc-cream-500);
    --dcm-checkout-payment-tab-border-color: rgba(7, 11, 18, 0.14);
    --dcm-checkout-save-info-bg: var(--cc-cream-100);
    --dcm-checkout-section-border-color: rgba(7, 11, 18, 0.12);
    --dcm-checkout-section-heading-color: var(--cc-ink-200);
    --dcm-checkout-summary-border-color: rgba(7, 11, 18, 0.14);
    --dcm-checkout-summary-text-color: var(--cc-ink-100);
    --dcm-checkout-summary-total-color: var(--cc-ink-500);
    --dcm-checkout-text-muted-color: var(--cc-ink-75);

    --dcm-drawer-close-btn-color: var(--cc-ink-75);
    --dcm-drawer-status-bg: var(--cc-cream-200);
    --dcm-login-nudge-apple-icon-color: var(--cc-ink-200);
    --dcm-login-nudge-close-color: var(--cc-ink-100);
    --dcm-privacy-footer-divider-color: rgba(234, 240, 246, 0.16);

    --dcm-locations-browser-text-color: var(--cc-ink-100);
    --dcm-locations-card-bg: var(--cc-cream-50);
    --dcm-locations-card-border-color: rgba(7, 11, 18, 0.12);
    --dcm-locations-card-hover-bg: var(--cc-cream-200);
    --dcm-locations-card-hover-border-color: rgba(7, 11, 18, 0.2);
    --dcm-locations-card-text-color: var(--cc-ink-100);
    --dcm-locations-close-hover-bg: var(--cc-ink-100);
    --dcm-locations-heading-color: var(--cc-ink-500);
    --dcm-locations-marker-address-color: var(--cc-ink-100);
    --dcm-locations-scrollbar-color: var(--cc-ink-75);
    --dcm-locations-subtext-color: var(--cc-ink-100);
    --dcm-locations-text-color: var(--cc-ink-100);

    --dcm-referral-border-color: rgba(7, 11, 18, 0.12);
    --dcm-referral-disclaimer-color: var(--cc-ink-75);
    --dcm-referral-heading-color: var(--cc-ink-500);
    --dcm-referral-input-bg: var(--cc-cream-50);
    --dcm-referral-input-border-color: rgba(7, 11, 18, 0.14);
    --dcm-referral-input-text-color: var(--cc-ink-100);
    --dcm-referral-qr-text-color: var(--cc-ink-100);
    --dcm-referral-subtext-color: var(--cc-ink-100);
    --dcm-referral-tab-inactive-bg: var(--cc-cream-200);
  }

  html,
  body {
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  body {
    background: var(--dcm-color-body-bg) !important;
    color: var(--dcm-color-text-primary) !important;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* The host renders its own section titles ("Categories", "Popular Flower",
     "All Flower") and exposes a colour token for them but no font token. Element
     selectors are a supported styling surface (unlike generated class names), and
     this is the same base rule the marketing site applies, so the two properties
     stay in step. Colour deliberately stays inherit: a concrete colour here
     beats inheritance and repaints every heading that sits inside a dark section
     which sets its text colour on a wrapper. */
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: inherit;
  }