/* ==== src/header/nokov-tokens.css ==== */
/* =============================================================
   NOKOV Design System — TOKENY
   Varianta D (Architectural Technical Premium)

   DVĚ VRSTVY, schválně oddělené:

   1) --nkv-*  = zdroj pravdy NOKOV. Nic z toho nezná Shoptet.
   2) mapování = přepis tokenů, které Disco (template-13) používá
                 uvnitř svého vlastního CSS.

   Disco má vlastní token systém (117 proměnných, ověřeno v
   main-13.less.css). Proto NEPŘEBÍJÍME jeho pravidla vyšší
   specificitou — jen mu podstrčíme jiné hodnoty a přestyluje se sám.

   ⚠️ ROZSAH: mapování je schválně NE v :root, ale jen na
   .top-navigation-bar a #header. Kdyby bylo v :root, přebarvilo by
   to celý e-shop (karty, patičku, košík) — to teď není zadáno.
   Až budeme dělat další komponenty, mapování se rozšíří vědomě.

   Načítá se do <head> (Bender: src/header/ → styles.header.css),
   tedy AŽ ZA main-13.less.css → přepis funguje bez !important.
   Ověřeno na pořadí v DOMu: Disco CSS 4895 → User include 5136.
   ============================================================= */

/* --- PROTOTYP: fonty z Google Fonts ---------------------------
   Jen pro Bender, ať se dá rychle iterovat.
   Do produkce NE — viz README, sekce "Načítání fontů".
   -------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&family=Libre+Franklin:wght@400;500;600&display=swap");

/* =============================================================
   BAREVNÝ SYSTÉM — UZAVŘENO MAJITELEM 12. 9. 2026

   #0044AA  Brand Blue   identita značky, skutečná barva loga
   #1565F5  Fresh Blue   interakce: hover, active, odkazy, zvýraznění
   #A1C900  Fresh Lime   KONVERZE: kalkulačka, hlavní CTA, poptávka
   #0C1219  Ink          tmavá textová barva — NENÍ to „NOKOV Blue"
   bílá + velmi světlé neutrály = hlavní plochy

   Dvě modré jsou záměr, ne nedopatření:
     Brand Blue = kdo jsme.   Fresh Blue = co se právě děje.

   ⛔ LIMETKA SE NEPOUŽÍVÁ:
      v hlavní navigaci · v běžných odkazech · na nadpisech ·
      jako odlišení kategorií
   ⛔ ŽÁDNÉ GRADIENTNÍ ANI VÍCEBAREVNÉ PODTRŽENÍ NAVIGACE.
      Hover i aktivní stav = jednobarevný Fresh Blue.
   ⛔ Barvy ani písmo se nemění podle kategorie. Kategorie odlišuje
      fotografie a obsah.

   ⚠️ Limetka nese VŽDY tmavý text (--nkv-lime-ink).
      Bílá na #A1C900 má kontrast 1,93 : 1 — neprojde.
      Tmavý text na téže limetce má 9,35 : 1.

   DOPLNĚK 21. 10. 2026 — schválený prémiový vzhled
   (nokov-static/nahledy/premium/, ADR-001 doplněk):
   - CTA „Nezávazně poptat" v hlavičce JE konverze → limetka, tmavý text.
     (Limetka dál nesmí do navigace, odkazů a nadpisů.)
   - horní lišta tmavá (Ink), vyhledávání a CTA zaoblené do „pilulky".
   - navigace Manrope 16,5 px; hover = jen linka 2 px Fresh Blue
     zleva doprava, TEXT ZŮSTÁVÁ TMAVÝ (vybráno majitelem, var. B).
   ============================================================= */
:root {
  /* ---------- barvy ---------- */
  --nkv-ink: #0c1219;          /* hlavní text */
  --nkv-ink-2: #39434f;        /* sekundární text */
  --nkv-muted: #6b7684;        /* popisky, placeholder */
  --nkv-surface: #ffffff;      /* hlavní plocha hlavičky */
  --nkv-soft: #f2f5f8;         /* pole hledání, jemné plochy */
  --nkv-soft-2: #e9eef3;
  --nkv-hair: #e6ebf0;         /* vlásové linky */
  --nkv-hair-2: #d4dce4;

  --nkv-brand: #0044aa;        /* Brand Blue — identita, logo */
  --nkv-fresh: #1565f5;        /* Fresh Blue — interakce */
  --nkv-fresh-dark: #0f4fc4;

  --nkv-lime: #a1c900;         /* Fresh Lime — jen konverze */
  --nkv-lime-dark: #8db000;
  --nkv-lime-ink: #0c1219;     /* tmavý text na limetce, nikdy bílá */

  /* akcent hlavičky = Fresh Blue (interakce), ne limetka */
  --nkv-accent: var(--nkv-fresh);
  --nkv-accent-ink: #ffffff;
  --nkv-accent-dark: var(--nkv-fresh-dark);

  /* trust bar — tmavý pruh (schváleno 21. 10. 2026) */
  --nkv-bar-bg: var(--nkv-ink);
  --nkv-bar-ink: #c7cfd8;
  --nkv-bar-ink-strong: #ffffff;
  --nkv-bar-hair: transparent;

  /* tmavé plochy (patička, souhrn) */
  --nkv-dark: var(--nkv-ink);
  --nkv-dark-ink: #c9d2dc;
  --nkv-dark-muted: #8f9bab;
  --nkv-dark-hair: #243040;

  /* ---------- typografie ---------- */
  --nkv-font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nkv-font-text: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- rádius ----------
     Architektonický, ne SaaS. Žádný pill (100px). */
  --nkv-radius-s: 6px;         /* pole hledání, drobné prvky */
  --nkv-radius-m: 8px;         /* CTA */
  --nkv-radius-l: 14px;        /* velké plochy, foto v mega-menu */
  --nkv-radius-pill: 999px;    /* vyhledávání a hlavní CTA (schváleno 21. 10. 2026) */

  /* ---------- rozměry hlavičky ----------
     Cíl majitele: plná 130–145 px, sticky 64–72 px. */
  --nkv-bar-h: 34px;           /* trust bar */
  --nkv-top-h: 62px;           /* logo + hledání + akce (CTA 46 px) */
  --nkv-nav-h: 48px;           /* navigace (písmo 16,5 px) */
  /* 34 + 62 + 48 = 144 px — pořád v cíli 130–145 */

  --nkv-top-h-sticky: 40px;
  --nkv-nav-h-sticky: 28px;
  /* 0 + 40 + 28 = 68 px */

  --nkv-gap: 28px;
  --nkv-pad-x: 24px;
}

/* =============================================================
   PÍSMO CELÉHO E-SHOPU (22. 10. 2026) — schválený vzhled platí všude,
   nejen v hlavičce. Disco bere písma z těchto dvou tokenů (DOCUMENTED,
   vkládá je administrace) → přepíšeme je pro celou stránku.
   ============================================================= */
:root {
  --template-font: var(--nkv-font-text);
  --template-headings-font: var(--nkv-font-display);
}

/* =============================================================
   MAPOVÁNÍ NA TOKENY DISCA — jen podstrom hlavičky.
   Vlastní proměnné se dědí, takže tímto přestylujeme celou
   hlavičku bez jediného !important a bez souboje o specificitu.
   ============================================================= */
.top-navigation-bar,
#header {
  /* plochy */
  --colors-surface-white: var(--nkv-surface);
  --colors-surface-primary: var(--nkv-surface);
  --colors-surface-secondary: var(--nkv-soft);

  /* text */
  --colors-foregrounds-content-primary: var(--nkv-ink);
  --colors-foregrounds-headlines-primary: var(--nkv-ink);
  --colors-foregrounds-content-secondary: var(--nkv-ink-2);
  --colors-foregrounds-content-tertiary: var(--nkv-muted);
  --colors-foregrounds-content-inverted: var(--nkv-surface);

  /* linky */
  --colors-foregrounds-borders-secondary: var(--nkv-hair);
  --colors-forms-border: var(--nkv-hair-2);
  --colors-forms-background: var(--nkv-soft);

  /* akcent — Disco ho bere z administrace jako --color-primary */
  --color-primary: var(--nkv-accent);
  --color-primary-hover: var(--nkv-accent-dark);
  --color-header-background: var(--nkv-surface);

  /* hlavička v Discu počítá se svým vlastním textem přes --_color-header-* */
  --_color-header-text: var(--nkv-ink);
  --_color-header-link: var(--nkv-ink);
  --_color-header-contrast-text: var(--nkv-ink);

  /* formulářové prvky — tohle je přesně ten rádius,
     kvůli kterému nemusíme přebíjet .search-input */
  --form-controls-border-radius: var(--nkv-radius-s);
  --form-controls-padding-y: 9px;
  --form-controls-padding-x: 14px;
  --form-controls-font-size: 14px;

  /* písmo — Disco je bere z administrace */
  --template-font: var(--nkv-font-text);
  --template-headings-font: var(--nkv-font-display);

  /* podtržení odkazů — v hlavičce ho nechceme */
  --hyperlinks-underline-thickness: 0;
  --hyperlinks-underline-thickness-hover: 0;

  --transition-duration: 0.18s;
  --transition-timing: cubic-bezier(0.2, 0, 0.2, 1);
}

/* Hlavní barva Disca z administrace je stará modrá #239ceb („použít mé barvy" při přepnutí).
   Na celém webu ji nahradíme modrou z design systému (tlačítka a odkazy v obsahu, filtry…). */
:root {
  --color-primary: var(--nkv-fresh);
  --color-primary-hover: var(--nkv-fresh-dark);
}

/* ==== src/header/nokov-header.css ==== */
/* =============================================================
   NOKOV Design System — HLAVIČKA, varianta D
   Staví NAD existující DOM Shoptet Disco (template-13).
   Nic nepřekresluje, nic nenahrazuje.

   Breakpoint 768 px = hranice, na které Disco samo přepíná
   mezi desktopovou a mobilní hlavičkou (ověřeno v main-13.less.css:
   nad 768 px skrývá hamburger a zapíná .menu-helper).
   ============================================================= */

/* ============================================================
   1. TRUST BAR  ->  .top-navigation-bar
   Existující prvek Disca. Obsah se plní z administrace
   (Vzhled -> Horní menu), NEVKLÁDÁME žádné vlastní HTML.
   Cíl: jemný informační pruh, ne reklamní proužek.
   ============================================================ */
.top-navigation-bar {
  background: var(--nkv-bar-bg);
  border-bottom: 1px solid var(--nkv-bar-hair);
  font-family: var(--nkv-font-text);
  font-size: 12.5px;
  min-height: var(--nkv-bar-h);
}
.top-navigation-bar > .container {
  align-items: center;
  display: flex;
  gap: var(--nkv-gap);
  min-height: var(--nkv-bar-h);
}
.top-navigation-bar .top-navigation-bar-menu {
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
}
.top-navigation-bar .top-navigation-bar-menu > li { list-style: none; }
.top-navigation-bar a {
  color: var(--nkv-bar-ink);
  font-weight: 500;
  text-decoration: none;
}
.top-navigation-bar a:hover { color: var(--nkv-bar-ink-strong); }
/* argumenty z Horního menu: limetková pomlčka před každým (jen dekorace) */
.top-navigation-bar .top-navigation-bar-menu > li > a::before {
  color: var(--nkv-lime);
  content: "—";
  margin-right: 8px;
}
/* telefon a e-mail z Horního menu (odkazy tel:/mailto:) — výrazně, bez pomlčky.
   Telefon nese většinu poptávek, v Discu bez tohohle v liště není. */
.top-navigation-bar a[href^="tel:"],
.top-navigation-bar a[href^="mailto:"] { color: var(--nkv-bar-ink-strong); font-weight: 600; }
.top-navigation-bar a[href^="tel:"]::before,
.top-navigation-bar a[href^="mailto:"]::before { content: none; }
/* přihlášení/registrace a měna v tmavé liště */
.top-navigation-bar .top-navigation-tools,
.top-navigation-bar .top-navigation-tools button,
.top-navigation-bar .top-navigation-tools a { color: var(--nkv-bar-ink); }
.top-navigation-bar .top-navigation-tools { margin-left: auto; }

/* ============================================================
   2. SKOŘÁPKA HLAVIČKY + VÝŠKY
   Disco už má #header{position:fixed}. Sticky NEPROGRAMUJEME.
   ============================================================ */
#header {
  background: var(--nkv-surface);
  border-bottom: 1px solid var(--nkv-hair);
  box-shadow: none;
  font-family: var(--nkv-font-text);
}
#header .header-top { padding: 0; }
#header .header-top > .container {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--nkv-gap);
  min-height: var(--nkv-top-h);
}
/* Disco dává všem třem prvkům horní řady flex: 0 1 33.3333 %.
   S naším gapem to dá přes 100 % a řada se zalomí do dvou řádků
   (ověřeno v prototypu). Proto šířky určujeme sami. */
#header .header-top > .container > .site-name { flex: 0 0 auto; }
#header .header-top > .container > .search { flex: 1 1 auto; }
#header .header-top > .container > .navigation-buttons {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ---- logo ---------------------------------------------------
   V produkci sem patří SKUTEČNÉ logo NOKOV z administrace.
   Neděláme typografickou náhradu fontem.                      */
#header .site-name {
  border-bottom: 0;          /* Disco tu má 1pt solid #ccc */
  flex: 0 0 auto;
  margin: 0;
}
#header .site-name a { display: block; line-height: 0; }
#header .site-name img {
  max-height: 40px;
  max-width: 180px;
  transition: max-height var(--transition-duration) var(--transition-timing);
  width: auto;
}

/* ---- vyhledávání -------------------------------------------
   Rádius řídí --form-controls-border-radius z nokov-tokens.css.
   Funkci hledání (POST na /action/ProductSearch/...) nesaháme.  */
