/*
 * KNDev generated/customer token layer.
 * This file is editable and preserved by KNDev System updates.
 * Load order: kndev-global.css -> module front.css -> kndev-generated.css -> customer.css.
 * Recommended use: set --knd-* variables here. Use customer.css for one-off CSS exceptions.
 */

:root {
  /* =========================================================
     01. Global brand, typography and layout
     ========================================================= */
  --knd-color-primary: #007f79;
  --knd-color-secondary: #289a9b;
  --knd-color-accent: #e35900;
  --knd-color-text: #2b2b2c;
  --knd-color-muted: #6b7280;
  --knd-color-background: #ffffff;
  --knd-color-surface: #f7f8f8;
  --knd-color-border: #dbe3e8;

  --knd-font-body: inherit;
  --knd-font-heading: inherit;
  --knd-font-size-base: 16px;
  --knd-line-height-base: 1.5;
  --knd-heading-font-weight: 700;
  --knd-body-font-weight: 400;

  --knd-container-width: 1320px;
  --knd-container-gutter: 16px;
  --knd-section-padding-y: clamp(2.5rem, 5vw, 5rem);
  --knd-section-padding-x: 0px;

  --knd-radius-sm: 4px;
  --knd-radius-md: 8px;
  --knd-radius-lg: 16px;
  --knd-radius-pill: 999px;
  --knd-shadow-card: 0 8px 30px rgb(0 0 0 / 8%);
  --knd-shadow-dropdown: 0 18px 45px rgb(0 0 0 / 12%);
  --knd-shadow-panel: 0 20px 60px rgb(0 0 0 / 18%);

  /* =========================================================
     02. Buttons and shared icon buttons
     ========================================================= */
  --knd-button-bg: var(--knd-color-primary);
  --knd-button-color: #ffffff;
  --knd-button-border-color: var(--knd-color-primary);
  --knd-button-hover-bg: var(--knd-color-secondary);
  --knd-button-hover-color: #ffffff;
  --knd-button-hover-border-color: var(--knd-color-secondary);
  --knd-button-border-radius: var(--knd-radius-pill);
  --knd-button-padding-y: .75rem;
  --knd-button-padding-x: 1.2rem;
  --knd-button-font-weight: 700;
  --knd-button-text-decoration: none;

  --knd-icon-button-size: 44px;
  --knd-icon-button-bg: #ffffff;
  --knd-icon-button-color: currentColor;
  --knd-icon-button-border-width: 1px;
  --knd-icon-button-border-color: var(--knd-color-border);
  --knd-icon-button-radius: 999px;
  --knd-icon-button-shadow: none;
  --knd-icon-button-hover-bg: #f7f8f8;
  --knd-icon-button-hover-color: currentColor;
  --knd-icon-button-hover-border-color: var(--knd-icon-button-border-color);

  /* =========================================================
     03. Header global and zones
     ========================================================= */
  --knd-header-bg: #ffffff;
  --knd-header-color: inherit;
  --knd-header-link-color: inherit;
  --knd-header-link-hover-color: var(--knd-color-primary);
  --knd-header-icon-color: currentColor;
  --knd-header-font-weight: inherit;
  --knd-header-border-width: 0px;
  --knd-header-border-color: transparent;
  --knd-header-border-style: solid;
  --knd-header-shadow: none;
  --knd-header-gap: 1rem;
  --knd-header-slot-gap: .75rem;

  --knd-header-banner-bg: var(--knd-header-bg);
  --knd-header-banner-color: var(--knd-header-color);
  --knd-header-banner-link-color: var(--knd-header-link-color);
  --knd-header-banner-hover-color: var(--knd-header-link-hover-color);
  --knd-header-banner-height-desktop: auto;
  --knd-header-banner-height-mobile: auto;
  --knd-header-banner-bg-mobile: var(--knd-header-banner-bg);
  --knd-header-banner-color-mobile: var(--knd-header-banner-color);
  --knd-header-banner-link-color-mobile: var(--knd-header-banner-link-color);
  --knd-header-banner-hover-color-mobile: var(--knd-header-banner-hover-color);

  --knd-header-topbar-bg: var(--knd-header-bg);
  --knd-header-topbar-color: var(--knd-header-color);
  --knd-header-topbar-link-color: var(--knd-header-link-color);
  --knd-header-topbar-hover-color: var(--knd-header-link-hover-color);
  --knd-header-topbar-height-desktop: 38px;
  --knd-header-topbar-height-mobile: auto;
  --knd-header-topbar-border-width: var(--knd-header-border-width);
  --knd-header-topbar-border-color: var(--knd-header-border-color);
  --knd-header-topbar-bg-mobile: var(--knd-header-topbar-bg);
  --knd-header-topbar-color-mobile: var(--knd-header-topbar-color);
  --knd-header-topbar-link-color-mobile: var(--knd-header-topbar-link-color);
  --knd-header-topbar-hover-color-mobile: var(--knd-header-topbar-hover-color);

  --knd-header-main-bg: var(--knd-header-bg);
  --knd-header-main-color: var(--knd-header-color);
  --knd-header-main-link-color: var(--knd-header-link-color);
  --knd-header-main-hover-color: var(--knd-header-link-hover-color);
  --knd-header-main-height-desktop: 82px;
  --knd-header-main-height-mobile: 72px;
  --knd-header-main-border-width: var(--knd-header-border-width);
  --knd-header-main-border-color: var(--knd-header-border-color);
  --knd-header-main-bg-mobile: var(--knd-header-main-bg);
  --knd-header-main-color-mobile: var(--knd-header-main-color);
  --knd-header-main-link-color-mobile: var(--knd-header-main-link-color);
  --knd-header-main-hover-color-mobile: var(--knd-header-main-hover-color);

  --knd-header-nav-bg: var(--knd-header-bg);
  --knd-header-nav-color: var(--knd-header-color);
  --knd-header-nav-link-color: var(--knd-header-link-color);
  --knd-header-nav-hover-color: var(--knd-header-link-hover-color);
  --knd-header-nav-height-desktop: 54px;
  --knd-header-nav-height-mobile: auto;
  --knd-header-nav-border-width: var(--knd-header-border-width);
  --knd-header-nav-border-color: var(--knd-header-border-color);
  --knd-header-nav-bg-mobile: var(--knd-header-nav-bg);
  --knd-header-nav-color-mobile: var(--knd-header-nav-color);
  --knd-header-nav-link-color-mobile: var(--knd-header-nav-link-color);
  --knd-header-nav-hover-color-mobile: var(--knd-header-nav-hover-color);

  --knd-header-navfull-bg: var(--knd-header-bg);
  --knd-header-navfull-color: var(--knd-header-color);
  --knd-header-navfull-link-color: var(--knd-header-link-color);
  --knd-header-navfull-hover-color: var(--knd-header-link-hover-color);
  --knd-header-navfull-height-desktop: 48px;
  --knd-header-navfull-height-mobile: auto;
  --knd-header-navfull-bg-mobile: var(--knd-header-navfull-bg);
  --knd-header-navfull-color-mobile: var(--knd-header-navfull-color);
  --knd-header-navfull-link-color-mobile: var(--knd-header-navfull-link-color);
  --knd-header-navfull-hover-color-mobile: var(--knd-header-navfull-hover-color);

  --knd-header-sticky-bg: var(--knd-header-bg);
  --knd-header-sticky-color: var(--knd-header-color);
  --knd-header-sticky-shadow: 0 8px 24px rgb(0 0 0 / 8%);

  --knd-logo-width-desktop: 220px;
  --knd-logo-width-mobile: 160px;

  /* =========================================================
     04. Footer
     ========================================================= */
  --knd-footer-bg: #0f172a;
  --knd-footer-color: #ffffff;
  --knd-footer-link-color: #ffffff;
  --knd-footer-link-hover-color: #8df2c2;
  --knd-footer-border-width: 0px;
  --knd-footer-border-color: transparent;
  --knd-footer-shadow: none;
  --knd-footer-padding-top: 48px;
  --knd-footer-padding-bottom: 24px;
  --knd-footer-heading-color: var(--knd-footer-color);
  --knd-footer-heading-font-weight: 700;
  --knd-footer-column-gap: 32px;
  --knd-footer-bottom-bg: var(--knd-footer-bg);
  --knd-footer-bottom-color: var(--knd-footer-color);
  --knd-footer-bottom-border-width: 0px;
  --knd-footer-bottom-border-color: transparent;

  /* =========================================================
     05. Menu module
     ========================================================= */
  --knd-menu-bg: transparent;
  --knd-menu-color: var(--knd-header-link-color);
  --knd-menu-link-color: var(--knd-menu-color);
  --knd-menu-link-hover-color: var(--knd-header-link-hover-color);
  --knd-menu-link-active-color: var(--knd-menu-link-color);
  --knd-menu-link-text-decoration: none;
  --knd-menu-link-hover-text-decoration: none;
  --knd-menu-font-size: 16px;
  --knd-menu-font-weight: 500;
  --knd-menu-text-transform: none;
  --knd-menu-item-bg: transparent;
  --knd-menu-item-hover-bg: transparent;
  --knd-menu-item-active-bg: transparent;
  --knd-menu-item-border-width: 0px;
  --knd-menu-item-border-color: transparent;
  --knd-menu-item-border-radius: 0px;
  --knd-menu-item-padding-y: 10px;
  --knd-menu-item-padding-x: 14px;
  --knd-menu-item-line-height: auto;
  --knd-menu-wrapper-margin-y: 0px;
  --knd-menu-wrapper-margin-x: 0px;
  --knd-menu-wrapper-padding-y: 0px;
  --knd-menu-wrapper-padding-x: 0px;
  --knd-menu-border-width: 0px;
  --knd-menu-border-color: transparent;
  --knd-menu-border-radius: 0px;
  --knd-menu-shadow: none;
  --knd-menu-top-desktop: 0px;
  --knd-menu-top-mobile: 0px;

  --knd-menu-toggle-size: var(--knd-icon-button-size);
  --knd-menu-toggle-bg: var(--knd-icon-button-bg);
  --knd-menu-toggle-color: var(--knd-icon-button-color);
  --knd-menu-toggle-border-width: var(--knd-icon-button-border-width);
  --knd-menu-toggle-border-color: var(--knd-icon-button-border-color);
  --knd-menu-toggle-radius: var(--knd-icon-button-radius);
  --knd-menu-toggle-shadow: var(--knd-icon-button-shadow);
  --knd-menu-toggle-hover-bg: var(--knd-icon-button-hover-bg);
  --knd-menu-toggle-hover-color: var(--knd-icon-button-hover-color);
  --knd-menu-toggle-hover-border-color: var(--knd-icon-button-hover-border-color);

  --knd-menu-dropdown-bg: #ffffff;
  --knd-menu-dropdown-color: #111111;
  --knd-menu-dropdown-link-color: var(--knd-menu-dropdown-color);
  --knd-menu-dropdown-link-hover-color: var(--knd-color-primary);
  --knd-menu-dropdown-hover-bg: transparent;
  --knd-menu-dropdown-border-width: 0px;
  --knd-menu-dropdown-border-color: transparent;
  --knd-menu-dropdown-border-style: solid;
  --knd-menu-dropdown-border: var(--knd-menu-dropdown-border-width) var(--knd-menu-dropdown-border-style) var(--knd-menu-dropdown-border-color);
  --knd-menu-dropdown-radius: 0px;
  --knd-menu-dropdown-shadow: var(--knd-shadow-dropdown);
  --knd-menu-dropdown-padding: 1rem;
  --knd-menu-dropdown-min-width: 220px;
  --knd-menu-dropdown-item-gap: .65rem;
  --knd-menu-dropdown-title-font-size: inherit;
  --knd-menu-dropdown-title-font-weight: inherit;
  --knd-menu-dropdown-title-transform: none;
  --knd-menu-dropdown-sub-font-size: .92em;
  --knd-menu-dropdown-sub-transform: none;
  --knd-menu-dropdown-sub-prefix: "";
  --knd-menu-dropdown-container-width: var(--knd-container-width);

  --knd-menu-mobile-overlay-bg: rgba(15,23,42,.48);
  --knd-menu-mobile-panel-bg: #ffffff;
  --knd-menu-mobile-panel-color: #111111;
  --knd-menu-mobile-panel-width: min(440px, 100vw);
  --knd-menu-mobile-panel-border-width: 0px;
  --knd-menu-mobile-panel-border-color: transparent;
  --knd-menu-mobile-panel-border-radius: 0px;
  --knd-menu-mobile-panel-shadow: var(--knd-shadow-panel);
  --knd-menu-mobile-panel-header-bg: transparent;
  --knd-menu-mobile-panel-header-color: var(--knd-menu-mobile-panel-color);
  --knd-menu-mobile-panel-header-border-color: var(--knd-color-border);
  --knd-menu-mobile-panel-title-font-size: 1.2rem;
  --knd-menu-mobile-close-bg: var(--knd-color-surface);
  --knd-menu-mobile-close-color: var(--knd-menu-mobile-panel-color);
  --knd-menu-mobile-close-border-color: var(--knd-color-border);
  --knd-menu-mobile-item-bg: transparent;
  --knd-menu-mobile-item-color: var(--knd-menu-mobile-panel-color);
  --knd-menu-mobile-item-hover-bg: transparent;
  --knd-menu-mobile-item-hover-color: var(--knd-menu-mobile-item-color);
  --knd-menu-mobile-item-active-bg: transparent;
  --knd-menu-mobile-item-active-color: var(--knd-menu-mobile-item-color);
  --knd-menu-mobile-item-font-size: inherit;
  --knd-menu-mobile-item-font-weight: inherit;
  --knd-menu-mobile-item-text-transform: none;
  --knd-menu-mobile-item-line-height: 44px;
  --knd-menu-mobile-item-padding-y: .8rem;
  --knd-menu-mobile-item-padding-x: 1.25rem;
  --knd-menu-mobile-item-border-width: 0px;
  --knd-menu-mobile-item-border-color: transparent;
  --knd-menu-mobile-item-border-radius: 0px;

  /* Legacy aliases used by older menu markup/front.css. Keep these controlled from the tokens above. */
  --knd-menu-text: var(--knd-menu-link-color);
  --knd-menu-hover-text: var(--knd-menu-link-hover-color);
  --knd-menu-hover-bg: var(--knd-menu-item-hover-bg);
  --knd-menu-active-text: var(--knd-menu-link-active-color);
  --knd-menu-active-bg: var(--knd-menu-item-active-bg);
  --knd-menu-padding-y: var(--knd-menu-item-padding-y);
  --knd-menu-padding-x: var(--knd-menu-item-padding-x);
  --knd-dropdown-bg: var(--knd-menu-dropdown-bg);
  --knd-dropdown-text: var(--knd-menu-dropdown-color);
  --knd-dropdown-hover-bg: var(--knd-menu-dropdown-hover-bg);
  --knd-dropdown-hover-text: var(--knd-menu-dropdown-link-hover-color);
  --knd-dropdown-border: var(--knd-menu-dropdown-border);
  --knd-dropdown-radius: var(--knd-menu-dropdown-radius);
  --knd-dropdown-shadow: var(--knd-menu-dropdown-shadow);
  --knd-dropdown-item-gap: var(--knd-menu-dropdown-item-gap);
  --knd-dropdown-title-font-size: var(--knd-menu-dropdown-title-font-size);
  --knd-dropdown-title-transform: var(--knd-menu-dropdown-title-transform);
  --knd-dropdown-sub-font-size: var(--knd-menu-dropdown-sub-font-size);
  --knd-dropdown-sub-transform: var(--knd-menu-dropdown-sub-transform);
  --knd-dropdown-sub-prefix: var(--knd-menu-dropdown-sub-prefix);
  --knd-mobile-overlay-bg: var(--knd-menu-mobile-overlay-bg);
  --knd-mobile-panel-bg: var(--knd-menu-mobile-panel-bg);
  --knd-mobile-panel-text: var(--knd-menu-mobile-panel-color);
  --knd-mobile-panel-width: var(--knd-menu-mobile-panel-width);
  --knd-mobile-panel-border-width: var(--knd-menu-mobile-panel-border-width);
  --knd-mobile-panel-border-color: var(--knd-menu-mobile-panel-border-color);
  --knd-mobile-panel-border-radius: var(--knd-menu-mobile-panel-border-radius);
  --knd-mobile-panel-shadow: var(--knd-menu-mobile-panel-shadow);
  --knd-mobile-panel-header-bg: var(--knd-menu-mobile-panel-header-bg);
  --knd-mobile-panel-header-text: var(--knd-menu-mobile-panel-header-color);
  --knd-mobile-panel-header-border: var(--knd-menu-mobile-panel-header-border-color);
  --knd-mobile-panel-close-bg: var(--knd-menu-mobile-close-bg);
  --knd-mobile-panel-close-color: var(--knd-menu-mobile-close-color);
  --knd-mobile-panel-close-border: var(--knd-menu-mobile-close-border-color);
  --knd-mobile-item-bg: var(--knd-menu-mobile-item-bg);
  --knd-mobile-item-text: var(--knd-menu-mobile-item-color);
  --knd-mobile-item-hover-bg: var(--knd-menu-mobile-item-hover-bg);
  --knd-mobile-item-hover-text: var(--knd-menu-mobile-item-hover-color);
  --knd-mobile-item-active-bg: var(--knd-menu-mobile-item-active-bg);
  --knd-mobile-item-active-text: var(--knd-menu-mobile-item-active-color);
  --knd-mobile-item-font-size: var(--knd-menu-mobile-item-font-size);
  --knd-mobile-item-font-weight: var(--knd-menu-mobile-item-font-weight);
  --knd-mobile-item-text-transform: var(--knd-menu-mobile-item-text-transform);
  --knd-mobile-item-line-height: var(--knd-menu-mobile-item-line-height);
  --knd-mobile-item-padding-y: var(--knd-menu-mobile-item-padding-y);
  --knd-mobile-item-padding-x: var(--knd-menu-mobile-item-padding-x);
  --knd-mobile-item-border-width: var(--knd-menu-mobile-item-border-width);
  --knd-mobile-item-border-color: var(--knd-menu-mobile-item-border-color);
  --knd-mobile-item-border-radius: var(--knd-menu-mobile-item-border-radius);

  /* =========================================================
     06. Search Pro module
     ========================================================= */
  --knd-search-input-bg: #ffffff;
  --knd-search-input-color: #111111;
  --knd-search-input-border-color: var(--knd-color-border);
  --knd-search-input-border-width: 1px;
  --knd-search-input-radius: var(--knd-radius-pill);
  --knd-search-input-height: 44px;
  --knd-search-input-width-desktop: 320px;
  --knd-search-input-width-mobile: 100%;
  --knd-search-button-bg: var(--knd-button-bg);
  --knd-search-button-color: var(--knd-button-color);
  --knd-search-button-hover-bg: var(--knd-button-hover-bg);
  --knd-search-button-hover-color: var(--knd-button-hover-color);
  --knd-search-icon-bg: var(--knd-icon-button-bg);
  --knd-search-icon-color: var(--knd-icon-button-color);
  --knd-search-bg: var(--knd-search-input-bg);
  --knd-search-text: var(--knd-search-input-color);
  --knd-search-border: var(--knd-search-input-border-color);
  --knd-search-primary: var(--knd-search-button-bg);
  --knd-search-primary-hover: var(--knd-search-button-hover-bg);
  --knd-search-results-bg: #ffffff;
  --knd-search-results-color: var(--knd-color-text);
  --knd-search-results-border-color: var(--knd-color-border);
  --knd-search-results-shadow: var(--knd-shadow-dropdown);

  /* =========================================================
     07. Cart Dropdown module
     ========================================================= */
  --knd-cart-icon-size: var(--knd-icon-button-size);
  --knd-cart-icon-bg: var(--knd-icon-button-bg);
  --knd-cart-icon-color: var(--knd-icon-button-color);
  --knd-cart-icon-border-color: var(--knd-icon-button-border-color);
  --knd-cart-icon-radius: var(--knd-icon-button-radius);
  --knd-cart-panel-bg: #ffffff;
  --knd-cart-panel-color: #111111;
  --knd-cart-panel-width: 420px;
  --knd-cart-panel-shadow: var(--knd-shadow-panel);
  --knd-cart-badge-bg: #0f7b50;
  --knd-cart-badge-color: #ffffff;
  --knd-cartdrawer-width: var(--knd-cart-panel-width);
  --knd-cartdrawer-z-index: 10020;
  --knd-cartdrawer-bg: var(--knd-cart-panel-bg);
  --knd-cartdrawer-text: var(--knd-cart-panel-color);
  --knd-cartdrawer-muted: var(--knd-color-muted);
  --knd-cartdrawer-border: var(--knd-color-border);
  --knd-cartdrawer-primary: var(--knd-color-primary);
  --knd-cartdrawer-primary-hover: var(--knd-color-secondary);
  --knd-cartdrawer-soft: var(--knd-color-surface);
  --knd-cartdrawer-success: #16a34a;
  --knd-cartdrawer-radius: var(--knd-radius-lg);
  --knd-cartdrawer-shadow: var(--knd-cart-panel-shadow);

  /* =========================================================
     08. Breadcrumb
     ========================================================= */
  --knd-breadcrumb-bg: transparent;
  --knd-breadcrumb-color: var(--knd-color-muted);
  --knd-breadcrumb-link-color: var(--knd-color-muted);
  --knd-breadcrumb-link-hover-color: var(--knd-color-primary);
  --knd-breadcrumb-font-size: 14px;
  --knd-breadcrumb-padding-y: 12px;
  --knd-breadcrumb-padding-x: 0px;

  /* =========================================================
     09. Category page and product grids
     ========================================================= */
  --knd-category-bg: var(--knd-color-background);
  --knd-category-title-color: var(--knd-color-text);
  --knd-category-description-color: var(--knd-color-text);
  --knd-category-sidebar-bg: var(--knd-color-surface);
  --knd-category-sidebar-border-color: var(--knd-color-border);

  --knd-product-grid-gap: 24px;
  --knd-products-per-row-xs: 2;
  --knd-products-per-row-sm: 2;
  --knd-products-per-row-md: 3;
  --knd-products-per-row-lg: 4;
  --knd-products-per-row-xl: 4;
  --knd-products-per-row-xxl: 4;

  --knd-product-card-bg: #ffffff;
  --knd-product-card-color: var(--knd-color-text);
  --knd-product-card-border-width: 1px;
  --knd-product-card-border-color: var(--knd-color-border);
  --knd-product-card-border-radius: var(--knd-radius-md);
  --knd-product-card-shadow: none;
  --knd-product-card-inner-shadow: none;
  --knd-product-card-hover-shadow: var(--knd-shadow-card);
  --knd-product-card-padding: 16px;
  --knd-product-card-image-bg: #ffffff;
  --knd-product-card-image-radius: var(--knd-radius-sm);
  --knd-product-title-color: var(--knd-color-text);
  --knd-product-title-hover-color: var(--knd-color-primary);
  --knd-product-title-font-size: 16px;
  --knd-product-title-font-weight: 600;
  --knd-product-price-color: var(--knd-color-text);
  --knd-product-price-font-size: 18px;
  --knd-product-price-font-weight: 700;
  --knd-product-regular-price-color: var(--knd-color-muted);
  --knd-product-flags-bg: var(--knd-color-primary);
  --knd-product-flags-color: #ffffff;

  /* =========================================================
     10. Product page
     ========================================================= */
  --knd-product-page-bg: var(--knd-color-background);
  --knd-product-page-title-color: var(--knd-color-text);
  --knd-product-page-price-color: var(--knd-color-text);
  --knd-product-page-price-font-size: clamp(24px, 3vw, 36px);
  --knd-product-page-price-font-weight: 700;
  --knd-product-page-summary-color: var(--knd-color-text);
  --knd-product-page-gallery-bg: #ffffff;
  --knd-product-page-gallery-radius: var(--knd-radius-lg);

  /* =========================================================
     11. Forms, alerts and content blocks
     ========================================================= */
  --knd-form-input-bg: #ffffff;
  --knd-form-input-color: var(--knd-color-text);
  --knd-form-input-border-color: var(--knd-color-border);
  --knd-form-input-border-width: 1px;
  --knd-form-input-radius: var(--knd-radius-md);
  --knd-form-input-height: 44px;
  --knd-form-label-color: var(--knd-color-text);
  --knd-alert-bg: var(--knd-color-surface);
  --knd-alert-color: var(--knd-color-text);
  --knd-alert-border-color: var(--knd-color-border);
}