/* Klimaček katalog – frontend
 *
 * Hodnoty odpovídají designu ve Figmě (plátno 1920 px, obsah 1280 px, písmo Figtree děděné z webu).
 * Pod 1920 px se plynule zmenšují: clamp(minimum, podíl šířky okna, hodnota z Figmy).
 * Písmo se nikde nenastavuje – vše dědí font-family z Oxygenu.
 */

:root {
	--kk-bg: #f5f5f7;
	--kk-surface: #ffffff;
	--kk-border: #d9d9d9;
	--kk-text: #000000;
	--kk-muted: #6b6b73;
	--kk-dark: #000000;
	--kk-accent: #f0284a;      /* Klimaček růžová */
	--kk-focus: #2196f3;       /* modrý rámeček obrázku, focus */
	--kk-img-bg: linear-gradient(135deg, #d9dadf 0%, #8f9198 100%);
	--kk-radius: 8px;          /* dlaždice, filtry */
	--kk-radius-img: 10px;     /* obrázky */
	--kk-shadow: 0 10px 30px rgba(0, 0, 0, .12);

	/* Typografie (Figma 1920 px) */
	--kk-fs-h1: clamp(30px, 3.333vw, 64px);       /* 64 / 70 bold */
	--kk-fs-perex: clamp(18px, 1.667vw, 32px);    /* 32 / 36 bold */
	--kk-fs-h3: clamp(20px, 1.25vw, 24px);        /* 24 / 22 extrabold */
	--kk-fs-body: clamp(16px, .9375vw, 18px);     /* 18 / 22 medium */
	--kk-fs-param: clamp(14px, .833vw, 16px);     /* 16 / 22 medium */
	--kk-fs-box: clamp(15px, .9375vw, 18px);      /* 18 bold – dlaždice, filtry, název karty */

	/* Rozměry */
	--kk-box-h: clamp(56px, 5vw, 96px);           /* dlaždice a filtry */
	--kk-btn-h: clamp(44px, 2.917vw, 56px);       /* tlačítka, pilulky, šipky */
	--kk-gap: clamp(12px, 1.693vw, 32.5px);       /* mezera v mřížce (3 × 405 px + 2 mezery = 1280) */
	--kk-cmp-col: clamp(290px, 22.81vw, 438px);   /* sloupec srovnávače vč. mezery (405 + 33) */
	--kk-cmp-pad: clamp(10px, .86vw, 16.5px);     /* polovina mezery mezi sloupci srovnávače */
	--kk-cmp-max: 1280px;
}

.kk-hub, .kk-katalog, .kk-gallery, .kk-variants, .kk-pole, .kk-params, .kk-related, .kk-detail-popis,
.kk-compare-buttons, .kk-modal, .kk-lightbox, .kk-page-title, .kk-page-perex, .kk-vlastnosti { box-sizing: border-box; }
.kk-hub *, .kk-katalog *, .kk-gallery *, .kk-variants *, .kk-related *, .kk-detail-popis *,
.kk-compare-buttons *, .kk-modal *, .kk-lightbox *, .kk-params * { box-sizing: border-box; }

.kk-hub [hidden], .kk-katalog [hidden], .kk-gallery [hidden], .kk-params [hidden],
.kk-modal[hidden], .kk-modal [hidden], .kk-lightbox[hidden], .kk-lightbox [hidden] { display: none !important; }

html.kk-noscroll, html.kk-noscroll body { overflow: hidden; }

/* ---------------- Tlačítka (16 / 100 % DemiBold) ---------------- */
.kk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: var(--kk-btn-h); margin: 0; padding: 0 20px; border: 1px solid transparent; border-radius: 999px;
	font: inherit; font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer;
	text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.kk-btn--dark { background: var(--kk-dark); color: #fff; }
.kk-btn--dark:hover:not(:disabled) { background: #333; }
.kk-btn--light { background: var(--kk-surface); color: var(--kk-text); border-color: var(--kk-surface); }
.kk-btn--light:hover { border-color: var(--kk-text); }
.kk-btn--link { min-height: 0; padding: 0 6px; background: none; color: var(--kk-muted); font-weight: 500; text-decoration: underline; }
/* Neaktivní tlačítko: plná barva, nic neprosvítá */
.kk-btn:disabled, .kk-btn--dark:disabled, .kk-btn--dark:disabled:hover { opacity: 1; background: #c4c4c9; border-color: #c4c4c9; color: #fff; cursor: not-allowed; }
.kk-btn:focus-visible, .kk-box:focus-visible, .kk-arrow:focus-visible, .kk-pill:focus-visible,
.kk-cmp__remove:focus-visible, .kk-dropdown__link:focus-visible { outline: 2px solid var(--kk-focus); outline-offset: 2px; }

/* Porovnat / Ve srovnání */
[data-kk-compare-toggle] .kk-compare-toggle__added { display: none; }
[data-kk-compare-toggle].is-active .kk-compare-toggle__add { display: none; }
[data-kk-compare-toggle].is-active .kk-compare-toggle__added { display: inline; }
[data-kk-compare-toggle].is-active { background: var(--kk-dark); color: #fff; border-color: var(--kk-dark); }

.kk-compare-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Pilulky: varianty (16 DemiBold), nadpisy skupin a doporučených */
.kk-pill {
	display: inline-flex; align-items: center; justify-content: center; min-height: var(--kk-btn-h); margin: 0; padding: 0 18px;
	border: 1px solid var(--kk-surface); border-radius: 999px; background: var(--kk-surface);
	color: var(--kk-text); font: inherit; font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap;
}
.kk-pill:hover { border-color: var(--kk-text); }
.kk-pill.is-active { background: var(--kk-dark); border-color: var(--kk-dark); color: #fff; }
.kk-pill--static, .kk-pill--static:hover { cursor: default; }
.kk-pill--dark { background: var(--kk-dark); border-color: var(--kk-dark); color: #fff; padding: 0 20px; }

/* Šipky (kruh 56 px, ikona 20 × 16) */
.kk-arrows { display: flex; gap: 16px; }
.kk-arrow {
	width: var(--kk-btn-h); height: var(--kk-btn-h); padding: 0; border-radius: 50%; border: 1px solid var(--kk-surface);
	background: var(--kk-surface); color: var(--kk-text); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.kk-arrow svg { display: block; }
.kk-arrow:hover:not(:disabled) { border-color: var(--kk-text); }
.kk-arrow:disabled { opacity: .35; cursor: default; }

/* Šipka dropdownu (rozcestník 16 × 9, filtr 12 × 9) */
.kk-caret { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 9px solid currentColor; transition: transform .15s; flex: none; }
.kk-filter .kk-caret { border-left-width: 6px; border-right-width: 6px; }
.kk-caret--right { transform: rotate(-90deg); }
.kk-dropdown.is-open .kk-caret { transform: rotate(180deg); }

/* ---------------- Box: dlaždice rozcestníku a filtry (18 Bold, rámeček 2 px) ---------------- */
.kk-box {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
	min-height: var(--kk-box-h); margin: 0; padding: 0 clamp(18px, 2.66vw, 51px) 0 clamp(18px, 2.3vw, 44px);
	border: 2px solid var(--kk-border); border-radius: var(--kk-radius);
	background: var(--kk-bg); color: var(--kk-text); font: inherit; font-size: var(--kk-fs-box); font-weight: 700; line-height: 1.2;
	text-align: left; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s;
}
/* Hover (Figma): černý rámeček, pozadí zůstává. Stejně vypadá otevřený a vybraný filtr. */
.kk-box:hover, .kk-box:focus-visible,
.kk-dropdown.is-open > .kk-box, .kk-dropdown.has-value > .kk-box { border-color: var(--kk-text); background: var(--kk-bg); }

.kk-dropdown { position: relative; min-width: 0; }
.kk-dropdown.is-open { z-index: 60; }
.kk-dropdown__panel {
	position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0; min-width: 220px;
	padding: 8px; border: 1px solid var(--kk-border); border-radius: var(--kk-radius);
	background: var(--kk-surface); box-shadow: var(--kk-shadow); max-height: 360px; overflow-y: auto;
}
.kk-dropdown__link { display: block; padding: 13px 14px; border-radius: 6px; color: var(--kk-text); text-decoration: none; font-size: var(--kk-fs-param); font-weight: 500; line-height: 1.3; }
.kk-dropdown__link:hover { background: var(--kk-bg); }
.kk-dropdown__link--all { font-weight: 700; }

.kk-check { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px; border-radius: 6px; font-size: var(--kk-fs-param); font-weight: 500; line-height: 1.3; cursor: pointer; }
.kk-check:hover { background: var(--kk-bg); }
.kk-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--kk-dark); flex: none; }
.kk-check--l1 { font-weight: 600; }
.kk-check--l2 { padding-left: 40px; }

/* ---------------- Odkaz zpět (nad nadpisem kategorie a detailu) ---------------- */
/* Neubírá místo: výška 0, odkaz absolutně nad nadpisem (v horním odsazení sekce) */
.kk-back { position: relative; height: 0; margin: 0; padding: 0; }
.kk-back a { position: absolute; left: 0; bottom: clamp(12px, 1.67vw, 32px); z-index: 1; display: inline-flex !important; align-items: center; color: var(--kk-text); font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.kk-back a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.kk-back a:focus-visible { outline: 2px solid var(--kk-focus); outline-offset: 4px; border-radius: 4px; }
.kk-back a svg { display: block; flex: none; width: 20px !important; height: 16px !important; margin: 0 10px 0 0 !important; transition: transform .15s; }
.kk-back a:hover svg { transform: translateX(-3px); }

/* ---------------- Rozcestník: 3 × 417 px, mezery 14 / 48 ---------------- */
.kk-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.5vw, 48px) clamp(8px, .73vw, 14px); width: 100%; }

/* ---------------- Kategorie ---------------- */
.kk-page-title { margin: 0 0 clamp(12px, 1.25vw, 24px); text-align: center; font-size: var(--kk-fs-h1); font-weight: 700; line-height: 1.094; }
.kk-page-perex { max-width: 13.5em; margin: 0 auto clamp(24px, 2.5vw, 48px); text-align: center; font-size: var(--kk-fs-perex); font-weight: 700; line-height: 1.125; }
.kk-page-perex p { margin: 0; }

.kk-katalog { width: 100%; }
/* Vždy 4 sloupce – i při 2 filtrech má každý jen čtvrtinu šířky */
.kk-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, .833vw, 16px); margin: 0 0 clamp(14px, 1.3vw, 25px); }
.kk-filters .kk-box { padding: 0 clamp(16px, 1.93vw, 37px) 0 clamp(16px, 1.67vw, 32px); }
.kk-filter__count { font-weight: 500; }
.kk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 clamp(14px, 1.2vw, 23px); }
.kk-empty { padding: 40px 0; text-align: center; color: var(--kk-muted); font-size: var(--kk-fs-body); font-weight: 500; }

/* Skupiny podle podkategorií – střídavé pozadí přes celou šířku okna */
.kk-group { position: relative; padding: clamp(32px, 2.5vw, 48px) 0 clamp(48px, 4.4vw, 84px); }
.kk-group:first-child { padding-top: 0; }
.kk-group.is-alt { background: var(--kk-surface); box-shadow: 0 0 0 100vmax var(--kk-surface); clip-path: inset(0 -100vmax); }
.kk-group:first-child.is-alt { padding-top: clamp(32px, 2.5vw, 48px); }
.kk-group__title { margin: 0 0 clamp(24px, 2.55vw, 49px); text-align: center; font-size: inherit; line-height: 1; }
/* První skupina navazuje přímo na filtry – podle designu bez viditelného nadpisu (zůstává pro čtečky) */
.kk-group:first-child:not(.is-alt) .kk-group__title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Mřížka karet: 3 × 405 px, mezera 32,5 px, řádky 48 px */
.kk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 2.5vw, 48px) var(--kk-gap); }

