/* ==========================================================================
   KKP fotomeened — kujunduse CSS pluginale (v1.4.0)
   Allikas: Claude Design "KKP fotomeened" (css/kkp-fotomeened.css), kohandatud plugina märgendusele.
   Font DM Sans on plugina kaustas (assets/fonts, SIL OFL 1.1) – Google'i servereid ei kasutata.
   ========================================================================== */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/dm-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/dm-sans-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/dm-sans-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 1. Muutujad ---------- */
:root {
  /* Värvid */
  --kkp-page: #ffffff;
  --kkp-page-tint: #f5f3f1;
  --kkp-ink: #1f1d24;
  --kkp-ink-muted: #5f5b66;
  --kkp-line: #e7e4e9;
  --kkp-line-strong: #8a8592;
  --kkp-card: #19181d;
  --kkp-panel: #141318;
  --kkp-divider: #2e2c35;
  --kkp-field-line: #6b6775;
  --kkp-on-dark: #ffffff;
  --kkp-on-dark-muted: #b9b5c0;
  --kkp-accent: #ff1f5b;
  --kkp-accent-hover: #ff4d7c;
  --kkp-accent-text: #d4003f;
  --kkp-on-accent: #111014;
  --kkp-success: #1f7a4d;
  --kkp-on-success: #ffffff;
  /* Varjud */
  --kkp-shadow-card: 0 18px 40px rgba(20, 19, 24, 0.18);
  --kkp-shadow-lift: 0 24px 56px rgba(20, 19, 24, 0.28);
  --kkp-shadow-selected: 0 0 0 3px #ffffff, 0 0 0 6px #ff1f5b;
  --kkp-shadow-focus: 0 0 0 3px #ff1f5b;
  /* Vahed */
  --kkp-space-1: 4px;
  --kkp-space-2: 8px;
  --kkp-space-3: 12px;
  --kkp-space-4: 16px;
  --kkp-space-6: 24px;
  --kkp-space-8: 32px;
  --kkp-space-12: 48px;
  --kkp-space-16: 64px;
  --kkp-space-24: 96px;
  /* Nurgad */
  --kkp-radius-pill: 999px;
  --kkp-radius-card: 24px;
  --kkp-radius-panel: 16px;
  --kkp-radius-sm: 10px;
  /* Paigutus */
  --kkp-container: 1200px;
  --kkp-gutter-desktop: 32px;
  --kkp-gutter-mobile: 16px;
  /* Font */
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- 2. Komponendid ---------- */

/* ---------- 0. Ühine alus ---------- */
:where(.kkp-hero, .kkp-howto, .kkp-gallery, .kkp-catalog, .kkp-cat-nav, .kkp-order-builder,
       .kkp-cart, .kkp-cart-table, .kkp-cart-totals, .kkp-gifts, .kkp-faq, .kkp-contact) {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
:where(.kkp-hero, .kkp-howto, .kkp-gallery, .kkp-catalog, .kkp-order-builder,
       .kkp-cart, .kkp-gifts, .kkp-faq, .kkp-contact) :where(*, *::before, *::after) {
  box-sizing: border-box;
}

.kkp-eyebrow {
  margin: 0 0 var(--kkp-space-3);
  font: 700 12px/16px var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kkp-accent-text);
}
.kkp-section-title {
  margin: 0 0 var(--kkp-space-4);
  font: 700 40px/46px var(--font-sans);
  letter-spacing: -.01em;
  color: var(--kkp-ink);
}
.kkp-section-lead {
  max-width: 60ch;
  margin: 0 0 var(--kkp-space-8);
  font-size: 19px;
  line-height: 29px;
  color: var(--kkp-ink-muted);
}
:is(.kkp-card-dark, .kkp-order-builder, .kkp-cart-totals, .kkp-contact) .kkp-eyebrow { color: var(--kkp-accent); }
:is(.kkp-card-dark, .kkp-order-builder, .kkp-cart-totals, .kkp-contact) .kkp-section-title { color: var(--kkp-on-dark); }

/* ---------- 1. Nupud ----------
   .kkp-btn on baas; .kkp-pcard-btn ja .kkp-submit-order-btn kasutavad sama alust. */
.kkp-btn, .kkp-pcard-btn, .kkp-submit-order-btn {
  --kkp-btn-bg: var(--kkp-accent);
  --kkp-btn-fg: var(--kkp-on-accent);
  --kkp-btn-bg-hover: var(--kkp-accent-hover);
  --kkp-btn-fg-hover: var(--kkp-on-accent);
  --kkp-btn-ring: transparent;
  --kkp-btn-h: 52px;
  --kkp-btn-px: 26px;
  --kkp-btn-fs: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kkp-space-2);
  min-height: var(--kkp-btn-h);
  padding: 0 var(--kkp-btn-px);
  border: 0;
  border-radius: var(--kkp-radius-pill);
  background: var(--kkp-btn-bg);
  color: var(--kkp-btn-fg);
  box-shadow: inset 0 0 0 1.5px var(--kkp-btn-ring);
  font: 700 var(--kkp-btn-fs)/1.2 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.kkp-btn:hover, .kkp-pcard-btn:hover, .kkp-submit-order-btn:hover {
  background: var(--kkp-btn-bg-hover);
  color: var(--kkp-btn-fg-hover);
}
.kkp-btn:active, .kkp-pcard-btn:active, .kkp-submit-order-btn:active { transform: translateY(1px); }
.kkp-btn:focus-visible, .kkp-pcard-btn:focus-visible, .kkp-submit-order-btn:focus-visible {
  outline: none;
  box-shadow: var(--kkp-shadow-focus);
}
.kkp-btn:disabled, .kkp-pcard-btn:disabled, .kkp-submit-order-btn:disabled,
.kkp-btn[aria-disabled="true"], .kkp-submit-order-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
.kkp-btn--dark, .kkp-pcard-btn {   /* tume nupp: tootekaart, "Vali pilt" */
  --kkp-btn-bg: var(--kkp-panel);
  --kkp-btn-fg: var(--kkp-on-dark);
  --kkp-btn-ring: var(--kkp-field-line);
}
.kkp-btn--ghost {               /* hero teine nupp foto peal */
  --kkp-btn-bg: transparent;
  --kkp-btn-fg: var(--kkp-on-dark);
  --kkp-btn-ring: var(--kkp-on-dark);
  --kkp-btn-bg-hover: var(--kkp-on-dark);
  --kkp-btn-fg-hover: var(--kkp-ink);
}
.kkp-btn--block { width: 100%; }

/* ---------- 2. Hero ---------- */
.kkp-hero {
  --kkp-hero-min-h: 720px;
  --kkp-hero-title-fs: 64px;
  --kkp-hero-title-lh: 68px;
  --kkp-hero-lead-fs: 19px;
  --kkp-hero-radius: 0;                         /* täislaiuses foto */
  --kkp-hero-scrim: rgba(20, 19, 24, .72);      /* tume kiht teksti all, foto ülaosa jääb puhtaks */
  --kkp-hero-scrim-solid: 30%;                  /* kuni siiani täielikult tume (alt mõõdetuna) */
  --kkp-hero-scrim-fade: 72%;                   /* siin kaob kiht ära */
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: var(--kkp-hero-min-h);
  overflow: hidden;
  border-radius: var(--kkp-hero-radius);
  background: var(--kkp-panel);
  color: var(--kkp-on-dark);
}
.kkp-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kkp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--kkp-hero-scrim) 0%, var(--kkp-hero-scrim) var(--kkp-hero-scrim-solid), rgba(20, 19, 24, 0) var(--kkp-hero-scrim-fade));
  pointer-events: none;
}
.kkp-hero-inner {
  width: min(100% - 2 * var(--kkp-gutter-desktop), var(--kkp-container));
  margin-inline: auto;
  padding-block: var(--kkp-space-24) var(--kkp-space-16);
}
.kkp-hero h1, .kkp-hero-title {
  max-width: 15ch;
  margin: 0 0 var(--kkp-space-4);
  font: 800 var(--kkp-hero-title-fs)/var(--kkp-hero-title-lh) var(--font-sans);
  letter-spacing: -.02em;
  color: var(--kkp-on-dark);
}
.kkp-hero-lead {
  max-width: 44ch;
  margin: 0 0 var(--kkp-space-8);
  font-size: var(--kkp-hero-lead-fs);
  line-height: 1.5;
  color: var(--kkp-on-dark);
}
.kkp-hero-actions { display: flex; flex-wrap: wrap; gap: var(--kkp-space-3); }
.kkp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kkp-space-2) var(--kkp-space-6);
  margin: var(--kkp-space-8) 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 20px;
  color: var(--kkp-on-dark);
}
.kkp-trust li { display: inline-flex; align-items: center; gap: var(--kkp-space-2); }
.kkp-trust li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kkp-accent);
}

/* ---------- 3. Kuidas see käib ---------- */
.kkp-howto {
  --kkp-howto-cols: 3;
  --kkp-howto-gap: var(--kkp-space-6);
  --kkp-howto-icon: 56px;
  --kkp-howto-pad: var(--kkp-space-8);
}
.kkp-howto-steps {
  display: grid;
  grid-template-columns: repeat(var(--kkp-howto-cols), minmax(0, 1fr));
  gap: var(--kkp-howto-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: kkp-howto;
}
.kkp-howto-step {
  display: flex;
  flex-direction: column;
  padding: var(--kkp-howto-pad);
  border-radius: var(--kkp-radius-card);
  background: var(--kkp-card);
  color: var(--kkp-on-dark);
  counter-increment: kkp-howto;
}
.kkp-howto-icon {
  order: 0;
  display: grid;
  place-items: center;
  width: var(--kkp-howto-icon);
  height: var(--kkp-howto-icon);
  margin-bottom: var(--kkp-space-6);
  border-radius: 50%;
  background: var(--kkp-accent);
  color: var(--kkp-on-accent);
}
.kkp-howto-icon svg { width: 26px; height: 26px; }
.kkp-howto-step::before {
  order: 1;
  content: counter(kkp-howto) ". samm";
  margin-bottom: var(--kkp-space-2);
  font: 700 12px/16px var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kkp-accent);
}
.kkp-howto-step h3 { order: 2; margin: 0 0 var(--kkp-space-2); font: 700 21px/27px var(--font-sans); color: var(--kkp-on-dark); }
.kkp-howto-step p  { order: 3; margin: 0; font-size: 15px; line-height: 1.5; color: var(--kkp-on-dark-muted); }