#header .search { flex: 1 1 auto; max-width: 480px; }
#header .search-form .search-input {
  background: var(--nkv-soft);
  border: 1px solid transparent;
  border-radius: var(--nkv-radius-pill);
  font-family: var(--nkv-font-text);
  transition: background var(--transition-duration) var(--transition-timing),
              border-color var(--transition-duration) var(--transition-timing);
}
#header .search-form .search-input:hover {
  background: var(--nkv-surface);
  border-color: var(--nkv-hair-2);
}
#header .search-form .search-input:focus {
  background: var(--nkv-surface);
  border-color: var(--nkv-accent);
  outline: 2px solid color-mix(in srgb, var(--nkv-accent) 22%, transparent);
  outline-offset: 1px;
}
#header .search-form .search-button {
  border-radius: var(--nkv-radius-pill);
  font-family: var(--nkv-font-text);
  font-weight: 600;
}

/* ---- ikony (košík, hledání, hamburger) ---------------------- */
#header .navigation-buttons { flex: 0 0 auto; }
@media (min-width: 768px) {
  #header .navigation-buttons a {
    height: 40px;
    line-height: 40px;
    margin-left: 22px;
  }
  #header .navigation-buttons a.cart-count { color: var(--nkv-ink-2); }
  #header .navigation-buttons a:hover { color: var(--nkv-accent); }
}

/* ---- CTA Nezávazně poptat ----------------------------------
   JEDINÝ prvek hlavičky, který v DOMu Disca neexistuje
   a musí ho vložit náš adaptér.                               */
.nkv-cta {
  align-items: center;
  background: var(--nkv-accent);
  border-radius: var(--nkv-radius-pill);
  color: var(--nkv-accent-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--nkv-font-display);
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  height: 46px;
  line-height: 1;
  padding: 0 22px;
  text-decoration: none;
  transition: background var(--transition-duration) var(--transition-timing);
  white-space: nowrap;
}
.nkv-cta:hover,
.nkv-cta:focus { background: var(--nkv-accent-dark); color: var(--nkv-accent-ink); }
.nkv-cta:focus-visible { outline: 2px solid var(--nkv-ink); outline-offset: 2px; }
.nkv-cta svg { height: 15px; width: 15px; }
@media (max-width: 767px) { .nkv-cta { display: none; } }

/* ---- sekundární CTA (obrys) ---- */
.nkv-cta--ghost {
  background: transparent;
  border: 1px solid var(--nkv-hair-2);
  color: var(--nkv-ink);
}
.nkv-cta--ghost:hover,
.nkv-cta--ghost:focus {
  background: transparent;
  border-color: var(--nkv-fresh);
  color: var(--nkv-fresh);
}

/* ---- KONVERZNÍ CTA (limetka) -------------------------------
   Pouze kalkulačka, hlavní konverzní akce a poptávka.
   V hlavičce ani v navigaci se nepoužívá.

   ⚠️ Text je VŽDY tmavý. Bílá na #A1C900 má 1,93 : 1 a neprojde;
   tmavý text na téže limetce má 9,35 : 1.                      */
.nkv-cta--convert {
  background: var(--nkv-lime);
  color: var(--nkv-lime-ink);
  font-weight: 700;
}
.nkv-cta--convert:hover,
.nkv-cta--convert:focus {
  background: var(--nkv-lime-dark);
  color: var(--nkv-lime-ink);
}
.nkv-cta--convert:focus-visible { outline: 2px solid var(--nkv-ink); outline-offset: 2px; }

/* ============================================================
   3. NAVIGACE  ->  ul.menu-level-1
   POZOR: shoptet.menu.splitMenu() měří šířky položek a pozici
   .menu-helper (Více). Proto NEMĚNÍME display ani pořadí
   položek — jen typografii a výšku. Šířky zůstávají měřitelné.
   ============================================================ */
#header .header-bottom {
  border-top: 1px solid var(--nkv-hair);
  padding-bottom: 0;
  padding-top: 0;
}
@media (min-width: 768px) {
  #header #navigation { height: var(--nkv-nav-h); }
  /* .navigation-in je u Disca position:absolute uvnitř #navigation.
     Bez vlastní výšky splaskne na výšku textu (18 px) a odkazy se
     oříznou o overflow:hidden na #navigation (ověřeno v prototypu). */
  #header .navigation-in,
  #header .navigation-in > ul.menu-level-1,
  #header .navigation-in > ul.menu-level-1 > li { height: var(--nkv-nav-h); }
  #header .navigation-in > ul.menu-level-1 { flex-wrap: nowrap; }
  /* Disco drží spodní řadu na min-height:50px — bez tohohle
     se sticky nikdy nedostane pod 90 px (ověřeno v prototypu). */
  #header .header-bottom > .container { min-height: var(--nkv-nav-h); }
  #header .navigation-in > ul.menu-level-1 > li > a {
    align-items: center;
    color: var(--nkv-ink);
    display: flex;
    font-family: var(--nkv-font-display);
    font-size: 16.5px;
    font-weight: 600;
    height: 100%;
    letter-spacing: 0;
    padding: 0 18px;
    position: relative;
    text-transform: none;
  }
  /* „Více" musí sedět na stejné výšce, jinak se rozjede
     měření v shoptet.menu.splitMenu() */
  #header ~ .menu-helper,
  .menu-helper { height: var(--nkv-nav-h); }
  .menu-helper > span { align-items: center; display: flex; height: 100%; }
  #header .navigation-in > ul.menu-level-1 > li > a > b { font-weight: inherit; }
  /* podtržení akcentem — vyjede zleva doprava, 0,5 s jako dnešní eshop;
     JEDINÁ linka: Disco podtrhává odkazy i přes text-decoration → vypnuto */
  #header .navigation-in > ul.menu-level-1 > li > a,
  #header .navigation-in > ul.menu-level-1 > li > a:hover { text-decoration: none; }
  /* Disco (main-13.less.css, OBSERVED 22. 10. 2026) podtrhává TEXT UVNITŘ odkazu:
     #navigation .navigation-in ul li:hover>a>b {text-decoration:underline; …thickness:2px}
     → druhá tmavá linka pod naší modrou. Vypínáme ji ve vší úrovních menu. */
  #header #navigation .navigation-in ul li > a > b,
  #header #navigation .navigation-in ul li:hover > a > b,
  #header #navigation .navigation-in ul li:hover > a > span,
  #header #navigation .navigation-in ul li:hover > div > a > span { text-decoration: none; }
  #header .navigation-in > ul.menu-level-1 > li > a::after {
    background: var(--nkv-accent);
    bottom: 8px;
    content: "";
    height: 2px;
    left: 18px;
    position: absolute;
    right: 18px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--transition-timing);
  }
  #header .navigation-in > ul.menu-level-1 > li > a:hover::after,
  #header .navigation-in > ul.menu-level-1 > li.active > a::after { transform: scaleX(1); }
  #header .navigation-in > ul.menu-level-1 > li > a:hover,
  #header .navigation-in > ul.menu-level-1 > li.active > a { color: var(--nkv-ink); }

  /* měna + přihlášení vpravo */
  #header .navigation-in .navigationActions > li > a {
    color: var(--nkv-muted);
    font-size: 13.5px;
  }
  #header .navigation-in .navigationActions > li > a:hover { color: var(--nkv-accent); }
}

/* ============================================================
   4. MEGA-MENU  ->  ul.menu-level-2
   Disco dává KAŽDÉ položce druhé úrovně vlastní malý obrázek
   (a.menu-image). To je přesně ta galerie malých obrázků,
   kterou ve variantě D nechceme -> skrýváme ji a místo ní
   dáváme jeden velký vizuál (vkládá adaptér).

   Mapování na strukturu Disca:
     menu-level-2 <li>            = sloupec (Ploty / Brány / Podle potřeby)
     menu-level-2 <li> > div > a  = nadpis sloupce
     menu-level-3                 = odkazy ve sloupci
   ============================================================ */
@media (min-width: 768px) {
  /* POZOR: Disco otevírá podmenu třídami body.submenu-visible + li.ext.exp
     a samo mu dává display:flex. Kdyby se grid nastavil natvrdo,
     zůstala by VŠECHNA podmenu trvale otevřená (ověřeno v prototypu).
     Proto se grid zapíná jen na otevřeném podmenu. */
  body.submenu-visible #header .navigation-in > ul > li.ext.exp > ul.menu-level-2 {
    align-content: start;
    align-items: start;
    background: var(--nkv-surface);
    border-bottom-width: 0;
    border-top: 1px solid var(--nkv-hair);
    box-shadow: 0 18px 34px -22px rgba(12, 18, 25, 0.3);
    display: grid;
    gap: 28px 36px;
    grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(240px, 1.25fr);
    padding: 30px 32px 34px;
  }
  /* pryč s malými obrázky u položek */
  #header .menu-level-2 a.menu-image { display: none; }

  /* Disco počítá s flexem a dává položkám flex-basis:25 %, což se
     v gridu projeví jako width:25 % SLOUPCE — položka pak vyplní
     jen čtvrtinu svého sloupce (ověřeno v prototypu). */
  #header .menu-level-2 > li {
    border: 0;
    display: block;
    flex: initial;
    list-style: none;
    min-width: 0;
    padding: 0;
    width: auto;
  }
  /* nadpis sloupce */
  #header .menu-level-2 > li > div > a {
    color: var(--nkv-muted);
    font-family: var(--nkv-font-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 0 0 11px;
    text-transform: uppercase;
  }
  #header .menu-level-2 > li > div > a:hover { color: var(--nkv-accent); }
  /* odkazy ve sloupci */
  /* Disco drží třetí úroveň sbalenou (max-height:41.6px, overflow:hidden)
     a dopočítává si k ní .more-items-trigger. V mega-menu chceme
     celý seznam — je to jen pár položek. */
  #header .menu-level-2 ul.menu-level-3 {
    display: block;
    max-height: none;
    overflow: visible;
    padding: 0;
  }
  #header .menu-level-2 ul.menu-level-3 > li {
    display: block;
    list-style: none;
    width: auto;
  }
  #header .menu-level-2 .more-items-trigger { display: none; }
  #header .menu-level-2 ul.menu-level-3 > li > a {
    color: var(--nkv-ink-2);
    display: block;
    font-size: 14.5px;
    font-weight: 500;
    padding: 7px 0;
  }
  #header .menu-level-2 ul.menu-level-3 > li > a:hover { color: var(--nkv-accent); }

  /* --- velký vizuál (vkládá adaptér) ---
     Přišpendlený do posledního sloupce přes všechny řádky, ať se
     nerozbije, když kategorie nemá zrovna tři skupiny. */
  body.submenu-visible #header li.ext.exp > ul.menu-level-2 > li.nkv-mega-foto {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 4;
    grid-row: 1 / -1;
  }
  .nkv-mega-foto__obraz {
    align-items: center;
    aspect-ratio: 4 / 3;
    background: repeating-linear-gradient(135deg, var(--nkv-soft-2) 0 10px, var(--nkv-soft) 10px 20px);
    border: 1px dashed var(--nkv-hair-2);
    border-radius: var(--nkv-radius-l);
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 14px;
    text-align: center;
  }
  .nkv-mega-foto__obraz img { border-radius: var(--nkv-radius-l); height: 100%; object-fit: cover; width: 100%; }
  .nkv-mega-foto__placeholder {
    color: var(--nkv-accent);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.6;
    text-transform: uppercase;
  }
  .nkv-mega-foto__placeholder span {
    color: var(--nkv-muted);
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0;
    margin-top: 6px;
    text-transform: none;
  }
  .nkv-mega-foto__text { color: var(--nkv-muted); font-size: 13.5px; line-height: 1.55; margin: 0; }
  .nkv-mega-foto__cta {
    align-items: center;
    color: var(--nkv-accent);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 7px;
    text-decoration: none;
  }
  .nkv-mega-foto__odkaz { color: var(--nkv-muted); font-size: 13px; text-decoration: none; }
  .nkv-mega-foto__odkaz:hover { color: var(--nkv-accent); }
  /* bez tohohle Disco nafoukne naše SVG na plnou šířku sloupce */
  .nkv-mega-foto__cta svg { flex: 0 0 auto; height: 15px; width: 15px; }
  /* Disco dává odkazům v menu vlastní padding — v našem sloupci
     by z 12px mezery udělal skoro 70 px. */
  #header .nkv-mega-foto__cta,
  #header .nkv-mega-foto__odkaz { padding: 0; }
}

/* ============================================================
   5. STICKY  ->  html.scrolled
   Disco přidává na <html> třídy scrolled / scrolled-up /
   scrolled-down a samo řeší #header{position:fixed} i skrytí
   při scrollu dolů. My jen zmenšujeme. Žádný vlastní JS.
   Cíl: 40 + 28 = 68 px.
   ============================================================ */
@media (min-width: 768px) {
  html.scrolled .top-navigation-bar { display: none; }
  html.scrolled #header { box-shadow: 0 1px 3px rgba(12, 18, 25, 0.1); }

  /* Stačí přepsat proměnné — všechno, co je používá
     (výška řady, navigace, .navigation-in, li, a) se srovná samo. */
  html.scrolled #header {
    --nkv-top-h: var(--nkv-top-h-sticky);
    --nkv-nav-h: var(--nkv-nav-h-sticky);
    /* pole hledání je nejvyšší prvek řady — bez tohohle
       drží horní řadu na 43 px a sticky se do cíle nevejde */
    --form-controls-padding-y: 5px;
  }
  html.scrolled #header .header-bottom { padding-bottom: 0; padding-top: 0; }
  html.scrolled #header .site-name img { max-height: 26px; }
  html.scrolled #header .navigation-in > ul.menu-level-1 > li > a { font-size: 14px; }
  html.scrolled #header .navigation-in > ul.menu-level-1 > li > a::after { bottom: 3px; }
  html.scrolled .nkv-cta { height: 34px; padding: 0 16px; }
  html.scrolled #header .navigation-buttons a { height: 30px; line-height: 30px; }
}

/* ============================================================
   6. MOBIL  (< 768 px)
   Disco tu jede mobile-header-version-1: .toggle-window
   s data-target=search|cart|navigation. Tuhle mechaniku
   NENAHRAZUJEME, jen ji uklízíme.
   ============================================================ */