.kk-card { display: flex; flex-direction: column; gap: clamp(12px, 1.3vw, 25px); min-width: 0; }
.kk-card__img { display: block; aspect-ratio: 405 / 356; border-radius: var(--kk-radius-img); overflow: hidden; background: var(--kk-img-bg); }
.kk-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.kk-card:hover .kk-card__img img { transform: scale(1.03); }
.kk-card__bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.kk-card__title { margin: 0; font-size: var(--kk-fs-box); font-weight: 700; line-height: 1.222; min-width: 0; }
.kk-card__title a { color: inherit; text-decoration: none; }
.kk-card__title a:hover { text-decoration: underline; }
/* „Porovnat“ v kartě: 14 / 100 % Medium, výška 30 */
.kk-card__compare.kk-btn { min-height: 30px; padding: 0 12px; font-size: 14px; font-weight: 500; flex: none; }

/* ---------------- Detail produktu ---------------- */
.kk-pole { margin: 0; }
.kk-pole--podnadpis { margin: 0 0 clamp(24px, 2.5vw, 48px); }
.kk-pole--podnadpis .kk-text { max-width: 13.5em; margin: 0 auto; text-align: center; font-size: var(--kk-fs-perex); font-weight: 700; line-height: 1.125; }
.kk-pole--podnadpis .kk-text p { margin: 0; }