/* ---------- 4. Pildigalerii ---------- */
.kkp-gallery {
  --kkp-gallery-cols: 4;
  --kkp-gallery-gap: var(--kkp-space-3);
  --kkp-gallery-ratio: 4 / 3;
  --kkp-gallery-radius: var(--kkp-radius-panel);
}
.kkp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--kkp-gallery-cols), minmax(0, 1fr));
  gap: var(--kkp-gallery-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kkp-gallery-grid > li { margin: 0; }
.kkp-gallery-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--kkp-gallery-ratio);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--kkp-gallery-radius);
  background: var(--kkp-panel);
  cursor: pointer;
  transition: box-shadow .15s ease;
}
.kkp-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.kkp-gallery-item:hover img { transform: scale(1.04); }
.kkp-gallery-item:focus-visible { outline: none; box-shadow: var(--kkp-shadow-focus); }
.kkp-gallery-item.is-selected,
.kkp-gallery-item[aria-pressed="true"],
.kkp-gallery-item[aria-checked="true"] { box-shadow: var(--kkp-shadow-selected); }
.kkp-gallery-item.is-selected::after,
.kkp-gallery-item[aria-pressed="true"]::after,
.kkp-gallery-item[aria-checked="true"]::after {
  content: "Valitud";
  position: absolute;
  top: var(--kkp-space-3);
  left: var(--kkp-space-3);
  padding: 6px 10px;
  border-radius: var(--kkp-radius-pill);
  background: var(--kkp-accent);
  color: var(--kkp-on-accent);
  font: 800 11px/1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kkp-gallery-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--kkp-space-6) var(--kkp-space-3) 10px;
  background: linear-gradient(to top, rgba(20, 19, 24, .78), rgba(20, 19, 24, 0));
  color: var(--kkp-on-dark);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}
.kkp-gallery-hint {
  display: flex;
  align-items: center;
  gap: var(--kkp-space-3);
  margin: var(--kkp-space-6) 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--kkp-ink-muted);
}
.kkp-gallery-hint strong { color: var(--kkp-ink); }

/* ---------- 5. Kataloog ja kategooriad ---------- */
.kkp-catalog {
  --kkp-catalog-min: 300px;
  --kkp-catalog-gap: var(--kkp-space-6);
  display: block;
}
.kkp-pgrid {                                   /* plugina kaartide ruudustik kategooria sees */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--kkp-catalog-min), 100%), 1fr));
  gap: var(--kkp-catalog-gap);
  align-items: stretch;
}
.kkp-cat-section[hidden] { display: none; }
.kkp-cat-section + .kkp-cat-section { margin-top: var(--kkp-space-16); }
.kkp-catalog--filtered .kkp-cat-section + .kkp-cat-section { margin-top: 0; }
.kkp-cat-head { margin: 0 0 var(--kkp-space-6); }
.kkp-cat-head .kkp-section-title { font-size: 30px; line-height: 36px; margin-bottom: var(--kkp-space-2); }
.kkp-cat-head .kkp-section-lead { margin-bottom: 0; font-size: 17px; line-height: 26px; }
.kkp-cat-tagline { margin: calc(-1 * var(--kkp-space-3)) 0 var(--kkp-space-6); font-size: 15px; color: var(--kkp-ink-muted); }
.kkp-catalog--gifts .kkp-pgrid { --kkp-catalog-min: 320px; }
.kkp-catalog--gifts .kkp-pcard { --kkp-pcard-ratio: 16 / 10; }
.kkp-pcard-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px; color: var(--kkp-on-dark-muted); font-size: 13px; font-weight: 700; text-align: center;
  background: linear-gradient(180deg, #26242b, var(--kkp-panel));
}
.kkp-pcard .kkp-compare { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--kkp-pcard-muted); }

.kkp-cat-nav {
  --kkp-cat-h: 44px;
  --kkp-cat-px: 18px;
  --kkp-cat-fs: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kkp-space-2);
  margin: 0 0 var(--kkp-space-6);
  padding: 0;
  list-style: none;
}
.kkp-cat-nav > li { margin: 0; }
.kkp-cat-nav a, .kkp-cat-nav button {
  display: inline-flex;
  align-items: center;
  min-height: var(--kkp-cat-h);
  padding: 0 var(--kkp-cat-px);
  border: 1.5px solid var(--kkp-line-strong);
  border-radius: var(--kkp-radius-pill);
  background: var(--kkp-page);
  color: var(--kkp-ink);
  font: 700 var(--kkp-cat-fs)/1 var(--font-sans);
  letter-spacing: normal;          /* 1.5.1: teema `button { text-transform: uppercase; letter-spacing: 2px }` ei tohi tulla läbi */
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.kkp-cat-nav a:hover, .kkp-cat-nav button:hover { border-color: var(--kkp-ink); }
.kkp-cat-nav a:focus-visible, .kkp-cat-nav button:focus-visible { outline: none; box-shadow: var(--kkp-shadow-focus); }
.kkp-cat-nav .is-active,
.kkp-cat-nav .active,
.kkp-cat-nav [aria-current]:not([aria-current="false"]),
.kkp-cat-nav [aria-selected="true"],
.kkp-cat-nav [aria-pressed="true"] {
  border-color: var(--kkp-ink);
  background: var(--kkp-ink);
  color: var(--kkp-on-dark);
}

/* ---------- 6. Tootekaart ---------- */
.kkp-pcard {
  --kkp-pcard-bg: var(--kkp-card);
  --kkp-pcard-fg: var(--kkp-on-dark);
  --kkp-pcard-muted: var(--kkp-on-dark-muted);
  --kkp-pcard-radius: var(--kkp-radius-card);
  --kkp-pcard-pad: var(--kkp-space-6);
  --kkp-pcard-ratio: 4 / 3;
  --kkp-pcard-title-fs: 21px;
  --kkp-pcard-text-fs: 15px;
  --kkp-pcard-price-fs: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--kkp-pcard-radius);
  background: var(--kkp-pcard-bg);
  color: var(--kkp-pcard-fg);
  box-shadow: var(--kkp-shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kkp-pcard:hover { transform: translateY(-3px); box-shadow: var(--kkp-shadow-lift); }
.kkp-pcard-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--kkp-pcard-ratio);
  margin: 0;
  overflow: hidden;
  background: var(--kkp-panel);
}
img.kkp-pcard-media, .kkp-pcard-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.kkp-pcard:hover .kkp-pcard-media img, .kkp-pcard:hover img.kkp-pcard-media { transform: scale(1.03); }
.kkp-pcard :where(h3, .kkp-pcard-title) {
  margin: var(--kkp-space-6) var(--kkp-pcard-pad) var(--kkp-space-2);
  font: 700 var(--kkp-pcard-title-fs)/1.28 var(--font-sans);
  color: var(--kkp-pcard-fg);
}
.kkp-pcard :where(p, .kkp-pcard-desc) {
  margin: 0 var(--kkp-pcard-pad);
  font-size: var(--kkp-pcard-text-fs);
  line-height: 1.5;
  color: var(--kkp-pcard-muted);
}
.kkp-pcard :where(.kkp-pcard-specs, ul) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--kkp-space-4) var(--kkp-pcard-pad) 0;
  padding: 0;
  list-style: none;
}
.kkp-pcard :where(.kkp-pcard-specs, ul) > li {
  margin: 0;
  padding: 5px 10px;
  border-radius: var(--kkp-radius-pill);
  background: var(--kkp-panel);
  color: var(--kkp-pcard-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.kkp-pcard .kkp-pcard-price {
  margin: auto var(--kkp-pcard-pad) 0;      /* lükkab hinna ja nupu kaardi alla */
  padding-top: var(--kkp-space-6);
  font: 800 var(--kkp-pcard-price-fs)/1.1 var(--font-sans);
  color: var(--kkp-accent);
}
.kkp-pcard .kkp-pcard-price :is(small, .kkp-from) {
  margin-right: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--kkp-pcard-muted);
}
.kkp-pcard .kkp-pcard-btn {
  align-self: stretch;
  margin: var(--kkp-space-4) var(--kkp-pcard-pad) var(--kkp-pcard-pad);
}

/* Silt (Uus · Jõuludeks · Populaarne) */
.kkp-badge {
  --kkp-badge-bg: var(--kkp-accent);
  --kkp-badge-fg: var(--kkp-on-accent);
  --kkp-badge-fs: 11px;
  position: absolute;
  top: var(--kkp-space-4);
  left: var(--kkp-space-4);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: var(--kkp-radius-pill);
  background: var(--kkp-badge-bg);
  color: var(--kkp-badge-fg);
  font: 800 var(--kkp-badge-fs)/1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(20, 19, 24, .22);
}
.kkp-badge--joulud, .kkp-badge[data-badge="joulud"] { --kkp-badge-bg: var(--kkp-success); --kkp-badge-fg: var(--kkp-on-success); }
.kkp-badge--populaarne, .kkp-badge[data-badge="populaarne"] { --kkp-badge-bg: var(--kkp-page); --kkp-badge-fg: var(--kkp-ink); }

/* ---------- 7. Tellimisvorm ---------- */
.kkp-order-builder {
  --kkp-ob-pad: var(--kkp-space-12);
  --kkp-ob-gap: var(--kkp-space-8);
  --kkp-ob-radius: var(--kkp-radius-card);
  --kkp-step-num: 40px;
  --kkp-step-num-fs: 17px;
  --kkp-step-title-fs: 20px;
  display: grid;
  gap: var(--kkp-ob-gap);
  padding: var(--kkp-ob-pad);
  border-radius: var(--kkp-ob-radius);
  background: var(--kkp-card);
  color: var(--kkp-on-dark);
  box-shadow: var(--kkp-shadow-card);
  counter-reset: kkp-step;
}
.kkp-order-builder > h2 { margin: 0; font: 700 40px/46px var(--font-sans); letter-spacing: -.01em; color: var(--kkp-on-dark); }
.kkp-order-builder :where(label) { font-size: 14px; font-weight: 500; color: var(--kkp-on-dark-muted); }

/* Väljad tumedal (tellimisvorm + ostukorv) */
:is(.kkp-order-builder, .kkp-cart) :is(select, textarea, input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="search"])) {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1.5px solid var(--kkp-field-line);
  border-radius: var(--kkp-radius-sm);
  background-color: var(--kkp-panel);
  color: var(--kkp-on-dark);
  font: 400 16px/1.4 var(--font-sans);
  box-shadow: none;
}
:is(.kkp-order-builder, .kkp-cart) select {
  appearance: none;
  padding-right: 48px;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
:is(.kkp-order-builder, .kkp-cart) :is(select, textarea, input):focus-visible {
  outline: none;
  border-color: var(--kkp-accent);
  box-shadow: var(--kkp-shadow-focus);
}
:is(.kkp-order-builder, .kkp-cart) ::placeholder { color: var(--kkp-on-dark-muted); opacity: 1; }

/* Samm 1–4: number tuleb CSS-loendurist, HTML-i pole vaja muuta */
.kkp-step {
  display: grid;
  grid-template-columns: var(--kkp-step-num) minmax(0, 1fr);
  column-gap: var(--kkp-space-4);
  row-gap: var(--kkp-space-4);
  align-items: start;
  counter-increment: kkp-step;
}
.kkp-step + .kkp-step { padding-top: var(--kkp-ob-gap); border-top: 1px solid var(--kkp-divider); }
.kkp-step::before {
  content: counter(kkp-step);
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: var(--kkp-step-num);
  height: var(--kkp-step-num);
  border-radius: 50%;
  background: var(--kkp-accent);
  color: var(--kkp-on-accent);
  font: 800 var(--kkp-step-num-fs)/1 var(--font-sans);
}
.kkp-step > * { grid-column: 2; min-width: 0; margin-block: 0; }
.kkp-step > :is(h3, h4, legend, .kkp-step-title) {
  display: flex;
  align-items: center;
  min-height: var(--kkp-step-num);
  font: 700 var(--kkp-step-title-fs)/1.3 var(--font-sans);
  color: var(--kkp-on-dark);
}
.kkp-step > h3 label { font: inherit; color: inherit; cursor: pointer; }
.kkp-builder-intro { margin: calc(-1 * var(--kkp-space-4)) 0 0; font-size: 16px; line-height: 1.5; color: var(--kkp-on-dark-muted); }
.kkp-image-lead { margin: 0; font-size: 14px; color: var(--kkp-on-dark-muted); }
.kkp-image-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--kkp-space-2); }
.kkp-link-btn { margin: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--kkp-on-dark-muted); font: 500 13px/1.4 var(--font-sans); letter-spacing: normal; text-transform: none; text-shadow: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kkp-link-btn:hover { color: var(--kkp-accent); }
.kkp-order-builder .kkp-open-modal { --kkp-btn-h: 48px; }

