/* Koupelny Šota 2026 – styly webu, verze 29 „čistá modrá, dlaždice“ (sestavení je spojí se styly konfigurátoru do assets/style.css)
   Minimalismus: bílá plocha, modré odstíny značky, hodně vzduchu, tenké linky. Žádné fotky v pozadí.
   Sklo (liquid glass) jen na ovládací vrstvě, vždy jako hranaté dlaždice se spárou 3 px: plovoucí hlavička, carousel na úvodu,
   karty konfigurátorů, novinky, formulář, okno poptávky, výzva v patičce. Pod sklem se pomalu přelévají rozmazané modré skvrny (.liquid), nic jiného se samo nehýbe.
   Písmo Montserrat: velké nadpisy tenké (300), ovládací prvky 500–600.
   Rozestupy: jedna sada proměnných (--sec, --block, --gap, --s1 až --s3) a společná mřížka 12 sloupců. Nové bloky stavte z nich, ne z čísel od oka. */

@font-face { font-family: Montserrat; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/montserrat.woff2) format("woff2"); }

:root {
  /* Web je jen světlý. I když má návštěvník v zařízení tmavý režim, prohlížeč stránku nepřebarvuje. */
  color-scheme: only light;
  /* barvy: jen bílá a modré */
  --white: #fff;
  --ice: #f3f8fd;
  --tint: #f3f8fd;
  --mist: #e6eff8;
  --line: #d9e5f1;
  --sky: #a0daf7;
  --azure: #008ad2;
  --blue: #004e9e;
  --blue-2: #008ad2;
  --deep: #013a7a;
  --ink: #0b2545;
  --stone: #5c6f8a;
  --ok: #2f7d4f;
  --warn: #b26a00;
  --tri: linear-gradient(90deg, var(--blue) 0 33.34%, var(--azure) 33.34% 66.67%, var(--sky) 66.67%);
  --font: Montserrat, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  /* rozměry */
  --gut: clamp(20px, 5vw, 72px);
  --max: 1180px;
  --sec: clamp(84px, 11vw, 168px);
  --head: 72px;
  --r: 4px;
  --r-s: 4px;
  --grout: 3px;
  /* rozestupy: jedna sada pro celý web */
  --gap: clamp(16px, 2.4vw, 32px);   /* mezera mezi sloupci, všude stejná (12sloupcová mřížka) */
  --gap-s: 16px;                     /* husté mřížky: loga, malé galerie */
  --block: clamp(36px, 5vw, 64px);   /* nadpis sekce → obsah, blok → blok uvnitř sekce */
  --s1: 12px;                        /* drobnost: popisek pod fotkou, štítek nad textem */
  --s2: 20px;                        /* nadpis → odstavec, řádek seznamu */
  --s3: 32px;                        /* odstavec → tlačítka, další prvek ve sloupci textu */
  --pad: clamp(20px, 2.6vw, 32px);   /* vnitřní okraj dlaždic */
  --pad-l: clamp(28px, 4vw, 48px);   /* vnitřní okraj velkých boxů */
  /* stíny jen pro sklo */
  --glass-sh: 0 24px 64px -36px rgba(0, 78, 158, .35), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 78, 158, .05);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: .22s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 24px); }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 1rem/1.65 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul[role=list], ol[role=list] { padding: 0; list-style: none; }
fieldset { min-width: 0; padding: 0; border: 0; }
legend { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--azure); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--sky); color: var(--ink); }

.wrap { width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r); background: var(--blue); color: #fff; }
.skip:focus { top: 12px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--stone); }
.small { font-size: .875rem; }

/* ---------- Písmo ---------- */
h1, .h1 { font-weight: 300; font-size: clamp(2.5rem, 6.2vw, 5.4rem); letter-spacing: -.04em; line-height: .98; text-wrap: balance; }
h2 { font-weight: 300; font-size: clamp(1.9rem, 3.8vw, 3.1rem); letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
h3 { font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; }
.lead { max-width: 34em; color: var(--stone); font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.6; text-wrap: pretty; }
.k { display: block; margin-bottom: var(--s2); color: var(--azure); font-weight: 500; font-size: .875rem; letter-spacing: .01em; }
.link { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); transition: text-decoration-color var(--t); }
.link:hover { text-decoration-color: currentColor; }
.link-btn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.more { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-weight: 500; font-size: .94rem; }
.more svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.more:hover svg, a:hover > .more svg { transform: translateX(5px); }

/* ---------- Tlačítka ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 1px solid var(--blue); border-radius: var(--r); background: var(--blue); color: #fff; font-weight: 500; font-size: .94rem; line-height: 1.2; white-space: nowrap; overflow: hidden; transition: background var(--t), border-color var(--t), color var(--t), transform .3s var(--ease), box-shadow .3s; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); pointer-events: none; }
.btn:hover { background: var(--deep); border-color: var(--deep); transform: translateY(-1px); box-shadow: 0 14px 30px -18px rgba(0, 78, 158, .6); }
.btn:hover::after { transform: translateX(120%); }
.btn-line { background: transparent; color: var(--blue); border-color: var(--line); }
.btn-line:hover { background: var(--ice); border-color: var(--blue); color: var(--blue); box-shadow: none; }
.btn-light { background: #fff; border-color: #fff; color: var(--blue); }
.btn-light:hover { background: #fff; border-color: #fff; color: var(--deep); }
.btn-ghost { background: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .8); color: var(--blue); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--deep); box-shadow: none; }
.btn-sm { min-height: 42px; padding: 0 20px; font-size: .875rem; }
.btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r); background: none; }
.icon-btn:hover { background: var(--ice); }
.icon-btn svg { width: 22px; height: 22px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.round { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--blue); transition: border-color var(--t), background var(--t), color var(--t); }
.round:hover { border-color: var(--blue); background: var(--blue); color: #fff; }
.round svg { width: 20px; height: 20px; }

/* ---------- Sklo a tekuté pozadí ---------- */
.glass, .tile { position: relative; isolation: isolate; overflow: clip; border: 1px solid rgba(255, 255, 255, .8); border-radius: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5)); box-shadow: var(--glass-sh); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); }
/* odlesk, který jde za kurzorem (souřadnice doplňuje skript) */
.glass::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(360px circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .7), transparent 60%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.glass:hover::before { opacity: 1; }
/* tenká světelná hrana nahoře */
.glass::after { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent); pointer-events: none; }
.liquid { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.liquid i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: .85; will-change: transform; }
.liquid i:nth-child(1) { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; right: -8vw; top: -10vw; background: radial-gradient(circle at 40% 40%, rgba(160, 218, 247, .95), rgba(160, 218, 247, 0) 68%); animation: drift1 38s ease-in-out infinite alternate; }
.liquid i:nth-child(2) { width: 34vw; height: 34vw; max-width: 480px; max-height: 480px; right: 14vw; top: 16vw; background: radial-gradient(circle at 50% 50%, rgba(0, 138, 210, .5), rgba(0, 138, 210, 0) 68%); animation: drift2 46s ease-in-out infinite alternate; }
.liquid i:nth-child(3) { width: 28vw; height: 28vw; max-width: 400px; max-height: 400px; left: -6vw; bottom: -8vw; background: radial-gradient(circle at 50% 50%, rgba(0, 78, 158, .32), rgba(0, 78, 158, 0) 68%); animation: drift3 52s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(-18vw, 14vw) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-26vw, -8vw) scale(.9); } }
@keyframes drift3 { to { transform: translate(14vw, -16vw) scale(1.2); } }
.has-liquid { position: relative; isolation: isolate; }