.kk-variants { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 clamp(24px, 2.5vw, 48px); }

.kk-gallery { width: 100%; margin: 0 0 clamp(36px, 3.75vw, 72px); }
.kk-gallery__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 clamp(12px, 1.3vw, 25px); }
.kk-gallery__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - clamp(12px, 1.77vw, 34px)) / 2); gap: clamp(12px, 1.77vw, 34px);
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
	-webkit-overflow-scrolling: touch; padding: 4px; margin: -4px; scroll-padding: 0 4px;
}
.kk-gallery__track::-webkit-scrollbar { display: none; }
.kk-gallery__track--single { grid-auto-columns: min(100%, 623px); justify-content: center; }
.kk-gallery__item {
	position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--kk-radius-img); overflow: hidden;
	background: var(--kk-img-bg); scroll-snap-align: start; box-shadow: 0 0 0 4px transparent; transition: box-shadow .15s;
}
.kk-gallery__item:hover, .kk-gallery__item:focus-visible { box-shadow: 0 0 0 4px var(--kk-focus); outline: none; }
.kk-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kk-gallery__zoom { position: absolute; right: clamp(14px, 1.25vw, 24px); bottom: clamp(14px, 1.25vw, 24px); color: #fff; opacity: .9; display: flex; }
.kk-gallery__zoom svg { width: clamp(18px, 1.25vw, 24px); height: auto; }

/* Nadpis sekce: 24 / 22 ExtraBold */
.kk-section-title { margin: 0 0 clamp(16px, 1.25vw, 24px); font-size: var(--kk-fs-h3); font-weight: 800; line-height: .917; }
.kk-subtitle { margin: 20px 0 14px; font-size: 16px; font-weight: 700; line-height: 1.25; }

/* Text: 18 / 22 Medium */
.kk-text { font-size: var(--kk-fs-body); font-weight: 500; line-height: 1.222; }
.kk-text p { margin: 0 0 clamp(16px, 1.15vw, 22px); }
.kk-text ol, .kk-text ul { margin: 0 0 clamp(16px, 1.15vw, 22px); padding-left: 24px; }
.kk-text li { margin: 0 0 clamp(16px, 1.15vw, 22px); padding-left: 0; }
.kk-text ol li::marker { font-weight: 700; }
.kk-text img { max-width: 100%; height: auto; }

/* Tabulka „Popis“: 16 / 22 Medium, řádek 64 px */
.kk-params { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--kk-fs-param); font-weight: 500; line-height: 1.375; }
.kk-params th, .kk-params td { padding: clamp(14px, 1.07vw, 20.5px) 0; border: 0; border-bottom: 1px solid var(--kk-border); background: none; text-align: left; vertical-align: top; font-weight: 500; }
.kk-params tr:first-child th, .kk-params tr:first-child td { border-top: 1px solid var(--kk-border); }
.kk-params th { width: 40%; padding-right: 16px; }

