@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:wght@400..800&display=swap');

  :root:root {
    /* ── Key Cannabis brand palette (keycannabis.com Elementor kit) ── */
    --kc-gold: #C99403;
    --kc-gold-bright: #D0A237;
    --kc-amber: #D3832B;
    --kc-yellow: #FCB900;
    --kc-teal: #005F61;
    --kc-teal-deep: #003840;
    --kc-teal-ink: #012A2F;
    --kc-teal-bright: #0E8C94;
    --kc-navy: #001129;
    --kc-cream: #F2E9DB;
    --kc-cream-soft: #F7F1E4;
    --kc-parchment: #FBF7EE;
    --kc-maroon: #622128;
    --kc-maroon-deep: #451317;
    --kc-ember: #C9522A;
    --kc-red: #EB3300;
    --kc-white: #FFFFFF;
    --kc-ink: #14282B;
    --kc-body: #4A5F62;
    --kc-border: rgba(0, 56, 64, 0.16);
    --kc-border-on-dark: rgba(242, 233, 219, 0.22);
    --kc-gold-focus-shadow: rgba(201, 148, 3, 0.35);

    /* ── Dutchie theme-level tokens ── */
    --dct--customized-colors-buttonsLinks: var(--kc-maroon);
    --dct--customized-colors-navBar: var(--kc-teal-deep);
    --dct--customized-maxSiteWidth: 1360px;
    --dcm-header-max-width: 1360px;
    --dct--customized-fonts-primary: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --dct--customized-fonts-secondary: 'Playfair Display', Georgia, serif;
    --dct--customized-textTransforms-buttons: uppercase;
    --dct--customized-textTransforms-links: none;
    --dct--customized-textTransforms-tags: uppercase;
    --dct--customized-radius-xs: 4px;
    --dct--customized-radius-sm: 8px;
    --dct--customized-radius-md: 10px;
    --dct--customized-radius-lg: 14px;
    --dct--customized-radius-xl: 18px;
    --dct--customized-radius-tags: 999px;
    --dct--customized-radius-cards: 14px;
    --dct--customized-radius-buttons: 999px;

    /* ── Brand colors ── */
    --dcm-color-primary: var(--kc-maroon);
    --dcm-color-body-bg: var(--kc-cream-soft);
    --dcm-color-surface: var(--kc-white);
    --dcm-color-surface-hover: var(--kc-parchment);
    --dcm-color-surface-muted: var(--kc-cream);
    --dcm-color-text-primary: var(--kc-ink);
    --dcm-color-text-secondary: var(--kc-body);
    --dcm-color-text-inverted: var(--kc-cream);
    --dcm-color-border: var(--kc-border);
    --dcm-color-focus: var(--kc-gold);
    --dcm-color-focus-shadow: var(--kc-gold-focus-shadow);

    /* ── Typography ── */
    --dcm-font-primary: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --dcm-font-secondary: 'Playfair Display', Georgia, serif;

    /* ── Border radius ── */
    --dcm-radius-sm: 8px;
    --dcm-radius-md: 10px;
    --dcm-radius-lg: 14px;
    --dcm-radius-buttons: 999px;
    --dcm-radius-cards: 14px;

    /* ── Status colors ── */
    --dcm-color-status-open: #2E7D32;
    --dcm-color-status-closed: var(--kc-red);
    --dcm-color-status-preorder: var(--kc-amber);
    --dcm-color-status-coming-soon: var(--kc-teal);

    /* ── Header ── */
    --dcm-header-bg: var(--kc-teal-deep);
    --dcm-header-text-color: var(--kc-cream);
    --dcm-header-border-color: transparent;
    --dcm-header-shadow: none;
    --dcm-header-divider-color: var(--kc-border-on-dark);
    /* The host uses this for section headings inside the Shop mega-menu
       ("Categories"), not the cream-on-teal top-level links. Keep it dark
       enough for the light dropdown surface. */
    --dcm-header-nav-title-text-color: var(--kc-teal);

    /* ── Cart button (header pill) ── */
    --dcm-cart-btn-bg-active: var(--kc-gold);
    --dcm-cart-btn-text-active: var(--kc-teal-ink);
    --dcm-cart-btn-bg-empty: rgba(242, 233, 219, 0.12);
    --dcm-cart-btn-text-empty: var(--kc-cream);
    --dcm-cart-btn-border-radius: 999px;

    /* ── Search ── */
    --dcm-search-input-border-color: var(--kc-border);
    --dcm-search-input-border-radius: 999px;
    --dcm-search-input-focus-border-color: var(--kc-gold);
    --dcm-search-input-focus-shadow: 0 1px 5px var(--kc-gold-focus-shadow);

    /* ── Popover / Dropdown ── */
    --dcm-popover-bg: var(--kc-parchment);
    --dcm-popover-item-color: var(--kc-ink);
    --dcm-popover-item-hover-bg: var(--kc-cream);
    --dcm-popover-border-radius: 12px;
    --dcm-popover-shadow: 0 12px 32px rgba(0, 40, 45, 0.18), 0 0 0 1px rgba(201, 148, 3, 0.16);

    /* ── Login nudge ── */
    --dcm-login-nudge-bg: var(--kc-white);
    --dcm-login-nudge-text-color: var(--kc-ink);
    --dcm-login-nudge-link-color: var(--kc-teal);
    --dcm-login-nudge-social-btn-bg: var(--kc-cream);
    --dcm-login-nudge-shadow: 0 6px 20px rgba(0, 40, 45, 0.15);
    --dcm-login-nudge-close-color: var(--kc-body);
    --dcm-login-nudge-apple-icon-color: var(--kc-ink);

    /* ── Info bar ── */
    --dcm-infobar-bg: var(--kc-teal-ink);
    --dcm-infobar-text-color: var(--kc-cream);
    --dcm-infobar-border-color: rgba(242, 233, 219, 0.12);

    /* ── Menu drawer ── */
    --dcm-drawer-bg: var(--kc-parchment);
    --dcm-drawer-status-bg: var(--kc-cream);
    --dcm-drawer-tab-active-color: var(--kc-maroon);
    --dcm-drawer-tab-inactive-color: var(--kc-body);
    --dcm-drawer-accent-color: var(--kc-gold);
    --dcm-drawer-nav-heading-color: var(--kc-ink);
    --dcm-drawer-nav-title-text-color: var(--kc-ink);
    --dcm-drawer-nav-link-color: var(--kc-body);

    /* ── Footer ── */
    --dcm-footer-bg: var(--kc-teal-ink);
    --dcm-footer-text-color: var(--kc-cream);
    --dcm-privacy-footer-bg: var(--kc-teal-ink);
    --dcm-privacy-footer-border-color: rgba(242, 233, 219, 0.12);
    --dcm-privacy-footer-text-color: var(--kc-cream);
    --dcm-privacy-footer-text-hover-color: var(--kc-gold-bright);
    --dcm-privacy-footer-divider-color: rgba(242, 233, 219, 0.12);

    /* ── Banner ── */
    --dcm-banner-border-radius: 18px;

    /* ── Skip link ── */
    --dcm-skip-link-bg: var(--kc-maroon);

    /* ── User / Account ── */
    --dcm-user-btn-name-color: var(--kc-cream);
    --dcm-user-btn-name-border-color: var(--kc-border-on-dark);
    --dcm-account-bg: var(--kc-cream-soft);
    --dcm-account-surface-bg: var(--kc-white);
    --dcm-account-surface-shadow: 0 2px 12px rgba(0, 40, 45, 0.08);
    --dcm-account-nav-color: var(--kc-ink);
    --dcm-account-label-color: var(--kc-body);
    --dcm-account-divider-color: var(--kc-border);
    --dcm-account-icon-fill: var(--kc-cream);
    --dcm-account-icon-accent: var(--kc-gold);
    --dcm-account-icon-stroke: var(--kc-teal);

    /* ── Store status ── */
    --dcm-status-label-color: var(--kc-body);

    /* ── Skeleton / Loading ── */
    --dcm-skeleton-bg: var(--kc-cream);
    --dcm-skeleton-border-color: rgba(0, 56, 64, 0.06);
    --dcm-skeleton-shimmer-from: rgba(201, 148, 3, 0.04);
    --dcm-skeleton-shimmer-to: rgba(201, 148, 3, 0.1);

    /* ── Logged-out CTA ── */
    --dcm-logged-out-cta-bg: var(--kc-cream);
    --dcm-logged-out-cta-border-color: rgba(201, 148, 3, 0.35);
    --dcm-logged-out-cta-border-radius: 14px;
    --dcm-logged-out-cta-text-color: var(--kc-ink);
    --dcm-logged-out-cta-subtext-color: var(--kc-body);
    --dcm-logged-out-cta-link-color: var(--kc-maroon);

    /* ── Breadcrumbs ── */
    --dcm-breadcrumb-link-color: var(--kc-body);
    --dcm-breadcrumb-active-color: var(--kc-ink);
    --dcm-breadcrumb-separator-color: var(--kc-gold);

    /* ── Content header ── */
    --dcm-content-header-text-color: var(--kc-ink);
    --dcm-content-header-border-color: var(--kc-border);
    --dcm-content-header-icon-color: var(--kc-teal);

    /* ── Inline categories ── */
    --dcm-inline-categories-heading-color: var(--kc-body);
    --dcm-inline-categories-divider-color: var(--kc-border);
    --dcm-inline-categories-chip-bg: var(--kc-white);
    --dcm-inline-categories-chip-text-color: var(--kc-ink);
    --dcm-inline-categories-chip-border-color: var(--kc-border);
    --dcm-inline-categories-chip-hover-border-color: var(--kc-gold);

    /* ── Section titles ── */
    --dcm-section-title-color: var(--kc-ink);
    --dcm-section-subtitle-color: var(--kc-body);

    /* ── Categories ── */
    --dcm-categories-card-bg: var(--kc-teal-deep);
    --dcm-categories-card-border-color: var(--kc-teal-deep);
    --dcm-categories-card-text-color: var(--kc-cream);
    --dcm-categories-card-hover-shadow: 0 0 0 2px var(--kc-gold), 0 8px 20px rgba(0, 40, 45, 0.2);
    --dcm-categories-view-all-bg: var(--kc-maroon);
    --dcm-categories-view-all-color: var(--kc-cream);

    /* ── Brands ── */
    --dcm-brands-title-color: var(--kc-ink);
    --dcm-brands-no-results-color: var(--kc-body);
    --dcm-brands-card-bg: var(--kc-white);
    --dcm-brands-card-border-color: var(--kc-border);
    --dcm-brands-card-border-radius: 14px;
    --dcm-brands-card-shadow: 0 2px 12px rgba(0, 40, 45, 0.06);
    --dcm-brands-card-hover-shadow: 0 0 0 2px var(--kc-gold), 0 8px 20px rgba(0, 40, 45, 0.12);
    --dcm-brands-card-name-color: var(--kc-ink);
    --dcm-brands-card-placeholder-color: var(--kc-body);
    --dcm-brands-card-placeholder-bg: var(--kc-cream);

    /* ── Product cards + detail page ── */
    --dcm-product-page-bg: var(--kc-cream-soft);
    --dcm-product-name-color: var(--kc-ink);
    --dcm-product-brand-color: var(--kc-teal);
    --dcm-product-description-color: var(--kc-body);
    --dcm-product-subheading-color: var(--kc-ink);
    --dcm-product-price-color: var(--kc-ink);
    --dcm-product-price-strikethrough-color: var(--kc-body);
    --dcm-product-price-muted-color: var(--kc-body);
    --dcm-product-option-bg: var(--kc-cream);
    --dcm-product-option-border-color: var(--kc-border);
    --dcm-product-option-text-color: var(--kc-ink);
    --dcm-product-input-bg: var(--kc-white);
    --dcm-product-input-border-color: var(--kc-border);
    --dcm-product-detail-text-color: var(--kc-ink);
    --dcm-product-detail-muted-color: var(--kc-body);
    --dcm-product-effect-bg: var(--kc-cream);
    --dcm-product-effect-text-color: var(--kc-body);
    --dcm-product-progress-bg: rgba(201, 148, 3, 0.2);
    --dcm-product-progress-fill: var(--kc-gold);
    --dcm-product-accordion-icon-color: var(--kc-teal);
    --dcm-product-chip-bg: var(--kc-cream);
    --dcm-product-chip-text-color: var(--kc-ink);
    --dcm-product-chip-hover-bg: var(--kc-parchment);

    /* ── Cart drawer ── */
    --dcm-cart-bg: var(--kc-parchment);
    --dcm-cart-content-bg: var(--kc-parchment);
    --dcm-cart-text-color: var(--kc-ink);
    --dcm-cart-text-muted-color: var(--kc-body);
    --dcm-cart-border-color: var(--kc-border);
    --dcm-cart-item-bg: var(--kc-white);
    --dcm-cart-item-border-color: var(--kc-cream);
    --dcm-cart-item-separator-color: var(--kc-cream);
    --dcm-cart-price-color: var(--kc-maroon);
    --dcm-cart-toggle-bg: var(--kc-cream);
    --dcm-cart-toggle-active-bg: var(--kc-white);
    --dcm-cart-backdrop-color: rgba(1, 42, 47, 0.55);

    /* ── Carousel buttons ── */
    --dcm-carousel-btn-bg: var(--kc-teal-deep);
    --dcm-carousel-btn-hover-bg: var(--kc-gold);
    --dcm-carousel-btn-shadow: 0 2px 12px rgba(0, 40, 45, 0.15);
    --dcm-carousel-btn-arrow-color: var(--kc-cream);
    --dcm-carousel-btn-color: var(--kc-cream);

    /* ── Filter sidebar ── */
    --dcm-filter-heading-color: var(--kc-teal);
    --dcm-filter-text-color: var(--kc-ink);
    --dcm-filter-border-color: var(--kc-border);
    --dcm-filter-icon-color: var(--kc-teal);
    --dcm-filter-search-bg: var(--kc-white);
    --dcm-filter-search-border-color: var(--kc-border);
    --dcm-filter-search-text-color: var(--kc-ink);
    --dcm-filter-search-placeholder-color: var(--kc-body);
    --dcm-filter-search-icon-color: var(--kc-teal);

    /* ── Modal ── */
    --dcm-modal-bg: var(--kc-parchment);
    --dcm-modal-text-color: var(--kc-ink);
    --dcm-modal-border-radius: 18px;
    --dcm-modal-shadow: 0 8px 32px rgba(0, 40, 45, 0.2);
    --dcm-modal-footer-bg: var(--kc-cream);
    --dcm-modal-footer-text-color: var(--kc-ink);
    --dcm-modal-close-color: var(--kc-body);
    --dcm-modal-backdrop-color: rgba(1, 42, 47, 0.5);

    /* ── Checkout ── */
    --dcm-checkout-heading-color: var(--kc-ink);
    --dcm-checkout-section-heading-color: var(--kc-ink);
    --dcm-checkout-section-border-color: var(--kc-border);
    --dcm-checkout-text-color: var(--kc-ink);
    --dcm-checkout-text-muted-color: var(--kc-body);
    --dcm-checkout-link-color: var(--kc-teal);
    --dcm-checkout-input-bg: var(--kc-white);
    --dcm-checkout-input-border-color: var(--kc-border);
    --dcm-checkout-summary-bg: var(--kc-teal-deep);
    --dcm-checkout-summary-text-color: var(--kc-cream);
    --dcm-checkout-summary-border-color: rgba(242, 233, 219, 0.14);
    --dcm-checkout-summary-total-color: var(--kc-gold-bright);
    --dcm-checkout-payment-tab-bg: var(--kc-cream);
    --dcm-checkout-payment-tab-border-color: var(--kc-border);
  }

  html {
    background: var(--kc-cream-soft);
  }

  body {
    background: var(--kc-cream-soft);
    color: var(--kc-ink);
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* The hero/nav/footer use a 100vw full-bleed breakout; vw units include
       the vertical scrollbar, so clip the few px of horizontal overflow
       (same fix as cake-house). "clip" is preferred (no new scroll
       container); "hidden" is the fallback for older browsers. */
    overflow-x: hidden;
    overflow-x: clip;
  }