/* Body family 'Altivo' → Outfit. Regular/medium weights (300/400/500)
     map to Outfit Medium; bold/black (700/900) map to Outfit Bold. Italic
     reuses the upright face (Outfit ships no italic; browser synthesizes). */
  @font-face {
    font-family: 'Altivo';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Outfit-Medium.8d18117f.woff2) format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Altivo';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Outfit-Medium.8d18117f.woff2) format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Altivo';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Outfit-Medium.8d18117f.woff2) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Altivo';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Outfit-Medium.8d18117f.woff2) format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Altivo';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Outfit-Medium.8d18117f.woff2) format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Altivo';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Outfit-Medium.8d18117f.woff2) format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Altivo';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Outfit-Bold.1e47b377.woff2) format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Altivo';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Outfit-Bold.1e47b377.woff2) format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Altivo';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Outfit-Bold.1e47b377.woff2) format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Altivo';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Outfit-Bold.1e47b377.woff2) format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
  }

  /* Heading family 'Peridot' → Freeman. Freeman is only ever shown at
     Regular, so the single Regular file is registered across every heading
     weight (500–900) the theme applies — font-bold/black headings render
     true Regular, never a faux-bold. */
  @font-face {
    font-family: 'Peridot';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Freeman-Regular.609e6805.woff2) format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Peridot';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Freeman-Regular.609e6805.woff2) format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Peridot';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Freeman-Regular.609e6805.woff2) format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Peridot';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Freeman-Regular.609e6805.woff2) format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Peridot';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Freeman-Regular.609e6805.woff2) format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }

  /* Metric-matched fallbacks. Text paints in a local system font until
     the brand fonts arrive (font-display: swap). Unadjusted, that font is
     up to 18% wider and 2-3px taller per line than Freeman / Outfit, so
     the swap reflowed the page: 0.083 of Lighthouse's 0.097 CLS on a FL
     store home page (5 Oct). These local faces are scaled to the brand
     fonts' advance widths and vertical metrics, so the swap only changes
     glyph shapes. Nothing is downloaded.

     Values come from the font files (fontTools): size-adjust is the
     brand font's average advance over a sample of storefront copy divided
     by the local font's; the overrides are the brand font's typo
     ascent / descent / line gap divided by size-adjust. Recompute if a
     brand font file changes.

     Arial covers Windows, macOS and iOS. Android has no Arial, so the
     local() sources fail there and the browser moves on to the Roboto
     family in the stack. */
  @font-face {
    font-family: 'Peridot Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT');
    font-weight: 100 900;
    size-adjust: 83.16%;
    ascent-override: 126.26%;
    descent-override: 33.67%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: 'Peridot Fallback Android';
    src: local('Roboto Bold'), local('Roboto-Bold'), local('Roboto');
    font-weight: 100 900;
    size-adjust: 87.85%;
    ascent-override: 119.52%;
    descent-override: 31.87%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: 'Altivo Fallback';
    src: local('Arial'), local('ArialMT');
    font-weight: 100 550;
    size-adjust: 97.66%;
    ascent-override: 102.4%;
    descent-override: 26.62%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: 'Altivo Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT');
    font-weight: 551 900;
    size-adjust: 94.76%;
    ascent-override: 105.53%;
    descent-override: 27.44%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: 'Altivo Fallback Android';
    src: local('Roboto'), local('Roboto-Regular');
    font-weight: 100 550;
    size-adjust: 98.6%;
    ascent-override: 101.42%;
    descent-override: 26.37%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: 'Altivo Fallback Android';
    src: local('Roboto Bold'), local('Roboto-Bold'), local('Roboto');
    font-weight: 551 900;
    size-adjust: 100.1%;
    ascent-override: 99.9%;
    descent-override: 25.97%;
    line-gap-override: 0%;
  }

  :root:root {
    --ayr-midnight-navy: oklch(0.3334 0.0759 262.15);
    --ayr-blue: oklch(0.5027 0.1425 250.05);
    --ayr-cloud-blue: oklch(0.92 0.03 240);
    --ayr-light-blue: oklch(0.971 0.0059 239.82);

    --ayr-leafy-green: oklch(0.45 0.10 140);
    --ayr-wonder-green: oklch(0.7704 0.1531 127.45);
    --ayr-lime-green: oklch(0.80 0.13 115);

    --ayr-blaze-orange: oklch(0.6763 0.1629 40.11);
    /* Same hue, darker: the fill behind small white badge text. White on
       blaze-orange is 3.1:1, under the 4.5:1 WCAG AA minimum; this is 5:1. */
    --ayr-blaze-orange-deep: oklch(0.56 0.1629 40.11);
    --ayr-joint-paper: oklch(0.9549 0.0076 61.45);
    --ayr-carbon-black: oklch(0 0 0);

    --ayr-roach-dust-grey: oklch(0.45 0 0);
    --ayr-ash-cloud-grey: oklch(0.65 0 0);
    --ayr-faded-gray: oklch(0.80 0 0);

    --ayr-yellow: oklch(0.80 0.16 95);
    --ayr-light-yellow: oklch(0.90 0.10 95);
    --ayr-pink: oklch(0.75 0.18 350);
    --ayr-light-pink: oklch(0.85 0.12 350);
    --ayr-red: oklch(0.62 0.20 25);
    --ayr-light-red: oklch(0.75 0.15 25);
    --ayr-purple: oklch(0.40 0.12 300);
    --ayr-light-purple: oklch(0.55 0.10 300);
    --ayr-brown: oklch(0.45 0.10 60);
    --ayr-light-brown: oklch(0.60 0.12 60);

    --ayr-background: oklch(1 0 0);
    --ayr-foreground: var(--ayr-midnight-navy);
    --ayr-on-dark: #ffffff;
    --ayr-primary: var(--ayr-midnight-navy);
    --ayr-primary-foreground: var(--ayr-on-dark);
    --ayr-secondary: var(--ayr-cloud-blue);
    --ayr-secondary-foreground: var(--ayr-midnight-navy);
    --ayr-muted: var(--ayr-joint-paper);
    --ayr-muted-foreground: var(--ayr-roach-dust-grey);
    --ayr-accent: var(--ayr-light-blue);
    --ayr-accent-foreground: var(--ayr-midnight-navy);
    --ayr-destructive: var(--ayr-blaze-orange);
    --ayr-border: var(--ayr-faded-gray);
    --ayr-input: var(--ayr-faded-gray);
    --ayr-ring: var(--ayr-blue);

    --ayr-font-body: 'Altivo', 'Altivo Fallback', 'Altivo Fallback Android', system-ui, -apple-system, sans-serif;
    --ayr-font-heading: 'Peridot', 'Peridot Fallback', 'Peridot Fallback Android', 'Altivo', system-ui, -apple-system, sans-serif;

    /* ------------------------------------------------------------
     * Branding contract — header / footer / hero token set
     *
     * Hex literals from §1.2 of the Dutchie SDK branding contract.
     * These are the canonical values for the shared cross-layer
     * components; the Next.js layer mirrors them under the same
     * names so the storefront and marketing site share identical
     * chrome.
     * ------------------------------------------------------------ */
    --header-navy: #163259;
    --header-text: #0F2037;
    --header-paper: #F7F5F1;
    --header-paper-deep: #F2EEE7;
    --header-lime: #97C454;
    --header-wonder: #99C652;
    --header-blue: #297AC5;
    --header-success: #30A65B;
    --header-muted: #51627A;
    --header-border: #D8DFE8;
    --header-input: #EFF1F5;

    /* Announcement bar (legacy palette) */
    --leafy-green: #3F7D34;

    --ayr-radius: 0.625rem;
    --ayr-radius-sm: calc(var(--ayr-radius) * 0.6);
    --ayr-radius-md: calc(var(--ayr-radius) * 0.8);
    --ayr-radius-lg: var(--ayr-radius);
    --ayr-radius-xl: calc(var(--ayr-radius) * 1.4);
    --ayr-radius-2xl: calc(var(--ayr-radius) * 1.8);

    /* ------------------------------------------------------------
     * Dutchie --dcm-* overrides
     *
     * Maps AYR brand tokens onto Dutchie's native component design
     * tokens. Affects every Dutchie-rendered surface our theme does
     * NOT replace with a custom slot: homepage Categories block,
     * category-page filter sidebar, product detail page, cart drawer,
     * modals, age gate, checkout, breadcrumbs, skeletons, etc., and
     * Dutchie's own header on the kiosk pages, which load this
     * stylesheet without the theme's slots.
     *
     * Reference: docs.dutchie.com/.../global-styles (394 vars total).
     * Only vars that need to diverge from Dutchie defaults to carry
     * AYR presence are set here; everything else inherits.
     * ------------------------------------------------------------ */

    /* Global colors */
    --dcm-color-primary: var(--ayr-blue);
    --dcm-color-body-bg: var(--ayr-joint-paper);
    --dcm-color-surface: var(--ayr-background);
    --dcm-color-surface-hover: color-mix(in oklch, var(--ayr-blue) 6%, var(--ayr-background));
    --dcm-color-surface-muted: var(--ayr-cloud-blue);
    --dcm-color-text-primary: var(--ayr-midnight-navy);
    --dcm-color-text-secondary: var(--ayr-roach-dust-grey);
    --dcm-color-text-muted: var(--ayr-ash-cloud-grey);
    --dcm-color-text-inverted: var(--ayr-on-dark);
    --dcm-color-border: var(--ayr-faded-gray);
    --dcm-color-border-dark: var(--ayr-roach-dust-grey);
    --dcm-color-focus: var(--ayr-blue);
    --dcm-color-focus-shadow: color-mix(in oklch, var(--ayr-blue) 30%, transparent);
    --dcm-color-navbar-bg: var(--ayr-midnight-navy);

    /* Header bar. Read by Dutchie's own header on pages that load this
       stylesheet but not the theme's header, the kiosks first: the kiosk
       menus resolve none of the theme's slots, so Dutchie draws its header
       on the bar --dcm-color-navbar-bg paints. Dutchie points the header's
       text at --dcm-color-text-primary, which this block maps to the same
       navy as the bar, so its links were invisible. Text and the icons
       drawn in its color take the on-dark token, and so does the MENU
       label over the menu-type switch, which Dutchie points at the
       secondary text gray; the bar's bottom border and the divider between
       its link groups are a step lighter than the bar, as the SDK's own
       dark templates draw their header border. Dutchie's own :root
       declares all five; the extracted sheet ships this block as
       :root:root, which outranks it. Dutchie's light info band takes the
       text and the label back to Dutchie's own values (the rule after
       this block). Left to Dutchie: the Shop menu's headings
       (--dcm-header-nav-title-text-color), which sit on its white panel,
       and --dcm-header-shadow, which Dutchie declares as none and its
       header does not read. */
    --dcm-header-bg: var(--ayr-midnight-navy);
    --dcm-header-text-color: var(--ayr-on-dark);
    --dcm-header-border-color: color-mix(in oklch, var(--ayr-on-dark) 20%, transparent);
    --dcm-header-divider-color: color-mix(in oklch, var(--ayr-on-dark) 20%, transparent);
    --dcm-menu-type-label-color: var(--ayr-on-dark);

    /* Status */
    --dcm-color-status-open: var(--ayr-wonder-green);
    --dcm-color-status-closed: var(--ayr-red);
    --dcm-color-status-preorder: var(--ayr-ash-cloud-grey);
    --dcm-color-status-coming-soon: var(--ayr-yellow);
    --dcm-status-open-color: var(--ayr-wonder-green);
    --dcm-status-closed-color: var(--ayr-red);
    --dcm-status-preorder-color: var(--ayr-ash-cloud-grey);
    --dcm-status-coming-soon-color: var(--ayr-yellow);
    --dcm-status-label-color: var(--ayr-roach-dust-grey);

    /* Typography */
    --dcm-font-primary: var(--ayr-font-body);
    --dcm-font-secondary: var(--ayr-font-heading);

    /* Radius scale */
    --dcm-radius-sm: var(--ayr-radius-sm);
    --dcm-radius-md: var(--ayr-radius-md);
    --dcm-radius-lg: var(--ayr-radius-lg);
    --dcm-radius-buttons: var(--ayr-radius-md);
    --dcm-radius-cards: var(--ayr-radius-xl);

    /* Section titles (shared by Categories, Brands, carousels) */
    --dcm-section-title-color: var(--ayr-midnight-navy);
    --dcm-section-subtitle-color: var(--ayr-roach-dust-grey);

    /* Categories (native homepage block) */
    --dcm-categories-card-bg: var(--ayr-background);
    --dcm-categories-card-border-color: transparent;
    --dcm-categories-card-text-color: var(--ayr-midnight-navy);
    --dcm-categories-card-hover-shadow: 0 12px 28px -8px color-mix(in oklch, var(--ayr-midnight-navy) 24%, transparent);
    --dcm-categories-view-all-bg: var(--ayr-midnight-navy);
    --dcm-categories-view-all-color: var(--ayr-on-dark);

    /* Inline categories (chip rail on category pages) */
    --dcm-inline-categories-heading-color: var(--ayr-midnight-navy);
    --dcm-inline-categories-divider-color: var(--ayr-faded-gray);
    --dcm-inline-categories-chip-bg: transparent;
    --dcm-inline-categories-chip-text-color: var(--ayr-midnight-navy);
    --dcm-inline-categories-chip-border-color: var(--ayr-faded-gray);
    --dcm-inline-categories-chip-hover-border-color: var(--ayr-blue);

    /* Brands */
    --dcm-brands-title-color: var(--ayr-midnight-navy);
    --dcm-brands-card-bg: var(--ayr-background);
    --dcm-brands-card-border-color: transparent;
    --dcm-brands-card-border-radius: var(--ayr-radius-xl);
    --dcm-brands-card-shadow: 0 1px 2px color-mix(in oklch, var(--ayr-midnight-navy) 6%, transparent);
    --dcm-brands-card-hover-shadow: 0 12px 28px -8px color-mix(in oklch, var(--ayr-midnight-navy) 24%, transparent);
    --dcm-brands-card-name-color: var(--ayr-midnight-navy);
    --dcm-brands-card-placeholder-color: var(--ayr-roach-dust-grey);
    --dcm-brands-card-placeholder-bg: var(--ayr-cloud-blue);
    --dcm-brands-no-results-color: var(--ayr-roach-dust-grey);

    /* Product (card surfaces + detail page) */
    --dcm-product-page-bg: var(--ayr-joint-paper);
    --dcm-product-name-color: var(--ayr-midnight-navy);
    --dcm-product-brand-color: var(--ayr-roach-dust-grey);
    --dcm-product-description-color: var(--ayr-midnight-navy);
    --dcm-product-subheading-color: var(--ayr-midnight-navy);
    --dcm-product-price-color: var(--ayr-midnight-navy);
    --dcm-product-price-strikethrough-color: var(--ayr-ash-cloud-grey);
    --dcm-product-price-muted-color: var(--ayr-ash-cloud-grey);
    --dcm-product-option-bg: var(--ayr-background);
    --dcm-product-option-border-color: var(--ayr-faded-gray);
    --dcm-product-option-text-color: var(--ayr-midnight-navy);
    --dcm-product-input-bg: var(--ayr-background);
    --dcm-product-input-border-color: var(--ayr-faded-gray);
    --dcm-product-detail-text-color: var(--ayr-midnight-navy);
    --dcm-product-detail-muted-color: var(--ayr-roach-dust-grey);
    --dcm-product-effect-bg: var(--ayr-cloud-blue);
    --dcm-product-effect-text-color: var(--ayr-midnight-navy);
    --dcm-product-progress-bg: var(--ayr-cloud-blue);
    --dcm-product-progress-fill: var(--ayr-wonder-green);
    --dcm-product-chip-bg: var(--ayr-cloud-blue);
    --dcm-product-chip-text-color: var(--ayr-midnight-navy);
    --dcm-product-chip-hover-bg: color-mix(in oklch, var(--ayr-cloud-blue) 82%, var(--ayr-blue));
    --dcm-product-accordion-icon-color: var(--ayr-roach-dust-grey);

    /* Carousel navigation buttons */
    --dcm-carousel-btn-bg: var(--ayr-background);
    --dcm-carousel-btn-hover-bg: var(--ayr-cloud-blue);
    --dcm-carousel-btn-arrow-color: var(--ayr-midnight-navy);
    --dcm-carousel-btn-shadow: 0 4px 12px -2px color-mix(in oklch, var(--ayr-midnight-navy) 18%, transparent);

    /* Filter sidebar (category pages) */
    --dcm-filter-heading-color: var(--ayr-midnight-navy);
    --dcm-filter-text-color: var(--ayr-midnight-navy);
    --dcm-filter-border-color: var(--ayr-faded-gray);
    --dcm-filter-icon-color: var(--ayr-roach-dust-grey);
    --dcm-filter-search-bg: var(--ayr-background);
    --dcm-filter-search-border-color: var(--ayr-faded-gray);
    --dcm-filter-search-text-color: var(--ayr-midnight-navy);
    --dcm-filter-search-placeholder-color: var(--ayr-ash-cloud-grey);
    --dcm-filter-search-icon-color: var(--ayr-roach-dust-grey);
    --dcm-filter-search-focus-border-color: var(--ayr-blue);
    --dcm-filter-search-focus-shadow: 0 0 0 3px color-mix(in oklch, var(--ayr-blue) 22%, transparent);

    /* Site search input */
    --dcm-search-input-border-color: var(--ayr-faded-gray);
    --dcm-search-input-focus-border-color: var(--ayr-blue);
    --dcm-search-input-focus-shadow: 0 0 0 3px color-mix(in oklch, var(--ayr-blue) 22%, transparent);
    --dcm-search-input-font-family: var(--ayr-font-body);
    --dcm-search-icon-color: var(--ayr-roach-dust-grey);

    /* Breadcrumbs */
    --dcm-breadcrumb-link-color: var(--ayr-roach-dust-grey);
    --dcm-breadcrumb-active-color: var(--ayr-midnight-navy);
    --dcm-breadcrumb-separator-color: var(--ayr-faded-gray);

    /* Content header (list page title strip) */
    --dcm-content-header-text-color: var(--ayr-midnight-navy);
    --dcm-content-header-border-color: var(--ayr-faded-gray);
    --dcm-content-header-icon-color: var(--ayr-roach-dust-grey);

    /* Cart drawer + cart button */
    --dcm-cart-bg: var(--ayr-background);
    --dcm-cart-content-bg: var(--ayr-joint-paper);
    --dcm-cart-text-color: var(--ayr-midnight-navy);
    --dcm-cart-text-muted-color: var(--ayr-roach-dust-grey);
    --dcm-cart-border-color: var(--ayr-faded-gray);
    --dcm-cart-item-bg: var(--ayr-background);
    --dcm-cart-item-border-color: var(--ayr-faded-gray);
    --dcm-cart-item-separator-color: var(--ayr-faded-gray);
    --dcm-cart-price-color: var(--ayr-midnight-navy);
    --dcm-cart-toggle-bg: var(--ayr-cloud-blue);
    --dcm-cart-toggle-active-bg: var(--ayr-background);
    --dcm-cart-backdrop-color: color-mix(in oklch, var(--ayr-midnight-navy) 55%, transparent);
    --dcm-cart-btn-bg-active: var(--ayr-blue);
    --dcm-cart-btn-bg-empty: var(--ayr-midnight-navy);
    --dcm-cart-btn-text-active: var(--ayr-on-dark);
    --dcm-cart-btn-text-empty: var(--ayr-on-dark);
    --dcm-cart-btn-hover-bg: color-mix(in oklch, var(--ayr-blue) 85%, black);

    /* Popover + account popover */
    --dcm-popover-bg: var(--ayr-background);
    --dcm-popover-item-color: var(--ayr-midnight-navy);
    --dcm-popover-item-hover-bg: var(--ayr-cloud-blue);
    --dcm-popover-shadow: 0 14px 40px -12px color-mix(in oklch, var(--ayr-midnight-navy) 28%, transparent);
    --dcm-account-popover-item-color: var(--ayr-midnight-navy);
    --dcm-account-popover-item-hover-bg: var(--ayr-cloud-blue);
    --dcm-account-popover-divider-color: var(--ayr-faded-gray);
    --dcm-account-popover-logout-color: var(--ayr-blaze-orange);
    --dcm-account-popover-shadow: 0 14px 40px -12px color-mix(in oklch, var(--ayr-midnight-navy) 28%, transparent);
    --dcm-account-link-icon-color: var(--ayr-on-dark);

    /* Info bar (announcements / promos) */
    --dcm-infobar-bg: var(--ayr-cloud-blue);
    --dcm-infobar-text-color: var(--ayr-midnight-navy);
    --dcm-infobar-border-color: var(--ayr-faded-gray);

    /* Banner */
    --dcm-banner-border-radius: var(--ayr-radius-xl);

    /* Modal */
    --dcm-modal-bg: var(--ayr-background);
    --dcm-modal-text-color: var(--ayr-midnight-navy);
    --dcm-modal-footer-bg: var(--ayr-joint-paper);
    --dcm-modal-footer-text-color: var(--ayr-midnight-navy);
    --dcm-modal-close-color: var(--ayr-roach-dust-grey);
    --dcm-modal-backdrop-color: color-mix(in oklch, var(--ayr-midnight-navy) 55%, transparent);
    --dcm-modal-shadow: 0 28px 70px -16px color-mix(in oklch, var(--ayr-midnight-navy) 40%, transparent);
    --dcm-modal-border-radius: var(--ayr-radius-xl);

    /* Age gate */
    --dcm-age-gate-modal-bg: var(--ayr-background);
    --dcm-age-gate-modal-text-color: var(--ayr-midnight-navy);
    --dcm-age-gate-body-color: var(--ayr-roach-dust-grey);
    --dcm-age-gate-link-color: var(--ayr-blue);
    --dcm-age-gate-backdrop-color: color-mix(in oklch, var(--ayr-midnight-navy) 55%, transparent);
    --dcm-age-gate-backdrop-blur: 10px;
    --dcm-age-gate-modal-shadow: 0 28px 70px -16px color-mix(in oklch, var(--ayr-midnight-navy) 40%, transparent);
    --dcm-age-gate-modal-border-radius: var(--ayr-radius-xl);

    /* Login nudge */
    --dcm-login-nudge-bg: var(--ayr-background);
    --dcm-login-nudge-text-color: var(--ayr-midnight-navy);
    --dcm-login-nudge-link-color: var(--ayr-blue);
    --dcm-login-nudge-close-color: var(--ayr-roach-dust-grey);
    --dcm-login-nudge-social-btn-bg: var(--ayr-cloud-blue);
    --dcm-login-nudge-shadow: 0 14px 40px -12px color-mix(in oklch, var(--ayr-midnight-navy) 28%, transparent);
    --dcm-login-nudge-apple-icon-color: var(--ayr-midnight-navy);
    --dcm-login-nudge-font-family: var(--ayr-font-body);

    /* Logged-out CTA card */
    --dcm-logged-out-cta-bg: var(--ayr-background);
    --dcm-logged-out-cta-border-color: var(--ayr-faded-gray);
    --dcm-logged-out-cta-border-radius: var(--ayr-radius-xl);
    --dcm-logged-out-cta-text-color: var(--ayr-midnight-navy);
    --dcm-logged-out-cta-subtext-color: var(--ayr-roach-dust-grey);
    --dcm-logged-out-cta-link-color: var(--ayr-blue);

    /* Skeleton loaders */
    --dcm-skeleton-bg: var(--ayr-cloud-blue);
    --dcm-skeleton-border-color: var(--ayr-faded-gray);
    --dcm-skeleton-shimmer-from: color-mix(in oklch, var(--ayr-background) 0%, transparent);
    --dcm-skeleton-shimmer-to: color-mix(in oklch, var(--ayr-background) 60%, transparent);

    /* Drawer nav (mobile menu) — navy chrome to match site header */
    --dcm-drawer-bg: var(--ayr-midnight-navy);
    --dcm-drawer-status-bg: color-mix(in oklch, var(--ayr-midnight-navy) 92%, black);
    --dcm-drawer-accent-color: var(--ayr-blue);
    --dcm-drawer-nav-heading-color: var(--ayr-on-dark);
    --dcm-drawer-nav-title-text-color: var(--ayr-on-dark);
    --dcm-drawer-nav-link-color: color-mix(in oklch, var(--ayr-on-dark) 80%, transparent);
    --dcm-drawer-tab-active-color: var(--ayr-on-dark);
    --dcm-drawer-tab-inactive-color: color-mix(in oklch, var(--ayr-on-dark) 55%, transparent);
    --dcm-drawer-close-btn-color: var(--ayr-on-dark);

    /* Skip link (a11y) */
    --dcm-skip-link-bg: var(--ayr-blue);
    --dcm-skip-link-color: var(--ayr-on-dark);

    /* Privacy footer */
    --dcm-privacy-footer-bg: var(--ayr-midnight-navy);
    --dcm-privacy-footer-border-color: color-mix(in oklch, var(--ayr-on-dark) 10%, transparent);
    --dcm-privacy-footer-divider-color: color-mix(in oklch, var(--ayr-on-dark) 14%, transparent);
    --dcm-privacy-footer-text-color: color-mix(in oklch, var(--ayr-on-dark) 70%, transparent);
    --dcm-privacy-footer-text-hover-color: var(--ayr-on-dark);

    /* Checkout (pre-payment surfaces) */
    --dcm-checkout-heading-color: var(--ayr-roach-dust-grey);
    --dcm-checkout-section-heading-color: var(--ayr-midnight-navy);
    --dcm-checkout-section-border-color: var(--ayr-faded-gray);
    --dcm-checkout-text-color: var(--ayr-midnight-navy);
    --dcm-checkout-text-muted-color: var(--ayr-roach-dust-grey);
    --dcm-checkout-link-color: var(--ayr-blue);
    --dcm-checkout-input-bg: var(--ayr-background);
    --dcm-checkout-input-border-color: var(--ayr-faded-gray);
    --dcm-checkout-summary-bg: var(--ayr-joint-paper);
    --dcm-checkout-summary-text-color: var(--ayr-midnight-navy);
    --dcm-checkout-summary-border-color: var(--ayr-faded-gray);
    --dcm-checkout-summary-total-color: var(--ayr-midnight-navy);
    --dcm-checkout-payment-tab-bg: var(--ayr-background);
    --dcm-checkout-payment-tab-border-color: var(--ayr-faded-gray);
    --dcm-checkout-payment-content-bg: var(--ayr-background);
    --dcm-checkout-disclaimer-color: var(--ayr-roach-dust-grey);
    --dcm-checkout-save-info-bg: var(--ayr-cloud-blue);

    /* User button (header) */
    --dcm-user-btn-color: var(--ayr-on-dark);
    --dcm-user-btn-name-color: var(--ayr-on-dark);
    --dcm-user-btn-name-border-color: color-mix(in oklch, var(--ayr-on-dark) 20%, transparent);
  }

  /* ------------------------------------------------------------
   * Dutchie's light info band (its own header, the kiosks first)
   *
   * Below its widest layout Dutchie's header moves the store status
   * and the menu-type switch off the bar onto a light band under it.
   * From 1020 to 1060px the switch there still reads the header's
   * text color and its MENU label the menu-type label color, which
   * the :root block above points at the on-dark token for the bar:
   * white on the light band. Custom properties resolve from the
   * nearest ancestor, so re-declaring both on the band's container
   * gives everything Dutchie moves onto the band Dutchie's own values,
   * dark on light at every width, while the bar keeps white.
   *
   * The container is matched by its stable component prefix (name and
   * file; the trailing hash churns per build), as the filter
   * sidebar's rules below are. If Dutchie renames it, the rule no-ops
   * and the band takes the bar's values again.
   * ------------------------------------------------------------ */
  [class*="header-styles__InfoBarMq"] {
    --dcm-header-text-color: var(--dcm-color-text-primary);
    --dcm-menu-type-label-color: var(--dcm-color-text-secondary);
  }

  body {
    background: var(--ayr-joint-paper);
    color: var(--ayr-foreground);
    font-family: var(--ayr-font-body);
  }

  /* ------------------------------------------------------------
   * Filter sidebar text size (category / product list pages)
   *
   * Dutchie's filter sidebar exposes only colour/border/shadow
   * tokens (--dcm-filter-*) — there is NO font-size token for it,
   * unlike most other components. Its section headings render at
   * a hardcoded 11px and option labels at 13px, which reads small.
   *
   * The host menu is not in Shadow DOM and our GlobalStyles loads
   * last, so plain element rules win on source order without
   * !important. We scope under the sidebar's stable styled-
   * components container class and target the stable component
   * prefixes (the trailing hash churns per build; the
   * 'header__Heading-sc-vs5mod' / 'checkbox-input__Text' prefixes
   * are derived from component name + file and are stable).
   *
   * Verified live on ayr-dev.com: 6 headings + 25 option labels
   * resolve, no collateral on other surfaces. If Dutchie renames
   * these components in a future release this rule no-ops (text
   * falls back to their default size) rather than breaking layout.
   * ------------------------------------------------------------ */
  :root:root {
    --ayr-filter-heading-size: 0.875rem; /* 14px (was 11px) */
    --ayr-filter-label-size: 0.9375rem;  /* 15px (was 13px) */
  }

  .two-column__TwoColumnSidebar-sc-6qosmq-1 [class*="header__Heading-sc-vs5mod"] {
    font-size: var(--ayr-filter-heading-size);
  }

  .two-column__TwoColumnSidebar-sc-6qosmq-1 [class*="checkbox-input__Text"] {
    font-size: var(--ayr-filter-label-size);
  }

  /* Dutchie's host wraps page content in main#main-content with horizontal
   * padding (nominally ~16px, but it varies by breakpoint — notably less on
   * mobile). Most surfaces (Categories grid, Recommended-for-you carousel,
   * PLP grids) rely on that padding to keep their headings off the viewport
   * edge.
   *
   * --ayr-main-pad records the nominal value for reference, but the fullBleed
   * mixin (store-front/full-bleed.ts) no longer consumes it: it cancels the
   * host padding with calc(50% - 50vw), which resolves to the actual padding
   * whatever it is — so a wrong assumption here can no longer make a
   * full-bleed slot overflow. */
  :root:root {
    --ayr-main-pad: 1rem;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--ayr-font-heading);
    color: var(--ayr-foreground);
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  ol,
  ul,
  dl,
  dd {
    margin: 0;
    padding: 0;
  }

  ol,
  ul,
  dl {
    list-style: none;
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  button {
    appearance: none;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    padding: 0;
  }

  input,
  textarea,
  select {
    font-family: inherit;
  }