/* ---------- Hlavička: plovoucí skleněná lišta ---------- */
.head { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; pointer-events: none; animation: headIn .9s .2s var(--ease) both; }
@keyframes headIn { from { opacity: 0; transform: translateY(-16px); } }
.head-in { pointer-events: auto; display: flex; align-items: center; gap: 20px; height: var(--head); padding: 0 10px 0 22px; }
.head-in.glass { border-radius: var(--r); border-color: rgba(255, 255, 255, .9); background: linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(243, 248, 253, .72)); box-shadow: 0 18px 44px -30px rgba(0, 78, 158, .35), inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(0, 78, 158, .05); transition: background .4s, box-shadow .4s; }
.head.is-solid .head-in.glass { background: rgba(255, 255, 255, .88); box-shadow: 0 18px 44px -28px rgba(0, 78, 158, .4), inset 0 1px 0 rgba(255, 255, 255, .9); }
.logo { display: block; height: 38px; width: 100px; }
.logo img { width: auto; height: 100%; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 2px; padding: 0; list-style: none; }
.nav a { position: relative; display: block; padding: 9px 13px; border-radius: var(--r); font-weight: 500; font-size: .875rem; white-space: nowrap; transition: background var(--t), color var(--t); }
.nav a:hover { background: rgba(0, 78, 158, .07); }
.nav a[aria-current=page] { background: rgba(0, 78, 158, .1); color: var(--blue); }
.head-act { display: flex; align-items: center; gap: 6px; }
.menu-btn { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--blue); }
.menu-btn svg { width: 24px; height: 24px; }
@media (max-width: 1100px) {
  .nav { display: none; }
  .head-act { margin-left: auto; }
  .menu-btn { display: grid; }
}
@media (max-width: 480px) {
  :root { --head: 60px; }
  .head { top: 10px; }
  .head-in { padding-left: 16px; gap: 10px; }
  .logo { height: 32px; width: 84px; }
}

/* ---------- Úvod ---------- */
.hero { overflow-x: clip; padding: calc(var(--head) + clamp(72px, 12vh, 140px)) 0 clamp(56px, 8vw, 110px); }
.hero-copy { max-width: 56rem; }
/* nástup po řádcích: každá část se vysune z neviditelné masky */
.rise { display: block; overflow: clip; }
.rise > span { display: block; transform: translateY(110%); animation: riseUp 1s var(--ease) forwards; }
.rise:nth-child(2) > span { animation-delay: .1s; }
.rise:nth-child(3) > span { animation-delay: .2s; }
@keyframes riseUp { to { transform: none; } }
.hero .k, .hero .lead, .hero .actions, .hero-entries { opacity: 0; animation: fadeUp 1s var(--ease) forwards; }
.hero .k { animation-delay: 0s; }
.hero .lead { animation-delay: .35s; }
.hero .actions { animation-delay: .45s; }
.hero-entries { animation-delay: .6s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-entries { position: relative; isolation: isolate; margin-top: clamp(56px, 8vw, 96px); }
.hero-entries > .liquid { inset: -36% -4% -16%; overflow: visible; }
.hero-entries .liquid i { filter: blur(80px); opacity: .7; }
.hero-entries .liquid i:nth-child(3) { display: none; }
.entry .more { color: var(--blue); font-size: .94rem; }
.tel-xl { display: grid; gap: 4px; color: var(--blue); font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -.03em; line-height: 1.1; }
.tel-xl small { color: var(--stone); font-weight: 400; font-size: .875rem; letter-spacing: 0; }
.hero .actions:has(.tel-xl) { gap: var(--s2) var(--gap); }
.entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grout); }
.entry { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s1); padding: var(--pad); color: var(--ink); transition: background var(--t); }
.entry b { font-weight: 500; font-size: clamp(1.15rem, 1.6vw, 1.35rem); letter-spacing: -.02em; line-height: 1.2; }
.entry span { color: var(--stone); font-size: .94rem; line-height: 1.5; }
.entry .more { margin-top: 6px; }
.entry:hover { background: rgba(255, 255, 255, .45); }
@media (max-width: 760px) {
  .entries { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- Úvod: carousel přes celou šířku (koupelny na klíč, kuchyně na míru) ---------- */
.hero-car { --tab-h: 72px; position: relative; height: clamp(600px, 92svh, 880px); overflow: clip; background: var(--ice); isolation: isolate; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.hero-slide.is-on { opacity: 1; z-index: 1; }
.slide-media { position: absolute; inset: 0; margin: 0; overflow: clip; background: var(--ice); }
.slide-media img { width: 100%; height: 100%; object-fit: cover; }
.slide-media.ph-todo img { display: none; }
.slide-media.ph-todo { display: grid; place-items: center; place-content: center; }
.hero-slide.is-on .slide-media img { animation: kenburns 9s var(--ease) both; }
@keyframes kenburns { from { transform: scale(1.06); } }
.hero-slide > .wrap { position: relative; z-index: 1; display: grid; align-content: end; height: 100%; padding-bottom: calc(var(--gap) + var(--tab-h) + var(--s3)); }
/* Text snímku leží přímo na fotce (bez dlaždice). Čitelnost drží modrý závoj v levém dolním rohu, zbytek fotky zůstává čistý. */
.hero-slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(115% 100% at 0% 100%, rgba(1, 34, 74, .84) 0%, rgba(1, 34, 74, .6) 30%, rgba(1, 34, 74, .22) 54%, rgba(1, 34, 74, 0) 72%); }
.slide-copy { width: min(100%, 600px); color: #fff; text-shadow: 0 1px 18px rgba(1, 34, 74, .45); }
.slide-copy .k { margin-bottom: var(--s1); color: #fff; opacity: .86; }
.slide-copy h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); color: #fff; }
.slide-copy p { margin-top: var(--s1); max-width: 30em; color: rgba(255, 255, 255, .92); }
.slide-copy .actions { margin-top: var(--s2); text-shadow: none; }
.slide-copy .more, .slide-copy .status { color: #fff; }
.slide-copy .btn { box-shadow: 0 10px 28px -14px rgba(1, 34, 74, .8); }
.hero-bar { position: absolute; left: 0; right: 0; bottom: var(--gap); z-index: 2; }
.hero-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--grout); }
.hero-tab { position: relative; display: block; min-height: var(--tab-h); padding: 14px 18px 18px; border: 0; text-align: left; font: inherit; font-weight: 500; font-size: .9rem; line-height: 1.3; color: var(--ink); cursor: pointer; transition: background var(--t); }
.hero-tab small { display: block; margin-top: 2px; color: var(--stone); font-weight: 400; font-size: .8125rem; }
.hero-tab:hover { background: rgba(255, 255, 255, .92); }
.hero-tab::before, .hero-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0, 78, 158, .12); }
.hero-tab::after { background: var(--blue); transform: scaleX(0); transform-origin: left; }
.hero-tab.is-on::after { animation: tabProg 7s linear forwards; }
[data-paused] .hero-tab::after { animation-play-state: paused; }
@keyframes tabProg { to { transform: scaleX(1); } }
.hero-ctl { position: absolute; right: max(var(--gut), (100% - var(--max)) / 2); top: 50%; z-index: 2; display: grid; gap: var(--grout); transform: translateY(-50%); }
.hero-ctl button { width: 46px; height: 46px; padding: 0; border: 0; color: var(--blue); cursor: pointer; }
.hero-ctl button:hover { background: rgba(255, 255, 255, .95); }
.hero-ctl svg { width: 20px; height: 20px; margin: auto; }
@media (max-width: 760px) {
  .hero-car { --tab-h: 50px; height: clamp(560px, 88svh, 760px); }
  .slide-copy h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .hero-slide::after { background: linear-gradient(0deg, rgba(1, 34, 74, .82) 0%, rgba(1, 34, 74, .55) 38%, rgba(1, 34, 74, 0) 68%); }
  .slide-copy p { font-size: .94rem; }
  .hero-tab { padding: 9px 12px 13px; font-size: .8125rem; }
  .hero-tab small { display: none; }
  .hero-ctl { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-tab.is-on::after { transform: none; } .hero-slide { transition: none; } }

/* ---------- Hero podstránek: text vlevo, fotka vpravo ---------- */
.hero-sub { padding: calc(var(--head) + clamp(40px, 7vh, 96px)) 0 var(--sec); }
.hero-sub > .wrap { align-items: center; }
.hero-sub h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.hero-sub .lead { font-size: clamp(1rem, 1.2vw, 1.12rem); }
.hero-media { aspect-ratio: 4 / 3; opacity: 0; animation: fadeUp 1s .3s var(--ease) forwards; }
@media (max-width: 860px) { .hero-media { aspect-ratio: 3 / 2; } }
.flow-fig { margin-top: var(--s3); }
.team-photos { margin-bottom: var(--block); }

/* ---------- Místo na fotku (dokud soubor není na hostingu) ---------- */
.ph-todo { display: grid; place-items: center; background-color: var(--ice); background-image: repeating-linear-gradient(0deg, transparent 0 59px, var(--line) 59px 60px), repeating-linear-gradient(90deg, transparent 0 59px, var(--line) 59px 60px); }
.ph-todo img { display: none; }
.sec-ice .ph-todo { background-color: #fff; }
.todo { display: grid; justify-items: center; gap: 4px; max-width: 28em; padding: 24px; text-align: center; color: var(--stone); font-size: .875rem; line-height: 1.5; }
.todo svg { width: 28px; height: 28px; margin-bottom: 6px; color: var(--azure); }
.todo b { color: var(--ink); font-weight: 500; font-size: 1rem; }
.todo code { font: inherit; font-size: .8rem; color: var(--azure); }
.todo-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grout); }
@media (max-width: 640px) { .todo-split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Novinky ---------- */
.news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grout); }
.news-item { display: grid; align-content: start; gap: var(--s1); padding: var(--pad); color: var(--ink); transition: background var(--t); }
.news-item:hover { background: rgba(255, 255, 255, .92); }
.news-item time { color: var(--azure); font-weight: 500; font-size: .8125rem; }
.news-item h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); letter-spacing: -.02em; }
.news-item p { color: var(--stone); font-size: .94rem; }
.news-item .more { margin-top: var(--s1); }
@media (max-width: 860px) { .news { grid-template-columns: minmax(0, 1fr); } }
.articles { max-width: calc((100% - 11 * var(--gap)) / 12 * 8 + 7 * var(--gap)); }
.article + .article { margin-top: var(--block); padding-top: var(--block); border-top: 1px solid var(--line); }
.article-head time { display: block; margin-bottom: var(--s1); color: var(--azure); font-weight: 500; font-size: .875rem; }
.article .ph { margin: var(--s3) 0; }
.article .ph img { height: auto; }
.article-head h2 a { transition: color var(--t); }
.article-head h2 a:hover { color: var(--blue); }
.article > a { display: block; }
.k a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.article-body { margin-top: var(--s2); max-width: 40em; }
.article-body p + p { margin-top: 1em; }
.article-body h3 { margin-top: var(--s3); }
.article-body h3 + p { margin-top: 8px; }
.article-body p:has(> .btn) { margin-top: var(--s3); }
@media (max-width: 860px) { .articles { max-width: none; } }
/* právní text (ochrana osobních údajů) */
.legal { max-width: calc((100% - 11 * var(--gap)) / 12 * 8 + 7 * var(--gap)); }
.legal h2 { margin-top: var(--block); font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -.025em; line-height: 1.2; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin-top: var(--s3); }
.legal p, .legal ul, .legal address { margin-top: var(--s1); }
.legal ul { padding-left: 1.2em; }
.legal ul.plain { padding-left: 0; list-style: none; }
.legal li + li { margin-top: 6px; }
@media (max-width: 860px) { .legal { max-width: none; } }

