@font-face {
    font-family: 'Altivo';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/Altivo-Light.4c68e0e8.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/Altivo-LightItalic.46234ccf.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/Altivo-Regular.bcd11e92.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/Altivo-Italic.4e4ff1b3.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/Altivo-Medium.2f6723cd.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/Altivo-MediumItalic.2b0f786f.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/Altivo-Bold.40abdb47.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/Altivo-BoldItalic.5c5ea389.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/Altivo-Black.4ce53da8.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/Altivo-BlackItalic.bf936b92.woff2) format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Peridot';
    src: url(https://extensions.ayr.dutchie.partners/static/css/assets/PeridotPE-CondensedMedium.9971f42e.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/PeridotPE-CondensedSemiBold.368eb533.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/PeridotPE-CondensedBold.23c5928e.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/PeridotPE-CondensedExtraBold.1ea933ac.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/PeridotPE-CondensedBlack.95b96d57.woff2) format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }

  :root:root {
    --ayr-midnight-navy: oklch(0.33 0.06 257);
    --ayr-blue: oklch(0.48 0.13 248);
    --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.72 0.14 120);
    --ayr-lime-green: oklch(0.80 0.13 115);

    --ayr-blaze-orange: oklch(0.67 0.17 40);
    --ayr-joint-paper: oklch(0.95 0.02 85);
    --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', system-ui, -apple-system, sans-serif;
    --ayr-font-heading: 'Peridot', '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.
     *
     * 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);

    /* 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);
  }

  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 which ships
   * with 16px horizontal padding. Most surfaces (Categories grid,
   * Recommended-for-you carousel, PLP grids) rely on that padding to keep
   * their headings off the viewport edge. We expose the assumed value as
   * --ayr-main-pad and let specific full-bleed slots (header, navigation,
   * hero, footer) cancel it locally with negative margin via the fullBleed
   * mixin in store-front/full-bleed.ts. */
  :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;
  }