@media (max-width: 767px) {
  #header .header-top > .container {
    gap: 10px;
    min-height: 56px;
    padding-left: 14px;
    padding-right: 14px;
  }
  #header .site-name img { max-height: 30px; max-width: 130px; }
  #header .navigation-buttons a { height: 44px; line-height: 44px; width: 44px; }

  /* --- trust bar na mobilu ---
     VÝCHOZÍ: jen jeden nejsilnější argument, zbytek skrytý.
     Alternativy k porovnání: přepni třídu na <html>
       .nkv-trust--ikony  = všechny argumenty, drobným písmem
       .nkv-trust--skryty = trust bar úplně pryč          */
  .top-navigation-bar { font-size: 12px; }
  .top-navigation-bar > .container { justify-content: center; padding: 0 14px; }
  .top-navigation-bar .top-navigation-bar-menu { gap: 0; }
  .top-navigation-bar .top-navigation-bar-menu > li:not(:first-child) { display: none; }
  .top-navigation-bar .top-navigation-tools,
  .top-navigation-bar .top-navigation-menu-trigger { display: none; }

  html.nkv-trust--ikony .top-navigation-bar .top-navigation-bar-menu { gap: 16px; }
  html.nkv-trust--ikony .top-navigation-bar .top-navigation-bar-menu > li:not(:first-child) { display: block; }
  html.nkv-trust--ikony .top-navigation-bar { font-size: 11px; }

  html.nkv-trust--skryty .top-navigation-bar { display: none; }

  /* mobilní menu — výsuvný panel Disca */
  #header #navigation { font-family: var(--nkv-font-text); }
  #header .navigation-in > ul.menu-level-1 > li > a {
    align-items: center;
    display: flex;
    font-size: 15.5px;
    font-weight: 500;
    justify-content: space-between;
    min-height: 0;
    padding: 14px 18px;
  }
  /* Disco dává <b> uvnitř odkazu vlastní výšku i linku pod textem —
     položka pak měří 86 px a tváří se jako podtržený odkaz
     (ověřeno v prototypu). */
  #header .navigation-in > ul.menu-level-1 > li > a > b {
    border: 0;
    font-weight: inherit;
    line-height: 1.4;
    padding: 0;
    text-decoration: none;
  }
  #header .menu-level-2 > li > div > a {
    color: var(--nkv-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }
  #header .menu-level-2 a.menu-image { display: none; }
  #header .menu-level-2 ul.menu-level-3 > li > a { font-size: 14px; padding-left: 14px; }
  /* velký vizuál na mobilu nemá smysl */
  .nkv-mega-foto { display: none; }
}

/* přístupnost: viditelný fokus všude v hlavičce */
#header a:focus-visible,
.top-navigation-bar a:focus-visible {
  outline: 2px solid var(--nkv-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  #header *, .top-navigation-bar * { transition: none !important; }
}

/* ============================================================
   HORNÍ LIŠTA s argumenty (vkládá nokov-header.js, .nkv-lista-top)
   Seznam „Informace pro vás" plní i patičku → v liště ho jen schováme.
   ============================================================ */
html.nkv-ma-listu .top-navigation-bar .top-navigation-menu { display: none; }
.nkv-lista-top { align-items: center; display: flex; flex: 1 1 auto; gap: 28px; min-width: 0; }
.nkv-lista-top__arg { color: var(--nkv-bar-ink); font-family: var(--nkv-font-text); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.nkv-lista-top__arg::before { color: var(--nkv-lime); content: "—"; margin-right: 8px; }
.top-navigation-bar a.nkv-lista-top__kontakt { color: var(--nkv-bar-ink-strong); font-size: 13px; font-weight: 600; white-space: nowrap; }
.nkv-lista-top__kontakt:first-of-type { margin-left: auto; }
.top-navigation-bar a.nkv-lista-top__kontakt:hover { color: var(--nkv-lime); }
@media (max-width: 991px) { .nkv-lista-top__arg:nth-child(n+2) { display: none; } }
@media (max-width: 767px) {
  .nkv-lista-top { gap: 14px; justify-content: center; }
  .nkv-lista-top__arg { display: none; }
  .nkv-lista-top__kontakt:first-of-type { margin-left: 0; }
}

/* ============================================================
   MEGA MENU jako dlaždice s fotkou kategorie (22. 10. 2026)
   Shoptet v menu vykresluje jen 2 úrovně → místo prázdných sloupců
   ukážeme fotku kategorie (a.menu-image, dodává Shoptet) + název.
   ============================================================ */
@media (min-width: 768px) {
  body.submenu-visible #header .navigation-in > ul > li.ext.exp > ul.menu-level-2 {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    grid-auto-flow: dense;
  }
  body.submenu-visible #header li.ext.exp > ul.menu-level-2 > li.nkv-mega-foto { grid-column: span 2; grid-row: span 2; }
  #header .menu-level-2 > li:not(.nkv-mega-foto) { border-radius: 14px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
  #header .menu-level-2 > li:not(.nkv-mega-foto):hover { box-shadow: 0 10px 26px rgba(12,18,25,.12); transform: translateY(-2px); }
  #header .menu-level-2 a.menu-image {
    aspect-ratio: 4 / 3; background: radial-gradient(120% 90% at 50% 35%, #fff 0%, #eef0f2 60%, #e3e7eb 100%);
    border-radius: 14px; display: flex !important; align-items: center; justify-content: center; padding: 8px; width: 100%;
  }
  #header .menu-level-2 a.menu-image img { height: 100%; mix-blend-mode: multiply; object-fit: contain; width: 100%; }
  #header .menu-level-2 > li > div > a {
    color: var(--nkv-ink) !important; display: block; font: 600 15px var(--nkv-font-display) !important;
    letter-spacing: 0 !important; padding: 10px 4px 4px !important; text-transform: none !important;
  }
  #header .menu-level-2 > li > div > a:hover { color: var(--nkv-fresh) !important; }
  .nkv-mega-foto__obraz { aspect-ratio: auto; border: 0; height: 100%; min-height: 220px; padding: 0; }
}
@media (min-width: 768px) {
  body.submenu-visible #header .navigation-in > ul > li.ext.exp > ul.menu-level-2 {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(260px, 1.3fr) !important; grid-auto-flow: row;
  }
  body.submenu-visible #header li.ext.exp > ul.menu-level-2 > li.nkv-mega-foto { grid-column: 4 !important; grid-row: 1 / span 2 !important; }
  #header .menu-level-2 a.menu-image { aspect-ratio: 16 / 10; overflow: hidden; }
  #header .menu-level-2 a.menu-image img { transform: scale(1.7); }
  .nkv-mega-foto__obraz { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}

/* MEGA MENU — podkategorie v dlaždici (např. Náhradní díly): pod názvem jako drobné odkazy,
   bez čárek ze Shoptetu; podkategorie se stejným názvem jako rodič skrývá nokov-header.js */