.kk-vlastnosti { margin: 0; padding: 0; list-style: none; font-size: 16px; font-weight: 500; line-height: 1.375; }
.kk-vlastnosti li { margin: 0 0 8px; }
.kk-vlastnosti li::before { content: "+ "; }

/* „Detailní popis ↓“ – rozbalovací */
.kk-detail-popis { margin: 0 0 clamp(28px, 2.5vw, 48px); }
.kk-detail-popis summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: var(--kk-fs-body); font-weight: 500; line-height: 1.222; text-decoration: underline; text-underline-offset: 3px; }
.kk-detail-popis summary::-webkit-details-marker { display: none; }
.kk-detail-popis summary:focus-visible { outline: 2px solid var(--kk-focus); outline-offset: 2px; }
.kk-detail-popis__close { display: none; }
.kk-detail-popis[open] .kk-detail-popis__open { display: none; }
.kk-detail-popis[open] .kk-detail-popis__close { display: inline; }
.kk-detail-popis__icon { transition: transform .2s ease; }
.kk-detail-popis[open] .kk-detail-popis__icon { transform: rotate(180deg); }
.kk-detail-popis__obsah { padding-top: clamp(16px, 1.15vw, 22px); }
.kk-detail-popis__obsah > *:first-child { margin-top: 0; }

