/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved.                   */
/* Proprietary and confidential. See LICENSE in the project root.             */

/* ==========================================================================
 *  Konfigurátor kurníku
 *
 *  Rozvržení podle klientovy reference: ovládání vlevo, vizuál uprostřed,
 *  živá cena vpravo, pás výhod dole.
 *
 *  Barvy jdou z tokenů, ne z hexů — sekce tak reaguje na akcent i na motiv
 *  stejně jako zbytek webu, takže „noční režim“ v hlavičce nepotřebuje
 *  vlastní sadu barev. Pohyb je jen tam, kde něco sděluje (doskok ceny,
 *  příchod kresby); `prefers-reduced-motion` ho celý ruší.
 * ========================================================================== */

/* Pruh, ve kterém konfigurátor sedí. Vlastní pozadí i přechodové okraje
   `.kp-band` se tu ruší — barvu drží sekce sama a musí jít od kraje ke kraji. */
/* Rozmazaná zahrada pod celým konfigurátorem — přesně jak to má
   `_refs/configurator_desktop.png`. Panely na ní leží jako karty; předtím
   byla rozmazaná scéna jen UVNITŘ kresby kurníku a zbytek pásu byl plochý,
   takže konfigurátor vypadal jako formulář na tmavém podkladu.

   Obrázek jde do pseudoprvku, ne do `background` pásu: rozostření se dělá
   filtrem a ten by jinak rozmazal i obsah. Měřítko 1.06 skryje průsvitné
   okraje, které `blur()` vytáhne zpod hrany. */
