/* =========================================================
   KNDev customer tokens: start
   Maintained automatically by Theme Configurator.
   Existing values are preserved; missing tokens are added on update.
   Source of truth: kndev-global.css token declarations.
   ========================================================= */
:root {
  /* =========================================================
     01. Global brand, typography and layout
     ========================================================= */
  --knd-color-primary: #007f79;
  --knd-color-primary-rgb: 0, 127, 121;
  --knd-color-secondary: #0f766e;
  --knd-color-accent: #f59e0b;
  --knd-color-text: #111827;
  --knd-color-background: #ffffff;
  --knd-color-surface: #f6fbfa;
  --knd-color-border: #d7e7e4;
  --knd-font-body: inherit;
  --knd-font-heading: inherit;
  --knd-radius-sm: 4px;
  --knd-radius-md: 8px;
  --knd-radius-lg: 16px;
  --knd-container-width: 1320px;
  --knd-shadow-card: 0 8px 30px rgb(0 0 0 / 8%);

  /* =========================================================
     02. Cards, surfaces and shared form controls
     ========================================================= */
  --knd-card-bg: #ffffff;
  --knd-card-color: var(--knd-color-text);
  --knd-card-border-width: 1px;
  --knd-card-border-color: var(--knd-color-border);
  --knd-card-border-radius: var(--knd-radius-lg);
  --knd-card-shadow: var(--knd-shadow-card);
  --knd-card-padding: clamp(18px, 2.4vw, 28px);
  --knd-card-body-padding: clamp(22px, 2.6vw, 34px);
  --knd-input-bg: #ffffff;
  --knd-input-color: var(--knd-color-text);
  --knd-input-border-color: var(--knd-color-border);
  --knd-input-focus-border-color: var(--knd-color-primary);
  --knd-input-border-radius: var(--knd-radius-md);
  --knd-input-placeholder-color: #b7c0cf;
  --knd-input-placeholder-opacity: .72;
  --knd-input-default-value-color: var(--knd-input-placeholder-color);

  /* =========================================================
     03. Buttons, icon buttons and back to top
     ========================================================= */
  --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: 999px;
  --knd-button-font-weight: 700;
  --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-hover-bg: #f7f8f8;
  --knd-icon-button-hover-color: currentColor;
  --knd-backtotop-size: var(--knd-icon-button-size);
  --knd-backtotop-bg: #111827;
  --knd-backtotop-color: #ffffff;
  --knd-backtotop-border-width: 0px;
  --knd-backtotop-border-color: transparent;
  --knd-backtotop-radius: var(--knd-icon-button-radius);
  --knd-backtotop-hover-bg: var(--knd-color-primary);
  --knd-backtotop-hover-color: #ffffff;
  --knd-backtotop-shadow: 0 12px 32px rgb(15 23 42 / 14%);
  --knd-backtotop-right: 24px;
  --knd-backtotop-bottom: 24px;

  /* =========================================================
     04. Header global, zones and selectors
     ========================================================= */
  --knd-header-bg: #ffffff;
  --knd-header-color: inherit;
  --knd-header-link-color: inherit;
  --knd-header-link-hover-color: inherit;
  --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-top-bg: var(--knd-header-bg);
  --knd-header-top-color: var(--knd-header-color);
  --knd-header-main-bg: var(--knd-header-bg);
  --knd-header-main-color: var(--knd-header-color);
  --knd-header-nav-bg: var(--knd-header-bg);
  --knd-header-nav-color: var(--knd-header-color);
  --knd-header-mobile-bg: var(--knd-header-bg);
  --knd-header-mobile-color: var(--knd-header-color);
  --knd-header-gap: 1rem;
  --knd-header-slot-gap: .75rem;
  --knd-header-main-padding-x: 0px;
  --knd-header-main-padding-y: 0px;
  --knd-header-main-padding-x-desktop: var(--knd-header-main-padding-x);
  --knd-header-main-padding-y-desktop: var(--knd-header-main-padding-y);
  --knd-header-main-padding-x-mobile: var(--knd-header-main-padding-x);
  --knd-header-main-padding-y-mobile: var(--knd-header-main-padding-y);
  --knd-header-top-min-height: 38px;
  --knd-header-main-min-height-desktop: 82px;
  --knd-header-main-min-height-mobile: 72px;

  /* =========================================================
     08. Footer global and footer contact
     ========================================================= */
  --knd-footer-bg: #0f172a;
  --knd-footer-color: #ffffff;
  --knd-footer-link-color: #ffffff;
  --knd-footer-link-hover-color: var(--knd-color-primary, #007f79);
  --knd-footer-border-width: 0px;
  --knd-footer-border-color: transparent;
  --knd-footer-bottom-bg: var(--knd-footer-bg);
  --knd-footer-bottom-color: var(--knd-footer-color);
  --knd-footer-bottom-font-size: 12px;
  --knd-footer-bottom-line-height: 1.45;
  --knd-footer-bottom-padding-y: 10px;
  --knd-footer-bottom-padding-y-mobile: 12px;
  --knd-footer-bottom-padding-x: 16px;
  --knd-footer-bottom-margin: 0;
  --knd-footer-bottom-gap: 16px;
  --knd-footer-bottom-mobile-gap: 4px;
  --knd-footer-bottom-container-width: var(--knd-container-width);
  --knd-footer-bottom-text-align: left;
  --knd-footer-bottom-letter-spacing: normal;
  --knd-footer-bottom-text-transform: none;
  --knd-footer-bottom-border-width: 0px;
  --knd-footer-bottom-border-color: transparent;
  --knd-footer-bottom-link-color: currentColor;
  --knd-footer-bottom-link-hover-color: currentColor;
  --knd-footer-bottom-link-decoration: none;
  --knd-footer-bottom-link-hover-decoration: underline;
  --knd-footer-bottom-credit-opacity: .86;
  --knd-footer-bottom-prefix-opacity: .72;

  /* =========================================================
     12. Forms, alerts and misc
     ========================================================= */
  --knd-ui-chevron-size: 10px;
  --knd-ui-chevron-icon-size: 18px;
  --knd-ui-chevron-stroke-width: 2px;
  --knd-add-to-cart-bg: var(--knd-color-success, #188251);
  --knd-add-to-cart-color: #ffffff;
  --knd-add-to-cart-hover-bg: color-mix(in srgb, var(--knd-add-to-cart-bg) 82%, #000000);
  --knd-add-to-cart-hover-color: #ffffff;
  --knd-add-to-cart-icon-display: none;
  --knd-add-to-cart-icon-gap: 0px;
  --knd-sticky-contact-size: 46px;
  --knd-sticky-contact-size-mobile: 44px;
  --knd-sticky-contact-bottom: 24px;
  --knd-sticky-contact-bottom-mobile: calc(var(--knd-backtotop-bottom, 16px) + var(--knd-backtotop-size, var(--knd-icon-button-size, 44px)) + var(--knd-sticky-contact-gap, 10px));
  --knd-sticky-contact-right: 24px;
  --knd-sticky-contact-left: 24px;
  --knd-sticky-contact-gap: 10px;
  --knd-sticky-contact-radius: var(--knd-radius-pill, 999px);
  --knd-sticky-contact-bg: #ffffff;
  --knd-sticky-contact-bg-hover: var(--knd-color-surface, #f6fbfa);
  --knd-sticky-contact-color: var(--knd-color-text, #111827);
  --knd-sticky-contact-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  --knd-sticky-contact-z-index: 20050;
  --knd-sticky-contact-border-width: 1px;
  --knd-sticky-contact-border-color: var(--knd-color-border, #dbe3e8);
  --knd-sticky-contact-icon-size: 20px;
  --knd-sticky-contact-custom-bg: #ffffff;
  --knd-sticky-contact-custom-color: var(--knd-color-text, #111827);
}
/* =========================================================
   KNDev customer tokens: end
   ========================================================= */

/* =========================================================
   CUSTOMER CUSTOM CSS START
   Write shop-specific selectors below this line.
   This area is preserved by KNDev System updates.
   ========================================================= */