/* Toote infokast (samm 2) */
.kkp-product-info {
  --kkp-pi-thumb: 120px;
  display: grid;
  grid-template-columns: var(--kkp-pi-thumb) minmax(0, 1fr);
  gap: var(--kkp-space-4);
  align-items: start;
  padding: var(--kkp-space-4);
  border-radius: var(--kkp-radius-panel);
  background: var(--kkp-panel);
  color: var(--kkp-on-dark);
}
.kkp-product-info:not(:has(img[src])) { grid-template-columns: minmax(0, 1fr); }
.kkp-product-info-media:not(:has(img[src])) { display: none; }
.kkp-product-info img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--kkp-radius-sm); }  /* height:auto: width/height atribuudid (1.6.1) ei tohi kõrgust muuta */
.kkp-product-info :is(h4, strong:first-child, .kkp-product-info-title) { display: block; margin: 0 0 4px; font: 700 17px/1.3 var(--font-sans); color: var(--kkp-on-dark); }
.kkp-product-info p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--kkp-on-dark-muted); }
.kkp-product-info ul { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--kkp-space-3) 0 0; padding: 0; list-style: none; }
.kkp-product-info li { padding: 4px 10px; border-radius: var(--kkp-radius-pill); background: var(--kkp-card); color: var(--kkp-on-dark-muted); font-size: 12px; }

.kkp-option-label {
  margin: 0 0 10px;
  font: 700 12px/16px var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kkp-on-dark-muted);
}

/* Värviringid (samm 3) — plugina märgendus: .kkp-colors > button.kkp-color-option > span.kkp-color (+ nimi .kkp-colors-name) */
.kkp-colors {
  --kkp-swatch: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kkp-space-3);
  margin: 0;
  padding: 0;
  border: 0;
}
.kkp-order-builder .kkp-color-option {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--kkp-swatch);
  height: var(--kkp-swatch);
  border-radius: 50%;
  cursor: pointer;
}
.kkp-order-builder .kkp-color-option .kkp-color {
  display: block;
  width: var(--kkp-swatch);
  height: var(--kkp-swatch);
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  transition: box-shadow .15s ease;
}
.kkp-order-builder .kkp-color-option .kkp-color-text,
.kkp-order-builder .kkp-color-option .kkp-color-mod { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kkp-order-builder .kkp-color-option.active .kkp-color,
.kkp-order-builder .kkp-color-option[aria-pressed="true"] .kkp-color {
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 0 3px var(--kkp-card), 0 0 0 5px var(--kkp-accent);
}
.kkp-order-builder .kkp-color-option:hover .kkp-color { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 0 3px var(--kkp-card), 0 0 0 5px var(--kkp-field-line); transform: none; }
.kkp-order-builder .kkp-color-option.active:hover .kkp-color { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 0 3px var(--kkp-card), 0 0 0 5px var(--kkp-accent); }
.kkp-order-builder .kkp-color-option:focus-visible { outline: 2px solid var(--kkp-on-dark); outline-offset: 6px; }
.kkp-colors-name { display: inline-block; margin: 8px 0 0; font-size: 14px; color: var(--kkp-on-dark-muted); min-height: 1em; }
.kkp-attribute + .kkp-attribute { margin-top: var(--kkp-space-4); }

/* Raadiovalikud hinnalisaga (samm 3) */
.kkp-attribute .kkp-radio { display: block; }
.kkp-attribute label.kkp-radio + label.kkp-radio { margin-top: var(--kkp-space-2); }
:is(.kkp-order-builder, .kkp-cart) label.kkp-radio {
  display: flex;
  align-items: center;
  gap: var(--kkp-space-3);
  min-height: 52px;
  padding: 12px 16px;
  border-radius: var(--kkp-radius-sm);
  background: var(--kkp-panel);
  box-shadow: inset 0 0 0 1.5px var(--kkp-divider);
  color: var(--kkp-on-dark);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow .15s ease;
}
:is(.kkp-order-builder, .kkp-cart) label.kkp-radio:hover { box-shadow: inset 0 0 0 1.5px var(--kkp-field-line); }
:is(.kkp-order-builder, .kkp-cart) label.kkp-radio:has(input:checked) { box-shadow: inset 0 0 0 2px var(--kkp-accent); }
:is(.kkp-order-builder, .kkp-cart) label.kkp-radio input[type="radio"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--kkp-accent); }
:is(.kkp-order-builder, .kkp-cart) label.kkp-radio :is(.kkp-price-add, small) { margin-left: auto; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--kkp-accent); }

/* Valitud pildi eelvaade (samm 4) */
.kkp-image-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kkp-space-4); }
.kkp-image-preview {
  width: 160px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--kkp-radius-sm);
  background: var(--kkp-panel);
  box-shadow: 0 0 0 3px var(--kkp-card), 0 0 0 5px var(--kkp-accent);
}
.kkp-image-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Kogus − / + */
.kkp-qty {
  --kkp-qty-btn: 40px;
  --kkp-qty-val: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--kkp-space-1);
  padding: 4px;
  border-radius: var(--kkp-radius-pill);
  background: var(--kkp-panel);
  box-shadow: inset 0 0 0 1.5px var(--kkp-field-line);
}
.kkp-qty button {
  display: grid;
  place-items: center;
  width: var(--kkp-qty-btn);
  height: var(--kkp-qty-btn);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--kkp-on-dark);
  font: 700 20px/1 var(--font-sans);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.kkp-qty button:hover { background: var(--kkp-accent); color: var(--kkp-on-accent); }
.kkp-qty button:focus-visible { outline: none; box-shadow: var(--kkp-shadow-focus); }
.kkp-qty button:disabled { opacity: .4; cursor: not-allowed; background: transparent; color: var(--kkp-on-dark); }
.kkp-order-builder .kkp-qty :is(input, output, span),
.kkp-cart .kkp-qty :is(input, output, span),
.kkp-qty :is(input, output, span) {
  width: var(--kkp-qty-val);
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--kkp-on-dark);
  font: 700 17px/1 var(--font-sans);
  text-align: center;
  -moz-appearance: textfield;
}
.kkp-qty input::-webkit-inner-spin-button, .kkp-qty input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