/* Doporučené: šedá pilulka 20 DemiBold na bílém pozadí sekce */
.kk-related { width: 100%; }
.kk-related__title { margin: 0 0 clamp(24px, 2.55vw, 49px); text-align: center; font-size: inherit; line-height: 1; }
.kk-related__title .kk-pill { background: var(--kk-bg); border-color: var(--kk-bg); padding: 0 24px; font-size: clamp(16px, 1.04vw, 20px); }
.kk-related .kk-card { gap: clamp(10px, .73vw, 14px); }

/* ---------------- Srovnávač (modal) ---------------- */
.kk-modal {
	position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column;
	background: var(--kk-bg); color: var(--kk-text);
}
.kk-modal__head { flex: none; padding: clamp(16px, 1.67vw, 32px) 24px 0; } /* malé odsazení – víc místa pro produkty */
.kk-modal__titles { text-align: center; margin: 0 auto clamp(12px, 1.25vw, 24px); }
.kk-modal__title { margin: 0 0 clamp(6px, .63vw, 12px); font-size: var(--kk-fs-h1); font-weight: 700; line-height: 1.094; }
.kk-modal__perex { max-width: 13.5em; margin: 0 auto; font-size: var(--kk-fs-perex); font-weight: 700; line-height: 1.125; }
.kk-modal__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: var(--kk-cmp-max); margin: 0 auto clamp(12px, 1.04vw, 20px); }
.kk-modal__bar [data-kk-modal-close] { font-size: clamp(16px, 1.04vw, 20px); padding: 0 24px; }
.kk-modal__tools { display: flex; align-items: center; gap: 20px; }
.kk-modal__body {
	flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; outline: none;
	padding: 0 max(24px, calc((100% - var(--kk-cmp-max)) / 2)) clamp(48px, 5vw, 96px);
}
.kk-modal.is-loading .kk-modal__content { opacity: .5; transition: opacity .15s; }

.kk-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; cursor: pointer; user-select: none; }
.kk-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.kk-switch__track { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #c9c9cf; transition: background .15s; flex: none; }
.kk-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.kk-switch input:checked + .kk-switch__track { background: var(--kk-dark); }
.kk-switch input:checked + .kk-switch__track::after { transform: translateX(16px); }
.kk-switch input:focus-visible + .kk-switch__track { outline: 2px solid var(--kk-focus); outline-offset: 2px; }

.kk-cmp-loading, .kk-cmp-empty { padding: 60px 0; text-align: center; color: var(--kk-muted); font-size: var(--kk-fs-body); font-weight: 500; }

/* Mřížka: sloupec 405 px + mezera 33 px, svislá čára uprostřed mezery */
.kk-cmp__grid {
	display: grid; grid-template-columns: repeat(var(--kk-cols), var(--kk-cmp-col));
	width: max-content; margin-left: calc(-1 * var(--kk-cmp-pad));
}
.kk-cmp__cell { padding: 0 var(--kk-cmp-pad); border-right: 1px solid var(--kk-border); min-width: 0; }
.kk-cmp__cell--last { border-right: 0; }

.kk-cmp__cell--bar {
	position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding-top: 10px; padding-bottom: 10px; background: var(--kk-bg); font-size: 14px; font-weight: 700;
	box-shadow: 0 1px 0 var(--kk-border);
}
.kk-cmp__bar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-cmp__remove { flex: none; width: 30px; height: 30px; padding: 0; border: 1px solid var(--kk-border); border-radius: 50%; background: var(--kk-surface); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; color: var(--kk-text); }
.kk-cmp__remove:hover { background: var(--kk-dark); border-color: var(--kk-dark); color: #fff; }

.kk-cmp__cell--img { padding-top: clamp(14px, 1.25vw, 24px); }
.kk-cmp__img { display: block; aspect-ratio: 405 / 356; border-radius: var(--kk-radius-img); overflow: hidden; background: var(--kk-img-bg); }
.kk-cmp__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Název 20 Bold, text 16 / 20 Medium */
.kk-cmp__cell--head { padding-top: clamp(16px, 1.35vw, 26px); }
.kk-cmp__title { margin: 0 0 clamp(14px, 1.25vw, 24px); font-size: clamp(17px, 1.04vw, 20px); font-weight: 700; line-height: 1.2; }
.kk-cmp__title a { color: inherit; text-decoration: none; }
.kk-cmp__title a:hover { text-decoration: underline; }
.kk-cmp__variant { margin: calc(-1 * clamp(8px, .9vw, 16px)) 0 14px; font-size: 13px; font-weight: 500; color: var(--kk-muted); }
.kk-cmp__popis { font-size: clamp(14px, .833vw, 16px); font-weight: 500; line-height: 1.25; }
.kk-cmp__popis p { margin: 0 0 12px; }

.kk-cmp__cell--vlast { padding-top: 8px; padding-bottom: clamp(10px, 1vw, 18px); }
.kk-cmp__subtitle { margin: 0 0 clamp(14px, 1.15vw, 22px); font-size: 16px; font-weight: 700; line-height: 1.25; }
.kk-cmp__cell--vlast .kk-vlastnosti { font-size: clamp(14px, .833vw, 16px); }

/* Parametry: 14 / 22 Medium, řádek 64 px, popisek 62 % */
.kk-cmp__cell--param { position: relative; display: grid; grid-template-columns: 62fr 38fr; gap: 12px; align-items: start; font-size: 14px; font-weight: 500; line-height: 1.571; }
.kk-cmp__cell--param > * { padding: clamp(14px, 1.07vw, 20.5px) 0; }
.kk-cmp__cell--param::before { content: ""; position: absolute; top: 0; left: var(--kk-cmp-pad); right: var(--kk-cmp-pad); border-top: 1px solid var(--kk-border); }

.kk-only-diff .kk-cmp__cell--param.is-same { display: none; }

/* ---------------- Lightbox ---------------- */
.kk-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(10, 10, 12, .92); padding: 56px 88px; }
.kk-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--kk-radius-img); }
.kk-lightbox__close, .kk-lightbox__nav { position: absolute; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; border-radius: 50%; width: 56px; height: 56px; font: inherit; font-size: 26px; line-height: 1; }
.kk-lightbox__close:hover, .kk-lightbox__nav:hover { background: rgba(255, 255, 255, .25); }
.kk-lightbox__close:focus-visible, .kk-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kk-lightbox__close { top: 16px; right: 16px; }
.kk-lightbox__nav--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.kk-lightbox__nav--next { right: 16px; top: 50%; transform: translateY(-50%); }
.kk-lightbox__count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .7); font-size: 14px; font-weight: 500; }

