/* kms-ds.css - KMS design system v1: maps the EXISTING components of the site onto the tokens in kms-tokens.css
   (KAN-1344, UX/UI audit 29.10.2026). Loaded in <head> after kms-tokens.css only while the theme setting
   "kms_ds_components" is on (default on; Theme settings -> KMS design system). Off = the previous look, no deploy.

   Inventory (live crawl of the 37 audit pages, 29.10.2026): 30 lime / pink button classes with 7 text colours on lime
   (incl. white and lime-on-lime), 9 radii (6-14 px + pill), Geist 600-800 and Geist Mono UPPERCASE. Here every
   primary/accent button gets: text --kms-on-accent, radius --kms-radius-md (small ones --kms-radius-sm),
   Geist 700 sentence case, one hover (a touch lighter + shadow + 1px lift), active (pressed), focus-visible (ring).
   Fill colours are NOT touched (they are already the one lime #C6FF3A / pink #FF2E88 after the hex clean-up),
   heights and paddings are NOT touched (no layout change).

   Specificity: the theme's override layers use html:not(#k..)x5 + !important and section <style> blocks in <body>,
   so these rules use six :not(#kds) and !important. Do not copy that pattern into new code - use the .kms-btn classes. */

/* ------------------------------------------------------------------ primary (lime) + accent (pink) buttons */
html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body :is(
  .kh-btn--fill, .kh-btn--pink, .kx-btn--lime, .ktl-btn--lime, .ktl-btn--pink, .kaa-btn--fill, .kacf-btn,
  .kcmp-cta--lime, .kms-at__btn, .kms-bc-trial__btn, .kms-cn__btn--fill, .kms-cta__btn, .kms-pcta__main,
  .kms-pg-cta-btn, .kms-ptw__btn--fill, .kms-sn__btn, .kmsct__btn--fill, .ksb-pro-btn, .ksb-btn-primary,
  .kca__go, .kcall__go, .kms-cc__try, .kms-paa__btn, .kms-hz__cta, .kms-labb__btn,
  .cart-items__empty-button, .cart__checkout-button, .kms-404__search button[type=submit],
  .kms-chero__search button[type=submit],
  .shopify-section-group-footer-group form button[type=submit]
) {
  color: var(--kms-on-accent) !important;
  -webkit-text-fill-color: var(--kms-on-accent) !important;
  border-radius: var(--kms-radius-md) !important;
  font-family: var(--kms-font-text) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: var(--kms-btn-transition), filter .12s ease !important;
}
/* white / lime text on lime or pink was 1.18:1 / 1:1 (CHECKOUT, SEARCH on 404, "Try free for 7 days" in articles):
   the fill is forced to the token too, so the pair is always lime + #0C0D0F */
html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body :is(.kms-at__btn, .cart__checkout-button, .kms-404__search button[type=submit], .kca__go, .kcall__go) {
  background-color: var(--kms-lime) !important; background-image: none !important; border-color: var(--kms-lime) !important;
}
/* small buttons (36-40 px): radius sm */
html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body :is(.kms-cc__try, .kms-paa__btn, .kms-hz__cta, .kms-sn__btn, .ktl-btn--sm) {
  border-radius: var(--kms-radius-sm) !important;
}
html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body :is(
  .kh-btn--fill, .kh-btn--pink, .kx-btn--lime, .ktl-btn--lime, .ktl-btn--pink, .kaa-btn--fill, .kacf-btn,
  .kcmp-cta--lime, .kms-at__btn, .kms-bc-trial__btn, .kms-cn__btn--fill, .kms-cta__btn, .kms-pcta__main,
  .kms-pg-cta-btn, .kms-ptw__btn--fill, .kms-sn__btn, .kmsct__btn--fill, .ksb-pro-btn, .ksb-btn-primary,
  .kca__go, .kcall__go, .kms-cc__try, .kms-paa__btn, .kms-hz__cta, .kms-labb__btn,
  .cart-items__empty-button, .cart__checkout-button, .kms-404__search button[type=submit],
  .kms-chero__search button[type=submit],
  .shopify-section-group-footer-group form button[type=submit]
):is(:hover) {
  filter: brightness(1.08) !important;
  box-shadow: var(--kms-btn-shadow-hover) !important;
  transform: translateY(-1px) !important;
}
html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body :is(.kh-btn--pink, .ktl-btn--pink, .kms-cc__try):hover {
  box-shadow: 0 8px 24px rgba(255, 46, 136, .25) !important;
}