.kp-band--config {
    position: relative;
    --kp-cfg-wave: clamp(58px, 6vw, 104px);

    /* Kam má padnout STŘED křivky: `lift` nad horní hranu desky, `drop` pod
       spodní. Nejsou to násobky hloubky vlny, i když by to bylo kratší —
       vlna se s šířkou okna zmenšuje, kdežto volné místo kolem ní drží
       odsazení sekcí, které se zmenšuje jinak. Na násobcích vlny to sedělo
       na 1440 a na notebooku bylo o 34 px níž, na telefonu o 60 px.

       Naměřené volné místo po sjednocení rytmu sekcí (`--kp-sect-pad`):
       nahoře 106 px na telefonu, 84 na tabletu a 109–132 od notebooku výš,
       dole 95–128. Hodnoty níž jsou proložené těmito pěti měřeními —
       kdyby se `--kp-sect-pad` změnilo, musí se přeměřit (postup je
       v `v35-konfigurator.js`, kontrola „vlna leží uprostřed mezery"). */
    --kp-cfg-lift: clamp(20px, 1.7vw, 23px);
    --kp-cfg-drop: clamp(2px, 0.5vw, 10px);
    background: none;
    isolation: isolate;

    /* Prolnutí hran pásu. Sdílejí ho OBA pseudoprvky — fotka i její ztlumení
       musí u hran mizet společně, jinak zůstane u kraje krémový obdélník bez
       fotky pod sebou. Proměnná proto sedí na pásu, ne na `::before`:
       vlastní vlastnosti se mezi sourozeneckými pseudoprvky nedědí.

       Dojezd je ROVNÝ, ne vlnitý. Vlnu si tu zkoušela zahrada a dopadlo to
       špatně: nad deskou jí zbývá sotva sto pixelů a rozostřené listí v tak
       úzkém proužku se čte jako tmavý pruh, ne jako tvar. Vlnu proto nese
       tón desky (viz `.kp-cfg::after`), ne fotka. */
    --kp-cfg-fade: linear-gradient(180deg in oklab,
        transparent 0%, rgba(0, 0, 0, 0.35) 5%, #000 12%,
        #000 88%, rgba(0, 0, 0, 0.35) 95%, transparent 100%)
}

.kp-band--config::before {
    content: "";
    position: absolute;
    /* Svisle ZAPUŠTĚNO, ne `inset: 0`. Zvětšení o 6 % níž (které skrývá
       průsvitné okraje po `blur()`) vytáhlo rozostřenou zahradu i ~43 px NAD
       pás — nad krémový závoj `::after`, který sahá jen po hranu pásu. Nad
       sekcí „Jak to probíhá" z toho byl khaki pruh a vypadal jako předěl mezi
       sekcemi; sekce za něj přitom nemohla. 3,2 % × 1,06 vyjde těsně dovnitř.
       Vodorovně se zvětšení nechává být — přesah po stranách řeší stránka. */
    inset: 3.2% 0;
    z-index: -1;
    pointer-events: none;
    /* Zdroj je zmenšený na 960 px a silně komprimovaný ZÁMĚRNĚ: kreslí se
       výhradně pod blur(16px), takže detaily originálu divák nikdy neuvidí.
       254 KB → 75 KB beze změny vzhledu (ověřeno snímkem před/po). */
    background: url("img/kurniky/render/scene-backdrop-960.webp") center / cover no-repeat;

    /* Rozostření je na fotce, ne na pásu — jinak by filtr rozmazal i panely.
       Zvětšení skryje průsvitné okraje, které `blur()` vytáhne zpod hrany. */
    filter: blur(16px) saturate(1.06);
    transform: scale(1.06);

    /* Zahrada NAJÍŽDÍ, nezačíná hranou. Krémový závoj v `::after` sám nestačil:
       fotka pod ním startovala naplno a ve chvíli, kdy závoj zeslábl, byl mezi
       stránkou a pásem vidět vodorovný předěl. Maska řeší příčinu — nahoře i
       dole fotka prostě není a přibývá postupně.
       `no-repeat` schválně: prvek je zvětšený a při výchozím `repeat` by se za
       jeho hranou nasadila další dlaždice masky a krytí by vyskočilo zpět. */
    mask-image: var(--kp-cfg-fade);
    -webkit-mask-image: var(--kp-cfg-fade);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

/* Druhá vrstva ztlumí fotku, aby text na panelech držel kontrast. V tmavém
   motivu je potřeba ztlumit víc — fotka je slunečná zahrada. */
.kp-band--config::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Jen ztlumení fotky, ŽÁDNÝ krémový závoj u hran. Ten tu byl, dokud byla
       stránka jednolitě krémová; od chvíle, kdy pod ní leží atmosférické pole,
       je z něj obdélník barvy, která pod pásem není — na hranici pásu se to
       změřilo jako skok 42 z 765. Hrany řeší stejná maska jako u `::before`:
       ztlumení tam prostě není a pole zůstává, jaké je. */
    background: color-mix(in oklab, var(--kp-cream) 58%, transparent);
    mask-image: var(--kp-cfg-fade);
    -webkit-mask-image: var(--kp-cfg-fade);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

/* V tmavém motivu je fotka slunečná zahrada a text na panelech je světlý —
   ztlumit se musí víc, jinak spadne kontrast pod čitelnou mez. */
[data-theme="dark"] .kp-band--config::after {
    background: color-mix(in oklab, var(--kp-cream) 72%, transparent);
}


.kp-cfg {
    /* Barvy z klientovy reference (_refs/configurator_desktop.png), měřeno
       mřížkou homogenních vzorků — tools/images/measure-surfaces.py. Mřížka,
       ne jeden medián: jinak by se ztratilo, že plocha má přechod.

       Naměřeno: pozadí stránky i pás výhod jsou PLOCHY (trend jasu pod 3),
       karty a levý panel mají sotva znatelný svislý přechod (−4 a +13) a
       panel ceny výrazný (+29) — začíná béžově a končí skoro bílý. */
    /* Odtepleno na klientovu žádost: dřívější hodnoty měly příliš velký rozdíl
       R−B (16–23), takže celek táhl do žluta. Nová paleta drží R−B do ~6, což
       je papírově bílá s náznakem tepla, ne krémová. Karty jsou čistě bílé,
       panely a pás výhod jen o chlup teplejší, aby se od bílých karet odlišily. */
    --cfg-page: #FAF8F5;
    /* Nádech u vlny: teplejší tón TÉŽE plochy, ne jiná barva. */
    --cfg-wash: #F1E7D6;
    --cfg-panel: #FDFCFA;
    --cfg-panel-2: #FCFBF9;
    --cfg-card: #FFFFFF;
    --cfg-card-2: #FDFCFB;
    --cfg-card-on: #F1F6EC;
    --cfg-price: #F5F2ED;
    --cfg-price-2: #FCFBF9;
    --cfg-perk: #FCFBF8;
    --cfg-perk-2: #FCFBF8;
    --cfg-row: #FDFCFA;
    --cfg-amber: #FEF3E0;
    --cfg-amber-line: #EFCE9C;
    --cfg-amber-ink: #D9822B;

    /* Zeleň jde z akcentu webu, ne z pevného hexu — panel Vzhled tak
       konfigurátor přebarví spolu se zbytkem stránky. Výchozí akcent je
       značková zelená, takže se světlý režim od návrhu neliší. */
    --cfg-green: var(--kp-a-deep, #305A1D);
    --cfg-green-2: var(--kp-a, #4A7A2C);
    --cfg-green-soft: var(--kp-a-soft, #EDF3E6);

    --cfg-ink: #221D16;
    --cfg-ink-2: #6E6357;
    --cfg-ink-3: #756A5B; /* ztmaveno z #948877 — 12px podtitulky měly 3,4:1, AA chce 4,5:1 */
    /* Linky jsou o poznání světlejší než dřív. Naměřené výplně se od reference
       lišily o jednotky na kanál, ale teplé lemy kolem každého panelu a řádku
       dělaly z celku dojem, že je stránka do žluta. */
    --cfg-line: #ECE8E1;
    --cfg-line-soft: #F2EFE9;
    --cfg-white: #FFFFFF;
    --cfg-switch-off: #C9C2B6;
    --cfg-key-bg: #F3E7D3;
    --cfg-key-ink: #8A6A3A;
    --cfg-green-ink: #4C5B3F;

    /* Poloměry změřené z návrhu (tools/images/measure-radii.py): zelené prvky
       se najdou podle barvy a poloměr se dopočítá z chybějící plochy rohu.
       Pilulky 8, záložky 10, odznak 8, karty 13, CTA 9 — žádná z nich není
       plně zaoblená, jak jsem je měl. */
    --cfg-gap: 14px;
    --cfg-radius: 16px;
    --cfg-radius-sm: 13px;
    --cfg-radius-cta: 9px;
    --cfg-radius-pill: 8px;
    --cfg-radius-tab: 10px;
    /* Karty v referenci nemají lem, jen měkký stín. Je široký a slabý — má
       plochu od pozadí oddělit, ne ji orámovat. */
    --cfg-shadow: 0 1px 2px rgba(70, 52, 25, 0.04), 0 10px 30px rgba(70, 52, 25, 0.07);

    /* Pozadí jde od kraje ke kraji, obsah má strop. Na 2560px monitoru byl
       plný rozliv příliš — panely se roztáhly do šířky, kterou návrh nepočítá,
       a oko nemělo kde skončit. Strop drží hero i konfigurátor (--kp-page-max),
       takže obě sekce začínají a končí v jedné svislici. */
    max-width: none;
    margin: 0;
    padding: clamp(28px, 2.6vw, 44px) var(--kp-gutter, clamp(14px, 2.4vw, 48px))
             clamp(3.2rem, 5vh, 4.6rem);
    display: grid;
    gap: 16px;
    /* `background` je na `::before`, ne tady — viz maska vlny níž. */
    color: var(--cfg-ink);
    font-size: 15px;
    scroll-margin-top: 96px;
    justify-items: center;

    /* Deska konfigurátoru je NEPRŮHLEDNÁ (naměřená barva z klientovy předlohy)
       a právě ona dělala na hranici pásu skok — ne závoj, jak to vypadalo.
       Krátké prolnutí u horní a dolní hrany to řeší, aniž by se sáhlo na
       barvu: 22 a 30 px se vejde do vlastního odsazení desky, takže mizí jen
       podklad, žádný panel. */
    /* Podklad desky je ve VLASTNÍ vrstvě (`::before`), ne na `.kp-cfg`.
       Maska totiž platí i pro potomky: dokud barvu nesla samotná deska,
       ukrajovala vlna z panelů, ne z podkladu. Odsazení je nahoře i dole o
       hloubku vlny větší, aby křivka měla kde vzniknout. */
    position: relative;
}

/* Podklad desky je ve VLASTNÍ vrstvě, ne na `.kp-cfg`: maska platí i pro
   potomky, takže dokud barvu nesla samotná deska, ukrajoval dojezd z panelů.
   Vlnitou hranu nese zahrada pásu (viz `--kp-cfg-fade`), tady stačí měkký
   dojezd, aby deska nekončila čárou. */
.kp-cfg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--cfg-page);

    --kp-cfg-plate: linear-gradient(180deg,
        transparent 0, #000 26px,
        #000 calc(100% - 34px), transparent 100%);
    mask-image: var(--kp-cfg-plate);
    -webkit-mask-image: var(--kp-cfg-plate);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

/* Vlna před konfigurátorem a za ním.

   Obě vrstvy — barva desky i teplý nádech — mají TUTÉŽ masku a PŘESAHUJÍ desku
   nahoru i dolů. Obojí má důvod.

   Maska na obou: dokud ji nesl jen nádech, začínala barva desky nad vlnou a
   nad křivkou byl pruh do bílé (deska je 250,248,245, stránka 251,243,228 —
   chladnější a světlejší). Vlna má být hranicí desky, ne kresbou na ní.

   Přesah: vlna se vejde jen tam, kde není obsah. Uvnitř desky procházela přes
   nadpis a přes tlačítko „Prohlédněte si ze všech stran", dole se lepila na
   pás fotek. Přesah ji posadí do odsazení SOUSEDNÍCH sekcí — vlna tak vlastně
   uzavírá sekci nad konfigurátorem a otevírá tu pod ním, přesně jak si to
   klient představoval.

   Křivky jsou proti pásu sítí dole na stránce překlopené (`-alt`), aby se obě
   místa lišila. */
.kp-cfg::before,
.kp-cfg::after {
    content: "";
    position: absolute;
    /* Přesah se dopočítává ze zdvihu a z těžiště křivky v masce: horní vlna
       má střed v 0,44 výšky pruhu, dolní v 0,69 (křivky nejsou souměrné).
       Vlna pak leží uprostřed volného místa a nelepí se ani na text nad
       sebou, ani na fotky pod sebou — změřeno na 390, 820, 1280, 1440
       a 2560 px. */
    inset: calc(-1 * (var(--kp-cfg-lift) + var(--kp-cfg-wave) * 0.44)) 0
           calc(-1 * (var(--kp-cfg-drop) + var(--kp-cfg-wave) * 0.31));
    z-index: 0;
    pointer-events: none;

    mask-image: var(--kp-wave-a-alt), var(--kp-wave-b-alt), linear-gradient(#000, #000);
    mask-position: top center, bottom center, center;
    mask-size: 100% var(--kp-cfg-wave), 100% var(--kp-cfg-wave),
               100% calc(100% - var(--kp-cfg-wave) * 1.9);
    mask-repeat: no-repeat, no-repeat, no-repeat;
    mask-composite: add;
    -webkit-mask-image: var(--kp-wave-a-alt), var(--kp-wave-b-alt), linear-gradient(#000, #000);
    -webkit-mask-position: top center, bottom center, center;
    -webkit-mask-size: 100% var(--kp-cfg-wave), 100% var(--kp-cfg-wave),
                       100% calc(100% - var(--kp-cfg-wave) * 1.9);
    -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
    -webkit-mask-composite: source-over;
}

/* Barva desky. */
.kp-cfg::before { background: var(--cfg-page); }

/* Teplý nádech u obou vln. Drží u křivky a do desky mizí — konec přechodu je
   odvozený od hloubky vlny, takže se s ní posouvá a nikde se neuřízne. */
.kp-cfg::after {
    background: linear-gradient(180deg in oklab,
        var(--cfg-wash) 0px,
        var(--cfg-wash) calc(var(--kp-cfg-wave) * 1.15),
        transparent calc(var(--kp-cfg-wave) * 2.5),
        transparent calc(100% - var(--kp-cfg-wave) * 2.5),
        var(--cfg-wash) calc(100% - var(--kp-cfg-wave) * 1.15),
        var(--cfg-wash) 100%);
}

/* Obsah desky leží NAD podkladem. Absolutně umístěný `::before` z mřížky
   vypadává, takže se rozvržení nemění — jen se srovná pořadí vrstev. */
.kp-cfg > * {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--kp-page-max, 1560px);
}

/* Tmavý motiv: povrchy z motivových tokenů, aby konfigurátor ztmavl spolu se
   zbytkem webu. Světlý režim drží naměřené hodnoty z návrhu, tmavý jde po
   značkových tokenech — jedna sada hexů by v obou režimech fungovat nemohla. */
[data-theme="dark"] .kp-cfg {
    --cfg-page: var(--kp-cream, #201812);
    --cfg-wash: color-mix(in oklab, var(--kp-gold, #D9A441) 9%, var(--kp-cream, #201812));
    --cfg-panel: var(--kp-cream-2, #2A211A);
    --cfg-panel-2: var(--kp-cream-2, #2A211A);
    --cfg-card: var(--kp-cream-3, #33281F);
    --cfg-card-2: var(--kp-cream-3, #33281F);
    --cfg-card-on: color-mix(in oklab, var(--kp-a) 22%, var(--kp-cream-3, #33281F));
    --cfg-price: var(--kp-cream-2, #2A211A);
    --cfg-price-2: var(--kp-cream-3, #33281F);
    --cfg-perk: var(--kp-cream-2, #2A211A);
    --cfg-perk-2: var(--kp-cream-3, #33281F);
    --cfg-row: var(--kp-cream-3, #33281F);
    --cfg-amber: color-mix(in oklab, #D9822B 16%, var(--kp-cream-2, #2A211A));
    --cfg-amber-line: color-mix(in oklab, #D9822B 42%, var(--kp-cream-2, #2A211A));
    --cfg-amber-ink: #E8A85C;
    --cfg-ink: var(--kp-ink, #F4E9DC);
    --cfg-ink-2: var(--kp-ink-soft, #C9B6A4);
    --cfg-ink-3: var(--kp-ink-faint, #9C8877);
    --cfg-line: var(--kp-line, #43362B);
    --cfg-line-soft: var(--kp-line-soft, #3A2E25);
    --cfg-white: var(--kp-cream-3, #33281F);
    --cfg-switch-off: #5A4C3F;
    --cfg-key-bg: color-mix(in oklab, #D9A441 22%, var(--kp-cream-3, #33281F));
    --cfg-key-ink: #E0B978;
    --cfg-green-ink: color-mix(in oklab, var(--kp-a) 60%, #FFFFFF);
    --cfg-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.26);
}


/* ---- hlavička ----------------------------------------------------------- */

.kp-cfg__head {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-bottom: 4px;
}

.kp-cfg__intro { max-width: none; }

.kp-cfg__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-family: var(--kp-font-display);
    font-size: 34px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cfg-ink);
}

.kp-cfg__leaf { display: grid; place-items: center; color: var(--cfg-green-2); }
.kp-cfg__leaf svg { width: 30px; height: 30px; }

.kp-cfg__lead {
    margin: 0;
    max-width: 46ch;
    padding-inline-start: 40px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--cfg-ink-2);
}

.kp-cfg__tools { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }

.kp-tool {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--cfg-line);
    background: var(--cfg-white);
    font: inherit;
    font-size: 14px;
    color: var(--cfg-ink);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--cfg-shadow);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.kp-tool:hover { border-color: var(--cfg-green-2); }
.kp-tool:focus-visible { outline: 3px solid var(--cfg-green-2); outline-offset: 2px; }

.kp-tool__badge {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--cfg-green-soft);
    color: var(--cfg-green);
    font-size: 9px;
    font-weight: 700;
}


/* ---- přepínač (noční režim, doplňky) ------------------------------------ */

.kp-switch {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--cfg-switch-off, #C9C2B6);
    transition: background 0.22s ease;
}

.kp-switch__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--cfg-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.22s var(--ease-out, ease);
}

.kp-switch--sm { width: 34px; height: 19px; }
.kp-switch--sm .kp-switch__knob { top: 3px; left: 3px; width: 13px; height: 13px; }

.kp-add.is-on .kp-switch { background: var(--cfg-green); }

.kp-add.is-on .kp-switch__knob { transform: translateX(15px); }

/* ---- mřížka ------------------------------------------------------------- */

/* Panel ceny stojí ve třetím sloupci v první řadě; pás výhod pod ním jde přes
   celou šířku. Dřív cena zabírala obě řady a výhody se mačkaly do dvou třetin
   vedle ní — čtyři dlaždice s velkou ikonou tam měly na text sotva sto pixelů
   a lámal se po dvou slovech. */
/* Sloupce z reference (1448 px): panel 444, střed 646, cena 280. Mezera ke
   sloupci s cenou je větší než mezi panelem a středem — v předloze jsou to
   oddělené bloky a popisek u pravého okraje kresby jinak doléhá na cenu. */
.kp-cfg__grid {
    display: grid;
    grid-template-columns: minmax(0, 444fr) minmax(0, 626fr) minmax(0, 280fr);
    grid-template-rows: auto auto;
    column-gap: var(--cfg-gap);
    row-gap: var(--cfg-gap);
    align-items: start;
}

/* Panel ceny začíná níž než ovládání: v předloze nad ním nahoře pokračuje
   obrázek a cena sedí až ve spodních dvou třetinách. */
/* Panel ceny začíná AŽ V DOLNÍ TŘETINĚ obrázku, ne u jeho horní hrany:
   v `configurator_desktop.png` má horní hranu na y = 545 z 1086, tedy zhruba
   ve třech čtvrtinách výšky vizuálu. Nad ním je vidět zahrada — což je od
   chvíle, kdy scéna leží přes celou sekci, konečně pravda i u nás. */
.kp-price { margin-inline-start: 10px; margin-top: 264px; }

/* Ovládání jsou dvě karty pod sebou v prvním sloupci. Na desktopu to vypadá
   jako dřív; rozdělené jsou kvůli telefonu, kde mezi ně vjede vizuál. */
.kp-panel-col { grid-column: 1; grid-row: 1; display: grid; gap: var(--cfg-gap); align-content: start; min-width: 0; }

/* Rozmísťování stojí ve STŘEDNÍM sloupci, hned pod obrázkem a pásem náhledů.
   V levém panelu bylo od kurníku přes celou šířku obrazovky a zákazník
   nastavoval polohu prvku, aniž by na něj viděl. */
.kp-panel--place { min-width: 0; }
.kp-cfg__main { grid-column: 2; grid-row: 1; display: grid; gap: 10px; min-width: 0; }
.kp-price { grid-column: 3; grid-row: 1; }
.kp-perks { grid-column: 1 / -1; grid-row: 2; }

/* Bubliny prvků a štítek „Nepoužito" se pozicují v procentech vůči TÉHLE
   krabici — proto musí být rodičem kresba, ne celý vizuál. */
/* Poměr stran drží kresba i ve chvíli, kdy se vyměňuje. `@key="_wall"`
   při přepnutí stěny celý prvek zahodí a postaví nový; bez rezervovaného
   místa mezitím výška spadne na nulu, stránka poskočí a lepivá hlavička to
   pochopí jako „uživatel rolluje nahoru" a vyjede. */
.kp-viz__art { position: relative; aspect-ratio: 400 / 260; }

/* ---- levý panel --------------------------------------------------------- */

.kp-panel {
    display: grid;
    gap: 18px;
    min-width: 0;
    padding: 18px;
    border-radius: var(--cfg-radius);
    border: 0;
    background: linear-gradient(180deg, var(--cfg-panel) 0%, var(--cfg-panel-2) 100%);
    box-shadow: var(--cfg-shadow);
}

.kp-sec { display: grid; gap: 12px; min-width: 0; }

/* Tenká linka mezi A / B / C / D — v referenci jsou sekce oddělené, ne
   nalepené na sebe. */
.kp-sec + .kp-sec {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--cfg-line-soft);
}

.kp-sec__head {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Reference nadpisy sekcí nerozbaluje — jsou statické, bez šipky i bez
       kurzoru, který by ke klikání zval. Sekce zůstávají otevřené. */
    cursor: default;
    list-style: none;
}

.kp-sec__head::-webkit-details-marker { display: none; }

/* Jediný interaktivní prvek sekce bez vlastního zaostření — ostatní ovládání
   konfigurátoru své :focus-visible má a summary nesmí být výjimka. */
.kp-sec__head:focus-visible {
    outline: 2px solid var(--cfg-green, #3C7A34);
    outline-offset: 3px;
    border-radius: 10px;
}

.kp-sec__key {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--cfg-key-bg, #F3E7D3);
    color: var(--cfg-key-ink, #8A6A3A);
    font-size: 12px;
    font-weight: 700;
}

.kp-sec__title { font-weight: 700; font-size: 16px; white-space: nowrap; }
.kp-sec__sub { font-size: 12px; color: var(--cfg-ink-3); }

/* Reference u nadpisů sekcí žádnou šipku nemá — sekce jsou vždy otevřené,
   takže rozbalovací marker jen mizí. */
.kp-sec__head::after { content: none; }

.kp-sec__hint {
    display: flex;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--cfg-ink-2);
}

.kp-sec__hint span { color: var(--cfg-green-2); font-weight: 700; }

/* ---- karty (velikost, úroveň) ------------------------------------------ */

/* Odsazení nahoře nechává místo odznaku „Doporučeno", který přesahuje přes
   horní hranu prostřední karty. */
.kp-opts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 11px;
}

.kp-opt {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 3px;
    align-content: center;
    padding: 10px 8px;
    border-radius: var(--cfg-radius-sm);
    /* Průhledný lem, ne žádný: karta si tak drží stejný rozměr i po výběru,
       kdy se lem obarví na zeleno. V klidu je vidět jen stín, jako v referenci. */
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--cfg-card) 0%, var(--cfg-card-2) 100%);
    font: inherit;
    color: var(--cfg-ink);
    cursor: pointer;
    text-align: center;
    box-shadow: 0 1px 2px rgba(70, 52, 25, 0.04), 0 6px 18px rgba(70, 52, 25, 0.06);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.kp-opt:hover { border-color: var(--cfg-green-2); }
.kp-opt:focus-visible { outline: 3px solid var(--cfg-green-2); outline-offset: 2px; }

.kp-opt.is-active {
    border-color: var(--cfg-green);
    background: var(--cfg-card-on);
    box-shadow: 0 0 0 1px var(--cfg-green), 0 4px 12px rgba(48, 90, 29, 0.12);
}

.kp-opt__icon { display: grid; place-items: center; height: 24px; }
.kp-opt__icon svg { width: 23px; height: 23px; color: var(--cfg-ink-2); }
.kp-opt__icon img { width: 24px; height: 24px; object-fit: contain; }
.kp-opt.is-active .kp-opt__icon svg { color: var(--cfg-green); }

.kp-opt__name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.kp-opt__note { font-size: 10.5px; line-height: 1.2; color: var(--cfg-ink-3); }

/* Rozměry na kartě velikosti — drobně pod názvem, tokenová barva kvůli motivu. */
.kp-opt__dim { font-size: 10px; line-height: 1.15; color: var(--cfg-ink-3); }

/* Odznak sedí NA horní hraně karty a přesahuje nad ni — mřížka mu na to
   nechává `padding-top`, takže ho nemá co oříznout. */
.kp-opt__flag {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 2px 9px;
    border-radius: var(--cfg-radius-pill);
    background: var(--cfg-green);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
}

/* Nejvyšší úroveň je plná tmavá zeleň — reference ji odlišuje výplní, ne jen
   lemem, protože je to doporučená volba. */
.kp-opt--level.is-active:last-child {
    background: var(--cfg-green);
    border-color: var(--cfg-green);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(48, 90, 29, 0.28);
}

.kp-opt--level.is-active:last-child .kp-opt__note { color: rgba(255, 255, 255, 0.82); }

/* ---- výbava úrovně ------------------------------------------------------ */



/* ---- doplňky ------------------------------------------------------------ */

/* Dva sloupce jako v referenci. Na velkém monitoru je panel dost široký na
   to, aby se deset doplňků vešlo na pět řádků místo deseti — pod sebou by
   sekce C zabrala víc místa než všechno ostatní dohromady. */
/* Jeden doplněk na řádek. Ve dvou sloupcích se dlouhé názvy („Automatické
   dosypávání", „Okapový systém") lámaly na dva až tři řádky a cena se od nich
   odtrhla na druhý konec buňky — deset položek pod sebou se čte rychleji než
   pět řádků, ve kterých se oko vrací. */
.kp-adds {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: stretch;
}

.kp-add {
    border-radius: var(--cfg-radius-sm);
    border: 1px solid transparent;
    background: var(--cfg-row);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.kp-add.is-on { border-color: color-mix(in oklab, var(--cfg-green) 30%, var(--cfg-line-soft)); }
.kp-add.is-included { background: color-mix(in oklab, var(--cfg-green) 7%, var(--cfg-row)); }

.kp-add__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 8px 10px;
    cursor: pointer;
}

.kp-add.is-included .kp-add__row { cursor: default; }

/* Skutečný checkbox zůstává v DOM kvůli klávesnici a čtečce — jen ho není
   vidět, protože stav ukazuje přepínač vedle. */
.kp-add__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.kp-add__input:focus-visible + .kp-switch { outline: 3px solid var(--cfg-green-2); outline-offset: 2px; }

.kp-add__name { font-size: 12px; line-height: 1.25; }

.kp-add__price {
    display: grid;
    justify-items: end;
    gap: 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--cfg-ink);
    white-space: nowrap;
}

.kp-add__incl {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--cfg-green-soft);
    color: var(--cfg-green-ink, #5B7A47);
    font-size: 10px;
    font-weight: 600;
}

.kp-add.is-included .kp-add__price > span:first-child { color: var(--cfg-ink-3); font-weight: 500; }



.kp-matrix { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.kp-matrix__row {
    display: grid;
    grid-template-columns: minmax(0, 148px) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.kp-matrix__row.is-off { opacity: 0.5; }

/* Podřádek patří k řádku nad sebou, ne vedle něj: odsazení a slabší popisek
   říkají „tohle upřesňuje předchozí prvek". Bez odsazení se čtyři řádky pod
   sebou tváří jako čtyři samostatné prvky kurníku. */
.kp-matrix__row--sub { padding-top: 0; padding-inline-start: 14px; }
.kp-matrix__row--sub .kp-matrix__name { font-size: 12.5px; color: var(--cfg-ink-2); }
.kp-matrix__row--sub .kp-matrix__icon { opacity: 0.72; }

.kp-matrix__label { display: flex; align-items: center; gap: 9px; min-width: 0; }
.kp-matrix__icon { display: grid; place-items: center; color: var(--cfg-ink-3); flex: 0 0 auto; }
.kp-matrix__icon svg { width: 17px; height: 17px; }
.kp-matrix__name { display: grid; font-size: 12.5px; line-height: 1.25; }
.kp-matrix__note { font-size: 10.5px; color: var(--cfg-ink-3); }

.kp-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kp-slots--pair { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }

.kp-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 6px;
    border-radius: var(--cfg-radius-pill);
    border: 1px solid var(--cfg-line-soft);
    background: var(--cfg-white);
    font: inherit;
    font-size: 12px;
    color: var(--cfg-ink-2);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.kp-slot:hover:not(:disabled) { border-color: var(--cfg-green-2); }
.kp-slot:focus-visible { outline: 3px solid var(--cfg-green-2); outline-offset: 1px; }
/* Zakázaná poloha musí být poznat na první pohled, ne až po kliknutí, které
   nic neudělá. Přerušovaný lem a šrafa říkají „tady to nejde"; samotné
   ztlumení barvy by splynulo s běžným nevybraným stavem. */
.kp-slot:disabled {
    cursor: not-allowed;
    border-style: dashed;
    border-color: var(--cfg-line);
    color: var(--cfg-ink-3);
    background:
        repeating-linear-gradient(135deg,
            transparent 0 5px,
            color-mix(in oklab, var(--cfg-ink-3) 9%, transparent) 5px 7px),
        var(--cfg-white);
}

.kp-slot:disabled .kp-slot__glyph { opacity: 0.5; }

/* Řádek, na kterém prvek být nemůže, ztlumíme celý — jinak čte oko jen
   zašedlé pilulky a název nad nimi působí, že tam prvek je. */
.kp-matrix__row.is-off .kp-matrix__label { opacity: 0.62; }

/* Prvek, který v kurníku není VŮBEC — ani na jiné stěně. Jantarová, ne
   červená: chybějící prvek může být záměr, a červená by z volby udělala chybu.
   Značka je vlevo u ikony, aby se řádek nerozšiřoval. */
.kp-matrix__row.is-missing {
    border-inline-start: 2px solid var(--cfg-amber-line);
    margin-inline-start: -8px;
    padding-inline-start: 6px;
    border-radius: 4px 0 0 4px;
}

.kp-matrix__row.is-missing .kp-matrix__icon { color: var(--cfg-amber-ink); }

.kp-matrix__missing {
    display: block;
    margin-top: 1px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cfg-amber-ink);
}

.kp-slot.is-active {
    background: var(--cfg-green);
    border-color: var(--cfg-green);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(48, 90, 29, 0.26);
}

.kp-why {
    grid-column: 1 / -1;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--cfg-ink-3);
}




.kp-why p { margin: 4px 0 0; line-height: 1.4; }

/* Šipka na konci řádku okapu — čtvercová, ne roztažená jako polohy. */
.kp-slot--more {
    flex: 0 0 auto;
    width: 34px;
    padding: 6px 0;
}

.kp-slot--more svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
.kp-slot--more.is-open svg { transform: rotate(180deg); }

.kp-why-roof {
    grid-column: 1 / -1;
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--cfg-ink-3);
}

/* Tlačítko 360 během prohlídky — jemné pulzování místo statického textu. */
.kp-tool.is-touring { border-color: var(--cfg-green-2); color: var(--cfg-green); }
.kp-tool.is-touring .kp-tool__badge { animation: kp-tour 1.2s linear infinite; }

@keyframes kp-tour {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.kp-slot__dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #FFFFFF;
    flex: 0 0 auto;
}

/* ---- vizuál ------------------------------------------------------------- */

.kp-viz {
    position: relative;
    padding: 14px 30px 18px;
    border-radius: var(--cfg-radius);
    border: 0;

    /* Do ztracena za kurníkem: měkké světlo shora a travnatý nádech dole.
       Zástupné pozadí pro VEKTOROVOU kresbu — tam je rám správně, kurník
       jinak stojí na holé stránce. Se skutečnou zahradou se celý tenhle
       blok ruší níž v `.kp-cfg--scene .kp-viz`. */
    background:
        radial-gradient(120% 90% at 50% 38%,
            color-mix(in oklab, var(--cfg-white) 92%, transparent) 0%,
            transparent 62%),
        linear-gradient(180deg, var(--cfg-card) 0%,
            color-mix(in oklab, #7FA05A 8%, var(--cfg-card)) 58%,
            color-mix(in oklab, #7FA05A 18%, var(--cfg-card)) 100%);
    box-shadow: var(--cfg-shadow);
    overflow: hidden;
}

/* ==========================================================================
 *  Zahrada za kurníkem
 *  ---------------------------------------------------------------------
 *  V `_refs/configurator_desktop.png` NENÍ kurník v kartě. Zahrada tam sahá
 *  od pravé hrany levého panelu (x ≈ 475) až za okraj stránky a odshora až
 *  pod cenový panel; ovládací panely na ní LEŽÍ. Dřív byla scéna uvnitř
 *  `.kp-viz`, kterou `overflow: hidden` ořízl na zaoblenou kartu se stínem —
 *  z otevřené zahrady se tím stal ovál v rámečku.
 *
 *  Vrstvení je stejné jako v zóně `/reference` a stojí na malovacím pořadí,
 *  ne na triku: podklady sekce → scéna (`z-index: 1`) → obsah (`2`).
 *  Sekce ani mřížka proto NESMĚJÍ dostat vlastní `z-index`.
 * ========================================================================== */
.kp-cfg--scene { position: relative; z-index: 0; }

/* Rozměry jsou odměřené z živého rozvržení, ne zvolené od oka:
     levý panel končí na x = 482  → zahrada musí být plná právě tam,
     pás náhledů končí na y = 786 → pod ním už má dohasnout,
     hlavička (pilulka 360°) sedí do y ≈ 100 → tam ještě není.
   Proto `top: 100px`, výška 760 a vodorovný náběh v PIXELECH: kdyby byl
   v procentech, posunul by se s šířkou okna a od panelu by se odlepil. */
/* Zahrada je ukotvená k VIZUÁLU, ne k sekci.
   Dokud visela na `.kp-cfg` s pevnou výškou 700 px, mohla sedět jen v jedné
   velikosti okna: kurník se škáluje se šířkou sloupce, trávník ne. Odměřeno
   napříč rozlišeními byl rozdíl mezi nohama kurníku a trávníkem od −58 do
   +83 px — podle monitoru se kurník buď vznášel, nebo se bořil do země.
   Odsazení je proto v PROCENTECH vůči `.kp-viz`, jehož poměr stran drží
   kresba (400:260). Všechny členy tím škálují společně a poměr „nohy vs.
   trávník" vyjde na každém zařízení stejně. Ze stejného důvodu je i náběh
   masky v procentech, ne v pixelech. */
.kp-cfg--scene .kp-viz__scene {
    display: block;
    position: absolute;
    inset: -14% -54% -58% -26%;
    /* ZÁPORNÁ vrstva. Sekce je vlastní kontext vrstvení (`.kp-cfg--scene`),
       takže `-1` maluje nad jejím pozadím, ale POD vším, co v ní stojí
       v toku — tedy pod všemi panely najednou. Zvedat každý panel zvlášť
       znamenalo na jeden zapomenout, což se hned stalo: zahrada přetekla
       přes výběr velikosti i přes pás stěn. */
    z-index: -1;
    pointer-events: none;
    /* Vpravo se zahrada ztrácí stejně jako vlevo. Bez toho končila natvrdo na
       vlastní hraně: vodorovný přechod nabíhal jen zleva a doprava zůstal
       neprůhledný až do konce prvku, takže vedle panelu ceny stál svislý řez
       přes celou výšku sekce. Přechod začíná na 83 % šířky prvku — vizuál
       končí na 70 %, takže se odbourává jen přesah, ne zahrada za kurníkem.
       Průhledný je UŽ NA 97 %, ne až na 100 %: od 1536 px níž leží pravá hrana
       prvku přesně na hraně sekce, která ho ořezává. Kdyby tam maska ještě
       držela zbytkových pár procent krytí, ustřihne se a je z toho zase řez —
       jen slabší, a o to hůř k nalezení. */
    -webkit-mask-image:
        linear-gradient(90deg,
            transparent 0%, rgba(0, 0, 0, 0.22) 3%, rgba(0, 0, 0, 0.62) 7.5%, rgba(0, 0, 0, 0.88) 11.5%, #000 15.5%,
            #000 83%, rgba(0, 0, 0, 0.86) 87%, rgba(0, 0, 0, 0.55) 91%, rgba(0, 0, 0, 0.16) 94.5%, transparent 97%),
        linear-gradient(180deg,
            transparent 0%, rgba(0, 0, 0, 0.1) 5%, rgba(0, 0, 0, 0.28) 11%,
            rgba(0, 0, 0, 0.55) 17%, rgba(0, 0, 0, 0.8) 24%, rgba(0, 0, 0, 0.94) 30%, #000 36%,
            #000 60%, rgba(0, 0, 0, 0.72) 74%, rgba(0, 0, 0, 0.34) 88%, rgba(0, 0, 0, 0.12) 95%, transparent 100%);
    mask-image:
        linear-gradient(90deg,
            transparent 0%, rgba(0, 0, 0, 0.22) 3%, rgba(0, 0, 0, 0.62) 7.5%, rgba(0, 0, 0, 0.88) 11.5%, #000 15.5%,
            #000 83%, rgba(0, 0, 0, 0.86) 87%, rgba(0, 0, 0, 0.55) 91%, rgba(0, 0, 0, 0.16) 94.5%, transparent 97%),
        linear-gradient(180deg,
            transparent 0%, rgba(0, 0, 0, 0.1) 5%, rgba(0, 0, 0, 0.28) 11%,
            rgba(0, 0, 0, 0.55) 17%, rgba(0, 0, 0, 0.8) 24%, rgba(0, 0, 0, 0.94) 30%, #000 36%,
            #000 60%, rgba(0, 0, 0, 0.72) 74%, rgba(0, 0, 0, 0.34) 88%, rgba(0, 0, 0, 0.12) 95%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.kp-cfg--scene .kp-viz__scene img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Odměřeno ve zdroji (1600 × 1200): pata plotu na y ≈ 619, posekaný
       trávník od y ≈ 750. Kotví se tak, aby nohy kurníku dosedly kolem
       y ≈ 800 — tedy KOUSEK POD hranou trávníku, ne na ni. Při 53 % dosedaly
       na y ≈ 724, což je ještě pás květin před plotem, a kurník se z odstupu
       četl jako vznášející se.
       Škáluje to s vizuálem, takže hodnota platí na každém rozlišení; ověřuje
       `v34-shots.js` na třech šířkách. */
    object-position: 50% 95%;
}

[data-theme="dark"] .kp-viz__scene img { filter: brightness(0.58) saturate(0.82); }

/* Sekční vrstva zanikla — zůstává jen jako pojistka, kdyby na ni někde
   zbyl odkaz. */
.kp-cfg__scene { display: none; }

/* V noci se zahrada ztlumí. Návrh noční variantu nemá, ale plné polední
   slunce mezi tmavými panely působí jako vystřižená fotka nalepená na
   stránku — a pravidlo „každá sekce musí ctít motiv" platí i pro fotku,
   jen se u ní neplní přebarvením plochy, nýbrž ubráním jasu. */

/* Se skutečnou zahradou přijde vizuál o rám: žádné zaoblení, stín ani
   zástupný přechod. Kurník tak stojí přímo na trávě, jako v návrhu.
   Zároveň se zvětší: boční odsazení kartu potřebovalo, otevřená scéna ne,
   a mírný přesah sloupce posadí nohy hlouběji do posekaného trávníku —
   bez toho končily ve výšce květinového pásu a kurník se „vznášel". */
.kp-cfg--scene .kp-viz {
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    /* Šířku určuje KRESBA, ne sloupec. Zahrada se pozicuje v procentech vůči
       téhle krabici, takže musí držet její poměr stran; kdyby se roztáhla
       přes celý sloupec a kresba se uvnitř jen zúžila, poměr by se rozešel
       a s ním i usazení kurníku na trávě. */
    width: 100%;
    margin-inline: auto;
    padding: 0 0 8px;
}


/* Tady BÝVALO zvedání panelů nad scénu — z doby, kdy zahrada visela na
   sekci. Teď je uvnitř vizuálu na `z-index: -1`, takže ji sekce (vlastní
   kontext vrstvení) drží pod vším, co v ní stojí v toku, a zvedat není co.
   Navíc to škodilo: `z-index: 2` na `.kp-cfg__main` z něj udělalo vlastní
   kontext, scéna se do něj uzavřela a přetekla přes levý panel. */

.kp-viz__art { animation: kp-wall-in 0.34s var(--ease-out, ease) both; }
.kp-coop-svg { width: 100%; height: auto; display: block; }

/* Díly nastupují měkce, aby bylo poznat, že přibyly — ne aby to poskočilo. */
.kp-coop__part,
.kp-coop__gutter { animation: kp-part-in 0.28s var(--ease-out, ease) both; }

@keyframes kp-wall-in {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes kp-part-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- popisky prvků ------------------------------------------------------ */

/* Na kotvě sedí PUNTÍK, ne střed celé bubliny. `translate(-50%, -50%)`
   centrovalo celý flex box (puntík + štítek), takže puntík skončil o půl
   šířky štítku vlevo od místa, na které ukazuje — u malých dvířek to dělalo
   sedmdesát pixelů. Puntík má 22 px, posouvá se tedy o 11.
   Na telefonu jsou štítky skryté, takže tam box == puntík a chyba nebyla
   vidět; proto se to našlo až na velkém monitoru. */
.kp-spot {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 7px;
    transform: translate(-11px, -50%);
    text-decoration: none;
    color: inherit;
    animation: kp-spot-in 0.3s var(--ease-out, ease) both;
}

@keyframes kp-spot-in { from { opacity: 0; } to { opacity: 1; } }

/* Otočená bublina má puntík vpravo, takže se posouvá od pravého okraje. */
.kp-spot--flip { flex-direction: row-reverse; transform: translate(calc(-100% + 11px), -50%); }


.kp-spot__dot {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--cfg-green-2);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(30, 60, 20, 0.35);
    transition: transform 0.2s var(--ease-out, ease);
}

.kp-spot:hover .kp-spot__dot,
.kp-spot:focus-visible .kp-spot__dot { transform: scale(1.14); }
.kp-spot:focus-visible { outline: 3px solid var(--cfg-green-2); outline-offset: 4px; border-radius: 999px; }

/* Bublina je ze skla: kurník pod ní zůstane tušit, ale text drží kontrast.
   Plná výplň zakrývala kresbu právě tam, kde je popisovaný prvek. */
.kp-spot__tag {
    display: grid;
    max-width: 190px;
    padding: 5px 10px;
    border-radius: 10px;
    background: color-mix(in oklab, var(--cfg-white) 74%, transparent);
    border: 1px solid color-mix(in oklab, var(--cfg-white) 62%, transparent);
    box-shadow: 0 2px 8px rgba(70, 52, 25, 0.14),
                inset 0 1px 0 color-mix(in oklab, #FFFFFF 55%, transparent);
    -webkit-backdrop-filter: blur(7px) saturate(1.2);
            backdrop-filter: blur(7px) saturate(1.2);
    white-space: nowrap;
    line-height: 1.2;
}

/* Bez rozostření by průsvitná výplň text položila na dřevo a přestal by být
   čitelný — proto se v „ploché" úrovni efektů vrací plná barva. */
:root[data-effects="minimal"] .kp-spot__tag,
:root[data-effects="balanced"] .kp-spot__tag {
    background: var(--cfg-white);
    border-color: var(--cfg-line-soft);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
}

@supports not (backdrop-filter: blur(1px)) {
    .kp-spot__tag { background: var(--cfg-white); }
}

.kp-spot__label { font-size: 12px; font-weight: 600; color: var(--cfg-ink); }
.kp-spot__note { font-size: 10.5px; color: var(--cfg-ink-3); }

/* ---- náhledy stran ------------------------------------------------------ */

/* Seznam prvků pod obrázkem. Na desktopu je zbytečný — tam jsou popisky přímo
   na kresbě — a proto se ukáže až tam, kde se bubliny skrývají. */
.kp-legend {
    display: none;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    gap: 6px;
    flex-wrap: wrap;
}

.kp-legend__link {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--cfg-radius-pill);
    background: var(--cfg-white);
    box-shadow: 0 1px 2px rgba(70, 52, 25, 0.07);
    color: var(--cfg-ink);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.3;
}

.kp-legend__dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    align-self: center;
    border-radius: 999px;
    background: var(--cfg-green-2);
}

.kp-legend__note { color: var(--cfg-ink-3); font-size: 11px; }

.kp-legend__link:focus-visible {
    outline: 3px solid var(--cfg-green-2);
    outline-offset: 2px;
}

/* Kresba jde u okrajů do ztracena, jako v klientově předloze — bez tvrdé
   hrany mezi obrázkem a plochou panelu. */
.kp-viz__art {
    /* Procenta u `radial-gradient` jsou POLOMĚRY, ne průměry. S 88 % šířky
       sahala elipsa daleko za rám a ztrácení se odehrálo mimo obrázek — fotka
       pak končila ostrým obdélníkem. Poloměr musí být kolem poloviny, aby se
       okraj rozplynul uvnitř. */
    -webkit-mask-image: radial-gradient(58% 64% at 50% 46%,
        #000 52%, rgba(0, 0, 0, 0.7) 76%, rgba(0, 0, 0, 0.22) 92%, transparent 100%);
            mask-image: radial-gradient(58% 64% at 50% 46%,
        #000 52%, rgba(0, 0, 0, 0.7) 76%, rgba(0, 0, 0, 0.22) 92%, transparent 100%);
}

.kp-views {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: var(--cfg-radius);
    border: 0;
    background: linear-gradient(180deg, var(--cfg-panel) 0%, var(--cfg-panel-2) 100%);
    box-shadow: var(--cfg-shadow);
}

.kp-views__title { margin: 0; text-align: center; font-size: 13px; font-weight: 700; }

.kp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.kp-thumb {
    display: grid;
    gap: 4px;
    padding: 6px 5px 7px;
    border-radius: var(--cfg-radius-sm);
    border: 1px solid var(--cfg-line-soft);
    background: var(--cfg-white);
    font: inherit;
    color: var(--cfg-ink);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.kp-thumb:hover { border-color: var(--cfg-green-2); }
.kp-thumb:focus-visible { outline: 3px solid var(--cfg-green-2); outline-offset: 2px; }

.kp-thumb.is-active {
    border-color: var(--cfg-green);
    background: var(--cfg-card-on);
    box-shadow: 0 0 0 1px var(--cfg-green);
}

.kp-thumb__art { display: block; }
.kp-thumb__art .kp-coop-svg { width: 100%; height: auto; }

/* Nájezd se v miniatuře ruší — čtyři kresby, které se rozsvěcují při každém
   přepnutí, působí jako porucha, ne jako zpětná vazba. */
/* POZOR: `transform: none` tu smí být jen na `.kp-viz__art`. U dílů kurníku
   je poloha v SVG atributu `transform`, a CSS vlastnost `transform` ho
   PŘEBIJE — všechny díly se pak sesypou do počátku, tedy do levého horního
   rohu obrázku. Animace `kp-part-in` navíc hýbe jen krytím, takže tu
   `transform` nemá co dělat ani jako reset. */
.kp-thumb__art .kp-viz__art { animation: none; opacity: 1; transform: none; }
.kp-thumb__art .kp-coop__part,
.kp-thumb__art .kp-coop__gutter { animation: none; opacity: 1; }

.kp-thumb__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    line-height: 1.2;
}

.kp-thumb.is-active .kp-thumb__label { font-weight: 700; color: var(--cfg-green); }



/* ---- živá cena ---------------------------------------------------------- */

.kp-price {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 18px;
    border-radius: var(--cfg-radius);
    border: 0;

    /* Nejvýraznější přechod v celém návrhu: nahoře béžová #ECE4D4, dole skoro
       bílá #FCF8F2 (naměřený trend jasu +22,7 přes výšku panelu). */
    background: linear-gradient(180deg, var(--cfg-price) 0%, var(--cfg-price-2) 100%);
    box-shadow: var(--cfg-shadow);

    /* Panel drží VÝŠKU SVÉHO OBSAHU, neroztahuje se přes obě řady mřížky.
       Roztažený sahal až na spodní hranu pásu výhod, jenže obsah končil
       o pět set pixelů výš — a z „klidné plochy" se stala prázdná bílá
       deska. V předloze panel končí krátce pod tlačítky. */
    align-self: start;
}

.kp-price__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kp-price__title { margin: 0; font-family: var(--kp-font-display); font-size: 17px; font-weight: 700; }

.kp-price__badge {
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--cfg-line);
    background: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    color: var(--cfg-green);
    white-space: nowrap;
}

/* Cena je tmavá, ne zelená — reference ji drží v barvě textu, aby zelenou
   nesla jen tlačítka a stavy. */
.kp-price__sum {
    font-family: var(--kp-font-display);
    font-size: 40px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--cfg-ink);
    animation: kp-price-pop 0.34s var(--ease-out, ease);
}

@keyframes kp-price-pop {
    0%   { transform: translateY(4px) scale(0.985); opacity: 0.4; }
    100% { transform: none; opacity: 1; }
}

.kp-price__vat { margin-top: -6px; font-size: 13px; color: var(--cfg-ink-2); }

.kp-bill { display: grid; gap: 1px; margin: 6px 0 0; font-size: 12.5px; }

.kp-bill > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: baseline;
    padding: 3px 0;
}

.kp-bill dt, .kp-bill dd { margin: 0; }
.kp-bill dd { text-align: end; white-space: nowrap; }

/* Rozměry pod položkou velikosti v rozpisu ceny. */
.kp-bill__dim { display: block; margin-top: 1px; font-size: 10.5px; color: var(--cfg-ink-3); }

.kp-bill__head {
    padding-bottom: 5px;
    font-size: 12px;
    color: var(--cfg-ink-3);
}

.kp-bill__group { padding-top: 6px; font-size: 12px; color: var(--cfg-ink-3); }
.kp-bill__row--add dt { color: var(--cfg-ink); }

.kp-bill__incl {
    display: inline-block;
    margin-inline-end: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--cfg-green-soft);
    color: var(--cfg-green-ink, #5B7A47);
    font-size: 10.5px;
    font-weight: 600;
}

.kp-bill__row--ship { margin-top: 4px; }

.kp-delivery {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: var(--cfg-radius-sm);
    border: 1px solid var(--cfg-amber-line);
    background: var(--cfg-amber);
    font-size: 12.5px;
}

.kp-delivery__icon { color: var(--cfg-amber-ink); flex: 0 0 auto; }
.kp-delivery__icon svg { width: 20px; height: 20px; }
.kp-delivery b { display: block; font-size: 13px; font-weight: 700; }
.kp-delivery__when { color: var(--cfg-amber-ink); }
.kp-delivery p { margin: 4px 0 0; color: var(--cfg-ink-2); line-height: 1.4; }

/* Hlavní CTA v hero je odkaz, tady je to tlačítko — a selektory v kp-hero.css
   míří na `a.kp-cta--primary`, takže by button zůstal bez výplně. Element
   v selektoru drží dost vysokou specificitu, aby nezáleželo na pořadí souborů. */
.kp-cfg button.kp-cta {
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
}

.kp-cfg button.kp-cta--primary {
    background: var(--cfg-green);
    border-color: var(--cfg-green);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(48, 90, 29, 0.28);
}

.kp-cfg button.kp-cta--primary:hover { background: color-mix(in oklab, var(--cfg-green) 86%, black); }

.kp-cfg button.kp-cta--glass {
    background: #FFFFFF;
    border-color: var(--cfg-line);
    color: var(--cfg-ink);
}

.kp-price__cta {
    width: 100%;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: var(--cfg-radius-cta);
    font-size: 16px;
}

.kp-price__arrow { display: grid; place-items: center; }
.kp-price__arrow svg { width: 20px; height: 20px; }

.kp-price__save {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--cfg-radius-cta);
    border: 1px solid var(--cfg-line);
    background: var(--cfg-white);
    font: inherit;
    font-size: 14px;
    color: var(--cfg-ink);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.kp-price__save svg { width: 16px; height: 16px; color: var(--cfg-green); display: block; }
.kp-price__save > span { display: grid; place-items: center; line-height: 0; }
.kp-price__save:hover { border-color: var(--cfg-green-2); }
.kp-price__save:focus-visible { outline: 3px solid var(--cfg-green-2); outline-offset: 2px; }
.kp-price__save.is-saved { border-color: var(--cfg-green); color: var(--cfg-green); }

.kp-price__call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--cfg-ink-2);
}

.kp-price__call svg { width: 14px; height: 14px; color: var(--cfg-green-2); flex: 0 0 auto; }

/* ---- pás výhod ---------------------------------------------------------- */

.kp-perks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 18px 20px;
    list-style: none;
    border-radius: var(--cfg-radius);
    border: 0;
    background: linear-gradient(180deg, var(--cfg-perk) 0%, var(--cfg-perk-2) 100%);
    box-shadow: var(--cfg-shadow);
}

.kp-perk { display: flex; gap: 14px; align-items: center; }

/* Ikona roste s tím, jak se pás zužuje: jakmile se titulek zalomí na dva
   řádky, je vedle něj místo. Proto `clamp` vázaný na šířku okna.
   Od v62 o třetinu menší (132 → 88). Rozměry vznikly, když pás stál jen ve
   dvou třetinách šířky a ikona musela dlaždici vyplnit; přes celou šířku z ní
   byl na velkém monitoru největší prvek sekce — větší než cena. Je to doplněk
   k textu, ne obrázek s vlastním sdělením. */
.kp-perk__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: clamp(72px, 4.8vw, 88px);
    height: clamp(72px, 4.8vw, 88px);
}

.kp-perk__icon img { width: 100%; height: 100%; object-fit: contain; }
.kp-perk b { display: block; font-size: 13px; line-height: 1.3; }
.kp-perk p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--cfg-ink-2); }

.kp-perk + .kp-perk { border-inline-start: 1px solid var(--cfg-line-soft); padding-inline-start: 20px; }

/* ---- realizace ---------------------------------------------------------- */

.kp-works { display: grid; gap: 10px; }

.kp-works__title {
    margin: 0;
    font-family: var(--kp-font-display);
    font-size: 20px;
    font-weight: 700;
}

.kp-works__lead { margin: 0; font-size: 13px; color: var(--cfg-ink-2); max-width: 52ch; }

/* Pás s fotkami sedí mezi dvěma šipkami. Scroll uvnitř zůstává nativní se
   `scroll-snap` (prst, kolečko, klávesnice); šipky ho jen ovládají myší.
   Okraje jdou do ztracena maskou, aby bylo poznat, že pás pokračuje. */
.kp-works__viewport {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.kp-strip__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 999px;
    background: var(--cfg-white);
    color: var(--cfg-ink);
    box-shadow: 0 2px 6px rgba(70, 52, 25, 0.14), 0 10px 24px rgba(70, 52, 25, 0.12);
    cursor: pointer;
    transition: background var(--motion-durationFast, 0.16s) var(--motion-easing, ease),
                color var(--motion-durationFast, 0.16s) var(--motion-easing, ease);
}

.kp-strip__arrow svg { width: 20px; height: 20px; }
.kp-strip__arrow:hover { background: var(--cfg-green); color: #FFFFFF; }
.kp-strip__arrow:focus-visible { outline: 3px solid var(--cfg-green-2); outline-offset: 2px; }
.kp-strip__arrow--prev { inset-inline-start: -6px; }
.kp-strip__arrow--next { inset-inline-end: -6px; }

.kp-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(190px, 15vw, 260px);
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 2px;
    /* Posuvník pod pásem vypadal jako nedodělek; listuje se šipkami. Scroll
       samotný zůstává — kolečko i prst fungují dál, jen není vidět lišta. */
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px,
                        #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 22px,
                        #000 calc(100% - 22px), transparent 100%);
}

.kp-strip::-webkit-scrollbar { display: none; }
.kp-strip:focus-visible { outline: 3px solid var(--cfg-green-2); outline-offset: 3px; }

.kp-strip__item {
    scroll-snap-align: start;
    padding: 0;
    border: 1px solid var(--cfg-line-soft);
    border-radius: var(--cfg-radius-sm);
    overflow: hidden;
    cursor: zoom-in;
    background: var(--cfg-card);
    aspect-ratio: 4 / 3;
    transition: transform 0.24s var(--ease-out, ease), box-shadow 0.24s ease;
}

.kp-strip__item:hover { transform: translateY(-2px); box-shadow: var(--cfg-shadow); }
.kp-strip__item:focus-visible { outline: 3px solid var(--cfg-green-2); outline-offset: 2px; }
.kp-strip__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- prohlížeč fotek -----------------------------------------------------
 *
 *  Sdílený s konfigurátorem i galerií realizací. Přepsáno ve v94 — na telefonu
 *  nekryl celou plochu a nešel zavřít:
 *
 *   • `z-index: 90` mu nestačilo. Lišta s cenou v konfigurátoru sedí na 200 a
 *     skip-link taky, takže se přes otevřený prohlížeč kreslily. Teď je na 300,
 *     nad vším, co si stránka drží.
 *   • `100vh` je na mobilu VĚTŠÍ než viditelná plocha (počítá se s schovanou
 *     lištou prohlížeče), takže zavírací křížek končil pod dolní hranou nebo
 *     mimo obraz. `100dvh` je skutečná viditelná výška.
 *   • Ovládání leželo v rozích bez ohledu na výřez displeje. `env(safe-area-*)`
 *     ho odsune pod čelo telefonu i nad domovský indikátor.
 *   • Zavřít šlo jen křížkem a klepnutím vedle fotky — jenže fotka zabírala
 *     skoro celou plochu, takže „vedle" skoro neexistovalo. Křížek je teď
 *     v horní liště přes celou šířku a má 48 px dotykové plochy.
 * ------------------------------------------------------------------------- */

.kp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    /* Obrana proti cizí desce: kdyby prohlížeč zase skončil uvnitř kontejneru,
       který svým dětem předepisuje šířku (`.kp-cfg > *` to dělá), `inset: 0`
       by sám nestačil — explicitní šířka rodiče vyhrává. */
    width: auto;
    max-width: none;
    display: grid;
    /* `minmax(0, …)`, ne holé `1fr`: implicitní minimum je `auto`, takže by se
       prostřední řádek roztáhl na PŘIROZENOU výšku fotky a vytlačil pás
       náhledů pod dolní hranu okna. Nula jako minimum dovolí fotku zmenšit. */
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: rgba(10, 14, 10, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: kp-fade 0.22s ease both;
    /* Skutečná viditelná výška na telefonu; starší prohlížeče spadnou na vh. */
    height: 100vh;
    height: 100dvh;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

@keyframes kp-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- horní lišta: počítadlo vlevo, zavřít vpravo ---- */
.kp-lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: calc(env(safe-area-inset-top, 0px) + 0.7rem) calc(env(safe-area-inset-right, 0px) + 0.9rem)
             0.7rem calc(env(safe-area-inset-left, 0px) + 1.1rem);
    color: rgba(255, 255, 255, 0.9);
}

.kp-lightbox__count {
    flex: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Kde v sadě jsme. Dvouřádkový popisek vlevo v liště: název pochůzky
   (velikost nebo tematická sada) a pod ním konkrétní realizace. Bez něj se
   při průchodu přes hranici realizace nedalo poznat, že se změnil kurník —
   fotky jedné dílny vypadají zdálky stejně. */
.kp-lightbox__where {
    min-width: 0;
    display: grid;
    gap: 0.1rem;
    margin-right: auto;
}

.kp-lightbox__where b {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kp-lightbox__where > span {
    font-size: 0.76rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.66);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Upozornění nad fotkou — dnes jediné použití je „tohle je vizualizace". */
.kp-lightbox__note {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    max-width: min(34rem, calc(100% - 2rem));
    margin: 0;
    padding: 0.42rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(28, 22, 12, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: center;
    cursor: default;
}

/* Náhrada pásu náhledů u dlouhé pochůzky: kde v sadě stojíme. Sedí ve stejném
   řádku mřížky jako náhledy, takže se výška prohlížeče nemění. */
.kp-lightbox__bar-progress {
    height: 2px;
    margin: 0 calc(env(safe-area-inset-right, 0px) + 1.1rem)
            calc(env(safe-area-inset-bottom, 0px) + 0.9rem)
            calc(env(safe-area-inset-left, 0px) + 1.1rem);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.kp-lightbox__bar-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.85);
    transition: width 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .kp-lightbox__bar-progress > span { transition: none; }
}

/* ---- plocha s fotkou ---- */
.kp-lightbox__stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;          /* jinak grid řádek nepustí obrázek zmenšit */
    padding-inline: clamp(0.5rem, 4vw, 4.5rem);
    cursor: zoom-out;       /* klepnutí vedle fotky zavírá */
}

/* Absolutní vrstva, ne položka mřížky. Procentní `max-height` se u položky
   mřížky vyhodnocuje proti VÝŠCE OBLASTI, a ta v okamžiku rozvržení ještě
   definitivní není — prohlížeč proto omezení zahodil a fotka 1280×960 se
   vykreslila v plné výšce, přerostla plochu a zalezla pod pás náhledů
   (naměřeno: oblast 761 px, obrázek 960 px). Vůči absolutně umístěnému prvku
   je vztažný rám výplňová krabice rodiče, jejíž výška definitivní JE, takže
   `max-height: 100%` platí. `margin: auto` uvnitř `inset: 0` fotku vystředí. */
.kp-lightbox__img {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--r-lg, 16px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    cursor: default;
}

/* ---- tlačítka ---- */
.kp-lightbox__close,
.kp-lightbox__nav {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.2s ease, transform 0.2s ease;
}

.kp-lightbox__close:hover,
.kp-lightbox__nav:hover { background: rgba(255, 255, 255, 0.26); }

.kp-lightbox__close:active,
.kp-lightbox__nav:active { transform: scale(0.94); }

.kp-lightbox__close:focus-visible,
.kp-lightbox__nav:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

.kp-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.kp-lightbox__nav:active { transform: translateY(-50%) scale(0.94); }

.kp-lightbox__nav--prev { left: max(0.4rem, env(safe-area-inset-left, 0px)); }
.kp-lightbox__nav--next { right: max(0.4rem, env(safe-area-inset-right, 0px)); }

/* ---- pás náhledů ----
   Skok na konkrétní fotku bez proklikávání. U jediné fotky nemá co ukazovat,
   takže se schová (viz `:only-child` níž a podmínka ve značce). */
.kp-lightbox__thumbs {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.6rem calc(env(safe-area-inset-right, 0px) + 0.9rem)
             calc(env(safe-area-inset-bottom, 0px) + 0.8rem)
             calc(env(safe-area-inset-left, 0px) + 0.9rem);
    /* `safe center`, ne holé `center`: jakmile je náhledů víc, než se vejde,
       vystředění ořízne ZAČÁTEK pásu a k prvnímu náhledu se nedá dorolovat
       (přetečení jde jen jedním směrem). `safe` v takovém případě přepne na
       zarovnání k začátku. */
    justify-content: safe center;
}

.kp-lightbox__thumbs::-webkit-scrollbar { display: none; }

.kp-lightbox__thumb {
    flex: 0 0 auto;
    width: 62px;
    height: 46px;
    padding: 0;
    border-radius: 8px;
    border: 2px solid transparent;
    overflow: hidden;
    background: none;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.kp-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kp-lightbox__thumb:hover { opacity: 0.85; }

.kp-lightbox__thumb.is-on {
    opacity: 1;
    border-color: #FFFFFF;
}

.kp-lightbox__thumb:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; opacity: 1; }

/* Zámek rolování pod otevřeným prohlížečem — jinak se pod ním hýbe stránka. */
:root.kp-lightbox-open,
:root.kp-lightbox-open body { overflow: hidden; }

@media (max-width: 620px) {
    .kp-lightbox__stage { padding-inline: 0.4rem; }
    .kp-lightbox__thumb { width: 52px; height: 39px; }
    /* Šipky na telefonu dolů k palci, ne doprostřed výšky. */
    .kp-lightbox__nav { top: auto; bottom: 0.4rem; transform: none; }
    .kp-lightbox__nav:active { transform: scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
    .kp-lightbox { animation: none; }
    .kp-lightbox__close,
    .kp-lightbox__nav,
    .kp-lightbox__thumb { transition: none; }
}

/* ---- poptávka ----------------------------------------------------------- */






/* Zúženo na formulář poptávky: .kp-field patří webu (kp-site.css, flex) a
   tenhle soubor se načítá PO něm — bez zúžení gridová varianta přepisovala
   pole na Kontaktu, v přihlášení i v aplikaci. */
.kp-field__label { font-size: 0.76rem; color: var(--fg-3, #6b6b6b); }

.kp-field__input {
    padding: 0.6rem 0.75rem;
    border-radius: var(--r-md, 12px);
    border: 1.5px solid var(--line, rgba(0, 0, 0, 0.14));
    background: var(--surface-s2, #FBFBFB);
    font: inherit;
    color: inherit;
}

.kp-field__input:focus-visible { outline: 3px solid var(--kp-a-2); outline-offset: 1px; border-color: var(--kp-a); }

/* Hláška o nedoručení. Jantarová, ne červená: poptávka se neztratila, jen
   nedošla e-mailem — a text hned nabízí telefon. */

/* ---- responzivita ------------------------------------------------------- */

/* Mřížka je natvrdo tři sloupce s explicitním umístěním položek, takže každý
   zlom musí přeložit i `grid-column` / `grid-row` — jinak se prvky slijí přes
   sebe. Přesně to se stalo, když tenhle blok chyběl. */

@media (max-width: 1240px) {
    /* Panel ceny pod obsah: ve třetím sloupci by se rozpis lámal na každém
       řádku. Ovládání a vizuál zůstávají vedle sebe. */
    .kp-cfg__grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
    /* `.kp-panel-col`, ne `.kp-panel`: kartu rozmísťování nese od v52 střední
       sloupec a taky má třídu `.kp-panel` — `grid-row: 1` ji uvnitř něj
       vystřelilo nad obrázek, takže se prvky rozmísťovaly nad kurníkem. */
    .kp-panel-col { grid-column: 1; grid-row: 1; }
    .kp-cfg__main { grid-column: 2; grid-row: 1; }
    /* `margin-top: 264px` sedí jen ve třetím sloupci, kde nad panelem
       pokračuje obrázek. Jakmile panel spadne pod obsah, je z toho jen
       prázdná díra přes čtvrt obrazovky. */
    .kp-price { grid-column: 1 / -1; grid-row: 2; align-self: auto; margin-top: 0; margin-inline-start: 0; }
    .kp-perks { grid-column: 1 / -1; grid-row: 3; }
}

/* ==========================================================================
 *  Telefon
 *  ---------------------------------------------------------------------
 *  Dvě věci, kvůli kterým se to tu liší od desktopu víc než jen šířkou
 *  sloupců — obě jsou odměřené na 390 px:
 *
 *    • Ovládání je 1 700 px vysoké a sekce „Rozmístění prvků" končí kolem
 *      2 550 px od začátku konfigurátoru. Obrázek kurníku přitom sedí na
 *      204 px. Uživatel tedy rozmísťoval prvky a výsledek neviděl —
 *      proto vizuál DRŽÍ NAHOŘE.
 *    • Panel ceny začínal taky až na 2 550 px, takže při klikání nebylo
 *      vidět, co to stojí — proto lepivá lišta u spodní hrany.
 * ========================================================================== */
@media (max-width: 900px) {
    /* Flex místo mřížky a `display: contents` na obalu vizuálu: teprve tím se
       `.kp-viz` stane přímým potomkem `.kp-cfg__grid` a jeho lepivé chování
       platí přes CELOU sekci, ne jen přes vlastní řádek mřížky. */
    /* `align-items: stretch` musí být výslovně: základní mřížka má
       `align-items: start`, a ve sloupcovém flexu je to PŘÍČNÁ osa, tedy
       vodorovná — položky by se stáhly na šířku obsahu a lepivý vizuál by
       vyšel o třetinu užší než zbytek. */
    .kp-cfg__grid { display: flex; flex-direction: column; align-items: stretch; }
    /* `display: contents` UŽ NE na středním sloupci. Vizuál se v něm lepí,
       a lepivý prvek drží jen po konec svého rodiče — dokud byl rodičem celý
       rastr, zůstal kurník připnutý až do konce sekce, tedy i pod cenou
       a benefity. Takhle se odepne přesně na konci karty rozmísťování,
       což je poslední místo, kde je k něčemu. */
    .kp-panel-col { display: contents; }
    .kp-cfg__main { display: flex; flex-direction: column; gap: var(--cfg-gap); min-width: 0; }

    /* Selektor drží specificitu `.kp-cfg--scene .kp-viz` z desktopu, jinak by
       se sem protáhl jeho záporný okraj a vizuál by přetekl přes okraj. */
    .kp-cfg .kp-viz {
        position: sticky;
        /* Sedí pod hlavičkou; když se ta při rolování dolů uklidí
           (`kp-head-off`, viz kp-site.js), posune se nahoru za ní a uvolní
           tím skoro sedmdesát pixelů výšky obrazovky. */
        top: 64px;
        transition: top var(--t-med, 0.28s) ease;
        z-index: 3;
        padding: 0;
        margin-inline: 0;
        overflow: hidden;
        border-radius: var(--cfg-radius);
        /* PLNÉ pozadí, ne průhledné. Připnutý vizuál stojí nad rolujícím se
           obsahem a spodní dozvuk fotky je průhledný — pod ním se proto
           dlouho protahoval text ovládání („A Velikost kurníku" prosvítající
           skrz trávu). Neprůhledná plocha to ukončí a dozvuk fotky teď
           přechází do NÍ, ne do stránky. */
        background: var(--cfg-white);
        box-shadow: 0 10px 24px -14px rgba(40, 32, 18, 0.45);

        /* Mřížka o dvou řádcích: záložky stěn nahoře, obrázek pod nimi.
           Bez ní by fotka (`inset: 0`) sahala i pod záložky a prosvítala
           jim za zády — a odsadit ji pevným počtem pixelů by se rozešlo,
           jakmile se popisky stěn zalomí na dva řádky. */
        display: grid;
        grid-template-rows: 1fr auto;
    }

    /* Fotka i kresba sdílejí PRVNÍ řádek, tedy leží přesně na sobě;
       záložky stěn jsou pod obrázkem, ne nad ním. */
    .kp-cfg .kp-viz > .kp-viz__scene,
    .kp-cfg .kp-viz > .kp-viz__art { grid-row: 1; grid-column: 1; }
    .kp-cfg .kp-viz > .kp-viz__walls { grid-row: 2; grid-column: 1; }
    /* `display: contents` udělalo flex položky ze VŠECH potomků obalu vizuálu,
       včetně seznamu „co kde je". Bez vlastního pořadí by mu vyšla nula
       a předběhl by obrázek — pravidlo z v35 zní, že stojí pod ním. */
    /* Pořadí na telefonu: vyber velikost, výbavu a doplňky → TEPRVE PAK
       obrázek → rozmísti prvky. Vizuál stojí přesně mezi „Doplňky" a
       „Rozmístění prvků", protože rozmísťovat naslepo nejde; nad ním
       nemá co dělat, tam se ještě jen vybírá z tabulky. */
    .kp-panel { order: 1; }
    .kp-cfg__main { order: 2; }
    .kp-cfg__bar { order: 3; }
    .kp-price { order: 4; }
    .kp-perks { order: 5; }
    /* Pás náhledů na telefonu MIZÍ. Stěnu přepínají záložky připnuté
       u obrázku, takže by to byl třetí ovladač téhož — a čtyři obrázky
       kurníku pod sebou v šířce telefonu nic navíc neukážou. */
    .kp-views { display: none; }
    /* Lišta HNED PŘED panelem ceny. Pořadí je zásadní, ne kosmetika: s nulou
       ji flex odstěhoval na začátek, takže její místo v toku bylo NAD
       obrazovkou — a lepivá spodní hrana pak nemá co držet. */
    .kp-price { margin-top: 0; margin-inline-start: 0; }
    .kp-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .kp-perk:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
    .kp-cfg__title { font-size: 30px; }

    /* Sekční zahrada se vypíná a nahradí ji kopie UVNITŘ vizuálu — ta s ním
       putuje, když drží nahoře. Sekční vrstva je pozicovaná vůči sekci, takže
       by kurníku „ujela" a ten by pak visel nad ovládáním bez pozadí. */
    .kp-cfg__scene { display: none; }
    .kp-cfg--scene .kp-viz { border-radius: var(--cfg-radius); }
}

.kp-viz__scene { display: none; }

@media (max-width: 900px) {
    .kp-cfg--scene .kp-viz__scene {
        display: block;
        position: relative;
        inset: auto;
        z-index: 0;
        min-height: 0;
        pointer-events: none;
        /* Dozvuk jen dole a měkce. Dřív tu byl svislý přechod přes celou
           sekční vrstvu a na telefonu z něj byla ostrá vodorovná hrana přes
           celou šířku — uvnitř zaobleného vizuálu je přechod krátký a čte se
           jako hloubka ostrosti, ne jako řez. */
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, rgba(0, 0, 0, 0.6) 93%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, #000 82%, rgba(0, 0, 0, 0.6) 93%, transparent 100%);
    }

    .kp-cfg--scene .kp-viz__scene img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Stejná úvaha jako na desktopu: posekaný trávník musí vyjít na
           úroveň nohou kurníku, jinak se „vznáší". Výřez je na telefonu
           užší, takže se svisle ořezává víc a hodnota je jiná. */
        object-position: 50% 62%;
    }

    .kp-viz__art { position: relative; z-index: 1; }
}

/* ==========================================================================
 *  Lepivá lišta s cenou (telefon)
 * ========================================================================== */
.kp-cfg__bar { display: none; }

@media (max-width: 900px) {
    .kp-cfg__bar {
        display: flex;
        position: sticky;
        bottom: 0;
        z-index: 6;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 12px;
        padding: 10px 12px;
        border-radius: var(--cfg-radius);
        border: 1px solid var(--cfg-line);
        background: color-mix(in srgb, var(--cfg-white) 92%, transparent);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 -6px 22px rgba(40, 32, 18, 0.14);

        /* `max-height`, ne `height`. Z automatické výšky se `height` animovat
           nedá — přechod se přeskočil, lišta chvíli stála a pak zmizela ranou.
           Strop stačí větší než skutečná výška (~64 px); prohlížeč pak
           interpoluje plynule. */
        max-height: 120px;
        overflow: hidden;
        transition:
            opacity 0.34s cubic-bezier(0.32, 0, 0.24, 1),
            transform 0.38s cubic-bezier(0.32, 0, 0.24, 1),
            filter 0.34s cubic-bezier(0.32, 0, 0.24, 1),
            max-height 0.34s cubic-bezier(0.32, 0, 0.24, 1) 0.08s,
            margin-top 0.34s cubic-bezier(0.32, 0, 0.24, 1) 0.08s,
            padding-block 0.34s cubic-bezier(0.32, 0, 0.24, 1) 0.08s,
            border-width 0.34s cubic-bezier(0.32, 0, 0.24, 1) 0.08s;
    }

    /* Skutečné číslo je na obrazovce — lišta by ho jen opakovala. Odplíží se
       dolů a smrskne, aby po ní nezbyla ani mezera. Bez skriptu zůstane
       viditelná a pořadí v toku ji stejně položí těsně nad panel, takže se
       nic nerozbije, jen se cena chvíli ukáže dvakrát. */
    /* Předání panelu ceny. Lišta se neztratí střihem — nejdřív se ROZPLYNE
       na místě (klesne, zmenší se a rozostří), a teprve pak se za ní zavře
       místo. Zpoždění 0,08 s u zavírání dělá právě tohle pořadí: oko vidí
       rozplynutí, ne skok. Zpátky se vrací touž cestou, takže rolování
       nahoru a dolů je souměrné. */
    .kp-cfg__bar.is-docked {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
        filter: blur(7px);
        pointer-events: none;
        max-height: 0;
        margin-top: 0;
        padding-block: 0;
        border-width: 0;
    }


    /* `min-width: 0` a `nowrap`: bez nich flex sloupec s cenou stlačil
       „23 900 Kč" na tři řádky po jednom slově a tlačítko z lišty vyteklo. */
    .kp-cfg__bar-price { display: grid; flex: 0 0 auto; min-width: 0; line-height: 1.15; white-space: nowrap; }
    .kp-cfg__bar-label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cfg-ink-2); }
    .kp-cfg__bar-price strong { font-family: var(--kp-font-display); font-size: 19px; color: var(--cfg-ink); }
    .kp-cfg__bar-cta {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        padding-inline: 14px;
        white-space: nowrap;
    }
}

/* Lišta je pomůcka navíc, ne jediná cesta — bez rozostření i bez lepivého
   pozicování (starší WebKit) pořád stojí nad panelem ceny a funguje. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .kp-cfg__bar { background: var(--cfg-white); }
}

@media (max-width: 700px) {
    /* `padding-inline: 14px` tu bývalo — o 10 px míň než sekce, takže se levá
       hrana konfigurátoru na telefonu nekryla se zbytkem stránky. Boční okraj
       má na všech šířkách jediný zdroj: `--kp-gutter`. */
    .kp-cfg__head { flex-direction: column; }
    .kp-cfg__tools { width: 100%; }
    .kp-tool { flex: 1; justify-content: center; }
    .kp-cfg__title { font-size: 26px; }
    .kp-cfg__lead { padding-inline-start: 0; }

    /* Doplňky do jednoho sloupce — dvě karty vedle sebe by měly na název
       čtyřicet pixelů. */
    .kp-adds { grid-template-columns: minmax(0, 1fr); }

    /* Popisek prvku nad pilulkami, ať mají celou šířku. */
    .kp-matrix__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }

    .kp-viz { padding: 12px 16px; }
    .kp-spot__tag { display: none; }
    .kp-legend { display: flex; }
    .kp-perks { grid-template-columns: minmax(0, 1fr); }
    .kp-perk + .kp-perk { border-inline-start: 0; padding-inline-start: 0; }
}

/* ---- klidnější režim ---------------------------------------------------- */

/* Nájezdy se ruší celé včetně počátečního `opacity: 0` — jinak by v klidném
   režimu zůstala kresba neviditelná, protože animace, která ji měla
   rozsvítit, neběží. */
@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) .kp-opt,
    :root:not([data-motion="full"]) .kp-slot,
    :root:not([data-motion="full"]) .kp-switch,
    :root:not([data-motion="full"]) .kp-switch__knob,
    :root:not([data-motion="full"]) .kp-spot__dot { transition: none; }
    :root:not([data-motion="full"]) .kp-opt:hover,
    :root:not([data-motion="full"]) .kp-spot:hover .kp-spot__dot { transform: none; }
    :root:not([data-motion="full"]) .kp-price__sum,
    :root:not([data-motion="full"]) .kp-lightbox,
    /* Reset transformace jen tam, kde ji animace opravdu používá. Díly
       kurníku mají v `transform` svou POLOHU a bubliny své ukotvení na
       puntík — vynulovat ji jim znamená rozházet obrázek. */
    :root:not([data-motion="full"]) .kp-viz__art {
        animation: none;
        opacity: 1;
        transform: none;
    }

    :root:not([data-motion="full"]) .kp-spot,
    :root:not([data-motion="full"]) .kp-coop__part,
    :root:not([data-motion="full"]) .kp-coop__gutter {
        animation: none;
        opacity: 1;
    }
    
}

:root[data-motion="reduced"] .kp-opt,
:root[data-motion="reduced"] .kp-slot,
:root[data-motion="reduced"] .kp-switch,
:root[data-motion="reduced"] .kp-switch__knob,
:root[data-motion="reduced"] .kp-spot__dot { transition: none; }
:root[data-motion="reduced"] .kp-opt:hover,
:root[data-motion="reduced"] .kp-spot:hover .kp-spot__dot { transform: none; }
:root[data-motion="reduced"] .kp-price__sum,
:root[data-motion="reduced"] .kp-lightbox,
:root[data-motion="reduced"] .kp-coop__part,
:root[data-motion="reduced"] .kp-coop__gutter {
    animation: none;
    opacity: 1;
}

:root[data-motion="reduced"] .kp-viz__art {
    animation: none;
    opacity: 1;
    transform: none;
}
:root[data-motion="reduced"] .kp-spot { animation: none; opacity: 1; }
:root[data-motion="reduced"] .kp-strip { scroll-behavior: auto; }
:root[data-motion="reduced"] .kp-tool.is-touring .kp-tool__badge,
:root[data-motion="reduced"] .kp-strip__item { animation: none; transition: none; }
:root[data-motion="reduced"] .kp-strip__item:hover { transform: none; }

/* ---- plošší vzhled ------------------------------------------------------ */

:root[data-effects="minimal"] .kp-price,
:root[data-effects="minimal"] .kp-spot__tag,
:root[data-effects="minimal"] .kp-spot__dot,
:root[data-effects="minimal"] .kp-lightbox,


/* ==========================================================================
 *  Přepínač stěn připnutý k vizuálu (telefon)
 *  ---------------------------------------------------------------------
 *  Tytéž stěny se přepínají i v sekci D. Ta ale odroluje pryč, a uživatel by
 *  pak měnil polohu prvku na stěně, kterou nevidí — tenhle řádek drží nahoře
 *  spolu s obrázkem. Ovladač v sekci D se proto na telefonu skrývá; pás
 *  náhledů dole zůstává, ten je prohlídka, ne nastavení.
 * ========================================================================== */
.kp-viz__walls { display: none; }

@media (max-width: 900px) {
    .kp-viz__walls {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        margin: 0 4px;
        padding: 4px;
        border-radius: 999px;
        background: var(--cfg-panel-2);
        border: 1px solid var(--cfg-line);
    }

    .kp-viz__wall {
        min-height: 36px;
        padding: 6px 4px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        color: var(--cfg-ink-2);
        cursor: pointer;
        transition: background var(--t-fast, 0.16s) ease, color var(--t-fast, 0.16s) ease;
    }

    .kp-viz__wall.is-active {
        background: var(--cfg-green);
        color: #FFFFFF;
        box-shadow: 0 2px 8px rgba(30, 70, 26, 0.28);
    }

    .kp-viz__wall:focus-visible { outline: 3px solid var(--cfg-green-2); outline-offset: 2px; }
}

:root[data-motion="reduced"] .kp-viz__wall,
:root[data-motion="reduced"] .kp-cfg__bar { transition: none; }


/* Připnutý vizuál jde nahoru spolu s uklizenou hlavičkou. */
@media (max-width: 900px) {
    :root.kp-head-off .kp-cfg .kp-viz { top: 0; }
}

:root[data-motion="reduced"] .kp-cfg .kp-viz { transition: none; }


/* ==========================================================================
 *  Rozsvícení řádku po kliknutí na bod u prvku
 *  ---------------------------------------------------------------------
 *  ZÁBLESK, který přes řádek přejede — stejný rukopis jako `kpa-shimmer`
 *  u členských rámečků v `kp-app3.css`, jen jednorázově. Rotující obrys
 *  z předchozí verze byl nápadný, ale nepůsobil prémiově: oko sledovalo
 *  objíždějící tečku místo řádku.
 *
 *  Animuje se JEN `transform` a `opacity`. Obojí umí prohlížeč složit na
 *  grafické kartě, takže záblesk běží plynule i na telefonu a nevyvolá
 *  jediný přepočet rozvržení; předchozí `rotate` nad maskovaným kuželovým
 *  přechodem se překresloval každý snímek.
 * ========================================================================== */
.kp-matrix__row { position: relative; }

/* Podklad se jemně zvedne a zase klidně opadne — cíl zůstane poznat i po
   dojezdu záblesku, ale nic nebliká. */
.kp-matrix__row.is-flash {
    animation: kp-flash-bed 1.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

@keyframes kp-flash-bed {
    0%   { background-color: color-mix(in oklab, var(--cfg-green-2) 18%, transparent); }
    55%  { background-color: color-mix(in oklab, var(--cfg-green-2) 13%, transparent); }
    100% { background-color: transparent; }
}

/* Ořez `clip-path`em, ne `overflow` na pseudoprvku: `overflow` ořezává jen
   POTOMKY, a `::after` je sourozenec `::before`, ne jeho dítě — tudy záblesk
   vytékal ven ze zaoblení. `clip-path` na řádku ořízne i pseudoprvky a do
   rozvržení nesahá. */
.kp-matrix__row.is-flash {
    clip-path: inset(0 round 10px);
}

.kp-matrix__row.is-flash::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 46%;
    z-index: 3;
    pointer-events: none;
    /* Širší a sytější pruh — předchozí byl tak jemný, že na světlém řádku
       nebyl vidět ani na zpomaleném záznamu. Zelená po krajích dává
       záblesku barvu značky, bílé jádro lesk. */
    background: linear-gradient(105deg,
        transparent 20%,
        color-mix(in oklab, var(--cfg-green-2) 34%, transparent) 38%,
        rgba(255, 255, 255, 0.92) 50%,
        color-mix(in oklab, var(--cfg-green-2) 30%, transparent) 62%,
        transparent 80%);
    animation: kp-flash-sweep 0.95s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}

@keyframes kp-flash-sweep {
    0%   { transform: translateX(-105%); opacity: 0; }
    10%  { opacity: 1; }
    78%  { opacity: 1; }
    100% { transform: translateX(325%); opacity: 0; }
}

/* Bez pohybu žádný záblesk — jen krátké podbarvení, ať je cíl vidět. */
:root[data-motion="reduced"] .kp-matrix__row.is-flash::after { animation: none; content: none; }

:root[data-motion="reduced"] .kp-matrix__row.is-flash {
    animation: none;
    clip-path: none;
    background-color: color-mix(in oklab, var(--cfg-green-2) 14%, transparent);
}

/* Bod u prvku je teď tlačítko — zbavit ho výchozího vzhledu. */
button.kp-spot { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-align: inherit; }


/* ==========================================================================
 *  Nízké okno (notebook)
 *  ---------------------------------------------------------------------
 *  Na 1440 × 800 měřil vizuál 460 px, pás stěn 169 a rozmísťování 293 —
 *  dohromady 951 px do osmisetpixelového okna. Zákazník tedy buď viděl
 *  kurník, nebo nastavení, nikdy obojí. Kurník se proto na nízkém okně
 *  scvrkne a pás stěn zhubne, takže se rozmísťování dostane nad hranu.
 *
 *  Strop je na ŠÍŘCE kresby, ne na výšce: bubliny se kotví v procentech
 *  vůči `.kp-viz__art`, a kdyby se SVG zúžilo uvnitř širší krabice, ukázaly
 *  by vedle. Poměr 400:260 se postará o výšku sám.
 * ========================================================================== */
@media (min-width: 901px) and (max-height: 900px) {
    .kp-cfg--scene .kp-viz { max-width: min(100%, 95vh); }

    .kp-views { padding: 10px; gap: 7px; }
    .kp-views__title { font-size: 12px; }
    .kp-thumb { padding: 4px 4px 5px; gap: 3px; }
    .kp-thumb__label { font-size: 11px; }
    /* Náhledy se zužují, ne oříznou — poměr 400:260 si výšku dopočítá sám
       a stěna zůstane poznat i na sto pixelech. */
    .kp-thumb__art { max-width: 104px; margin-inline: auto; }
}

@media (min-width: 901px) and (max-height: 760px) {
    .kp-cfg--scene .kp-viz { max-width: min(100%, 86vh); }
    .kp-thumb__art { max-width: 88px; }
    .kp-views__title { display: none; }
}


/* Bez pohybu se lišta jen skryje — žádné rozplývání ani posun. */
:root[data-motion="reduced"] .kp-cfg__bar { transition: none; }
:root[data-motion="reduced"] .kp-cfg__bar.is-docked { filter: none; transform: none; }

/* ─── D) odstín lazury ───────────────────────────────────────────────────────
   Vzorky barev. Vlastní jména tříd, ne `.kp-opt*`: ta mřížka má napevno tři
   sloupce (`repeat(3, …)`) a osm vzorků by se v ní zalomilo do roztřepené
   řady — vzorky se navíc měří jinak, protože nesou barvu, ne ikonu a dvě věty.

   Plocha, lem i písmo jdou z `--cfg-*` tokenů, takže tmavý motiv řeší už
   existující blok `[data-theme="dark"] .kp-cfg` a tahle sekce nepotřebuje
   vlastní. Jediná pevná barva je barva LAZURY — ta je obsah, ne vzhled, a
   přichází inline z `CoopStain.Hex` jako `--stain`. */
.kp-stains {
    display: grid;
    /* Auto-fill, ne pevný počet: paleta se mění podle toho, co majitel
       nabízí, a napevno napsaných „osm" by se s ní rozešlo. */
    /* 76 px, ne 84: vzorkovnice má dvanáct odstínů a na užším sloupci
       konfigurátoru by z nich při 84 px vznikly tři neúplné řádky. */
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
    padding-top: 11px;
}

.kp-stain {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 9px 6px 7px;
    border-radius: var(--cfg-radius-sm);
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--cfg-card) 0%, var(--cfg-card-2) 100%);
    font: inherit;
    color: var(--cfg-ink);
    cursor: pointer;
    text-align: center;
    box-shadow: 0 1px 2px rgba(70, 52, 25, 0.04), 0 6px 18px rgba(70, 52, 25, 0.06);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.kp-stain:hover { border-color: var(--cfg-line); }

.kp-stain.is-active {
    border-color: var(--cfg-green);
    background: var(--cfg-card-on);
    box-shadow: 0 0 0 1px var(--cfg-green), 0 4px 12px rgba(48, 90, 29, 0.12);
}

/* Kolečko se vzorkem. Vnitřní stín dává barvě hloubku, aby nevypadala jako
   nálepka; vlasový lem odděluje světlé odstíny (bílá) od světlé karty. */
.kp-stain__dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--stain, var(--cfg-ink-3));
    border: 1px solid var(--cfg-line);
    box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.22), inset 0 2px 3px rgba(255, 255, 255, 0.28);
}

.kp-stain.is-active .kp-stain__dot { box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.22), inset 0 2px 3px rgba(255, 255, 255, 0.28), 0 0 0 2px var(--cfg-card-on), 0 0 0 3px var(--cfg-green); }

.kp-stain__name { font-size: 11.5px; font-weight: 600; line-height: 1.15; }

/* Číslo odstínu. Tabulkové číslice, aby sloupec čísel neposkakoval,
   a `--cfg-ink-3`, protože se čte až po jméně — vede oko jméno, ne kód. */
.kp-stain__code {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--cfg-ink-3);
}

/* Bez pohybu se přepnutí odstínu nepřelévá. */
:root[data-motion="reduced"] .kp-stain { transition: none; }