/* ---------------- Tablet ---------------- */
@media (max-width: 991px) {
	.kk-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kk-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- Mobil ---------------- */
@media (max-width: 600px) {
	:root { --kk-cmp-col: 82vw; --kk-cmp-pad: 12px; --kk-box-h: 56px; --kk-btn-h: 44px; }
	.kk-hub { grid-template-columns: 1fr; gap: 10px; }
	.kk-filters { gap: 8px; }
	.kk-box { padding: 0 16px; }
	.kk-filters .kk-box { padding: 0 14px; font-size: 15px; }
	.kk-grid { gap: 28px 12px; }
	.kk-card { gap: 10px; }
	.kk-card__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
	.kk-card__title { font-size: 15px; }
	.kk-group { padding: 32px 0 40px; }
	.kk-group:first-child { padding-top: 0; }
	.kk-pill { padding: 0 14px; font-size: 14px; }
	.kk-variants { gap: 8px; }
	.kk-gallery__track { grid-auto-columns: 86%; gap: 10px; }
	.kk-gallery__toolbar .kk-arrows { display: none; } /* na mobilu se posouvá prstem */
	.kk-btn { padding: 0 16px; font-size: 15px; }
	.kk-modal__head { padding: 20px 16px 0; }
	.kk-modal__titles { text-align: center; margin: 0 auto clamp(12px, 1.25vw, 24px); }
	.kk-modal__title { font-size: 28px; margin-bottom: 6px; }
	.kk-modal__perex { font-size: 16px; max-width: none; }
	.kk-modal__bar { margin-bottom: 8px; }
	.kk-modal__bar [data-kk-modal-close] { font-size: 15px; padding: 0 18px; }
	.kk-modal__body { padding: 0 16px 32px; }
	.kk-modal__tools .kk-arrows { display: none; }
	.kk-switch { font-size: 14px; }
	.kk-lightbox { padding: 56px 8px; }
	.kk-lightbox__nav { top: auto; bottom: 8px; transform: none; width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
	.kk-gallery__track { scroll-behavior: auto; }
	.kk-card__img img, .kk-caret, .kk-detail-popis__icon, .kk-switch__track::after, .kk-back svg { transition: none; }
}