@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;
  }

  /* Product photography arrives with a mix of opaque white, transparent, and
     loosely cropped canvases. Give every Dutchie card image well an explicit
     white surface so those differences disappear. The generated hash changes
     between host releases, so match the stable styled-components prefix. */
  [class*='card-image__ImageWrapper'] {
    background-color: var(--green-surface-card) !important;
  }

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

  [class*='card-action-button__Button'] {
    background: rgb(70 129 42 / 0.1) !important;
    color: #386722 !important;
  }

  [class*='card-action-button__Button']:hover {
    background: #46812a !important;
    color: #ffffff !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;
  }

  [class*='special-offer-rotator__SpecialOfferWrapper'] {
    color: #00ac78 !important;
  }