@font-face {
    font-family: 'Recoleta';
    src: url(https://extensions.green-nv.dutchie.partners/static/css/assets/Recoleta-Regular.8e38056f.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Recoleta';
    src: url(https://extensions.green-nv.dutchie.partners/static/css/assets/Recoleta-Medium.17d9363d.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Recoleta';
    src: url(https://extensions.green-nv.dutchie.partners/static/css/assets/Recoleta-SemiBold.870ede09.ttf) format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Recoleta';
    src: url(https://extensions.green-nv.dutchie.partners/static/css/assets/Recoleta-Bold.c9e6b138.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  :root:root {
    --green-brand: #006548;
    --green-brand-hover: #005239;
    --green-brand-strong: #004a37;
    --green-brand-deep: #003d2b;
    --green-footer-from: #006749;
    --green-footer-to: #00533b;
    --green-rewards-accent: #b7e4c7;
    --green-surface-cream: #f5f0ea;
    --green-surface-card: #ffffff;
    --green-surface-hover: #faf6ef;
    --green-surface-muted: #f0eae0;
    --green-text-strong: #1a2e23;
    --green-text-muted: #6b7b73;
    --green-text-subtle: #9ba8a0;
    --green-stroke-soft: #e8e4df;
    --green-mode-store: #fb923c;
    --green-mode-curbside: #16a34a;
    --green-mode-delivery: #9333ea;
    --green-font-display: 'Recoleta', Georgia, 'Times New Roman', serif;
    --green-font-body: 'Avenir Next', 'Segoe UI', 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
    --green-radius-sm: 6px;
    --green-radius-md: 10px;
    --green-radius-lg: 14px;
    --green-radius-card: 20px;
    --green-radius-pill: 9999px;
    --green-shadow-card: 0 4px 24px rgb(0 0 0 / 0.09);
    --green-shadow-card-sm: 0 2px 8px rgb(0 0 0 / 0.08);
    --green-shadow-card-lg: 0 24px 60px -32px rgb(26 46 35 / 0.18);
    --green-shadow-floating: 0 8px 32px rgb(0 0 0 / 0.12);
    --green-shadow-pill-hover: 0 6px 20px rgb(0 0 0 / 0.12);

    --dcm-color-primary: var(--green-brand);
    --dcm-color-body-bg: var(--green-surface-cream);
    --dcm-color-surface: var(--green-surface-card);
    --dcm-color-surface-hover: var(--green-surface-hover);
    --dcm-color-surface-muted: var(--green-surface-muted);
    --dcm-color-text-primary: var(--green-text-strong);
    --dcm-color-text-secondary: var(--green-text-muted);
    --dcm-color-text-muted: var(--green-text-subtle);
    --dcm-color-text-inverted: #ffffff;
    --dcm-color-border: var(--green-stroke-soft);
    --dcm-color-focus: var(--green-brand);
    --dcm-color-focus-shadow: rgb(0 101 72 / 0.22);
    --dcm-font-primary: var(--green-font-body);
    --dcm-font-secondary: var(--green-font-display);
    --dcm-radius-sm: var(--green-radius-sm);
    --dcm-radius-md: var(--green-radius-md);
    --dcm-radius-lg: var(--green-radius-lg);
    --dcm-radius-buttons: var(--green-radius-pill);
    --dcm-radius-cards: var(--green-radius-card);

    --dcm-color-navbar-bg: var(--green-brand);
    --dcm-header-bg: var(--green-brand);
    --dcm-header-text-color: #ffffff;
    --dcm-header-border-color: rgb(255 255 255 / 0.16);
    --dcm-header-shadow: 0 8px 24px rgb(0 0 0 / 0.14);
    --dcm-header-nav-title-text-color: #ffffff;
    --dcm-header-divider-color: rgb(255 255 255 / 0.16);
    --dcm-nav-link-hover-color: var(--green-rewards-accent);
    --dcm-nav-link-active-color: #ffffff;
    --dcm-nav-active-border-color: var(--green-rewards-accent);

    --dcm-cart-btn-bg-active: var(--green-rewards-accent);
    --dcm-cart-btn-bg-empty: rgb(255 255 255 / 0.12);
    --dcm-cart-btn-text-empty: #ffffff;
    --dcm-cart-btn-border-radius: var(--green-radius-pill);
    --dcm-cart-bg: var(--green-surface-card);
    --dcm-cart-content-bg: var(--green-surface-muted);
    --dcm-cart-text-color: var(--green-text-strong);
    --dcm-cart-border-color: var(--green-stroke-soft);
    --dcm-cart-item-bg: #ffffff;

    --dcm-search-input-border-color: var(--green-stroke-soft);
    --dcm-search-input-border-radius: var(--green-radius-pill);
    --dcm-search-input-focus-border-color: var(--green-brand);
    --dcm-search-input-focus-shadow: 0 0 0 3px rgb(0 101 72 / 0.18);

    --dcm-popover-bg: #ffffff;
    --dcm-popover-item-color: var(--green-text-strong);
    --dcm-popover-item-hover-bg: var(--green-surface-hover);
    --dcm-popover-border-radius: var(--green-radius-lg);
    --dcm-popover-shadow: var(--green-shadow-floating);

    --dcm-infobar-bg: var(--green-surface-muted);
    --dcm-infobar-text-color: var(--green-text-strong);
    --dcm-infobar-border-color: var(--green-stroke-soft);

    --dcm-drawer-bg: #ffffff;
    --dcm-drawer-tab-active-color: var(--green-brand);
    --dcm-drawer-tab-inactive-color: var(--green-text-muted);
    --dcm-drawer-accent-color: var(--green-brand);
    --dcm-drawer-nav-heading-color: var(--green-text-subtle);
    --dcm-drawer-nav-link-color: var(--green-text-strong);

    --dcm-footer-bg: linear-gradient(90deg, var(--green-footer-from) 0%, var(--green-footer-to) 100%);
    --dcm-footer-text-color: #ffffff;
    --dcm-privacy-footer-bg: var(--green-brand-deep);
    --dcm-privacy-footer-border-color: rgb(255 255 255 / 0.12);
    --dcm-privacy-footer-text-color: rgb(255 255 255 / 0.62);
    --dcm-privacy-footer-text-hover-color: #ffffff;

    --dcm-banner-border-radius: var(--green-radius-card);
    --dcm-color-status-open: #059669;
    --dcm-color-status-closed: #b91c1c;
    --dcm-color-status-preorder: #d4891a;
    --dcm-color-status-coming-soon: var(--green-text-muted);

    --dcm-skeleton-bg: var(--green-surface-muted);
    --dcm-skeleton-border-color: var(--green-stroke-soft);
    --dcm-skeleton-shimmer-from: rgb(255 255 255 / 0.35);
    --dcm-skeleton-shimmer-to: rgb(255 255 255 / 0.8);

    --dcm-login-nudge-bg: #ffffff;
    --dcm-login-nudge-text-color: var(--green-text-strong);
    --dcm-login-nudge-link-color: var(--green-brand);

    --dcm-categories-card-bg: #ffffff;
    --dcm-categories-card-border-color: var(--green-stroke-soft);
    --dcm-categories-card-text-color: var(--green-text-strong);
    --dcm-categories-view-all-bg: var(--green-surface-muted);
    --dcm-brands-card-bg: #ffffff;
    --dcm-brands-card-border-color: var(--green-stroke-soft);
    --dcm-brands-card-border-radius: var(--green-radius-card);
    --dcm-brands-card-name-color: var(--green-text-strong);

    --dcm-product-page-bg: var(--green-surface-cream);
    --dcm-product-name-color: var(--green-text-strong);
    --dcm-product-brand-color: var(--green-brand);
    --dcm-product-price-color: var(--green-brand);
    --dcm-product-description-color: var(--green-text-muted);
    --dcm-product-option-bg: #ffffff;
    --dcm-product-option-border-color: var(--green-stroke-soft);
    --dcm-filter-heading-color: var(--green-text-strong);
    --dcm-filter-text-color: var(--green-text-muted);
    --dcm-filter-border-color: var(--green-stroke-soft);
    --dcm-carousel-btn-bg: rgb(0 101 72 / 0.35);
    --dcm-carousel-btn-hover-bg: rgb(0 101 72 / 0.5);
    --dcm-carousel-btn-arrow-color: #ffffff;

    --dcm-modal-bg: #ffffff;
    --dcm-modal-text-color: var(--green-text-strong);
    --dcm-modal-border-radius: 20px;
    --dcm-modal-shadow: 0 24px 60px -16px rgb(0 0 0 / 0.35), 0 4px 12px rgb(0 0 0 / 0.08);
    --dcm-age-gate-modal-bg: #ffffff;
    --dcm-age-gate-link-color: var(--green-brand);

    --dcm-checkout-heading-color: var(--green-text-strong);
    --dcm-checkout-text-color: var(--green-text-muted);
    --dcm-checkout-input-bg: #ffffff;
    --dcm-checkout-summary-bg: var(--green-surface-muted);
    --dcm-breadcrumb-link-color: var(--green-brand);
    --dcm-breadcrumb-active-color: var(--green-text-muted);
    --dcm-section-title-color: var(--green-text-strong);
    --dcm-section-subtitle-color: var(--green-text-muted);
    --dcm-content-header-text-color: var(--green-text-strong);
    --dcm-content-header-border-color: var(--green-stroke-soft);
  }

  body {
    background: var(--green-surface-cream);
    color: var(--green-text-strong);
    font-family: var(--green-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Dutchie's per-location admin "Customize" colors (Buttons & Links, Staff
     Pick) are NOT part of this theme — each new location ships with Dutchie's
     default blue until someone edits it by hand (Green North launched that
     way, July 2026). Enforce the Green values from the theme so every
     location matches without admin babysitting. Two mechanisms are needed:
     the host both exposes the colors as CSS variables AND bakes derived
     literals (10%-tint fills, hover states, focus rings) into
     styled-components rules, so the variable override alone can't cover the
     buttons. The variable override and the focus-ring/slider rules live here;
     the literal card-button and special-offer overrides target host
     componentId prefixes and live in host-overrides.ts. !important beats the
     host's later-injected rules of equal specificity. */
  :root:root {
    --dct--customized-colors-buttonsLinks: #46812a !important;
    --dct--customized-colors-staffPickTag: #00ac78 !important;
  }

  .focus-visible,
  button:focus-visible {
    box-shadow: rgb(70 129 42 / 0.4) 0 0 0 2pt !important;
  }

  .MuiSlider-root {
    color: #46812a !important;
  }

  .MuiSlider-thumb:hover,
  .MuiSlider-thumb.Mui-focusVisible {
    box-shadow: rgb(70 129 42 / 0.16) 0 0 0 8px !important;
  }

  .MuiSlider-thumb.MuiSlider-active {
    box-shadow: rgb(70 129 42 / 0.16) 0 0 0 14px !important;
  }