/* Hinnarida ja lisamisnupp */
.kkp-order-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kkp-space-4) var(--kkp-space-6);
  padding-top: var(--kkp-ob-gap);
  border-top: 1px solid var(--kkp-divider);
}
.kkp-order-total { margin: 0; font: 800 24px/1.2 var(--font-sans); color: var(--kkp-on-dark); }
.kkp-order-total small { font-size: 15px; font-weight: 500; color: var(--kkp-on-dark-muted); }
.kkp-order-total strong { font-weight: 800; color: var(--kkp-on-dark); }
.kkp-qty-wrap { display: flex; align-items: center; gap: var(--kkp-space-3); }
.kkp-qty-wrap > label { margin: 0; font-size: 14px; font-weight: 500; color: var(--kkp-on-dark-muted); }
.kkp-order-summary > .kkp-btn { --kkp-btn-h: 56px; }
.kkp-order-summary > .kkp-btn:disabled, .kkp-order-summary > .kkp-btn[disabled] { opacity: .45; cursor: not-allowed; background: var(--kkp-accent); color: var(--kkp-on-accent); transform: none; }
.kkp-shipping-note { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.4; color: var(--kkp-on-dark-muted); }
.kkp-order-builder .kkp-add-status.is-info { background: var(--kkp-panel); color: var(--kkp-on-dark); }

.kkp-add-status {
  position: relative;
  display: block;
  padding: 14px 18px 14px 50px;
  border-radius: var(--kkp-radius-sm);
  background: var(--kkp-success);
  color: var(--kkp-on-success);
  font: 600 15px/1.4 var(--font-sans);
}
.kkp-add-status::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 18px;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kkp-add-status:empty, .kkp-add-status[hidden] { display: none; }
.kkp-add-status a { margin-left: 4px; color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.kkp-add-status.is-error, .kkp-add-status[data-state="error"] { background: var(--kkp-accent); color: var(--kkp-on-accent); }
.kkp-add-status.is-error, .kkp-add-status[data-state="error"] { padding-left: 18px; }
.kkp-add-status.is-error::before, .kkp-add-status[data-state="error"]::before { content: none; }

/* ---------- 8. Ostukorv ---------- */
.kkp-cart-wrap { container-type: inline-size; }   /* 1.4.0: kaks veergu ainult siis, kui sisuala on piisavalt lai (mitte ekraani järgi) */
.kkp-cart {
  --kkp-cart-aside: 380px;
  --kkp-cart-gap: var(--kkp-space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kkp-cart-gap);
  align-items: start;
}
@container (min-width: 900px) {
  .kkp-cart { grid-template-columns: minmax(0, 1fr) var(--kkp-cart-aside); }
}
@supports not (container-type: inline-size) {
  @media (min-width: 1025px) { .kkp-cart { grid-template-columns: minmax(0, 1fr) var(--kkp-cart-aside); } }
}
.kkp-cart-panel {               /* kliendi andmed, pakiautomaat, märkused */
  display: grid;
  gap: var(--kkp-space-4);
  padding: var(--kkp-space-8);
  border-radius: var(--kkp-radius-card);
  background: var(--kkp-card);
  color: var(--kkp-on-dark);
}
.kkp-cart-panel h3 { margin: 0; font: 700 20px/1.3 var(--font-sans); color: var(--kkp-on-dark); }
.kkp-cart :where(label) { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--kkp-on-dark-muted); }
.kkp-cart-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kkp-space-4); }

.kkp-cart-table {
  --kkp-ct-thumb: 72px;
  --kkp-ct-pad: 16px 20px;
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--kkp-radius-card);
  background: var(--kkp-card);
  color: var(--kkp-on-dark);
  font-size: 15px;
}
.kkp-cart-table th {
  padding: var(--kkp-ct-pad);
  border: 0;
  background: var(--kkp-panel);
  color: var(--kkp-on-dark-muted);
  font: 700 12px/16px var(--font-sans);
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
}
.kkp-cart-table td {
  padding: var(--kkp-ct-pad);
  border: 0;
  border-top: 1px solid var(--kkp-divider);
  background: transparent;
  color: var(--kkp-on-dark);
  vertical-align: middle;
}
.kkp-cart-table tbody tr:first-child td { border-top: 0; }
.kkp-cart-table td:first-child { width: var(--kkp-ct-thumb); padding-right: 0; }
.kkp-cart-table img { display: block; width: var(--kkp-ct-thumb); max-width: none; height: var(--kkp-ct-thumb); object-fit: cover; border-radius: var(--kkp-radius-sm); }
.kkp-cart-table td strong { display: block; font-weight: 700; }
.kkp-cart-table td :is(small, .kkp-cart-meta) { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--kkp-on-dark-muted); }
.kkp-cart-table :is(th, td):last-child { text-align: right; white-space: nowrap; }
.kkp-cart-table td:last-child { font-weight: 800; }
.kkp-cart-table .kkp-qty { --kkp-qty-btn: 34px; --kkp-qty-val: 36px; }
.kkp-cart-remove {
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--kkp-on-dark-muted);
  font: 500 13px/1.4 var(--font-sans);
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.kkp-cart-remove:hover { color: var(--kkp-accent); }

.kkp-cart-totals {
  --kkp-tot-pad: var(--kkp-space-8);
  --kkp-tot-sum-fs: 28px;
  display: grid;
  gap: var(--kkp-space-3);
  padding: var(--kkp-tot-pad);
  border-radius: var(--kkp-radius-card);
  background: var(--kkp-card);
  color: var(--kkp-on-dark);
  box-shadow: var(--kkp-shadow-card);
}
.kkp-cart-totals > :is(div, p, li):not(.kkp-eyebrow, .kkp-free-ship, .kkp-submit-wrap), .kkp-cart-totals tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kkp-space-4);
  margin: 0;
  font-size: 15px;
  color: var(--kkp-on-dark-muted);
}
.kkp-cart-totals :is(td, th) { padding: 0; border: 0; background: none; }
.kkp-cart-totals :is(strong, .amount) { font-weight: 700; color: var(--kkp-on-dark); }
.kkp-cart-totals .kkp-cart-total {
  padding-top: var(--kkp-space-4);
  margin-top: var(--kkp-space-1);
  border-top: 1px solid var(--kkp-divider);
  color: var(--kkp-on-dark);
  font-weight: 700;
}
.kkp-cart-totals .kkp-cart-total :is(strong, .amount) { font: 800 var(--kkp-tot-sum-fs)/1.1 var(--font-sans); color: var(--kkp-on-dark); }
.kkp-cart-totals .kkp-free-ship {
  display: block;
  padding: 12px 14px;
  border-radius: var(--kkp-radius-sm);
  background: var(--kkp-panel);
  color: var(--kkp-on-dark);
  font-size: 14px;
  line-height: 1.45;
}
.kkp-free-ship strong { color: var(--kkp-accent); }
.kkp-submit-order-btn {
  --kkp-btn-h: 58px;
  --kkp-btn-fs: 16px;
  width: 100%;
  margin-top: var(--kkp-space-2);
}
.kkp-submit-order-btn:disabled { opacity: .5; cursor: wait; }
.kkp-cart-totals { grid-template-columns: minmax(0, 1fr); }
.kkp-cart-totals > * { min-width: 0; }
.kkp-submit-order-btn { white-space: normal; text-align: center; padding-block: 12px; }
.kkp-cart-main { display: grid; gap: var(--kkp-space-6); min-width: 0; }
.kkp-cart-totals .kkp-submit-wrap { display: grid; gap: var(--kkp-space-3); }
#kkp-submit-status:empty { display: none; }
#kkp-submit-status { padding: 12px 14px; border-radius: var(--kkp-radius-sm); background: var(--kkp-panel); color: var(--kkp-on-dark); font-size: 14px; line-height: 1.45; font-weight: 600; }
.kkp-cart-totals .kkp-back-to-shop-btn { justify-self: center; color: var(--kkp-on-dark-muted); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.kkp-cart-totals .kkp-back-to-shop-btn:hover { color: var(--kkp-on-dark); }
.kkp-cart .kkp-field { display: block; margin: 0; }
.kkp-cart .kkp-field > :is(input, select, textarea) { display: block; margin-top: 6px; }
.kkp-cart .kkp-req { opacity: .7; }
.kkp-cart .kkp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.kkp-cart .kkp-shipping-choice { margin: 0; }
.kkp-cart :is(input, select, textarea).kkp-invalid { border-color: var(--kkp-accent); box-shadow: var(--kkp-shadow-focus); }
.kkp-cart-table .kkp-cart-remove { margin-top: 6px; }
.kkp-cart-table .kkp-cart-unit { display: block; margin-top: 6px; font-size: 12px; color: var(--kkp-on-dark-muted); white-space: nowrap; }
.kkp-cart-table .kkp-cart-qty-cell { white-space: nowrap; }
.kkp-cart-table .kkp-cart-line-cell strong { font-weight: 800; }
.kkp-cart-table .kkp-cart-thumb:empty { width: 0; padding: 0; }
.kkp-cart-empty { padding: var(--kkp-space-12) var(--kkp-space-6); border-radius: var(--kkp-radius-card); background: var(--kkp-card); color: var(--kkp-on-dark); text-align: center; font-family: var(--font-sans); }
.kkp-cart-empty p { margin: 0 0 var(--kkp-space-6); font-size: 18px; }
.kkp-cart-button { font-family: var(--font-sans); }

/* ---------- 9. Kingikomplektid ---------- */
.kkp-gifts { --kkp-gifts-cols: 3; --kkp-gifts-gap: var(--kkp-space-6); }
.kkp-gifts-grid { display: grid; grid-template-columns: repeat(var(--kkp-gifts-cols), minmax(0, 1fr)); gap: var(--kkp-gifts-gap); }
.kkp-gift {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--kkp-radius-card);
  background: var(--kkp-card);
  color: var(--kkp-on-dark);
  box-shadow: var(--kkp-shadow-card);
}
.kkp-gift-media { aspect-ratio: 16 / 10; background: var(--kkp-panel); overflow: hidden; }
.kkp-gift-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kkp-gift-body { display: flex; flex: 1; flex-direction: column; gap: var(--kkp-space-3); padding: var(--kkp-space-6); }
.kkp-gift h3 { margin: 0; font: 700 21px/27px var(--font-sans); color: var(--kkp-on-dark); }
.kkp-gift ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--kkp-on-dark-muted); }
.kkp-gift li { display: flex; gap: var(--kkp-space-2); }
.kkp-gift li::before { content: "+"; font-weight: 800; color: var(--kkp-accent); }
.kkp-gift-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--kkp-space-3); margin-top: auto; padding-top: var(--kkp-space-3); }
.kkp-gift-price { font: 800 24px/1.1 var(--font-sans); color: var(--kkp-accent); }
.kkp-gift-price small { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--kkp-on-dark-muted); }