/* ---------- Sekce a rozestupy ----------
   Každá sekce má nahoře i dole stejný odstup (--sec). Když na sebe navazují dvě sekce na stejném podkladu, horní odstup té druhé odpadá,
   takže mezi dvěma bloky je všude jedna a tatáž mezera. Na hraně bílé a ledové plochy zůstává odstup z obou stran. */
.sec, .next { padding-block: var(--sec); }
.sec-ice { --bg: var(--ice); background: var(--ice); }
.sec:not(.sec-ice) + .sec:not(.sec-ice), .sec-ice + .sec-ice, .hero-sub + .sec:not(.sec-ice), .hero-sub + .next, .sec:not(.sec-ice) + .next { padding-top: 0; }

/* ---------- Mřížka ----------
   Dvousloupcové bloky stojí na společné mřížce 12 sloupců s mezerou --gap. Text zabírá 5 sloupců, fotka nebo blok vedle něj 6 a mezi nimi zůstává jeden sloupec vzduchu.
   Tří a čtyřsloupcové výpisy mají stejnou mezeru, takže jejich hrany padnou na stejné linky. */
.sec-head, .split, .cfg, .flow, .showroom, .hero-sub > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--block) var(--gap); }
.sec-head { align-items: end; row-gap: var(--s2); margin-bottom: var(--block); }
.sec-head .more, .sec-head .revs-nav { justify-self: start; }
.split { align-items: center; }
.split-top { align-items: start; }
@media (min-width: 861px) {
  .sec-head, .split, .flow, .showroom, .hero-sub > .wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sec-head > * { grid-column: 1 / span 7; }
  .sec-head > :nth-child(2) { grid-column: 8 / -1; }
  .sec-head > :only-child { grid-column: 1 / span 8; }
  .sec-head .more, .sec-head .revs-nav { justify-self: end; }
  .split > *, .flow > * { grid-column: 1 / span 5; }
  .split > :nth-child(2), .flow > :nth-child(2) { grid-column: 7 / -1; }
  .split > figure:first-child { grid-column: 1 / span 6; }
  .split > figure:first-child + * { grid-column: 8 / -1; }
  .hero-sub > .wrap > * { grid-column: 1 / span 6; }
  .hero-sub > .wrap > .hero-media { grid-column: 7 / -1; }
  .hero-plain > .wrap > * { grid-column: 1 / span 8; }
  .showroom > .gal { grid-column: 1 / span 6; }
  .showroom > div:not(.gal) { grid-column: 8 / -1; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  /* na užších displejích dostane sloupec s údaji prodejny o sloupec víc, aby se nelámaly e-maily a otevírací doba */
  .showroom > .gal { grid-column: 1 / span 5; }
  .showroom > div:not(.gal) { grid-column: 6 / -1; }
}
@media (min-width: 1101px) {
  .cfg { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cfg > * { grid-column: 1 / span 5; }
  .cfg > :nth-child(2) { grid-column: 7 / -1; }
}
/* sloupec textu: nadpis → odstavec → tlačítka */
:where(h1, h2) + :is(.lead, .spec) { margin-top: var(--s2); }
:where(main) :where(p, dl, .note) + .actions { margin-top: var(--s3); }
.rule { height: 1px; background: var(--line); }

/* ---------- Fotky v měkkých rámech ---------- */
.ph { display: block; overflow: clip; border-radius: var(--r); background: var(--ice); }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
a.ph:hover img, button.ph:hover img, .ph-hover:hover .ph img { transform: scale(1.04); }
.ph-34 { aspect-ratio: 3 / 4; }
.ph-32 { aspect-ratio: 3 / 2; }
.ph-43 { aspect-ratio: 4 / 3; }
.ph-169 { aspect-ratio: 16 / 9; }
.ph-wide { aspect-ratio: 21 / 9; }
@media (max-width: 640px) { .ph-wide { aspect-ratio: 3 / 2; } }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
.gallery figure:nth-child(1) .ph { aspect-ratio: 4 / 5; }
.gallery figure:nth-child(2) .ph { aspect-ratio: 4 / 5.6; }
.gallery figure:nth-child(3) .ph { aspect-ratio: 4 / 4.6; }
.gallery figcaption { margin-top: var(--s1); color: var(--stone); font-size: .875rem; }
@media (max-width: 760px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery figure:nth-child(3) { grid-column: 1 / -1; }
  .gallery figure:nth-child(3) .ph { aspect-ratio: 16 / 10; }
}

/* ---------- Tři cesty: sloupce oddělené linkou ---------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); border-top: 1px solid var(--line); }
.ways > div { padding-top: var(--s3); }
.ways b { display: block; margin-bottom: var(--s1); font-weight: 500; font-size: clamp(1.2rem, 1.7vw, 1.5rem); letter-spacing: -.02em; line-height: 1.2; }
.ways p { color: var(--stone); }
.ways .more { margin-top: var(--s2); }
@media (max-width: 760px) {
  .ways { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .ways > div { padding: var(--s2) 0; border-top: 1px solid var(--line); }
  .ways > div:last-child { padding-bottom: 0; }
}

/* ---------- Postup: vodorovná linka, která se při posunu dokresluje ---------- */
.rail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gap); counter-reset: rail; padding-top: var(--s3); }
.rail::before, .rail::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.rail::after { background: var(--blue); transform-origin: left; }
.rail > li { position: relative; counter-increment: rail; list-style: none; }
.rail > li::before { content: counter(rail, decimal-leading-zero); display: block; margin-bottom: var(--s1); color: var(--azure); font-weight: 500; font-size: .875rem; font-variant-numeric: tabular-nums; }
.rail > li::after { content: ""; position: absolute; left: 0; top: calc(-1 * var(--s3) - 5px); width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.rail h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.rail p { margin-top: 8px; color: var(--stone); font-size: .94rem; }
@media (max-width: 760px) {
  .rail { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-top: 0; padding-left: 28px; }
  .rail::before, .rail::after { left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; transform-origin: top; }
  .rail > li::after { left: -28px; top: 6px; }
}

/* ---------- Konfigurátory: skleněné karty nad tekutým pozadím ---------- */
.cfg { align-items: center; }
.cfg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grout); }
.cfg-card { display: grid; grid-template-rows: auto 1fr; color: var(--ink); transition: transform .5s var(--ease), box-shadow .5s; }
.cfg-card:hover { transform: translateY(-4px); }
.cfg-card figure { margin: 0; overflow: clip; aspect-ratio: 4 / 3; background: #fff; }
.cfg-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cfg-card:hover img { transform: scale(1.03); }
.cfg-card > div { display: grid; align-content: space-between; gap: var(--s2); padding: var(--pad); }
.cfg-card b { display: block; font-weight: 500; font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -.02em; line-height: 1.2; }
.cfg-card small { display: block; margin-top: 8px; color: var(--stone); font-size: .9rem; line-height: 1.5; }
.note { display: flex; gap: var(--s1); align-items: flex-start; margin-top: var(--s3); padding: var(--s2); border-radius: 0; background: rgba(255, 255, 255, .6); color: var(--stone); font-size: .94rem; line-height: 1.55; }
.note svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--azure); }
.note b { display: block; color: var(--ink); font-weight: 500; }
@media (max-width: 560px) { .cfg-cards { grid-template-columns: minmax(0, 1fr); } .cfg-card figure { aspect-ratio: 16 / 9; } }