/* ------------------------------------------------------------------ secondary (outline) buttons */
html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body :is(
  .kh-btn--ghost, .kx-btn--ghost, .ktl-btn--ghost, .kaa-btn--ghost, .kaa-btn--trial, .kaa-btn--mid, .kcmp-cta:not(.kcmp-cta--lime),
  .kms-ptw__btn--ghost, .kms-pcta__try, .kms-offer30__btn, .kms-sf__main, .kmsct__btn:not(.kmsct__btn--fill), .kms-cn__btn:not(.kms-cn__btn--fill)
) {
  border-radius: var(--kms-radius-md) !important;
  font-family: var(--kms-font-text) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: var(--kms-btn-transition) !important;
}
html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body :is(
  .kh-btn--ghost, .kx-btn--ghost, .ktl-btn--ghost, .kaa-btn--ghost, .kaa-btn--trial, .kaa-btn--mid, .kcmp-cta:not(.kcmp-cta--lime),
  .kms-ptw__btn--ghost, .kms-pcta__try, .kms-offer30__btn, .kms-sf__main, .kmsct__btn:not(.kmsct__btn--fill), .kms-cn__btn:not(.kms-cn__btn--fill)
):hover {
  background-color: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .32) !important;
  transform: translateY(-1px) !important;
}

/* ------------------------------------------------------------------ pressed + keyboard focus, every button */
html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body :is(
  .kh-btn, .kx-btn, .ktl-btn, .kaa-btn, .kacf-btn, .kcmp-cta, .kms-at__btn, .kms-bc-trial__btn, .kms-cn__btn, .kms-cta__btn,
  .kms-pcta__main, .kms-pcta__try, .kms-pg-cta-btn, .kms-ptw__btn, .kms-sn__btn, .kmsct__btn, .ksb-pro-btn, .ksb-btn-primary,
  .kca__go, .kcall__go, .kms-cc__try, .kms-paa__btn, .kms-hz__cta, .kms-labb__btn, .kms-offer30__btn, .kms-sf__main,
  .cart-items__empty-button, .cart__checkout-button, .kms-404__search button[type=submit],
  .kms-chero__search button[type=submit], .shopify-section-group-footer-group form button[type=submit]
):active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
  filter: none !important;
}
html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body :is(a, button, summary, [role=button], input[type=submit]):focus-visible {
  outline: 2px solid var(--kms-lime) !important;
  outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body :is(.kh-btn, .kx-btn, .ktl-btn, .kaa-btn, .kms-cc__try, .kms-hz__cta, .kms-cta__btn, .kms-pg-cta-btn):is(:hover, :active) { transform: none !important; }
}

/* ------------------------------------------------------------------ eyebrow "// ..." - one style
   (14 local classes: kh-eye, kx-eye, kpv__eye, kms-chero__eye, kms-cn__eyebrow, kacf-eye, kaa-eye, kms-ec__eyebrow,
   kms-ptw__eyebrow, kms-paa__eyebrow, kms-install__eyebrow, kms-pfaq__eyebrow, kph__eye, kbl-eye, ksb-eyebrow,
   kms-gen-guide__eyebrow, kmsct__eyebrow) - Geist Mono 12/16, .14em, uppercase, --kms-text-muted; the "//" lime */
html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body :is(
  .kms-eyebrow, .kh-eye, .kx-eye, .kpv__eye, .kms-chero__eye, .kms-cn__eyebrow, .kacf-eye, .kaa-eye, .kms-ec__eyebrow,
  .kms-ptw__eyebrow, .kms-paa__eyebrow, .kms-install__eyebrow, .kms-pfaq__eyebrow, .kph__eye, .kbl-eye, .ksb-eyebrow,
  .kms-gen-guide__eyebrow, .kmsct__eyebrow
) {
  font-family: var(--kms-font-mono) !important;
  font-size: var(--kms-eyebrow-size) !important;
  line-height: var(--kms-eyebrow-lh) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: var(--kms-eyebrow-ls) !important;
  text-transform: uppercase !important;
  color: var(--kms-text-muted) !important;
}

/* ------------------------------------------------------------------ badges: no italics, off-palette fills to tokens */
html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body :is(.kms-404__tools-badge, .kms-sempty__tools-badge) {
  background: var(--kms-lime-soft) !important; color: var(--kms-lime) !important;
  border-radius: var(--kms-radius-badge) !important; font-family: var(--kms-font-mono) !important; font-style: normal !important;
}
/* "MCP" / "NEW" badges in the header menu: italic 800 -> upright mono 600 */
html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body #header-component .menu-list__link .menu-list__link-title::after {
  font-family: var(--kms-font-mono) !important; font-style: normal !important; font-weight: 600 !important;
  border-radius: var(--kms-radius-badge) !important;
}

/* ------------------------------------------------------------------ pagination: active page was the scheme lavender */
html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body .pagination__link[aria-current=page]::before {
  background: var(--kms-lime) !important;
}
html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body .pagination__link[aria-current=page] {
  color: var(--kms-on-accent) !important;
}

/* ------------------------------------------------------------------ text below the contrast floor
   footer disclaimer and other ~rgb(76,76,84) text: at least --kms-text-subtle (5.8:1) */
html:not(#kds1):not(#kds2):not(#kds3):not(#kds4):not(#kds5):not(#kds6) body .shopify-section-group-footer-group :is(small, .kms-ft__disclaimer, .kms-foot__disclaimer, [class*="disclaim"]) {
  color: var(--kms-text-subtle) !important;
}