/* ---------- 10. KKK ja kontakt ---------- */
.kkp-faq { --kkp-faq-max: 820px; max-width: var(--kkp-faq-max); }
.kkp-faq details { border-bottom: 1px solid var(--kkp-line); }
.kkp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kkp-space-4);
  padding: 22px 0;
  font: 700 18px/1.4 var(--font-sans);
  color: var(--kkp-ink);
  list-style: none;
  cursor: pointer;
}
.kkp-faq summary::-webkit-details-marker { display: none; }
.kkp-faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--kkp-line-strong);
  color: var(--kkp-accent-text);
  font: 700 20px/1 var(--font-sans);
}
.kkp-faq details[open] summary::after { content: "−"; }
.kkp-faq summary:focus-visible { outline: none; box-shadow: var(--kkp-shadow-focus); border-radius: var(--kkp-radius-sm); }
.kkp-faq details > :not(summary) { max-width: 65ch; margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--kkp-ink-muted); }

.kkp-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--kkp-space-8);
  align-items: center;
  padding: var(--kkp-space-12);
  border-radius: var(--kkp-radius-card);
  background: var(--kkp-card);
  color: var(--kkp-on-dark);
}
.kkp-contact p { margin: 0; color: var(--kkp-on-dark-muted); line-height: 1.6; }
.kkp-contact a:not(.kkp-btn) { color: var(--kkp-on-dark); font-weight: 700; text-underline-offset: 3px; }
.kkp-contact-list { display: grid; gap: var(--kkp-space-2); margin: 0; padding: 0; list-style: none; font-size: 16px; }

/* ---------- 11. Kohandumine ---------- */
@media (max-width: 1024px) {
  .kkp-gallery { --kkp-gallery-cols: 3; }
}
@media (max-width: 860px) {
  .kkp-howto { --kkp-howto-cols: 1; --kkp-howto-pad: var(--kkp-space-6); }
  .kkp-gifts { --kkp-gifts-cols: 1; }
  .kkp-contact { grid-template-columns: minmax(0, 1fr); padding: var(--kkp-space-8); }
}
@media (max-width: 640px) {
  .kkp-section-title, .kkp-order-builder > h2 { font-size: 30px; line-height: 36px; }
  .kkp-section-lead { font-size: 17px; line-height: 26px; }
  .kkp-hero { --kkp-hero-min-h: 600px; --kkp-hero-title-fs: 38px; --kkp-hero-title-lh: 42px; --kkp-hero-lead-fs: 17px; --kkp-hero-scrim-solid: 55%; --kkp-hero-scrim-fade: 92%; }
  .kkp-hero-inner { width: calc(100% - 2 * var(--kkp-gutter-mobile)); padding-block: var(--kkp-space-16) var(--kkp-space-8); }
  .kkp-hero-actions > * { flex: 1 1 100%; }
  .kkp-trust { flex-direction: column; gap: var(--kkp-space-2); margin-top: var(--kkp-space-6); }
  .kkp-howto-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--kkp-space-4); }
  .kkp-howto { --kkp-howto-icon: 48px; --kkp-howto-gap: var(--kkp-space-3); }
  .kkp-howto-step > :not(.kkp-howto-icon), .kkp-howto-step::before { grid-column: 2; }
  .kkp-howto-icon { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .kkp-gallery { --kkp-gallery-cols: 2; --kkp-gallery-gap: var(--kkp-space-2); }
  .kkp-cat-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--kkp-gutter-mobile));
    padding-inline: var(--kkp-gutter-mobile);
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .kkp-cat-nav::-webkit-scrollbar { display: none; }
  .kkp-catalog { --kkp-catalog-gap: var(--kkp-space-4); }
  .kkp-order-builder { --kkp-ob-pad: 20px; --kkp-ob-gap: var(--kkp-space-6); --kkp-step-num: 32px; --kkp-step-num-fs: 15px; --kkp-step-title-fs: 18px; }
  .kkp-step { column-gap: var(--kkp-space-3); }
  .kkp-step > :not(:is(h3, h4, legend, .kkp-step-title)) { grid-column: 1 / -1; }
  .kkp-product-info { --kkp-pi-thumb: 84px; }
  .kkp-order-summary > .kkp-btn { width: 100%; }
  .kkp-cart-panel { padding: 20px; }
  .kkp-cart-fields { grid-template-columns: minmax(0, 1fr); }
  .kkp-cart-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .kkp-cart-table, .kkp-cart-table tbody, .kkp-cart-table td { display: block; }
  .kkp-cart-table tr {
    display: grid;
    grid-template-columns: var(--kkp-ct-thumb) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--kkp-space-2) 14px;
    padding: var(--kkp-space-4);
    border-top: 1px solid var(--kkp-divider);
  }
  .kkp-cart-table tbody tr:first-child { border-top: 0; }
  .kkp-cart-table td { padding: 0; border: 0; text-align: left; }
  .kkp-cart-table td:first-child { grid-row: 1 / span 2; }
  .kkp-cart-table td:nth-child(2) { grid-column: 2 / -1; }
  .kkp-cart-table td:last-child { grid-column: 3; text-align: right; }
  .kkp-cart-table { --kkp-ct-thumb: 64px; }
  .kkp-cart-totals { --kkp-tot-pad: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.kkp-hero, .kkp-gallery, .kkp-catalog, .kkp-order-builder, .kkp-cart, .kkp-gifts) :where(*, *::before, *::after) {
    transition: none !important;
  }
  .kkp-pcard:hover, .kkp-pcard:hover .kkp-pcard-media img, .kkp-gallery-item:hover img { transform: none; }
}

/* ---------- 12. Lehe plokid ([kkp_pood], [kkp_hero] …) ---------- */
.kkp-page { font-family: var(--font-sans); color: var(--kkp-ink); }
.kkp-page--bleed > .kkp-hero, .kkp-page--bleed > .kkp-sec { width: 100vw; margin-inline: calc(50% - 50vw); }
.kkp-page--bleed { overflow-x: clip; }
.kkp-sec { padding-block: var(--kkp-space-24); background: var(--kkp-page); }
.kkp-sec--tint { background: var(--kkp-page-tint); }
.kkp-sec--tight { padding-top: 0; }
.kkp-wrap { width: min(100% - 2 * var(--kkp-gutter-desktop), var(--kkp-container)); margin-inline: auto; }
.kkp-wrap--narrow { max-width: 880px; }
.kkp-sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: var(--kkp-space-8); }
.kkp-sec-head .kkp-section-title, .kkp-sec-head .kkp-section-lead { margin: 0; }
.kkp-gallery .kkp-sec-head { margin-bottom: var(--kkp-space-8); }
.kkp-faq-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--kkp-space-12); align-items: start; }
.kkp-faq-contact .kkp-contact { grid-template-columns: 1fr; }
.kkp-contact .kkp-section-title { font-size: 30px; line-height: 36px; color: var(--kkp-on-dark); }
.kkp-contact .kkp-btn { justify-self: start; }
.kkp-howto .kkp-section-title { margin-bottom: var(--kkp-space-8); }
.kkp-order-builder.kkp-highlight { animation: kkp-highlight-dark 1.6s ease-out; }
@keyframes kkp-highlight-dark { 0% { box-shadow: 0 0 0 0 rgba(255, 31, 91, .6); } 100% { box-shadow: var(--kkp-shadow-card); } }
@media (max-width: 640px) {
  .kkp-sec { padding-block: var(--kkp-space-16); }
  .kkp-wrap { width: calc(100% - 2 * var(--kkp-gutter-mobile)); }
  .kkp-sec-head { margin-bottom: var(--kkp-space-6); }
  .kkp-cat-head .kkp-section-title { font-size: 24px; line-height: 30px; }
  .kkp-order-summary { gap: var(--kkp-space-4); }
  .kkp-order-summary > .kkp-btn { width: 100%; white-space: normal; }
  .kkp-hero-actions .kkp-btn, .kkp-pcard-btn { white-space: normal; }
  .kkp-qty-wrap { width: 100%; justify-content: space-between; }
  .kkp-order-total { width: 100%; }
  .kkp-cart-table .kkp-cart-qty-cell { grid-column: 2; }
  .kkp-cart-table .kkp-cart-unit { display: inline; margin-left: 8px; }
  .kkp-contact { padding: var(--kkp-space-6); }
}

/* ---------- 12. Pildi valimise aken KKP Galeriiga (v1.4.0) ----------
   Tume paneel nagu kujunduses. Galerii on KKP Galerii valija (.kkpg, mode="vali"): klikk valib, luup avab suurelt.
   Vana Envira aken (.kkp-modal ilma --kkp klassita) jääb product-modal.css järgi. */