/* ---------- Čísla ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--gap); border-top: 1px solid var(--line); padding-top: var(--s3); }
.stats b { display: block; color: var(--blue); font-weight: 200; font-size: clamp(2.5rem, 5vw, 4.2rem); letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.stats b span { display: inline; margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.stats b small { margin-left: .12em; font-weight: 400; font-size: .42em; letter-spacing: 0; color: var(--azure); }
.stats span { display: block; margin-top: var(--s1); color: var(--stone); font-size: .94rem; line-height: 1.5; }
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .stats, .stats-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Řádkový přehled ---------- */
.rows { border-bottom: 1px solid var(--line); }
.rows > li { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px var(--gap); align-items: center; padding: var(--pad) 0; transition: padding .3s var(--ease); }
.row > * { grid-column: 1 / -1; }
@media (min-width: 761px) { .row > b { grid-column: 1 / span 5; } .row > span { grid-column: 7 / span 4; } .row > .more { grid-column: 11 / -1; } }
.row b { font-weight: 400; font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: -.025em; transition: color var(--t); }
.row span { color: var(--stone); }
.row .more { justify-self: end; }
a.row:hover { padding-left: 12px; }
a.row:hover b { color: var(--blue); }
@media (max-width: 760px) { .row .more { justify-self: start; margin-top: 6px; } a.row:hover { padding-left: 0; } }

/* ---------- Přehled údajů, seznamy, dlaždice ---------- */
.spec { border-bottom: 1px solid var(--line); }
.spec > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4px var(--gap); padding: 14px 0; border-top: 1px solid var(--line); }
.spec dt { color: var(--stone); }
.spec dd { font-weight: 500; }
@media (max-width: 480px) { .spec > div { grid-template-columns: minmax(0, 1fr); } }
.list { padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.list li { padding: 14px 0; border-top: 1px solid var(--line); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); }
.tiles > div { display: grid; align-content: start; gap: 6px; padding: var(--s2) 0; border-top: 1px solid var(--line); }
.tiles dt { font-weight: 500; font-size: 1.1rem; letter-spacing: -.015em; }
.tiles dd { color: var(--stone); font-size: .94rem; }
@media (max-width: 860px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
.cols.has-logos { columns: auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap-s); color: var(--ink); font-weight: 500; line-height: 1.3; }
.cols.has-logos img { max-width: 100%; height: auto; }
.cols.has-logos li { display: grid; place-items: center; min-height: 92px; padding: var(--gap-s); border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; text-align: center; }
@media (max-width: 1000px) { .cols.has-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cols.has-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .cols.has-logos li { min-height: 76px; padding: 10px; } }
@media (max-width: 400px) { .cols.has-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cols { columns: 5 150px; column-gap: 40px; padding: 0; list-style: none; color: var(--stone); font-size: .94rem; line-height: 2; }

/* ---------- Galerie ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s3); }
.chip { min-height: 40px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-weight: 500; font-size: .875rem; transition: border-color var(--t), background var(--t), color var(--t); }
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip[aria-pressed=true] { border-color: var(--blue); background: var(--blue); color: #fff; }
.gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.gal-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gal button { display: block; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; }
.gal .ph { aspect-ratio: 3 / 2; }
.gal span.cap { display: block; padding-top: var(--s1); color: var(--stone); font-size: .875rem; line-height: 1.4; }
.gal .out { display: none; }
@media (max-width: 860px) { .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .gal:not(.gal-keep) { grid-template-columns: minmax(0, 1fr); } }
.viz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.viz button { padding: 0; border: 0; overflow: clip; border-radius: var(--r); background: var(--ice); cursor: zoom-in; }
.viz img { width: 100%; height: clamp(200px, 22vw, 320px); object-fit: cover; transition: transform 1s var(--ease); }
.viz button:hover img { transform: scale(1.04); }
.viz button:nth-child(1) { grid-column: span 2; }
@media (max-width: 760px) { .viz { grid-template-columns: repeat(2, minmax(0, 1fr)); } .viz button:last-child:nth-child(even) { grid-column: span 2; } }

/* ---------- Recenze ---------- */
.revs { display: flex; gap: var(--gap); margin-inline: calc(var(--gut) * -1); padding: 4px var(--gut) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
.revs::-webkit-scrollbar { display: none; }
.rev { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) 0 0; border-top: 1px solid var(--line); scroll-snap-align: start; }
.rev .stars { color: var(--azure); font-size: .85rem; letter-spacing: .12em; }
.rev blockquote { font-weight: 300; font-size: clamp(1.15rem, 1.5vw, 1.35rem); letter-spacing: -.015em; line-height: 1.5; text-wrap: pretty; }
.rev figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: auto; color: var(--stone); font-size: .875rem; }
.rev figcaption b { display: block; color: var(--ink); font-weight: 500; }
.rev figcaption svg { width: 20px; height: 20px; }
.revs-nav { display: flex; gap: 6px; justify-self: end; }
.revs-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--gap); margin-top: var(--s3); }
.gbadge { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); font-size: .875rem; line-height: 1.3; transition: border-color var(--t), transform .3s var(--ease); }
.gbadge:hover { border-color: var(--blue); transform: translateY(-2px); }
.gbadge > svg:first-child { flex: none; width: 24px; height: 24px; }
.gbadge b { display: block; font-weight: 500; }
.gbadge .stars { color: var(--azure); letter-spacing: .1em; font-size: .8rem; }
@media (max-width: 1000px) { .rev { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (max-width: 640px) { .revs-nav { display: none; } .rev { flex-basis: min(100%, 420px); } }

/* ---------- Prodejny ---------- */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.status.is-closed::before { background: #b3bbc2; }
.shops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--block) var(--gap); }
.shop { display: block; }
.shop .ph { aspect-ratio: 16 / 10; }
.shop-b { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s2); align-items: baseline; padding-top: var(--s2); }
.shop-b h3 { grid-column: 1 / -1; }
.shop-b p { grid-row: 2; grid-column: 1; }
.shop-b .status { grid-row: 2; grid-column: 2; }
.shop h3 { font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -.03em; transition: color var(--t); }
.shop:hover h3 { color: var(--blue); }
.shop p { color: var(--stone); }
.shop .status { justify-self: end; }
@media (max-width: 760px) { .shops { grid-template-columns: minmax(0, 1fr); } }
.showroom { align-items: start; }
.showroom + .showroom { margin-top: var(--sec); }
.showroom .gal { gap: var(--gap-s); }
.showroom .gal button:first-child { grid-column: 1 / -1; }
.showroom h2 { margin-bottom: var(--s1); }
.showroom .spec { margin-top: var(--s2); }
.hours { width: 100%; border-collapse: collapse; }
.hours th { padding: 0 16px 0 0; font-weight: 400; text-align: left; color: var(--stone); }
.hours td { padding: 0; font-weight: 500; text-align: right; white-space: nowrap; }
.hours .today th, .hours .today td { color: var(--blue); }
@media (max-width: 860px) { .showroom > .gal { order: 2; } }