@media (min-width: 768px) {
  #header .menu-level-2 ul.menu-level-3 { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 2px 4px 0 !important; }
  #header .menu-level-2 ul.menu-level-3 > li { color: transparent; font-size: 0; }
  #header .menu-level-2 ul.menu-level-3 > li > a {
    background: #f2f5f9; border-radius: 999px; color: var(--nkv-ink-2) !important; display: inline-block !important;
    font: 500 12.5px var(--nkv-font-text) !important; padding: 4px 10px !important;
  }
  #header .menu-level-2 ul.menu-level-3 > li > a:hover { background: var(--nkv-brand); color: #fff !important; }
  #header .menu-level-2 ul.menu-level-3 > li.nkv-duplicita { display: none; }
}@media (min-width: 768px) { #header .menu-level-2 ul.menu-level-3 > li > a { white-space: nowrap; } #header .menu-level-2 > li > div { width: auto !important; max-width: none !important; } }
@media (min-width: 768px) { #header .menu-level-2 a.menu-image { padding: 0 !important; } #header .menu-level-2 a.menu-image img { height: 100% !important; object-fit: contain !important; transform: none !important; width: 100% !important; max-width: none !important; max-height: none !important; } }

/* ==== src/header/nokov-bloky.css ==== */
/* =============================================================
   NOKOV Design System — HERO a KONVERZNÍ BLOK
   Varianta D, finální paleta.

   ⚠️ STAV: první verze, zatím jen k posouzení.
   Schválená referenční komponenta je hlavička. Tyhle dva bloky
   jsou tu proto, aby šla paleta posoudit i mimo hlavičku —
   zejména limetkové konverzní CTA, které v hlavičce být nemá.

   Barvy výhradně z nokov-tokens.css. Žádné nové odstíny.
   ============================================================= */

/* ============================================================
   HERO
   ============================================================ */
.nkv-hero {
  background: var(--nkv-surface);
  font-family: var(--nkv-font-text);
  position: relative;
}
.nkv-hero__obraz {
  aspect-ratio: 21 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}
.nkv-hero__copy {
  margin: 0 auto;
  max-width: 1180px;
  padding: 34px 24px 38px;
}
.nkv-hero__kicker {
  color: var(--nkv-muted);
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nkv-hero h1 {
  color: var(--nkv-ink);
  font-family: var(--nkv-font-display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 12px 0 0;
  max-width: 22ch;
  text-wrap: balance;
}
.nkv-hero p {
  color: var(--nkv-ink-2);
  font-size: 16px;
  margin: 13px 0 22px;
  max-width: 52ch;
}
.nkv-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   KONVERZNÍ BLOK — kalkulačka
   Jediné místo v téhle sadě, kde se objeví limetka.
   ============================================================ */
.nkv-konverze {
  background: var(--nkv-surface);
  border-top: 1px solid var(--nkv-hair);
  font-family: var(--nkv-font-text);
}
.nkv-konverze__in {
  align-items: center;
  display: grid;
  gap: 40px;
  grid-template-columns: 0.9fr 1.1fr;
  margin: 0 auto;
  max-width: 1180px;
  padding: 44px 24px 48px;
}
.nkv-konverze__obraz {
  aspect-ratio: 4 / 3;
  border-radius: var(--nkv-radius-l);
  display: block;
  object-fit: cover;
  width: 100%;
}
.nkv-konverze h2 {
  color: var(--nkv-ink);
  font-family: var(--nkv-font-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 10px 0 8px;
}
.nkv-konverze > .nkv-konverze__in > div > p {
  color: var(--nkv-ink-2);
  margin: 0 0 20px;
  max-width: 46ch;
}

/* ---- panel s cenou ----
   Světlá plocha, cena ve Fresh Blue, akce v limetce.
   Přesně princip dnešního kalkulačního bloku na eshopu. */
.nkv-panel {
  background: var(--nkv-soft);
  border: 1px solid var(--nkv-hair);
  border-radius: var(--nkv-radius-l);
  display: grid;
  gap: 12px;
  max-width: 400px;
  padding: 20px;
}
.nkv-panel__rada { display: flex; gap: 10px; }
.nkv-panel__pole {
  background: var(--nkv-surface);
  border: 1px solid var(--nkv-hair-2);
  border-radius: var(--nkv-radius-s);
  color: var(--nkv-ink-2);
  flex: 1;
  font-size: 13.5px;
  padding: 10px 13px;
}
.nkv-panel__cena {
  align-items: baseline;
  border-top: 1px solid var(--nkv-hair-2);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding-top: 13px;
}
.nkv-panel__cena b {
  color: var(--nkv-fresh);          /* cena = Fresh Blue */
  font-family: var(--nkv-font-display);
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.nkv-panel__cena span { color: var(--nkv-muted); font-size: 12px; text-align: right; }
.nkv-panel .nkv-cta { justify-content: center; padding: 13px 18px; width: 100%; }

@media (max-width: 860px) {
  .nkv-konverze__in { gap: 26px; grid-template-columns: 1fr; }
  .nkv-hero__obraz { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .nkv-hero *, .nkv-konverze * { transition: none !important; }
}

/* ==== src/header/nokov-paticka.css ==== */
/* =============================================================
   NOKOV Design System — PATIČKA (schválený prémiový vzhled 21. 10. 2026)
   Staví NAD patičkou Disca (#footer). Obsah se skládá v administraci
   z prvků Disca — žádný JavaScript:
     - Kontakt (contact-box)       → telefon velkým písmem
     - Informace (stránky)          → Obchodní podmínky, Reklamace, Kontakty
     - Vlastní HTML (2–3×)          → logo + věta, Sortiment, Služby
       (hotové úryvky: obsah/paticka-*.html)
   Postup jako u hlavičky: tokeny Disca přemapujeme na tmavou paletu
   jen v podstromu #footer, zbytek dorovnáme typografií.
   ============================================================= */
#footer {
  /* přemapování tokenů Disca — patička se přebarví sama */
  --colors-surface-white: var(--nkv-dark);
  --colors-surface-primary: var(--nkv-dark);
  --colors-surface-secondary: var(--nkv-dark);
  --colors-foregrounds-content-primary: var(--nkv-dark-ink);
  --colors-foregrounds-headlines-primary: #ffffff;
  --colors-foregrounds-content-secondary: var(--nkv-dark-ink);
  --colors-foregrounds-content-tertiary: var(--nkv-dark-muted);
  --colors-foregrounds-borders-secondary: var(--nkv-dark-hair);
  --hyperlinks-underline-thickness: 0;
  --hyperlinks-underline-thickness-hover: 0;

  background: var(--nkv-dark);
  color: var(--nkv-dark-ink);
  font-family: var(--nkv-font-text);
  font-size: 14.5px;
  line-height: 1.6;
}
#footer .footer-rows { padding-bottom: 34px; padding-top: 72px; }

/* nadpisy sloupců */
#footer .pageElement__heading,
#footer h3,
#footer h4.nkv-pata__nadpis {
  color: #ffffff;
  font-family: var(--nkv-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  margin: 0 0 16px;
  text-transform: uppercase;
}

/* odkazy */
#footer a { color: var(--nkv-dark-ink); text-decoration: none; }
#footer a:hover,
#footer a:focus-visible { color: #ffffff; }
#footer ul { list-style: none; margin: 0; padding: 0; }
#footer ul li { padding: 4px 0; }

/* kontakt — fotka obchodníka z dema pryč, telefon jako hlavní kontakt */
#footer .contact-box img { display: none; }
#footer .contact-box strong { color: #ffffff; display: block; font-weight: 600; margin-bottom: 6px; }
#footer .contact-box .cellphone a,
#footer .contact-box .phone a {
  color: #ffffff;
  font-family: var(--nkv-font-display);
  font-size: 22px;
  font-weight: 700;
}
#footer .contact-box .social-icon { color: var(--nkv-dark-ink); }

/* spodní řádek (copyright, „Vytvořeno Shoptetem") */
#footer .footer-bottom,
#footer .copyright {
  border-top: 1px solid var(--nkv-dark-hair);
  color: var(--nkv-dark-muted);
  font-size: 13px;
}
#footer .footer-bottom a { color: var(--nkv-dark-muted); }

/* úryvky z obsah/paticka-*.html */
.nkv-pata__logo { display: block; height: auto; margin: -8px 0 14px -9px; width: 160px; }
.nkv-pata__veta { color: var(--nkv-dark-ink); margin: 0; }
.nkv-pata__claim { color: var(--nkv-dark-muted); font-size: 13px; margin-top: 10px; }

/* sloupce: logo · kontakt · sortiment · informace · blog (doplňuje nokov-paticka.js) */
@media (min-width: 992px) {
  #footer .custom-footer.nkv-pata-mrizka { display: grid; gap: 36px; grid-template-columns: 1.4fr 1fr 0.8fr 1.2fr 1.2fr; margin: 0; }
  #footer .custom-footer.nkv-pata-mrizka > div { float: none; max-width: none; padding: 0; width: auto; }
}
@media (max-width: 991px) {
  #footer .nkv-pata-onas, #footer .nkv-pata-sortiment { margin-bottom: 28px; padding: 0 15px; }
}
/* kontakt Disca: telefon velkým písmem, ikony v paletě designu */
#footer .contact-box .tel a { color: #ffffff; font-family: var(--nkv-font-display); font-size: 22px; font-weight: 700; }
#footer .contact-box .mail a { color: var(--nkv-dark-ink); }
#footer .contact-box .social-icon {
  background: transparent; border: 1px solid var(--nkv-dark-hair); border-radius: 50%; color: var(--nkv-dark-ink);
  height: 42px; line-height: 40px; width: 42px;
}
#footer .contact-box .social-icon:hover { background: var(--nkv-lime); border-color: var(--nkv-lime); color: var(--nkv-lime-ink); }
#footer .contact-box .social-icon::before { color: inherit; }
/* blog (HTML banner Shoptetu) — nadpis jako ostatní sloupce */
#footer .banner h4,
#footer .banner-wrapper h4 {
  color: #ffffff; font-family: var(--nkv-font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  margin: 0 0 16px; text-transform: uppercase;
}
#footer .banner a { color: var(--nkv-dark-ink); }
#footer .banner a:hover { color: #ffffff; }
/* .row Disca má clearfix ::before/::after — v mřížce by zabraly buňky */
#footer .custom-footer.nkv-pata-mrizka::before,
#footer .custom-footer.nkv-pata-mrizka::after { content: none; display: none; }
#footer .contact-box .tel a { font-size: 20px; white-space: nowrap; }

/* ==== src/header/nokov-kalkulacka.css ==== */
/* =============================================================
   NOKOV Design System — KALKULAČKA (nkv-kalkulacka.js) v novém vzhledu
   Markup i výpočet zůstávají v nkv-kalkulacka.js (beze změny, běží i na
   Classicu). Tady jen vzhled — a design system se načítá JEN na Discu,
   takže dnešní eshop se nemění.

   ⚠️ nkv-kalkulacka.js si vkládá vlastní <style> až za běhu (tedy ZA náš
   soubor) → pravidla tu mají o stupeň vyšší specificitu (:root …).
   Třídy z JS: .t nadpis · .hint · .r/.rfull řádky · .o výsledek (.d = na
   dotaz) · .l/.v/.s uvnitř výsledku · .n poznámka · .pbtn tlačítko Poptat.
   ============================================================= */
:root .nkv-kalk {
  --a: var(--nkv-fresh);
  background: var(--nkv-surface);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(12, 18, 25, 0.04), 0 12px 32px rgba(12, 18, 25, 0.08);
  font-family: var(--nkv-font-text);
  max-width: 560px;
  padding: 26px 28px 28px;
}
:root .nkv-kalk .t {
  color: var(--nkv-brand);
  font-family: var(--nkv-font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  margin-bottom: 8px;
}
:root .nkv-kalk .hint { color: var(--nkv-muted); font-size: 13.5px; font-weight: 500; margin: 0 0 16px; }
:root .nkv-kalk .r { gap: 12px; margin-bottom: 12px; }
:root .nkv-kalk .rfull { margin-bottom: 12px; }
:root .nkv-kalk label { color: var(--nkv-ink-2); font-size: 13px; font-weight: 500; margin-bottom: 6px; }
:root .nkv-kalk input,
:root .nkv-kalk select {
  background-color: var(--nkv-soft);
  border: 1.5px solid transparent;
  border-radius: 12px;
  color: var(--nkv-ink);
  font-family: var(--nkv-font-display);
  font-size: 16px;
  font-weight: 600;
  height: 50px;
  padding: 0 14px;
}
:root .nkv-kalk select {
  background-image: linear-gradient(45deg, transparent 50%, var(--nkv-ink) 50%),
                    linear-gradient(135deg, var(--nkv-ink) 50%, transparent 50%);
  padding-right: 36px;
}
:root .nkv-kalk input:hover,
:root .nkv-kalk select:hover { border-color: var(--nkv-hair-2); }
:root .nkv-kalk input:focus,
:root .nkv-kalk select:focus {
  background-color: var(--nkv-surface);
  border-color: var(--nkv-fresh);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nkv-fresh) 18%, transparent);
}
/* výsledek = tmavý panel jako souhrn v prémiovém náhledu */
:root .nkv-kalk .o {
  background: var(--nkv-ink);
  border-radius: 14px;
  color: #ffffff;
  margin-top: 18px;
  padding: 20px 22px;
  text-align: left;
}
:root .nkv-kalk .o .l { color: #9fb8e8; font-family: var(--nkv-font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; opacity: 1; }
:root .nkv-kalk .o .v { font-family: var(--nkv-font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; }
:root .nkv-kalk .o .s { color: #b9c3cf; font-size: 13px; opacity: 1; }
:root .nkv-kalk .o.d { background: var(--nkv-soft); color: var(--nkv-ink); }
:root .nkv-kalk .o.d .l { color: var(--nkv-muted); }
:root .nkv-kalk .o.d .s { color: var(--nkv-ink-2); }
:root .nkv-kalk .n { color: var(--nkv-muted); font-size: 12.5px; line-height: 1.55; margin-top: 12px; }
/* Poptat = konverze → limetka s TMAVÝM textem (bílá na limetce má 1,93 : 1) */
:root .nkv-kalk .pbtn {
  background: var(--nkv-lime);
  border-radius: var(--nkv-radius-pill);
  box-shadow: none;
  color: var(--nkv-lime-ink);
  font-family: var(--nkv-font-display);
  font-size: 16px;
  font-weight: 700;
  margin-top: 16px;
  padding: 16px 22px;
}
:root .nkv-kalk .pbtn:hover,
:root .nkv-kalk .pbtn:focus { background: var(--nkv-lime-dark); color: var(--nkv-lime-ink); transform: translateY(-1px); }
:root .nkv-kalk .pbtn:focus-visible { outline: 2px solid var(--nkv-ink); outline-offset: 2px; }

/* Disco omezuje šířku <select> → v kalkulačce na celou šířku řádku */
:root .nkv-kalk select { max-width: none; width: 100%; }

/* Tlačítko „Poptat produkt" (Webotvůrci .ask-wt / záložní #product-chat) pod kalkulačkou.
   Hlavní konverze je limetkové tlačítko v kalkulačce → tohle je sekundární obrys. */
:root .p-detail .ask-wt,
:root .p-detail #product-chat,
:root .p-detail #nkv-na-formular {
  align-items: center;
  background: transparent;
  border: 1.5px solid var(--nkv-ink);
  border-radius: var(--nkv-radius-pill);
  color: var(--nkv-ink);
  display: inline-flex;
  font-family: var(--nkv-font-display);
  font-size: 15px;
  font-weight: 700;
  height: 50px;
  justify-content: center;
  padding: 0 26px;
  text-decoration: none;
}
:root .p-detail .ask-wt:hover,
:root .p-detail #product-chat:hover,
:root .p-detail #nkv-na-formular:hover { background: var(--nkv-ink); color: #ffffff; }
/* u produktu BEZ kalkulačky je „Poptat" hlavní akce → limetka */
:root .p-detail:not(:has(.nkv-kalk)) .ask-wt,
:root .p-detail:not(:has(.nkv-kalk)) #product-chat,
:root .p-detail:not(:has(.nkv-kalk)) #nkv-na-formular { background: var(--nkv-lime); border-color: var(--nkv-lime); color: var(--nkv-lime-ink); }

@media (max-width: 767px) {
  :root .nkv-kalk { padding: 22px 18px 20px; }
  :root .nkv-kalk .o .v { font-size: 23px; }
}

/* =============================================================
   KALKULAČKA+ (src/footer/nokov-kalk-plus.js): posuvníky, karty pohonu,
   montáž, souhrn — podle schválené předlohy NAHLED-4
   ============================================================= */
/* posuvníky rozměru */
:root .nkv-kalk .nkv-roz label { align-items: baseline; display: flex; justify-content: space-between; }
:root .nkv-kalk .nkv-roz__hodnota { color: var(--nkv-ink); font-family: var(--nkv-font-display); font-size: 20px; font-weight: 600; }
:root .nkv-kalk .nkv-roz__hodnota small { color: var(--nkv-muted); font-family: var(--nkv-font-text); font-size: 12.5px; font-weight: 500; margin-left: 4px; }
:root .nkv-kalk .nkv-roz__posuvnik { accent-color: var(--nkv-ink); background: none; border: 0; box-shadow: none; height: 22px; margin: 10px 0 2px; padding: 0; width: 100%; }
:root .nkv-kalk .nkv-roz__meze { color: var(--nkv-muted); display: flex; font-size: 12px; justify-content: space-between; }
:root .nkv-kalk .nkv-roz input[type="number"] { height: 42px; font-size: 15px; }

/* pohon jako karty (původní roletka zůstává v DOM, jen schovaná) */
:root .nkv-kalk .nkv-pohon-puvodni { display: none; }
:root .nkv-kalk .nkv-pohony { display: grid; gap: 10px; margin: 4px 0 12px; }
:root .nkv-kalk .nkv-pohony label {
  align-items: center;
  border: 1.5px solid var(--nkv-hair);
  border-radius: 14px;
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  margin: 0;
  padding: 14px 16px;
  transition: border-color var(--transition-duration) var(--transition-timing), background var(--transition-duration) var(--transition-timing);
}
:root .nkv-kalk .nkv-pohony label:hover { border-color: var(--nkv-hair-2); }
:root .nkv-kalk .nkv-pohony label.on { background: #fafbfc; border-color: var(--nkv-ink); }
:root .nkv-kalk .nkv-pohony input { accent-color: var(--nkv-ink); height: 18px; margin: 0; width: 18px; }
:root .nkv-kalk .nkv-pohony b { color: var(--nkv-ink); display: block; font-family: var(--nkv-font-display); font-size: 15px; font-weight: 600; }
:root .nkv-kalk .nkv-pohony small { color: var(--nkv-muted); display: block; font-size: 12.5px; margin-top: 2px; }
:root .nkv-kalk .nkv-pohony em { color: var(--nkv-ink); font-family: var(--nkv-font-display); font-size: 14px; font-style: normal; font-weight: 600; white-space: nowrap; }

/* montáž a doprava */
.nkv-montaz {
  background: var(--nkv-surface);
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(12, 18, 25, 0.04), 0 12px 32px rgba(12, 18, 25, 0.08);
  margin: 18px 0;
  max-width: 560px;
  padding: 22px 26px 12px;
}
.nkv-montaz__t { color: var(--nkv-ink); font-family: var(--nkv-font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 6px; }
.nkv-montaz ul { list-style: none; margin: 0; padding: 0; }
.nkv-montaz li { border-top: 1px solid var(--nkv-hair); color: var(--nkv-ink-2); display: grid; font-size: 14px; gap: 12px; grid-template-columns: 38px 1fr; padding: 12px 0; }
.nkv-montaz li:first-child { border-top: 0; }
.nkv-montaz li b { color: var(--nkv-ink); display: block; font-family: var(--nkv-font-display); font-size: 15px; font-weight: 600; }
.nkv-montaz .ik { align-items: center; background: #eef2f8; border-radius: 10px; color: var(--nkv-brand); display: flex; height: 38px; justify-content: center; width: 38px; }
.nkv-montaz .ik svg { height: 19px; width: 19px; }

/* tmavý souhrn ceny (přes celou šířku) */
.nkv-souhrn { background: var(--nkv-ink); color: #dfe5ec; margin: 56px calc(50% - 50vw) 0; padding: 88px 24px; }
.nkv-souhrn .in { align-items: center; display: grid; gap: 64px; grid-template-columns: 1.15fr 1fr; margin: 0 auto; max-width: 1360px; }
.nkv-souhrn .obr { align-items: center; aspect-ratio: 16 / 10; background: radial-gradient(120% 90% at 50% 35%, #ffffff, #e3e7eb); border-radius: 24px; display: flex; justify-content: center; overflow: hidden; }
.nkv-souhrn .obr img { height: 88%; mix-blend-mode: multiply; object-fit: contain; width: 88%; }
.nkv-souhrn .kick { color: #9fb8e8; font-family: var(--nkv-font-display); font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.nkv-souhrn h2 { color: #ffffff; font-family: var(--nkv-font-display); font-size: clamp(30px, 3.4vw, 46px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; margin: 12px 0 26px; }
.nkv-souhrn dl { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.nkv-souhrn dt, .nkv-souhrn dd { border-top: 1px solid #243040; font-size: 15.5px; margin: 0; padding: 13px 0; }
.nkv-souhrn dt { color: #8f9bab; padding-right: 30px; }
.nkv-souhrn dd { color: #ffffff; font-weight: 500; text-align: right; }
.nkv-souhrn .celkem { align-items: baseline; border-top: 1px solid #3a4757; display: flex; justify-content: space-between; margin-top: 4px; padding-top: 18px; }
.nkv-souhrn .celkem b { color: #ffffff; font-family: var(--nkv-font-display); font-size: 36px; font-weight: 600; letter-spacing: -0.02em; }
.nkv-souhrn .celkem span { color: #8f9bab; font-size: 13.5px; text-align: right; }
.nkv-souhrn .pozn { color: #8f9bab; font-size: 13px; line-height: 1.55; margin: 14px 0 24px; }
.nkv-souhrn__cta {
  align-items: center; background: var(--nkv-lime); border-radius: var(--nkv-radius-pill); color: var(--nkv-lime-ink);
  display: inline-flex; font-family: var(--nkv-font-display); font-size: 16px; font-weight: 700; gap: 10px; height: 54px; padding: 0 28px; text-decoration: none;
}
.nkv-souhrn__cta:hover { background: var(--nkv-lime-dark); color: var(--nkv-lime-ink); }
.nkv-souhrn__cta svg { height: 18px; width: 18px; }
@media (max-width: 991px) {
  .nkv-souhrn { padding: 56px 16px; }
  .nkv-souhrn .in { gap: 28px; grid-template-columns: 1fr; }
  .nkv-souhrn .celkem b { font-size: 28px; }
}
/* kalkulačka dává VŠEM <input> v sobě width:100 %, výšku 50 px a pozadí → v kartách pohonu
   by se přepínač roztáhl a text zúžil na pár písmen. Disco navíc nativní přepínače schovává. */
:root .nkv-kalk .nkv-pohony label { display: grid !important; grid-template-columns: 20px minmax(0, 1fr) auto !important; width: 100%; }
:root .nkv-kalk .nkv-pohony label > span { display: block; min-width: 0; }
:root .nkv-kalk .nkv-pohony input[type="radio"] {
  -webkit-appearance: radio; appearance: auto; background: none; border: 0; box-shadow: none;
  height: 18px; margin: 0; opacity: 1; padding: 0; position: static; width: 18px;
}

/* =============================================================
   BARVY S PŘÍPLATKEM (src/footer/nokov-barvy.js) — podle předlohy NAHLED-4
   ============================================================= */
:root .nkv-kalk .nkv-barvy { border-bottom: 1px solid var(--nkv-hair); margin: 0 0 18px; padding-bottom: 18px; }
:root .nkv-kalk .nkv-barvy__t { color: var(--nkv-ink); font-family: var(--nkv-font-display); font-size: 20px; font-weight: 600; }
:root .nkv-kalk .nkv-barvy__vybrano { color: var(--nkv-ink); font-family: var(--nkv-font-display); font-size: 16px; font-weight: 600; margin: 6px 0 2px; }
:root .nkv-kalk .nkv-barvy__vybrano em { color: var(--nkv-muted); font-family: var(--nkv-font-text); font-size: 13.5px; font-style: normal; font-weight: 500; }
:root .nkv-kalk .nkv-barvy__doporuc { color: #4d6b00; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
:root .nkv-kalk .nkv-barvy__doporuc[hidden] { display: none; }
:root .nkv-kalk .nkv-barvy h4 { color: var(--nkv-ink); font-family: var(--nkv-font-display); font-size: 14px; font-weight: 600; margin: 16px 0 10px; }
:root .nkv-kalk .nkv-barvy h4 span { color: var(--nkv-muted); font-family: var(--nkv-font-text); font-weight: 400; margin-left: 6px; }
:root .nkv-kalk .nkv-swatches { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
:root .nkv-kalk .nkv-sw {
  aspect-ratio: 1; border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); cursor: pointer;
  height: auto; padding: 0; position: relative; transition: transform 0.2s; width: 100%;
}
:root .nkv-kalk .nkv-sw::before { background: linear-gradient(135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.18) 100%); border-radius: inherit; content: ""; inset: 0; position: absolute; }
:root .nkv-kalk .nkv-sw.str::before { background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(0,0,0,.2)), repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,.07) 0 1px, transparent 1px 3px); }
:root .nkv-kalk .nkv-sw:hover { transform: translateY(-2px); }
:root .nkv-kalk .nkv-sw.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nkv-ink); }
/* popisek po najetí: „RAL 7016 / MAT" */
:root .nkv-kalk .nkv-sw::after {
  background: var(--nkv-ink); border-radius: 8px; bottom: calc(100% + 10px); box-shadow: 0 8px 24px rgba(12,18,25,.25); color: #fff;
  content: attr(data-tip); font: 600 12.5px/1.45 var(--nkv-font-display); left: 50%; opacity: 0; padding: 8px 12px; pointer-events: none;
  position: absolute; text-align: center; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s; white-space: pre; z-index: 5;
}
:root .nkv-kalk .nkv-sw:hover::after, :root .nkv-kalk .nkv-sw:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
:root .nkv-kalk .nkv-sw__top {
  background: var(--nkv-lime); border-radius: 999px; bottom: -8px; color: var(--nkv-lime-ink); font: 700 9.5px/1 var(--nkv-font-display);
  left: 50%; padding: 4px 6px; position: absolute; transform: translateX(-50%); white-space: nowrap; z-index: 2;
}
:root .nkv-kalk .nkv-barvy__vic { border-top: 1px solid var(--nkv-hair); margin-top: 16px; }
:root .nkv-kalk .nkv-barvy__vic > summary { cursor: pointer; list-style: none; }
:root .nkv-kalk .nkv-barvy__vic > summary::-webkit-details-marker { display: none; }
:root .nkv-kalk .nkv-barvy__vic > summary h4::after { content: " ▾"; color: var(--nkv-muted); }
:root .nkv-kalk .nkv-barvy__vic[open] > summary h4::after { content: " ▴"; }
:root .nkv-kalk .nkv-barvy__prani {
  align-items: center; background: none; border: 0; border-top: 1px solid var(--nkv-hair); cursor: pointer; display: flex; gap: 14px;
  margin-top: 16px; padding: 14px 0 0; text-align: left; width: 100%;
}
:root .nkv-kalk .nkv-barvy__prani .duha { background: conic-gradient(from 200deg, #383e42, #004f7c, #114232, #a1c900, #e6b800, #b3261e, #4a3526, #928e85, #383e42); border-radius: 10px; flex: none; height: 46px; width: 46px; }
:root .nkv-kalk .nkv-barvy__prani.on .duha { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nkv-ink); }
:root .nkv-kalk .nkv-barvy__prani b { color: var(--nkv-ink); display: block; font-family: var(--nkv-font-display); font-size: 15px; }
:root .nkv-kalk .nkv-barvy__prani b em { color: var(--nkv-muted); font-size: 13px; font-style: normal; font-weight: 500; margin-left: 6px; }
:root .nkv-kalk .nkv-barvy__prani small { color: var(--nkv-muted); display: block; font-size: 12.5px; }
:root .nkv-kalk .o .nkv-o-barva { color: #dfe5ec; font-size: 13px; margin-top: 8px; }
:root .nkv-kalk .o .nkv-o-barva:empty { display: none; }
:root .nkv-kalk .o .nkv-o-barva b { color: #fff; }
.nkv-souhrn dt[hidden], .nkv-souhrn dd[hidden] { display: none; }
/* mobil: šířka a výška s posuvníky pod sebou (vedle sebe jsou stísněné) */
@media (max-width: 767px) {
  :root .nkv-kalk .r { grid-template-columns: 1fr; }
  :root .nkv-kalk .nkv-swatches { grid-template-columns: repeat(5, 1fr); }
}

/* ==== src/header/nokov-produkt.css ==== */
/* =============================================================
   NOKOV Design System — KARTA PRODUKTU (schválený vzhled, vzor
   nokov-static/nahledy/premium/NAHLED-4-konfigurator-brana.html)

   Přestylujeme DOM Disca, NIC NENAHRAZUJEME:
     .p-detail-inner        → mřížka: scéna vlevo, panel vpravo
     .p-image-wrapper       → velká „scéna" s fotkou (při posunu zůstává na místě)
     .p-data-wrapper        → panel: název, krátký popis, kalkulačka, cena, Poptat
     .shp-tabs-wrapper      → záložky jako pilulky
   Lištu s cenou nahoře (DOM ji nemá) vkládá src/footer/nokov-produkt.js.
   Platí jen pro detail produktu (body.type-product — dokumentovaná třída stránky).
   ============================================================= */
body.type-product {
  --nkv-lista-h: 76px;
  --nkv-lista-top: 0px;          /* nad lištou je přilepená hlavička Disca */
}

/* ---------- název a krátký popis ---------- */
body.type-product .p-detail-inner-header h1,
body.type-product .p-detail-inner-header-mobile .h1 {
  color: var(--nkv-ink);
  font-family: var(--nkv-font-display);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin: 4px 0 12px;
}
body.type-product .p-short-description {
  color: var(--nkv-ink-2);
  font-family: var(--nkv-font-text);
  font-size: 16px;
  line-height: 1.65;
}

/* ---------- scéna s fotkou ---------- */
body.type-product .p-image {
  aspect-ratio: 16 / 10;
  background: radial-gradient(120% 90% at 50% 35%, #ffffff 0%, #eef0f2 55%, #dfe3e7 100%);
  border-radius: 24px;
  display: flex;
  overflow: hidden;
  position: relative;
}
body.type-product .p-image .p-main-image { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; }
body.type-product .p-image .p-main-image img {
  height: 100%;
  mix-blend-mode: multiply;      /* bílé pozadí produktových fotek splyne se scénou */
  object-fit: contain;
  padding: 4% 6% 7%;
  width: 100%;
}
body.type-product .p-image .flags { left: 20px; top: 18px; }
body.type-product .p-image .flag {
  border-radius: var(--nkv-radius-pill);
  font-family: var(--nkv-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 7px 12px;
  text-transform: uppercase;
}

/* miniatury */
body.type-product .p-thumbnails { margin-top: 14px; }
body.type-product .p-thumbnails a {
  background: #eef0f2;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color var(--transition-duration) var(--transition-timing);
}
body.type-product .p-thumbnails a img { mix-blend-mode: multiply; }


/* ---------- rozložení: scéna vlevo, panel vpravo ---------- */
@media (min-width: 992px) {
  body.type-product .p-detail-inner {
    align-items: start;
    display: grid;
    gap: 44px;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
  }
  body.type-product .p-detail-inner > .p-image-wrapper {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    position: sticky;
    top: calc(var(--nkv-lista-top) + var(--nkv-lista-h) + 24px);
    width: auto;
  }
  body.type-product .p-detail-inner > .p-data-wrapper {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    width: auto;
  }
}

/* ---------- panel: dostupnost, cena, akce ---------- */
body.type-product .p-data-wrapper .detail-parameters th,
body.type-product .p-data-wrapper .detail-parameters td { font-family: var(--nkv-font-text); font-size: 14.5px; }
body.type-product .p-final-price-wrapper .price-final {
  color: var(--nkv-ink);
  font-family: var(--nkv-font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
body.type-product .p-final-price-wrapper .price-additional { color: var(--nkv-muted); font-size: 13px; }
/* běžný produkt (pohon) — Do košíku = konverze → limetka */
body.type-product .add-to-cart-button {
  background: var(--nkv-lime);
  border: 0;
  border-radius: var(--nkv-radius-pill);
  color: var(--nkv-lime-ink);
  font-family: var(--nkv-font-display);
  font-weight: 700;
}
body.type-product .add-to-cart-button:hover { background: var(--nkv-lime-dark); color: var(--nkv-lime-ink); }
body.type-product .link-icons a { color: var(--nkv-ink-2); font-size: 14px; }
/* ---------- záložky jako pilulky ---------- */
body.type-product .shp-tabs-wrapper { margin-top: 56px; }
body.type-product .shp-tabs { border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
body.type-product .shp-tabs .shp-tab { border: 0; margin: 0; }
body.type-product .shp-tabs .shp-tab-link {
  background: #f1f3f5;
  border: 0;
  border-radius: var(--nkv-radius-pill);
  color: var(--nkv-ink);
  font-family: var(--nkv-font-display);
  font-size: 15px;
  font-weight: 600;
  padding: 11px 20px;
  text-decoration: none;
}
body.type-product .shp-tabs .shp-tab-link:hover { background: var(--nkv-soft-2); }
body.type-product .shp-tabs .active > .shp-tab-link,
body.type-product .shp-tabs .shp-tab-link.active { background: var(--nkv-ink); color: #ffffff; }
body.type-product #tab-content { border: 0; font-family: var(--nkv-font-text); padding-top: 28px; }

/* ---------- lišta s cenou (vkládá nokov-produkt.js) ---------- */
.nkv-lista {
  align-items: center;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--nkv-hair);
  display: flex;
  gap: 24px;
  margin: 0 0 26px;
  min-height: var(--nkv-lista-h);
  padding: 12px 0;
  position: sticky;
  top: var(--nkv-lista-top);
  z-index: 20;
}
.nkv-lista.je-pod { box-shadow: 0 10px 30px rgba(12, 18, 25, 0.08); }
.nkv-lista__zpet {
  align-items: center;
  color: var(--nkv-ink);
  display: inline-flex;
  font-family: var(--nkv-font-text);
  font-size: 15px;
  font-weight: 500;
  gap: 8px;
  text-decoration: none;
}
.nkv-lista__zpet:hover { color: var(--nkv-fresh); }
.nkv-lista__zpet svg { height: 20px; width: 20px; }
.nkv-lista__nazev {
  color: var(--nkv-ink);
  flex: 1 1 auto;
  font-family: var(--nkv-font-display);
  font-size: 15px;
  font-weight: 600;
  min-width: 0;
  opacity: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.25s;
  white-space: nowrap;
}
.nkv-lista.je-pod .nkv-lista__nazev { opacity: 1; }   /* název až když h1 odjede z obrazovky */
.nkv-lista__cena { line-height: 1.25; text-align: right; }
.nkv-lista__cena b { color: var(--nkv-ink); display: block; font-family: var(--nkv-font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.nkv-lista__cena small { color: var(--nkv-muted); font-size: 12.5px; }
/* tmavé jako ve schváleném vzoru — limetka je v kalkulačce a v hlavičce, tři by byly moc */
.nkv-lista__cta {
  align-items: center;
  background: var(--nkv-ink);
  border-radius: var(--nkv-radius-pill);
  color: #ffffff;
  display: inline-flex;
  font-family: var(--nkv-font-display);
  font-size: 15px;
  font-weight: 700;
  height: 50px;
  padding: 0 26px;
  text-decoration: none;
  white-space: nowrap;
}
.nkv-lista__cta:hover { background: var(--nkv-brand); color: #ffffff; }
@media (max-width: 767px) {
  /* na mobilu lišta dole u palce: jen cena + Poptat */
  .nkv-lista {
    border-bottom: 0;
    border-top: 1px solid var(--nkv-hair);
    bottom: 0;
    gap: 12px;
    left: 0;
    margin: 0;
    padding: 10px 16px;
    position: fixed;
    right: 0;
    top: auto;
  }
  .nkv-lista__zpet, .nkv-lista__nazev { display: none; }
  .nkv-lista__cena { flex: 1 1 auto; text-align: left; }
  .nkv-lista__cena b { font-size: 18px; }
  .nkv-lista__cta { height: 46px; padding: 0 18px; }
  body.type-product { padding-bottom: 76px; }
}

/* dlouhý název: doplněk za první čárkou menším písmem (rozděluje nokov-produkt.js) */
body.type-product .nkv-h1-doplnek {
  color: var(--nkv-ink-2);
  display: block;
  font-family: var(--nkv-font-text);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  margin-top: 10px;
}
body.type-product .nkv-h1-doplnek::first-letter { text-transform: none; }
.nkv-lista__cena small { white-space: nowrap; }
body.type-product .nkv-h1-carka { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* text tlačítka v liště: počítač „Nezávazně poptat", mobil jen „Poptat" */
.nkv-lista__cta-kratke { display: none; }
@media (max-width: 767px) {
  .nkv-lista__cta-dlouhe { display: none; }
  .nkv-lista__cta-kratke { display: inline; }
  body.type-product .p-detail-inner-header-mobile .h1 { font-size: 28px; }
}
/* miniatury: Disco má kontejner 100 px vysoký → rámeček 2 px dovnitř, jinak se spodek uřízne */
body.type-product .p-thumbnails a.p-thumbnail { border: 0; box-shadow: inset 0 0 0 2px transparent; box-sizing: border-box; position: relative; }
body.type-product .p-thumbnails a.p-thumbnail::after { border: 2px solid transparent; border-radius: 10px; content: ""; inset: 0; pointer-events: none; position: absolute; transition: border-color var(--transition-duration) var(--transition-timing); }
body.type-product .p-thumbnails a.p-thumbnail.highlighted::after,
body.type-product .p-thumbnails a.p-thumbnail:hover::after { border-color: var(--nkv-ink); }
@media (max-width: 767px) {
  body.type-product .shp-tabs { flex-wrap: nowrap; gap: 6px; overflow-x: auto; }
  body.type-product .shp-tabs .shp-tab-link { font-size: 14px; padding: 9px 16px; white-space: nowrap; }
}

/* parametry jsou v záložce → popis (a sestava v něm) přes celou šířku */
html.nkv-parametry-v-zalozce body.type-product #description .basic-description { float: none; max-width: none; width: 100%; }
body.type-product #nkvParametry .extended-description { float: none; max-width: 760px; width: 100%; }

/* 3D náhled (nokov-3d.js) */
body.type-product .p-image .nkv3d-btn {
  align-items: center; background: rgba(255,255,255,.94); border: 1px solid var(--nkv-hair); border-radius: var(--nkv-radius-pill);
  bottom: 18px; box-shadow: 0 4px 14px rgba(12,18,25,.12); color: var(--nkv-ink); cursor: pointer; display: inline-flex;
  font: 600 14px var(--nkv-font-display); gap: 8px; left: 18px; padding: 10px 16px; position: absolute; z-index: 4;
}
body.type-product .p-image .nkv3d-btn:hover { border-color: var(--nkv-ink); }
body.type-product .p-image .nkv3d-btn svg { height: 18px; width: 18px; }
.nkv3d-scena { inset: 0; position: absolute; z-index: 5; }
.nkv3d-scena[hidden] { display: none; }
.nkv3d-scena model-viewer { --poster-color: transparent; height: 100%; width: 100%; }
.nkv3d-tip { color: var(--nkv-muted); font-size: 13px; left: 20px; pointer-events: none; position: absolute; top: 18px; }
.nkv3d-zpet, .nkv3d-reset {
  background: rgba(255,255,255,.94); border: 1px solid var(--nkv-hair); border-radius: var(--nkv-radius-pill); color: var(--nkv-ink);
  cursor: pointer; font: 600 13.5px var(--nkv-font-display); padding: 9px 14px; position: absolute;
}
.nkv3d-zpet { right: 16px; top: 14px; }
.nkv3d-reset { bottom: 16px; left: 16px; }
.nkv3d-zpet:hover, .nkv3d-reset:hover { border-color: var(--nkv-ink); }
.nkv3d-pozn { background: rgba(255,255,255,.85); border-radius: 8px; bottom: 18px; color: var(--nkv-muted); font-size: 12px; padding: 5px 9px; position: absolute; right: 16px; }
@media (max-width: 767px) { .nkv3d-pozn, .nkv3d-tip { display: none; } }

/* lišta nástrojů na fotce (jako schválená předloha): Studio · Na pozemku · 3D · celá obrazovka */
body.type-product .p-image .nkv3d-lista {
  align-items: center; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(12,18,25,.62);
  border-radius: 14px; bottom: 18px; display: flex; gap: 4px; left: 18px; padding: 6px; position: absolute; z-index: 6;
}
body.type-product .p-image .nkv3d-lista button {
  align-items: center; background: none; border: 0; border-radius: 9px; color: #fff; cursor: pointer; display: inline-flex;
  font: 500 15px var(--nkv-font-text); gap: 8px; padding: 10px 14px; position: static; box-shadow: none;
}
body.type-product .p-image .nkv3d-lista button:hover, body.type-product .p-image .nkv3d-lista button.on { background: rgba(255,255,255,.16); }
body.type-product .p-image .nkv3d-lista button svg { height: 18px; width: 18px; }
body.type-product .p-image .nkv3d-lista i { background: rgba(255,255,255,.28); height: 24px; margin: 0 6px; width: 1px; }
body.type-product .p-image.nkv-foto-pozemek .p-main-image img { mix-blend-mode: normal; object-fit: cover; padding: 0; }
.nkv3d-reset { bottom: 18px; left: auto; right: 16px; }
.nkv3d-pozn { bottom: 70px; }
.nkv3d-tip { right: 20px; text-align: left; }
.nkv3d-zavrit { display: none; }
body.type-product .p-image:fullscreen { background: #eef0f2; border-radius: 0; }
body.type-product .p-image:fullscreen .nkv3d-zavrit {
  background: rgba(12,18,25,.72); border: 0; border-radius: 999px; color: #fff; cursor: pointer; display: inline-flex;
  font: 600 15px var(--nkv-font-display); padding: 12px 20px; position: absolute; right: 22px; top: 22px; z-index: 7;
}
@media (max-width: 767px) { body.type-product .p-image .nkv3d-lista button { font-size: 13.5px; padding: 8px 10px; } }

/* miniatury s mezerou mezi sebou */
body.type-product .p-thumbnails a.p-thumbnail { margin-right: 10px; }
/* drobečková navigace přes celou šířku pod menu (Disco ji na detailu odsazuje nad pravý sloupec) */
body.type-product #content-wrapper > .breadcrumbs {
  float: none; left: auto; margin: 0; max-width: none; padding-left: 20px; position: static; text-align: left; transform: none; width: 100%;
}

/* ochrana fotek: iPhone — bez nabídky při podržení prstu (viz nokov-ochrana.js) */
body img { -webkit-touch-callout: none; -webkit-user-drag: none; }

/* ==== src/header/nokov-popis.css ==== */
/* =============================================================
   NOKOV Design System — POPISY PRODUKTŮ A KATEGORIÍ (.nokov-cls)
   Obsah popisů stylizuje nokov.css (na FTP, platí i na Classicu).
   Tady ho jen převedeme na schválenou paletu a písma — stejným trikem
   jako u Disca: nokov.css má vlastní tokeny na .nokov-cls (--ink, --blue,
   --night…), tak jim podstrčíme hodnoty design systemu.
   ============================================================= */
:root .nokov-cls {
  --ink: var(--nkv-ink);
  --soft: var(--nkv-ink-2);
  --faint: var(--nkv-muted);
  --night: var(--nkv-ink);
  --blue: var(--nkv-brand);
  --green: var(--nkv-lime);
  --greend: var(--nkv-lime-dark);
  --hair: var(--nkv-hair);
  font-family: var(--nkv-font-text);
}
/* nadpisy: Manrope, ne tučné Poppins ze šablony */
:root .nokov-cls h1,
:root .nokov-cls h2,
:root .nokov-cls h4 {
  font-family: var(--nkv-font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
}
:root .nokov-cls h3,
:root .nokov-cls .ncl-eyebrow { font-family: var(--nkv-font-display); font-weight: 600; }
:root .nokov-cls .ncl-dark h3 { color: #9fb8e8; }
:root .nokov-cls .ncl-trust b { font-family: var(--nkv-font-display); font-weight: 600; }
/* tlačítka v popisu: konverze = limetka s TMAVÝM textem */
:root .nokov-cls .ncl-btn { box-shadow: none; color: var(--nkv-lime-ink); font-family: var(--nkv-font-display); }
:root .nokov-cls .ncl-btn:hover { color: var(--nkv-lime-ink); }
:root .nokov-cls .ncl-btn.ghost { color: var(--nkv-ink); }
:root .nokov-cls .ncl-btn.ghost:hover { color: #ffffff; }
:root .nokov-cls .ncl-more-btn { font-family: var(--nkv-font-display); }
:root .nokov-cls .ncl-more-btn:hover { color: var(--nkv-lime-ink); }
/* figury (fotky, sestava) jako scéna */
:root .nokov-cls .ncl-figure { background: radial-gradient(120% 100% at 50% 20%, #ffffff 0%, #eef0f2 60%, #e2e6ea 100%); border-radius: 24px; }
:root .nokov-cls .ncl-figure img { mix-blend-mode: multiply; }

/* sestava plotu přes celou šířku obsahu (jako schválená předloha), označuje nokov-produkt.js */
:root .nokov-cls section.nkv-sestava-plna { left: 50%; max-width: none; position: relative; transform: translateX(-50%); width: min(1360px, calc(100vw - 48px)); }
:root .nokov-cls section.nkv-sestava-plna > h3,
:root .nokov-cls section.nkv-sestava-plna > h2,
:root .nokov-cls section.nkv-sestava-plna > p { max-width: 760px; }
:root .nokov-cls section.nkv-sestava-plna .ncl-figure { padding: 48px 40px 26px; }
:root .nokov-cls section.nkv-sestava-plna .ncl-figure img { display: block; height: auto; width: 100%; }

/* ==== src/header/nokov-kategorie.css ==== */
/* =============================================================
   NOKOV Design System — VÝPIS PRODUKTŮ A FILTRY (kategorie, vyhledávání)
   Vzor: nokov-static/nahledy/premium/NAHLED-2-kategorie-brany.html
   Přestylujeme karty Disca (.products .product .p) — DOM nesaháme:
     a.image → „scéna" s fotkou · a.name → název · .availability · .prices · .p-tools (tlačítko)
   ============================================================= */
.products-block .product .p,
.products .product .p {
  background: var(--nkv-surface);
  border: 1px solid var(--nkv-hair);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0 0 18px;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.products .product .p:hover {
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(12, 18, 25, 0.04), 0 16px 36px rgba(12, 18, 25, 0.1);
  transform: translateY(-2px);
}
/* fotka jako scéna */
.products .product .p .image {
  align-items: center;
  aspect-ratio: 4 / 3;
  background: radial-gradient(120% 90% at 50% 35%, #ffffff 0%, #eef0f2 60%, #e4e8ec 100%);
  display: flex;
  justify-content: center;
  margin: 0;
}
.products .product .p .image img { height: 100%; mix-blend-mode: multiply; object-fit: contain; padding: 6% 7%; width: 100%; }
/* kód produktu (245/RAL7016) — zákazníka nezajímá, do rohu drobně */
.products .product .p .p-code { color: var(--nkv-muted); font-size: 11.5px; padding: 10px 16px 0; text-align: left; }

.products .product .p .p-in { padding: 14px 18px 0; text-align: left; }
.products .product .p .name {
  color: var(--nkv-ink);
  font-family: var(--nkv-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
}
.products .product .p .name:hover { color: var(--nkv-fresh); }
.products .product .p .availability { color: var(--nkv-muted); font-size: 12.5px; text-align: left; }
/* popis ve výpisu: max. 2 řádky, ať karty nejsou zeď textu */
.products .product .p .p-desc {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--nkv-muted);
  display: -webkit-box;
  font-size: 13px;
  line-height: 1.5;
  overflow: hidden;
  text-align: left;
}
.products .product .p .prices { text-align: left; }
.products .product .p .price-final { color: var(--nkv-ink); font-family: var(--nkv-font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.products .product .p .price-additional { color: var(--nkv-muted); font-size: 12px; }
/* tlačítko „Zobrazit" / „Do košíku" ve výpisu */
.products .product .p .p-tools .btn {
  background: transparent;
  border: 1.5px solid var(--nkv-ink);
  border-radius: var(--nkv-radius-pill);
  color: var(--nkv-ink);
  font-family: var(--nkv-font-display);
  font-size: 14px;
  font-weight: 700;
  padding: 9px 20px;
}
.products .product .p .p-tools .btn:hover { background: var(--nkv-ink); color: #ffffff; }
.products .product .p .p-tools .btn-cart,
.products .product .p .p-tools .add-to-cart-button { background: var(--nkv-lime); border-color: var(--nkv-lime); color: var(--nkv-lime-ink); }

/* ---------- filtry vlevo ---------- */
#filters .filter-section h4,
.filters-wrapper .filter-section h4,
.filter-section .filter-section-header {
  color: var(--nkv-ink);
  font-family: var(--nkv-font-display);
  font-size: 15px;
  font-weight: 600;
}
.filters-wrapper input[type="checkbox"] { accent-color: var(--nkv-ink); }
.filters-wrapper .filter-section label { color: var(--nkv-ink-2); font-size: 14px; }

/* ---------- barevný filtr z nkv-kalkulacka.js (.nkv-colorfilter) — kulaté vzorky ---------- */
:root .nkv-colorfilter { gap: 10px; }
:root .nkv-colorfilter button {
  border: 1px solid rgba(12, 18, 25, 0.15);
  border-radius: 12px;
  height: 46px;
  width: 46px;
}
:root .nkv-colorfilter button.on { border-color: #ffffff; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--nkv-ink); }
:root .nkv-colorfilter button[data-code="ALL"] {
  border-color: var(--nkv-hair-2);
  border-radius: var(--nkv-radius-pill);
  color: var(--nkv-ink);
  font: 700 14px var(--nkv-font-display);
  height: 46px;
  padding: 0 20px;
}
:root .nkv-colorfilter button[data-code="ALL"].on { background: var(--nkv-ink); border-color: var(--nkv-ink); box-shadow: none; color: #ffffff; }

/* řazení a stránkování */
.category-header .sorting, .listSorting { font-family: var(--nkv-font-text); }
.pagination a, .pagination strong { border-radius: 10px; font-family: var(--nkv-font-display); }
.pagination strong.current, .pagination > strong { background: var(--nkv-ink); color: #ffffff; }
.products .product .p .prices, .products .product .p .prices > div { text-align: left; }

/* informační stránky (kontakty, poptat zdarma, fotogalerie…): bez postranního panelu Disca */
body.type-page .content-wrapper-in > .sidebar-left { display: none; }
body.type-page .content-wrapper-in > #content { float: none; flex: 1 1 auto; max-width: 100%; width: 100%; }

/* mobil: filtry kategorie sbalené pod tlačítkem (vkládá nokov-paticka.js) */
.nkv-filtry-btn { display: none; }
@media (max-width: 767px) {
  .nkv-filtry-btn {
    align-items: center; background: #fff; border: 1.5px solid var(--nkv-ink); border-radius: var(--nkv-radius-pill); color: var(--nkv-ink);
    display: inline-flex; font: 700 15px var(--nkv-font-display); gap: 8px; height: 46px; justify-content: center; margin: 4px 0 16px; padding: 0 22px; width: 100%;
  }
  html.nkv-filtry-sbalene #filters { display: none !important; }
}

/* košík a objednávka: konverzní tlačítka limetkou (jako „Do košíku"), bez rušivého CTA poptávky */
.btn-conversion, .btn.btn-conversion, .next-step-forward {
  background: var(--nkv-lime) !important; border-color: var(--nkv-lime) !important; border-radius: var(--nkv-radius-pill);
  color: var(--nkv-lime-ink) !important; font-family: var(--nkv-font-display); font-weight: 700;
}
.btn-conversion:hover, .next-step-forward:hover { background: var(--nkv-lime-dark) !important; border-color: var(--nkv-lime-dark) !important; }
body.ordering-process .nkv-cta { display: none; }
/* lightbox (nkv-kalkulacka.js): limetka vždy s tmavým textem (bílá na #A1C900 = 1,93 : 1) */
#nkv-lb .nkv-lb-cta { border-radius: var(--nkv-radius-pill); color: var(--nkv-lime-ink); font-family: var(--nkv-font-display); }
#nkv-lb .nkv-lb-cta:hover { background: var(--nkv-lime-dark); color: var(--nkv-lime-ink); }

/* ==== src/header/nokov-uvod.css ==== */
/* =============================================================
   NOKOV Design System — ÚVODNÍ STRÁNKA (blok „Uvítací text" v administraci)
   Obsah: nokov-design-system/obsah/uvod.html (jen třídy, žádné inline styly —
   Shoptet styly z obalových prvků v editoru strhává). Vzor: NAHLED-1-uvod.html.
   ============================================================= */
.nkv-uvod { color: var(--nkv-ink); font-family: var(--nkv-font-text); }
.nkv-uvod * { box-sizing: border-box; }
.nkv-uvod h2, .nkv-uvod h3 { color: var(--nkv-ink); font-family: var(--nkv-font-display); letter-spacing: -0.025em; }
.nkv-uvod .nkv-kick { color: var(--nkv-brand); display: block; font: 600 11.5px var(--nkv-font-display); letter-spacing: 0.22em; text-transform: uppercase; }
.nkv-uvod .nkv-sekce { padding: clamp(56px, 7vw, 104px) 0; }
.nkv-uvod .nkv-sekce--sede { background: #f6f5f2; margin: 0 calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); }
.nkv-uvod .nkv-sekce--tma { background: var(--nkv-ink); color: #dfe5ec; margin: 0 calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); }
.nkv-uvod .nkv-sekce--tma h2 { color: #ffffff; }
.nkv-uvod .nkv-hlava { align-items: end; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; margin-bottom: 40px; }
.nkv-uvod .nkv-hlava h2 { font-size: clamp(30px, 3.6vw, 50px); font-weight: 600; line-height: 1.04; margin: 12px 0 0; max-width: 820px; }
.nkv-uvod .nkv-btn {
  align-items: center; border: 1.5px solid transparent; border-radius: var(--nkv-radius-pill); display: inline-flex; font: 700 15px var(--nkv-font-display);
  gap: 10px; height: 54px; padding: 0 28px; text-decoration: none; transition: background 0.2s, color 0.2s, transform 0.2s;
}
.nkv-uvod .nkv-btn--lime { background: var(--nkv-lime); color: var(--nkv-lime-ink); }
.nkv-uvod .nkv-btn--lime:hover { background: var(--nkv-lime-dark); color: var(--nkv-lime-ink); transform: translateY(-1px); }
.nkv-uvod .nkv-btn--obrys { border-color: var(--nkv-ink); color: var(--nkv-ink); }
.nkv-uvod .nkv-btn--obrys:hover { background: var(--nkv-ink); color: #ffffff; }
.nkv-uvod .nkv-btn--svetle { border-color: rgba(255, 255, 255, 0.6); color: #ffffff; }
.nkv-uvod .nkv-btn--svetle:hover { background: #ffffff; color: var(--nkv-ink); }

/* hero */
.nkv-uvod .nkv-hero { align-items: flex-end; border-radius: 24px; color: #ffffff; display: flex; margin-top: 18px; min-height: min(80vh, 760px); overflow: hidden; position: relative; }
.nkv-uvod .nkv-hero > img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.nkv-uvod .nkv-hero::after { background: linear-gradient(90deg, rgba(12,18,25,.82) 0%, rgba(12,18,25,.45) 48%, rgba(12,18,25,.05) 100%); content: ""; inset: 0; position: absolute; }
.nkv-uvod .nkv-hero__in { max-width: 860px; padding: clamp(28px, 5vw, 72px); position: relative; z-index: 1; }
.nkv-uvod .nkv-hero .nkv-kick { color: #b9ccef; }
.nkv-uvod .nkv-hero h2 { color: #ffffff; font-size: clamp(44px, 6vw, 88px); font-weight: 700; letter-spacing: -0.04em; line-height: 0.96; margin: 16px 0 22px; }
.nkv-uvod .nkv-hero p { color: #dfe6ee; font-size: 19px; line-height: 1.55; margin: 0 0 30px; max-width: 560px; }
.nkv-uvod .nkv-tlacitka { display: flex; flex-wrap: wrap; gap: 12px; }

/* fakta */
.nkv-uvod .nkv-fakta { border-bottom: 1px solid var(--nkv-hair); display: grid; grid-template-columns: repeat(4, 1fr); }
.nkv-uvod .nkv-fakta > div { border-right: 1px solid var(--nkv-hair); padding: 28px 24px 26px 0; }
.nkv-uvod .nkv-fakta > div:last-child { border-right: 0; }
.nkv-uvod .nkv-fakta b { color: var(--nkv-ink); display: block; font: 700 clamp(26px, 2.6vw, 38px)/1.05 var(--nkv-font-display); letter-spacing: -0.03em; margin-bottom: 6px; }
.nkv-uvod .nkv-fakta span { color: var(--nkv-ink-2); font-size: 14px; }

/* dlaždice sortimentu */
.nkv-uvod .nkv-dlazdice { display: grid; gap: 18px; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 300px 300px; }
.nkv-uvod .nkv-dlazdice > a { border-radius: 16px; color: #ffffff; display: block; overflow: hidden; position: relative; text-decoration: none; }
.nkv-uvod .nkv-dlazdice > a:first-child { grid-row: span 2; }
.nkv-uvod .nkv-dlazdice img { height: 100%; inset: 0; object-fit: cover; position: absolute; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); width: 100%; }
.nkv-uvod .nkv-dlazdice > a:hover img { transform: scale(1.05); }
.nkv-uvod .nkv-dlazdice > a::after { background: linear-gradient(0deg, rgba(12,18,25,.82), transparent 55%); content: ""; inset: 0; position: absolute; }
.nkv-uvod .nkv-dlazdice .nkv-dlazdice__t { bottom: 22px; left: 26px; position: absolute; right: 26px; z-index: 1; }
.nkv-uvod .nkv-dlazdice b { color: #ffffff; display: block; font: 600 clamp(22px, 2.2vw, 32px) var(--nkv-font-display); }
.nkv-uvod .nkv-dlazdice span { color: #d7dee6; display: block; font-size: 14px; margin-top: 6px; }

/* kompletní systém */
.nkv-uvod .nkv-split { align-items: center; display: grid; gap: clamp(32px, 6vw, 96px); grid-template-columns: 1fr 1fr; }
.nkv-uvod .nkv-split > img { aspect-ratio: 4 / 5; border-radius: 16px; object-fit: cover; width: 100%; }
.nkv-uvod .nkv-split h2 { font-size: clamp(30px, 3.4vw, 48px); font-weight: 600; line-height: 1.05; margin: 12px 0 18px; }
.nkv-uvod .nkv-split p { color: var(--nkv-ink-2); font-size: 18px; line-height: 1.6; }
.nkv-uvod .nkv-check { list-style: none; margin: 26px 0 32px; padding: 0; }
.nkv-uvod .nkv-check li { border-top: 1px solid var(--nkv-hair); font-size: 16px; padding: 14px 0 14px 34px; position: relative; }
.nkv-uvod .nkv-check li::before { border-bottom: 2px solid var(--nkv-brand); border-left: 2px solid var(--nkv-brand); content: ""; height: 8px; left: 4px; position: absolute; top: 21px; transform: rotate(-45deg); width: 14px; }

/* cena online */
.nkv-uvod .nkv-cena { align-items: center; display: grid; gap: 64px; grid-template-columns: 1fr 1fr; }
.nkv-uvod .nkv-cena h2 { font-size: clamp(34px, 4vw, 58px); font-weight: 600; line-height: 1.02; margin: 12px 0 18px; }
.nkv-uvod .nkv-cena p { color: #b9c3cf; font-size: 18px; line-height: 1.6; max-width: 520px; }
.nkv-uvod .nkv-sekce--tma .nkv-kick { color: #9fb8e8; }
.nkv-uvod .nkv-panel { background: #121b26; border: 1px solid #243041; border-radius: 18px; padding: 30px; }
.nkv-uvod .nkv-panel__r { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.nkv-uvod .nkv-pole { background: #0c1219; border: 1px solid #2a3647; border-radius: 12px; color: #c7d0da; font-size: 14px; margin-bottom: 12px; padding: 14px 16px; }
.nkv-uvod .nkv-pole small { color: #7c8898; display: block; font-size: 11px; letter-spacing: 0.14em; margin-bottom: 4px; text-transform: uppercase; }
.nkv-uvod .nkv-panel__cena { align-items: end; border-top: 1px solid #243041; display: flex; justify-content: space-between; margin: 18px 0 20px; padding-top: 18px; }
.nkv-uvod .nkv-panel__cena b { color: #ffffff; font: 700 34px/1 var(--nkv-font-display); letter-spacing: -0.03em; }
.nkv-uvod .nkv-panel__cena span { color: #8b97a5; font-size: 12.5px; text-align: right; }
.nkv-uvod .nkv-panel .nkv-btn { justify-content: center; width: 100%; }

/* postup */
.nkv-uvod .nkv-kroky { border-top: 1px solid var(--nkv-ink); display: grid; grid-template-columns: repeat(4, 1fr); }
.nkv-uvod .nkv-kroky > div { padding: 28px 28px 0 0; }
.nkv-uvod .nkv-kroky i { -webkit-text-stroke: 1px var(--nkv-brand); color: transparent; display: block; font: 300 48px/1 var(--nkv-font-display); font-style: normal; }
.nkv-uvod .nkv-kroky b { display: block; font: 600 20px var(--nkv-font-display); margin: 18px 0 8px; }
.nkv-uvod .nkv-kroky span { color: var(--nkv-ink-2); font-size: 15px; }

/* realizace */
.nkv-uvod .nkv-mozaika { display: grid; gap: 14px; grid-auto-rows: 150px; grid-template-columns: repeat(12, 1fr); }
.nkv-uvod .nkv-mozaika img { border-radius: 12px; height: 100%; object-fit: cover; width: 100%; }
.nkv-uvod .nkv-mozaika img:nth-child(1) { grid-column: span 7; grid-row: span 3; }
.nkv-uvod .nkv-mozaika img:nth-child(2) { grid-column: span 5; grid-row: span 2; }
.nkv-uvod .nkv-mozaika img:nth-child(3) { grid-column: span 5; grid-row: span 1; }
.nkv-uvod .nkv-mozaika img:nth-child(n+4) { grid-column: span 4; grid-row: span 2; }

/* dotazy */
.nkv-uvod .nkv-dotazy > div { border-top: 1px solid var(--nkv-hair); padding: 22px 0; }
.nkv-uvod .nkv-dotazy b { display: block; font: 600 18px var(--nkv-font-display); }
.nkv-uvod .nkv-dotazy p { color: var(--nkv-ink-2); line-height: 1.65; margin: 10px 0 0; max-width: 820px; }

/* závěr */
.nkv-uvod .nkv-zaver h2 { font-size: clamp(40px, 6vw, 84px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.98; margin: 14px 0 36px; max-width: 1100px; }
.nkv-uvod .nkv-zaver h2 span { color: var(--nkv-muted); font-weight: 400; }

@media (max-width: 991px) {
  .nkv-uvod .nkv-fakta, .nkv-uvod .nkv-kroky { grid-template-columns: 1fr 1fr; }
  .nkv-uvod .nkv-dlazdice { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 240px); }
  .nkv-uvod .nkv-dlazdice > a:first-child { grid-column: span 2; grid-row: span 1; }
  .nkv-uvod .nkv-split, .nkv-uvod .nkv-cena { grid-template-columns: 1fr; }
  .nkv-uvod .nkv-mozaika img { grid-column: span 6 !important; grid-row: span 2 !important; }
}
@media (max-width: 600px) {
  .nkv-uvod .nkv-fakta, .nkv-uvod .nkv-kroky { grid-template-columns: 1fr; }
  .nkv-uvod .nkv-fakta > div { border-right: 0; border-top: 1px solid var(--nkv-hair); }
  .nkv-uvod .nkv-dlazdice { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 220px; }
  .nkv-uvod .nkv-dlazdice > a:first-child { grid-column: auto; }
  .nkv-uvod .nkv-hero { min-height: 560px; }
}
.nkv-uvod .nkv-panel__cena b { font-size: 30px; white-space: nowrap; }

/* Shoptet dává uvítací text do úzkého kontejneru (.welcome-wrapper.container-narrow)
   a nad něj nadpis z administrace (div.h1). S naším blokem: plná šířka, nadpis jako tichý řádek. */
.welcome-wrapper:has(.nkv-uvod) { max-width: none; padding-left: 0; padding-right: 0; width: 100%; }
.welcome-wrapper:has(.nkv-uvod) .welcome { max-width: none; padding: 0; }
.welcome:has(.nkv-uvod) > .h1 {
  color: var(--nkv-muted); font-family: var(--nkv-font-text); font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em; margin: 14px 0 0; text-align: left;
}
/* s naším úvodním blokem (přesouvá ho nahoru nokov-paticka.js) je starý carousel navíc */
html.nkv-ma-uvod #content > .banners-row:has(#carousel) { display: none; }

/* filmový detail (video bez zvuku ve smyčce, jako Porsche) */
.nkv-uvod .nkv-detail { border-radius: 24px; margin-top: clamp(40px, 6vw, 80px); overflow: hidden; position: relative; aspect-ratio: 16 / 7; background: #1b2027; }
.nkv-uvod .nkv-detail__video { display: block; height: 100%; object-fit: cover; width: 100%; }
.nkv-uvod .nkv-detail::after { background: linear-gradient(90deg, transparent 40%, rgba(12,18,25,.75) 100%); content: ""; inset: 0; position: absolute; }
.nkv-uvod .nkv-detail__text { color: #fff; max-width: 420px; position: absolute; right: clamp(24px, 5vw, 64px); top: 50%; transform: translateY(-50%); z-index: 1; }
.nkv-uvod .nkv-detail__text .nkv-kick { color: #8fb4ff; }
.nkv-uvod .nkv-detail__text h2 { color: #fff; font-size: clamp(28px, 3.2vw, 46px); font-weight: 600; line-height: 1.05; margin: 12px 0 14px; }
.nkv-uvod .nkv-detail__text p { color: #dfe6ee; font-size: 17px; line-height: 1.6; margin: 0; }
@media (max-width: 767px) {
  .nkv-uvod .nkv-detail { aspect-ratio: auto; }
  .nkv-uvod .nkv-detail__video { aspect-ratio: 16 / 10; height: auto; }
  .nkv-uvod .nkv-detail::after { display: none; }
  .nkv-uvod .nkv-detail__text { background: var(--nkv-ink); max-width: none; padding: 24px; position: static; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .nkv-uvod .nkv-detail__video { display: none; } .nkv-uvod .nkv-detail { background: url(https://cdn.myshoptet.com/usr/eshop.nokov.cz/user/documents/ds/img/detail-branka.jpg) center/cover; } }
/* video s textem vlevo (pohon brány) */
.nkv-uvod .nkv-detail--vlevo { margin: clamp(40px, 6vw, 80px) 0; }
.nkv-uvod .nkv-detail--vlevo::after { background: linear-gradient(270deg, transparent 40%, rgba(12,18,25,.78) 100%); }
.nkv-uvod .nkv-detail--vlevo .nkv-detail__text { left: clamp(24px, 5vw, 64px); right: auto; }

/* ==== src/header/nokov-poptavka.css ==== */
/* =============================================================
   NOKOV — okno poptávky Webotvůrců („Poptat produkt“ → colorbox + formeo)
   Jen vzhled: formulář, jeho pole i odesílání dělá doplněk Webotvůrců (nesahat).
   Okno = .popup-window > .clickable-part (pozadí) + .popup-inner (okno) + .close-popup (křížek „+“ otočený).
   Ověřeno na živém webu 23. 10. 2026 (dump DOM).
   ============================================================= */
.popup-window .clickable-part { background: rgba(10, 16, 24, .62) !important; backdrop-filter: blur(3px); }
.popup-window .popup-inner {
  background: var(--nkv-surface, #fff) !important; border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(10, 16, 24, .35) !important; padding: 34px 38px 30px !important;
  width: min(720px, calc(100vw - 32px)) !important; max-width: none !important;
  height: auto !important; max-height: calc(100vh - 64px) !important; box-sizing: border-box;
}
.popup-window .popup-inner .formeo, .popup-window .popup-inner .formeo-row { max-width: 100%; }
.popup-window .close-popup {
  top: 16px !important; right: 16px !important; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1;
  background: var(--nkv-soft, #f3f5f8); color: var(--nkv-ink, #0c1219); cursor: pointer;
}
.popup-window .close-popup:hover { background: var(--nkv-hair, #e3e8ef); }

/* nadpis okna */
.popup-window .popup-inner > h2 {
  font-family: var(--nkv-font-display, inherit); font-size: 28px; line-height: 1.15;
  letter-spacing: -.02em; color: var(--nkv-ink, #0c1219); margin: 0 0 22px;
}

/* popisky a skupiny */
.popup-window .formeo .f-field-group { margin: 0 0 16px; }
.popup-window .formeo label {
  font-size: 13.5px; font-weight: 600; color: var(--nkv-ink-2, #2a3440); margin-bottom: 6px; line-height: 1.35;
}
.popup-window .formeo .text-error { color: var(--nkv-brand, #0044AA); margin-left: 2px; }

/* textová pole, výběr, textarea */
.popup-window .formeo input[type="text"], .popup-window .formeo input[type="email"], .popup-window .formeo input[type="tel"],
.popup-window .formeo input[type="number"], .popup-window .formeo select, .popup-window .formeo textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; font: inherit; font-size: 15px;
  color: var(--nkv-ink, #0c1219); background: var(--nkv-soft, #f5f7fa);
  border: 1px solid var(--nkv-hair, #dfe5ec); border-radius: 12px; box-shadow: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.popup-window .formeo textarea { min-height: 110px; }
.popup-window .formeo input:focus, .popup-window .formeo select:focus, .popup-window .formeo textarea:focus {
  outline: none; background: #fff; border-color: var(--nkv-brand, #0044AA);
  box-shadow: 0 0 0 3px rgba(0, 68, 170, .14);
}

/* volby (radio / checkbox) jako klikací řádky */
.popup-window .formeo input[type="radio"], .popup-window .formeo input[type="checkbox"] {
  accent-color: var(--nkv-brand, #0044AA); width: 18px; height: 18px;
}
.popup-window .formeo .f-radio, .popup-window .formeo .f-checkbox {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 6px;
  border: 1px solid var(--nkv-hair, #dfe5ec); border-radius: 12px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.popup-window .formeo .f-radio:hover, .popup-window .formeo .f-checkbox:hover { border-color: var(--nkv-brand, #0044AA); }
.popup-window .formeo .f-radio:has(input:checked), .popup-window .formeo .f-checkbox:has(input:checked) {
  border-color: var(--nkv-brand, #0044AA); background: rgba(0, 68, 170, .05);
}
.popup-window .formeo .f-radio label, .popup-window .formeo .f-checkbox label { margin: 0; font-weight: 500; cursor: pointer; }

/* přílohy */
.popup-window .formeo input[type="file"] {
  width: 100%; min-height: 50px; padding: 8px; font-size: 13px; color: var(--nkv-muted, #6a7683);
  border: 1px dashed var(--nkv-hair-2, #c9d2dc); border-radius: 12px; background: var(--nkv-soft, #f5f7fa);
}
.popup-window .formeo input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 7px 14px; font: inherit; font-weight: 600; font-size: 13px;
  color: var(--nkv-brand, #0044AA); background: #fff; border: 1px solid var(--nkv-brand, #0044AA);
  border-radius: 999px; cursor: pointer;
}

/* odeslání = konverze → limetka, přes celou šířku */
.popup-window .formeo .f-btn-group { margin-top: 18px; }
.popup-window .formeo button[type="submit"], .popup-window .formeo .f-btn-group button, .popup-window .formeo .primary {
  width: 100% !important; background: var(--nkv-lime, #A1C900) !important; color: var(--nkv-lime-ink, #10200a) !important;
  border-radius: var(--nkv-radius-pill, 999px) !important; float: none !important; min-height: 54px; padding: 0 28px; font: inherit; font-size: 16px; font-weight: 700;
  color: var(--nkv-lime-ink, #10200a); background: var(--nkv-lime, #A1C900);
  border: 0; border-radius: var(--nkv-radius-pill, 999px); cursor: pointer; transition: background .15s;
}
.popup-window .formeo button[type="submit"]:hover, .popup-window .formeo .f-btn-group button:hover,
.popup-window .formeo .primary:hover { background: var(--nkv-lime-dark, #8DB000) !important; }

/* zprávy po odeslání */
.popup-window .wt-success-message-wrapper {
  margin-top: 16px; padding: 14px 18px; border-radius: 12px; font-weight: 600;
  color: #1d4d14; background: #eef7e3; border: 1px solid #cfe6b5;
}
.popup-window .wt-error-message-wrapper, .popup-window .formeo .input-error-message {
  border-radius: 12px; color: #9b1c1c;
}

@media (max-width: 767px) {
  .popup-window .popup-inner {
    padding: 26px 18px 22px !important; width: calc(100vw - 24px) !important; max-height: calc(100vh - 40px) !important;
  }
  .popup-window .popup-inner > h2 { font-size: 23px; padding-right: 44px; }
  .popup-window .formeo .formeo-column { width: 100% !important; }
}

/* tenký posuvník v okně: modrý NOKOV jezdec na průhledné dráze, odsazený od zaobleného rohu */
.popup-window .popup-inner { scrollbar-width: thin; scrollbar-color: rgba(0, 68, 170, .45) transparent; }
.popup-window .popup-inner::-webkit-scrollbar { width: 10px; }
.popup-window .popup-inner::-webkit-scrollbar-track { background: transparent; margin: 22px 0; }
.popup-window .popup-inner::-webkit-scrollbar-thumb {
  background: rgba(0, 68, 170, .35); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
}
.popup-window .popup-inner::-webkit-scrollbar-thumb:hover { background: rgba(0, 68, 170, .6); background-clip: padding-box; }
.popup-window .popup-inner::-webkit-scrollbar-button { display: none; height: 0; }

/* ==== src/header/nokov-barvy-znacka.css ==== */
/* =============================================================
   NOKOV Design System — BARVY ZNAČKY (varianta D, vybral majitel 22. 10. 2026)
   Černá horní lišta s modrými odrážkami, modrá NOKOV na hlavních tlačítkách, štítcích, ikonách.
   ZELENÁ (limetka) JEN u nákupu: Poptat v kalkulačce, Do košíku, Pokračovat v objednávce.
   ============================================================= */
/* společné všem variantám: limetka JEN pro konverzi v kalkulačce/košíku, jinak modrá značky */
:root { --nkv-accent: var(--nkv-brand); }
.nkv-cta { background: var(--nkv-brand) !important; color: #fff !important; }
.nkv-cta:hover { background: var(--nkv-fresh) !important; }
.nkv-uvod .nkv-hero .nkv-btn--lime, .nkv-uvod .nkv-split .nkv-btn--lime, .nkv-uvod .nkv-zaver .nkv-btn--lime { background: var(--nkv-brand); color: #fff; }
.nkv-uvod .nkv-hero .nkv-btn--lime:hover, .nkv-uvod .nkv-split .nkv-btn--lime:hover, .nkv-uvod .nkv-zaver .nkv-btn--lime:hover { background: var(--nkv-fresh); color: #fff; }
.nkv-lista-top__arg::before { color: #8fb4ff; }
.nkv-uvod .nkv-check li::before { border-color: var(--nkv-fresh); }
.nkv-montaz .ik { background: #e8f0ff; color: var(--nkv-brand); }
.nkv-sw__top { background: var(--nkv-brand) !important; color: #fff !important; }
.nkv-barvy__doporuc { color: var(--nkv-brand) !important; }
.nkv-uvod .nkv-dlazdice > a:hover .nkv-dlazdice__t b { color: #cfe0ff; }
#footer .contact-box .social-icon:hover { background: var(--nkv-brand); border-color: var(--nkv-brand); color: #fff; }/* D — černá horní lišta s modrými odrážkami, zbytek jako A */
.nkv-lista-top__arg::before { color: #4a90ff; font-weight: 800; }
.top-navigation-bar a.nkv-lista-top__kontakt:hover { color: #8fb4ff; }