.kkp-modal--kkp { padding: var(--kkp-space-6); background: rgba(20, 19, 24, .72); z-index: 99990; }
.kkp-modal--kkp .kkp-modal-inner {
  max-width: 1040px; width: 100%; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  margin: 0; padding: var(--kkp-space-8); border-radius: var(--kkp-radius-card);
  background: var(--kkp-card); color: var(--kkp-on-dark); box-shadow: var(--kkp-shadow-card);
  font-family: var(--font-sans); overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--kkp-space-6);
}
.kkp-modal--kkp .kkp-close, .kkp-modal--kkp .kkp-close:hover, .kkp-modal--kkp .kkp-close:focus {
  position: absolute; top: var(--kkp-space-6); right: var(--kkp-space-6); z-index: 2;
  width: 44px; height: 44px; margin: 0; padding: 0; display: grid; place-items: center;
  border: 1.5px solid var(--kkp-field-line); border-radius: 50%; background: transparent; color: #ffffff;
  font-size: 0; line-height: 1; opacity: 1; cursor: pointer; box-shadow: none; min-height: 0;
}
.kkp-modal--kkp .kkp-close:hover { border-color: #ffffff; }
.kkp-modal--kkp .kkp-close:focus-visible { outline: none; box-shadow: var(--kkp-shadow-focus); }
.kkp-modal--kkp .kkp-close svg { display: block; }
.kkp-modal--kkp .kkp-modal-pea { display: flex; flex-direction: column; gap: 6px; padding-right: 60px; }
.kkp-modal--kkp .kkp-modal-pea .kkp-eyebrow { color: var(--kkp-accent); margin: 0; }
.kkp-modal--kkp .kkp-modal-inner h3 { margin: 0; font: 700 32px/38px var(--font-sans); letter-spacing: -.01em; color: #ffffff; }
.kkp-modal--kkp .kkp-image-hint { margin: 0; font-size: 16px; line-height: 24px; color: var(--kkp-on-dark-muted); }
/* kaamera / droon pillid */
.kkp-modal--kkp .kkp-allikad { display: flex; flex-wrap: wrap; gap: var(--kkp-space-2); }
.kkp-order-builder .kkp-modal--kkp label.kkp-allikas, .kkp-order-builder .kkp-modal--kkp label.kkp-allikas:hover, .kkp-order-builder .kkp-modal--kkp label.kkp-allikas:has(input:checked) {
  position: relative; display: inline-flex; min-height: 0; margin: 0; padding: 0; background: transparent; box-shadow: none; cursor: pointer;
}
.kkp-order-builder .kkp-modal--kkp label.kkp-allikas input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.kkp-modal--kkp .kkp-allikas span {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border: 1.5px solid var(--kkp-field-line); border-radius: var(--kkp-radius-pill); color: #ffffff;
  font: 700 13px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; transition: border-color .15s, background-color .15s;
}
.kkp-modal--kkp .kkp-allikas span b { font-weight: 800; opacity: .7; }
.kkp-modal--kkp .kkp-allikas input:checked + span { background: #ffffff; border-color: #ffffff; color: var(--kkp-ink); }
.kkp-modal--kkp .kkp-allikas input:focus-visible + span { box-shadow: 0 0 0 3px var(--kkp-card), 0 0 0 6px var(--kkp-accent); }
@media (hover: hover) { .kkp-modal--kkp .kkp-allikas input:not(:checked) + span:hover { border-color: #ffffff; } }
/* galerii aknas */
.kkp-modal--kkp .kkp-gallery { margin: 0; min-height: 120px; }
.kkp-modal--kkp .kkp-gallery-laen, .kkp-modal--kkp .kkp-gallery-viga { margin: 0; padding: var(--kkp-space-6); text-align: center; color: var(--kkp-on-dark-muted); font-size: 14px; }
.kkp-modal--kkp .kkp-gallery .kkpg .kkpg-item { border-radius: var(--kkp-radius-sm); transition: box-shadow .15s; }
.kkp-modal--kkp .kkp-gallery .kkpg .kkpg-item.is-valitud { box-shadow: 0 0 0 3px var(--kkp-card), 0 0 0 6px var(--kkp-accent); }
.kkp-modal--kkp .kkp-gallery .kkpg--vali .kkpg-item.is-valitud .kkpg-link::after,
.kkp-modal--kkp .kkp-gallery .kkpg--vali .kkpg-link[aria-pressed="true"]::after { box-shadow: none; }
.kkp-modal--kkp .kkp-gallery .kkpg--vali .kkpg-link[aria-pressed="true"] img { transform: none; }
.kkp-modal--kkp .kkp-gallery .kkpg .kkpg-check { width: 34px; height: 34px; top: 8px; right: 8px; background: rgba(20, 19, 24, .45); }
.kkp-modal--kkp .kkp-gallery .kkpg .kkpg-link[aria-pressed="true"] .kkpg-check { background: var(--kkp-accent); border-color: var(--kkp-accent); color: var(--kkp-on-accent); }
.kkp-modal--kkp .kkp-gallery .kkpg .kkpg-vaata { width: 36px; height: 36px; left: 8px; bottom: 8px; }
.kkp-modal--kkp .kkp-gallery .kkpg .kkpg-more, .kkp-modal--kkp .kkp-gallery .kkpg .kkpg-more:hover, .kkp-modal--kkp .kkp-gallery .kkpg .kkpg-more:focus {
  height: 48px; padding: 0 24px; border: 1.5px solid var(--kkp-field-line); border-radius: var(--kkp-radius-pill);
  background: transparent; color: #ffffff; font: 700 13px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
}
@media (hover: hover) { .kkp-modal--kkp .kkp-gallery .kkpg .kkpg-more:hover { border-color: #ffffff; } }
.kkp-modal--kkp .kkp-gallery .kkpg .kkpg-note { display: none; }
/* jalus: eelvaade + roosa nupp */
.kkp-modal--kkp .kkp-modal-footer {
  position: sticky; bottom: calc(-1 * var(--kkp-space-8)); margin: 0 calc(-1 * var(--kkp-space-8)) calc(-1 * var(--kkp-space-8));
  padding: var(--kkp-space-4) var(--kkp-space-8) var(--kkp-space-6);
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--kkp-space-4);
  background: var(--kkp-card); border-top: 1px solid var(--kkp-divider); border-radius: 0 0 var(--kkp-radius-card) var(--kkp-radius-card); box-shadow: none; z-index: 3;
}
.kkp-modal--kkp .kkp-selected-preview { display: flex; align-items: center; gap: var(--kkp-space-3); min-width: 0; margin: 0; }
.kkp-modal--kkp .kkp-selected-preview img { display: block; width: 72px; height: 54px; max-width: none; margin: 0; object-fit: cover; border: 0; border-radius: 8px; box-shadow: 0 0 0 2px var(--kkp-card), 0 0 0 4px var(--kkp-accent); }
.kkp-modal--kkp .kkp-selected-label { font-size: 14px; line-height: 20px; color: var(--kkp-on-dark-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kkp-modal--kkp .kkp-selected-label:empty { display: none; }
.kkp-modal--kkp .kkp-confirm, .kkp-modal--kkp .kkp-confirm:hover, .kkp-modal--kkp .kkp-confirm:focus { margin: 0 0 0 auto; width: auto; max-width: none; flex: none; font-size: var(--kkp-btn-fs); padding: 0 var(--kkp-btn-px); }
@media (max-width: 860px) {
  .kkp-modal--kkp { padding: 0; align-items: flex-end; }
  .kkp-modal--kkp .kkp-modal-inner { max-height: 94vh; max-height: 94dvh; padding: var(--kkp-space-6) var(--kkp-space-4) var(--kkp-space-4); border-radius: var(--kkp-radius-card) var(--kkp-radius-card) 0 0; gap: var(--kkp-space-4); }
  .kkp-modal--kkp .kkp-close, .kkp-modal--kkp .kkp-close:hover, .kkp-modal--kkp .kkp-close:focus { top: var(--kkp-space-4); right: var(--kkp-space-4); width: 40px; height: 40px; }
  .kkp-modal--kkp .kkp-modal-inner h3 { font-size: 24px; line-height: 30px; }
  .kkp-modal--kkp .kkp-image-hint { font-size: 14px; line-height: 20px; }
  .kkp-modal--kkp .kkp-allikas span { height: 40px; padding: 0 14px; font-size: 12px; }
  /* product-modal.css teeb jaluse telefonis fixed !important (Envira aken) – siin jääb see akna sees kleepuvaks */
  .kkp-modal--kkp .kkp-modal-inner { padding-bottom: var(--kkp-space-4) !important; }
  .kkp-modal--kkp .kkp-modal-footer {
    position: sticky !important; bottom: calc(-1 * var(--kkp-space-4)) !important; left: auto !important; right: auto !important; z-index: 3 !important;
    margin: 0 calc(-1 * var(--kkp-space-4)) calc(-1 * var(--kkp-space-4));
    padding: var(--kkp-space-3) var(--kkp-space-4) calc(var(--kkp-space-4) + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--kkp-card) !important; border-radius: 0; box-shadow: none !important;
    display: flex !important; flex-direction: row !important;
  }
  .kkp-modal--kkp .kkp-selected-preview img { width: 56px; height: 42px; }
  .kkp-modal--kkp .kkp-confirm, .kkp-modal--kkp .kkp-confirm:hover { padding-left: 18px; padding-right: 18px; }
}
/* tellimisvormi pildi eelvaade: failinimi ostukorvis */
.kkp-cart-table .kkp-cart-failinimi { display: block; width: var(--kkp-ct-thumb); margin-top: 4px; font-size: 11px; line-height: 14px; color: var(--kkp-on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 13. Teema (Astra) nupustiilide eest kaitse (v1.4.0) ----------
   Astra: `button:hover, button:focus { padding: 15px 30px; … }` ja `body button { margin: 4px 2px }` venitavad nuppe
   hiirega/fookusega (telefonis jääb :hover pärast puudutust külge). Siin on samad mõõdud :hover/:focus/:active olekus
   uuesti kirjas, suurema täpsusega kui teema reeglid. */
.kkp-btn:hover, .kkp-btn:focus, .kkp-btn:active, .kkp-pcard-btn:hover, .kkp-pcard-btn:focus, .kkp-pcard-btn:active,
.kkp-submit-order-btn:hover, .kkp-submit-order-btn:focus, .kkp-submit-order-btn:active {
  margin: 0; padding: 0 var(--kkp-btn-px); min-height: var(--kkp-btn-h); border: 0;
  font-size: var(--kkp-btn-fs); line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; text-shadow: none;
}
.kkp-btn--block:hover, .kkp-btn--block:focus { width: 100%; }
.kkp-submit-order-btn:hover, .kkp-submit-order-btn:focus { padding-block: 12px; }
.kkp-cat-nav:not(.kkp-cat-nav--pildid) button:hover, .kkp-cat-nav:not(.kkp-cat-nav--pildid) button:focus, .kkp-cat-nav:not(.kkp-cat-nav--pildid) button:active {
  margin: 0; min-height: var(--kkp-cat-h); padding: 0 var(--kkp-cat-px); border-width: 1.5px; font-size: var(--kkp-cat-fs); font-weight: 700; line-height: 1; letter-spacing: normal; text-transform: none; text-shadow: none; box-shadow: none;
}
.kkp-cat-nav:not(.kkp-cat-nav--pildid) button:hover:not([aria-pressed="true"]) { background: var(--kkp-page); color: var(--kkp-ink); border-color: var(--kkp-ink); }
.kkp-cat-nav:not(.kkp-cat-nav--pildid) button[aria-pressed="true"]:is(:hover, :focus, :active) { background: var(--kkp-ink); color: var(--kkp-on-dark); border-color: var(--kkp-ink); }
.kkp-cat-nav button:focus-visible { box-shadow: var(--kkp-shadow-focus); }
.kkp-qty button:hover, .kkp-qty button:focus, .kkp-qty button:active {
  margin: 0; padding: 0; width: var(--kkp-qty-btn); height: var(--kkp-qty-btn); min-height: 0; min-width: 0; border: 0; border-radius: 50%;
  font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; text-shadow: none; box-shadow: none;
}
.kkp-qty button:focus-visible { box-shadow: var(--kkp-shadow-focus); }
.kkp-link-btn:hover, .kkp-link-btn:focus, .kkp-link-btn:active, .kkp-cart-remove:hover, .kkp-cart-remove:focus, .kkp-cart-remove:active {
  margin: 0; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none;
  font-size: 13px; line-height: 1.4; letter-spacing: normal; text-transform: none; text-shadow: none; text-decoration: underline;
}
.kkp-link-btn:hover, .kkp-cart-remove:hover { color: var(--kkp-accent); }
.kkp-link-btn:focus-visible, .kkp-cart-remove:focus-visible { outline: none; box-shadow: var(--kkp-shadow-focus); border-radius: 4px; }
.kkp-gallery-item:hover, .kkp-gallery-item:focus, .kkp-gallery-item:active,
.kkp-order-builder .kkp-color-option:hover, .kkp-order-builder .kkp-color-option:focus, .kkp-order-builder .kkp-color-option:active {
  margin: 0; padding: 0; min-height: 0; min-width: 0; border: 0; background-color: var(--kkp-panel); text-shadow: none;
}
.kkp-order-builder .kkp-color-option:hover, .kkp-order-builder .kkp-color-option:focus, .kkp-order-builder .kkp-color-option:active { background-color: transparent; }
.kkp-gallery-item:focus-visible { box-shadow: var(--kkp-shadow-focus); }
.kkp-modal--kkp .kkp-confirm:focus, .kkp-modal--kkp .kkp-confirm:active { margin: 0 0 0 auto; }

/* poe aknast avatud suur vaade: failinime klient ei vaja (see on kliendialbumi jaoks) */
body.kkp-modal-open #kkplb .kkplb-desc { display: none; }

/* ---------- 14. Tootekaart: pilt on nupp, „Loe lähemalt“, näidise silt (v1.5.0) ---------- */
.kkp-pcard .kkp-pcard-media, .kkp-pcard .kkp-pcard-media:hover, .kkp-pcard .kkp-pcard-media:focus, .kkp-pcard .kkp-pcard-media:active {
  display: block; width: 100%; margin: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: var(--kkp-panel);
  box-shadow: none; text-shadow: none; letter-spacing: normal; text-transform: none; cursor: pointer; position: relative;
}
.kkp-pcard .kkp-pcard-media:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--kkp-accent); }
.kkp-pcard .kkp-pcard-naidis {
  position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: var(--kkp-radius-pill);
  background: rgba(20, 19, 24, .72); color: #ffffff; font: 700 11px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.kkp-pcard .kkp-pcard-actions { display: grid; gap: var(--kkp-space-2); margin: var(--kkp-space-4) var(--kkp-pcard-pad) var(--kkp-pcard-pad); }
.kkp-pcard .kkp-pcard-actions .kkp-pcard-btn { margin: 0; }
.kkp-pcard .kkp-pcard-info, .kkp-pcard .kkp-pcard-info:hover, .kkp-pcard .kkp-pcard-info:focus, .kkp-pcard .kkp-pcard-info:active {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin: 0; padding: 0 18px; min-height: 0;
  border: 1.5px solid var(--kkp-field-line); border-radius: var(--kkp-radius-pill); background: transparent; color: var(--kkp-on-dark);
  font: 700 13px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; text-shadow: none; box-shadow: none; cursor: pointer;
  transition: border-color .15s ease;
}
.kkp-pcard .kkp-pcard-info:hover { border-color: #ffffff; }
.kkp-pcard .kkp-pcard-info:focus-visible { box-shadow: 0 0 0 3px var(--kkp-card), 0 0 0 6px var(--kkp-accent); }

/* ---------- 15. Toote detailvaade (aken) ---------- */
.kkp-modal--toode .kkp-modal-inner { max-width: 1100px; gap: 0; }
.kkp-toode { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--kkp-space-8); align-items: start; }
.kkp-toode-pildid { display: grid; gap: var(--kkp-space-3); position: sticky; top: 0; }
.kkp-toode-suur { position: relative; aspect-ratio: 4 / 3; border-radius: var(--kkp-radius-panel); overflow: hidden; background: var(--kkp-panel); }
.kkp-toode-suur img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: 0; pointer-events: none; -webkit-user-drag: none; }
.kkp-toode-pildisilt {
  position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: var(--kkp-radius-pill);
  background: rgba(20, 19, 24, .72); color: #ffffff; font: 700 11px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
}
.kkp-toode-pisid { display: flex; flex-wrap: wrap; gap: var(--kkp-space-2); }
.kkp-toode-pisid:empty { display: none; }
.kkp-toode-pisid button, .kkp-toode-pisid button:hover, .kkp-toode-pisid button:focus, .kkp-toode-pisid button:active {
  width: 84px; height: 63px; margin: 0; padding: 0; min-height: 0; border: 0; border-radius: var(--kkp-radius-sm); overflow: hidden;
  background: var(--kkp-panel); box-shadow: none; opacity: .55; cursor: pointer; transition: opacity .15s, box-shadow .15s;
}
.kkp-toode-pisid button img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: 0; pointer-events: none; }
.kkp-toode-pisid button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--kkp-card), 0 0 0 4px var(--kkp-accent); }
.kkp-toode-pisid button:hover { opacity: 1; }
.kkp-toode-pisid button:focus-visible { opacity: 1; box-shadow: 0 0 0 2px var(--kkp-card), 0 0 0 4px #ffffff; }
.kkp-toode-info { display: flex; flex-direction: column; gap: var(--kkp-space-4); padding-right: 56px; min-width: 0; }
.kkp-toode-info .kkp-eyebrow { margin: 0; color: var(--kkp-accent); }
.kkp-modal--toode .kkp-modal-inner h3 { margin: 0; font: 800 36px/42px var(--font-sans); letter-spacing: -.02em; color: #ffffff; }
.kkp-toode-hind { margin: 0; font: 800 28px/34px var(--font-sans); color: var(--kkp-accent); }
.kkp-toode-hind .kkp-from { margin-right: 6px; font-size: 14px; font-weight: 500; color: var(--kkp-on-dark-muted); }
.kkp-toode-compare { display: block; margin-top: 2px; font: 500 14px/20px var(--font-sans); color: var(--kkp-on-dark-muted); }
.kkp-toode-kirjeldus { margin: 0; font-size: 16px; line-height: 26px; color: var(--kkp-on-dark); }
.kkp-toode-tabel { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; margin: 0; padding: var(--kkp-space-4) 0; border-top: 1px solid var(--kkp-divider); border-bottom: 1px solid var(--kkp-divider); }
.kkp-toode-tabel:empty { display: none; }
.kkp-toode-tabel dt { margin: 0; font: 700 12px/20px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--kkp-on-dark-muted); }
.kkp-toode-tabel dd { margin: 0; font-size: 15px; line-height: 22px; color: var(--kkp-on-dark); }
.kkp-toode-tabel ul { margin: 0; padding-left: 18px; }
.kkp-toode-tabel li { margin: 0 0 2px; }
.kkp-toode-valikud .kkp-label { margin: 0 0 8px; font: 700 12px/16px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: #ffffff; }
.kkp-toode-valikud-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kkp-toode-valikud-list li { margin: 0; font-size: 14px; line-height: 20px; color: var(--kkp-on-dark-muted); }
.kkp-toode-valikud-list li b { color: #ffffff; font-weight: 700; }
.kkp-toode-valikud-list .kkp-toode-mod { color: var(--kkp-accent); font-weight: 700; }
.kkp-toode-varv { display: inline-block; width: 12px; height: 12px; margin: 0 4px 0 0; border-radius: 50%; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.kkp-toode-tarne { margin: 0; font-size: 14px; line-height: 20px; color: var(--kkp-on-dark-muted); }
.kkp-toode-nupud { display: flex; gap: var(--kkp-space-3); flex-wrap: wrap; padding-top: var(--kkp-space-2); }
.kkp-toode-nupud .kkp-btn, .kkp-toode-nupud .kkp-btn:hover, .kkp-toode-nupud .kkp-btn:focus { flex: 1 1 auto; }
.kkp-modal--toode .kkp-close, .kkp-modal--toode .kkp-close:hover, .kkp-modal--toode .kkp-close:focus { top: var(--kkp-space-8); right: var(--kkp-space-8); }
@media (max-width: 860px) {
  .kkp-toode { grid-template-columns: minmax(0, 1fr); gap: var(--kkp-space-4); }
  .kkp-toode-pildid { position: static; }
  .kkp-toode-pisid button, .kkp-toode-pisid button:hover, .kkp-toode-pisid button:focus { width: 64px; height: 48px; }
  .kkp-toode-info { padding-right: 0; gap: var(--kkp-space-3); }
  .kkp-modal--toode .kkp-modal-inner h3 { font-size: 26px; line-height: 32px; }
  .kkp-toode-hind { font-size: 24px; line-height: 30px; }
  .kkp-toode-tabel { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .kkp-toode-tabel dd { margin-bottom: 8px; }
  .kkp-toode-nupud { flex-direction: column; }
  .kkp-modal--toode .kkp-close, .kkp-modal--toode .kkp-close:hover, .kkp-modal--toode .kkp-close:focus { top: var(--kkp-space-4); right: var(--kkp-space-4); }
}

/* ---------- 16. Omniva otsing (v1.5.0) ---------- */
#kkp-parcel-select-wrap { display: grid; gap: var(--kkp-space-3); }
.kkp-cart input[type="search"]#kkp-parcel-search { -webkit-appearance: none; appearance: none; }
.kkp-cart input[type="search"]#kkp-parcel-search::-webkit-search-cancel-button { -webkit-appearance: none; }
.kkp-parcel-hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--kkp-on-dark-muted); }
.kkp-cart select#kkp-parcel-machine optgroup { font-style: normal; font-weight: 700; color: var(--kkp-ink); background: #ffffff; }
.kkp-cart select#kkp-parcel-machine option { color: var(--kkp-ink); background: #ffffff; font-weight: 400; }


/* ---------- 17. Kategooriad pildiga + pealkirjad teema värvi eest kaitstud (v1.5.1) ----------
   Kategooria nupp = väike kaart: ruudukujuline pilt (kategooria esimese toote foto), nimi ja toodete arv.
   Kõik olekud (:hover/:focus/:active) on täielikult kirjas, et teema/Beaver Builderi nupustiil ei muudaks
   teksti suurust, suurtähti ega täiteid. */
.kkp-cat-nav.kkp-cat-nav--pildid {
  --kkp-cat-min: 108px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--kkp-cat-min), 1fr));
  gap: var(--kkp-space-3) var(--kkp-space-2);
  margin: 0 0 var(--kkp-space-6);
  padding: 0;
  list-style: none;
}
.kkp-cat-nav--pildid > li { margin: 0; padding: 0; min-width: 0; list-style: none; }
.kkp-cat-nav--pildid > li::before, .kkp-cat-nav--pildid > li::marker { content: none; display: none; }
.kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn,
.kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn:hover,
.kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn:focus,
.kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn:active {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 6px 6px 12px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--kkp-ink);
  font: 600 13px/1.25 var(--font-sans);
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  text-shadow: none;
  text-decoration: none;
  white-space: normal;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn:hover { background: rgba(20, 19, 24, .055); }
.kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn:focus-visible { box-shadow: var(--kkp-shadow-focus); }
.kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn[aria-pressed="true"],
.kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn[aria-pressed="true"]:hover,
.kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn[aria-pressed="true"]:focus,
.kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn[aria-pressed="true"]:active {
  background: var(--kkp-ink);
  color: var(--kkp-on-dark);
}
.kkp-cat-nav--pildid .kkp-cat-pilt {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 0 10px;
  overflow: hidden;
  border-radius: 15px;
  background: linear-gradient(180deg, #ece8e1, #ddd7ce);
  box-shadow: inset 0 0 0 1px rgba(20, 19, 24, .06);
}
.kkp-cat-nav--pildid .kkp-cat-pilt img {
  display: block; width: 100%; height: 100%; max-width: none; margin: 0; border: 0; border-radius: 0;
  object-fit: cover; transition: transform .45s ease;
}
.kkp-cat-nav--pildid .kkp-cat-btn:hover .kkp-cat-pilt img { transform: scale(1.06); }
.kkp-cat-nav--pildid .kkp-cat-nimi {
  display: block; padding: 0 2px; font: inherit; color: inherit;
  overflow-wrap: anywhere; hyphens: auto;
}
.kkp-cat-nav--pildid .kkp-cat-arv {
  display: block; margin-top: 3px; font: 500 12px/1.2 var(--font-sans); letter-spacing: normal; text-transform: none;
  color: var(--kkp-ink-muted);
}
.kkp-cat-nav--pildid .kkp-cat-btn[aria-pressed="true"] .kkp-cat-arv { color: var(--kkp-accent); }
.kkp-cat-nav--pildid .kkp-cat-btn[aria-pressed="true"] .kkp-cat-pilt { box-shadow: 0 0 0 2px var(--kkp-ink), 0 0 0 4px var(--kkp-accent); }
/* kategooria kirjeldus navi all: veidi rohkem õhku ja nähtav */
.kkp-cat-nav--pildid + .kkp-cat-section .kkp-cat-tagline,
.kkp-catalog--filtered .kkp-cat-tagline { margin: 0 0 var(--kkp-space-5, 20px); font-size: 15px; line-height: 1.45; color: var(--kkp-ink-muted); }

/* Telefon (1.6.2): kõik kategooriad korraga nähtaval – 2 veergu kompaktseid ridu (pisipilt + nimi + toodete arv).
   Varem oli libistatav riba, kus klient ei saanud aru, et paremal on veel kategooriaid. */
@media (max-width: 640px) {
  .kkp-cat-nav.kkp-cat-nav--pildid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 8px;
    overflow: visible;
    margin: 0 0 var(--kkp-space-5, 20px);
    padding: 0;
  }
  .kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn,
  .kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn:hover,
  .kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn:focus,
  .kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn:active {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 1px;
    align-items: center;
    align-content: center;
    min-height: 60px;
    padding: 8px 10px 8px 8px;
    border-radius: 16px;
    background: var(--kkp-page);
    box-shadow: inset 0 0 0 1.5px var(--kkp-line-strong);
    font-size: 13px;
    line-height: 1.2;
    text-align: left;
  }
  .kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn[aria-pressed="true"],
  .kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn[aria-pressed="true"]:hover,
  .kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn[aria-pressed="true"]:focus,
  .kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn[aria-pressed="true"]:active {
    background: var(--kkp-ink);
    color: var(--kkp-on-dark);
    box-shadow: inset 0 0 0 1.5px var(--kkp-ink);
  }
  .kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn:focus-visible { box-shadow: var(--kkp-shadow-focus); }
  .kkp-cat-nav--pildid .kkp-cat-pilt {
    grid-column: 1; grid-row: 1 / span 2;
    width: 44px; height: 44px; aspect-ratio: auto; margin: 0; border-radius: 12px;
  }
  .kkp-cat-nav--pildid .kkp-cat-nimi { grid-column: 2; grid-row: 1; padding: 0; font-weight: 700; overflow-wrap: break-word; hyphens: manual; }
  .kkp-cat-nav--pildid .kkp-cat-arv { grid-column: 2; grid-row: 2; margin: 0; font-size: 11.5px; }
  .kkp-cat-nav--pildid .kkp-cat-btn[aria-pressed="true"] .kkp-cat-pilt { box-shadow: 0 0 0 2px var(--kkp-accent); }
  .kkp-cat-nav--pildid .kkp-cat-btn:hover .kkp-cat-pilt img { transform: none; }
  @media (max-width: 380px) {
    .kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn,
    .kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn:hover,
    .kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn:focus,
    .kkp-cat-nav.kkp-cat-nav--pildid .kkp-cat-btn:active { grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; padding: 7px 8px 7px 7px; font-size: 12.5px; }
    .kkp-cat-nav--pildid .kkp-cat-pilt { width: 36px; height: 36px; border-radius: 10px; }
  }
  /* paaritu arv kategooriaid: viimane täislaiuses, et ruudustik ei jääks auguga */
  .kkp-cat-nav--pildid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Pealkirjad tumedal pinnal: Beaver Builderi rea/mooduli tekstivärv (`.fl-node-… h3 { color }`) ja Astra
   pealkirjavärv ei tohi neid tumedaks teha (1.5.0-s olid tootekaartide nimed live'is mustad). */
.kkp-catalog .kkp-pcard h3.kkp-pcard-title,
.kkp-catalog .kkp-pcard > h3 {
  margin: var(--kkp-space-6) var(--kkp-pcard-pad) var(--kkp-space-2);
  font: 700 var(--kkp-pcard-title-fs)/1.28 var(--font-sans);
  letter-spacing: normal;
  text-transform: none;
  color: var(--kkp-pcard-fg) !important;
}
.kkp-howto .kkp-howto-step h3,
.kkp-gifts .kkp-gift h3,
.kkp-cart .kkp-cart-panel h3,
.kkp-order-builder .kkp-product-info :is(h4, .kkp-product-info-title) { color: var(--kkp-on-dark) !important; text-transform: none; }
.kkp-order-builder > h2, .kkp-order-builder .kkp-step > h3 { color: var(--kkp-on-dark) !important; }
.kkp-modal.kkp-modal--kkp .kkp-modal-inner h3,
.kkp-modal.kkp-modal--toode .kkp-modal-inner h3 { color: #ffffff !important; text-transform: none; }
:is(.kkp-page, .kkp-catalog, .kkp-gifts, .kkp-faq, .kkp-howto, .kkp-gallery, .kkp-contact) :is(h2, h3).kkp-section-title.kkp-section-title { text-transform: none; letter-spacing: -.01em; }