/* ---------- Vložený obsah (mapa, Instagram, Facebook) až po kliknutí ---------- */
.embed { position: relative; display: grid; overflow: hidden; min-height: 320px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ice); }
.embed > * { grid-area: 1 / 1; }
.embed-ask { display: grid; align-content: center; justify-items: start; gap: var(--s1); padding: var(--pad); }
.embed-ask > svg:first-child { width: 32px; height: 32px; color: var(--blue); }
.embed-ask b { font-weight: 500; font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -.02em; line-height: 1.2; }
.embed-ask p { max-width: 30em; color: var(--stone); font-size: .9rem; line-height: 1.5; }
.embed-ask .btn { margin-top: 6px; }
.embed iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
.embed.is-on .embed-ask { display: none; }
.embed-tall { min-height: 520px; }
.embed-tall iframe { min-height: 520px; }
.socials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 760px) { .socials { grid-template-columns: minmax(0, 1fr); } }
.soc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: var(--s2) 0; border-top: 1px solid var(--line); transition: color var(--t); }
.soc:last-child { border-bottom: 1px solid var(--line); }
.soc > svg:first-child { width: 26px; height: 26px; color: var(--blue); }
.soc small { display: block; color: var(--stone); font-size: .8125rem; }
.soc b { display: block; font-weight: 500; font-size: 1.05rem; }
.soc .arr { width: 20px; height: 20px; color: var(--blue); transition: transform .3s var(--ease); }
.soc:hover { color: var(--blue); }
.soc:hover .arr { transform: translateX(5px); }

/* ---------- Katalog ---------- */
.catalog { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3) var(--gap); align-items: center; padding: var(--pad-l); border: 1px solid var(--line); border-radius: var(--r); transition: border-color var(--t); }
.catalog .more { color: var(--blue); }
.catalog:hover { border-color: var(--blue); }
.catalog h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.catalog p { margin: var(--s2) 0 var(--s3); max-width: 24em; color: var(--stone); }
.catalog-img { width: clamp(150px, 16vw, 220px); border-radius: 2px; transform: rotate(3deg); box-shadow: 0 30px 50px -28px rgba(0, 78, 158, .45); transition: transform .6s var(--ease); }
.catalog:hover .catalog-img { transform: rotate(0deg) translateY(-6px); }
.outro { display: grid; gap: var(--gap); }
@media (max-width: 560px) { .catalog { grid-template-columns: minmax(0, 1fr); } .catalog-img { width: 170px; margin: 4px auto 0; } }

/* ---------- Postup s linkou (podstránky), časová osa ---------- */
.flow { align-items: start; counter-reset: fl; }
.flow-head { position: sticky; top: calc(var(--head) + 40px); }
.flow-body { position: relative; padding-left: 56px; }
.flow-body::before, .flow-body::after { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.flow-body::after { background: var(--blue); transform-origin: top; }
.flow-phase { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--s1); padding-bottom: var(--s1); }
.flow-phase b { font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; line-height: 1.2; }
.flow-phase span { padding: 5px 12px; border-radius: var(--r); background: var(--ice); color: var(--blue); font-weight: 500; font-size: .8125rem; line-height: 1.3; }
.flow-body ol { margin: 0; padding: 0; list-style: none; }
.flow-body ol + .flow-phase { margin-top: var(--block); }
.flow-body li { position: relative; counter-increment: fl; padding: var(--s2) 0; border-top: 1px solid var(--line); }
.flow-body li::before { content: counter(fl); position: absolute; left: -56px; top: 16px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg, #fff); color: var(--blue); font-weight: 500; font-size: .85rem; }
.flow-body li p { margin-top: 4px; max-width: 34em; color: var(--stone); }
.flow-years li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 4px var(--gap); padding-block: 24px; }
.flow-years li::before { content: ""; left: -45px; top: 34px; width: 11px; height: 11px; border: 0; background: var(--blue); box-shadow: 0 0 0 5px var(--bg, #fff); }
.flow-years li > b { color: var(--blue); font-weight: 200; font-size: clamp(1.8rem, 2.8vw, 2.4rem); letter-spacing: -.04em; line-height: 1.1; }
.flow-years h3 { font-size: 1.15rem; }
@media (max-width: 860px) { .flow-head { position: static; } }
@media (max-width: 480px) { .flow-years li { grid-template-columns: minmax(0, 1fr); } .flow-years li::before { top: 32px; } }
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; list-style: none; counter-reset: s; }
.steps > li { counter-increment: s; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 4px 16px; padding: var(--s2) 0; border-top: 1px solid var(--line); }
.steps > li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; color: var(--azure); font-weight: 500; font-size: .875rem; font-variant-numeric: tabular-nums; line-height: 1.6; }
.steps p { color: var(--stone); font-size: .94rem; line-height: 1.55; }
.steps-plain > li { grid-template-columns: minmax(0, 1fr); }
.steps-plain > li::before { content: none; }

/* ---------- Otázky ---------- */
.faq { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: var(--s2) 0; font-weight: 500; font-size: 1.0625rem; cursor: pointer; list-style: none; transition: color var(--t); }
.faq summary:hover { color: var(--blue); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--blue); font-weight: 300; font-size: 1.8rem; line-height: 1; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 44em; padding: 0 0 var(--s2); color: var(--stone); }

/* ---------- Značky v pohybu ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee ul { display: flex; gap: clamp(36px, 5vw, 72px); width: max-content; padding: 0; list-style: none; color: var(--stone); font-weight: 500; font-size: clamp(1.05rem, 1.6vw, 1.35rem); letter-spacing: -.015em; white-space: nowrap; }
.marquee li { display: flex; flex: none; align-items: center; height: 56px; }
.marquee img, .cols img { max-width: none; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); opacity: .55; transition: opacity var(--t), filter var(--t); }
.marquee li:hover img, .cols li:hover img { filter: none; opacity: 1; }
.marquee.is-run ul { animation: marquee 100s linear infinite; }
.marquee:hover ul { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Projekty ---------- */
.proj { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.proj > * { grid-column: span 5; }
.proj > :first-child { grid-column: span 7; }
.proj > * { position: relative; display: block; overflow: clip; min-height: clamp(190px, 20vw, 270px); padding: 0; border: 0; border-radius: var(--r); background: var(--ice); color: #fff; text-align: left; }
.proj > :first-child { grid-row: span 2; }
.proj > button { cursor: zoom-in; }
.proj img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.proj > *:hover img { transform: scale(1.04); }
.proj > *::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 37, 69, .8) 0%, rgba(11, 37, 69, 0) 55%); }
.proj .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 2px; padding: var(--pad); }
.proj .cap b { font-weight: 500; font-size: clamp(1.1rem, 1.7vw, 1.4rem); letter-spacing: -.02em; line-height: 1.2; }
.proj .cap span { color: rgba(255, 255, 255, .82); font-size: .9rem; }
@media (max-width: 760px) { .proj { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .proj > *, .proj > :first-child { grid-column: auto; min-height: 0; aspect-ratio: 3 / 2; } }

/* ---------- Kam dál ---------- */
.next ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); padding: 0; list-style: none; border-top: 1px solid var(--line); }
.next a { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; height: 100%; padding: var(--s3) 0 0; transition: color var(--t); }
.next b { font-weight: 500; font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: -.02em; line-height: 1.2; }
.next span { color: var(--stone); font-size: .94rem; }
.next svg { width: 20px; height: 20px; color: var(--blue); transition: transform .3s var(--ease); }
.next a:hover { color: var(--blue); }
.next a:hover svg { transform: translateX(6px); }
@media (max-width: 760px) { .next ul { grid-template-columns: minmax(0, 1fr); border-top: 0; } .next a { padding: var(--s2) 0; border-top: 1px solid var(--line); } .next li:last-child a { padding-bottom: 0; } }

