@font-face {
    font-family: 'Modesto Poster';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(https://extensions.bud-authority.dutchie.partners/static/css/assets/modesto-poster-regular.820b98d2.woff2) format('woff2');
  }

  @font-face {
    font-family: 'Aileron';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(https://extensions.bud-authority.dutchie.partners/static/css/assets/aileron-regular.ed8d8b36.woff2) format('woff2');
  }

  @font-face {
    font-family: 'Aileron';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url(https://extensions.bud-authority.dutchie.partners/static/css/assets/aileron-bold.7cf9ff46.woff2) format('woff2');
  }

  :root:root {

    /* ------------------------------------------------------------------ *
     * BRAND PRIMITIVES
     * Identical values to the marketing site's own --g-* token layer.
     * ------------------------------------------------------------------ */

    /* Paper */
    --gd-cream: #fefdeb;
    --gd-cream-warm: #f7f5e6;
    --gd-bone: #efeedb;
    --gd-sand: #ede7d0;

    /* Ink. Two near-blacks: --gd-ink is the line work, --gd-black the pill. */
    --gd-ink: #15150f;
    --gd-black: #0c0d0a;
    --gd-black-deep: #060704;
    --gd-stone: #6b6b63;
    --gd-grey: #3a3a3a;

    /* Action. The grow-light green.
       Measured: BLACK on lime is 10.09:1, white on lime is 1.93:1. Lime is a
       fill that carries dark type, never a text colour and never a ground for
       white. Every use of it below obeys that. */
    --gd-lime: #99ca3c;
    --gd-lime-bright: #aad84f;
    --gd-lime-deep: #7ca82e;

    /* Growth. Brand attribution and living things -- never action.
       jungle on white is 6.47:1, on cream 6.30:1. */
    --gd-jungle: #1b6b49;
    --gd-jungle-deep: #0f3d2a;
    --gd-canopy: #23855c;
    --gd-teal: #51b798;
    --gd-mint: #d8e8e0;
    --gd-mint-deep: #bfd8cb;

    /* Rose. DEALS ONLY, and it carries black: white on rose is 3.87:1 and
       fails, black on rose is 5.04:1 and passes. */
    --gd-pink: #e74563;
    --gd-pink-deep: #b3203d;

    /* Honey maple, from the store interiors. A neutral, not an accent. */
    --gd-maple: #c99b5b;
    --gd-white: #ffffff;

    /* The one stroke weight, and its small-size sibling. The comic-panel
       language depends on the line being ONE weight everywhere; a second
       weight is what makes hand-drawn work read as accidental. */
    --gd-ink-w: 3px;
    --gd-ink-w-sm: 2px;

    /* The page gutter, matching the marketing site's --page-gutter. */
    --gd-gutter: clamp(0.75rem, 2vw, 1.25rem);

    /* Corner language */
    --gd-radius-frame: 2.25rem;
    --gd-radius-card: 1.4rem;
    --gd-radius-caption: 0.6rem;
    --gd-radius-pill: 999px;

    /* Motion, and the durations these easings are paired with. */
    --gd-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --gd-ease-quint: cubic-bezier(0.22, 1, 0.36, 1);

    --gd-shadow-card: 0 14px 30px -16px rgba(6, 7, 4, 0.35);
    --gd-shadow-float: 0 18px 40px -18px rgba(6, 7, 4, 0.55), 0 2px 6px rgba(6, 7, 4, 0.18);

    /* Icon channels. Every hand-inked icon paints from these three, which is
       what lets one set sit on cream, on white and on black. Defaults are the
       light-ground values; dark sections override --icon-paper and --icon-ink. */
    --icon-ink: var(--gd-ink);
    --icon-paper: var(--gd-white);
    --icon-lime: var(--gd-lime);

    /* ------------------------------------------------------------------ *
     * TYPOGRAPHY
     *
     * Modesto Poster is DISPLAY ONLY. It ships one weight, has no usable
     * lowercase at text sizes and no tabular figures, so headings and section
     * titles take it and absolutely everything else -- body copy, labels,
     * prices, potency, every number on the menu -- is Aileron. Setting a price
     * in the display face is the single fastest way to make a Dutchie card read
     * as oversized, which is the defect that got a sibling theme's cards rolled
     * back within an hour of shipping.
     * ------------------------------------------------------------------ */
    --font-display: 'Modesto Poster', 'Aileron', ui-sans-serif, system-ui, sans-serif;
    --font-sans: 'Aileron', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    --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.
     *
     * The page ground is CREAM and the panels on it are WHITE. That is the
     * brand's own arrangement and it is also what makes the ink-bordered
     * product card work: the card reads as a panel laid on paper. It is worth
     * noting that Dutchie's default listing ground is white, so if this token
     * is ever reverted the cards do not break -- they keep their 3px ink
     * outline and simply read as outlined rather than as panels.
     * ------------------------------------------------------------------ */
    --dcm-color-body-bg: var(--gd-cream);
    --dcm-color-text-primary: var(--gd-ink);

    /* NOT lime, and this is the trap worth reading twice.
       The host hardcodes its primary-button label to white and exposes no
       token for it, so whatever colour lands here has to carry WHITE text on
       its own. Lime measures 1.93:1 against white and would be unreadable;
       ink measures 18.32:1. So the host's own primary buttons are the brand's
       BLACK pill -- which the brand already uses for its nav -- and lime is
       spent where this theme controls the label and can set it black. */
    --dcm-color-primary: var(--gd-ink);

    --dcm-color-surface: var(--gd-white);
    --dcm-color-surface-hover: var(--gd-cream-warm);
    --dcm-color-surface-muted: var(--gd-bone);
    --dcm-color-text-secondary: var(--gd-grey);
    --dcm-color-text-inverted: var(--gd-cream);
    --dcm-color-text-muted: var(--gd-stone);
    --dcm-color-border: rgba(12, 13, 10, 0.16);
    --dcm-color-border-dark: var(--gd-black);
    --dcm-color-focus: var(--gd-lime-deep);
    --dcm-color-focus-shadow: rgba(153, 202, 60, 0.45);

    /* Corner language. The brand's cards are 1.4rem and its controls are pills. */
    --dcm-radius-sm: 6px;
    --dcm-radius-md: 10px;
    --dcm-radius-lg: var(--gd-radius-card);
    --dcm-radius-buttons: var(--gd-radius-pill);
    --dcm-radius-cards: var(--gd-radius-card);

    /* ------------------------------------------------------------------ *
     * HOST NAVIGATION BAR
     * Dutchie's own shop bar, which sits directly beneath our masthead. Black,
     * so the two rows resolve into one floating pill rather than reading as a
     * second unrelated header. Lime is the hairline, cream the type.
     * ------------------------------------------------------------------ */
    --dcm-header-bg: var(--gd-black);
    --dcm-header-text-color: var(--gd-cream);
    --dcm-header-border-color: rgba(153, 202, 60, 0.28);
    --dcm-header-shadow: none;
    --dcm-header-divider-color: rgba(254, 253, 235, 0.16);
    /* Despite the "header-" prefix this heading ("Categories") sits inside the
       Shop dropdown, on --dcm-popover-bg, NOT on the header bar. Grouped with
       the header tokens it would be given cream and land at about 1.1:1 on the
       white popover. It follows the popover instead. */
    --dcm-header-nav-title-text-color: var(--gd-ink);

    /* Cart button: the lime pill with a black label, 10.09:1. */
    --dcm-cart-btn-bg-active: var(--gd-lime);
    --dcm-cart-btn-bg-empty: var(--gd-lime);
    --dcm-cart-btn-text-empty: var(--gd-black);
    --dcm-cart-btn-border-radius: var(--gd-radius-pill);
    --dcm-cart-btn-bg-hover: var(--gd-lime-bright);
    --dcm-cart-btn-border-color: var(--gd-lime);

    /* Search */
    --dcm-search-input-border-color: rgba(254, 253, 235, 0.28);
    --dcm-search-input-border-radius: var(--gd-radius-pill);
    --dcm-search-input-focus-border-color: var(--gd-lime);
    --dcm-search-input-focus-shadow: 0 0 0 3px rgba(153, 202, 60, 0.4);

    /* Popover / dropdown: a white panel with the ink outline. */
    --dcm-popover-bg: var(--gd-white);
    --dcm-popover-item-color: var(--gd-ink);
    --dcm-popover-item-hover-bg: var(--gd-cream);
    --dcm-popover-border-radius: var(--gd-radius-card);
    --dcm-popover-shadow: 0 18px 40px -18px rgba(6, 7, 4, 0.55), 0 2px 6px rgba(6, 7, 4, 0.18);

    /* Info bar */
    --dcm-infobar-bg: var(--gd-cream);
    --dcm-infobar-text-color: var(--gd-ink);
    --dcm-infobar-border-color: rgba(12, 13, 10, 0.16);
    /* The "MENU" label above Recreational/Medical sits on the BLACK nav bar,
       not on the cream page. Ink here would measure about 1.1:1. */
    --dcm-menu-type-label-color: rgba(254, 253, 235, 0.72);

    /* Menu drawer */
    --dcm-drawer-bg: var(--gd-cream);
    --dcm-drawer-tab-active-color: var(--gd-ink);
    --dcm-drawer-tab-inactive-color: var(--gd-stone);
    --dcm-drawer-accent-color: var(--gd-lime-deep);
    --dcm-drawer-nav-heading-color: var(--gd-stone);
    --dcm-drawer-nav-link-color: var(--gd-ink);

    /* Footer. Our own footer paints itself; these cover the host's privacy
       strip so it does not flash a cream band under our black one. */
    --dcm-footer-bg: var(--gd-black);
    --dcm-footer-text-color: var(--gd-cream);
    --dcm-privacy-footer-bg: var(--gd-black);
    --dcm-privacy-footer-border-color: rgba(254, 253, 235, 0.14);
    --dcm-privacy-footer-text-color: rgba(254, 253, 235, 0.72);
    --dcm-privacy-footer-text-hover-color: var(--gd-lime);

    /* Status colours, on the cream page. */
    --dcm-color-status-open: var(--gd-jungle);
    --dcm-color-status-closed: var(--gd-pink-deep);
    --dcm-color-status-preorder: var(--gd-grey);
    --dcm-color-status-coming-soon: var(--gd-stone);

    /* Skeletons. Warm family, so loading does not flash a cool grey over cream. */
    --dcm-skeleton-bg: var(--gd-bone);
    --dcm-skeleton-border-color: rgba(12, 13, 10, 0.1);
    --dcm-skeleton-shimmer-from: rgba(12, 13, 10, 0.04);
    --dcm-skeleton-shimmer-to: rgba(12, 13, 10, 0.09);
    --dcm-skeleton-shimmer-dark-from: rgba(12, 13, 10, 0.04);
    --dcm-skeleton-shimmer-dark-to: rgba(12, 13, 10, 0.09);

    /* Login nudge */
    --dcm-login-nudge-bg: var(--gd-white);
    --dcm-login-nudge-text-color: var(--gd-ink);
    --dcm-login-nudge-link-color: var(--gd-jungle);
    --dcm-logged-out-cta-bg: var(--gd-black);
    --dcm-logged-out-cta-link-color: var(--gd-lime);
    --dcm-logged-out-cta-border-color: rgba(254, 253, 235, 0.18);
    --dcm-logged-out-cta-subtext-color: rgba(254, 253, 235, 0.72);
    --dcm-logged-out-cta-text-color: var(--gd-cream);

    /* Categories */
    --dcm-categories-card-bg: var(--gd-white);
    --dcm-categories-card-border-color: var(--gd-black);
    --dcm-categories-card-text-color: var(--gd-ink);
    --dcm-categories-view-all-bg: var(--gd-lime);

    /* Brands */
    --dcm-brands-card-bg: var(--gd-white);
    --dcm-brands-card-border-color: var(--gd-black);
    --dcm-brands-card-border-radius: var(--gd-radius-card);
    --dcm-brands-card-name-color: var(--gd-ink);

    /* Product */
    --dcm-product-page-bg: var(--gd-cream);
    --dcm-product-name-color: var(--gd-ink);
    --dcm-product-brand-color: var(--gd-jungle);
    --dcm-product-price-color: var(--gd-ink);
    --dcm-product-description-color: var(--gd-grey);
    --dcm-product-option-bg: var(--gd-white);
    --dcm-product-option-border-color: rgba(12, 13, 10, 0.2);

    /* Cart drawer */
    --dcm-cart-bg: var(--gd-cream);
    --dcm-cart-content-bg: var(--gd-white);
    --dcm-cart-text-color: var(--gd-ink);
    --dcm-cart-border-color: rgba(12, 13, 10, 0.16);
    --dcm-cart-item-bg: var(--gd-white);

    /* Carousel navigation: black pills with cream arrows, like the nav. */
    --dcm-carousel-btn-bg: var(--gd-black);
    --dcm-carousel-btn-hover-bg: var(--gd-jungle);
    --dcm-carousel-btn-arrow-color: var(--gd-cream);

    /* Filter sidebar */
    --dcm-filter-heading-color: var(--gd-ink);
    --dcm-filter-text-color: var(--gd-grey);
    --dcm-filter-border-color: rgba(12, 13, 10, 0.16);

    /* Modal */
    --dcm-modal-bg: var(--gd-white);
    --dcm-modal-text-color: var(--gd-ink);
    --dcm-modal-border-radius: var(--gd-radius-card);
    --dcm-modal-shadow: 0 18px 40px -18px rgba(6, 7, 4, 0.55), 0 2px 6px rgba(6, 7, 4, 0.18);

    /* Checkout */
    --dcm-checkout-heading-color: var(--gd-ink);
    --dcm-checkout-text-color: var(--gd-grey);
    --dcm-checkout-input-bg: var(--gd-white);
    --dcm-checkout-summary-bg: var(--gd-white);

    /* Breadcrumbs */
    --dcm-breadcrumb-link-color: var(--gd-stone);
    --dcm-breadcrumb-active-color: var(--gd-ink);

    /* Section titles */
    --dcm-section-title-color: var(--gd-ink);
    --dcm-section-subtitle-color: var(--gd-grey);

    /* Content header */
    --dcm-content-header-text-color: var(--gd-ink);
    --dcm-content-header-border-color: rgba(12, 13, 10, 0.16);

    /* Primary buttons and links. Same white-label constraint as
       --dcm-color-primary above: this fill must carry white on its own, so it
       is ink (18.32:1) and not lime (1.93:1). */
    --dct--customized-colors-buttonsLinks: var(--gd-ink);

    /* Generic aliases consumed directly by our own header and footer. */
    --background: var(--gd-black);
    --foreground: var(--gd-cream);
    --accent: var(--gd-lime);
    --surface: var(--gd-white);
    --surface-hover: var(--gd-cream-warm);
    --rule: rgba(254, 253, 235, 0.18);
    --button-radius: var(--gd-radius-pill);
    --header-h: 4.5rem;
    --dcm-color-card-price: var(--gd-ink);
    --dcm-color-badge-text: var(--gd-black);
    --dcm-color-badge-background: var(--gd-lime);
    --dcm-color-price-card-background: var(--gd-cream);

    /* ------------------------------------------------------------------ *
     * HOST TOKENS THE STYLING DOC DOES NOT LIST
     *
     * The doc covers about 100 properties; the host actually defines 600+ on
     * the page. Everything below was found by enumerating every custom
     * property on a live storefront and diffing against the brand ramp, then
     * by scraping /--dcm-[a-z0-9-]+/ out of the host's own first-party bundles
     * to catch the ones the theme never sets AND the host never declares --
     * those do not appear on the page at all, yet the component reading them
     * still falls back to a hardcoded stock colour.
     *
     * Re-run both passes after any SDK upgrade: new stock tokens arrive unset
     * and therefore unbranded.
     * ------------------------------------------------------------------ */

    /* Potency meters on category pages render stock teal if unset. */
    --dcm-product-progress-fill: var(--gd-lime-deep);

    --dcm-checkout-link-color: var(--gd-jungle);
    --dcm-account-popover-logout-color: var(--gd-jungle);
    --dcm-shop-all-products-link-color: var(--gd-jungle);

    /* Two parallel status families exist and only this second one is read for
       the header's open/closed label. These sit on the BLACK nav bar, not on
       the cream page, so each is measured against #0c0d0a rather than against
       paper: lime 10.1:1, a light rose 6.5:1, cream 19:1. The darker ramp
       steps used elsewhere in this file would all land under 3:1 here. */
    --dcm-status-open-color: var(--gd-lime);
    --dcm-status-closed-color: #f08a9d;
    --dcm-status-preorder-color: var(--gd-mint);
    --dcm-status-coming-soon-color: var(--gd-maple);
    --dcm-status-label-color: rgba(254, 253, 235, 0.72);

    /* Google / Apple buttons in the login nudge: kept explicitly light so the
       vendor logos always have the ground they are drawn for. */
    --dcm-login-nudge-social-btn-bg: var(--gd-white);

    --dcm-color-navbar-bg: var(--gd-cream);
    --dcm-storefront-header-bg: var(--gd-cream);
    --dcm-storefront-header-border-color: rgba(12, 13, 10, 0.16);
    --dcm-nav-link-color: var(--gd-cream);

    --dcm-specials-multi-tier-badge-bg: var(--gd-pink);
    --dcm-collections-timer-bg: var(--gd-black);
    --dcm-collections-timer-text-color: var(--gd-lime);
    --dcm-collections-description-color: var(--gd-grey);
    --dcm-locations-pin-highlight-color: var(--gd-lime-deep);

    /* The host's own strain pills, distinct from the ones our cards draw.
       Tinted grounds carrying dark type, each clearing 4.5:1 -- and the label
       always names the strain, so colour is never the only signal. */
    --dcm-strain-type-pill-bg-sativa: var(--gd-sand);
    --dcm-strain-type-pill-text-sativa: var(--gd-ink);
    --dcm-strain-type-pill-bg-sativa-hybrid: var(--gd-sand);
    --dcm-strain-type-pill-text-sativa-hybrid: var(--gd-ink);
    --dcm-strain-type-pill-bg-indica: var(--gd-mint);
    --dcm-strain-type-pill-text-indica: var(--gd-jungle-deep);
    --dcm-strain-type-pill-bg-indica-hybrid: var(--gd-mint);
    --dcm-strain-type-pill-text-indica-hybrid: var(--gd-jungle-deep);
    --dcm-strain-type-pill-bg-hybrid: var(--gd-cream);
    --dcm-strain-type-pill-text-hybrid: var(--gd-jungle);
    --dcm-strain-type-pill-bg-cbd: var(--gd-mint-deep);
    --dcm-strain-type-pill-text-cbd: var(--gd-jungle-deep);
    --dcm-strain-type-pill-bg-high-cbd: var(--gd-mint-deep);
    --dcm-strain-type-pill-text-high-cbd: var(--gd-jungle-deep);
    --dcm-strain-type-pill-bg-cbg: var(--gd-mint-deep);
    --dcm-strain-type-pill-text-cbg: var(--gd-jungle-deep);
    --dcm-strain-type-pill-bg-thc: var(--gd-bone);
    --dcm-strain-type-pill-text-thc: var(--gd-ink);
    --dcm-strain-type-pill-bg-seed: var(--gd-bone);
    --dcm-strain-type-pill-text-seed: var(--gd-ink);

    /* Account, checkout, locations and referral panels were a stock grey-blue
       family that reads cooler and flatter than this brand's warm ink ramp. */
    --dcm-account-bg: var(--gd-cream);
    --dcm-account-divider-color: rgba(12, 13, 10, 0.16);
    --dcm-account-icon-accent: var(--gd-lime);
    --dcm-account-icon-fill: var(--gd-bone);
    --dcm-account-icon-stroke: var(--gd-ink);
    --dcm-account-label-color: var(--gd-stone);
    --dcm-account-link-icon-color: var(--gd-stone);
    --dcm-account-nav-color: var(--gd-ink);
    --dcm-account-popover-divider-color: rgba(12, 13, 10, 0.18);
    --dcm-account-popover-item-color: var(--gd-ink);
    --dcm-account-popover-item-hover-bg: var(--gd-cream);
    --dcm-account-surface-shadow: rgba(12, 13, 10, 0.12);
    --dcm-user-btn-name-border-color: rgba(12, 13, 10, 0.2);

    --dcm-age-gate-body-color: var(--gd-grey);
    --dcm-brands-card-placeholder-color: var(--gd-grey);
    --dcm-brands-title-color: var(--gd-ink);
    --dcm-breadcrumb-separator-color: var(--gd-stone);
    --dcm-categories-view-all-color: var(--gd-black);

    --dcm-checkout-disclaimer-color: var(--gd-stone);
    --dcm-checkout-payment-icon-color: var(--gd-stone);
    --dcm-checkout-payment-tab-border-color: rgba(12, 13, 10, 0.18);
    --dcm-checkout-save-info-bg: var(--gd-cream);
    --dcm-checkout-section-border-color: rgba(12, 13, 10, 0.16);
    --dcm-checkout-section-heading-color: var(--gd-ink);
    --dcm-checkout-summary-border-color: rgba(12, 13, 10, 0.18);
    --dcm-checkout-summary-text-color: var(--gd-grey);
    --dcm-checkout-summary-total-color: var(--gd-ink);
    --dcm-checkout-text-muted-color: var(--gd-stone);

    --dcm-drawer-close-btn-color: var(--gd-stone);
    --dcm-drawer-status-bg: var(--gd-bone);
    --dcm-login-nudge-apple-icon-color: var(--gd-ink);
    --dcm-login-nudge-close-color: var(--gd-grey);
    --dcm-privacy-footer-divider-color: rgba(254, 253, 235, 0.18);

    --dcm-locations-browser-text-color: var(--gd-grey);
    --dcm-locations-card-bg: var(--gd-white);
    --dcm-locations-card-border-color: rgba(12, 13, 10, 0.16);
    --dcm-locations-card-hover-bg: var(--gd-cream);
    --dcm-locations-card-hover-border-color: var(--gd-black);
    --dcm-locations-card-text-color: var(--gd-grey);
    --dcm-locations-close-hover-bg: var(--gd-grey);
    --dcm-locations-heading-color: var(--gd-ink);
    --dcm-locations-marker-address-color: var(--gd-grey);
    --dcm-locations-scrollbar-color: var(--gd-stone);
    --dcm-locations-subtext-color: var(--gd-grey);
    --dcm-locations-text-color: var(--gd-grey);

    --dcm-referral-border-color: rgba(12, 13, 10, 0.16);
    --dcm-referral-disclaimer-color: var(--gd-stone);
    --dcm-referral-heading-color: var(--gd-ink);
    --dcm-referral-input-bg: var(--gd-white);
    --dcm-referral-input-border-color: rgba(12, 13, 10, 0.18);
    --dcm-referral-input-text-color: var(--gd-ink);
    --dcm-referral-qr-text-color: var(--gd-grey);
    --dcm-referral-subtext-color: var(--gd-grey);
    --dcm-referral-tab-inactive-bg: var(--gd-bone);
  }

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

  /**
   * NO SIDEWAYS DRAG, EVER.
   *
   * Measured on the live menu across seven widths: at 320px the document
   * scrolled 15px wider than the viewport, and on a product page at 375px, 4px.
   * Every element responsible belongs to the HOST, not this theme -- its
   * consent container, its mobile utility nav, its cart button and its terpene
   * block all measure a few pixels past the viewport on narrow screens. Those
   * are generated class names, which the SDK's own lint refuses as a styling
   * surface, so a theme cannot correct them directly.
   *
   * clip, NOT hidden. They look equivalent and are not: overflow:hidden
   * creates a scroll container, and a scroll container on an ancestor silently
   * kills position:sticky on everything inside it -- which would take this
   * theme's own sticky masthead down with it. clip does not create one, so
   * the overhang is trimmed and the pill still sticks.
   *
   * This does not excuse an overflow of our own. mobile.test.ts pins the
   * rules that caused the ones we had, and the browser audit measures per
   * element rather than trusting the document width.
   */
  html,
  body {
    overflow-x: clip;
  }

  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, so this is where the display face reaches the host's headings.

     Modesto Poster is a poster face: it sets tight and it needs the extra
     letter-spacing back, which is why tracking is positive here and negative
     on the sans. Colour deliberately stays inherit -- a concrete colour beats
     inheritance and would repaint every heading sitting inside a dark section
     that sets its text colour on a wrapper. */
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    /* Uppercase, and this is not a stylistic preference: it is what the brand's
       own display class does, and Modesto Poster is a poster face whose
       lowercase was never drawn to carry text. Set in mixed case it reads as a
       different, worse typeface. The tracking and the sub-1 line height are the
       site's values too -- a poster face set tight needs the leading pulled in
       or the headings float apart.

       Colour deliberately stays inherit: a concrete colour here beats
       inheritance and repaints every heading inside a dark section that sets
       its text colour on a wrapper. */
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 0.92;
    color: inherit;
  }