/* ---------- Patička ---------- */
.foot { padding: 0; }
.foot-cta { padding: var(--block); }
.foot-cta-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s3) var(--gap); align-items: center; }
.foot-claim { font-weight: 300; font-size: clamp(2rem, 4.2vw, 3.6rem); letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
.foot-claim small { display: block; margin-top: var(--s2); color: var(--stone); font-size: clamp(1rem, 1.25vw, 1.15rem); letter-spacing: 0; line-height: 1.55; }
.foot-cta-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--gap); justify-self: end; }
.foot-tel { font-weight: 500; font-size: 1.3rem; line-height: 1.2; white-space: nowrap; color: var(--blue); }
.foot-tel small { display: block; color: var(--stone); font-weight: 400; font-size: .8125rem; }
.foot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--gap); padding: var(--block) 0; font-size: .94rem; line-height: 1.75; color: var(--stone); }
.foot-grid b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; }
.foot-grid a:hover { color: var(--blue); }
.foot-logo { width: auto; height: 44px; }
.foot-region { margin-top: var(--s2); max-width: 22em; font-size: .875rem; line-height: 1.55; }
.foot-soc { display: grid; gap: 2px; padding: 0; list-style: none; }
.foot-soc a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.foot-soc svg { width: 18px; height: 18px; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px var(--gap); padding: var(--s2) 0 var(--s3); border-top: 1px solid var(--line); color: var(--stone); font-size: .8125rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px var(--gap); }
.foot::after { content: ""; display: block; height: 4px; background: var(--tri); }
@media (max-width: 900px) { .foot-cta-in { grid-template-columns: minmax(0, 1fr); } .foot-cta-act { justify-self: start; } .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Drobnosti stránek ---------- */
.gal-note { margin-top: var(--s3); }
.dev-more { margin-top: var(--block); }
.dev-more h3 { margin-bottom: var(--s1); }
.showroom-map { margin-top: var(--s3); min-height: 260px; }
.showroom-map iframe { min-height: 260px; }
.emails { margin-top: var(--s3); }
.soc-list { display: grid; }
.teams { display: grid; gap: var(--block); }
.team { width: 100%; border-collapse: collapse; table-layout: fixed; }
.team caption { padding-bottom: var(--s1); text-align: left; color: var(--azure); font-weight: 500; font-size: .875rem; }
.team td { padding: 14px var(--gap) 14px 0; border-top: 1px solid var(--line); vertical-align: top; }
.team tr:last-child td { border-bottom: 1px solid var(--line); }
.team td:first-child { font-weight: 500; }
.team td:nth-child(2) { color: var(--stone); }
.team td:last-child { padding-right: 0; }
.team .link { text-decoration: none; }
.team .link:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .team, .team tbody, .team tr, .team td, .team caption { display: block; }
  .team tr { padding: 14px 0; border-top: 1px solid var(--line); }
  .team tr:last-child { border-bottom: 1px solid var(--line); }
  .team td, .team tr:last-child td { padding: 2px 0; border: 0; }
}
[data-tilt] { transform-style: preserve-3d; transition: transform .45s var(--ease), box-shadow .5s; }

/* ---------- Dialogy ---------- */
dialog { padding: 0; border: 0; color: inherit; }
dialog::backdrop { background: rgba(11, 37, 69, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dlg { width: min(600px, 100vw - 24px); max-height: calc(100dvh - 24px); border-radius: var(--r); background: #fff; box-shadow: 0 40px 90px -40px rgba(0, 78, 158, .5); }
.dlg[open] { animation: dlgIn .4s var(--ease); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.dlg-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 20px 16px 12px 28px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); }
.dlg-head h2 { font-size: 1.7rem; }
.dlg-body { padding: 4px 28px 28px; }
.dlg-intro { margin: 0 0 20px; color: var(--stone); font-size: .94rem; line-height: 1.55; }
@media (max-width: 480px) { .dlg-head { padding-left: 20px; } .dlg-body { padding-inline: 20px; } }
.menu { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; background: rgba(255, 255, 255, .86); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }
.menu[open] { display: flex; flex-direction: column; animation: menuIn .3s var(--ease); }
@keyframes menuIn { from { opacity: 0; } }
.menu-top { display: flex; justify-content: space-between; align-items: center; height: var(--head); margin-top: 10px; padding: 0 calc(var(--gut) - 10px) 0 var(--gut); }
.menu-top img { width: auto; height: 34px; }
.menu nav { flex: 1; overflow-y: auto; padding: 24px var(--gut); }
.menu nav ul { padding: 0; list-style: none; }
.menu nav a { display: block; padding: 12px 0; font-weight: 300; font-size: clamp(1.8rem, 7vw, 2.4rem); letter-spacing: -.03em; line-height: 1.15; }
.menu nav a[aria-current=page] { color: var(--blue); }
.menu-foot { display: grid; gap: 10px; padding: 16px var(--gut) 28px; }
.lb { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; background: #0b2545; color: #fff; }
.lb[open] { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; }
.lb figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 12px; height: 100dvh; padding: 56px 0 20px; }
.lb img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; border-radius: var(--r); }
.lb figcaption { font-size: .875rem; color: rgba(255, 255, 255, .75); text-align: center; }
.lb .icon-btn { justify-self: center; color: #fff; }
.lb .icon-btn:hover { background: rgba(255, 255, 255, .12); }
.lb-close { position: absolute; top: 8px; right: 10px; }
@media (max-width: 600px) { .lb[open] { grid-template-columns: 44px minmax(0, 1fr) 44px; } }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 200; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: var(--r); background: var(--ink); color: #fff; font-size: .875rem; opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Formulář ---------- */
.form { display: grid; gap: 18px; }
.form .g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
@media (max-width: 480px) { .form .g2 { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; }
.field label, .form legend { font-weight: 500; font-size: .875rem; }
.field label span, .hint { color: var(--stone); font-weight: 400; }
.hint { font-size: .8125rem; }
.field input:not([type=file]), .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color var(--t), box-shadow var(--t); }
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--azure); box-shadow: 0 0 0 4px rgba(0, 138, 210, .15); }
.field input[type=file] { font-size: .875rem; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pick { position: relative; }
.pick input { position: absolute; opacity: 0; }
.pick span { display: block; padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--r); font-weight: 500; font-size: .875rem; cursor: pointer; transition: border-color var(--t), background var(--t), color var(--t); }
.pick:hover span { border-color: var(--blue); }
.pick input:checked + span { border-color: var(--blue); background: var(--blue); color: #fff; }
.pick input:focus-visible + span { outline: 2px solid var(--azure); outline-offset: 3px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; line-height: 1.5; color: var(--stone); }
.consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }
.hp { position: absolute; left: -9999px; }
.err { color: #b3261e; font-weight: 500; font-size: .875rem; }
.err:empty { display: none; }
.done { display: grid; gap: 14px; justify-items: start; padding: 8px 0; }
.done h3 { font-weight: 300; font-size: 2rem; letter-spacing: -.03em; }
.notice { padding: 12px 16px; border-radius: var(--r-s); background: var(--ice); font-size: .875rem; }
.form-card { padding: var(--pad-l); }

/* ---------- Pohyb ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vtOut .25s ease both; }
  ::view-transition-new(root) { animation: vtIn .5s var(--ease) both; }
}
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(12px); } }
/* Prvky se při posunu stránky vynoří; linka postupu se dokresluje. Bez podpory je obsah prostě vidět. */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .rv { animation: rvUp linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    .rv-l > * { animation: rvUp linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    .rv-l > :nth-child(2) { animation-range: entry 10% entry 50%; }
    .rv-l > :nth-child(3) { animation-range: entry 20% entry 60%; }
    .rv-l > :nth-child(4) { animation-range: entry 30% entry 70%; }
    .rail::after { animation: railDraw linear both; animation-timeline: view(); animation-range: entry 30% entry 100%; }
    .rail > li::after { animation: dotOn linear both; animation-timeline: view(); animation-range: entry 40% entry 90%; }
    .flow-body::after { animation: flowLine linear both; animation-timeline: view(); animation-range: cover 15% cover 60%; }
    .gallery .ph img, .split .ph img, .shop .ph img { animation: phIn linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes rvUp { from { opacity: 0; transform: translateY(28px); } }
@keyframes railDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dotOn { from { background: var(--line); } }
@keyframes flowLine { from { transform: scaleY(0); } }
@keyframes phIn { from { transform: scale(1.12); } }
@media (max-width: 760px) { @keyframes railDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  .rise > span, .hero .k, .hero .lead, .hero .actions, .hero-entries, .hero-media { opacity: 1; transform: none; }
}

/* ---------- Konfigurátory koupelny a kuchyně (sdílené třídy .kc-*, .kp-*, .kb-*) ---------- */
.kc { --top: calc(var(--head) + 20px); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); gap: clamp(24px, 3.5vw, 56px); align-items: start; }
.kc-stage { position: sticky; top: var(--top); display: grid; gap: 12px; min-width: 0; }
.kc-view { position: relative; height: min(calc(100svh - var(--top) - 96px), 660px); min-height: 340px; overflow: hidden; background: #eef1f3; isolation: isolate; }
.kc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; outline: 0; }
.kc-canvas:active { cursor: grabbing; }
.kc-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--blue-2); }
.kc-plan { position: absolute; inset: 0; padding: 64px 20px 20px; background: #fff; border: 1px solid var(--line); }
.kc-plan svg { width: 100%; height: 100%; overflow: visible; user-select: none; -webkit-user-select: none; }
.kc[data-view="3d"] .kc-plan, .kc[data-view=plan] .kc-canvas, .kc[data-view=plan] .kc-zoom { display: none; }
.kc-bar { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; }
.kc-bar > * { pointer-events: auto; }
.kc-vt { display: flex; padding: 3px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.kc-vt button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font-weight: 500; font-size: .8125rem; color: var(--stone); }
.kc-vt button[aria-pressed=true] { background: var(--blue); color: #fff; }
.kc-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.kc-zoom button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font-weight: 400; font-size: 1.25rem; line-height: 1; }
.kc-zoom button:hover { background: var(--tint); }
.kc-tip { position: absolute; left: 0; top: 0; z-index: 5; display: grid; gap: 1px; max-width: 250px; padding: 9px 13px; border-radius: 8px; background: var(--ink); color: #fff; font-size: .8125rem; line-height: 1.4; pointer-events: none; }
.kc-tip b { font-weight: 500; }
.kc-tip span { color: var(--sky); }
.kc-under { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; min-width: 0; min-height: 36px; }
.kc-cams { display: flex; flex-wrap: wrap; gap: 6px; }
.kc-cams button { min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: none; font-weight: 500; font-size: .8125rem; }
.kc-cams button:hover { border-color: var(--blue); }
.kc-cams button[aria-pressed=true] { border-color: var(--blue); }
.kc[data-view=plan] .kc-cams { visibility: hidden; }
.kc-status { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font-size: .8125rem; color: var(--stone); text-align: left; }
.kc-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.kc-status.warn::before { background: var(--warn); }
.kc-status:hover { color: var(--ink); }
.kc.no-gl .kc-vt, .kc.no-gl .kc-cams, .kc.no-gl .kc-zoom { display: none; }
.kc-side { min-width: 0; }
.kc-steps { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.kc-steps button { position: relative; flex: 1 1 auto; min-width: 0; display: grid; align-content: start; gap: 3px; justify-items: start; padding: 0 6px 12px 0; border: 0; background: none; font-weight: 500; font-size: .8125rem; line-height: 1.25; color: var(--stone); text-align: left; }
.kc-steps i { display: block; height: 1.25em; font-style: normal; color: var(--blue); }
.kc-steps i svg { width: 15px; height: 15px; }
.kc-steps button::after { content: ""; position: absolute; left: 0; right: 6px; bottom: -1px; height: 2px; background: transparent; }
.kc-steps button:hover, .kc-steps button[aria-current=step] { color: var(--ink); }
.kc-steps button[aria-current=step]::after { background: var(--blue); }
.kc-panel { padding: 26px 0 8px; }
.kc-h { font-weight: 600; font-size: 1.6rem; letter-spacing: -.025em; line-height: 1.15; }
.kc-lead { margin: 8px 0 26px; color: var(--stone); font-size: .94rem; line-height: 1.55; }
.kc-g { display: grid; gap: 12px; margin: 0 0 30px; scroll-margin-top: calc(var(--head) + 24px); }
.kc-g legend { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; margin-bottom: 12px; font-weight: 600; font-size: .94rem; }
.kc-g legend output { color: var(--stone); font-weight: 400; font-size: .8125rem; text-align: right; }
.kc-hint { color: var(--stone); font-size: .8125rem; line-height: 1.5; }
.kc-flash { animation: kcFlash 1.4s ease-out; }
@keyframes kcFlash { 0%, 30% { box-shadow: 0 0 0 10px rgba(160, 218, 247, .45); background: rgba(160, 218, 247, .45); } 100% { box-shadow: 0 0 0 10px transparent; background: transparent; } }
.kc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kc-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kc-card { position: relative; display: grid; align-content: start; gap: 3px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s; }
.kc-card input, .kc-seg input, .kc-sw input, .kc-chips input, .kc-tg input { position: absolute; opacity: 0; pointer-events: none; }
.kc-card svg { width: 46px; height: 31px; margin-bottom: 8px; color: var(--ink); }
.kc-card b { font-weight: 500; font-size: .875rem; line-height: 1.3; }
.kc-card small { color: var(--stone); font-size: .78rem; line-height: 1.4; }
.kc-card:hover { border-color: var(--blue); }
.kc-card:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.kc-card:has(input:disabled) { opacity: .4; cursor: default; pointer-events: none; }
.kc-card:has(input:focus-visible), .kc-seg label:has(input:focus-visible) span, .kc-chips label:has(input:focus-visible), .kc-tg:has(input:focus-visible) i, .kc-sw input:focus-visible + span { outline: 2px solid var(--blue-2); outline-offset: 3px; }
.kc-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.kc-seg label { position: relative; cursor: pointer; }
.kc-seg span { display: block; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-weight: 500; font-size: .8125rem; line-height: 1.2; transition: border-color .15s, background .15s, color .15s; }
.kc-seg label:hover span { border-color: var(--blue); }
.kc-seg input:checked + span { border-color: var(--blue); background: var(--blue); color: #fff; }
.kc-seg input:disabled + span { opacity: .35; cursor: default; }
.kc-sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 14px 8px; }
.kc-sw label { position: relative; display: grid; align-content: start; gap: 7px; cursor: pointer; }
.kc-sw span { display: block; aspect-ratio: 1; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(18, 26, 35, .14); }
.kc-sw input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue); }
.kc-sw small { color: var(--stone); font-size: .7rem; line-height: 1.3; }
.kc-sw small b { display: block; color: var(--ink); font-weight: 500; font-size: .75rem; }
.kc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kc-chips label { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border: 1px solid var(--line); border-radius: 999px; font-weight: 500; font-size: .8125rem; cursor: pointer; transition: border-color .15s; }
.kc-chips i { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(18, 26, 35, .16); }
.kc-chips label:hover { border-color: var(--blue); }
.kc-chips label:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.kc-tg { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 3px 0; cursor: pointer; }
.kc-tg i { position: relative; flex: none; width: 42px; height: 24px; margin-top: 1px; border-radius: 999px; background: #c5cdd4; transition: background .15s; }
.kc-tg i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.kc-tg input:checked + i { background: var(--blue); }
.kc-tg input:checked + i::after { transform: translateX(18px); }
.kc-tg span { display: grid; gap: 1px; }
.kc-tg b { font-weight: 500; font-size: .875rem; line-height: 1.4; }
.kc-tg small { color: var(--stone); font-size: .78rem; line-height: 1.4; }
.kc-num { display: grid; gap: 6px; }
.kc-num + .kc-num { margin-top: 6px; }
.kc-num-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kc-num-h label { font-size: .875rem; }
.kc-val-w { display: inline-flex; align-items: baseline; gap: 4px; font-weight: 500; font-size: .94rem; }
.kc-val { width: 4.4ch; padding: 2px 0; border: 0; border-bottom: 1px solid #b3bbc2; border-radius: 0; background: none; text-align: right; appearance: textfield; -moz-appearance: textfield; }
.kc-val:focus { outline: 0; border-bottom-color: var(--blue); }
.kc-val::-webkit-inner-spin-button, .kc-val::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.kc-num-r { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 10px; }
.kc-num-r button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: none; font-size: 1.1rem; line-height: 1; }
.kc-num-r button:hover { border-color: var(--blue); }
.kc-num-r input { width: 100%; accent-color: var(--blue); }
.kc-num small { color: var(--stone); font-size: .78rem; }
.kc-ops { display: grid; gap: 10px; padding: 0; list-style: none; }
.kc-op { display: grid; gap: 12px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 10px; }
.kc-op.sel { border-color: var(--blue); }
.kc-op.bad { border-color: var(--warn); }
.kc-op-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kc-op-h b { font-weight: 500; font-size: .94rem; }
.kc-op-h button { display: grid; place-items: center; width: 34px; height: 34px; margin: -6px -8px -6px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--stone); }
.kc-op-h button:hover { background: var(--tint); color: var(--ink); }
.kc-op-h svg { width: 18px; height: 18px; }
.kc-op-f { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.kc-op-f label { display: grid; gap: 4px; color: var(--stone); font-size: .75rem; }
.kc-op-f input, .kc-op-f select { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid #c3cbd2; border-radius: 8px; background: #fff; color: var(--ink); font-size: .875rem; }
.kc-op-f input:focus, .kc-op-f select:focus { outline: 0; border-color: var(--blue); }
.kc-add { display: flex; flex-wrap: wrap; gap: 8px; }
.kc-sum dl { margin-bottom: 28px; border-bottom: 1px solid var(--line); font-size: .875rem; line-height: 1.5; }
.kc-sum dl div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 2px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.kc-sum dt { font-weight: 500; }
.kc-sum dd { color: var(--stone); }
.kc-sum h4 { margin: 0 0 12px; font-weight: 600; font-size: .94rem; }
.kc-checks { display: grid; gap: 9px; margin-bottom: 28px; padding: 0; list-style: none; }
.kc-checks li { position: relative; padding-left: 20px; font-size: .875rem; line-height: 1.5; }
.kc-checks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.kc-checks .warn::before { background: var(--warn); }
.kc-checks .info::before { background: #b3bbc2; }
.kc-kus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; margin-bottom: 30px; padding: 0; list-style: none; }
.kc-kus li { color: var(--stone); font-size: .78rem; line-height: 1.35; }
.kc-kus b { display: block; color: var(--blue); font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kc-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.kc-nav { position: sticky; bottom: 0; z-index: 4; display: flex; gap: 10px; padding: 14px 0 18px; background: linear-gradient(to top, #fff 78%, rgba(255, 255, 255, 0)); }
.kc-nav .btn:last-child { flex: 1; }
/* půdorys */
.kp-room { fill: #fff; stroke: none; }
.kp-wall { stroke: var(--ink); stroke-width: 9; stroke-linecap: square; }
.kp-gap { stroke: #fff; stroke-width: 11; }
.kp-glass { stroke: var(--blue-2); stroke-width: 3; }
.kp-leaf { fill: none; stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.kp-arc { fill: none; stroke: var(--stone); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.kp-op { cursor: grab; touch-action: none; }
.kp-op .kp-hit { stroke: transparent; stroke-width: 44; }
.kp-op.sel .kp-glass, .kp-op.sel .kp-leaf { stroke: var(--blue); stroke-width: 2.4; }
.kp-op.sel .kp-glass { stroke-width: 5; }
.kp-op.bad .kp-glass, .kp-op.bad .kp-leaf { stroke: var(--warn); }
.kp-let { fill: var(--blue); font: 600 15px var(--font); }
.kp-top { fill: #e9edf0; stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.kp-m { fill: none; stroke: rgba(18, 26, 35, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.kp-m.tall { fill: rgba(18, 26, 35, .14); stroke: var(--ink); }
.kp-ico { fill: #fff; stroke: var(--ink); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.kp-t { fill: var(--ink); font: 500 10px var(--font); paint-order: stroke; stroke: rgba(255, 255, 255, .8); stroke-width: 3px; stroke-linejoin: round; }
.kp-dim line { stroke: var(--stone); stroke-width: 1; vector-effect: non-scaling-stroke; }
.kp-dim text, text.kp-dim { fill: var(--stone); font: 500 12.5px var(--font); }
.kp-tri { fill: rgba(0, 138, 210, .07); stroke: var(--blue-2); stroke-width: 1.2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.kp-stool { fill: #fff; stroke: var(--stone); stroke-width: 1; vector-effect: non-scaling-stroke; }
.kp-faint { opacity: .35; }
/* konfigurátor koupelny: vybavení v půdorysu a drobnosti navíc (zbytek sdílí s kuchyní) */
.kb-it { cursor: grab; touch-action: none; }
.kb-it:active { cursor: grabbing; }
.kb-hit { fill: transparent; stroke: none; }
.kb-s { fill: #e9edf0; stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.kb-w { fill: #fff; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.kb-sp { fill: rgba(160, 218, 247, .38); stroke: var(--blue-2); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.kb-l { stroke: rgba(18, 26, 35, .45); stroke-width: 1; vector-effect: non-scaling-stroke; }
.kb-t { fill: var(--ink); font-family: var(--font); font-weight: 500; paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-linejoin: round; pointer-events: none; }
.kb-zone { fill: rgba(0, 138, 210, .08); stroke: var(--blue-2); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.kb-it.sel .kb-s, .kb-it.sel .kb-sp { stroke: var(--blue); stroke-width: 2.4; }
.kb-it.bad .kb-s, .kb-it.bad .kb-sp { fill: rgba(178, 106, 0, .16); stroke: var(--warn); stroke-width: 2; }
.kc-op-h small { margin-left: auto; color: var(--stone); font-size: .8125rem; }
.kc-op .kc-tg { padding-top: 0; }
.kb-nk { fill: rgba(18, 26, 35, .5); stroke: none; }
.kb-it.bad .kb-nk { fill: var(--warn); }
.kc-img { width: min(940px, 100vw - 24px); }
.kc-img img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
@media (max-width: 1100px) {
  .kc { grid-template-columns: minmax(0, 1.3fr) minmax(330px, 1fr); }
  .kc-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .kc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kc-stage { top: var(--head); z-index: 40; margin-inline: calc(var(--gut) * -1); padding: 0 var(--gut) 10px; background: #fff; border-bottom: 1px solid var(--line); }
  .kc-view { height: clamp(230px, 38svh, 400px); min-height: 0; margin-inline: calc(var(--gut) * -1); }
  .kc-plan { padding: 60px 12px 12px; border-inline: 0; }
  .kc-under { flex-wrap: nowrap; }
  .kc-cams { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .kp-dim text, text.kp-dim { font-size: 17px; }
  .kp-let { font-size: 19px; }
  .kp-t { font-size: 13px; }
  .kc-cams::-webkit-scrollbar { display: none; }
  .kc-cams button { flex: none; }
  .kc[data-view=plan] .kc-cams { display: none; }
  .kc-status { flex: none; }
  .kc-side { padding-top: 22px; }
  .kc-nav { position: static; }
}
@media (max-width: 600px) {
  .kc-zoom { display: none; }
  .kc-steps span { display: none; }
  .kc-steps button { flex: 0 0 auto; min-width: 34px; }
  .kc-steps button[aria-current=step] { flex: 1 1 auto; }
  .kc-steps button[aria-current=step] span { display: block; }
  .kc-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-kus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-sum dl div { grid-template-columns: minmax(0, 1fr); }
}