/* ──────────────────────────────────────────────────────────────────────────
   Sykora — moderný redesign, editorial / cinematic
   Inspired by maisons (Vuitton, Hermès, Bulthaup, Boffi)
   Warm-dark + cream + Sykora red, oversized serif display,
   slow scroll reveals, video heroes, custom cursor.
   ────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   Display serif — Tiempos Headline (self-hosted, assets/vendor/tiempos/).
   Replaces Fraunces as the `--serif` display face site-wide (2026-06-15).
   `--sans` AND `--mono` are both Inter (2026-08-13): Tiempos was tried on
   --sans that day and reverted the same day; JetBrains Mono was dropped, so
   eyebrows/meta are now Inter with their existing uppercase + letter-spacing.
   The Google <link> in all 89 shells was retyped to match: JetBrains Mono
   removed (nothing referenced it any more) and Inter gained **700**, which the
   old link never loaded even though .energy-chip asks for it — that badge had
   been faux-bold the whole time. Fraunces stays in the link purely as the
   documented --serif fallback. That <link> is hand-written per shell, NOT
   managed by inject-analytics.mjs — change it with a sweep over *.html.
   8 faces = weights 300/400/500/600, each with a real drawn italic. The 500/600
   italics were added 2026-08-13 — the stylesheet has 45 `font-style: italic`
   rules and several inherit their weight, so without them the browser fakes
   those two by slanting the upright (worse than the drawn cut: italicAngle
   -12°, genuinely different letterforms). A declared-but-unused @font-face is
   never downloaded, so they cost nothing when nothing asks for them.
   NOTE this is the HEADLINE cut, drawn for LARGE sizes — that is the FAMILY,
   not the weight. Its ink extent is 1.001em (asc 783 + desc 218 / 1000 upem),
   which is why display line-heights below 1.0 collide — see .display-l.
   Tiempos TEXT is the separate companion family for body copy and is NOT on
   this box (~/incoming/tiempos-headline-cufonfonts.zip = 12 Headline cuts
   only); getting it is a licence purchase, not a conversion.
   Glyph coverage verified for cs/sk/hu/de/en + typographic quotes (386 cmap
   entries, unsubsetted) — safe for all 5 site languages.
   To REVERT: restore `--serif` to 'Fraunces' (the Google <link> in every *.html
   still loads Fraunces, Inter and JetBrains Mono, so all three keep working).
   ────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Tiempos Headline';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('../vendor/tiempos/tiempos-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Tiempos Headline';
  font-style: italic; font-weight: 300; font-display: swap;
  src: url('../vendor/tiempos/tiempos-300-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Tiempos Headline';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../vendor/tiempos/tiempos-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Tiempos Headline';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('../vendor/tiempos/tiempos-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Tiempos Headline';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../vendor/tiempos/tiempos-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Tiempos Headline';
  font-style: italic; font-weight: 500; font-display: swap;
  src: url('../vendor/tiempos/tiempos-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Tiempos Headline';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../vendor/tiempos/tiempos-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Tiempos Headline';
  font-style: italic; font-weight: 600; font-display: swap;
  src: url('../vendor/tiempos/tiempos-600-italic.woff2') format('woff2');
}

:root {
  /* Surface */
  --bg:           #1c1813;     /* softer warm-dark — site-wide base */
  --bg-paper:     #f3ede2;     /* cream paper sections */
  --bg-panel:     #f8f6f1;     /* off-white product/catalog panels (spotřebiče katalog, košík, e-shop pásik) */
  --bg-elev-1:    #262119;
  --bg-elev-2:    #312a22;
  --line:         #2a2521;
  --line-paper:   #d8cdb8;
  --line-strong:  #423b32;

  /* Text */
  --text:         #f5eee0;
  --text-paper:   #1a1612;
  --text-mute:    #a89e8a;
  --text-mute-paper: #6b5f4d;
  --text-dim:     #6f6555;

  /* Brand */
  --brand:        #c8262c;     /* Sykora red, slightly deeper */
  --brand-hi:     #e23b40;
  --gold:         #c0a878;

  /* Layout */
  --nav-h:        80px;
  --container:    1560px;
  --gutter:       40px;

  /* Corner radius — site-wide rounded corners. Tune here to dial the whole
     site rounder/sharper in one place. Full-bleed surfaces (100vw heroes,
     st-w-full media) deliberately stay square. */
  --r-xs:         6px;    /* badges, chips, swatches, sliders, small inputs */
  --r-sm:         10px;   /* compact panels, menus */
  --r-md:         14px;   /* cards, media surfaces, thumbnails, maps */
  --r-lg:         20px;   /* large feature cards / modals */

  /* Type */
  --serif:        'Tiempos Headline', 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --sans:         'Inter', 'Söhne', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:         'Inter', 'Söhne', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

@media (max-width: 720px) {
  :root { --gutter: 20px; --nav-h: 64px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
/* Reserve the vertical-scrollbar gutter permanently so the layout width never
   changes when scroll is locked (cart/menu drawer → body overflow:hidden, which
   Lenis mirrors as html `overflow:hidden` via .lenis-stopped, collapsing the
   scrollbar). Without this the fixed nav's centered logo + centered page content
   jolt sideways by the scrollbar width on every overlay open. The existing
   `overflow-x: clip` below keeps 100vw full-bleed surfaces from overflowing into
   the reserved gutter. */
html { scrollbar-gutter: stable; }
/* Lenis smooth scroll (desktop, loaded by setupSmoothScroll). On touch / when the
   CDN fails, none of these classes are added and native scroll + the CSS smooth
   above stay in effect. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }   /* Lenis owns scrolling — disable CSS smooth so they don't fight */
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  cursor: auto;   /* native cursor — custom cursor removed 2026-06-25 */
  overflow-x: clip;     /* Guard against full-bleed (100vw) breakouts when a
                           vertical scrollbar is present, e.g. catalog chip
                           rows on /spotrebice + /pracovni-desky. Must be `clip`,
                           NOT `hidden`: `hidden` turns body into a scroll
                           container and breaks `position: sticky` (the home
                           pinned horizontal scroll). `clip` clips without
                           establishing a scroll container, so sticky survives. */
}
/* One continuous backdrop for the whole site — a very subtle brand-red
   ambient bloom so the colour carries through and dark sections never seam.
   The bloom lives on a FIXED, GPU-composited pseudo-layer (below) instead of
   `background-attachment: fixed`: the latter forced a full-viewport MAIN-THREAD
   repaint on every scroll frame (measured as the dominant scroll-jank source —
   GPU sat idle while the CPU repainted the bloom). A promoted fixed layer is
   held by the compositor and never repaints on scroll. */
body { background: var(--bg); }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;              /* behind all content, above the body base colour */
  pointer-events: none;
  background:
    radial-gradient(1080px 760px at 22% 13%, rgba(200,38,44,0.13) 0%, transparent 70%),
    radial-gradient(960px 720px at 82% 82%, rgba(200,38,44,0.10) 0%, transparent 70%);
  transform: translateZ(0); /* own compositor layer — no per-scroll repaint */
}
@media (hover: none), (pointer: coarse) {
  html, body { cursor: auto; }
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
@media (hover: none) { button { cursor: pointer; } }
input, textarea, select { font: inherit; color: inherit; }

/* ── Custom cursor — frosted glass champagne ────────────────────────────── */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px;
  background: rgba(245, 238, 224, 0.95);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 320ms cubic-bezier(.22,1,.36,1),
              height 320ms cubic-bezier(.22,1,.36,1),
              background 320ms ease,
              border-color 320ms ease,
              opacity 240ms ease;
  /* dark border (+ a hairline dark outline) so the cream dot stays visible on the
     white/cream surfaces too — not just on the dark base; the cream glow below
     keeps its soft look on the dark pages */
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.22), 0 0 18px rgba(245, 238, 224, 0.18);
}
.cursor.hover {
  width: 76px; height: 76px;
  background: rgba(245, 238, 224, 0.08);
  border-color: rgba(245, 238, 224, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 24px rgba(0,0,0,0.18);
}
.cursor.hide  { opacity: 0; }
.cursor .label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245, 238, 224, 0.95);
  opacity: 0; transition: opacity 220ms ease;
  font-weight: 500;
  /* Keep any label on a single line — multi-word data labels (studio /
     category names) must never wrap into a clipped block inside the 76px
     blob. Static UI labels are kept single-word; a faint shadow keeps the
     rare long one readable when it overhangs the circle. */
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.cursor.hover .label { opacity: 1; }

/* ── Typography ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; letter-spacing: -0.018em; }

.display-xl {
  font-family: var(--serif);
  font-size: clamp(72px, 14vw, 220px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  font-weight: 300;
}
/* line-height NESMÍ klesnout pod 1.0 (2026-08-13). Tiempos Headline má ink
   extent 1.001em (ascender 783 + descender 218 / 1000 upem), takže při 0.92 byl
   rozestup řádků o 10,5 px menší, než kolik kresba zabírá — descender jednoho
   řádku pak protnul ascender následujícího. Naměřeno na home hero „Interiéry na
   míru od českého výrobce": 'y' z 1. řádku přes 'd' z 2. řádku, horizontální
   překryv 32,4 px. Nejde o mezeru mezi bloky (tu řeší margin u .eyebrow níž) —
   je to UVNITŘ nadpisu mezi jeho vlastními řádky, kam margin nedosáhne.
   Text nadpisu je editovatelný v adminu, takže to nejde spravit ručním zalomením
   — musí to držet line-height. Utáhneš-li to zpátky, kolize se vrátí.
   Práh je 1.001 (poměr, takže platí při každé velikosti z toho clampu); 1.01 ho
   čistí o 1,2 px. Přesně 1.0 nechává 0,1 px dotyk — neviditelný, ale kontrola
   by ho pořád hlásila. */
.display-l {
  font-family: var(--serif);
  font-size: clamp(56px, 9vw, 144px);
  line-height: 1.01;
  letter-spacing: -0.03em;
  font-weight: 300;
}
.display-m {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-weight: 300;
}
.italic { font-style: italic; font-weight: 300; }

/* Velké nadpisy drží jeden klasický řez (2026-08-11).
   `<span class="italic">` uvnitř displejového nadpisu se dřív sázel kurzívou
   („Začněte vlastní *kapitolu*."). Kurzíva zůstává tam, kde je to typograficky
   drobný akcent — v běžném textu (admin `*hvězdičky*` v odstavcích), v cenách
   a v malých popiscích; velká serifová typografie ji nemá. Nadpisy s vlastní
   třídou (.wt-cine-title, .vy-headline h2, …) mají `font-style: normal` přímo
   u sebe, protože jejich selektor je specifičtější než tenhle. */
.display-xl .italic,
.display-l .italic,
.display-m .italic,
.display-s .italic,
h1 .italic,
h2 .italic { font-style: normal; }

/* Displejové stupně běží na line-height < 1, takže háčky a čárky (Ř, Č, ě)
   kreslí NAD svým řádkovým boxem a narážejí do eyebrow, který sedí těsně nad
   nadpisem — boxy se nepřekrývají, překrývají se glyfy. Každý eyebrow přímo nad
   displejovým nadpisem proto dostane skutečnou mezeru. (akce.html si drží vlastní
   variantu téhož ve svém bloku.) */
.eyebrow + .display-xl,
.eyebrow + .display-l,
.eyebrow + .display-m,
.eyebrow + h1,
.eyebrow + h2 { margin-top: 24px; }

h2 { font-size: clamp(36px, 5vw, 72px); line-height: 1.05; }
h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 400;
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow.brand { color: var(--brand-hi); }
.eyebrow::before {
  content: ''; display: inline-block;
  width: 28px; height: 1px; background: currentColor;
}
.eyebrow.no-line::before { display: none; }

.chapter-no {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-mute);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 140px 0; position: relative; }
.section-sm { padding: 80px 0; }
@media (max-width: 740px) { .section { padding: 80px 0; } }

.paper { background: var(--bg-paper); color: var(--text-paper); }
.paper .eyebrow { color: var(--text-mute-paper); }
.paper a { color: var(--text-paper); }

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1100ms cubic-bezier(.22,1,.36,1), transform 1100ms cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 120ms; }
.reveal-delay-2 { transition-delay: 240ms; }
.reveal-delay-3 { transition-delay: 360ms; }

/* image-reveal — used only for hero / chapter / pdp-hero / atelier (NOT product cards) */
.image-reveal { position: relative; overflow: hidden; }
.image-reveal::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: var(--bg);
  transform: translateY(0);
  transition: transform 1300ms cubic-bezier(.76,0,.24,1);
}
.image-reveal.in::after, .image-reveal.always-shown::after { transform: translateY(-101%); }
.image-reveal img, .image-reveal video {
  transform: scale(1.06);
  transition: transform 1800ms cubic-bezier(.22,1,.36,1);
}
.image-reveal.in img, .image-reveal.in video, .image-reveal.always-shown img, .image-reveal.always-shown video { transform: scale(1); }

/* ── Glassmorphism utility ──────────────────────────────────────────────── */
.glass {
  background: rgba(245, 238, 224, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 238, 224, 0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 10px 30px rgba(0,0,0,0.35);
}
.glass-dark {
  background: rgba(10, 9, 8, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
}
.glass-paper {
  background: rgba(243, 237, 226, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(216, 205, 184, 0.6);
  color: var(--text-paper);
}

/* ── Nav ────────────────────────────────────────────────────────────────── */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 var(--gutter);
  transition: background 400ms ease, backdrop-filter 400ms ease, border-color 400ms ease;
  border-bottom: 1px solid transparent;
}
.nav.over-dark    { color: var(--text); }
/* At the top over a bright media hero (home bedroom/wood, family photo, video)
   the nav links blend into the image. A soft top-down vignette — taller than the
   bar itself so the menu row sits in real shade, not the fading edge — plus
   brighter links with a shadow, keeps the menu readable over any hero.
   All removed once .scrolled kicks in (the blur bar takes over). */
.nav.over-dark:not(.scrolled)::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 176px;
  pointer-events: none;
  /* dark enough up top that the nav row sits on a near-scrolled-bar backdrop —
     this is what lets the thin Fraunces logo read as full bright cream, same as
     when scrolled; fades out by the bottom so the hero still breathes below */
  background: linear-gradient(180deg,
    rgba(10,9,8,0.66) 0%, rgba(10,9,8,0.44) 36%,
    rgba(10,9,8,0.14) 70%, rgba(10,9,8,0) 100%);
}
.nav.over-dark:not(.scrolled) .nav-links a { color: rgba(245,238,224,0.9); text-shadow: 0 1px 16px rgba(0,0,0,0.55); }
/* logo stays full-bright cream — its thin Fraunces serifs were bleeding into the
   hero (only ~half brightness on a bright frame), so give them a tight dark halo
   to pop the strokes; do NOT lower the color/opacity (that's what looked dim before) */
/* logo needs no special treatment now that nav content sits above the vignette —
   it renders the same full cream as the scrolled bar; just a whisper of halo for
   the brightest hero frames, no weight/stroke change */
.nav.over-dark:not(.scrolled) .brand-mark { text-shadow: 0 1px 10px rgba(0,0,0,0.4); }
.nav.over-dark:not(.scrolled) .nav-menu-btn { color: rgba(245,238,224,0.92); text-shadow: 0 1px 16px rgba(0,0,0,0.55); }
.nav.over-dark:not(.scrolled) .brand-logo { filter: drop-shadow(0 1px 9px rgba(0,0,0,0.45)); }
.nav.over-dark:not(.scrolled) .nav-actions button { filter: drop-shadow(0 1px 10px rgba(0,0,0,0.5)); }
.nav.over-light   { color: var(--text-paper); }
.nav.over-light .nav-links a { color: var(--text-mute-paper); }
.nav.scrolled {
  background: rgba(10,9,8,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(255,255,255,0.08);
  color: var(--text);
}
.nav.scrolled.over-light { background: rgba(243,237,226,0.72); border-bottom-color: rgba(216,205,184,0.7); color: var(--text-paper); }
.nav.scrolled.over-light .nav-links a { color: var(--text-mute-paper); }
.nav.scrolled.over-light .nav-links a:hover { color: var(--text-paper); }

.nav-inner {
  /* full-bleed (only the .nav's gutter padding insets it) so the Menu trigger
     hugs the far left and the language/actions hug the far right */
  width: 100%; max-width: none; margin: 0;
  /* three tracks so the logo (middle) stays perfectly centered regardless of
     the menu-trigger / actions widths on either side */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 24px;
  /* keep all nav content above the over-dark vignette ::before — without this the
     non-positioned logo paints UNDER the scrim and reads dark, while the
     position:relative menu links paint over it and stay bright */
  position: relative; z-index: 1;
}

/* ── Primary-nav "Menu" trigger (left) + dropdown panel ──────────────────── */
.nav-menu-zone { position: relative; justify-self: start; }
.nav-menu-btn {
  appearance: none; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 6px; color: inherit; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; transition: opacity .2s ease;
}
.nav-menu-btn:hover { opacity: .65; }
.nav-menu-ico { width: 20px; height: 20px; display: block; }
.nav-menu-word { line-height: 1; }

/* The menu is a left-side DRAWER that slides in like the cart mini-drawer:
   a dark-glass panel off the left edge + a backdrop overlay. */
.nav-menu-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.7);
  opacity: 0; pointer-events: none;
  transition: opacity 420ms ease;
}
.nav-menu-overlay.open { opacity: 1; pointer-events: auto; }

.nav-menu-panel {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 201;
  width: min(420px, 100%);
  background: rgba(14, 11, 8, 0.78);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 520ms cubic-bezier(.22,1,.36,1), border-radius 280ms ease;
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow: 40px 0 80px rgba(0,0,0,0.4);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  overflow: hidden;
}
.nav-menu-panel.open { transform: translateX(0); }

/* The drawer and its hover flyout are two BODY SIBLINGS that butt together at
   x=420 into what the eye reads as ONE panel, so only the OUTER right edge may
   be round. With the drawer keeping its own rounded right corners the seam
   showed a notch and the assembly ended in the flyout's square edge — read as
   "the menu loses its rounded corners as soon as I hover a submenu". So the
   drawer goes flat while the flyout is open and hands the rounding over.
   `:has()` (already used 6x in this sheet) because the flyout is appended AFTER
   the drawer in buildNav and CSS has no previous-sibling combinator. */
body:has(#nav-mm-fly.open) .nav-menu-panel { border-radius: 0; }

/* Hover flyout — the product world's submenu rolls out BESIDE the drawer, from
   behind it (z below the drawer). Only reachable ≥981px (drawer is desktop-only),
   width clamped so it never overflows a narrow desktop. */
.nav-mm-fly {
  position: fixed; top: 0; bottom: 0; left: min(420px, 100%); z-index: 200;
  width: min(380px, calc(100vw - 460px));
  /* near-opaque + light blur: animating a heavy backdrop-blur panel stutters the
     slide-in, so keep the glass cheap here. */
  background: rgba(12, 9, 7, 0.96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  /* Hairline on the three OUTER edges. The radius was always here, but a
     rgba(12,9,7,.96) panel on a dark hero behind a 70% black scrim has no
     contrast to draw a corner with, so the flyout read as square. The border
     traces the arc; the left edge stays borderless because the drawer covers it. */
  border: 1px solid rgba(255,255,255,0.08); border-left: 0;
  box-shadow: 40px 0 80px rgba(0,0,0,0.4);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 96px 30px 32px; overflow-y: auto;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateX(-14px); pointer-events: none;
  transition: opacity .28s ease, transform .42s cubic-bezier(.22,1,.36,1);
}
.nav-mm-fly.open { opacity: 1; transform: none; pointer-events: auto; }

/* Both nav surfaces scroll on a short desktop window — the drawer's own list runs
   ~742px and a world's flyout ~773px against a 700px frame — and both did it with
   the browser's DEFAULT scrollbar: a fat grey OS bar cutting through a dark-glass
   editorial panel. Same thin cream pill the rest of the site already uses
   (`.sel-menu`, `.bk-body`, `.sb-submenu`). The transparent border + padding-box
   clip insets the thumb so the panel's own rounded corner never slices it, and
   `overscroll-behavior: contain` stops the page scrolling on from the drawer's end. */
.nav-menu-scroll,
.nav-mm-fly {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,238,224,0.28) transparent;
}
.nav-menu-scroll::-webkit-scrollbar,
.nav-mm-fly::-webkit-scrollbar { width: 10px; }
.nav-menu-scroll::-webkit-scrollbar-track,
.nav-mm-fly::-webkit-scrollbar-track { background: transparent; }
.nav-menu-scroll::-webkit-scrollbar-thumb,
.nav-mm-fly::-webkit-scrollbar-thumb {
  background: rgba(245,238,224,0.22); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
  transition: background .2s ease;
}
.nav-menu-scroll::-webkit-scrollbar-thumb:hover,
.nav-mm-fly::-webkit-scrollbar-thumb:hover {
  background: rgba(245,238,224,0.40); background-clip: padding-box;
}
.nav-mm-fly .nav-mm-back { display: none; }
.nav-mm-fly .nav-mm-title { font-size: 26px; }
/* previews pushed to the very bottom of the flyout, under a "Doporučení" label */
.nav-mm-recs { margin-top: auto; padding-top: 24px; }
.nav-mm-recs-lbl { display: block; font: 500 11px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-mute); padding-bottom: 14px; }

/* ── Header search overlay ─────────────────────────────────────────────── */
.nav-search-overlay {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(0,0,0,0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 320ms ease;
  display: flex; justify-content: center;
  padding: clamp(70px, 12vh, 140px) var(--gutter) 40px;
  overflow-y: auto;
}
.nav-search-overlay.open { opacity: 1; pointer-events: auto; }
.nav-search-panel {
  width: min(720px, 100%);
  align-self: flex-start;
  background: rgba(18, 14, 10, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px rgba(0,0,0,0.5);
  overflow: hidden;
  transform: translateY(-14px); opacity: 0;
  transition: transform 380ms cubic-bezier(.22,1,.36,1), opacity 380ms ease;
}
.nav-search-overlay.open .nav-search-panel { transform: translateY(0); opacity: 1; }
.ns-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.ns-ico { width: 22px; height: 22px; color: rgba(255,255,255,0.55); flex: 0 0 auto; }
.ns-input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--text);
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: -0.01em;
}
.ns-input::placeholder { color: rgba(255,255,255,0.34); }
.ns-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ns-close {
  flex: 0 0 auto; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.6); border-radius: 999px;
  transition: color 200ms ease, background 200ms ease;
}
.ns-close:hover { color: #fff; background: rgba(255,255,255,0.08); }
.ns-close svg { width: 18px; height: 18px; }
.ns-results { max-height: min(60vh, 560px); overflow-y: auto; padding: 8px 10px 14px; }
.ns-hint, .ns-empty {
  padding: 34px 16px; text-align: center;
  color: rgba(255,255,255,0.45);
  font-size: 14px;
}
.ns-empty { color: rgba(255,255,255,0.6); }
.ns-group { padding: 8px 0; }
.ns-group + .ns-group { border-top: 1px solid rgba(255,255,255,0.06); }
.ns-group-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand);
  padding: 8px 12px 6px;
}
.ns-row {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 12px; border-radius: var(--r-md);
  text-decoration: none; color: var(--text);
  transition: background 180ms ease;
}
.ns-row:hover { background: rgba(255,255,255,0.06); }
.ns-row-thumb {
  flex: 0 0 auto; width: 52px; height: 52px;
  border-radius: var(--r-sm); overflow: hidden;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
}
.ns-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ns-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ns-row-title {
  font-size: 15px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ns-row-sub {
  font-size: 12px; color: rgba(255,255,255,0.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ns-row-arr { flex: 0 0 auto; color: rgba(255,255,255,0.3); transition: transform 200ms ease, color 200ms ease; }
.ns-row-arr svg { width: 18px; height: 18px; }
.ns-row:hover .ns-row-arr { color: rgba(255,255,255,0.7); transform: translateX(3px); }

.nav-menu-head {
  padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.nav-menu-head h3 { font-family: var(--serif); font-size: 28px; font-weight: 300; color: var(--text); }
.nav-menu-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
.nav-menu-close svg { width: 20px; height: 20px; stroke: var(--text); stroke-width: 1.2; fill: none; }

.nav-menu-scroll { flex: 1; overflow-y: auto; padding: 12px 32px 32px; }
/* links stacked vertically as an editorial list, drawer-style */
.nav-menu-panel .nav-links {
  display: flex; flex-direction: column; gap: 0; align-items: stretch;
}
.nav-menu-panel .nav-links a {
  display: block; padding: 6px 0;
  font-family: var(--serif); font-size: 20px; font-weight: 300;
  letter-spacing: 0.01em; text-transform: none;
  color: rgba(245,238,224,0.86) !important; text-shadow: none !important;
}
.nav-menu-panel .nav-links a:hover { color: #fff !important; }
.nav-menu-panel .nav-links a.active { color: #fff !important; }
/* Drawer menu tiers (2026-07-30 reorder): Produkty group → vzorkovník links (M,
   20px) → Najít studio + Realizace (L, 27px — studio in brand red) → Akce /
   Výprodej / O nás / Výroba / Dokumenty (s, 15px). Akce+Výprodej used to BE the
   L tier and Najít studio a standalone 32px line above Produkty; the two traded
   places, so promos now read quieter than the vzorkovník links.
   No per-item hairlines; items sit tight within a group, groups separated by gaps. */
/* group gaps: Produkty→primary is the .nav-mm-prod margin; the tiers below add their own */
.nav-menu-panel .nav-links a.nav-link-lead {
  font-size: 27px; color: #fff !important; margin-top: 26px;
}
.nav-menu-panel .nav-links a.nav-link-lead:hover { color: #fff !important; opacity: .82; }
/* Najít studio is WHITE like the rest of the lead tier (2026-07-31) — it carried
   the brand red over from its old life as the standalone top item, which made the
   pair read as two different tiers. `.nav-link-studio` stays on the element as a
   hook; it just no longer overrides the colour. */
/* The lead pair sits tight as ONE tier — only the first opens the gap. */
.nav-menu-panel .nav-links a.nav-link-lead + .nav-link-lead { margin-top: 0; }
.nav-menu-panel .nav-links a.nav-link-lead + .nav-link-sub { margin-top: 26px; }
/* Výprodej (M) leží mezi patrem L a tichou skupinou, takže si obě mezery musí
   otevřít sám — bez toho se slepí s „Realizace" nad sebou i s „Akce" pod sebou
   a tři patra splynou v jeden blok. Obě pravidla platí JEN tady: nahoře po
   vzorkovníku (M) následuje „Najít studio" (L), ne `-sub`, a host vzorkovník
   nevidí vůbec. Zmizí-li Výprodej (`VYPRODEJ_VISIBLE === false`), mezeru zase
   otevře pravidlo o řádek výš. */
.nav-menu-panel .nav-links a.nav-link-lead + .nav-link-m { margin-top: 26px; }
.nav-menu-panel .nav-links a.nav-link-m + .nav-link-sub { margin-top: 26px; }
.nav-menu-panel .nav-links a.nav-link-sub {
  font-size: 15px; color: rgba(245,238,224,0.55) !important;
}
.nav-menu-panel .nav-links a.nav-link-sub:hover { color: #fff !important; }

.brand-mark {
  font-family: var(--serif);
  font-size: 24px; font-weight: 400;
  letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase;
  justify-self: center;
}
.nav-actions { justify-self: end; }
.brand-logo { height: 30px; width: auto; display: block; color: inherit; }
.brand-mark .est { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: var(--text-mute); margin-left: 10px; padding-left: 10px; border-left: 1px solid currentColor; opacity: 0.7; }

.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute);
  transition: color 240ms ease;
  position: relative;
  padding: 8px 0;
}
.nav-links a:hover, .nav-links a.active { color: currentColor; }
/* brand-red underline that grows from the left on hover; the active link keeps
   it filled — one animated rule for both states */
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--brand);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 340ms cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.nav-actions { display: flex; gap: 4px; align-items: center; }
/* i18n language switcher — compact globe trigger + dark-glass popover */
/* External link to the sykorashop.cz e-shop, sitting between the search and the
   account icon. Text rather than an icon on purpose — it leaves the site, so it
   should read as a destination, not as another tool in the toolbar. Sized off
   .lang-code so the two text elements in the bar match. */
.nav-eshop {
  display: inline-flex; align-items: center; height: 44px; padding: 0 10px;
  font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: inherit; text-decoration: none; white-space: nowrap;
  border-radius: 999px; transition: opacity .2s ease;
}
.nav-eshop:hover { opacity: .65; }
/* Phones swap this whole bar for the mobile nav, so this only guards the narrow
   band where the desktop bar is still up but tight. The e-shop is reachable
   either way — it is also in the menu drawer and in the mobile menu sheet. */
@media (max-width: 560px) { .nav-eshop { display: none; } }
/* The outbound ↗ is part of the link TEXT, not an ::after — `.nav-links a::after`
   above is the red hover underline, so putting content there would either lose to
   it on specificity or, if forced, destroy the underline on this one item. */

/* Primary nav CTA — the one FILLED element in a bar of quiet icons, so it reads
   as THE action. Sits left of the language switcher, with the e-shop link to its
   left. White pill by default (legible over both nav themes, so no per-theme
   override), brand red wiping up from the bottom on hover — the same `::before`
   translateY(101%) idiom as `.btn`. It is an <a>, not a <button>, which also
   keeps it out of the `.nav.over-dark .nav-actions button` drop-shadow rule.
   `isolation: isolate` is load-bearing: the z-index:-1 fill must be contained in
   this element's own stacking context, where it paints ABOVE the white
   background but BELOW the label — without it the wipe slides behind the nav. */
.nav-cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 18px; margin: 0 8px 0 4px;
  font: 600 11px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-paper); background: #fff; text-decoration: none; white-space: nowrap;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  transition: color 320ms cubic-bezier(.22,1,.36,1), box-shadow 320ms ease;
}
.nav-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--brand);
  transform: translateY(101%);
  transition: transform 360ms cubic-bezier(.22,1,.36,1);
}
.nav-cta:hover { color: #fff; box-shadow: 0 6px 22px rgba(200, 38, 44, 0.34); }
.nav-cta:hover::before { transform: translateY(0); }
/* The desktop bar is hidden entirely below 769px (mobile.css swaps in the phone
   shell), so this only tightens the narrow desktop/tablet band where the pill,
   the e-shop link and five more controls share one row. */
@media (max-width: 900px) {
  .nav-cta { height: 34px; padding: 0 13px; letter-spacing: .05em; margin: 0 4px 0 2px; }
}

.lang-switch { position: relative; display: inline-flex; align-items: center; margin-right: 2px; }
.lang-btn {
  appearance: none; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 8px; color: inherit; border-radius: 999px;
  transition: opacity .2s ease;
}
.lang-btn:hover { opacity: .65; }
.lang-globe { width: 18px; height: 18px; flex: none; display: block; }
.lang-code { font: 600 11px/1 var(--mono); letter-spacing: .06em; }
.lang-caret { width: 11px; height: 11px; flex: none; opacity: .6; transition: transform .22s ease; }
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 200;
  min-width: 212px;
  background: rgba(24, 20, 15, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 238, 224, 0.12); border-radius: var(--r-md, 14px);
  padding: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.lang-menu.open { opacity: 1; visibility: visible; transform: none; }
.lang-opt {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 10px 12px; border-radius: var(--r-xs, 6px);
  text-decoration: none; color: var(--text-mute);
  transition: background .15s ease, color .15s ease;
}
.lang-opt:hover { background: rgba(245, 238, 224, 0.07); color: var(--text); }
.lang-opt-name { font: 400 14px/1 var(--sans); }
.lang-opt-code { font: 600 10px/1 var(--mono); letter-spacing: .08em; color: var(--text-dim); }
.lang-opt.is-active { color: var(--text); }
.lang-opt.is-active .lang-opt-code { color: var(--brand-hi); }
.lang-opt.is-active::before {
  content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 15px; border-radius: 2px; background: var(--brand-hi);
}
.icon-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  transition: opacity 200ms ease;
}
.icon-btn:hover { opacity: 0.65; }
.icon-btn svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Filled/solid state: účet ikona při přihlášení, košík ikona když v něm je aspoň 1 položka. */
.icon-btn.filled svg { fill: currentColor; }

.cart-badge {
  position: absolute; top: 8px; right: 8px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--brand); color: #fff;
  border-radius: 9px;
  font-size: 10px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  transform: scale(0); transition: transform 280ms cubic-bezier(.34,1.56,.64,1);
}
.cart-badge.visible { transform: scale(1); }

@media (max-width: 980px) {
  /* the mobile bottom bar (mobile.js) owns navigation; hide the desktop
     "Menu" trigger so only the centered logo + actions remain up top */
  .nav-menu-zone { display: none; }
}

/* ── Hero (cinematic video) ─────────────────────────────────────────────── */

.hero {
  position: relative;
  height: 100vh; min-height: 760px;
  overflow: hidden;
  background: #000;
}
.hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero-media video, .hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10,9,8,0.0)  0%,
      rgba(10,9,8,0.0) 55%,
      rgba(10,9,8,0.35) 80%,
      rgba(10,9,8,0.85) 100%);
  pointer-events: none;
}
.hero-media::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 100% 60% at 50% 110%, rgba(0,0,0,0.45) 0%, transparent 65%);
  pointer-events: none;
}

.hero-content {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 32px) var(--gutter) 48px;
  max-width: var(--container);
  margin: 0 auto; width: 100%;
  left: 0; right: 0;
}

.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; min-height: 1px; flex-shrink: 0; }
.hero-top .chapter { color: rgba(255,255,255,0.6); }
/* Hero reel switcher = story-style filling progress lines at the top of the hero.
   Each line = one collection (Verso/Balm/Fluid…); the active one fills over the
   reel duration, past ones stay full, clicking a line switches reels. */
.hero-progress {
  /* anchored to the BOTTOM-CENTER of the hero (absolute, so a tall headline
     can't push it below the fold / get clipped by .hero overflow:hidden) */
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 4;
  display: flex; gap: 6px; width: 120px;
  /* drop-shadow so the thin white lines read on bright reels (light kitchens) too */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.hero-prog {
  flex: 1; background: none; border: 0; padding: 12px 0; margin: 0;
  position: relative; cursor: pointer;
}
.hero-prog::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.42);
  transition: background 200ms ease;
}
.hero-prog:hover::before { background: rgba(255, 255, 255, 0.6); }
.hero-prog-fill {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 2px; width: 0; border-radius: 2px; background: #fff;
}
@media (max-width: 640px) { .hero-progress { width: 104px; } }

.hero-headline {
  color: #fff;
  max-width: min(760px, 90%);
}
.hero-headline h1 {
  margin-bottom: 28px;
  max-width: 12ch;
}
.hero-headline .lead {
  max-width: 520px;
  color: rgba(255,255,255,0.78);
  font-size: 16px; line-height: 1.6;
}
.hero-actions { max-width: none !important; }

.hero-bottom {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
}
.hero-bottom .scroll-cue {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: rgba(255,255,255,0.6);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
}
.hero-bottom .scroll-cue .line {
  width: 1px; height: 40px; transform-origin: top;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation: cue 2.6s infinite;
}
/* Pulse via transform (scaleY), NOT height: the cue sits in the hero's flex
   `space-between` column, so animating its HEIGHT changed the layout every
   frame and bounced the headline + buttons ~10px. Transform doesn't reflow,
   so the line still pulses 40→60px visually while the heading stays put. */
@keyframes cue { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.5)} }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }

/* Short / odd desktop viewports — 13" laptops above all. The hero's CONTENT
   height is driven by viewport WIDTH (`.display-l` is `clamp(56px, 9vw, 144px)`,
   and the headline picks up a 4th line once it passes ~100px) while the room for
   it comes from viewport HEIGHT, so a wide-but-short window overflows `.hero` and
   its `overflow: hidden` silently CLIPS the CTA row off the page — `elementFromPoint`
   at the button centre returns nothing and NO scroll position can reach it.

   This used to be a BINARY compensation (`@media (min-width:981px) and
   (max-height:900px)` → one smaller type size). A step function cannot cover a
   continuous problem, and it left three holes, all measured on the real page:
     · 901–1105px tall at ≥1440 wide — the query had just switched OFF, but the
       full-size layout needs up to 1106px of room (1920x920 cut the buttons by
       70px, 1512x920 by 38px, 1680x980 by 10px);
     · ≤716px tall — the query was ON, but the compressed layout STILL didn't fit
       (1920x600 cut them by 37px, 1512x560 by 73px);
     · 769–980px wide — below the query's floor entirely, where `min-height:760px`
       made the hero taller than the window all by itself and pushed the CTA under
       the fold on any window shorter than that.
   So the whole vertical rhythm is now a continuous function of BOTH axes:
   `min(9vw, 13vh)` keeps today's design byte-for-byte wherever it fits (the vw
   term still wins at 1920x1080) and shrinks smoothly where it doesn't, with no
   breakpoint left to miss. Verified by sweeping 8 widths x 29 heights
   (560–1120px) in Chrome and asserting the actions row stays inside the hero.
   Do NOT put a `@media (max-height: …)` cliff back — that is the bug. */
@media (min-width: 769px) {
  /* the 760px floor made the hero TALLER than a 690px viewport all by itself */
  #hero.hero { min-height: 0; }
  #hero .hero-content {
    padding-top: calc(var(--nav-h) + clamp(12px, 3.2vh, 32px));
    padding-bottom: clamp(24px, 5vh, 48px);
  }
  #hero .hero-headline h1 {
    font-size: clamp(40px, min(9vw, 12.8vh), 144px);
    margin-bottom: clamp(12px, 3vh, 28px);
  }
  #hero .hero-headline .lead { font-size: clamp(14px, 1.85vh, 16px); }
  #hero .hero-actions { margin-top: clamp(14px, 4vh, 36px); }
  /* scoped to #hero — `.hero-progress` is shared with the PDP hero switcher */
  #hero .hero-bottom .scroll-cue .line { height: clamp(18px, 4.4vh, 40px); }
  #hero .hero-progress { bottom: clamp(20px, 4.8vh, 44px); }
}

/* Under ~680px of height the continuous scaling alone still ran 31px over at
   1920x540, and the type cannot shrink further without the hero stopping being
   a hero. The 73px "Vice o teto kuchyni" disclosure is what pays for it: it is
   a SECONDARY link to the playing reel's PDP, the phone layout already drops it
   (`html.m-on #hero .hero-desc-wrap`), and hiding an element can only ever FREE
   space — so unlike the type-size cliff this block replaced, this step cannot
   open a new hole on the far side of its boundary.
   NB hiding `.hero-bottom` here does nothing: `.hero-content` is
   `justify-content: space-between`, which packs from the START once the content
   overflows, so the scroll cue sits BELOW the CTA row and never pushes it. */
@media (min-width: 769px) and (max-height: 680px) {
  #hero .hero-desc-wrap { display: none !important; }
  /* Once the frame is this short the bottom-CENTRE reel switcher lands ON TOP of
     the left-aligned CTA row and STEALS its clicks — measured at 900x540, the
     "Rezervovat schuzku" button's own centre hit-tested to `.hero-prog`, so the
     button looked fine and switched the reel instead of opening the booking
     modal. The CTAs never reach the right gutter, so park the switcher there. */
  #hero .hero-progress { left: auto; right: var(--gutter); transform: none; }
  /* ...which is where the "Scroll" cue lives. It is decoration, and on a frame
     this short the page is visibly scrollable without it. */
  #hero .hero-bottom .scroll-cue { display: none; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

/* ICONS.arrow is drawn as STROKES (`M5 12h14M13 6l6 6-6 6`). Without this base
   rule the browser default (fill:black, stroke:none) paints it as a solid black
   wedge — the horizontal shaft disappears and the chevron fills in, so it stops
   reading as an arrow. Any surface that needs a different colour overrides
   `stroke` below; never re-introduce a fill. */
svg.arrow {
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 28px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
  border: 1px solid currentColor;
  background: transparent; color: inherit;
  transition: all 320ms cubic-bezier(.22,1,.36,1);
  position: relative; overflow: hidden;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: currentColor;
  transform: translateY(101%);
  transition: transform 360ms cubic-bezier(.22,1,.36,1);
}
.btn:hover { color: var(--bg); }
.btn.paper-btn:hover { color: var(--bg-paper); }
.btn:hover::before { transform: translateY(0); }
.btn .arrow {
  width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.2; fill: none;
  transition: transform 320ms cubic-bezier(.22,1,.36,1);
}
.btn:hover .arrow { transform: translateX(6px); }

.btn.solid {
  background: rgba(20,16,12,0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--text);
  border-color: rgba(245,238,224,0.22);
}
.btn.solid:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.solid::before { display: none; }

.btn.brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.brand::before { background: var(--brand-hi); }
.btn.brand:hover { color: #fff; border-color: var(--brand-hi); }

.btn.ghost { border: none; padding: 12px 0; }
.btn.ghost::before { display: none; }
.btn.ghost:hover { color: var(--brand-hi); }

.btn.glass-btn {
  background: rgba(245, 238, 224, 0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 238, 224, 0.35);
  color: rgba(245, 238, 224, 0.98);
  padding: 22px 36px;
  font-size: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.08) inset;
  border-radius: 999px;
}
.btn.glass-btn::before { background: rgba(245,238,224,0.95); border-radius: 999px; }
.btn.glass-btn:hover { color: var(--bg); border-color: rgba(245,238,224,0.95); }
.btn.glass-btn .arrow { width: 16px; height: 16px; }

.btn.pill { border-radius: 999px; }
.btn.solid.pill { border-radius: 999px; }
.btn.brand.pill { border-radius: 999px; }

/* ── Section heads ──────────────────────────────────────────────────────── */

.section-head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: 80px;
}
@media (max-width: 900px) { .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; } }
.section-head .meta { display: flex; flex-direction: column; gap: 20px; }
.section-head .meta h2 { max-width: 14ch; }
.section-head .copy { color: var(--text-mute); max-width: 460px; padding-top: 24px; font-size: 16px; line-height: 1.65; }
.paper .section-head .copy { color: var(--text-mute-paper); }

/* ── Triptych (Verso · Balm · Fluid side-by-side) ───────────────────────── */
.triptych-wrap {
  position: relative;
  padding: 80px 0 120px;
  /* transparent — let the body's continuous red bloom carry through so the
     transition into the design-wheel section below never seams. */
}
.triptych-wrap .head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  padding: 0 var(--gutter);
  max-width: var(--container);
  margin: 0 auto 56px;
}
.triptych-wrap .head h2 { font-family: var(--serif); font-size: clamp(48px, 6vw, 96px); line-height: 0.95; font-weight: 300; letter-spacing: -0.025em; max-width: 14ch; }
.triptych-wrap .head .copy { max-width: 380px; color: var(--text-mute); font-size: 16px; line-height: 1.7; }

.triptych {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 0 var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  transition: grid-template-columns 700ms cubic-bezier(.22,1,.36,1);
}
.triptych.has-hover-0 { grid-template-columns: 1.6fr 1fr 1fr; }
.triptych.has-hover-1 { grid-template-columns: 1fr 1.6fr 1fr; }
.triptych.has-hover-2 { grid-template-columns: 1fr 1fr 1.6fr; }
/* Kapitoly bez dekorů se nekreslí (renderDvirka / renderKorpusy), takže pás
   může mít 1 nebo 2 karty. Bez tohohle by zbylá karta seděla ve třetině šířky
   a četla se jako nedonačtená stránka. Musí stát ZA .has-hover-N — stejná
   specificita, rozhoduje pořadí. */
.triptych[data-count="1"] { grid-template-columns: 1fr; }
.triptych[data-count="2"] { grid-template-columns: 1fr 1fr; }
.triptych[data-count="1"].has-hover-0 { grid-template-columns: 1fr; }
.triptych[data-count="2"].has-hover-0 { grid-template-columns: 1.6fr 1fr; }
.triptych[data-count="2"].has-hover-1 { grid-template-columns: 1fr 1.6fr; }

.tript-card {
  position: relative;
  height: min(78vh, 760px); min-height: 600px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #000;
  transition: transform 600ms cubic-bezier(.22,1,.36,1);
}
.tript-card video, .tript-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1600ms cubic-bezier(.22,1,.36,1);
}
.tript-card:hover video, .tript-card:hover img { transform: scale(1.04); }
/* Resting dim as a static overlay, NOT a CSS filter — a filter on a playing
   video costs a GPU shader pass on every decoded frame, ×3 cards. The overlay
   is composited once and just fades on hover. */
.tript-card::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgba(12, 10, 8, 0.16);
  opacity: 1; transition: opacity 600ms ease; pointer-events: none;
}
.tript-card:hover::before { opacity: 0; }
.tript-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10,9,8,0.92) 0%, rgba(10,9,8,0.0) 60%);
}

.tript-meta {
  position: absolute; left: 32px; right: 32px; bottom: 32px; z-index: 2;
  color: #fff;
  display: flex; flex-direction: column; gap: 14px;
}
.tript-meta .num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; color: rgba(255,255,255,0.65); }
.tript-meta h3 {
  font-family: var(--serif); font-size: clamp(36px, 4.2vw, 64px); line-height: 0.95; font-weight: 300; letter-spacing: -0.02em;
}
.tript-meta h3 em { font-style: italic; color: rgba(255,255,255,0.78); font-weight: 300; }
.tript-meta .lead {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 500ms ease, opacity 500ms ease, margin 500ms ease;
  color: rgba(255,255,255,0.78);
  font-size: 15px; line-height: 1.65;
}
.tript-card:hover .tript-meta .lead { max-height: 220px; opacity: 1; margin-top: 8px; }
.tript-meta .row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 14px;
}
.tript-meta .row .price { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: rgba(255,255,255,0.9); }
.tript-meta .cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(245,238,224,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245,238,224,0.4);
  color: rgba(245,238,224,0.95);
  transition: all 280ms ease;
}
.tript-meta .cta:hover { background: rgba(245,238,224,0.95); color: var(--bg); border-color: rgba(245,238,224,0.95); }
.tript-meta .cta svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.4; fill: none; }

.tript-pill {
  position: absolute; top: 24px; left: 24px; z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  background: rgba(10,9,8,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
}

@media (max-width: 980px) {
  .triptych { grid-template-columns: 1fr; gap: 12px; }
  .triptych.has-hover-0, .triptych.has-hover-1, .triptych.has-hover-2 { grid-template-columns: 1fr; }
  .tript-card { height: 70vh; min-height: 480px; }
  .tript-meta .lead { max-height: 220px; opacity: 1; margin-top: 8px; }
}

/* ── Collection chapter (Verso/Balm/Fluid splash) ───────────────────────── */

.chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--bg);
}
.chapter.flip { grid-template-areas: 'media body'; }
.chapter.flip > .ch-body { grid-area: body; }
.chapter.flip > .ch-media { grid-area: media; }
@media (max-width: 980px) {
  .chapter { grid-template-columns: 1fr; min-height: 0; }
  .chapter .ch-media { aspect-ratio: 4/5; }
}

.ch-media { position: relative; overflow: hidden; background: #000; }
.ch-media video, .ch-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ch-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(10,9,8,0.4), transparent 25%, transparent 75%, rgba(10,9,8,0.4));
  pointer-events: none;
}

.ch-body {
  padding: 96px 80px;
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
}
@media (max-width: 980px) { .ch-body { padding: 64px var(--gutter); } }

.ch-body .chapter-no { color: var(--brand); }
.ch-body h2 { font-size: clamp(48px, 7vw, 110px); line-height: 0.95; }
.ch-body .lead { max-width: 480px; color: var(--text-mute); font-size: 16px; line-height: 1.7; margin: 8px 0 24px; }

.ch-body dl.materials {
  margin-top: 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px;
  border-top: 1px solid var(--line); padding-top: 32px;
}
.ch-body dl.materials dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.ch-body dl.materials dd { font-family: var(--serif); font-size: 18px; color: var(--text); }

/* ── Category grid ──────────────────────────────────────────────────────── */

.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
@media (max-width: 1024px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cat-grid { grid-template-columns: 1fr; } }

.cat-card { position: relative; display: block; }
.cat-card .cat-thumb {
  aspect-ratio: 3 / 4;
  background: var(--bg-elev-1);
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
}
.cat-card .cat-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1400ms cubic-bezier(.22,1,.36,1), filter 800ms ease;
  filter: brightness(0.85);
}
.cat-card:hover .cat-thumb img { transform: scale(1.06); filter: brightness(1); }
.cat-card .cat-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,9,8,0.6), transparent 50%);
}
.cat-card .cat-meta {
  position: absolute; left: 24px; right: 24px; bottom: 24px;
  display: flex; align-items: flex-end; justify-content: space-between;
  color: #fff;
  pointer-events: none;
}
.cat-card .cat-meta .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.cat-card .cat-meta h3 { font-size: 28px; margin-top: 4px; }
.cat-card .cat-meta .arrow {
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 280ms ease, border-color 280ms ease;
}
.cat-card:hover .cat-meta .arrow { background: var(--brand); border-color: var(--brand); }
.cat-card .cat-meta .arrow svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 1.4; fill: none; }

/* ── Product card ───────────────────────────────────────────────────────── */

.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
.prod-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .prod-grid, .prod-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .prod-grid, .prod-grid.cols-4 { grid-template-columns: 1fr; } }

.prod-card { display: block; position: relative; }
.prod-thumb {
  aspect-ratio: 4 / 5;
  background: var(--bg-elev-1);
  overflow: hidden;
  position: relative;
  border-radius: var(--r-md);
}
.prod-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1200ms cubic-bezier(.22,1,.36,1);
}
.prod-card:hover .prod-thumb img { transform: scale(1.05); }

/* Blur-up (JS-driven, enhanceCardImages): the full card photo fades + sharpens in over a
   tiny blurred preview of itself, so a lazy fetch never shows the flat dark placeholder.
   The transient blur is one-shot on load (not a constant filter) — cheap. Keeps the hover
   transform in the transition list so scale-on-hover still animates. */
.prod-thumb > img.blurup, .pin-card-thumb > img.blurup {
  opacity: 0; filter: blur(12px);
  transition: opacity 550ms ease, filter 650ms ease, transform 1200ms cubic-bezier(.22,1,.36,1);
}
.prod-thumb > img.blurup.blurup-in, .pin-card-thumb > img.blurup.blurup-in { opacity: 1; filter: blur(0); }
/* Same blur-up on the home design wheel (centre still + the building "kolečko"),
   driven by blurUpImage(). Two deliberate differences from the card rule above:
   no `transform` (neither surface zooms on hover), and NO `filter: blur()` — the seed
   underneath is a 40px thumb stretched over the whole circle, so it is already the
   blurred layer; blurring the incoming copy too only fed a GPU shader and feathered
   the image's edge inside the round clip. A plain cross-fade reads as "comes into
   focus" on its own. 260ms, because .dls-detail's own dlsFade runs 400ms — a longer
   fade finished visibly after the medallion had settled and looked like a second jump. */
img.blurup { opacity: 0; transition: opacity 260ms ease; }
img.blurup.blurup-in { opacity: 1; }

.prod-tags {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.prod-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 5px 10px;
  background: rgba(10,9,8,0.65);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
}
.prod-tag.brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.prod-tag.gold  { background: var(--gold); border-color: var(--gold); color: var(--bg); }

.prod-info {
  padding: 22px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.prod-info .line-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-dim);
}
.prod-info .prod-name {
  font-family: var(--serif); font-size: 24px; line-height: 1.15; font-weight: 300;
  letter-spacing: -0.01em;
}
.prod-info .prod-name em { font-style: italic; color: var(--text-mute); font-weight: 300; }
.prod-info .prod-price {
  margin-top: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--text-mute);
}
.prod-info .prod-price .label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-right: 8px; }

/* ── Pinned horizontal scroll (LV-style "Kompozice na míru") ────────────── */

.pin-scroll {
  position: relative;
  background: var(--bg);
}
.pin-track {
  position: relative;
  /* height set inline by JS */
}
.pin-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, 36%) 1fr;
  overflow: hidden;
}
.pin-head {
  display: flex; align-items: center;
  padding: 0 56px 0 var(--gutter);
  border-right: 1px solid var(--line);
  background: var(--bg);
  z-index: 2;
}
.pin-head-inner { max-width: 460px; }
.pin-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(48px, 5.4vw, 84px); line-height: 0.95;
  letter-spacing: -0.025em; margin: 16px 0 24px;
}
.pin-head .copy { color: var(--text-mute); font-size: 16px; line-height: 1.65; max-width: 360px; }
.pin-head .pin-progress {
  margin-top: 36px;
  height: 1px; width: 100%;
  background: var(--line-strong);
  position: relative; overflow: visible;
}
.pin-head .pin-progress .bar {
  position: absolute; top: -1px; left: 0;
  height: 3px; width: 0%;
  background: var(--brand);
  transition: width 80ms linear;
}
.pin-head .pin-counter {
  margin-top: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-mute);
}

.pin-rail {
  overflow: hidden;
  position: relative;
  display: flex; align-items: center;
}
.pin-rail-inner {
  display: flex;
  /* DO NOT add `flex-shrink: 0` / `flex: 0 0 auto` here. It looks like the fix
     for Safari shrinking this row to the rail width, but WebKit then sizes it
     to a max-content that is driven by the CARDS' intrinsic IMAGE widths rather
     than their `flex-basis` — measured 17321px instead of 4393px, which made
     sizeTrack() build a 20000px-tall track. The row's own box width is simply
     not a trustworthy measurement in either direction; setupPinnedScroll()
     measures the children's laid-out geometry instead (see contentWidth()). */
  gap: 32px;
  padding: 0 8vw 0 56px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.pin-card {
  flex: 0 0 clamp(340px, 30vw, 440px);
  display: block;
  position: relative;
}
.pin-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--bg-elev-1);
  overflow: hidden;
  position: relative;
  border-radius: var(--r-md);
}
.pin-card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1200ms cubic-bezier(.22,1,.36,1);
}
.pin-card:hover .pin-card-thumb img { transform: scale(1.05); }
.pin-card-thumb .prod-tags {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
}
.pin-card-info {
  padding: 20px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.pin-card-info .line-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.pin-card-info .prod-name { font-family: var(--serif); font-size: 22px; line-height: 1.15; font-weight: 300; }
.pin-card-info .prod-name em { font-style: italic; color: var(--text-mute); font-weight: 300; }
.pin-card-info .prod-price { font-family: var(--mono); font-size: 12px; color: var(--text-mute); margin-top: 6px; }
.pin-card-info .prod-price .label { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-right: 8px; }

/* Mobile fallback: hide pinned layout, show simple grid */
.pin-mobile-grid {
  display: none;
  padding: 80px var(--gutter) 120px;
}
@media (max-width: 980px) {
  .pin-scroll .pin-track { display: none; }
  .pin-mobile-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px;
  }
  .pin-mobile-grid::before {
    content: ''; grid-column: 1 / -1;
    /* Placeholder; the JS won't render the head here, so we add it via CSS later if needed */
  }
}
@media (max-width: 640px) {
  .pin-mobile-grid { grid-template-columns: 1fr; }
}

/* Mirrored variant — head RIGHT, card rail LEFT (Realizace band). Reuses the
   exact .pin-scroll mechanic + JS; only the grid columns and the divider/
   padding sides flip. Mobile reuses .pin-mobile-grid unchanged. */
.pin-scroll--mirror .pin-stage { grid-template-columns: 1fr minmax(360px, 36%); }
.pin-scroll--mirror .pin-head {
  border-right: none;
  border-left: 1px solid var(--line);
  padding: 0 var(--gutter) 0 56px;
}
/* Mirror the MOTION too: cards start at the rail's right edge (next to the head)
   and slide rightward as you scroll. The rail right-aligns its row
   (justify-content:flex-end) so the row anchors at the right and overflows LEFT;
   row-reverse puts card 1 at that right edge; the JS flips the transform sign to
   positive so scrolling reveals the left-overflow cards (not empty space). */
.pin-scroll--mirror .pin-rail { justify-content: flex-end; }
.pin-scroll--mirror .pin-rail-inner {
  flex-direction: row-reverse;
  padding: 0 56px 0 8vw;
}

/* ── Horizontal rail (products) ─────────────────────────────────────────── */

.rail-wrap { position: relative; }
.rail {
  display: flex; gap: 32px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * {
  flex: 0 0 clamp(280px, 30vw, 460px);
  scroll-snap-align: start;
}
.rail-ctrls {
  display: flex; gap: 8px; align-items: center;
  margin-top: 32px; padding: 0 var(--gutter);
}
.rail-ctrls button {
  width: 52px; height: 52px;
  border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 240ms ease;
  border-radius: 50%;
}
.rail-ctrls button:hover { border-color: var(--text); background: var(--text); color: var(--bg); }
.rail-ctrls button svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.2; fill: none; }
.rail-ctrls .rail-hint {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-dim); margin-right: 16px;
}
.rail { cursor: grab; }
.rail:active { cursor: grabbing; }
.rail-ctrls .progress {
  flex: 1; height: 1px; background: var(--line-strong); margin-left: 16px; position: relative;
}
.rail-ctrls .progress::after {
  content: ''; position: absolute; left: 0; top: -1px; height: 3px;
  width: var(--rail-progress, 0%);
  background: var(--brand); transition: width 140ms linear;
  max-width: 100%;
}

/* ── Editorial split ────────────────────────────────────────────────────── */

.editorial {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px;
  align-items: center;
}
@media (max-width: 1024px) { .editorial { grid-template-columns: 1fr; gap: 40px; } }
.editorial .visual { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-md); }
.editorial .visual img, .editorial .visual video { width: 100%; height: 100%; object-fit: cover; }
.editorial .body h2 { margin: 16px 0 24px; }
.editorial .body p.lead { color: var(--text-mute); font-size: 18px; line-height: 1.7; max-width: 540px; margin-bottom: 32px; }

/* ── Vyrobeno ve Vizovicích — cinematic full-bleed ──────────────────────── */

/* ═══ Home: Floating-lines WebGL background (behind Novinky + Ateliéry) ════ */
.fl-bg-wrap { position: relative; }
/* the canvas paints opaque black + the ribbon; screen-blend drops the black so
   only the ribbon's glow lands over the body's warm-dark + red bloom — no black
   rectangle, the continuous bloom is preserved. overflow:hidden clips the
   canvas to the block. */
.fl-bg-wrap { overflow: hidden; }
.fl-bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.fl-bg canvas { display: block; width: 100% !important; height: 100% !important; }
/* lift every section in the block above the ribbon */
.fl-bg-wrap > *:not(.fl-bg) { position: relative; z-index: 1; }

.vyroba {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #000;
}
.vy-media {
  position: absolute; inset: 0;
}
.vy-media video, .vy-media img {
  width: 100%; height: 100%; object-fit: cover;
}
.vy-media::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.0) 22%, rgba(10,9,8,0.0) 50%, rgba(10,9,8,0.85) 100%),
    linear-gradient(90deg, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.0) 35%, rgba(10,9,8,0.0) 65%, rgba(10,9,8,0.35) 100%);
}

.vy-content {
  position: relative; z-index: 3;
  min-height: 100vh;
  max-width: var(--container);
  margin: 0 auto;
  padding: 120px var(--gutter) 80px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 64px;
  color: #fff;
}
.vy-top .eyebrow { color: rgba(255,255,255,0.7); }
.vy-headline h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(64px, 11vw, 168px);
  line-height: 0.9; letter-spacing: -0.03em;
  max-width: 14ch;
}
.vy-headline h2 .italic { color: rgba(255,255,255,0.78); font-style: normal; }

.vy-bottom {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: end;
}
@media (max-width: 980px) {
  .vy-bottom { grid-template-columns: 1fr; gap: 32px; }
  .vy-content { padding-top: 96px; }
}

.vy-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: 8px;
  border-radius: 18px;
}
.vy-stat {
  padding: 28px 24px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.vy-stat:nth-child(2n) { border-right: none; }
.vy-stat:nth-last-child(-n+2) { border-bottom: none; }
.vy-stat .num {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 3vw, 44px); line-height: 1;
  letter-spacing: -0.02em;
}
.vy-stat .lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
  margin-top: 10px;
}

.vy-quote {
  max-width: 460px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.vy-quote p {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  color: rgba(255,255,255,0.94);
}
.vy-quote .cite {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 20px;
}

/* ── Materials reel (paper section) ─────────────────────────────────────── */

.materials-reel { padding: 140px 0 0; }
.materials-reel .reel-head { padding: 0 var(--gutter); max-width: var(--container); margin: 0 auto; }
.materials-reel .reel-head h2 { max-width: 18ch; margin-top: 16px; }
.materials-reel .reel-grid {
  margin-top: 80px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 1024px) { .materials-reel .reel-grid { grid-template-columns: repeat(2, 1fr); } }
.materials-reel .reel-grid .cell {
  position: relative;
  aspect-ratio: 1;
  border-right: 1px solid var(--line-paper);
  overflow: hidden;
  padding: 32px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.materials-reel .reel-grid .cell:last-child { border-right: none; }
.materials-reel .reel-grid .cell .bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: transform 1600ms cubic-bezier(.22,1,.36,1);
}
.materials-reel .reel-grid .cell:hover .bg { transform: scale(1.05); }
.materials-reel .reel-grid .cell .bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 70%);
}
.materials-reel .reel-grid .cell .lbl {
  position: relative; z-index: 1;
  color: #fff;
}
.materials-reel .reel-grid .cell .lbl .num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; opacity: 0.7; }
.materials-reel .reel-grid .cell .lbl h4 { font-family: var(--serif); font-size: 28px; font-weight: 300; margin-top: 6px; }

/* ── Atelier (cities) ───────────────────────────────────────────────────── */

.atelier {
  padding: 140px 0;
}
/* Copy | list side by side only on wide screens. The band lists all 38 studios,
   and at 1.4fr/1024px the list box shrank to ~550px on a laptop — one 2 600px
   column beside a 500px copy block. Stacking below 1400 gives the list the full
   container and 1.7fr keeps it wide enough for three columns above it. Don't push
   this past ~1.7 to buy list width: it eats the copy column, and the display h2
   starts breaking "studio Sykora" onto a fifth line. */
.atelier .stack { display: grid; grid-template-columns: 1fr 1.7fr; gap: 80px; }
@media (max-width: 1400px) { .atelier .stack { grid-template-columns: 1fr; gap: 40px; } }
.atelier h2 { max-width: 12ch; margin-top: 16px; }
@media (max-width: 768px) {
  .atelier .stack > .reveal:not(.cities) { text-align: center; }
  .atelier .stack > .reveal:not(.cities) h2 { max-width: none; }
  .atelier .stack > .reveal:not(.cities) p { max-width: none !important; margin-left: auto; margin-right: auto; }
  .atelier .stack > .reveal:not(.cities) > div { justify-content: center; }
}
.atelier .cities {
  /* `330px 2` = at most two columns, each at least 330px — measured against the
     BOX, not the viewport, which is what this band needs: the stack goes 2-col at
     1400px, so the list is WIDER at 1399px (full container) than at 1500px (0.63
     of it). A viewport media query gets that backwards. Under 330px a studio name
     and its opening hours can't share a line and every row wraps. */
  columns: 330px 2; column-gap: 64px;
  border-top: 1px solid var(--line); padding-top: 32px;
}
.atelier .cities .city {
  break-inside: avoid;
  padding: 16px 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  border-bottom: 1px solid var(--line);
}
.atelier .city .name { font-family: var(--serif); font-size: 22px; }
/* Distance, shown only when the visitor's position is known. Mono + dim so it
   annotates the name instead of competing with it; nowrap so "12 km" never
   breaks across lines when a long name wraps. */
.atelier .city .km {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--text-dim); margin-left: 9px; white-space: nowrap;
}
/* The gap + right-align are load-bearing once the list is expanded to all 38: a
   long name ("Bratislava - Bajkalská") and a split-shift opening time ("9:00 -
   12:00 13:00 - 16:00") used to butt straight into each other with no space. */
.atelier .city .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); text-align: right; }

/* „Zobrazit všechna studia" — quiet mono toggle, deliberately NOT a .btn: the
   copy column already carries the solid „Najít studio" pill and two buttons of
   equal weight in one band read as two competing primary actions. (A plain .btn
   would also go invisible on hover here — its ::before fill is currentColor.) */
.cities-more {
  margin-top: 28px; padding: 0 0 4px;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mute); cursor: pointer; transition: color .2s, border-color .2s;
}
.cities-more:hover { color: var(--text); border-color: var(--brand); }
.cities-more:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

/* ── KPI strip ──────────────────────────────────────────────────────────── */

.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kpi { padding: 56px 32px; border-right: 1px solid var(--line); }
.kpi:last-child { border-right: none; }
.kpi .num { font-family: var(--serif); font-size: clamp(48px, 5vw, 80px); line-height: 1; font-weight: 300; }
.kpi .lbl { color: var(--text-mute); font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 16px; }
@media (max-width: 740px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } .kpi:nth-child(2n) { border-right: none; } .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* ── Shop ───────────────────────────────────────────────────────────────── */

.shop-head {
  padding: calc(var(--nav-h) + 80px) 0 56px;
  border-bottom: 1px solid var(--line);
}
.shop-head .container { display: grid; grid-template-columns: 1.6fr 1fr; gap: 64px; align-items: end; }
.shop-head .meta h1 { font-size: clamp(56px, 9vw, 120px); line-height: 0.95; margin-top: 16px; font-family: var(--serif); font-weight: 300; }
.shop-head .lead { font-size: 17px; color: var(--text-mute); line-height: 1.7; max-width: 460px; padding-bottom: 12px; }
@media (max-width: 900px) { .shop-head .container { grid-template-columns: 1fr; gap: 24px; } }

.filters {
  position: sticky; top: var(--nav-h); z-index: 50;
  background: rgba(10,9,8,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.filters .row {
  display: flex; gap: 4px;
  padding: 18px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.filters .row::-webkit-scrollbar { display: none; }
.filter-chip {
  padding: 10px 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute);
  border-bottom: 1px solid transparent;
  transition: all 240ms ease;
  white-space: nowrap;
}
.filter-chip:hover { color: var(--text); }
.filter-chip.active { color: var(--text); border-bottom-color: var(--brand); }

.shop-grid-wrap { padding: 80px 0 140px; }
.prod-count { color: var(--text-mute); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 0 var(--gutter); margin-bottom: 40px; }
/* Results line: product count (left) + sort pill (right). */
.shop-toolbar { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
.shop-toolbar .prod-count { padding: 0; margin: 0; }
.shop-toolbar .shop-sort { margin-left: auto; display: flex; }

/* ── Product detail ─────────────────────────────────────────────────────── */

.pdp { padding-top: calc(var(--nav-h) + 32px); }
.pdp-hero {
  position: relative;
  height: 86vh; min-height: 600px;
  overflow: hidden;
  background: var(--bg-elev-1);
  border-radius: var(--r-md);
}
.pdp-hero img, .pdp-hero video { width: 100%; height: 100%; object-fit: cover; }
.pdp-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,9,8,0.2), rgba(10,9,8,0) 30%, rgba(10,9,8,0) 70%, rgba(10,9,8,0.6) 100%);
}
.pdp-hero .pdp-hero-meta {
  position: absolute; left: 0; right: 0; bottom: 48px;
  padding: 0 var(--gutter); max-width: var(--container); margin: 0 auto;
  color: #fff;
}
.pdp-hero .pdp-hero-meta .eyebrow { color: rgba(255,255,255,0.75); }
.pdp-hero .pdp-hero-meta h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(56px, 10vw, 144px); line-height: 0.92;
  margin: 12px 0 0; letter-spacing: -0.03em;
}
.pdp-hero .pdp-hero-meta h1 em { font-style: italic; color: rgba(255,255,255,0.8); display: block; }
/* PDP hero switcher lines — same thin filling lines as the home hero, but
   pinned bottom-right so the big left-aligned headline never sits behind them. */
.pdp-hero-progress { left: auto; right: max(var(--gutter), 24px); transform: none; bottom: 40px; z-index: 5; }
@media (max-width: 640px) { .pdp-hero-progress { left: 50%; right: auto; transform: translateX(-50%); bottom: 24px; } }

/* Variant switcher — sits below the hero (its own bar above the gallery) and
   swaps the gallery + configurator scheme. The top hero stays the default. */
.pdp-variant-bar { padding: 30px 0 4px; }
.pdp-variant-bar .eyebrow { display: block; color: var(--text-mute); }
.pdp-variants { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pdp-variant {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 999px;
  background: rgba(20,17,13,0.34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.86); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  cursor: pointer; transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.pdp-variant .pv-thumb {
  width: 30px; height: 30px; border-radius: 50%; background-size: cover; background-position: center;
  flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.pdp-variant .pv-name { white-space: nowrap; }
.pdp-variant:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
.pdp-variant.active { border-color: var(--brand); background: rgba(200,38,44,0.18); color: #fff; }
@media (hover: none) { .pdp-variant { padding-left: 7px; } }

/* Appliance heroes use bright product cut-outs (white fridge interiors), not the
   dark cinematic kitchen shots this hero was built for — strengthen the bottom
   scrim and tame the headline so the white title stays legible. */
.pdp-appliance .pdp-hero::after {
  background: linear-gradient(to bottom,
    rgba(10,9,8,0.28), rgba(10,9,8,0) 24%, rgba(10,9,8,0) 46%,
    rgba(10,9,8,0.55) 76%, rgba(10,9,8,0.88) 100%);
}
.pdp-appliance .pdp-hero-meta h1 {
  font-size: clamp(40px, 6vw, 88px); line-height: 0.98;
  text-shadow: 0 2px 40px rgba(0,0,0,0.55);
}
.pdp-appliance .pdp-hero-meta .eyebrow { text-shadow: 0 1px 20px rgba(0,0,0,0.6); }

.pdp-body {
  padding: 96px 0;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px;
  max-width: var(--container); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}
@media (max-width: 1024px) { .pdp-body { grid-template-columns: 1fr; gap: 48px; } }

.pdp-story p { font-size: 18px; line-height: 1.75; color: var(--text); max-width: 56ch; }
.pdp-story p + p { margin-top: 20px; }

.pdp-side { display: flex; flex-direction: column; gap: 40px; }
.pdp-price { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; display: flex; justify-content: space-between; align-items: baseline; }
.pdp-price .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.pdp-price .price { font-family: var(--serif); font-size: 36px; font-weight: 300; }
.pdp-price .price--onreq { font-style: italic; font-size: 26px; color: var(--text-dim); }
/* Cena při montáži (detail spotřebiče) je DRUHÁ POZNÁMKA pod cenou, ne vlastní
   blok: dědí `.ac-price-note` (mono, 11 px, `flex-basis: 100%` → vlastní řádek).
   Podmínka nároku sedí v „?" nápovědě, která se sem půjčuje z konfigurátoru
   sestav (`.sb-help`) — jen si barvu bere z okolního textu, aby fungovala i na
   papírovém podkladu detailu, kde by bílá obrysová linka z původního (tmavého)
   prostředí zmizela. */
.pdp-montaz .sb-help { border-color: currentColor; color: inherit; opacity: .7; margin-left: 6px; }
.pdp-montaz .sb-help:hover, .pdp-montaz .sb-help:focus-visible { opacity: 1; border-color: var(--brand); }
/* Dvě věci, které bublina zdědí z okolí a obě ji rozbijí:
   1. `white-space: nowrap` z `.ac-price-note` (poznámka ho má kvůli ceně) —
      bublina se pak nezalomí a vyleje se přes půl stránky mimo svůj rámeček;
   2. `--text`, které je uvnitř papírové sekce přemapované na `--text-paper`,
      takže text v TMAVÉ bublině vyšel tmavý a zmizel. Přenastavení proměnné je
      týž trik, jakým `.catalog-paper .appl-fb-menu` řeší tmavé menu na papíře. */
/* Bublina se kotví k CELÉMU řádku poznámky, ne k „?" — sdílené pravidlo ji věší
   na `.sb-help` (`position: relative`) a `left: 0` pak znamená „od otazníku
   doprava", takže na mobilu vyjela za pravý okraj a text se ořízl (naměřeno na
   390 px). `position: static` na badge přepne kotvu na `.pdp-montaz` a
   `max-width: 100%` ji drží v šířce cenového sloupce. */
.pdp-montaz { position: relative; }
.pdp-montaz .sb-help { position: static; }
.pdp-montaz .sb-help::after { --text: #f5eee0; white-space: normal; max-width: 100%; }
/* Dotyk: `:focus-visible` se po ťuknutí nemusí uplatnit (prohlížeč ho drží pro
   klávesnici), takže by nápověda na mobilu nešla otevřít vůbec. */
.pdp-montaz .sb-help:focus::after { opacity: 1; transform: translateY(0); }

/* "Na poptávku" — bespoke kitchens & collections show a quote label, no number */
.prod-price--req { color: var(--text-mute); }
.price--req { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--text-mute); white-space: nowrap; }
.totals .sum--req, .summary .onreq, .cart-page .row .onreq { font-family: var(--mono); font-size: 13px; letter-spacing: .03em; color: var(--text-mute); text-transform: none; }

.option-group label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; }
.option-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.option-pill { padding: 12px 18px; border: 1px solid var(--line-strong); font-size: 13px; transition: all 200ms ease; }
.option-pill:hover { border-color: var(--text); }
.option-pill.active { background: var(--text); color: var(--bg); border-color: var(--text); }

.qty-row { display: flex; gap: 12px; align-items: stretch; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.qty button { width: 48px; height: 56px; font-size: 18px; color: var(--text-mute); }
.qty button:hover { color: var(--text); }
.qty .val { width: 44px; text-align: center; font-family: var(--mono); }
.qty-row .btn { flex: 1; justify-content: center; }

/* Kitchen PDP "Technický popis" — deliberately the SAME reading shape as the
   appliance spec list (mono label left / value right, hairline dividers), so a
   kitchen and a spotřebič describe themselves the same way. Rows are derived
   (Linie/Designér/Materiály) + free admin rows (kitchenTechHtml). */
.pdp-tech .specs-table {
  margin-top: 14px;
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
.pdp-tech .specs-table > div {
  display: grid; grid-template-columns: auto 1fr;
  gap: 14px 20px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
}
.pdp-tech .specs-table dt { color: var(--text-mute); letter-spacing: 0.04em; }
.pdp-tech .specs-table dd { color: var(--text); text-align: right; line-height: 1.5; }

/* Kitchens have no price/cart — a single "Nezávazně poptat" CTA opens the
   inquiry modal (KitchenBoard). */
.pdp-inquiry { display: flex; flex-direction: column; gap: 12px; }
.pdp-inquiry .btn { justify-content: center; }
/* Plain .btn on the dark side panel: its ::before fill follows currentColor,
   which :hover flips to --bg → dark-on-dark (button vanishes). Force the fill to
   cream so the outline CTA stays visible on hover (same fix as the cart). */
.pdp-inquiry .btn:not(.solid)::before { background: var(--text); }
.pdp-inquiry-note { font-size: 12px; line-height: 1.55; color: var(--text-mute); }

/* Masonry — varied photo heights compose far better than a uniform 4/5 grid,
   especially for 20–30 shots. Square corners (hranaté). */
.pdp-gallery {
  padding: 80px var(--gutter);
  max-width: var(--container); margin: 0 auto;
  columns: 3; column-gap: 18px;
}
@media (max-width: 1000px) { .pdp-gallery { columns: 2; } }
@media (max-width: 600px)  { .pdp-gallery { columns: 1; } }
.pdp-gallery .tile { break-inside: avoid; margin: 0 0 18px; overflow: hidden; border-radius: var(--r-md); }
.pdp-gallery .tile img { width: 100%; height: auto; display: block; border-radius: var(--r-md); transition: transform 1400ms cubic-bezier(.22,1,.36,1); }
.pdp-gallery .tile:hover img { transform: scale(1.04); }

/* ── Cart drawer ────────────────────────────────────────────────────────── */

.drawer-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.7);
  opacity: 0; pointer-events: none;
  transition: opacity 420ms ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  width: min(480px, 100%);
  background: rgba(14, 11, 8, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 520ms cubic-bezier(.22,1,.36,1);
  border-left: 1px solid rgba(255,255,255,0.08);
  box-shadow: -40px 0 80px rgba(0,0,0,0.4);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  overflow: hidden;
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.drawer-head h3 { font-family: var(--serif); font-size: 28px; font-weight: 300; }
.drawer-head .sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; }
.drawer-head .close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.drawer-head .close svg { width: 20px; height: 20px; stroke: var(--text); stroke-width: 1.2; fill: none; }

.drawer-body {
  flex: 1; overflow-y: auto; padding: 8px 32px;
  /* white panel between the "Váš výběr" header and the "Mezisoučet" foot —
     re-map the tokens so the cart lines render dark-on-light automatically
     (same pattern as .appl-shop-sheet) */
  background: #f8f6f1;
  color: var(--text-paper);
  --text:        var(--text-paper);
  --text-mute:   var(--text-mute-paper);
  --text-dim:    #8a7f6b;
  --line:        var(--line-paper);
  --line-strong: #c9bca3;
}
.drawer-body .cart-line .thumb { border: 1px solid var(--line); }
.drawer-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 24px; text-align: center;
  color: var(--text-mute); padding: 48px 24px;
}
.drawer-empty .ico { width: 56px; height: 56px; border: 1px solid var(--line-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.drawer-empty .ico svg { width: 22px; height: 22px; stroke: var(--text-dim); stroke-width: 1.2; fill: none; }
.drawer-empty h4 { font-family: var(--serif); font-size: 28px; font-weight: 300; color: var(--text); }

.cart-line {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line .thumb { width: 84px; height: 104px; object-fit: contain; padding: 6px; background: #fff; border-radius: var(--r-md); }
.cart-line .info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-line .info .line-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.cart-line .info .name { font-family: var(--serif); font-size: 18px; line-height: 1.2; }
.cart-line .info .opt { font-size: 12px; color: var(--text-mute); }
.cart-line .info .qty-mini { display: inline-flex; align-items: center; margin-top: 10px; border: 1px solid var(--line-strong); width: fit-content; border-radius: 999px; overflow: hidden; }
.cart-line .info .qty-mini button { width: 28px; height: 28px; font-size: 14px; color: var(--text); }
.cart-line .info .qty-mini .val { width: 28px; text-align: center; font-family: var(--mono); font-size: 12px; }
.cart-line .right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.cart-line .right .price { font-family: var(--mono); font-size: 13px; }
.cart-line .right .remove { display: inline-flex; align-items: center; justify-content: center; padding: 4px; background: none; border: 0; cursor: pointer; color: #8b1a1a; transition: color .2s; }
.cart-line .right .remove svg { width: 18px; height: 18px; display: block; }
.cart-line .right .remove:hover { color: #5e0d0d; }

/* Odkaz „Upravit" na řádku sestavy — v zásuvce (`.cart-line .info`, pod
   qty-mini) i na stránce košíku (`.cart-table .cart-row .meta`, pod finish).
   Diskrétní podtržený mono štítek, ne tlačítko: je to druhotná akce vedle
   množství a odebrání. */
.cart-line-edit {
  /* `block` + `fit-content`, ne `inline-block`: v `.cart-table .cart-row
     .meta` sedí HNED za text `finish` ve stejném bloku (žádný oddělovač v
     markupu) — bez vynuceného zalomení by se podtržítko lepilo přímo na
     poslední slovo. V `.cart-line .info` (`display:flex; flex-direction:
     column`) by zase `inline-block` bez vlastní šířky dostal `align-items:
     stretch` a podtržítko by táhlo přes celou šířku sloupce, ne jen pod
     slovem „Upravit". `width: fit-content` řeší oboje najednou — je to
     definitní šířka, takže flex stretch ji nepřebije, a jako blok si
     vynucuje vlastní řádek. */
  display: block; width: fit-content; margin-top: 6px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
  border-bottom: 1px solid var(--line); text-decoration: none;
}
.cart-line-edit:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* Poznámka k řádku sestavy — jantarová jako `.pb-note` v cenové liště
   konfigurátoru, ať zákazník pozná, že je to tatáž věta. NIKDY jako bublina:
   na dotykovém zařízení bublina neexistuje a je to věta o penězích. */
.cart-line-note {
  font-family: var(--mono); font-size: 10px; line-height: 1.5;
  color: #d8b070; letter-spacing: 0.03em; margin-top: 6px; max-width: 30ch;
  /* Sestava je vždy „Na poptávku" → řádek nese i `.price--req`, které si
     drží `white-space: nowrap` (jednořádkový cenový štítek jinde). Ta
     vlastnost DĚDÍ i sem — bez resetu se `max-width` nemá jak projevit:
     box zůstane úzký, ale text z něj vizuálně přeteče ven, nezalomí se. */
  white-space: normal;
}
/* Sestava v tabulce košíku: `.price-line` je grid-item v `auto` sloupci
   (.cart-row), takže bez stropu si poznámka natáhla sloupec na svých 30ch a
   sebrala tu šířku sousednímu `1fr` sloupci se jménem — "Sestava BUCCI" se
   rozlámalo na tři řádky. Strop platí jen zde: v zásuvce (`.right`, flex
   sloupec) a v souhrnu checkoutu (`flex:1` na sloupci se jménem) ke stejné
   kolizi nedochází.
   ⚠ 150px (recenzí nalezená první oprava) na PROJEKTOVÉM standardu 1440×900
   (`goDesktop()` v tests/guest-member/*.test.mjs) pořád nechalo jméno na
   třech řádcích (sloupec 126px) — dvě řádky vycházely až na 1920×1080.
   120px drží jméno na dvou řádcích i na 1440×900 (sloupec 156px), za cenu
   delší poznámky (~6 řádků místo ~5) — beze zbytku únosné, nic se
   nepřekrývá (ověřeno screenshotem). */
.cart-table .cart-row .price-line:has(.cart-line-note) { max-width: 120px; }

.drawer-foot {
  padding: 28px 32px;
  border-top: 1px solid var(--line);
  background: var(--bg-elev-1);
}
.drawer-foot .totals { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 20px; }
.drawer-foot .totals .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-mute); }
.drawer-foot .totals .sum { font-family: var(--serif); font-size: 28px; font-weight: 300; }
.drawer-foot .btn { width: 100%; justify-content: center; border-radius: 999px; }
.drawer-foot .note { font-family: var(--mono); font-size: 10px; color: var(--text-dim); text-align: center; margin-top: 14px; line-height: 1.6; letter-spacing: 0.04em; }

/* ── Cart page ──────────────────────────────────────────────────────────── */

.cart-page { padding-top: calc(var(--nav-h) + 48px); padding-bottom: 140px; }
.cart-head { padding: 0 var(--gutter); max-width: var(--container); margin: 0 auto 64px; }
.cart-head h1 { font-family: var(--serif); font-size: clamp(56px, 9vw, 120px); font-weight: 300; line-height: 0.95; margin-top: 12px; }
.cart-page-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 64px; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 1024px) { .cart-page-grid { grid-template-columns: 1fr; gap: 40px; } }

.cart-table .cart-row {
  display: grid; grid-template-columns: 140px 1fr auto auto auto;
  gap: 32px; padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.cart-table .cart-row .thumb { width: 140px; height: 168px; object-fit: contain; padding: 8px; background: #fff; border-radius: var(--r-md); }
.cart-table .cart-row .name { font-family: var(--serif); font-size: 24px; font-weight: 300; }
.cart-table .cart-row .meta { font-size: 12px; color: var(--text-mute); margin-top: 4px; font-family: var(--mono); letter-spacing: 0.06em; }
.cart-table .cart-row .price-line { font-family: var(--mono); font-size: 14px; }
.cart-table .cart-row .x { display: inline-flex; align-items: center; justify-content: center; padding: 4px; background: none; border: 0; cursor: pointer; color: #8b1a1a; transition: color .2s; }
.cart-table .cart-row .x svg { width: 20px; height: 20px; display: block; }
.cart-table .cart-row .x:hover { color: #5e0d0d; }

@media (max-width: 640px) {
  .cart-table .cart-row { grid-template-columns: 84px 1fr; }
  .cart-table .cart-row .thumb { width: 84px; height: 104px; }
  .cart-table .cart-row .qty, .cart-table .cart-row .price-line, .cart-table .cart-row .x { grid-column: 2; justify-self: start; margin-top: 8px; }
}

/* Košík + checkout na bielom podklade (2026-07-14) — položky aj Souhrn sú
   biele karty ako .appliance-card na /spotrebice. Lokálne premapovanie
   tokenov pokryje všetky inline var(--text-*) / var(--line) v markupe. */
.cart-table, .summary {
  --text: var(--text-paper);
  --text-mute: var(--text-mute-paper);
  --text-dim: #8c7f6a;
  --line: var(--line-paper);
  --line-strong: #b9ac93;
  --bg-elev-1: #ffffff;
  background: var(--bg-panel); /* rovnaká off-white ako .catalog-paper na /spotrebice */
  color: var(--text-paper);
  border: 1px solid var(--line-paper);
  border-radius: var(--r-lg);
}
.cart-table { padding: 6px 36px; align-self: start; }
.cart-table .cart-row:last-child { border-bottom: 0; }
@media (max-width: 640px) { .cart-table { padding: 4px 20px; } }
.summary {
  padding: 40px;
  position: sticky; top: calc(var(--nav-h) + 24px);
  align-self: start;
}
.summary h3 { font-family: var(--serif); font-size: 28px; font-weight: 300; margin-bottom: 28px; }
.summary .row { display: flex; justify-content: space-between; padding: 12px 0; font-size: 14px; }
.summary .row.total { padding-top: 20px; margin-top: 8px; border-top: 1px solid var(--line); }
.summary .row.total .sum { font-family: var(--serif); font-size: 32px; font-weight: 300; }
.summary .btn { width: 100%; justify-content: center; margin-top: 24px; }
/* sekundárne CTA (Rezervovat schůzku): výplň hoveru musí byť krémová, nie
   currentColor — ten sa na hoveri mení na --bg a tlačidlo "sčernie" bez textu */
.summary .btn:not(.solid) { margin-top: 10px; }
.summary .btn:not(.solid)::before { background: var(--text-paper); }
.summary .btn:not(.solid):hover { color: var(--bg-paper); }
/* dark-glass solid by na bielej karte splýval — plný ink + krémový text,
   rovnaký pattern ako .appl-shop-sheet .btn.solid (hover ostáva brand red) */
.summary .btn.solid {
  background: var(--text-paper);
  color: var(--bg-paper);
  border-color: var(--text-paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ── Checkout / forms ───────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.field input, .field textarea, .field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 14px 0;
  color: var(--text); font-size: 15px; font-family: var(--serif);
  transition: border-color 240ms ease;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--brand); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }

/* Rezervovaná výška pre Cloudflare Turnstile widget (~65px pri normálnej
   veľkosti) — bez nej naskočí layout shift, keď sa widget vykreslí async, a
   prázdne miesto pri nevykreslenom widgete (viz turnstile.js `isUnavailable`)
   pôsobí ako chyba layoutu namiesto zámerne prázdneho priestoru. */
.cf-turnstile { min-height: 65px; }

/* Site-grade custom select — replaces the ugly native <select> dropdown in
   forms (studio picker etc.). The trigger keeps the form's underline-input look;
   the menu is a dark-glass popover (same idiom as the catalog facet menus). A
   real <select> stays in the DOM (hidden) so FormData + validation still work. */
.sel { position: relative; }
.sel > select { display: none; }
.sel-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: transparent; border: none; border-bottom: 1px solid var(--line-strong);
  padding: 14px 0; color: var(--text); font-size: 15px; font-family: var(--serif);
  text-align: left; cursor: pointer; transition: border-color 240ms ease;
}
.sel-trigger:hover, .sel.open .sel-trigger { border-bottom-color: var(--brand); }
.sel-trigger .sel-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-trigger.is-placeholder .sel-val { color: var(--text-mute); }
.sel-caret {
  width: 8px; height: 8px; flex: none; margin-right: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: 0.6; transition: transform 220ms ease;
}
.sel.open .sel-caret { transform: rotate(-135deg) translateY(2px); opacity: 0.9; }
.sel-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50;
  display: none; flex-direction: column; gap: 2px;
  max-height: 264px; overflow-y: auto; padding: 8px;
  background: rgba(28,24,19,0.98);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245,238,224,0.16); border-radius: var(--r-md);
  box-shadow: 0 26px 64px -22px rgba(0,0,0,0.8);
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(245,238,224,0.28) transparent;
}
.sel.open .sel-menu { display: flex; }
.sel-menu::-webkit-scrollbar { width: 8px; }
.sel-menu::-webkit-scrollbar-thumb { background: rgba(245,238,224,0.22); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.sel-opt {
  display: block; width: 100%; text-align: left; padding: 11px 12px;
  font-family: var(--sans); font-size: 14px; line-height: 1.35; color: var(--text-mute);
  background: none; border: none; border-radius: var(--r-sm); cursor: pointer;
  white-space: normal; transition: background 160ms ease, color 160ms ease;
}
.sel-opt:hover, .sel-opt.is-active { background: rgba(245,238,224,0.07); color: var(--text); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer {
  background: #05040a;
  border-top: 1px solid var(--line);
  padding: 120px 0 32px;
  color: var(--text-mute);
}
.footer-cta {
  text-align: center;
  padding-bottom: 96px; margin-bottom: 96px;
  border-bottom: 1px solid var(--line);
}
/* margin-top 24px, ne 16 — line-height 0.95 nechá háček „Začněte" přesahovat nad
   řádkový box rovnou do eyebrow (viz obecné pravidlo u .display-*). Zkrácený
   zápis `margin:` je specifičtější kombinací než obecný selektor, takže mezeru
   musí nastavit tenhle řádek. */
.footer-cta h2 { font-size: clamp(48px, 7vw, 110px); line-height: 0.95; max-width: 18ch; margin: 24px auto 32px; color: var(--text); font-weight: 300; }

.footer-grid {
  display: grid; grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 80px;
}
.footer h3, .footer h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text); margin-bottom: 24px; font-weight: 400; }
/* Přístupnost (audit 2026-09-05, A6): <header> je jen landmark, .nav zůstává v toku body pro layout. */
.site-header { display: contents; }
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 10000; padding: 12px 18px; background: var(--brand); color: #fff; font-family: var(--sans); font-size: 14px; border-radius: var(--r-xs); text-decoration: none; }
.skip-link:focus { left: 12px; outline: 2px solid #fff; outline-offset: 2px; }
main:focus { outline: none; }
/* Ovládač ambientního videa (audit C6, assets/js/video-toggle.js) — sedí PŘÍMO NA VIDEU
   v pravém dolním rohu přehrávače (majitel 8. 9. 2026: ne plovoucí tlačítko na stránce,
   ne na home). Rodič videa dostane .video-ctl-host jen když je static.
   Vztažným prvkem je VLASTNÍ RÁM videa, protože jeho rodič bývá vyšší než ono a
   `bottom: 12px` pak ovládač posadí pod video: popiska je v půlce bloků sourozencem
   videa (galerie s textem, video blok s popiskem, video_feature, editorial) a buňka
   karuselu se navíc roztahuje na výšku nejvyšší buňky v pásu i BEZ popisky. Rám proto
   dostane každé video kromě absolutně pozicovaného (hero, band, media grid — tam je
   rámem sám rodič); vkládá ho video-toggle.js. `align-self: flex-start`: buňka karuselu
   je sloupcový flex, roztažený rám by byl zase vysoký jako ona (týž důvod jako
   u .st-gal-link). `line-height: 0` drží rám na výšce videa — mezera pod inline boxem
   by ovládač posunula o pár pixelů pod spodní hranu. */
.video-ctl-host { position: relative; }
.video-ctl-frame { position: relative; display: block; align-self: flex-start; line-height: 0; max-width: 100%; }
/* jediné místo, kde video dědí výšku od rodiče — rám ji musí propustit dál */
.st-vf-fullgrid .video-ctl-frame { height: 100%; }
.video-ctl { position: absolute; right: 12px; bottom: 12px; z-index: 5; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; background: rgba(10,9,8,0.55); color: #fff; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 160ms ease, opacity 160ms ease; }
.video-ctl:hover, .video-ctl:focus-visible { background: rgba(10,9,8,0.8); outline: none; }
.video-ctl:focus-visible { box-shadow: 0 0 0 2px #fff; }
.video-ctl[hidden] { display: none; }
.footer-social { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 150px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--text-mute);
  transition: color .3s, border-color .3s, background .3s, transform .3s;
}
.footer-social a:hover { color: #fff; border-color: var(--brand); background: var(--brand); transform: translateY(-2px); }
.footer-social svg { width: 19px; height: 19px; display: block; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer a:hover { color: var(--text); }
.footer .brand-wide {
  font-family: var(--serif); font-size: 42px; color: var(--text);
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 16px; font-weight: 300; letter-spacing: 0.02em;
}
.footer .brand-wide .est { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--text-mute); }
.footer .brand-wide .footer-logo { height: 38px; width: auto; display: block; }
.footer p.copy { max-width: 320px; line-height: 1.7; font-size: 14px; }
.footer-contact { display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.footer-social + .footer-contact { margin-top: 24px; }
.footer-contact a { color: var(--text); width: fit-content; }
.footer-contact .fc-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-dim); }
.footer-contact .fc-meta + a { margin-top: 10px; }
.footer .bottom {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding-top: 32px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.06em;
}
.footer .bottom .bottom-logo { justify-self: center; }
.footer .bottom .footer-logo { height: 30px; width: auto; display: block; }
.footer .bottom .bottom-langs { justify-self: end; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } .footer .bottom { grid-template-columns: 1fr; justify-items: center; gap: 12px; } .footer .bottom .bottom-langs { justify-self: center; } }

/* O nás hub tiles + menu secondary small-links group */
.onas-tiles { padding: 0 0 80px; }
.onas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.onas-tile { display: flex; flex-direction: column; gap: 8px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,0.02); transition: border-color .3s, transform .3s; overflow: hidden; }
.onas-tile:hover { border-color: var(--brand); transform: translateY(-2px); }
.onas-tile-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); }
.onas-tile-name { font-family: var(--serif); font-size: 24px; color: var(--text); }
.onas-tile-go { margin-top: auto; color: var(--brand); display: inline-flex; }
.onas-tile-go svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none; transition: transform .3s; }
.onas-tile:hover .onas-tile-go svg { transform: translateX(5px); }
/* photo variant: cover image on top, copy below */
.onas-tile--photo { padding: 0; }
.onas-tile-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.onas-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.onas-tile--photo:hover .onas-tile-media img { transform: scale(1.04); }
.onas-tile--photo .onas-tile-body { display: flex; flex-direction: column; gap: 8px; padding: 24px 28px 28px; }
.onas-tile--photo .onas-tile-go { margin-top: 6px; }
@media (max-width: 860px) { .onas-grid { grid-template-columns: 1fr 1fr; } }

/* ── Historie: časová osa firmy (/o-nas) ──────────────────────────────────
   Horizontální osa hnaná scrollem: #hist-track dostane od setupPinnedScroll
   výšku, .hist-stage se přilepí na viewport a pás jede zprava doleva. Přes
   celé jeviště běží vodorovná hairlinka, po které roste červený progres;
   každá éra začíná slidem s přízračným letopočtem, karty ji následují a
   střídavě se houpou nad a pod linku. Pod 980px se celé rozpadne do svislého
   sloupce — mechanika pinu tam nemá smysl. */
.onas-hist { position: relative; padding: 56px 0 64px; }
/* Dýha z konfigurátoru jako sotva viditelné pozadí. POZOR: sekce nesmí mít
   overflow:hidden — uřízl by position:sticky jeviště uvnitř. */
.onas-hist::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('../data/o-nas/historie/_tex-dyha.jpg') center / 900px auto repeat;
  opacity: .05;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.onas-hist > * { position: relative; z-index: 1; }

.hist-intro { max-width: 720px; }
.hist-intro .eyebrow { display: block; margin-bottom: 12px; }
.hist-intro .display-m { font-size: clamp(30px, 3.8vw, 46px); }
.hist-intro .info-lead { margin-top: 14px; font-size: 15px; }

#hist-track { margin-top: 8px; }
.hist-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }

/* Vodorovná linka + progres. Progres svítí — je to jediný pohyblivý akcent. */
.hist-hline, .hist-hprog { position: absolute; left: 0; top: 58%; height: 1px; }
.hist-hline { right: 0; background: var(--line); z-index: 0; }
.hist-hprog { width: 0; background: var(--brand); z-index: 1;
  box-shadow: 0 0 14px rgba(200, 38, 44, .5); }

.hist-rail { position: absolute; inset: 0; z-index: 1; }
.hist-rail-inner {
  height: 100%; display: flex; align-items: center;
  gap: clamp(28px, 3vw, 56px);
  padding: 0 14vw 0 max(var(--gutter), 6vw);
  will-change: transform;
}

/* Slide éry: přízračný letopočet přes celé jeviště, uzel na lince, obsah. */
.hist-slide {
  position: relative; flex: 0 0 auto; width: clamp(380px, 30vw, 520px);
  height: 100%; display: flex; align-items: center;
}
.hist-ghost {
  position: absolute; left: -4vw; top: 50%; transform: translateY(-54%);
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(220px, 24vw, 400px); line-height: 1; letter-spacing: -.04em;
  color: var(--text); opacity: .05; pointer-events: none; user-select: none;
}
.hist-dot {
  position: absolute; left: 0; top: 58%; width: 9px; height: 9px; margin-top: -4px;
  border-radius: 50%; background: var(--brand); z-index: 2;
}
.hist-slide-body { position: relative; z-index: 1; padding-left: 26px; }
.hist-slide-no {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .24em; color: var(--brand); margin-bottom: 10px;
}
.hist-years {
  display: block; font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 4.6vw, 72px); line-height: 1; letter-spacing: -.02em;
  color: var(--text);
}
.hist-era-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(19px, 2vw, 26px); line-height: 1.2;
  margin: 10px 0 0; color: var(--brand);
}
.hist-era-title .italic { font-style: italic; }
.hist-era-lead { margin-top: 14px; max-width: 40ch; }
.hist-era-lead p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.65; color: var(--text-dim); }
.hist-era-lead p:last-child { margin-bottom: 0; }

/* Karta: panel s NEPRŮHLEDNÝM podkladem (linka za ní nesmí prosvítat) a
   střídavým vertikálním houpáním kolem linky. Houpe se marginem, ne
   transformem — transform si řídí .reveal a přepsal by ho. */
.hist-card {
  position: relative; z-index: 1; flex: 0 0 auto; align-self: center;
  width: clamp(340px, 27vw, 430px);
  max-height: calc(100vh - 220px); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: linear-gradient(rgba(255,255,255,.025), rgba(255,255,255,.025)) var(--bg);
  padding: 14px;
}
.hist-card:not(.hist-card--flip) { margin-bottom: 6vh; }
.hist-card--flip { margin-top: 6vh; }
/* Pojistka na dlouhý text: karta se u dna vytratí místo tvrdého říznutí. */
.hist-card::after {
  content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 26px;
  background: linear-gradient(transparent, var(--bg));
  border-radius: 0 0 var(--r-md) var(--r-md); pointer-events: none;
}

/* Pevný poměr drží rytmus osy — zdroje kolísají od 4:3 po skoro čtverec. */
.hist-card-hero { margin: 0; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16 / 10; }
.hist-card-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hist-card-strip {
  margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.hist-card-strip.is-few { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.hist-card-strip img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--r-xs);
}
.hist-card-text { padding: 12px 6px 8px; }
.hist-card-title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.25; margin: 0 0 8px; color: var(--text);
}
.hist-card-sub {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand); margin: 0 0 8px;
}
.hist-card-text p { margin: 0 0 9px; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.hist-card-text p:last-child { margin-bottom: 0; }

/* Čítač období vlevo dole na jevišti. */
.hist-hud {
  position: absolute; left: var(--gutter); bottom: 26px; z-index: 2;
  font-family: var(--mono); font-size: 11px; letter-spacing: .24em;
  color: var(--text);
}
.hist-hud-total { color: var(--text-dim); }

/* Tečka za osou — hairlinky po stranách, mono tag uprostřed. */
.hist-outro {
  margin-top: 40px; display: flex; align-items: center; gap: 22px; text-align: center;
}
.hist-outro::before, .hist-outro::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.hist-outro-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-dim); white-space: nowrap;
}

/* Nízká okna: karta má míň místa na výšku, ubere se z houpání i typografie. */
@media (max-height: 860px) {
  .hist-card:not(.hist-card--flip) { margin-bottom: 4vh; }
  .hist-card--flip { margin-top: 4vh; }
  .hist-card { width: clamp(320px, 25vw, 400px); }
  .hist-card-text p { font-size: 12.5px; }
}

@media (max-width: 980px) {
  /* Svislý fallback: pin nemá na dotyku smysl, obsah jde pod sebou. JS na
     mobilu transform neuklízí (update() končí dřív), proto !important. */
  #hist-track { height: auto !important; margin-top: 0; }
  .hist-stage { position: static; height: auto; overflow: visible; }
  .hist-hline, .hist-hprog, .hist-hud, .hist-ghost, .hist-dot { display: none; }
  .hist-rail { position: static; }
  .hist-rail-inner {
    display: block; height: auto; transform: none !important;
    padding: 0 var(--gutter); will-change: auto;
  }
  .hist-slide { width: auto; height: auto; display: block; margin: 34px 0 14px; }
  .hist-slide-body { padding-left: 0; }
  .hist-years { font-size: clamp(30px, 8vw, 44px); }
  .hist-era-lead { max-width: none; }
  .hist-card {
    width: auto; margin: 14px 0 !important; max-height: none; align-self: auto;
  }
  .hist-card::after { display: none; }
  .hist-outro { margin-top: 30px; }
}
@media (max-width: 540px) { .onas-grid { grid-template-columns: 1fr; } }

.nav-menu-panel .nav-links-rule { height: 1px; background: var(--line); margin: 20px 0 4px; opacity: .5; }
.nav-menu-panel .nav-links-sub { display: flex; flex-direction: column; gap: 10px; }
.nav-menu-panel .nav-links-sub a { font-size: 13px; color: rgba(245,238,224,0.55); }
.nav-menu-panel .nav-links-sub a:hover { color: #fff !important; }
.nav-menu-panel .nav-links-sub a.active { color: #fff !important; }

/* ── Booking modal (glass, 4 steps) ─────────────────────────────────────── */

.bk-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(5, 4, 8, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none;
  transition: opacity 380ms ease;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.bk-overlay.open { opacity: 1; pointer-events: auto; }

.bk-modal {
  width: 100%; max-width: 720px;
  max-height: 90vh; overflow: hidden;
  background: rgba(20, 17, 13, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 238, 224, 0.16);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset;
  display: flex; flex-direction: column;
  transform: translateY(28px) scale(0.98);
  opacity: 0;
  transition: transform 420ms cubic-bezier(.22,1,.36,1), opacity 380ms ease;
}
.bk-overlay.open .bk-modal { transform: translateY(0) scale(1); opacity: 1; }

.bk-head {
  padding: 28px 36px 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px;
}
.bk-head .info span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-mute); }
.bk-head .info h3 { font-family: var(--serif); font-size: 28px; font-weight: 300; margin-top: 6px; }
.bk-head .close { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); transition: background 200ms ease; }
.bk-head .close:hover { background: rgba(255,255,255,0.10); }
.bk-head .close svg { width: 16px; height: 16px; stroke: var(--text); stroke-width: 1.4; fill: none; }

.bk-steps {
  display: flex; gap: 6px;
  padding: 20px 36px 0;
}
.bk-step-dot {
  flex: 1; height: 2px;
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.bk-step-dot::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 0; background: var(--brand);
  transition: width 600ms cubic-bezier(.22,1,.36,1);
}
.bk-step-dot.done::after { width: 100%; }
.bk-step-dot.active::after { width: 50%; }

.bk-body { padding: 36px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(245,238,224,0.18) transparent; }
.bk-body::-webkit-scrollbar { width: 10px; }
.bk-body::-webkit-scrollbar-track { background: transparent; }
.bk-body::-webkit-scrollbar-thumb { background: rgba(245,238,224,0.16); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.bk-body::-webkit-scrollbar-thumb:hover { background: rgba(245,238,224,0.28); background-clip: padding-box; }
.bk-step-title { font-family: var(--serif); font-size: 36px; font-weight: 300; line-height: 1.05; margin-bottom: 10px; }
.bk-step-title em { font-style: italic; color: var(--text-mute); font-weight: 300; }
.bk-step-sub { color: var(--text-mute); font-size: 14px; line-height: 1.6; margin-bottom: 32px; max-width: 50ch; }

.bk-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .bk-cards { grid-template-columns: 1fr; } }
/* Typy schůzek — na desktopu tři na řádek, mobil dědí jednosloupcový layout
   výš. Flex místo gridu záměrně: studio se dvěma (či jedním) zapnutým typem
   dostane karty VYSTŘEDĚNÉ — grid by je nechal viset vlevo s prázdným třetím
   sloupcem. Šířka karty zůstává třetinová bez ohledu na počet. */
@media (min-width: 761px) {
  .bk-cards-types { display: flex; flex-wrap: wrap; justify-content: center; }
  .bk-cards-types .bk-card { flex: 0 1 calc((100% - 32px) / 3); min-width: 0; }
}
.bk-card {
  display: block; padding: 24px;
  border-radius: 14px;
  border: 1px solid rgba(245, 238, 224, 0.14);
  background: rgba(245, 238, 224, 0.04);
  text-align: left;
  transition: all 280ms ease;
  position: relative;
}
.bk-card:hover { background: rgba(245, 238, 224, 0.08); border-color: rgba(245, 238, 224, 0.30); }
.bk-card.active {
  background: rgba(245, 238, 224, 0.10);
  border-color: rgba(245, 238, 224, 0.55);
}
.bk-card .ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(245, 238, 224, 0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.bk-card .ico svg { width: 18px; height: 18px; stroke: var(--text); stroke-width: 1.4; fill: none; }
.bk-card .ttl { font-family: var(--serif); font-size: 20px; font-weight: 300; line-height: 1.2; }
.bk-card .desc { font-size: 13px; color: var(--text-mute); margin-top: 8px; line-height: 1.6; }
.bk-card .check {
  position: absolute; top: 18px; right: 18px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(245,238,224,0.4);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: all 200ms ease;
}
.bk-card.active .check { background: var(--brand); border-color: var(--brand); }
.bk-card .check svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 2; fill: none; opacity: 0; transition: opacity 200ms ease; }
.bk-card.active .check svg { opacity: 1; }

.bk-note { color: var(--text-mute); font-size: 14px; line-height: 1.6; padding: 6px 0 2px; }

/* Poznámka pod potvrzením rezervace: kam se podívat, když potvrzovací e-mail
   nedorazí. Je podřízená hlavnímu sdělení VELIKOSTÍ, ne barvou — `--text-dim`
   dává na kartě modálu jen 3,3:1, což je pod AA, a tenhle řádek má člověk
   opravdu přečíst. `--text-mute` (7,2:1) drží hierarchii i čitelnost. */
.bk-spam-hint {
  color: var(--text-mute);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
  max-width: 46ch;
  margin: 14px auto 0;
}
.bk-spam-hint strong { color: var(--text); font-weight: 500; }

/* Zabraný termín — board rezervaci odmítl (409) a zákazník si má vybrat jiný
   čas. Stojí NAD kalendářem, ne místo něj (viz `takenHTML` v app.js), takže
   musí být vidět na první pohled: proužek ve značkové červené, ne šedý text
   jako ostatní `.bk-note`. */
.bk-slot-taken {
  color: var(--text); padding: 11px 14px; margin: 4px 0 14px;
  border-left: 2px solid var(--brand); border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--brand) 9%, transparent);
}

/* studio search */
.bk-search {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px; margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid rgba(245, 238, 224, 0.14);
  background: rgba(245, 238, 224, 0.04);
  transition: border-color 200ms ease, background 200ms ease;
}
.bk-search:focus-within { border-color: rgba(245, 238, 224, 0.42); background: rgba(245, 238, 224, 0.07); }
.bk-search svg { width: 16px; height: 16px; flex: none; stroke: var(--text-mute); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.bk-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font-family: var(--sans); font-size: 15px; }
.bk-search input::placeholder { color: var(--text-dim); }

/* studio list (single body scroll — no nested scrollbar) */
.bk-city-list { display: flex; flex-direction: column; gap: 6px; }
.bk-city {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 3px 16px; padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(245, 238, 224, 0.10);
  background: rgba(245, 238, 224, 0.03);
  text-align: left; transition: background 180ms ease, border-color 180ms ease;
}
/* the search hides rows via the [hidden] attribute, but author `display: grid`
   overrides the UA [hidden]{display:none} (author origin wins) — so this explicit
   rule is REQUIRED for the live filter to actually hide rows. */
.bk-city[hidden] { display: none; }
.bk-city .nm { grid-column: 1; font-family: var(--serif); font-size: 17px; font-weight: 300; line-height: 1.2; }
.bk-city .ad { grid-column: 1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: var(--text-mute); }
.bk-city .go { grid-column: 2; grid-row: 1 / 3; align-self: center; display: flex; }
.bk-city .go svg { width: 18px; height: 18px; stroke: var(--text-mute); stroke-width: 1.4; fill: none; opacity: 0; transform: translateX(-6px); transition: opacity 220ms ease, transform 220ms ease; }
.bk-city:hover { background: rgba(245, 238, 224, 0.07); border-color: rgba(245, 238, 224, 0.30); }
.bk-city:hover .go svg { opacity: 1; transform: translateX(0); stroke: var(--text); }
.bk-city-empty { color: var(--text-mute); font-size: 14px; padding: 16px 4px; }
.bk-city .km { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--brand); margin-left: 8px; white-space: nowrap; }

/* silent auto-location status line */
.bk-geostat {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
}
.bk-geostat svg { width: 14px; height: 14px; flex: none; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bk-geostat.busy { color: var(--text-dim); }
.bk-geostat.busy svg { animation: bkPulse 1s ease-in-out infinite; }
.bk-geostat.done { color: var(--brand); }
/* Napsané místo je jméno, ne štítek — verzálky s prostrkáním se na „Křížová,
   Brno" čtou špatně a v 10px mono se dlouhý název nevejde na řádek. */
.bk-geostat { flex-wrap: wrap; }
.bk-geostat b { font-weight: 500; text-transform: none; letter-spacing: 0.04em; }
@keyframes bkPulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

/* collapsed selected-studio bar */
.bk-pick {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-radius: 14px;
  border: 1px solid rgba(245, 238, 224, 0.20);
  background: rgba(245, 238, 224, 0.06);
}
.bk-pick-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bk-pick-info .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.bk-pick-info .nm { font-family: var(--serif); font-size: 21px; font-weight: 300; line-height: 1.15; }
.bk-change {
  flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-mute); padding: 9px 15px; border-radius: 999px;
  border: 1px solid rgba(245, 238, 224, 0.20); background: transparent; transition: color 200ms ease, border-color 200ms ease;
}
.bk-change:hover { color: var(--text); border-color: rgba(245, 238, 224, 0.45); }

/* ── Date picker: month calendar (left) + time-slot cards (right) ── */
.bk-cal-wrap {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: 28px; align-items: start;
}
@media (max-width: 600px) { .bk-cal-wrap { grid-template-columns: 1fr; gap: 24px; } }

.bk-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.bk-cal-month {
  font-family: var(--serif); font-size: 17px; font-weight: 300;
  text-transform: capitalize; letter-spacing: 0.01em;
}
.bk-cal-nav {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid rgba(245, 238, 224, 0.28);
  color: #fff; transition: color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}
.bk-cal-nav svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bk-cal-nav:hover:not(:disabled) { color: #fff; border-color: rgba(245, 238, 224, 0.7); }
.bk-cal-nav:disabled { opacity: 0.3; cursor: default; }
.bk-cal-nav#bk-cal-prev svg { transform: rotate(180deg); }

.bk-cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px;
}
.bk-cal-dow span {
  text-align: center; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim);
}
.bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bk-cd {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 15px; border-radius: 9px;
  color: var(--text-dim); transition: background 160ms ease, color 160ms ease;
}
.bk-cd--pad { pointer-events: none; }
.bk-cd:disabled { cursor: default; }            /* days without slots: dimmed, inert */
.bk-cd.has { color: var(--text); cursor: pointer; }
.bk-cd.has:hover { background: rgba(245, 238, 224, 0.10); }
.bk-cd.active { background: var(--brand); color: #fff; }
.bk-cd.active:hover { background: var(--brand); }

/* slots column */
.bk-slots-col { border-left: 1px solid rgba(245, 238, 224, 0.10); padding-left: 28px; }
@media (max-width: 600px) { .bk-slots-col { border-left: 0; padding-left: 0; } }
.bk-slots-eyebrow {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-dim);
}
.bk-slots-date { display: block; font-family: var(--serif); font-size: 19px; margin-top: 4px; margin-bottom: 16px; }
/* 2-col grid so every time fits with no scroll ("slider"); "Je mi to jedno" spans both */
.bk-slots-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-slot--any { grid-column: 1 / -1; }
.bk-slot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 11px 34px 11px 13px; border-radius: 11px; position: relative; text-align: left;
  border: 1px solid rgba(245, 238, 224, 0.14);
  background: rgba(245, 238, 224, 0.04);
  transition: background 160ms ease, border-color 160ms ease;
}
.bk-slot:hover { background: rgba(245, 238, 224, 0.09); border-color: rgba(245, 238, 224, 0.3); }
.bk-slot.active { background: var(--brand); border-color: var(--brand); }
.bk-slot-main { font-family: var(--serif); font-size: 15.5px; line-height: 1.15; white-space: nowrap; }
.bk-slot--any .bk-slot-main { font-size: 16px; }
.bk-slot-sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.02em; color: var(--text-mute); white-space: nowrap; }
.bk-slot.active .bk-slot-sub { color: rgba(255, 255, 255, 0.82); }
.bk-slot-radio {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; border-radius: 999px;
  border: 1.5px solid rgba(245, 238, 224, 0.4); transition: border-color 160ms ease;
}
.bk-slot:hover .bk-slot-radio { border-color: rgba(245, 238, 224, 0.7); }
.bk-slot-radio.on { border-color: #fff; }
.bk-slot-radio.on::after {
  content: ''; position: absolute; inset: 3px; border-radius: 999px; background: #fff;
}

.bk-foot {
  padding: 20px 36px 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.bk-foot .bk-summary { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--text-mute); }
.bk-foot-actions { display: flex; gap: 10px; flex: none; }

/* „Vyberte prosím studio…" — proč v PATIČCE a ne toastem: `.toast` má na
   desktopu z-index 300 a `.bk-overlay` 400, takže se hláška kreslila POD modál
   a zákazník po kliknutí na „Pokračovat" neviděl vůbec nic. Tady je v místě,
   kam se zrovna dívá — hned vedle tlačítka, které zmáčkl. Zabírá slot po
   shrnutí (app.js ho na tu chvíli skryje): patička je jeden flexový řádek a na
   úzkém displeji je na obojí místo jen jednou. */
.bk-foot .bk-err {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; line-height: 1.4; color: var(--text);
  animation: bk-err-in 260ms cubic-bezier(.22,1,.36,1) both;
}
.bk-foot .bk-err::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 10px rgba(200,38,44,0.7);
}
/* `[hidden]` prohrává s `display:flex` na stejné specificitě — stejná past
   jako u `.bk-foot .btn[hidden]` o dva řádky výš. */
.bk-foot .bk-err[hidden] { display: none; }
@keyframes bk-err-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Kam má zákazník kliknout. Hláška sama („Vyberte termín") neřekne, že
   kalendář je o dvě obrazovky výš — tohle to ukáže. Rámeček ZŮSTÁVÁ, dokud
   krok nepokročí; pulz je jen zavedení pohledu (a jednou, ne dokola: blikající
   rámeček přes celý seznam se po chvíli čte jako závada stránky). */
.bk-needs {
  border-radius: var(--r-md);
  outline: 1px solid color-mix(in srgb, var(--brand) 62%, transparent);
  outline-offset: 4px;
  animation: bk-needs-pulse 1.5s cubic-bezier(.22,1,.36,1) 1 both;
}
/* Pole kontaktního kroku má jen spodní linku, takže rámeček kolem `.field`
   potřebuje dýchat dovnitř, ne ven. */
.bk-body .field.bk-needs {
  outline-offset: 0; padding: 4px 8px; margin-left: -8px; margin-right: -8px;
  border-radius: var(--r-xs);
}
@keyframes bk-needs-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200,38,44,0.36); }
  55%  { box-shadow: 0 0 0 8px rgba(200,38,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,38,44,0); }
}
@media (prefers-reduced-motion: reduce) {
  .bk-foot .bk-err, .bk-needs { animation: none; }
}
/* renderStep() skrývá "Zpět" na prvním kroku přes .hidden, jenže .btn má
   display:flex, které atribut přebije — bez tohohle svítí mrtvé tlačítko. */
.bk-foot .btn[hidden] { display: none; }

@media (max-width: 600px) {
  /* The whole sheet is sized to fit ONE phone screen — the mode step used to
     cut the second card off mid-sentence and force a scroll. Every trim below
     buys vertical room; dvh (with a vh fallback) follows the browser chrome. */
  .bk-overlay { padding: 12px; }
  .bk-modal { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .bk-head { padding: 20px 22px 0; }
  .bk-head .info h3 { font-size: 23px; }
  .bk-steps { padding: 14px 22px 0; }
  .bk-body { padding: 22px; }
  .bk-step-title { font-size: 26px; margin-bottom: 8px; }
  .bk-step-sub { font-size: 13.5px; margin-bottom: 20px; }
  .bk-foot { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 22px 22px; }
  .bk-foot .bk-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bk-foot-actions { justify-content: flex-end; }

  /* Karty typů schůzek: ikona vedle textu místo nad ním — ušetří ~60 px na
     kartu. Text drží druhý sloupec explicitně: karta má tři textové řádky
     (název, trvání, popis), takže auto-placement by poslední z nich odsunul
     pod ikonu. */
  .bk-cards { gap: 10px; }
  .bk-card {
    display: grid; grid-template-columns: 38px 1fr;
    column-gap: 14px; align-items: start;
    padding: 15px 44px 15px 15px;
  }
  .bk-card .ico {
    width: 38px; height: 38px; border-radius: 9px;
    grid-row: 1 / span 2; align-self: start; margin-bottom: 0;
  }
  .bk-card .ttl, .bk-card .desc { grid-column: 2; }
  .bk-card .ttl { font-size: 18px; align-self: center; }
  .bk-card .desc { font-size: 12.5px; line-height: 1.5; margin-top: 5px; }
  .bk-card .check { top: 15px; right: 15px; width: 20px; height: 20px; }

  /* Krok "Vaše údaje": jméno+příjmení zpátky vedle sebe (globální .field-row
     se pod 540px láme na jeden sloupec) a sevřenější rytmus polí. Scopnuté na
     .bk-body — stejné třídy nese checkout, kde je místa dost. */
  .bk-body .field { margin-bottom: 14px; gap: 5px; }
  .bk-body .field-row { grid-template-columns: 1fr 1fr; gap: 14px; }
  /* Bez tohohle sloupce přetečou: grid item má min-width:auto a <input> si nese
     intrinsickou šířku ~20 znaků, což je na 390px displeji víc než 1fr. */
  .bk-body .field-row > .field { min-width: 0; }
  .bk-body .field input,
  .bk-body .field textarea { width: 100%; min-width: 0; }
  .bk-body .field textarea { height: 74px; }
}

/* Krátké displeje (starší telefony): další stupeň stažení, ať se výběr způsobu
   pořád vejde bez scrollování. */
@media (max-width: 600px) and (max-height: 720px) {
  .bk-head { padding: 16px 18px 0; }
  .bk-head .info h3 { font-size: 21px; }
  .bk-steps { padding: 12px 18px 0; }
  .bk-body { padding: 18px; }
  .bk-step-title { font-size: 23px; margin-bottom: 6px; }
  .bk-step-sub { font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
  .bk-card { padding: 13px 40px 13px 13px; }
  .bk-card .ico { width: 34px; height: 34px; }
  .bk-card .ttl { font-size: 17px; }
  .bk-card .desc { font-size: 12px; }
  .bk-foot { gap: 10px; padding: 12px 18px 18px; }
  .bk-body .field { margin-bottom: 11px; }
  .bk-body .field input { padding: 11px 0; }
  .bk-body .field textarea { height: 62px; padding: 10px 0; }
}

/* Velmi nízký viewport — malý telefon (320×568) i telefon na šířku. Gate je
   ZÁMĚRNĚ jen na výšku: na šířku má telefon přes 600 px, takže užší breakpointy
   výše se ho netýkají, a přitom je to ten nejsevřenější případ ze všech.
   Karty proto dostávají vodorovný layout i tady, ne jen v mobilní větvi. */
@media (max-height: 620px) {
  .bk-overlay { padding: 10px; }
  .bk-modal { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
  .bk-head { padding: 14px 16px 0; }
  .bk-head .info span { font-size: 9px; letter-spacing: 0.18em; }
  .bk-head .info h3 { font-size: 19px; margin-top: 3px; }
  .bk-head .close { width: 32px; height: 32px; }
  .bk-steps { padding: 10px 16px 0; }
  .bk-body { padding: 14px 16px; }
  .bk-step-title { font-size: 21px; margin-bottom: 5px; }
  .bk-step-sub { font-size: 12.5px; line-height: 1.45; margin-bottom: 13px; }
  .bk-cards { gap: 8px; }
  .bk-card {
    display: grid; grid-template-columns: 32px 1fr;
    column-gap: 11px; align-items: start;
    padding: 11px 36px 11px 11px;
  }
  .bk-card .ico {
    width: 32px; height: 32px; border-radius: 8px;
    grid-row: 1 / span 2; align-self: start; margin-bottom: 0;
  }
  .bk-card .ico svg { width: 16px; height: 16px; }
  .bk-card .ttl { font-size: 16px; align-self: center; }
  .bk-card .desc { font-size: 11.5px; line-height: 1.45; margin-top: 4px; }
  .bk-card .check { top: 11px; right: 11px; width: 18px; height: 18px; }
  /* patička zpátky na jeden řádek — sloupcová stojí ~34 px navíc */
  .bk-foot { flex-direction: row; align-items: center; gap: 10px; padding: 10px 16px 14px; }
  .bk-foot .bk-summary { -webkit-line-clamp: 1; font-size: 10px; letter-spacing: 0.1em; }
  .bk-body .field { margin-bottom: 9px; gap: 4px; }
  .bk-body .field input { padding: 9px 0; font-size: 14px; }
  .bk-body .field textarea { height: 52px; padding: 8px 0; font-size: 14px; }
}

/* Úzký A nízký displej (320×568): vedle dvou tlačítek zbyde na shrnutí v
   jednořádkové patičce pár znaků ("Náv…"), což vypadá rozbitě. Radši pryč —
   výběr je vidět v obsahu kroku i na potvrzení. */
@media (max-width: 420px) and (max-height: 620px) {
  .bk-foot .bk-summary { display: none; }
}

/* ── Toast ──────────────────────────────────────────────────────────────── */

.toast {
  position: fixed; bottom: 32px; left: 50%; transform: translate(-50%, 100px);
  background: rgba(28, 24, 19, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(245,238,224,0.16);
  color: var(--text);
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  /* 1500, ne 300: pod modály (.bk-overlay 400, .at-busy 500, .vp-modal 1000,
     .mlb 1450) byl toast NEVIDITELNÝ — hlášky rezervačního modálu se kreslily
     pod jeho ztmavení a blur a zákazník po kliknutí neviděl nic. Mobil má
     `html.m-on .toast` na 1500 odjakživa (mobile.css), takže tam ta chyba
     nikdy nebyla; tohle jen srovnává desktop. Pod lištou se souhlasem (1600)
     zůstává schválně — ta musí být vždycky navrchu.
     `pointer-events: none`, protože toast nemá co klikat a nesmí spolknout
     klik na tlačítko, přes které zrovna přeletěl. */
  z-index: 1500; pointer-events: none;
  box-shadow: 0 18px 50px rgba(0,0,0,0.42);
  transition: transform 480ms cubic-bezier(.22,1,.36,1);
  display: flex; align-items: center; gap: 12px;
}
.toast.show { transform: translate(-50%, 0); }
.toast .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px rgba(200,38,44,0.7); }

/* ── Misc ───────────────────────────────────────────────────────────────── */

.spacer-l { height: 120px; }
.divider { height: 1px; background: var(--line); margin: 0; }
.text-mute { color: var(--text-mute); }
.paper .text-mute { color: var(--text-mute-paper); }

/* ═════════════════════════════════════════════════════════════════════════
   Appliances / Spotřebiče
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Editorial hero (cinematic + glass content) ──────────────────────── */
.appl-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;          /* anchor content to the bottom */
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
  padding-top: var(--nav-h);
}
video.appl-hero-bg,
div.appl-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  animation: ken-burns 26s ease-in-out infinite alternate;
  opacity: 0.72;                  /* slightly brighter — let the reel breathe */
}
.appl-hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 80% at 80% 90%, rgba(10,9,8,0.78) 0%, rgba(10,9,8,0.0) 60%),
    linear-gradient(180deg, rgba(10,9,8,0.30) 0%, rgba(10,9,8,0.0) 26%, rgba(10,9,8,0.85) 100%);
  z-index: 1;
}
.appl-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  padding: 0 var(--gutter) 80px;   /* push panel up from the very bottom */
  display: flex;
  justify-content: flex-end;       /* panel to the right */
}
.appl-hero-panel {
  max-width: 560px;                /* smaller — less obstruction of the reel */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: right;
  align-items: flex-end;
}
@media (max-width: 820px) {
  .appl-hero-content { justify-content: flex-start; padding-bottom: 56px; }
  .appl-hero-panel   { text-align: left; align-items: flex-start; max-width: 100%; }
}
.appl-hero-panel .eyebrow { color: var(--brand-hi); }
.appl-hero-panel h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 5.6vw, 80px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--text);
}
.appl-hero-panel .lead {
  max-width: 580px;
  color: rgba(245,238,224,0.82);
  font-size: 18px;
  line-height: 1.62;
}
.appl-hero-actions { margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; }
.scroll-cue-light {
  position: absolute;
  bottom: 36px;
  left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,238,224,0.65);
}
.scroll-cue-light .line {
  width: 1px; height: 36px;
  background: rgba(245,238,224,0.45);
  animation: scroll-pulse 2.4s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%   { transform: scaleY(0.3); transform-origin: top; opacity: 0.3; }
  50%  { transform: scaleY(1);   transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0.3); transform-origin: bottom; opacity: 0.3; }
}
@keyframes ken-burns {
  from { transform: scale(1.02) translate(0,0); }
  to   { transform: scale(1.10) translate(-1.5%, -1.5%); }
}
@media (max-width: 720px) {
  .appl-hero-panel { padding: 30px 28px 34px; }
}

/* ── Brand-stories hero (the three partner brands open /spotrebice) ───── */
.appl-brand-hero {
  position: relative;
  background: transparent;
  color: var(--text);
  padding: calc(var(--nav-h) + 64px) 0 96px;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.abh-intro {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.abh-intro .eyebrow { color: var(--brand-hi); }
.abh-intro h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 70px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--text);
}
.abh-intro .lead {
  max-width: 600px;
  color: rgba(245,238,224,0.82);
  font-size: 17px;
  line-height: 1.6;
}
.abh-card[data-brand="Miele"] .sbc-logo { height: 28px; }

/* ── Second brand triptych: Baterie & dřezy (Blanco · Franke · Gessi) ───────
   A showcase row sitting right under the appliance triptych. Same card visual,
   but the cards are static (no builder link). */
.appl-brand-hero--secondary {
  min-height: 0;
  padding: 8px 0 96px;
}
.abh-intro h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--text);
}
/* Static showcase cards keep the media zoom + body unfold on hover, but drop
   the lift + red border that imply a click target. */
.abh-card--static:hover,
html:not(.is-member) [data-hero-scroll]:hover {
  transform: none;
  border-color: rgba(245,238,224,0.18);
  box-shadow: 0 14px 36px rgba(10,9,8,0.14);
}
@media (max-width: 720px) {
  .appl-brand-hero { padding: calc(var(--nav-h) + 40px) 0 72px; min-height: 0; }
  .appl-brand-hero--secondary { padding: 8px 0 56px; }
}

/* ── Replicable „Hero značky" block (admin „+ Přidat blok") ──────────────────
   Reuses the brand-hero look; a hairline separates an extra band from the
   content above it. The :first-child / :not(:first-child) nav-padding rules
   below already cover it (it's a direct #spotrebice-root > section). */
.appl-brand-hero--block { border-top: 1px solid rgba(245,238,224,0.08); }

/* ── Specialisté — editorial strip of brand/partner cards (replicable block) ──
   Same card visual + reel wiring as the hero (brandCard → .sb-brand-card), laid
   out as a contained 3-up strip with its own centered editorial intro. */
.appl-specialists {
  position: relative;
  padding: 96px 0;
  border-top: 1px solid rgba(245,238,224,0.08);
}
.aspec-intro {
  max-width: 720px; margin: 0 auto 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.aspec-intro .eyebrow { color: var(--brand-hi); }
.aspec-intro h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 400; line-height: 1.07; letter-spacing: -0.012em;
  color: var(--text);
}
.aspec-intro .lead {
  max-width: 580px; color: rgba(245,238,224,0.8);
  font-size: 16px; line-height: 1.6;
}
/* Full container width + same card metrics as the brand-hero grid, so the
   specialist cards are exactly as big as the značky / partner cards. */
.aspec-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr; gap: 14px;
}
@media (max-width: 860px) {
  .aspec-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .appl-specialists { padding: 64px 0; }
}
/* When a specialists strip sits directly above the closing „Naši partneři"
   wall, collapse the doubled gap + drop the wall's own top hairline so the
   two read as one continuous partner zone (otherwise it's ~120px of dead
   space with a stray line in the middle). */
.appl-specialists:has(+ .appl-partners) { padding-bottom: 32px; }
.appl-specialists + .appl-partners { border-top: none; padding-top: 28px; }

/* ── Naši partneři — emotive closing brand wall (below the catalog) ─────────
   Editorial intro + grouped logo walls; each logo whitened + dimmed, gently
   lighting up on hover. */
.appl-partners {
  position: relative;
  padding: 130px 0 150px;
  border-top: 1px solid rgba(245,238,224,0.08);
}
.apl-intro {
  max-width: 760px;
  margin: 0 auto 72px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.apl-intro .eyebrow { color: var(--brand-hi); }
.apl-intro h2 {
  font-family: var(--serif);
  font-size: clamp(40px, 5.2vw, 76px);
  font-weight: 400; line-height: 1.02; letter-spacing: -0.015em;
  color: var(--text);
}
.apl-intro .lead {
  max-width: 620px;
  color: rgba(245,238,224,0.78);
  font-size: 17px; line-height: 1.65;
}
.apl-groups {
  display: flex; flex-direction: column; gap: 58px;
  max-width: 1000px; margin: 0 auto;
}
.apl-group { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.apl-group-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(245,238,224,0.5);
}
.apl-wall {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 42px 64px;
}
.apl-logo { display: inline-flex; align-items: center; justify-content: center; height: 30px; }
.apl-logo img {
  height: 30px; width: auto; max-width: 170px;
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.22,1,.36,1);
}
.apl-logo:hover img { opacity: 1; transform: scale(1.06); }
@media (max-width: 720px) {
  .appl-partners { padding: 80px 0 100px; }
  .apl-groups { gap: 42px; }
  .apl-wall { gap: 28px 40px; }
  .apl-logo, .apl-logo img { height: 24px; }
}

/* ── Whichever hero is first must clear the fixed nav; the second hero sits
   tight under it (no nav gap, no forced 90vh). Order is admin-driven. ─────── */
#spotrebice-root > section.appl-brand-hero:first-child {
  padding-top: calc(var(--nav-h) + 56px);
}
#spotrebice-root > section.appl-brand-hero:not(:first-child) {
  min-height: 0;
  padding-top: 40px;
}

/* ═══ Organický pás akcí (/spotrebice, sekce „akce") ══════════════════════
   Bento mozaika: blok = velká dlaždice 2/3 (dva řádky) + dvě malé 1/3, strana
   velké se střídá (data-apak-side), zbytek dorovná řádek (--n). Šest sloupců
   proto, aby šla vyjádřit třetina (2) i polovina (3). Pozice jsou EXPLICITNÍ —
   auto-flow by zrcadlový blok zabalil nepředvídatelně.
   Rozvrh (co je velká, kde se láme) řeší assets/js/akce-strip.js. */
/* Akce je od zavedení pásu PRVNÍ sekce na stránce (viz CLAUDE.md „0. Akce"),
   takže musí čistit fixní nav stejně jako první hero (viz pravidlo
   #spotrebice-root > section.appl-brand-hero:first-child o pár řádků výš) —
   pevných 96px při --nav-h:80px nechávalo hlavičce jen 16px prostoru. */
.appl-akce { padding: calc(var(--nav-h) + 56px) 0 24px; }
.apak-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.apak-head .meta { display: flex; flex-direction: column; gap: 10px; }
.apak-all {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute); text-decoration: none; cursor: pointer; transition: color .3s ease;
}
.apak-all:hover { color: var(--text); }
.apak-all svg { width: 14px; height: 14px; }

.apak-stack { display: grid; gap: 14px; }
.apak-block {
  display: grid; gap: 14px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, clamp(150px, 15vw, 220px));
}
.apak-block--rest {
  grid-template-columns: repeat(var(--n, 1), 1fr);
  grid-template-rows: clamp(150px, 15vw, 220px);
}
/* Osamocená zbylá dlaždice je široký banner, ne tenký pás: dva řádky jako
   velká dlaždice. Bez tohohle by `.apak-tile--wide { grid-row: 1 / span 2 }`
   sahalo do implicitního druhého řádku, který se složí na nulu. */
.apak-block--rest[data-apak-n="1"] { grid-template-rows: repeat(2, clamp(150px, 15vw, 220px)); }
[data-apak-side="l"] .apak-tile--big { grid-column: 1 / span 4; grid-row: 1 / span 2; }
[data-apak-side="l"] .apak-tile--small:nth-of-type(2) { grid-column: 5 / span 2; grid-row: 1; }
[data-apak-side="l"] .apak-tile--small:nth-of-type(3) { grid-column: 5 / span 2; grid-row: 2; }
[data-apak-side="r"] .apak-tile--big { grid-column: 3 / span 4; grid-row: 1 / span 2; }
[data-apak-side="r"] .apak-tile--small:nth-of-type(2) { grid-column: 1 / span 2; grid-row: 1; }
[data-apak-side="r"] .apak-tile--small:nth-of-type(3) { grid-column: 1 / span 2; grid-row: 2; }
.apak-tile--wide { grid-row: 1 / span 2; }

.apak-tile {
  position: relative; overflow: hidden; display: block;
  border-radius: var(--r-md);
  background-color: color-mix(in srgb, var(--akce-c, var(--brand)) 18%, var(--bg));
  background-size: cover; background-repeat: no-repeat;
  text-decoration: none; color: var(--text); cursor: pointer;
  /* ŽÁDNÝ 1px border: na tmavé fotce svítil jako cizí linka kolem dlaždice.
     Hranu drží vnitřní světelný prstenec — čte se jako sklo, ne jako obtažení. */
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 9%, transparent);
  transition: box-shadow .3s ease, transform .3s ease;
}
.apak-tile[data-apak-focus="center"] { background-position: center; }
.apak-tile[data-apak-focus="left"]   { background-position: center left; }
.apak-tile[data-apak-focus="right"]  { background-position: center right; }
.apak-tile[data-apak-focus="top"]    { background-position: top center; }
.apak-tile[data-apak-focus="bottom"] { background-position: bottom center; }
.apak-tile:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akce-c, var(--brand)) 55%, transparent);
  transform: translateY(-2px);
}
/* Kreativa se pod textem ZTMAVÍ, ale NEZVĚTŠUJE se — zoom by odřízl headline,
   který si kampaňový obrázek nese v sobě (viz .akce-card na akce.html).
   O čitelnost textu se stará sklenná plocha `.apak-foot` níž; závoj už jen
   sráží kontrast fotky, aby na ní odznak nahoře nezmizel. */
.apak-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 72%, transparent) 0%,
              color-mix(in srgb, var(--bg) 40%, transparent) 45%, transparent 82%);
}
.apak-tile--flat .apak-veil { background: none; }
/* Dvě skupiny (nahoře odznak+logo, dole titulek+platnost+CTA) drží spodní blok
   u dna bez ohledu na to, které části existují. `margin-top:auto` na
   jednotlivých potomcích tady NEFUNGUJE: s vypnutým titulkem (strip_hide_text)
   by ho dostal jiný prvek a rozhodilo by to spodní skupinu. */
/* Jen spodní sklenná plocha — odznak vlevo nahoře byl 2026-08-13 odstraněn
   (kampaňová kreativa si svoje značení nese sama). */
.apak-body { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 14px; }
.apak-foot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  align-self: stretch;
  padding: 13px 15px 14px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent),
              inset 0 0 0 1px color-mix(in srgb, #fff 6%, transparent);
}
.apak-title { font-family: var(--serif); line-height: 1.15; font-size: 20px; }
.apak-tile--big .apak-title, .apak-tile--wide .apak-title { font-size: clamp(24px, 2.4vw, 34px); }
/* Ne --text-mute: ta barva je stavěná na plný podklad, ne na fotku pod závojem. */
.apak-valid { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: color-mix(in srgb, var(--text) 72%, transparent); }
.apak-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--akce-c, var(--brand));
}
.apak-go svg { width: 14px; height: 14px; }

@media (max-width: 980px) {
  /* --nav-h drops z 80px na 64px až pod 720px (viz :root override), takže
     pevných 64px tady bylo v celém rozsahu 721-980px POD navem (64 < 80) a na
     ≤720px přesně na hraně (0 prostoru) — stejná chyba jako u desktop pravidla
     výš, jen horší. -16px oproti desktopové +56px kopíruje stejný mobilní
     odstup, jaký má sesterská .appl-brand-hero (56px → 40px). */
  .appl-akce { padding: calc(var(--nav-h) + 40px) 0 16px; }
  .apak-block, .apak-block--rest { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  /* Vyšší specificita atributového selektoru (viz base pravidlo výše) by tu
     jinak přebila `grid-template-rows: auto` a osamocená dlaždice by si
     tahala desktopovou dvouřádkovou výšku i na mobilu. */
  .apak-block--rest[data-apak-n="1"] { grid-template-rows: auto; }
  .apak-block .apak-tile--big,
  .apak-block--rest .apak-tile--wide { grid-column: 1 / -1; grid-row: auto; min-height: clamp(200px, 34vw, 280px); }
  [data-apak-side="l"] .apak-tile--small:nth-of-type(2),
  [data-apak-side="l"] .apak-tile--small:nth-of-type(3),
  [data-apak-side="r"] .apak-tile--small:nth-of-type(2),
  [data-apak-side="r"] .apak-tile--small:nth-of-type(3) { grid-column: auto; grid-row: auto; }
  .apak-tile--small, .apak-tile--half { min-height: clamp(150px, 26vw, 200px); }
}
@media (max-width: 620px) {
  .apak-block, .apak-block--rest { grid-template-columns: 1fr; }
  .apak-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .apak-tile--small, .apak-tile--half { min-height: 168px; }
}


/* ── Builder wrap (dark cinematic bg + glass-paper panel) ────────────── */
.appl-builder-wrap {
  position: relative;
  background: transparent;
  color: var(--text);
  padding: 120px 0 130px;
}
.appl-builder-wrap .builder-head {
  max-width: 720px;
  margin: 0 auto 58px;
  text-align: center;
}
.appl-builder-wrap .builder-head .eyebrow {
  color: var(--brand-hi);
  display: inline-block; margin-bottom: 14px;
}
.appl-builder-wrap .builder-head h2 {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--text);
}
.appl-builder-wrap .builder-head .italic { font-style: normal; font-weight: 300; color: var(--brand); }
.appl-builder-wrap .builder-head .copy {
  margin-top: 18px;
  color: var(--text-mute);
  max-width: 520px; margin-left: auto; margin-right: auto;
}

/* Builder — editorial form on the soft-dark section, no card. Runs at the FULL
   .container width so it shares an axis with the catalog below it; the steps sit
   in the left column, the budget in a sticky rail on the right. */
/* `position: relative; z-index: 1` je load-bearing, ne kosmetika: sesterský
   panel výsledku `.appl-result` dostane transform, jakmile něco obsahuje
   (`:empty` ho ruší, proto se to projeví AŽ po „Sestavit set"), a tím se
   z něj stane stacking context. Konfigurátor je jím taky (`.reveal`), takže
   oba stojí ve stejné vrstvě a vyhrává ten POZDĚJŠÍ v pořadí — rozbalený
   submenu kategorie (`.sb-cat.menu-open`, z-index 40) je uvězněný uvnitř
   konfigurátoru a nad výsledek se nedostane, ať má jakýkoli z-index.
   Geometricky se ty dva bloky nepřekrývají nikde jinde než právě tím
   rozbaleným seznamem, takže povýšení celého konfigurátoru nic nezastíní. */
.set-builder {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0;
  counter-reset: sbstep;
}
.sb-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
  margin-top: 34px;
}
@media (max-width: 1180px) {
  .sb-main { grid-template-columns: 1fr; gap: 34px; }
}
.sb-row {
  padding: 34px 0;
  border-top: 1px solid rgba(245,238,224,0.13);
  counter-increment: sbstep;
}
.sb-row:first-child { border-top: none; padding-top: 4px; }
@media (max-width: 720px) {
  .sb-row { padding: 28px 0; }
}
/* Step label sits ABOVE its controls — the old 200px label column ate a quarter
   of the row, which is what forced the chips to wrap three deep. */
.sb-label {
  display: block;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text);
}
.sb-label::before {
  content: counter(sbstep, decimal-leading-zero);
  margin-right: 10px;
  color: var(--brand-hi);
}

/* ── Volby konfigurátoru — JEDEN tvar dlaždice v JEDNÉ mřížce ─────────── */
/* Značka, specialista i kategorie sdílí `.sb-tile`. Do 2026-08-13 to byly tři
   různé věci (kulaté pilulky / obdélníkové karty s podtitulkem / pilulky
   s ikonou a mono verzálkami) lámané přes flex-wrap, takže blok voleb neměl
   společný okraj ani společný rytmus a četl se jako tři nesouvisející pásy.
   Mřížka s pevnou šířkou buňky srovná levý I pravý okraj a poslední řádek
   nekončí uprostřed. */
.sb-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  align-items: stretch;
}
@media (max-width: 560px) {
  .sb-tiles { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
}
/* Popisek „Specialisté …" je řádek mřížky sám pro sebe, jinak by se vecpal
   do buňky a rozhodil sloupce. */
.sb-tiles-divider {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute);
}
.sb-tiles-divider::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(245,238,224,0.13);
}

.sb-tile {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  gap: 3px;
  min-height: 62px;
  padding: 12px 16px;
  text-align: left;
  background: rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-sm);
  color: var(--text-mute);
  cursor: pointer;
  transition: border-color .22s ease, background .22s ease, color .22s ease;
}
.sb-tile:hover { border-color: rgba(255,255,255,0.30); color: var(--text); }
.sb-tile:focus-visible { outline: none; border-color: var(--brand); color: var(--text); }
.sb-tile.active {
  background: rgba(200,38,44,0.16);
  border-color: var(--brand);
  color: var(--text);
}
.sb-tile-name {
  font-family: var(--sans);
  font-size: 14px; font-weight: 500; line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--text);
}
/* Podtitulek nese pokrytí specialisty (DESKY · CHLADNIČKY) nebo zvolený
   podtyp kategorie. Prázdný element nesmí přidat výšku, jinak by se dlaždice
   s podtitulkem a bez něj rozjely. */
.sb-tile-sub {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1.35;
  color: var(--text-mute);
  /* Jeden řádek s výpustkou — delší výčet („ODSÁVAČE · DESKY · TROUBY") by
     jinak dlaždici zalomil a řádek by končil osamocenou tečkou. Celý výčet
     zůstává v title. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-tile-sub:empty { display: none; }
.sb-tile.active .sb-tile-sub { color: rgba(255,255,255,0.72); }
.sb-tile-icon { display: none; }   /* zapíná se jen u kategorií, viz .sb-cat */
.sb-tile--clear .sb-tile-name { color: var(--text-mute); }
.sb-tile--clear.active .sb-tile-name { color: var(--text); }

.sb-brand-hint {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.03em; line-height: 1.5;
  color: var(--text-mute);
  max-width: 640px;
}

/* The dřez/baterie row is a full step of its own now that the steps are stacked
   in one column. It is hidden with `display:none` when no sink category is
   picked (applyBuilderUI) — a display:none element does not increment a CSS
   counter, so „Spotřebiče" renumbers itself from 03 back to 02 on its own. */

/* "?" help icon + hover/focus tooltip on each step label. */
.sb-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 8px;
  border: 1px solid rgba(255,255,255,0.28); border-radius: 50%;
  font-family: var(--mono); font-size: 10px; line-height: 1;
  color: var(--text-mute); cursor: help; position: relative;
  vertical-align: middle;
  transition: border-color 160ms ease, color 160ms ease;
}
.sb-help:hover, .sb-help:focus-visible { color: var(--text); border-color: var(--brand); outline: none; }
/* One tooltip look for the whole builder: the "?" badge on a step label and the
   property buttons in the toolbar, whose taglines live here instead of on the
   button face. Both just need `position: relative` + a data-tip. */
.sb-help::after,
.sb-prop[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: calc(100% + 10px);
  width: 280px; max-width: 72vw;
  background: rgba(20,16,14,0.97);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--sans); font-size: 12px; line-height: 1.55;
  letter-spacing: 0.01em; text-transform: none; text-align: left;
  color: var(--text);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 40;
}
.sb-help:hover::after, .sb-help:focus-visible::after,
.sb-prop[data-tip]:hover::after, .sb-prop[data-tip]:focus-visible::after { opacity: 1; transform: translateY(0); }

/* ── Brand cards (replaces .sb-chips for the "Začínáme značkou" step) ─── */
.sb-row-brands { padding-bottom: 14px; }
.sb-brands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Equal rows: every tile in the grid gets the same height (tallest wins),
     so a long brand text can't make row 1 taller than row 2. */
  grid-auto-rows: 1fr;
  gap: 14px;
}
.nab-cine-content { padding-bottom: 60px; }

/* Catalog chip filter — used inside renderApplCatalog (/spotrebice) and
   renderWorktopCatalog (/pracovni-desky). Sticky-pinned within the catalog
   so the user can swap zones without losing place. Breaks out of the
   container so the strip runs edge-to-edge like /nabytok's. */
/* ── Unified catalog filter shell ──────────────────────────────────────
   /spotrebice (.appl-catalog-chips), /nabytok (.nab-filters), and
   /pracovni-desky (.wt-chip-bar) all use this same sticky bar look:
   edge-to-edge glass blur background, the inner row container-bound and
   RIGHT-aligned so chips/pills hug the same right edge as the grid below. */
.appl-catalog-chips,
.nab-filters,
.wt-chip-bar,
.vp-facets-bar,
.akce-filters {
  position: sticky; top: var(--nav-h, 80px);
  z-index: 60;
  margin: 0 calc(50% - 50vw) 32px;
  width: 100vw;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,9,8,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* /spotrebice + /nabytok + /vyprodej: the catalog below the filter strip is a
   CREAM panel, so the 55%-opaque dark glass washes out as it scrolls under the
   sticky bar — keep the bar solid-dark and the chip/pill text bright/white so it
   stays legible. (Shared so a change to the look hits all of them at once.) */
.appl-catalog-chips,
.nab-filters,
.vp-facets-bar,
.akce-filters {
  /* Scroll perf: this sticky bar was 86% opaque, so the blur was imperceptible —
     yet a sticky backdrop-filter re-rasterizes its backdrop on EVERY scroll frame
     on real GPUs (the documented `?noblur` = "neseká" finding — see home-video-
     performance §3). Drop it + go fully opaque → no per-frame blur raster while
     scrolling the catalog. Visually identical. (Perf fix 2026-07-07.) */
  background: rgba(12,10,8,0.94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.appl-catalog-chips .filter-chip,
.nab-filters .filter-chip,
.akce-filters .filter-chip { color: rgba(245,238,224,0.9); }
.appl-catalog-chips .filter-chip:hover,
.appl-catalog-chips .filter-chip.active,
.nab-filters .filter-chip:hover,
.nab-filters .filter-chip.active,
.akce-filters .filter-chip:hover,
.akce-filters .filter-chip.active { color: #fff; }
/* /vyprodej uses dropdown PILLS (not chips) — keep their text/caret bright over
   the solid-dark bar (default is the muted catalog-paper tan, too dark here). */
.vp-facets-bar .appl-fb-trigger,
.vp-facets-bar .appl-fb-txt { color: rgba(245,238,224,0.92); }
.vp-facets-bar .appl-fb-trigger:hover,
.vp-facets-bar .appl-fb-trigger.is-active,
.vp-facets-bar .appl-fb-trigger.is-active .appl-fb-txt { color: #fff; }
.vp-facets-bar .appl-fb-caret { border-top-color: currentColor; }
.appl-catalog-chips .row,
.nab-filters .row,
.wt-chip-bar-inner,
.vp-facets-bar .row,
.akce-filters .row {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex; gap: 8px;
  flex-wrap: wrap;
  /* left-aligned, starting at the same left edge as the grid below
     (both share .container max-width + var(--gutter) padding) */
  justify-content: flex-start;
  align-items: center;
  overflow-x: visible;
}

/* ONE shared filter-row layout on desktop for ALL catalog pages
   (/spotrebice, /nabytok, /dvirka, /korpusy, /pracovni-desky): chips/pills on a
   SINGLE line that scrolls horizontally (edge arrows + slow auto-scroll on
   edge-hover, wired by wireChipScroller), the search pinned to the right in its
   own divided zone. The two-row "search below" layout is MOBILE-ONLY (≤768px). */
.appl-catalog-chips .row,
.nab-filters .row,
.wt-chip-bar-inner {
  flex-wrap: nowrap;
  gap: 0;
  align-items: center;
}

/* The scrollable chip strip. wireChipScroller wraps the mount (#appl-cat-chips /
   #nab-filter-row / #wt-pills / #fr-pills) in .chip-scroller, adds .chip-scroll
   to the mount and injects the two .chip-edge affordances. */
.chip-scroller {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
}
.chip-scroll {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 2px 1px;
}
.chip-scroll::-webkit-scrollbar { display: none; }
/* fade only the side(s) that still have hidden chips */
.chip-scroller.can-right .chip-scroll {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
}
.chip-scroller.can-left .chip-scroll {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px);
          mask-image: linear-gradient(90deg, transparent, #000 30px);
}
.chip-scroller.can-left.can-right .chip-scroll {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
/* an open facet dropdown (worktops/fronts) must escape the horizontal clip */
.chip-scroller.menu-open { overflow: visible; }
.chip-scroller.menu-open .chip-scroll {
  overflow: visible;
  -webkit-mask-image: none; mask-image: none;
}

/* edge affordance: a slim hover zone at the very edge that marks the scrollable
   side and slow-auto-scrolls while hovered (click = nudge a page). */
.chip-edge {
  position: absolute; top: 0; bottom: 0;
  width: 46px;
  display: none; align-items: center;
  padding: 0; margin: 0; border: 0;
  cursor: pointer; z-index: 4;
  color: var(--text);
  opacity: 0; transition: opacity .2s ease, color .2s ease;
}
.chip-edge svg { width: 17px; height: 17px; }
.chip-edge-left  { left: 0;  justify-content: flex-start;
  background: linear-gradient(90deg, rgba(14,12,10,0.92) 35%, transparent); }
.chip-edge-right { right: 0; justify-content: flex-end;
  background: linear-gradient(270deg, rgba(14,12,10,0.92) 35%, transparent); }
.chip-scroller.can-left  .chip-edge-left  { display: flex; opacity: 1; }
.chip-scroller.can-right .chip-edge-right { display: flex; opacity: 1; }
.chip-scroller.menu-open .chip-edge { display: none; }
.chip-edge:hover { color: #fff; }

/* search zone — right of the chips, divided by a hairline (desktop) */
.appl-catalog-chips .cat-search-mount,
.nab-filters .cat-search-mount,
.wt-chip-bar .cat-search-mount {
  flex: 0 0 auto; align-self: center;
  display: flex; align-items: center;
  margin-left: 18px; padding-left: 18px;
  border-left: 1px solid rgba(245, 238, 224, 0.12);
}

/* keep every chip/pill at its natural width so the strip scrolls, never squashes */
.appl-catalog-chips .filter-chip,
.nab-filters .filter-chip,
.nab-filters .filter-chip-back,
.wt-chip-bar .wt-sel,
.wt-chip-bar [data-fr-clear],
.wt-chip-bar [data-wt-clear],
.wt-chip-bar .wt-chip-clear { flex: 0 0 auto; white-space: nowrap; }

/* MOBILE — search drops to its own full-width second row (all five pages). */
@media (max-width: 768px) {
  .appl-catalog-chips .row,
  .nab-filters .row,
  .wt-chip-bar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .chip-scroller { width: 100%; }
  .appl-catalog-chips .cat-search-mount,
  .nab-filters .cat-search-mount,
  .wt-chip-bar .cat-search-mount {
    width: 100%; margin: 0; padding: 0; border-left: 0;
  }
  .cat-search-mount .cat-search,
  .cat-search-mount .cat-search-pill { width: 100%; margin-left: 0; }
}

/* ── Catalog search — same pill aesthetic as the worktops selector,
   pushed to the right of the filter bar via margin-left:auto. Live
   suggestions render in a dark-glass dropdown anchored below. */
.cat-search {
  position: relative;
  margin-left: auto;          /* hug the right edge of the bar */
  flex: 0 0 auto;
}
.cat-search-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 14px;
  background: rgba(245,238,224,0.04);
  border: 1px solid rgba(245,238,224,0.14);
  border-radius: 999px;
  color: var(--text);
  min-width: 240px;
  transition: background .25s ease, border-color .25s ease;
}
.cat-search-pill:hover,
.cat-search-pill:focus-within {
  background: rgba(245,238,224,0.09);
  border-color: rgba(245,238,224,0.32);
}
.cat-search-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-mute); }
.cat-search-input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  padding: 4px 0;
  font: 400 13.5px var(--sans);
  color: var(--text);
}
.cat-search-input::placeholder {
  color: var(--text-mute);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.cat-search-input::-webkit-search-cancel-button { display: none; }
.cat-search-clear {
  background: transparent; border: 0; padding: 0;
  width: 18px; height: 18px;
  font-size: 18px; line-height: 1;
  color: var(--text-mute);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cat-search-clear:hover { color: var(--text); }
.cat-search-clear[hidden] { display: none; }

.cat-search-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0; left: auto;
  width: 380px; max-width: min(80vw, 420px);
  max-height: 440px;
  overflow-y: auto;
  background: rgba(20,17,14,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245,238,224,0.14);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
  z-index: 120;
  display: flex; flex-direction: column; gap: 1px;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,238,224,0.25) transparent;
}
.cat-search-menu::-webkit-scrollbar { width: 8px; }
.cat-search-menu::-webkit-scrollbar-thumb { background: rgba(245,238,224,0.18); border-radius: 8px; }
.cat-search-menu[hidden] { display: none; }
.cat-search-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--text);
  transition: background .15s ease;
}
.cat-search-item:hover,
.cat-search-item.is-active { background: rgba(245,238,224,0.08); }
.cat-search-thumb {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 6px;
  background: #2a2622 center/cover no-repeat;
  border: 1px solid rgba(245,238,224,0.10);
}
.cat-search-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cat-search-name {
  font-family: var(--sans); font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-search-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em;
  color: var(--text-mute); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-search-empty {
  padding: 16px 12px;
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--text-mute);
}
@media (max-width: 720px) {
  .cat-search { width: 100%; margin-left: 0; }
  .cat-search-pill { width: 100%; min-width: 0; }
  .cat-search-menu { width: 100%; right: 0; left: 0; }
}
/* "← Zpět" chip in the sticky filter strip — a ROUNDED pill with a brand-red
   accent that lights up red on hover (per user). */
.appl-catalog-chips .filter-chip-back,
.nab-filters .filter-chip-back {
  color: var(--brand-hi);
  background: rgba(200,38,44,0.10);
  border: 1px solid rgba(200,38,44,0.45);
  border-radius: 999px;
  padding: 9px 16px;
}
.appl-catalog-chips .filter-chip-back:hover,
.nab-filters .filter-chip-back:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 0 16px rgba(200,38,44,0.55);
}
/* /shop (Produkty) reuses .appl-catalog-chips — hide the right-side search
   divider when no search is mounted (e.g. the ?line= view). */
#shop-filters .cat-search-mount:empty { border-left: 0; padding: 0; }

/* /pracovni-desky — selector-pill filter set. Outer .wt-chip-bar is the
   shared sticky shell (rule above). Inner .wt-chip-bar-inner is the
   container-bound, right-aligned row holding the 5 facet pills + clear. */
.wt-sel-row {
  display: contents; /* pills participate in the parent flex-end layout */
}
.wt-sel {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 16px;
  background: rgba(245,238,224,0.04);
  border: 1px solid rgba(245,238,224,0.14);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.wt-sel:hover { background: rgba(245,238,224,0.09); border-color: rgba(245,238,224,0.30); }
.wt-sel.is-set {
  background: rgba(200,38,44,0.16);
  border-color: rgba(200,38,44,0.65);
}
.wt-sel-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.20em;
  text-transform: uppercase; color: var(--text-mute);
  flex-shrink: 0;
}
.wt-sel.is-set .wt-sel-label { color: rgba(245,238,224,0.9); }
.wt-sel-val {
  font-family: var(--sans); font-weight: 400; font-size: 13.5px;
  color: var(--text);
  max-width: 180px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wt-sel-count {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-mute);
  padding-left: 4px;
  border-left: 1px solid rgba(245,238,224,0.14);
}
.wt-sel-arrow {
  width: 11px; height: 11px; opacity: 0.55; flex-shrink: 0;
  transition: transform .22s ease;
}
.wt-sel.is-open .wt-sel-arrow { transform: rotate(180deg); opacity: 0.9; }
.wt-sel-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-align: left;
}
.wt-sel-trigger:focus-visible { outline: 1px solid var(--brand); outline-offset: 2px; border-radius: 999px; }

/* Custom dark dropdown — replaces the native <select> menu so it inherits
   the site's warm-dark glass aesthetic. Anchored just below the pill. */
.wt-sel-menu {
  position: absolute;
  top: calc(100% + 6px); left: 0; right: auto;
  min-width: 100%;
  max-width: 320px;
  max-height: 360px;
  overflow-y: auto;
  background: rgba(20,17,14,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245,238,224,0.14);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
  z-index: 120;
  display: flex; flex-direction: column; gap: 1px;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,238,224,0.25) transparent;
}
.wt-sel-menu::-webkit-scrollbar { width: 8px; }
.wt-sel-menu::-webkit-scrollbar-thumb { background: rgba(245,238,224,0.18); border-radius: 8px; }
.wt-sel-menu[hidden] { display: none; }
.wt-sel-opt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 9px 14px;
  background: transparent; border: 0;
  font-family: var(--sans); font-size: 13.5px; color: var(--text);
  border-radius: 9px;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.wt-sel-opt:hover { background: rgba(245,238,224,0.08); }
.wt-sel-opt.is-active {
  background: rgba(200,38,44,0.18);
  color: #fff;
}
.wt-sel-opt.is-zero { color: rgba(245,238,224,0.32); }
.wt-sel-opt.is-zero:hover { background: transparent; cursor: default; }
.wt-sel-opt-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wt-sel-opt-n {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-mute);
}
.wt-sel-opt.is-active .wt-sel-opt-n { color: rgba(255,255,255,0.7); }
.wt-chip-clear {
  background: transparent; border: 0;
  padding: 9px 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brand); cursor: pointer;
  transition: color .25s ease;
  margin-left: auto;
}
.wt-chip-clear:hover { color: var(--text); }
.wt-chip-clear[hidden] { display: none; }
@media (max-width: 720px) {
  .wt-chip-bar { gap: 8px; padding: 10px var(--gutter); }
  .wt-sel { padding: 8px 12px; gap: 8px; }
  .wt-sel-val { max-width: 120px; }
}

/* Drop legacy filter-card / select chrome on worktops + spotrebice now that
   the chip row replaces them. */
.appl-filter-cards { display: none; }
.wt-filter { display: none; }
.filter-chip-back {
  color: var(--text);
  background: rgba(245,238,224,0.06);
  padding: 10px 14px;
  border-radius: var(--r-xs);
  margin-right: 8px;
  border: 1px solid rgba(245,238,224,0.18);
}
.filter-chip-back:hover { background: rgba(245,238,224,0.12); border-color: rgba(245,238,224,0.32); }
.shop-grid-wrap.nab-browse { padding: 60px 0 140px; }
.nab-browse-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 var(--gutter); margin-bottom: 30px;
  gap: 24px; flex-wrap: wrap;
}
.nab-browse-bar .prod-count { padding: 0; margin: 0; }
.nab-crumbs {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-mute);
  flex-wrap: wrap;
}
.nab-crumb {
  background: transparent; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  transition: color .25s ease;
}
.nab-crumb:hover { color: var(--text); }
.nab-crumb-sep { opacity: 0.4; }
.nab-more { display: flex; justify-content: center; margin-top: 60px; }

/* — Inspirace · weekly emotional picks, slotted between hero and katalog */
.nab-insp.paper { padding: 120px 0 110px; }
.nab-insp-head {
  display: flex; flex-direction: column; gap: 14px;
  text-align: center; align-items: center;
  max-width: 820px; margin: 0 auto 56px;
}
.nab-insp-head .eyebrow {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand);
}
.nab-insp-head .display-m {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 4.4vw, 64px); line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--text-paper);
  margin: 4px 0 0;
}
.nab-insp-head .display-m .italic { font-style: normal; font-weight: 300; }
.nab-insp-lede {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55;
  color: rgba(28,24,19,0.72);
  max-width: 620px; margin-top: 4px;
}
.nab-insp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.nab-insp-card {
  position: relative; display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  text-decoration: none; color: #fff;
  background: #1a1612;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.35);
}
.nab-insp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 32px 70px -22px rgba(0,0,0,0.45);
}
.nab-insp-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1.6s ease-out;
}
.nab-insp-card:hover .nab-insp-bg { transform: scale(1.06); }
.nab-insp-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.45) 0%, rgba(10,9,8,0.10) 40%, rgba(10,9,8,0.85) 100%);
}
.nab-insp-meta {
  position: absolute; top: 22px; left: 24px; right: 24px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: rgba(245,238,224,0.86);
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.nab-insp-num {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 28px; letter-spacing: -0.02em;
  color: rgba(245,238,224,0.85);
}
.nab-insp-content {
  position: absolute; left: 24px; right: 24px; bottom: 22px;
  display: flex; flex-direction: column; gap: 6px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.nab-insp-brand {
  align-self: flex-start;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,238,224,0.86);
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 4px 10px; border-radius: var(--r-xs);
}
.nab-insp-name {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(22px, 1.9vw, 30px); line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 8px 0 0;
}
.nab-insp-name .italic { font-style: italic; font-weight: 300; }
.nab-insp-sub {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,238,224,0.82);
  margin-top: 4px;
}
.nab-insp-price {
  font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.04em;
  color: #fff;
  margin-top: 6px;
}
.nab-insp-price .italic {
  font-family: var(--serif); font-style: italic;
}
.nab-insp-foot {
  margin-top: 36px; text-align: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(28,24,19,0.65);
}
.nab-insp-foot a { color: var(--brand); text-decoration: none; }
.nab-insp-foot a:hover { text-decoration: underline; }
@media (max-width: 880px) {
  .nab-insp-grid { grid-template-columns: 1fr; }
}
.sb-brand-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid rgba(10,9,8,0.10);
  color: #fff;
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: transform 460ms cubic-bezier(.22,1,.36,1),
              border-color 240ms ease,
              box-shadow 320ms ease;
}
.sb-brand-card:hover {
  transform: translateY(-3px);
  border-color: rgba(200,38,44,0.55);
  box-shadow: 0 18px 44px rgba(10,9,8,0.18);
}
.sb-brand-card.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand), 0 22px 56px rgba(10,9,8,0.25);
}

.sbc-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #000;
}
.sbc-reel,
.sbc-promo,
.sbc-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.88) saturate(1.05);
  transition: transform 1600ms cubic-bezier(.22,1,.36,1), filter 600ms ease;
}
.sb-brand-card:hover .sbc-reel,
.sb-brand-card:hover .sbc-promo,
.sb-brand-card:hover .sbc-poster { transform: scale(1.04); filter: brightness(1) saturate(1.12); }
/* Photo by default, reel on hover: the hover reel sits on top of the promo
   photo and is invisible until the card is hovered (or tapped → .sbc-playing),
   then cross-fades in. Paused + opacity 0 when idle = no decode cost. */
.sbc-reel--hover { opacity: 0; transition: opacity 520ms ease, transform 1600ms cubic-bezier(.22,1,.36,1), filter 600ms ease; }
.sb-brand-card:hover .sbc-reel--hover,
.sb-brand-card.sbc-playing .sbc-reel--hover { opacity: 1; }
.sbc-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,9,8,0.78) 0%, rgba(10,9,8,0.20) 50%, rgba(10,9,8,0) 80%);
}
.sbc-logo {
  position: absolute; left: 18px; top: 16px;
  height: 22px; width: auto; max-width: 50%;
  filter: brightness(0) invert(1);
  opacity: 0.94;
}
.sb-brand-card[data-sb-brand="Miele"] .sbc-logo { height: 28px; }

.sbc-text {
  position: relative;
  padding: 16px 18px 18px;
  background: var(--bg-elev-1);
  color: var(--text);
  display: flex; flex-direction: column; gap: 6px;
  /* Fill the card to its bottom edge (no dark band under short texts) and
     share one min-height across BOTH heroes, so the appliance and faucet
     tiles match. 168px fits the tallest current copy (Electrolux akce). */
  flex: 1;
  min-height: 168px;
}
.sbc-eyebrow {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand-hi);
}
.sbc-title {
  font-family: var(--serif);
  font-size: 20px; font-weight: 400; line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0;
}
/* The body is always in flow, so the card reserves its full height and never
   resizes on hover — the page stays put. The unfold uses clip-path, which
   reveals the text top-to-bottom without affecting layout. */
.sbc-body {
  font-family: var(--sans);
  font-size: 12px; line-height: 1.55;
  color: rgba(245,238,224,0.78);
  margin: 4px 0 0;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 440ms cubic-bezier(.22,1,.36,1), opacity 440ms ease;
}
.sb-brand-card:hover .sbc-body,
.sb-brand-card.active .sbc-body {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* ── Material sample cards (/dvirka · /korpusy · /pracovni-desky, Kapitola I) ─
   These ARE `.tript-card`s (see the Triptych block above) so Kapitola I reads
   as the same editorial card as the rest of the site — a promo photo with the
   copy overlaid, not a photo band over a separate text panel. Only two things
   are added here: a `<button>` reset (the card is clickable, it opens that
   group's filtered catalog) and the fan of real sample swatches (vzorky). */
button.tript-card {
  padding: 0; text-align: left; width: 100%; display: block;
  border: 0; font: inherit; color: inherit;
}

/* Sample swatch chips — first row INSIDE .tript-meta, above the title. They are
   part of the copy stack on purpose: floated into a corner they collided with
   the number pill (a long kicker like "03 · Prémium · Slinutý kámen" runs most
   of the card's width) or hid under the title. */
.matc-swatches {
  display: flex; gap: 6px;
  margin-bottom: 2px;
}
.matc-sw {
  width: 34px; height: 34px;
  background-size: cover; background-position: center;
  border-radius: var(--r-xs);
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: 0 4px 12px rgba(0,0,0,0.42);
  transition: transform 420ms cubic-bezier(.22,1,.36,1);
}
.matc:hover .matc-sw { transform: translateY(-3px); }
.matc:hover .matc-sw:nth-child(2) { transition-delay: 40ms; }
.matc:hover .matc-sw:nth-child(3) { transition-delay: 80ms; }
.matc:hover .matc-sw:nth-child(4) { transition-delay: 120ms; }

@media (max-width: 560px) {
  .matc-sw { width: 28px; height: 28px; }
  /* same one-line footer as the quad — the mobile rail card is ~320px too */
  .matc .tript-meta .row .price { font-size: 12px; white-space: nowrap; }
  .matc .tript-meta .cta { padding: 10px 14px; letter-spacing: 0.14em; white-space: nowrap; }
}

/* "Bez preference" — small inline-link feeling below the row */
.sb-brand-clear {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: none;
  color: var(--text-mute-paper);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  padding: 6px 0;
  transition: color 220ms ease;
}
.sb-brand-clear .dot {
  width: 10px; height: 10px;
  border: 1px solid var(--line-paper);
  border-radius: 50%;
  background: transparent;
  transition: background 220ms ease, border-color 220ms ease;
}
.sb-brand-clear:hover { color: var(--text-paper); }
.sb-brand-clear.active {
  color: var(--text-paper);
}
.sb-brand-clear.active .dot { background: var(--brand); border-color: var(--brand); }

/* ── Toolbar of kitchen properties — the builder's top bar ────────────── */
/* Vzor: menu ve Wordu. Jeden vodorovný pás nad formulářem, tlačítko = ikona +
   název + fajfka; tagline jede do tooltipu (.sb-prop[data-tip]::after výš).
   Nahradilo to tři velké karty, které braly celou obrazovku na výšku. */
.sb-toolbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 26px;
  padding: 11px 14px 11px 20px;
  background: rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(245,238,224,0.13);
  border-radius: var(--r-md);
}
.sb-toolbar-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
}
.sb-toolbar-items { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-prop {
  position: relative;                 /* tooltip anchor */
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  color: var(--text-mute);
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.sb-prop:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.sb-prop:focus-visible { outline: none; border-color: var(--brand); color: var(--text); }
.sb-prop.is-active {
  background: rgba(200,38,44,0.16);
  border-color: var(--brand);
  color: var(--text);
}
.sb-prop-icon { display: inline-flex; color: var(--brand-hi); }
.sb-prop-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sb-prop-name {
  font-family: var(--sans);
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.005em;
  white-space: nowrap;
}
/* The check reserves its box at all times so a toggle does not resize on click. */
.sb-prop-mark { display: inline-flex; opacity: 0.2; color: currentColor; transition: opacity .22s ease, color .22s ease; }
.sb-prop-mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sb-prop:hover .sb-prop-mark { opacity: 0.7; }
.sb-prop.is-active .sb-prop-mark { opacity: 1; color: var(--brand-hi); }

/* ── Budget rail — sticky panel beside the steps ──────────────────────── */
/* `align-self: stretch` je load-bearing: .sb-main má `align-items: start`, které
   sloupec smrští na výšku panelu, a lepivý prvek se pak nemá kam posouvat
   (travel = 0) — deklarace `position: sticky` byla bez účinku. Roztažený sloupec
   dá panelu prostor od horní hrany kroku 01 po konec posledního kroku, takže
   rozpočet jede dolů s kategoriemi a teprve pod nimi odjede. */
.sb-side { align-self: stretch; }
.sb-side-panel {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  display: flex; flex-direction: column;
  padding: 26px 24px 24px;
  background: rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(245,238,224,0.13);
  border-radius: var(--r-md);
}
/* Own class, not .sb-label — that one carries the step counter. */
.sb-side-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mute);
}
.sb-side-panel .sb-budget-val { margin: 12px 0 14px; }
.sb-side-sum {
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgba(245,238,224,0.13);
}
.sb-sum-val {
  font-family: var(--sans);
  font-size: 14px; line-height: 1.45;
  color: var(--text);
}
/* Stacked under the steps the rail stops being a rail: full width would stretch
   the slider (and the CTA) across the whole page, so it keeps a card's width. */
@media (max-width: 1180px) {
  .sb-side-panel { position: static; max-width: 560px; }
}

/* Categories — same .sb-tile as the brands, plus an icon and the sub-type
   chevron. Popisek jede stejným řezem jako značky (dřív mono VERZÁLKY, které
   z kategorií dělaly vizuálně jinou soustavu než sousední značky). */
/* Grid s pojmenovanými oblastmi, ne flex: ikona vlevo přes obě řádky, název
   nahoře, podtyp pod ním, chevron vpravo. Ve flexu by se podtitulek nezalomil
   pod název, aniž by se do dlaždice přidal další obalový element. */
.sb-cat {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  grid-template-areas: "icon name chev" "icon sub chev";
  align-items: center;
  column-gap: 11px; row-gap: 2px;
}
.sb-cat input { display: none; }
.sb-cat .sb-tile-icon {
  grid-area: icon;
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--text-mute);
  transition: color .22s ease;
}
.sb-cat .sb-tile-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sb-cat.active .sb-tile-icon { color: var(--brand-hi); }
.sb-cat .sb-tile-name { grid-area: name; }
.sb-cat .sb-tile-sub  { grid-area: sub; }
.sb-cat .sb-cat-sub   { grid-area: chev; }
.sb-cat-sub {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 999px;
  background: rgba(255,255,255,0.05); color: inherit; cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.sb-cat-sub[hidden] { display: none; }   /* explicit display beats the hidden attr otherwise */
.sb-cat-sub svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Each tile's backdrop-filter makes a stacking context — lift the tile whose
   menu is open, or sibling tiles paint OVER the dropdown. */
.sb-cat.menu-open { z-index: 40; }
.sb-cat-sub:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.30); }
.sb-cat.has-sub .sb-cat-sub { border-color: var(--brand-hi); color: var(--brand-hi); }
.sb-submenu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 240px; max-height: 320px; overflow-y: auto; padding: 6px;
  background: rgba(20, 17, 13, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-sm);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  /* same thin cream scrollbar as .sel-menu (the site's select dropdowns) */
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(245,238,224,0.28) transparent;
}
.sb-submenu::-webkit-scrollbar { width: 8px; }
.sb-submenu::-webkit-scrollbar-track { background: transparent; }
.sb-submenu::-webkit-scrollbar-thumb { background: rgba(245,238,224,0.22); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.sb-submenu::-webkit-scrollbar-thumb:hover { background: rgba(245,238,224,0.34); background-clip: padding-box; }
.sb-submenu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-xs);
  background: none; color: var(--text-mute); font-size: 13.5px;
  text-align: left; cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.sb-submenu-item:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.sb-submenu-item.is-active { color: var(--brand-hi); }
.sb-submenu-d1 { padding-left: 24px; }
.sb-submenu-count { font-family: var(--mono); font-size: 11px; opacity: 0.5; }

/* Budget */
.sb-budget-val {
  font-family: var(--serif);
  font-size: 38px; font-weight: 400; letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 16px;
}
.sb-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: rgba(245,238,224,0.2);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.sb-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px;
  background: var(--brand);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px rgba(200,38,44,0.5);
}
.sb-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--brand);
  border-radius: 50%;
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px rgba(200,38,44,0.5);
}
.sb-budget-marks {
  display: flex; justify-content: space-between;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-mute);
}
/* „Sestavit set" — the only .btn in the builder; it lives in the budget rail. */
.set-builder .btn {
  width: 100%;
  margin-top: 22px;
  justify-content: center;
}

/* ── Result (glass summary header, glow-on-success) ───────────────────── */
/* Bez vlastního stropu — dědí šířku .container, takže „Váš soubor" stojí na
   téže ose jako konfigurátor nad ním a katalog pod ním. Karty jedou v pásech
   po třech (.result-row), takže se roztažením jen rozšíří, nezmnoží. */
.appl-result {
  margin: 80px 0 0;
  color: var(--text);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 760ms cubic-bezier(.22,1,.36,1), transform 760ms cubic-bezier(.22,1,.36,1);
}
.appl-result.is-revealed { opacity: 1; transform: translateY(0); }
.appl-result:empty { opacity: 0; transform: none; transition: none; }

/* ── Back-to-builder sticky pill ──────────────────────────────────────── */
.appl-back-pill {
  position: fixed;
  right: 28px; bottom: 28px;
  z-index: 90;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(10,9,8,0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245,238,224,0.20);
  color: rgba(245,238,224,0.95);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease, background 220ms ease;
}
.appl-back-pill.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.appl-back-pill:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.appl-back-pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) { .appl-back-pill { right: 16px; bottom: 16px; padding: 10px 14px; } }
.result-empty {
  text-align: center;
  padding: 60px 30px;
  border: 1px dashed rgba(245,238,224,0.25);
  background: rgba(245,238,224,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.result-empty h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin-bottom: 10px; color: var(--text); }
.result-empty p { color: var(--text-mute); }

.result-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 30px; flex-wrap: wrap;
  padding: 36px 40px;
  margin-bottom: 36px;
  background: rgba(245,238,224,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245,238,224,0.14);
  border-radius: var(--r-xs);
}
.result-head.within { box-shadow: inset 0 1px 0 rgba(192,168,120,0.18), 0 30px 80px rgba(0,0,0,0.35); }
.result-head.over   { box-shadow: inset 0 1px 0 rgba(200,38,44,0.30), 0 30px 80px rgba(0,0,0,0.35); }
.result-head .eyebrow {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brand-hi);
}
.result-head h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.05;
  margin-top: 10px;
  color: var(--text);
}
.result-head p { margin-top: 10px; color: rgba(245,238,224,0.78); }
.result-head p.warn { color: var(--brand-hi); margin-top: 4px; }
.promo-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 12px;
  /* Benefit-type accent (shared site-wide via [data-akce-type] / [data-akce-kind]):
     red 3+1 · amber % · green Kč · blue info / teal záruka / plum dárek. */
  --akce-c: var(--brand);
  background: var(--akce-c);
  border-radius: 999px;
  color: #fff;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}

/* ── Result rows (one strip per up-to-3 cards; grid expands on hover) ─── */
.result-row {
  display: grid;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
  transition: grid-template-columns 700ms cubic-bezier(.22,1,.36,1);
}
.result-row[data-count="1"] { grid-template-columns: 1fr; }
.result-row[data-count="2"] { grid-template-columns: 1fr 1fr; }
.result-row[data-count="3"] { grid-template-columns: 1fr 1fr 1fr; }
.result-row[data-count="2"].has-hover-0 { grid-template-columns: 1.6fr 1fr; }
.result-row[data-count="2"].has-hover-1 { grid-template-columns: 1fr 1.6fr; }
.result-row[data-count="3"].has-hover-0 { grid-template-columns: 1.6fr 1fr 1fr; }
.result-row[data-count="3"].has-hover-1 { grid-template-columns: 1fr 1.6fr 1fr; }
.result-row[data-count="3"].has-hover-2 { grid-template-columns: 1fr 1fr 1.6fr; }
@media (max-width: 980px) {
  .result-row[data-count] { grid-template-columns: 1fr; }
}
/* ─── Result card v3 — triptych-style full-bleed cinematic ─────────────── */
.rset-cell {
  flex: 1 1 0;
  min-width: 280px;
  height: clamp(440px, 56vh, 580px);
  position: relative;
  background: #000;
  overflow: hidden;
  border-radius: var(--r-md);
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: transform 600ms cubic-bezier(.22,1,.36,1);
}
.rset-cell:hover { transform: translateY(-3px); }
.rset-cell:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(200,38,44,0.55);
}
@media (max-width: 980px) {
  .result-row { flex-wrap: wrap; overflow-x: visible; }
  .rset-cell { flex: 1 1 100%; min-width: 100%; height: 64vh; min-height: 460px; }
}
.rset-face {
  position: absolute; inset: 0;
  opacity: 1;
  transition: opacity 280ms ease;
}
.rset-cell.swap-open .rset-face { opacity: 0; pointer-events: none; }

/* Product shots are product-on-WHITE — present them on a white field with
   `contain` so the whole appliance shows and the photo's own white background
   blends seamlessly (no white side-stripes from cover-cropping a narrow fridge).
   The white stack also means the hover zoom-OUT reveals white, not a black edge. */
.rset-slide-stack { position: absolute; inset: 0; background: #fff; }
.rset-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  box-sizing: border-box; padding: 4% 6% 0;
  object-fit: contain; object-position: center 36%;
  background: #fff;
  opacity: 0; transition: opacity 520ms ease, transform 900ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.rset-slide[data-active="1"] { opacity: 1; }
/* Hover ZOOMS OUT (steps back) so the whole spotřebič is nicely visible — not in. */
.rset-cell:hover .rset-slide[data-active="1"] { transform: scale(0.94); }
.rset-hover-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 520ms ease;
  pointer-events: none;
  z-index: 1;                /* above the slide stack, below the gradient */
  filter: brightness(0.92) saturate(1.08);
}
@media (hover: hover) {
  .rset-cell:hover .rset-hover-video { opacity: 1; }
}
.rset-cell.swap-open .rset-hover-video { opacity: 0 !important; }
.rset-shade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(10,9,8,0.94) 0%, rgba(10,9,8,0.4) 40%, rgba(10,9,8,0) 70%);
  pointer-events: none;
}
.rset-pill {
  position: absolute; top: 20px; left: 20px; z-index: 5;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  background: rgba(10,9,8,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
}
.rset-arrow {
  position: absolute; top: 36%; transform: translateY(-50%);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,9,8,0.45);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 220ms ease, background 220ms ease, border-color 220ms ease;
  z-index: 6;
}
.rset-arrow svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rset-arrow:hover { background: rgba(245,238,224,0.95); border-color: rgba(245,238,224,0.95); }
.rset-arrow:hover svg { stroke: var(--bg); }
.rset-arrow-prev { left: 14px; }
.rset-arrow-next { right: 14px; }
.rset-cell:hover .rset-arrow,
.rset-cell:focus-within .rset-arrow { opacity: 1; }
.rset-dots {
  position: absolute; left: 50%; top: 24px; transform: translateX(-50%);
  display: flex; gap: 6px;
  z-index: 5;
  opacity: 0;
  transition: opacity 220ms ease;
}
.rset-cell:hover .rset-dots,
.rset-cell:focus-within .rset-dots { opacity: 1; }
.rset-dot {
  width: 5px; height: 5px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: background 220ms ease, transform 220ms ease;
}
.rset-dot.is-active { background: #fff; transform: scale(1.4); }

/* ─── Meta overlay (eyebrow / title / desc / price / cta) ──────────────── */
.rset-meta {
  position: absolute; left: 24px; right: 24px; bottom: 24px;
  z-index: 4;
  display: flex; flex-direction: column; gap: 10px;
  color: #fff;
  pointer-events: none;             /* let arrows/swap stay clickable */
}
.rset-meta > * { pointer-events: auto; }
.rset-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brand-hi);
}
.rset-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.05; font-weight: 300; letter-spacing: -0.02em;
  margin: 0;
}
.rset-note {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold);
}
/* EU energy label + dB badges on the result preview card. The energy badge is
   the SAME real EU-arrow graphic as the catalog cards — reset to static here
   (it defaults to absolute for the card-image overlay). */
.rset-specs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.rset-energy { flex: none; line-height: 0; }
.rset-specs .ac-energy-badge { position: static; top: auto; left: auto; z-index: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); }
.rset-specs .ac-energy-badge img { height: 22px; width: auto; display: block; }
.rset-db {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--r-xs);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.9);
}
/* Tier chip sits inline in the result-card specs row (reuses .ac-tier colors). */
.rset-specs .rset-tier { position: static; font-size: 10px; }
/* "Navrženo v úrovni: X" line above the result cards. */
.result-tier { margin: 4px 0 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.result-tier strong { color: var(--tier-c, var(--text)); }
.result-tier strong[data-tier="Design"]   { --tier-c: #9c8e76; }
.result-tier strong[data-tier="Premium"]  { --tier-c: #b8804a; }
.result-tier strong[data-tier="Luxury"]   { --tier-c: #9c5b62; }
.result-tier strong[data-tier="Prestige"] { --tier-c: #c2a14e; }
.result-tier-note { opacity: 0.55; font-weight: 400; text-transform: none; letter-spacing: 0.02em; }
.rset-desc {
  max-height: 0; opacity: 0; overflow: hidden;
  margin: 0;
  font-family: var(--sans); font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,0.82);
  transition: max-height 500ms ease, opacity 500ms ease, margin 500ms ease;
}
.rset-cell:hover .rset-desc,
.rset-cell:focus-within .rset-desc { max-height: 160px; opacity: 1; margin-top: 2px; }
.rset-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 4px;
}
.rset-price { display: inline-flex; align-items: baseline; gap: 10px; }
.rset-orig {
  font-family: var(--mono); font-size: 11px;
  color: rgba(255,255,255,0.55);
  text-decoration: line-through;
}
/* applPriceHtml() vrací tři sourozence (.ac-orig / .ac-now / .ac-price-note)
   do TOHOTO jednoho spanu, ne do .rset-price — bez vlastního flexu a mezery se
   přeškrtnutá původní cena slila s akční do „14 998 Kč2 Kč". Poznámka „bez DPH"
   si vlastní řádek drží sama (.ac-price-note má flex-basis: 100%). */
.rset-now {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.95);
}
/* Fix round 1, Critical 2: applPriceHtml() now nests real .ac-now/.ac-orig/
   .ac-price-note spans inside .rset-now — .ac-now's own color:var(--text-paper)
   (dark ink for the WHITE .appliance-card face) beats .rset-now's intended
   rgba(255,255,255,…) by specificity (same class count, but .ac-now is the
   element's own class), so the price rendered dark-on-dark over this photo
   card. Restore what .rset-now/.rset-orig already declared for themselves. */
.rset-now .ac-now,
.rset-now .ac-onreq,
.rset-now .ac-free {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.95);
}
.rset-now .ac-orig {
  font-family: var(--mono); font-size: 11px;
  color: rgba(255,255,255,0.55);
  text-decoration: line-through;
}
.rset-now .ac-price-note {
  color: rgba(255,255,255,0.55);
}
.rset-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(245,238,224,0.10);
  border: 1px solid rgba(245,238,224,0.40);
  color: rgba(245,238,224,0.95);
  cursor: pointer;
  transition: background 280ms ease, color 280ms ease, border-color 280ms ease;
}
.rset-cta:hover {
  background: rgba(245,238,224,0.95); color: var(--bg);
  border-color: rgba(245,238,224,0.95);
}
.rset-cta svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.rset-swap-btn {
  position: absolute; top: 20px; right: 20px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,9,8,0.45);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 220ms ease, background 220ms ease, border-color 220ms ease;
  z-index: 25;
}
.rset-swap-btn svg {
  position: absolute; inset: 0;
  width: 16px; height: 16px; margin: auto;
  fill: none; stroke: #fff;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 220ms ease;
}
.rset-swap-icon-close { opacity: 0; }
.rset-swap-btn:hover { background: rgba(245,238,224,0.95); border-color: rgba(245,238,224,0.95); }
.rset-swap-btn:hover svg { stroke: var(--bg); }
.rset-cell:hover .rset-swap-btn,
.rset-cell:focus-within .rset-swap-btn,
.rset-cell.swap-open .rset-swap-btn { opacity: 1; }
.rset-cell.swap-open .rset-swap-btn {
  background: var(--brand); border-color: var(--brand);
}
.rset-cell.swap-open .rset-swap-btn svg { stroke: #fff; }
.rset-cell.swap-open .rset-swap-icon-default { opacity: 0; }
.rset-cell.swap-open .rset-swap-icon-close   { opacity: 1; }
/* ─── Inline swap panel (covers the card face in place) ────────────────── */
.rset-swap-panel {
  position: absolute; inset: 0;
  z-index: 18;
  background: rgba(10,9,8,0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column;
  padding: 24px 20px 20px;
  opacity: 0;
  transition: opacity 220ms ease;
  color: #fff;
}
.rset-cell.swap-open .rset-swap-panel { opacity: 1; }
.rsp-head {
  margin-bottom: 14px;
  padding-right: 50px;       /* room for the close button in top-right */
}
.rsp-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brand-hi);
  display: block;
}
/* Swap panel — search + brand filter so you keep the preferred brand but can
   still find any other (preferred brands are ranked first in the list). */
.rsp-filter { margin-bottom: 12px; display: flex; flex-direction: column; gap: 9px; }
.rsp-search {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px;
  background: rgba(245,238,224,0.06);
  border: 1px solid rgba(245,238,224,0.14);
  color: #fff; font-family: var(--sans); font-size: 13px;
  border-radius: 6px; outline: none;
}
.rsp-search::placeholder { color: rgba(245,238,224,0.4); }
.rsp-search:focus { border-color: var(--brand); }
.rsp-brands { display: flex; flex-wrap: wrap; gap: 6px; }
.rsp-fbrand {
  padding: 4px 10px;
  background: rgba(245,238,224,0.05);
  border: 1px solid rgba(245,238,224,0.12);
  color: var(--text-mute);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 999px; cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.rsp-fbrand:hover { color: #fff; border-color: rgba(245,238,224,0.3); }
.rsp-fbrand.active { background: rgba(200,38,44,0.24); border-color: var(--brand); color: #fff; }
.rsp-list {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,238,224,0.18) transparent;
}
.rsp-list::-webkit-scrollbar { width: 4px; }
.rsp-list::-webkit-scrollbar-thumb { background: rgba(245,238,224,0.18); }
.rsp-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  background: rgba(245,238,224,0.05);
  border: 1px solid rgba(245,238,224,0.10);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.rsp-item:hover {
  background: rgba(245,238,224,0.10);
  border-color: var(--brand);
  transform: translateX(2px);
}
.rsp-item img {
  width: 54px; height: 54px; object-fit: contain; flex-shrink: 0;
  background: #fff; padding: 3px; box-sizing: border-box;
}
.rsp-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rsp-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rsp-brand {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brand-hi);
}
.rsp-delta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--text-mute);
}
.rsp-delta.up   { color: var(--brand); }
.rsp-delta.down { color: var(--gold); }
.rsp-name {
  font-family: var(--sans); font-size: 12px;
  color: var(--text); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rsp-price { font-family: var(--serif); font-size: 15px; color: var(--text); }
/* Fix round 1, Critical 2 — same trap as .rset-now above, other side of the
   swap panel: applPriceHtml() nests .ac-now inside .rsp-price, whose own dark
   ink (var(--text-paper)) wins over .rsp-price's intended var(--text). --text/
   --text-mute are already proven legible on this exact dark panel (.rsp-name,
   .rsp-fbrand use them unscoped), so reuse them rather than new literals. */
.rsp-price .ac-now,
.rsp-price .ac-onreq,
.rsp-price .ac-free {
  font-family: var(--serif); font-size: 15px; color: var(--text);
}
.rsp-price .ac-orig {
  font-family: var(--mono); font-size: 11px;
  color: var(--text-mute);
  text-decoration: line-through;
}
.rsp-price .ac-price-note {
  color: var(--text-mute);
}
.rsp-empty { color: var(--text-mute); font-size: 13px; padding: 12px 4px; }

/* ─── Mix-značek toggle (nested under the brand chips) ─────────────────── */
.sb-mixrow { margin-top: 24px; }
.sb-mixrow.is-implicit { opacity: 0.35; pointer-events: none; }
.sb-mix-toggle {
  display: flex; align-items: flex-start; gap: 14px;
  cursor: pointer;
  padding: 4px 0;
}
.sb-mix-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.sb-mix-track {
  width: 40px; height: 22px;
  background: rgba(245,238,224,0.12);
  border: 1px solid rgba(245,238,224,0.20);
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  transition: background 220ms ease, border-color 220ms ease;
  margin-top: 2px;
}
.sb-mix-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--text);
  border-radius: 50%;
  transition: transform 220ms cubic-bezier(.22,1,.36,1);
}
.sb-mix-toggle input:checked + .sb-mix-track { background: var(--brand); border-color: var(--brand); }
.sb-mix-toggle input:checked + .sb-mix-track .sb-mix-thumb { transform: translateX(18px); }
.sb-mix-text { display: flex; flex-direction: column; gap: 2px; }
.sb-mix-title {
  font-family: var(--sans); font-size: 13px; color: var(--text);
}
.sb-mix-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--text-mute);
}

/* ─── Result statuses & dropped categories ─────────────────────────────── */
.result-empty-budget {
  padding: 32px 28px;
  background: rgba(245,238,224,0.05);
  border: 1px solid rgba(245,238,224,0.14);
}
.result-empty-budget .result-actions {
  margin-top: 18px;
}
.result-head.partial {
  box-shadow: inset 0 1px 0 rgba(192,168,120,0.30), 0 30px 80px rgba(0,0,0,0.35);
}
.result-dropped {
  margin: 18px 0;
  padding: 14px 18px;
  background: rgba(192,168,120,0.08);
  border-left: 2px solid rgba(192,168,120,0.45);
}
.result-dropped .eyebrow {
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 4px;
}
.result-dropped p {
  font-family: var(--sans); font-size: 13px; color: rgba(245,238,224,0.85);
  line-height: 1.5;
}
.result-dropped em { font-style: italic; color: var(--text); }

/* ── Swap banner (glass, dark) ───────────────────────────────────────── */
.swap-banner {
  margin-top: 70px;
  padding: 56px 40px;
  background: rgba(200, 38, 44, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200, 38, 44, 0.28);
  border-radius: var(--r-xs);
}
.swap-head { text-align: center; margin-bottom: 40px; }
.swap-head .eyebrow { color: var(--brand-hi); display: inline-block; margin-bottom: 8px; }
.swap-head h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; color: var(--text); }
.swap-list { display: flex; flex-direction: column; gap: 36px; }
.swap-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
}
@media (max-width: 820px) {
  .swap-row { grid-template-columns: 1fr; }
  .swap-arrow { text-align: center; }
}
.swap-from { opacity: 0.5; filter: grayscale(0.4); }
.swap-from .appliance-card { pointer-events: none; }
.swap-arrow {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand);
}
.swap-list .btn { align-self: center; margin-top: 12px; }

/* ── Appliance card (glass-floated, video-on-hover) ───────────────────── */
.appliance-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-paper);
  background: #fff;
  border-radius: var(--r-md);
  /* clip inner content (hover image-zoom, shade) to the rounded card so nothing
     spills past the corners. The old energy badge that used to overhang at
     left:-9px now lives in the price row, so clipping is safe. The card's own
     box-shadow is NOT clipped by its own overflow, so the hover lift still reads. */
  overflow: hidden;
  transition: transform 420ms cubic-bezier(.22,1,.36,1),
              box-shadow 420ms cubic-bezier(.22,1,.36,1),
              border-color 320ms ease;
  color: var(--text-paper);
  position: relative;
}
.appliance-card:hover {
  transform: translateY(-4px);
  /* no drop shadow — the lift + red border IS the hover cue (the shadow pooled
     under the card and the user didn't want it) */
  box-shadow: none;
  border-color: rgba(200,38,44,0.4);
}
.ac-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-elev-1);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.ac-thumb > img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity 360ms ease, transform 6s ease-out;
}
.appliance-card:hover .ac-thumb > img { transform: scale(1.04); }
.ac-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 480ms ease;
  pointer-events: none;
}
.ac-thumb-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,0.05) 0%, rgba(10,9,8,0.0) 30%, rgba(10,9,8,0.55) 100%);
  opacity: 0;
  transition: opacity 480ms ease;
  pointer-events: none;
}
@media (hover: hover) {
  .appliance-card:hover .ac-video { opacity: 1; }
  .appliance-card:hover .ac-thumb-shade { opacity: 1; }
  .appliance-card:hover .ac-thumb > img { opacity: 0.0; }
}
/* ── Card markers ──────────────────────────────────────────────────────────
   Loud promo flags live in a top-left STACK on the image (UX consensus: 1–2
   max). Each is a compact pill: akce carry their per-benefit colour, bestseller
   is dark glass + a star, outlet is brand red. The tier + energy markers live
   off the image (eyebrow text + next to the price). */
.ac-flags {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  max-width: calc(100% - 24px);
}
.ac-flag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
  border-radius: var(--r-xs);
}
.ac-flag-i { width: 11px; height: 11px; flex: none; }
/* bestseller — dark glass + a warm-gold star */
.ac-best {
  background: rgba(18,14,11,0.62);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #f5eee0; border: 1px solid rgba(245,238,224,0.2);
}
.ac-best .ac-flag-i { fill: #d8b46a; }
/* outlet — brand red */
.ac-out { background: var(--brand); color: #fff; }
/* Konfigurátor — STŘÍBRNÝ odznak v pravém horním rohu karty u kusu, který jde
   složit v /konfigurator. Vlastní roh schválně: `.ac-flags` vlevo je sloupec
   PROMO příznaků se stropem dva (akce, výprodej, nejprodávanější) a schopnost
   produktu tam nemá co brát místo. Kov, ne barva — ze stejného důvodu: nic
   neslibuje, jen říká, že se kus dá poskládat.
   Přechod je broušený plech (světlo → stín → světlo), tmavý inkoust drží
   kontrast i na bílé produktové dlaždici, kde by světlé stříbro splynulo. */
.ac-cfg {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
  border-radius: var(--r-xs);
  color: #2e2b28;
  background: linear-gradient(135deg, #fdfdfe 0%, #d5d9de 26%, #a5acb5 50%, #d2d6db 72%, #f7f8f9 100%);
  /* Chladně šedý obrys, ne bílý: karta nábytku je bílá dlaždice a bílý rám se
     na ní ztratí — odznak by pak plaval bez hrany. Vnitřní bílá linka nahoře
     drží plech „vypouklý". */
  border: 1px solid rgba(88,96,106,0.38);
  box-shadow: 0 1px 3px rgba(12,10,8,0.2), inset 0 1px 0 rgba(255,255,255,0.85);
}
.ac-cfg svg { width: 11px; height: 11px; flex: none; }
/* Brand — quiet mono eyebrow text in the info area (shown when there's no logo). */
.ac-brand {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mute);
}
/* Curated fridge tier — a small, quiet "odznáček": dark pill + a leading dot
   that escalates by tier (cream → bronze → gold → red), so Prestige reads as a
   subtle accent rather than a loud red badge. */
/* Tier marker — no pill, no border: just a coloured dot + coloured label.
   Deep mid-tone colours read on both the white product tile and a dark
   placeholder thumb; a TIGHT 1px shadow keeps it crisp (not smeared/blurry). */
/* Tier ("náš design" curation level) — an inline TEXT label in the eyebrow row
   (dot + name), NOT an image badge. Colours match the catalog level selector
   (sand → bronze → burgundy → gold) so the whole tier system reads as one. */
.ac-tier {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tier-c, #9c8e76);
}
.ac-tier::before {
  content: ''; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tier-c, #9c8e76);
  box-shadow: 0 0 7px color-mix(in srgb, var(--tier-c, #9c8e76) 65%, transparent);
}
.ac-tier[data-tier="Design"]   { --tier-c: #9c8e76; }
.ac-tier[data-tier="Premium"]  { --tier-c: #b8804a; }
.ac-tier[data-tier="Luxury"]   { --tier-c: #9c5b62; }
.ac-tier[data-tier="Prestige"] { --tier-c: #c2a14e; }

/* ══ Fridge export overlay (AEG / Electrolux from the TMO export) ══════════ */

/* EU energy-class chip — a small colour-coded arrow tab with the class letter
   (A green … G red), the official label look. Colours come from inline vars. */
.energy-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; min-width: 22px; padding: 0 13px 0 8px;
  background: var(--ec-bg, #555); color: var(--ec-fg, #fff);
  font-family: var(--mono); font-weight: 700; font-size: 12px; line-height: 1;
  border-radius: var(--r-xs);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  box-shadow: 0 6px 16px rgba(0,0,0,0.28);
}
.energy-chip--lg {
  height: 40px; min-width: 42px; font-size: 20px; padding: 0 22px 0 15px; border-radius: 5px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

/* Card thumb for export fridges: the clean product shot CONTAINED on a soft
   light tile (a proper catalogue card), never a cropped interior. */
.ac-thumb--product { background: #fff; }
.ac-thumb--product > img { object-fit: contain; padding: 16px; }
/* …so the image only fades on hover when there's actually a video to reveal. */
@media (hover: hover) {
  .appliance-card:hover .ac-thumb > img { opacity: 1; }
  .appliance-card:hover .ac-thumb:has(.ac-video) > img { opacity: 0; }
}

/* Brand logo — cream monochrome, no plate. On the card it lives in the info
   area (dark) above the subcategory; on the detail it sits in the hero. */
/* On the white card the real-colour logo sits directly on the surface (no
   plate) — AEG red / Electrolux navy are built for white. */
/* Brand logo on the white card — the real-colour logo, NO background (AEG red /
   Electrolux navy read directly on the white surface). */
.ac-brandlogo { display: inline-flex; align-self: flex-start; margin: 2px 0 11px; }
.ac-brandlogo img { height: 18px; width: auto; display: block; }
/* On the dark catalog cards (carousel + grid) the brand mark + brand text are
   forced WHITE — the coloured/dark logos were low-contrast on the dark card.
   The white BASE card (#fff, e.g. PDP "Z kolekce" related) keeps the dark logo. */
.appl-cat-scroll .ac-brandlogo img,
.atr-cards .ac-brandlogo img { filter: brightness(0) invert(1); }
.appl-cat-scroll .ac-brand,
.atr-cards .ac-brand { color: var(--text); }
.pdp-brandlogo { display: inline-block; margin-bottom: 18px; }
.pdp-brandlogo img {
  height: 24px; width: auto; display: block;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.55));
}

/* Energy panel on the detail — one integrated dark-glass block: class chip +
   label text + the small framed štítek, instead of a floating white box. */
.pdp-energy {
  position: relative;
  margin-top: 24px;
  display: flex; align-items: center; gap: 15px;
  padding: 16px 18px;
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.pdp-energy--sticker { padding-right: 80px; min-height: 84px; }
.pdp-energy-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pdp-energy-meta strong { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--text); }
.pdp-energy-meta span {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-mute); line-height: 1.4;
}
/* The real energy label, presented like a printed sticker overhanging the panel
   corner (user: "nech trosku presahuje von ako taký štítok"). */
.pdp-energy-sticker {
  position: absolute; top: -14px; right: 16px; z-index: 2;
  line-height: 0;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.42));
  transition: transform 280ms ease;
}
.pdp-energy-sticker:hover { transform: scale(1.04); }
.pdp-energy-sticker img {
  height: 112px; width: auto; display: block;
  border: 4px solid #fff; border-radius: var(--r-xs);
}

/* Card: the real EU energy-class badge (just the colour-coded letter) — straight,
   and overhanging the card's top-left corner (lives on the card, outside the
   clipped thumb, so it can stick out). */
.ac-energy-badge {
  position: absolute; top: 13px; left: -9px; z-index: 5;
  display: inline-flex; line-height: 0;
  filter: drop-shadow(0 3px 9px rgba(0,0,0,0.28));
  pointer-events: none;
}
.ac-energy-badge img { height: 26px; width: auto; display: block; }
/* For export fridges the bestseller/outlet pills drop to the bottom so they
   clear the energy badge at the top-left. */
.ac-tags--btm { top: auto; bottom: 12px; }

/* Compact editorial header (replaces the stretched hero on fridge details). */
.pdp-appliance-head { padding: calc(var(--nav-h) + 64px) 0 30px; }
.pdp-appliance-head .pdp-brandlogo { margin-bottom: 14px; }
.pdp-appliance-head .pdp-brandlogo img { filter: none; }
.pdp-appliance-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 5vw, 74px); line-height: 1.0; letter-spacing: -0.025em;
  margin: 12px 0 0; color: var(--text); max-width: 18ch;
}

/* Přednosti — premium, square imagery, sharp corners, numbered, refined type. */
.pdp-usps {
  max-width: var(--container); margin: 0 auto;
  padding: 104px var(--gutter); border-top: 1px solid var(--line);
}
.pdp-usps-head { margin-bottom: 56px; }
.pdp-usps-head .display-m { margin-top: 12px; }
.pdp-usps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 36px; }
.pdp-usp { display: flex; flex-direction: column; }
.pdp-usp-img {
  aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--bg-elev-1); margin-bottom: 22px;
  border-radius: var(--r-md);
}
.pdp-usp-img img { width: 100%; height: 100%; object-fit: cover; }
.pdp-usp-n {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--text-dim); display: block; margin-bottom: 12px;
}
.pdp-usp h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: 19px; line-height: 1.32; letter-spacing: -0.01em;
  margin: 0 0 10px; color: var(--text);
}
.pdp-usp p { font-family: var(--sans); font-size: 13.5px; line-height: 1.74; color: var(--text-mute); margin: 0; }
@media (max-width: 900px) {
  .pdp-usps-grid { grid-template-columns: 1fr 1fr; gap: 44px 26px; }
  .pdp-usps { padding: 76px var(--gutter); }
}
@media (max-width: 560px) { .pdp-usps-grid { grid-template-columns: 1fr; } }
/* Dense USP grid — vendor feeds (Whirlpool) ship many feature blocks; show them
   all in a tighter, smaller layout. Fridges (≤6 USPs) keep the roomy default. */
.pdp-usps--dense .pdp-usps-grid { grid-template-columns: repeat(4, 1fr); gap: 40px 24px; }
.pdp-usps--dense .pdp-usp-img { margin-bottom: 16px; }
.pdp-usps--dense .pdp-usp h3 { font-size: 16px; margin-bottom: 7px; }
/* Text-only přednosti — supplier feeds (Favia/Elica, Ancor/Blanco) carry no USP
   imagery. Editorial two-column ledger: hairline rows, mono index, serif voice.
   `pdp-usp--plain` = no title (Blanco sentence bullets) → the sentence itself is
   set in serif as the statement. Photo USPs are untouched. */
.pdp-usps-list { column-count: 2; column-gap: 88px; }
.pdp-usp--text {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: grid; grid-template-columns: 46px 1fr; gap: 0 16px;
  align-items: start; flex-direction: unset;
  border-top: 1px solid var(--line);
  padding: 24px 0 30px;
}
.pdp-usp--text .pdp-usp-n { margin: 0; padding-top: 5px; color: var(--brand); }
.pdp-usp--text h3 { font-size: 18px; margin-bottom: 8px; }
.pdp-usp--text p { font-size: 13.5px; max-width: 56ch; }
.pdp-usp--plain p {
  font-family: var(--serif); font-size: 16.5px; line-height: 1.6;
  letter-spacing: -0.005em; color: var(--text);
}
@media (max-width: 900px) {
  .pdp-usps-list { column-count: 1; }
  .pdp-usp--text { padding: 20px 0 24px; }
}
.pdp-usps--dense .pdp-usp p { font-size: 12.5px; line-height: 1.66; }
@media (max-width: 900px) { .pdp-usps--dense .pdp-usps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pdp-usps--dense .pdp-usps-grid { grid-template-columns: 1fr; } }

/* Real EU energy-class arrow in the PDP energy box (the same asset the cards use)
   — replaces the flat chip when the vendor gives no full label image. */
.pdp-energy-arrow { height: 56px; width: auto; display: block; flex: 0 0 auto; }

/* Collapsible spec overflow: ~8 key rows show, the long vendor tail folds away. */
.pdp-specs-more { display: block; }
.pdp-specs-more > summary {
  list-style: none; cursor: pointer; display: block; padding: 15px 2px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); border-top: 1px solid var(--line); transition: color 0.2s;
}
.pdp-specs-more > summary::-webkit-details-marker { display: none; }
.pdp-specs-more > summary::marker { content: ''; }
.pdp-specs-more > summary:hover { color: var(--text); }
.pdp-specs-more .psm-hide { display: none; }
.pdp-specs-more[open] > summary .psm-show { display: none; }
.pdp-specs-more[open] > summary .psm-hide { display: inline; }

/* Gallery — justified band: images keep their aspect (flex-grow/basis set
   inline from w/h), rows fill the width; the spacer keeps the last row from
   stretching. */
.pdp-gallery-band {
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: var(--container); margin: 0 auto; padding: 10px var(--gutter) 30px;
}
.pdp-gallery-band::after { content: ''; flex-grow: 1e9; }
.pgb-item {
  position: relative; height: 260px; overflow: hidden;
  border-radius: var(--r-xs); background: var(--bg-elev-1);
}
.pgb-item img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 1.2s ease;
}
.pgb-item:hover img { transform: scale(1.05); }
@media (max-width: 700px) { .pgb-item { height: 180px; } }

/* Back button — floats top-left under the nav (over the hero, or in the shop's
   nav-offset). Works for both appliance detail layouts. */
.pdp-appliance { position: relative; }
.pdp-back {
  position: absolute; top: calc(var(--nav-h) + 16px); left: var(--gutter); z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); background: rgba(38,33,25,0.62);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.pdp-back:hover { background: rgba(48,42,34,0.85); transform: translateX(-2px); }
.pdp-back svg { display: block; }

/* ── Classic e-shop product layout (fridges): [thumbs · main + story] left,
   info right. ────────────────────────────────────────────────────────────── */
.pdp-shop {
  max-width: var(--container); margin: 0 auto;
  padding: calc(var(--nav-h) + 56px) var(--gutter) 64px;
  display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 56px; align-items: start;
}
.pdp-shop-gallery { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: start; }
/* Single photo (no thumb rail) — without this the main shot falls into the 76px thumb column. */
.pdp-shop-gallery.psg--single { grid-template-columns: 1fr; }
/* Pure-white tile so the manufacturer's white-background product shot blends in
   (no "double white" against our cream). Product fills one axis, white the rest. */
.psg-main {
  aspect-ratio: 1 / 1; background: #fff; border-radius: 4px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.psg-main img { width: 100%; height: 100%; object-fit: contain; padding: 30px; cursor: zoom-in; transition: opacity 220ms ease; }
/* The thumb rail never exceeds the main image's height: .psg-side stretches to
   the grid row (whose height = the square .psg-main) and contributes none of
   its own, the rail scrolls inside it, the arrows page the overflow. */
.psg-side { position: relative; align-self: stretch; min-height: 0; }
.psg-thumbs {
  position: absolute; inset: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: none;
}
.psg-thumbs::-webkit-scrollbar { display: none; }
.psg-nav {
  position: absolute; left: 0; width: 100%; height: 28px; z-index: 2;
  border: 1px solid var(--line); border-radius: var(--r-xs); padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 16, 13, 0.85); color: var(--text);
  transition: background 200ms ease, border-color 200ms ease;
}
.psg-nav:hover { background: rgba(34, 28, 22, 0.92); border-color: var(--line-strong); }
.psg-nav--up { top: 0; }
.psg-nav--down { bottom: 0; }
.psg-nav[hidden] { display: none; }
.psg-thumb {
  width: 76px; height: 76px; flex: none; padding: 0; cursor: pointer; overflow: hidden;
  background: #fff; border: 1px solid var(--line-paper); border-radius: var(--r-xs);
  transition: border-color 200ms ease, transform 200ms ease;
}
.psg-thumb:hover { transform: translateY(-2px); }
.psg-thumb.is-active { border-color: var(--text); }
.psg-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

/* Story sits directly UNDER the gallery, in the left column (not its own section). */
.pdp-shop-story { margin-top: 48px; max-width: 640px; }
.pdp-shop-story p { margin-top: 18px; }

.pdp-shop-info { padding-top: 6px; }
.pdp-shop-info .pdp-brandlogo { margin-bottom: 14px; }
.pdp-shop-info .eyebrow.brand { display: block; }
.pdp-shop-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 3.2vw, 48px); line-height: 1.06; letter-spacing: -0.02em;
  margin: 12px 0 26px; color: var(--text);
}
.pdp-shop-info .pdp-energy { margin-top: 26px; }

@media (max-width: 900px) {
  .pdp-shop {
    grid-template-columns: 1fr; gap: 30px;
    padding-top: calc(var(--nav-h) + 28px);
  }
  .pdp-shop-info { position: static; }
  .pdp-shop-gallery { grid-template-columns: 62px 1fr; }
  .psg-main { aspect-ratio: 4 / 3; }
  .psg-thumb { width: 62px; height: 62px; }
}
@media (max-width: 560px) {
  .pdp-shop-gallery { grid-template-columns: 1fr; }
  /* Single column: the rail becomes a horizontal swipe row under the main
     image — static flow again, arrows off (touch scrolls naturally). */
  .psg-side { order: 2; align-self: auto; }
  .psg-thumbs {
    position: static; flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
  }
  .psg-nav { display: none; }
  .psg-thumb { width: 56px; height: 56px; }
}

/* Gallery video item (Product Animation) — main player + a play badge on its thumb. */
.psg-main video { width: 100%; height: 100%; object-fit: cover; display: block; }
.psg-thumb--video { position: relative; }
.psg-play {
  position: absolute; inset: 0; margin: auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(18,14,11,0.62); display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.psg-play::before {
  content: '';
  border-left: 7px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  margin-left: 2px;
}

/* Related "Další od …" cards match the /spotrebice catalog card EXACTLY:
   dark card body (white shows only behind the product photo via
   .ac-thumb--product), light text. Mirrors the .atr-cards / .appl-cat-scroll
   colour treatment — crucially re-colouring .ac-sub to --text-mute (the old
   override missed it, leaving the subcategory line dark-on-dark = broken). */
.pdp-related-grid .appliance-card {
  background: var(--bg-elev-1); color: var(--text); border-color: var(--line);
}
.pdp-related-grid .appliance-card:hover { border-color: var(--line-strong); }
.pdp-related-grid .ac-name,
.pdp-related-grid .ac-now  { color: var(--text); }
.pdp-related-grid .ac-sub,
.pdp-related-grid .ac-orig { color: var(--text-mute); }

/* ── Appliance e-shop detail — full-width CREAM SHEET ────────────────────────
   NOT the whole page (page bg + nav + footer stay dark): the whole detail
   CONTENT (product block → přednosti → "Další od …" → Ke stažení) is wrapped in
   one FULL-WIDTH cream/paper sheet with ROUNDED corners, sitting on the dark
   page between the nav and the footer. The gallery white tiles were already
   authored "against our cream", so this is the intended context. Re-scope the
   theme tokens on the sheet; the few literal dark-glass surfaces inside it
   (back btn, gallery nav, solid CTA, brand-logo shadow) get targeted overrides. */
.appl-shop-sheet {
  --text:        var(--text-paper);
  --text-mute:   var(--text-mute-paper);
  --text-dim:    #8c7f6a;
  --line:        var(--line-paper);
  --line-strong: #c9bca3;
  --bg-elev-1:   #ffffff;
  --bg-elev-2:   #ece3d4;
  color: var(--text-paper);
  background: #f8f6f1; /* off-white (not the beige --bg-paper) — catalog detail panel */
  border-radius: var(--r-lg);
  /* full width, just below the fixed nav. ŽÁDNÁ mezera nad patičkou: patička je
     skoro černá (#05040a), stránka teplá tmavá (#1c1813), takže z odsazení mezi
     nimi byl vidět 56px šedohnědý pruh, který vypadal jako chyba sazby. Zaoblené
     spodní rohy čte i tak — vykrojí se do patičky. */
  margin: calc(var(--nav-h) + 22px) 0 0;
}
@media (max-width: 900px) { .appl-shop-sheet { border-radius: var(--r-md); margin-top: calc(var(--nav-h) + 14px); } }

/* ── Detail rozdělený editorskými bloky (admin → produkt → záložka „Bloky") ──
   Krémový list KONČÍ zaoblenými rohy pod Přednostmi, pás bloků běží na tmavé
   stránce a druhý list začíná u „Podobných kusů" / „Ke stažení". Markup skládá
   `pdpBlocksSplit()` v app.js; bez bloků žádná z těch tříd nevznikne a detail
   zůstane jedním listem.
   Mezery kolem tmavého pásu dělá VÝHRADNĚ vlastní `padding: 56px 0` bloků
   (`.st-blk`) — proto oba listy i obal `.page-blocks` svoje odsazení k pásu
   ruší. Bez toho je pruh nahoře o 96 px vyšší než dole a rozdělení vypadá
   jako chyba sazby.
   Specifičnost dvěma třídami je schválně: `@media (max-width: 900px)` výš
   nastavuje `.appl-shop-sheet { margin-top: … }` a na mobilu by jednotřídní
   pravidlo přebilo a druhý list odsunulo o výšku navigace. */
.appl-shop-sheet.appl-shop-sheet--split { margin-bottom: 0; }
.appl-shop-sheet.appl-shop-sheet--tail  { margin-top: 0; }
.pdp-blocks.pdp-blocks--sheet { padding: 0; }
/* Sekce uvnitř druhého listu nese `border-top` inline (dědictví tmavé stránky);
   hned pod zaoblenou hranou listu je z ní vlásková linka „na okraji papíru". */
.appl-shop-sheet--tail > .section:first-child { border-top: 0 !important; }
/* the parent .pdp pads nav-h+32 to clear the nav at y=0 — but inside the sheet
   the sheet margin already does that, so drop the redundant top padding */
.appl-shop-sheet .pdp-appliance { padding-top: 0; }
/* the product block is container-bound content inside the full-width sheet
   (the breadcrumb bar above it provides the top breathing room) */
.appl-shop-sheet .pdp-shop { padding-top: 26px; }
/* breadcrumb bar: back pill + the home→category→product trail, on one row at
   the top of the sheet, container-bound to align with the product below */
.pdp-crumbbar {
  max-width: var(--container); margin: 0 auto;
  padding: 30px var(--gutter) 0;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
/* crumb placed inside a catalog's own .container (right after the filter row,
   above the grid) — drop the container padding so it aligns with the grid */
.pdp-crumbbar--incat { max-width: none; margin: 0; padding: 2px 0 18px; }
/* back button now sits IN the crumb bar (static), not pinned under the nav */
.appl-shop-sheet .pdp-back {
  position: static; top: auto; left: auto;
  background: rgba(255,255,255,0.72);
  color: var(--text-paper);
  border-color: var(--line-paper);
}
.appl-shop-sheet .pdp-back:hover { background: #fff; }
/* the trail itself — mono uppercase path crumbs, a faint "/" separator and the
   current product name set apart (sans, semibold, not uppercase) */
.pdp-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; min-width: 0; }
.pdp-crumb {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--text-mute); text-decoration: none; white-space: nowrap;
  transition: color 180ms ease;
}
.pdp-crumb:hover { color: var(--brand-hi); }
.pdp-crumb-home { display: inline-flex; align-items: center; }
.pdp-crumb-home svg {
  width: 17px; height: 17px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.pdp-crumb-sep { color: var(--text-dim); opacity: 0.6; font-size: 11px; }
.pdp-crumb-current {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--text); white-space: normal;
}
/* the e-shop layout uses the DARK brand mark on the cream sheet — drop the dark
   drop-shadow that was meant for a dark background */
.appl-shop-sheet .pdp-brandlogo img { filter: none; }
/* gallery thumb pager arrows — light glass on the white gallery */
.appl-shop-sheet .psg-nav { background: rgba(255,255,255,0.9); color: var(--text-paper); }
.appl-shop-sheet .psg-nav:hover { background: #fff; }
/* primary CTA ("Přidat do výběru") — the dark-glass solid would be ink-on-ink
   on the cream sheet; make it a solid ink button with cream text (hover → red) */
.appl-shop-sheet .btn.solid {
  background: var(--text-paper);
  color: var(--bg-paper);
  border-color: var(--text-paper);
}

/* Downloads — at the very bottom of the detail page (manual / EcoDesign / diagram). */
.pdp-downloads {
  max-width: var(--container); margin: 0 auto;
  padding: 64px var(--gutter) 84px; border-top: 1px solid var(--line);
}
.pdp-downloads .eyebrow { display: block; margin-bottom: 26px; }
.pdp-dl-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 940px; }
.pdp-dl {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; text-decoration: none; color: var(--text);
  background: var(--bg-elev-1); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
}
.pdp-dl:hover { border-color: var(--line-strong); transform: translateY(-2px); background: var(--bg-elev-2); }
.pdp-dl-label { font-size: 14px; line-height: 1.4; }
.pdp-dl-meta { display: inline-flex; align-items: center; gap: 9px; color: var(--text-mute); flex: none; }
.pdp-dl-meta em {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; font-style: normal;
  padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-xs);
}
.pdp-dl-meta svg { width: 15px; height: 15px; }
@media (max-width: 760px) { .pdp-dl-list { grid-template-columns: 1fr; } }

/* 75 cm marker — inline pill in the subcategory line; inherits ac-sub color. */
.ac-w75 {
  display: inline-block; margin-left: 8px;
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: var(--r-xs);
  font-size: 9px; letter-spacing: 0.1em;
  opacity: 0.82;
}
.ac-info {
  padding: 18px 18px 22px;
  display: flex; flex-direction: column; gap: 6px;
  /* fill the card's remaining height so the price row can pin to the bottom */
  flex: 1 1 auto;
}
.ac-sub {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mute-paper);
}
.ac-subcat { color: var(--text-mute-paper); }
.ac-sub .ac-w75 { margin-left: 0; }
/* tier label sits first in the eyebrow with a thin divider before the subcat */
.ac-sub .ac-tier + .ac-subcat::before {
  content: ''; display: inline-block; width: 1px; height: 9px;
  margin-right: 8px; vertical-align: -1px;
  background: currentColor; opacity: 0.3;
}
.ac-name {
  font-family: var(--serif);
  font-size: 17px; font-weight: 400; line-height: 1.3;
  color: var(--text-paper);
}
.ac-note {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand);
}
.ac-price {
  margin-top: 10px;
  display: flex; align-items: baseline; gap: 12px;
}
.ac-orig {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute-paper);
  text-decoration: line-through;
}
.ac-now {
  font-family: var(--serif);
  font-size: 22px; font-weight: 400;
  color: var(--text-paper);
}
.ac-free {
  font-family: var(--mono);
  font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand);
  font-weight: 500;
}
/* „Cena neověřena" — červená šipka, 2026-08-31 (kontrola ceníků dodavatelů).
   Vidí ji JEN přihlášený partner (app.js applUnverifiedHtml), takže smí být
   nápadná: je to varování prodejci, ne prodejní prvek. Sedí uvnitř .ac-price,
   která je flex s `align-items: baseline` — proto vlastní `align-self: center`,
   jinak by se šipka rovnala na účtaří ceny a vypadala odsazená dolů.
   `flex-basis: 100%` ji u úzké karty pošle na vlastní řádek místo zalomení
   samotného slova, stejně jako to dělá .ac-price-note. */
.ac-unver {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: center; flex-basis: 100%;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand);
}
.ac-unver-i { width: 13px; height: 13px; flex: 0 0 auto; }
/* V detailu je místa dost — tam ať drží na jednom řádku pod cenou. */
.pdp-price .ac-unver { flex-basis: auto; margin-top: 8px; }

/* Price row — price on the left, the OFFICIAL EU energy-class arrow on the
   right (EU online rule: energy info close to the price). The arrow graphic is
   unchanged; only its placement moved off the image to here. */
.ac-price-row {
  /* always pinned to the BOTTOM of the card so price + EU label line up across
     cards regardless of how many lines the product name takes */
  margin-top: auto;
  padding-top: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ac-price-row .ac-price { margin-top: 0; }
.ac-energy { flex: none; line-height: 0; }
.ac-price-row .ac-energy-badge {
  position: static; top: auto; left: auto; z-index: auto;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22));
}
.ac-price-row .ac-energy-badge img { height: 23px; }

/* Druhé cenové číslo: hostovi cena bez DPH, partnerovi maloobchodní cena.
   Vlastní řádek pod hlavní cenou — vedle by se na úzké kartě zalomilo.
   Rodiče (.ac-price / .pdp-price), do kterých applPriceHtml() sype svůj výstup,
   jsou display:flex kvůli zarovnání s .ac-orig — bez flex-wrap by flexbox
   ignoroval display:block a naskládal poznámku VEDLE ceny, ne pod ni.
   flex-basis:100% na flex-item nemá žádný efekt mimo flex rodiče, takže je
   bezpečné nechat ho v základním pravidle (rset-now/rsp-price flexy nejsou). */
.ac-price-note {
  display: block;
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
}
.ac-price { flex-wrap: wrap; }
.pdp-price { flex-wrap: wrap; }
.pdp-price .ac-price-note { font-size: 12px; margin-top: 4px; }
/* .pdp-price ztratilo svůj vlastní <span class="price"> (applPriceHtml() nese
   hotové rozhodnutí) — dohnat stejnou velkou serifovou velikost, jakou dřív
   nesla ta obálka, ať PDP cena nezakrní na kartovou 22px.
   color:var(--text), NE var(--text-paper) přímo (fix round 1, Important 5):
   .pdp-price žije jak v .appl-shop-sheet (papírový panel, --text tam už je
   přeskopováno na --text-paper) tak v plain .pdp-side na tmavé stránce
   (useFx===false, dnes bez příhodového produktu, ale platná cesta) — natvrdo
   tmavý inkoust z .ac-now by tam byl tmavá-na-tmavém stejně jako u
   .rset-now/.rsp-price výš. */
.pdp-price .ac-now { font-family: var(--serif); font-size: 36px; font-weight: 300; color: var(--text); }
.pdp-price .ac-onreq { font-style: italic; font-size: 26px; color: var(--text-dim); }

/* ── Browse rows ──────────────────────────────────────────────────────── */
.appl-browse {
  background: var(--bg);
  color: var(--text);
  padding: 120px 0;
}
.appl-browse .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.appl-browse .section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap;
  margin-bottom: 60px;
}
.appl-browse .section-head .eyebrow { color: var(--brand-hi); }
.appl-browse .section-head h1,
.appl-browse .section-head h2 {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.appl-browse .section-head .italic { font-style: normal; font-weight: 300; color: var(--brand); }
.appl-browse .section-head .copy { max-width: 380px; color: var(--text-mute); }

.appl-cat-row { margin-bottom: 70px; }
.appl-cat-head {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  margin-bottom: 20px;
  padding: 0 0 12px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color 220ms ease;
}
.appl-cat-head:hover { border-color: var(--brand); }
.appl-cat-head-l { display: flex; align-items: center; gap: 14px; }
.appl-cat-icon { width: 26px; height: 26px; color: var(--brand-hi); display: flex; }
.appl-cat-icon svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.appl-cat-head h3 {
  font-family: var(--serif);
  font-size: 26px; font-weight: 400;
}
.appl-cat-count {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mute);
  transition: color 200ms ease;
}
.appl-cat-head:hover .appl-cat-count { color: var(--brand-hi); }
/* Carousels — arrow-driven, no visible scrollbar */
.appl-cat-viewport { position: relative; }
.appl-cat-scroll {
  display: flex;
  gap: 22px;
  padding: 10px 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.appl-cat-scroll::-webkit-scrollbar { display: none; }
.appl-cat-arrow {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  /* Default = the old hover look (red glass); hover inverts to white. */
  background: rgba(200,38,44,0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--brand);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  z-index: 3;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, opacity 220ms ease;
}
.appl-cat-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.appl-cat-arrow:hover { background: rgba(255,255,255,0.92); border-color: #fff; color: var(--bg); }
.appl-cat-arrow-prev { left: 6px; }
.appl-cat-arrow-next { right: 6px; }
.appl-cat-arrow.is-disabled { opacity: 0; pointer-events: none; }
.appl-cat-viewport.no-arrows .appl-cat-arrow { display: none; }
.appl-cat-scroll .appliance-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  border-color: var(--line);
  background: var(--bg-elev-1);
  color: var(--text);
}

/* "E-shop pásik" block — light rounded strip holding the white catalog cards
   (spotřebiče / nábytek). The strip is a paper panel on the dark page; the cards
   keep their base #fff look (we DON'T apply the dark .appl-cat-scroll override). */
.eshop-strip .eshop-panel {
  background: var(--bg-panel); /* rovnaká off-white ako .catalog-paper na /spotrebice */
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 38px) clamp(16px, 3vw, 38px) clamp(20px, 2.4vw, 32px);
  color: var(--text-paper);
}
.eshop-head { margin-bottom: 20px; }
.eshop-head .display-m { color: var(--text-paper); margin-top: 6px; }
.eshop-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px;
  /* NO scroll-snap — snapping made the drag/scroll feel jerky; free scroll is smooth */
  /* native bar hidden — replaced by the custom glass scrollbar below */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.eshop-row::-webkit-scrollbar { display: none; }
.eshop-row .appliance-card {
  flex: 0 0 clamp(230px, 24vw, 280px);
}
@media (max-width: 720px) {
  .eshop-row .appliance-card { flex-basis: 78%; }
}
/* ── Custom frosted-glass scrollbar ─────────────────────────────────────────
   A single glass pill riding a hairline rail. backdrop-filter frosts the cream
   panel behind it (≤12px per the site's blur cap, no saturate); the thumb tints
   to brand-red on hover/drag. JS (wireEshopStrips) sizes + positions the thumb. */
.eshop-bar {
  position: relative;
  height: 10px;
  margin: 16px 2px 2px;
  border-radius: 999px;
  background: rgba(20,16,12,0.06);
  box-shadow: inset 0 0 0 1px rgba(20,16,12,0.04);
  cursor: pointer;
}
.eshop-scroller.no-scroll .eshop-bar { display: none; }
.eshop-bar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 64px;        /* JS overrides */
  border-radius: 999px;
  /* black smoked glass — translucent dark pill, frosts the cream panel behind */
  background: linear-gradient(180deg, rgba(12,10,8,0.72), rgba(12,10,8,0.52));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 1px 4px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.16);
  cursor: grab;
  touch-action: none;
  will-change: transform, width;
  /* NO transform/width transition — must track scroll 1:1; only the tint eases */
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.eshop-bar-thumb:hover {
  background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.66));
  border-color: rgba(255,255,255,0.22);
}
body.eshop-dragging { cursor: grabbing; user-select: none; }
body.eshop-dragging .eshop-bar-thumb {
  cursor: grabbing;
  background: linear-gradient(180deg, rgba(0,0,0,0.92), rgba(0,0,0,0.78));
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 2px 9px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.18);
}
@media (prefers-reduced-motion: reduce) {
  .eshop-bar-thumb { transition: none; }
}
.appl-cat-scroll .ac-name,
.appl-cat-scroll .ac-now { color: var(--text); }
.appl-cat-scroll .ac-sub,
.appl-cat-scroll .ac-orig { color: var(--text-mute); }

/* ── Catalog (P3) — contained: promos + per-zone carousels + drill-down ── */
.appl-catalog { background: transparent; padding: 110px 0 120px; }
.appl-catalog .section-head { margin-bottom: 44px; }

/* Cream catalog panel — the whole browse area below the sticky filter strip
   (.appl-catalog-chips) becomes a light PAPER surface, rounded top + bottom,
   ending where the catalog ends. Implemented by re-scoping the theme tokens to
   paper tones so every descendant that reads var(--text)/var(--line)/
   var(--bg-elev-1) flips automatically; the few literal cream/white-on-dark
   surfaces (logo whitening, facet pills, paginator, carousel arrows) get
   targeted overrides, and the floating facet dropdown is re-asserted dark. */
.catalog-paper {
  --text:       var(--text-paper);
  --text-mute:  var(--text-mute-paper);
  --text-dim:   #8c7f6a;
  --line:       var(--line-paper);
  --bg-elev-1:  #ffffff;
  background: var(--bg-panel); /* off-white (not the beige --bg-paper) — catalog listing panel */
  color: var(--text-paper);
  border: 1px solid var(--line-paper);
  border-radius: var(--r-lg);
  padding: 40px clamp(16px, 2.5vw, 32px) 48px;
}
@media (max-width: 768px) {
  .catalog-paper {
    padding: 26px 14px 32px;
    border-radius: var(--r-md);
  }
}
/* product/brand logos are force-whitened for dark cards — on the white cards
   here they must keep their real (dark) ink */
.catalog-paper .ac-brandlogo img { filter: none; }
/* white product cards: no drop shadow under the card on hover (lift + border
   only) — but KEEP the .ac-thumb-shade gradient on the product photo itself */
.catalog-paper .atr-cards .appliance-card:hover,
.catalog-paper .appl-cat-scroll .appliance-card:hover {
  box-shadow: none;
}
/* carousel arrows — dark-on-light glass instead of white-on-dark */
.catalog-paper .appl-cat-arrow {
  background: rgba(255,255,255,0.92);
  border-color: var(--line-paper);
  color: var(--text-paper);
  box-shadow: 0 6px 18px rgba(40,30,18,0.14);
}
.catalog-paper .appl-cat-arrow:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
/* facet trigger pills — the cream-on-cream literals would vanish; give them an
   ink-tinted subtle fill + paper hairline */
.catalog-paper .appl-fb-trigger { background: rgba(26,22,18,0.04); border-color: var(--line-paper); }
.catalog-paper .appl-fb-trigger:hover { border-color: rgba(26,22,18,0.35); }
/* filter-cards (drill-down level) — white cards on the paper panel */
.catalog-paper .appl-filter-card {
  background: #fff;
  border-color: var(--line-paper);
  box-shadow: 0 1px 3px rgba(40,30,18,0.05);
}
/* paginator — paper hairlines/ink instead of cream literals */
.catalog-paper .atr-pages { border-top-color: var(--line-paper); }
.catalog-paper .atr-page { border-color: var(--line-paper); color: var(--text-mute-paper); }
.catalog-paper .atr-page:hover { background: rgba(26,22,18,0.05); border-color: var(--brand); color: var(--text-paper); }
/* the facet dropdown is a dark floating popover — keep its own light text */
.catalog-paper .appl-fb-menu { --text: #f5eee0; --text-mute: #a89e8a; }
/* /nabytok: its count + crumbs bar carries its own gutter padding — drop it
   inside the panel so it aligns with the cards (which use the panel padding) */
.catalog-paper .nab-browse-bar { padding-left: 0; padding-right: 0; }

/* Promo cards — compact akcie grid. Each benefit TYPE carries its own accent
   color via --akce-c (shared with the .ac-akce appliance-card chips):
   red = 3+1 / nejlevnější zdarma · amber = % sleva · green = Kč sleva ·
   blue = info (cashback / záruka / dárek). */
.ac-akce { --akce-c: var(--brand); }
[data-akce-type="percent_off"] { --akce-c: #b9802f; }
[data-akce-type="amount_off"]  { --akce-c: #4a7c59; }
[data-akce-type="info"]        { --akce-c: #4f7196; }
/* Odkazová akce (výprodej) — značková červená, tatáž jako slevový odznak na
   výprodejové kartě, ať výprodej čte na webu jednou barvou. Shoda s výchozí
   barvou `cheapest_free` je vědomá: obě znamenají „největší úspora" a nikdy
   nestojí vedle sebe v jednom seznamu odznaků. */
[data-akce-type="link"]        { --akce-c: var(--brand); }
/* info subtypes (admin "Druh": cashback keeps the info blue) */
[data-akce-kind="zaruka"] { --akce-c: #3e7c7b; }
[data-akce-kind="darek"]  { --akce-c: #7a5380; }

/* .appl-promo-tag is kept for use by .atr-akce-bar */
.appl-promo-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff; background: var(--akce-c); padding: 4px 9px; white-space: nowrap;
  border-radius: var(--r-xs);
}

/* Price-tier "level selector" (Design < Premium < Luxury < Prestige) — a single
   editorial strip ABOVE the filter bar (not cards). Each segment carries an
   ascending 4-bar level glyph in the tier accent (--tier-c), a serif name and a
   count; hairline dividers between. Click filters the catalog to that tier. */
.appl-tiers {
  display: flex; align-items: stretch; gap: 0;
  margin: 0 0 18px;
  border: 1px solid rgba(245, 238, 224, 0.12);
  border-radius: var(--r-md);
  background: rgba(245, 238, 224, 0.04);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.appl-tiers:empty { display: none; }
.appl-tiers-label {
  flex: 0 0 auto; align-self: center;
  padding: 0 22px; max-width: 92px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; line-height: 1.4;
  text-transform: uppercase; color: var(--text-dim);
  border-right: 1px solid rgba(245, 238, 224, 0.1);
}
.appl-tiers-row { display: flex; flex: 1; min-width: 0; }
.appl-tier {
  position: relative; flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; text-align: left;
  color: inherit; font: inherit; cursor: pointer;
  background: transparent; border: 0;
  border-left: 1px solid rgba(245, 238, 224, 0.08);
  transition: background .3s ease;
}
.appl-tiers-row .appl-tier:first-child { border-left: 0; }
/* thin accent bar that grows from the bottom on hover/active */
.appl-tier::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--tier-c); transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.appl-tier:hover { background: rgba(245, 238, 224, 0.05); }
.appl-tier:hover::after,
.appl-tier.is-active::after { transform: scaleX(1); }
.appl-tier.is-active { background: color-mix(in srgb, var(--tier-c) 12%, transparent); }
/* ascending level bars (4) — lit ones in the accent, rest dim */
.appl-tier-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; flex: 0 0 auto; }
.appl-tier-bars i { width: 4px; border-radius: 1px; background: rgba(245, 238, 224, 0.16); transition: background .3s ease, box-shadow .3s ease; }
.appl-tier-bars i:nth-child(1) { height: 7px; }
.appl-tier-bars i:nth-child(2) { height: 12px; }
.appl-tier-bars i:nth-child(3) { height: 17px; }
.appl-tier-bars i:nth-child(4) { height: 22px; }
.appl-tier-bars i.is-lit { background: var(--tier-c); }
.appl-tier:hover .appl-tier-bars i.is-lit,
.appl-tier.is-active .appl-tier-bars i.is-lit { box-shadow: 0 0 8px color-mix(in srgb, var(--tier-c) 70%, transparent); }
.appl-tier-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.appl-tier-name { font-family: var(--serif); font-size: 19px; line-height: 1.05; color: var(--text); }
.appl-tier-count { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
@media (max-width: 760px) {
  .appl-tiers { flex-direction: column; }
  .appl-tiers-label { max-width: none; align-self: stretch; padding: 12px 18px 0; border-right: 0; }
  .appl-tiers-row { flex-wrap: wrap; }
  .appl-tier { flex: 1 1 50%; border-left: 1px solid rgba(245, 238, 224, 0.08); }
  .appl-tier:nth-child(odd) { border-left: 0; }
}

/* Appliance-card akcia chip (sits in .ac-tags next to Nejprodávanější/Outlet) */
.ac-akce {
  background: var(--akce-c); color: #fff;
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
}

/* Appliance PDP — akcia label panel, framed like the energy label above it so
   the two read as a matched pair of "official" labels (→ akce.html?id=…). The
   akcia's own banner bleeds in from the right, blended into the panel; mono
   kicker / serif name / mono validity carry the editorial hierarchy. */
.pdp-akce { display: flex; flex-direction: column; gap: 10px; }
.pdp-shop-info .pdp-akce { margin-top: 34px; }     /* breathing room from the energy label */
.pdp-akce-tag {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 15px;
  padding: 15px 18px; text-decoration: none;
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .25s ease, background .25s ease;
}
/* the akcia banner, right-aligned + blended into the panel toward the copy */
.pdp-akce-media {
  position: absolute; inset: 0 0 0 auto; width: 78%; z-index: 0;
  background-size: cover; background-position: center right;
  opacity: 0.85;
}
/* solid panel through the left + middle (photo invisible there), then ramp to
   clear at the right edge so the banner only shows, quite visibly, on the right */
.pdp-akce-tag--photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right,
    var(--bg-elev-1) 0%,
    var(--bg-elev-1) 58%,
    transparent 92%);
}
.pdp-akce-tag:hover {
  border-color: color-mix(in srgb, var(--akce-c, var(--brand)) 42%, var(--line));
  background: color-mix(in srgb, var(--akce-c, var(--brand)) 5%, var(--bg-elev-1));
}
.pdp-akce-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pdp-akce-kicker {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--akce-c, var(--brand));
}
.pdp-akce-name {
  font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.15;
  color: var(--text); letter-spacing: -0.01em;
}
.pdp-akce-valid {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute);
}
.pdp-akce-arrow { position: relative; z-index: 2; flex: 0 0 auto; align-self: center; color: var(--akce-c, var(--brand)); display: flex; }
.pdp-akce-arrow svg { width: 16px; height: 16px; transition: transform .25s ease; }
.pdp-akce-tag:hover .pdp-akce-arrow svg { transform: translateX(4px); }

/* Catalog grid — active "Produkty v akci" filter banner (?akce-produkty) */
.atr-akce-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 18px;
  border: 1px solid var(--line); border-left: 3px solid var(--akce-c, var(--brand));
  border-radius: var(--r-md);
  background: linear-gradient(120deg, color-mix(in srgb, var(--akce-c, var(--brand)) 12%, transparent) 0%, rgba(0, 0, 0, 0) 60%);
}
.atr-akce-bar .appl-promo-tag { background: var(--akce-c, var(--brand)); }
.atr-akce-title { font-family: var(--serif); font-size: 17px; color: var(--text); flex: 1; min-width: 200px; }
.atr-akce-detail {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute); text-decoration: none;
}
.atr-akce-detail:hover { color: var(--text); }
.atr-akce-clear {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute); background: none; border: 1px solid var(--line);
  padding: 7px 12px; cursor: pointer;
}
.atr-akce-clear:hover { color: var(--text); border-color: var(--text-mute); }

/* "Všechny produkty" — a distinct filter card in the filter-card row */
.afc-all {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(150deg, rgba(200,38,44,0.16), rgba(200,38,44,0.03));
  border-color: rgba(200,38,44,0.40);
}
.afc-all .afc-label { color: var(--text); }
.afc-all .afc-count { color: var(--brand-hi); }

/* Browse mode — back bar + breadcrumb + filter cards */
.appl-cat-bar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.appl-cat-back {
  background: transparent; border: 1px solid var(--line); color: var(--text);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 18px; cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.appl-cat-back:hover { border-color: var(--brand); color: var(--brand-hi); }
.appl-cat-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.appl-cat-crumb {
  background: transparent; border: none; color: var(--text-mute);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; padding: 4px 0;
  transition: color 180ms ease;
}
.appl-cat-crumb:hover { color: var(--text); }
.appl-cat-crumb-sep { color: var(--text-mute); opacity: 0.5; }
.appl-cat-browse-title {
  font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); font-weight: 400;
  letter-spacing: -0.01em; margin-bottom: 26px;
}
.appl-cat-browse-title span {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em;
  color: var(--brand-hi); margin-left: 8px;
}
/* Dropdown-pill filter bar for the built-in fridge branch — one slim row of
   pills (Značka / Řada / Výška / Šířka / Dveře / Technologie + Řadit), each
   opening a compact menu of toggle options. Stays out of the editorial layout. */
.appl-facets {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: -4px 0 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.appl-fb-pill { position: relative; }
.appl-fb-trigger {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-mute);
  background: rgba(245,238,224,0.04);
  border: 1px solid rgba(245,238,224,0.16);
  border-radius: 999px;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.appl-fb-trigger:hover { color: var(--text); border-color: rgba(245,238,224,0.4); }
.appl-fb-trigger.is-active { color: #fff; background: var(--brand); border-color: var(--brand); }
/* Přepínací pilulka (filtr „Konfigurátor" v katalogu nábytku): trigger BEZ
   nabídky, tedy i bez karetu. Ikona je táž krychle jako odznak `.ac-cfg` na
   kartě — filtr a odznak mluví o téže vlastnosti kusu, tak ať to je vidět. */
.appl-fb-toggle svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: 0.75; }
.appl-fb-toggle.is-active svg { opacity: 1; }
.appl-fb-caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: 0.65;
  transition: transform 220ms ease;
}
.appl-fb-pill.open .appl-fb-caret { transform: rotate(-135deg) translateY(1px); }
.appl-fb-menu {
  position: absolute; top: calc(100% + 9px); left: 0; z-index: 60;
  display: none; flex-direction: column; gap: 2px;
  min-width: 210px; max-height: 326px; overflow-y: auto;
  padding: 8px;
  background: rgba(28,24,19,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245,238,224,0.16);
  border-radius: 16px;
  box-shadow: 0 26px 64px -22px rgba(0,0,0,0.78);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,238,224,0.28) transparent;
}
.appl-fb-menu::-webkit-scrollbar { width: 8px; }
.appl-fb-menu::-webkit-scrollbar-track { background: transparent; }
.appl-fb-menu::-webkit-scrollbar-thumb {
  background: rgba(245,238,224,0.22);
  border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
.appl-fb-menu::-webkit-scrollbar-thumb:hover { background: rgba(245,238,224,0.36); background-clip: padding-box; }
.appl-fb-sortpill .appl-fb-menu { left: auto; right: 0; }
.appl-fb-pill.open .appl-fb-menu { display: flex; }
.appl-fb-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; width: 100%; text-align: left;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-mute);
  background: none; border: none; border-radius: 10px;
  cursor: pointer; white-space: nowrap;
  transition: color 160ms ease, background 160ms ease;
}
.appl-fb-opt:hover { color: var(--text); background: rgba(245,238,224,0.06); }
.appl-fb-opt.is-on { color: var(--text); }
.appl-fb-box {
  width: 15px; height: 15px; flex: none;
  border: 1px solid rgba(245,238,224,0.38); border-radius: 5px;
  position: relative; transition: background 160ms ease, border-color 160ms ease;
}
.appl-fb-opt.is-on .appl-fb-box { background: var(--brand); border-color: var(--brand); }
.appl-fb-opt.is-on .appl-fb-box::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(42deg);
}
/* option result count — right-aligned, quiet; a zero option stays clickable
   (hiding it makes the menu jump around as the user filters) */
.appl-fb-n {
  margin-left: auto; padding-left: 14px;
  font-family: var(--mono); font-size: 10px;
  color: rgba(245,238,224,0.4);
}
.appl-fb-opt.is-empty { opacity: 0.38; }
.appl-fb-sortpill { margin-left: auto; }
.appl-fb-clear {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute); background: none; border: none; cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.appl-fb-clear:hover { color: var(--brand-hi); border-bottom-color: var(--brand-hi); }
.appl-fb-clear.is-hidden { display: none; }
@media (max-width: 600px) {
  .appl-fb-sortpill { margin-left: 0; }
  .appl-fb-menu { min-width: 180px; }
}
.appl-filter-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 40px;
}
.appl-filter-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  text-align: left; cursor: pointer;
  transition: transform 360ms cubic-bezier(.22,1,.36,1), border-color 220ms ease, box-shadow 300ms ease;
}
.appl-filter-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 14px 32px rgba(0,0,0,0.32);
}
.afc-icon { width: 24px; height: 24px; color: var(--brand-hi); display: flex; }
.afc-icon svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.afc-label { font-family: var(--serif); font-size: 16px; line-height: 1.2; }
.afc-count {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute);
}
.appl-cat-grid { margin-top: 8px; }
.appl-tree-rail {
  position: sticky;
  top: calc(var(--nav-h, 64px) + 24px);
  max-height: calc(100vh - var(--nav-h, 64px) - 48px);
  overflow-y: auto;
  padding-right: 8px;
  border-right: 1px solid rgba(245,238,224,0.10);
  scrollbar-width: thin;
  scrollbar-color: rgba(245,238,224,0.18) transparent;
}
.appl-tree-rail::-webkit-scrollbar { width: 4px; }
.appl-tree-rail::-webkit-scrollbar-thumb { background: rgba(245,238,224,0.18); }
@media (max-width: 980px) {
  .appl-tree-rail {
    position: static;
    max-height: 60vh;
    border-right: none;
    border-bottom: 1px solid rgba(245,238,224,0.10);
    padding-right: 0;
    padding-bottom: 18px;
  }
}
.atr-list { list-style: none; margin: 0; padding: 0; }
.atr-list.atr-root > .atr-node > .atr-row { padding-top: 12px; padding-bottom: 12px; }
.atr-list .atr-list { padding-left: 18px; }      /* nested indent */
.atr-node { position: relative; }
.atr-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 6px;
  background: transparent;
  border: none;
  color: rgba(245,238,224,0.78);
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  border-radius: var(--r-xs);
  transition: background 200ms ease, color 200ms ease;
}
.atr-row:hover { background: rgba(245,238,224,0.06); color: var(--text); }
.atr-node.is-selected > .atr-row {
  background: rgba(200,38,44,0.14);
  color: var(--text);
}
.atr-node.is-selected > .atr-row .atr-count { color: var(--brand-hi); }
.atr-list.atr-root > .atr-node > .atr-row .atr-label {
  font-family: var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
}
.atr-chev, .atr-bullet {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.atr-chev {
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
  border-radius: 50%;
}
.atr-chev svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.atr-chev:hover { background: rgba(245,238,224,0.10); }
.atr-chev.is-open { transform: rotate(90deg); }
.atr-bullet::before {
  content: '';
  width: 4px; height: 4px;
  background: rgba(245,238,224,0.25);
  border-radius: 50%;
}
.atr-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atr-count {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.10em;
  color: var(--text-mute);
  flex-shrink: 0;
}

.appl-tree-main { min-width: 0; }
.appl-tree-crumb {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(245,238,224,0.10);
}
.atr-crumb {
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 6px;
  cursor: pointer;
  transition: color 200ms ease;
}
.atr-crumb:hover { color: var(--text); }
.atr-crumb.is-last { color: var(--text); cursor: default; }
.atr-crumb-sep { color: var(--text-mute); opacity: 0.5; user-select: none; }

.atr-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
/* The "Řadit" sort pill rides on the results line, right-aligned (it sits to the
   right of the "Zobrazeno 1–20 z N" sub text via the flex space-between above). */
.atr-head .appl-fb-sortpill { flex: 0 0 auto; }
.atr-head h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 44px); font-weight: 300;
  line-height: 1.0; letter-spacing: -0.015em;
  color: var(--text);
}
.atr-sub {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-mute);
}
.atr-cards {
  display: grid;
  /* Match the landing carousel's 320px cards so clicking a filter (spotřebiče,
     nábytek) doesn't visibly shrink the cards. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
/* Mirror the dark-context overrides we apply to .appl-cat-scroll cards so
   appliance-card looks at home in the tree explorer too. Without this the
   cards keep their white-paper background + paper text colors, which on the
   tree section's dark bg looks broken (and on some browsers collapses). */
.atr-cards .appliance-card {
  width: 100%;
  background: var(--bg-elev-1);
  border-color: var(--line);
  color: var(--text);
}
.atr-cards .ac-name,
.atr-cards .ac-now  { color: var(--text); }
.atr-cards .ac-sub,
.atr-cards .ac-orig { color: var(--text-mute); }

/* P3 — catalog product card polish */
.atr-cards .appliance-card:hover { box-shadow: none; }
.atr-cards .ac-name { font-size: 18px; }
.atr-cards .ac-price .ac-now { font-size: 19px; }

.atr-more {
  margin-top: 28px;
  display: flex; justify-content: center;
}
.atr-more .btn.ghost {
  border-color: rgba(245,238,224,0.30);
  color: var(--text);
}
.atr-more .btn.ghost:hover {
  border-color: var(--brand);
  background: rgba(200,38,44,0.10);
}
/* Numeric page strip — sits below the load-more button */
.atr-pages {
  margin-top: 24px;
  display: flex; justify-content: center;
  gap: 4px; flex-wrap: wrap;
  border-top: 1px solid rgba(245,238,224,0.08);
  padding-top: 22px;
}
.atr-page {
  min-width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px;
  background: transparent;
  border: 1px solid rgba(245,238,224,0.18);
  color: rgba(245,238,224,0.75);
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.atr-page:hover {
  background: rgba(245,238,224,0.08);
  border-color: var(--brand);
  color: var(--text);
}
.atr-page.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.atr-page.is-disabled {
  opacity: 0.30;
  cursor: default;
  pointer-events: none;
}
.atr-page-arrow { font-family: var(--sans); font-size: 18px; line-height: 1; }
.atr-page-ellipsis {
  display: inline-flex; align-items: center;
  padding: 0 6px;
  color: var(--text-mute);
  font-family: var(--mono); font-size: 14px;
  user-select: none;
}
.atr-empty {
  padding: 50px 0;
  text-align: center;
  color: var(--text-mute);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}

/* ── Brand stories — full-bleed 3-column row (cinematic) ──────────────── */
.appl-stories {
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;                          /* full-bleed, no gaps */
}
.brand-story {
  position: relative;
  height: clamp(520px, 78vh, 820px);
  overflow: hidden;
  color: var(--text);
  transition: transform 600ms cubic-bezier(.22,1,.36,1);
}
.brand-story:hover { transform: translateY(-2px); }
.bs-media { position: absolute; inset: 0; z-index: 0; }
.bs-media video, .bs-media .bs-poster {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 1600ms cubic-bezier(.22,1,.36,1), filter 600ms ease;
  filter: brightness(0.86) saturate(1.05);
}
.brand-story:hover .bs-media video { transform: scale(1.04); filter: brightness(1) saturate(1.12); }
.bs-poster { position: absolute; inset: 0; }
/* Bottom-anchored gradient — text legible at the bottom over any reel */
.bs-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,9,8,0.94) 0%, rgba(10,9,8,0.45) 40%, rgba(10,9,8,0) 75%);
  z-index: 1;
}
/* Official brand SVG logos — single-color sources tinted white via filter.
   `brightness(0)` collapses to black, `invert(1)` flips to white; works on
   any single-color SVG regardless of its original fill. */
.bs-logo {
  position: absolute;
  top: 28px; left: 32px;
  z-index: 4;
  height: 28px;
  width: auto;
  max-width: 50%;                  /* never overflow narrow cards */
  filter: brightness(0) invert(1);
  opacity: 0.94;
  user-select: none; pointer-events: none;
  transition: opacity 420ms ease, transform 420ms ease;
}
.brand-story[data-brand="BORA"]       .bs-logo { height: 22px; }
.brand-story[data-brand="Miele"]      .bs-logo { height: 30px; }
.brand-story[data-brand="Electrolux"] .bs-logo { height: 22px; }
.brand-story:hover .bs-logo { opacity: 1; }

.bs-text {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 36px 32px 32px;
}
.bs-text .inner {
  display: flex; flex-direction: column; gap: 12px;
  border-left: 2px solid transparent;
  padding-left: 18px;
}
.bs-text .eyebrow {
  color: var(--brand-hi);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.bs-text h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 44px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--text);
}
.bs-text .copy {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245,238,224,0.78);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 600ms ease, opacity 600ms ease;
}
.brand-story:hover .bs-text .copy,
.brand-story:focus-within .bs-text .copy {
  max-height: 280px; opacity: 1;
}
/* Per-brand side-rule on the inner text block */
.brand-story[data-brand="BORA"]       .bs-text .inner { border-left-color: var(--brand); }
.brand-story[data-brand="Miele"]      .bs-text .inner { border-left-color: var(--gold); }
.brand-story[data-brand="Electrolux"] .bs-text .inner { border-left-color: rgba(120,170,220,0.75); }

@media (max-width: 980px) {
  .appl-stories { grid-template-columns: 1fr; }
  .brand-story { height: 60vh; min-height: 460px; }
  .bs-text .copy { max-height: 280px; opacity: 1; }   /* always expanded on mobile */
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.empty-state {
  padding: 140px 30px;
  text-align: center;
  color: var(--text-mute-paper);
}
.empty-state h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  color: var(--text-paper);
  margin-bottom: 18px;
}
.empty-state code {
  font-family: var(--mono);
  font-size: 13px;
  background: rgba(0,0,0,0.05);
  padding: 2px 8px;
}

/* ═════════════════════════════════════════════════════════════════════════
   Home: cinematic Bora teaser
   ═════════════════════════════════════════════════════════════════════════ */
.home-appliances-teaser {
  position: relative;
  min-height: 75vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}
.hat-media {
  position: absolute; inset: 0; z-index: 0;
}
.hat-media video,
.hat-media img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.hat-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,9,8,0.85) 0%, rgba(10,9,8,0.35) 55%, rgba(10,9,8,0.1) 100%);
}
.hat-content {
  position: relative;
  z-index: 1;
  padding: 100px var(--gutter);
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
}
.hat-content .inner { max-width: 580px; }
.hat-content .eyebrow {
  color: var(--brand-hi);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  display: inline-block; margin-bottom: 18px;
}
.hat-content h2 {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 78px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.hat-content .copy {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(245,238,224,0.82);
  max-width: 480px;
  margin-bottom: 38px;
}
@media (prefers-reduced-motion: reduce) {
  .appl-hero-bg { animation: none; }
}

/* Appliance PDP specs — dark, one clean list with hairline dividers (no white
   box, and consolidated into a single block in renderApplianceDetail). */
.pdp-appliance .specs-table {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
.pdp-appliance .specs-table > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
}
.pdp-appliance .specs-table dt {
  color: var(--text-mute);
  letter-spacing: 0.04em;
}
.pdp-appliance .specs-table dd {
  color: var(--text);
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   Pracovní desky / Worktops  (v3 — cinematic hero + chapters)
   ═══════════════════════════════════════════════════════════════ */

/* — 1. Cinematic hero — full-bleed Technistone reel + italic display title */
.wt-cine {
  position: relative;
  height: 100vh; min-height: 600px;
  overflow: hidden;
  background: #0a0908;
}
.wt-cine-media { position: absolute; inset: 0; z-index: 0; }
.wt-cine-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: brightness(0.78) saturate(1.05);
}
.wt-cine-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(28,24,19,0) 0%, rgba(28,24,19,0.65) 100%),
    linear-gradient(180deg, rgba(28,24,19,0.4) 0%, rgba(28,24,19,0.15) 35%, rgba(28,24,19,0.85) 100%);
}
.wt-cine-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding-bottom: 60px;
  color: #f5eee0;
}
.wt-cine-frame {
  display: flex; flex-direction: column;
  gap: 18px;
  max-width: 1240px;
  padding-bottom: 40px;
}
.wt-cine-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(58px, 10.5vw, 160px);
  line-height: 0.92; letter-spacing: -0.025em;
  margin: 0;
  color: #fff;
  text-shadow: 0 4px 36px rgba(0,0,0,0.45);
  max-width: 22ch;
}
.wt-cine-title .italic { font-style: normal; font-weight: 300; }
.wt-cine-lead {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(18px, 1.65vw, 22px); line-height: 1.55;
  color: rgba(245,238,224,0.88);
  max-width: 640px;
  margin: 12px 0 0;
}
.wt-cine-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.wt-cine-bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 32px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,238,224,0.7);
}
.wt-cine-stamp::before {
  content: ''; display: inline-block; width: 28px; height: 1px;
  background: rgba(245,238,224,0.5); margin-right: 12px; vertical-align: middle;
}

/* — 2. Tři přístupy chapter (kapitola I) */
.wt-chapter { padding: 110px 0 50px; }
.wt-chapter-head {
  max-width: 880px; margin: 0 auto 56px;
  text-align: center;
  display: flex; flex-direction: column; gap: 18px; align-items: center;
}
.wt-chapter-copy {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6;
  color: rgba(245,238,224,0.82); max-width: 640px;
}

/* legacy aliases — the old .wt-hero / .wt-hero-title now sit unused but
   keep selectors valid so other code paths don't break. */
.wt-hero { padding: 170px 0 60px; }
.wt-hero-title {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(64px, 11vw, 168px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin: 22px 0 0;
}
.wt-hero .wt-hero-lead {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(18px, 1.65vw, 22px); line-height: 1.55;
  color: rgba(245,238,224,0.86);
  max-width: 640px; margin-top: 32px;
}
.wt-tiers {
  margin: 64px auto 0;
  display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr);
  max-width: 1400px; padding: 0 24px;
}
.wt-tier {
  position: relative; display: block; text-align: left;
  height: clamp(440px, 58vh, 620px);
  padding: 0; border: 0; border-radius: 16px;
  overflow: hidden; cursor: pointer;
  background: #1a1612;
  box-shadow: 0 18px 40px -28px rgba(0,0,0,0.6);
  transition: transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s;
}
.wt-tier:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 90px -22px rgba(0,0,0,0.65), 0 0 0 1px rgba(200,38,44,0.4);
}
.wt-tier-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1.4s ease-out;
}
.wt-tier:hover .wt-tier-bg { transform: scale(1.06); }
.wt-tier-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.18) 0%, transparent 30%, rgba(10,9,8,0.45) 60%, rgba(10,9,8,0.85) 100%);
}
.wt-tier-content {
  position: absolute; left: 30px; right: 30px; bottom: 28px;
  display: flex; flex-direction: column; gap: 9px;
  color: #fff;
  text-shadow: 0 2px 26px rgba(0,0,0,0.55);
}
.wt-tier-rank {
  align-self: flex-start; padding: 5px 11px; border-radius: var(--r-xs);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wt-tier-rank.is-base    { background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.wt-tier-rank.is-premium { background: var(--brand); color: #fff; }
.wt-tier-brand {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(36px, 3.6vw, 48px); line-height: 0.95;
  margin-top: 4px; letter-spacing: -0.015em;
}
.wt-tier-tag {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); margin-top: 6px;
}
.wt-tier-body {
  font-size: 13.5px; line-height: 1.55;
  color: rgba(245,238,224,0.85); max-width: 360px;
  margin-top: 2px;
}
.wt-tier-go {
  margin-top: 10px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.wt-tier-go svg { width: 15px; height: 15px; }

.wt-catalog { padding: 80px 0 120px; }
.wt-cat-head { display: flex; align-items: baseline; gap: 16px; }
.wt-cat-count {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-mute);
}
/* The #wt-filters wrapper is the sticky element here (it's a child of the tall
   catalog .container, sibling of the grid) — the inner .wt-chip-bar only does
   the edge-to-edge glass look and must NOT be sticky itself, otherwise it sticks
   inside this short wrapper and never pins. */
.wt-filters {
  display: block; margin: 0 0 30px;
  position: sticky; top: var(--nav-h, 80px); z-index: 60;
}
.wt-chip-bar { position: static; top: auto; }

.wt-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
.wt-card {
  position: relative; display: flex; flex-direction: column; text-align: left;
  border-radius: 10px; overflow: hidden; color: var(--text);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color .35s, transform .35s;
}
.wt-card:hover { border-color: var(--brand); transform: translateY(-4px); }
/* Vzorkovníková karta je ČTVERCOVÁ — dvířka, korpusy, pracovní desky i obkladové
   panely. Dřív byl základ 4:3 a čtverec měly jen panely; jakmile karty přestaly
   brát jednotný heliosový swatch a začaly ukazovat dodavatelskou texturu
   (1400×788 na šířku, 915×1372 i 1400×3015 na výšku), mřížka se roztřepila.
   Čtverec je zároveň to, co vzorek materiálu je.

   Samotné `aspect-ratio` NESTAČÍ: `.wt-card-swatch img` má `height: 100 %`,
   které se proti výšce odvozené z poměru chová jako neurčité, takže si obrázek
   vynutí svou vlastní výšku a poměr přebije (naměřeno 356×534 místo 356×356).
   Proto je obrázek vytažený z toku absolutním pozicováním — rodič už
   `position: relative` má. Tohle si vybojovaly panely dřív, než se pravidlo
   zobecnilo; nesahat. */
.wt-card-swatch { display: block; aspect-ratio: 1 / 1; background: #2a2622; position: relative; }
.wt-card-swatch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wt-card-swatch.is-noimg::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, #2a2622 0 10px, #322d27 10px 20px);
}
.wt-card-info { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 4px; }
.wt-card-meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-mute);
}
.wt-card-name { font-family: var(--serif); font-size: 17px; }
.wt-card-compare {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: rgba(20,17,14,0.7); border: 1px solid rgba(255,255,255,0.2); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .25s, border-color .25s, transform .25s;
}
.wt-card-compare svg { width: 16px; height: 16px; }
.wt-card-compare:hover { transform: scale(1.08); }
.wt-card-compare.is-active { background: var(--brand); border-color: var(--brand); }
.wt-more { margin-top: 34px; text-align: center; }
.wt-empty { padding: 60px 0; text-align: center; color: var(--text-mute); }

.wt-outro { padding: 110px 0; text-align: center; }
.wt-outro .wt-outro-copy {
  max-width: 520px; margin: 18px auto 30px; color: var(--text-mute); line-height: 1.65;
}

/* ─── Decor detail page — Stratum ─────────────────────── */
.wtd2 { padding: 96px 0 0; }
.wtd2-hero { position: relative; padding: 20px 28px 0; }
.wtd2-back {
  position: absolute; top: 30px; left: 44px; z-index: 6;
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,238,224,0.55);
  transition: color .25s, transform .25s;
}
.wtd2-back:hover { color: var(--text); transform: translateX(-3px); }
.wtd2-stage {
  position: relative; display: block;
  width: 100%; aspect-ratio: 16 / 10;
  max-height: 78vh; min-height: 480px;
  border: 0; padding: 0; margin: 0;
  background: #1a1612;
  border-radius: 22px; overflow: hidden;
  cursor: zoom-in;
}
.wtd2-stage img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 14s ease-out;
  animation: wtd2HeroReveal 900ms cubic-bezier(.22,.61,.36,1) both;
}
.wtd2-stage:hover img { transform: scale(1.035); }
@keyframes wtd2HeroReveal {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}
.wtd2-stage.is-noimg {
  background: repeating-linear-gradient(45deg, #2a2622 0 14px, #322d27 14px 28px);
}
.wtd2-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 22%, transparent 55%, rgba(0,0,0,0.82) 100%);
}
.wtd2-tag {
  position: absolute; right: 22px; bottom: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
  background: rgba(20,17,14,0.55);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.wtd2-tag svg { width: 14px; height: 14px; }

/* The typographic moment — title overlaps the bottom of the stage */
.wtd2-titlebar {
  position: relative;
  margin: -130px 0 0;
  padding: 0 68px 80px;
  color: #fff;
  z-index: 5;
  text-shadow: 0 4px 28px rgba(0,0,0,0.5);
  pointer-events: none;
}
.wtd2-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(245,238,224,0.85);
  margin-bottom: 22px;
  animation: wtd2EyebrowIn 800ms 200ms cubic-bezier(.22,.61,.36,1) both;
}
.wtd2-dot { display: inline-block; margin: 0 8px; color: rgba(245,238,224,0.4); }
.wtd2-title {
  font-family: var(--serif);
  font-size: clamp(56px, 11vw, 172px);
  line-height: 0.86;
  letter-spacing: -0.025em;
  font-weight: 300;
  animation: wtd2TitleIn 1100ms 320ms cubic-bezier(.22,.61,.36,1) both;
}
.wtd2-title .italic { font-style: normal; }
@keyframes wtd2EyebrowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wtd2TitleIn   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* Editorial body */
.wtd2-body { padding: 70px 0 110px; }
.wtd2-block-label {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(245,238,224,0.45);
  margin-bottom: 16px;
}
.wtd2-lede { max-width: 760px; padding: 20px 0 56px; }
.wtd2-lede p {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(20px, 2.1vw, 26px); line-height: 1.5;
  color: rgba(245,238,224,0.88);
  margin: 0;
}
.wtd2-stratum {
  padding: 30px 36px 28px;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.wtd2-strata {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  margin: 6px 0 0;
}
.wtd2-cell {
  padding: 8px 22px 4px;
  border-left: 1px solid rgba(255,255,255,0.10);
}
.wtd2-cell:first-child { border-left: none; padding-left: 0; }
.wtd2-cell dt {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,238,224,0.5);
  margin-bottom: 10px;
}
.wtd2-cell dd {
  font-family: var(--serif); font-size: 20px; line-height: 1.25;
  color: var(--text); font-weight: 400; margin: 0;
}
/* Poznámka pod specifikací — dekor skladovaný ve více šířkách. Sedí uvnitř
   tmavého skleněného panelu .wtd2-stratum, proto tlumená krémová, ne --muted. */
.wtd2-strata-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 14px; line-height: 1.6;
  color: rgba(245,238,224,0.62);
  max-width: 62ch;
}
/* Vazba panel ↔ lišta na detailu obkladového panelu. K akustickému panelu
   patří lišta v tomtéž dekoru a naopak; ETL ji páruje z Heliosu, tenhle blok
   je jediné místo, kde se ta vazba na webu ukáže. Vizuálně patří k rodině
   .wtd2-stratum (tmavé sklo, tenké linky, mono mikropopisek), aby detail
   nedostal třetí druh panelu — jen menší a klikatelný. */
.wtd2-pair { margin: 56px 0 0; }
/* Realizace, ve kterých materiál je (`realizationsHtml`). Sdílí vzhled
   s párovou kartou, jen jich může být víc vedle sebe. */
.wtd2-real { margin: 56px 0 0; }
.wtd2-real-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 860px) { .wtd2-real-grid { grid-template-columns: 1fr; } }
.wtd2-pair-card {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 18px 22px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.025);
  /* Strop blur(12px) a nikdy se saturate() — naměřeno, ne estetika. */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.wtd2-pair-card:hover {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.05);
  transform: translateY(-2px);
}
.wtd2-pair-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
/* Stejná past jako u vzorkovníkové karty: `height:100%` se proti výšce
   odvozené z poměru chová jako neurčité, takže si obrázek vynutí vlastní
   výšku a poměr přebije. Musí být vytažený z toku. */
.wtd2-pair-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.wtd2-pair-body { display: block; min-width: 0; }
.wtd2-pair-body strong {
  display: block;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(18px, 1.7vw, 22px); line-height: 1.25;
  color: var(--text);
}
.wtd2-pair-body span {
  display: block;
  margin-top: 7px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,238,224,0.5);
}
.wtd2-pair-go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(245,238,224,0.8);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.wtd2-pair-card:hover .wtd2-pair-go {
  transform: translateX(4px);
  border-color: rgba(255,255,255,0.3);
}
@media (max-width: 640px) {
  .wtd2-pair-card { grid-template-columns: 76px 1fr; gap: 16px; padding: 14px 16px; }
  /* Šipka na mobilu odchází: v úzké mřížce si bere šířku, kterou potřebuje
     název, a že je karta odkaz, je zřejmé i bez ní. */
  .wtd2-pair-go { display: none; }
}

.wtd2-downloads { margin-top: 64px; }
.wtd2-dl-row { display: flex; flex-wrap: wrap; gap: 10px; }
.wtd2-dl {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 18px 11px 11px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  transition: border-color .25s, background .25s, transform .25s;
}
.wtd2-dl:hover {
  border-color: var(--brand);
  background: rgba(200,38,44,0.08);
  transform: translateY(-2px);
}
.wtd2-dl-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.10);
}
.wtd2-dl-ic svg { width: 12px; height: 12px; }
.wtd2-actions { margin-top: 64px; display: flex; flex-wrap: wrap; gap: 14px; }
.wtd2-compare.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (max-width: 980px) {
  .wtd2 { padding: 80px 0 0; }
  .wtd2-hero { padding: 16px 18px 0; }
  .wtd2-back { top: 24px; left: 28px; }
  .wtd2-stage { aspect-ratio: 4 / 3; min-height: 320px; }
  .wtd2-titlebar { margin-top: -90px; padding: 0 28px 56px; }
  .wtd2-stratum { padding: 22px 22px; }
  .wtd2-cell { border-left: none; padding: 10px 0 6px; }
  .wtd2-cell + .wtd2-cell { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 14px; }
  .wtd2-lede p { font-size: 18px; }
}
@media (max-width: 560px) {
  .wtd2-back { left: 20px; }
  .wtd2-titlebar { margin-top: -70px; padding: 0 20px 44px; }
  .wtd2-tag { right: 14px; bottom: 14px; padding: 7px 12px; }
}

/* ─── Image zoom overlay ──────────────────────────────── */
.wt-zoom { position: fixed; inset: 0; z-index: 220; display: none;
  background: rgba(10,9,8,0.92); cursor: zoom-out; }
.wt-zoom.open { display: flex; align-items: center; justify-content: center; }
.wt-zoom img { max-width: 94vw; max-height: 92vh; object-fit: contain; border-radius: 6px; }
.wt-zoom-close {
  position: absolute; top: 18px; right: 18px; width: 42px; height: 42px;
  border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
}
.wt-zoom-close svg { width: 20px; height: 20px; }

/* ─── Product media lightbox (assets/js/media-lightbox.js) ─────────────────────
   Full-screen gallery on the product detail pages: arrows + ←/→ + wheel + swipe
   + a thumbnail strip. The stage is one horizontal scroll-snap track, so the
   swipe (and its momentum) is native; JS only syncs the index.
   z-index clears the MOBILE chrome, which is the tall one: .m-topbar and
   .m-tabbar sit at 1200 and .m-sheet-wrap at 1400 in mobile.css (a 260 here let
   the topbar paint over the photo). Kept under the 1500 toast. */
.mlb {
  position: fixed; inset: 0; z-index: 1450; display: none;
  background: rgba(10,9,8,0.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  flex-direction: column;
}
.mlb.open { display: flex; }
.mlb-track {
  flex: 1 1 auto; min-height: 0;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior: contain;
}
.mlb-track::-webkit-scrollbar { display: none; }
.mlb-slide {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  padding: 72px 84px 16px; cursor: zoom-out;
}
.mlb-slide img, .mlb-slide video {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: var(--r-md); cursor: default;
}
.mlb-slide video { background: #000; }
.mlb--single .mlb-slide { padding: 72px 24px 24px; }

.mlb-close, .mlb-nav {
  position: absolute; z-index: 2; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  transition: background 220ms ease, border-color 220ms ease;
}
.mlb-close:hover, .mlb-nav:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.4); }
.mlb-close { top: 18px; right: 18px; width: 42px; height: 42px; }
.mlb-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.mlb-prev { left: 20px; }
.mlb-next { right: 20px; }
.mlb--single .mlb-nav, .mlb--single .mlb-strip, .mlb--single .mlb-count { display: none; }

.mlb-count {
  position: absolute; top: 26px; left: 26px; z-index: 2;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
}
.mlb-count em { font-style: normal; color: #fff; }

.mlb-strip {
  flex: 0 0 auto; display: flex; gap: 8px; justify-content: flex-start;
  padding: 12px 24px 20px; overflow-x: auto; scrollbar-width: none;
  overscroll-behavior: contain;
}
.mlb-strip:empty { display: none; }
.mlb-strip::-webkit-scrollbar { display: none; }
.mlb-thumb {
  position: relative; flex: 0 0 auto; width: 76px; height: 56px; padding: 0;
  cursor: pointer; border-radius: var(--r-xs); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06);
  opacity: 0.5; transition: opacity 220ms ease, border-color 220ms ease;
}
.mlb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mlb-thumb:hover { opacity: 0.85; }
.mlb-thumb.is-active { opacity: 1; border-color: rgba(255,255,255,0.75); }
.mlb-thumb-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(10,9,8,0.35); pointer-events: none;
}
/* content-box: the global `* { box-sizing: border-box }` folds the padding ring
   into the icon and collapses the triangle to nothing (same trap as .st-fs-play). */
.mlb-thumb-play svg { box-sizing: content-box; fill: currentColor; }

/* Anything that opens the lightbox reads as zoomable. The kitchen gallery marks
   the CONTAINER (its tiles are re-rendered on every variant swap), so the cue
   has to sit on the tiles, not on the gaps between them. */
[data-mlb-open] { cursor: zoom-in; }
.pdp-gallery[data-mlb-open] { cursor: default; }
.pdp-gallery[data-mlb-open] .tile { cursor: zoom-in; }
/* Editorial block photos on a kitchen PDP. The block list mirrors the ALLOWLIST in
   wireKitchenLightbox() — KEEP THE TWO IN SYNC — so a `related` / `eshop` card,
   which shows a DIFFERENT product, never advertises a zoom it won't perform. */
.pdp-blocks[data-mlb-open] { cursor: default; }
.pdp-blocks[data-mlb-open] :is(.st-hero, .st-image, .st-gallery, .st-image-text,
  .st-split-feature, .st-scenic-band, .st-video, .st-mediagrid, .st-trio, .st-duo,
  .st-vf) img { cursor: zoom-in; }
.pdp-blocks[data-mlb-open] :is(a, button) :is(img, video) { cursor: pointer; }
/* IMG ONLY — a <video> never opens the lightbox (wireKitchenLightbox bails on it),
   so it must not advertise a zoom it won't perform. Its own controls are the
   affordance; the magnifier over a play button is what made people tap it. */
.pdp-blocks[data-mlb-open] video,
.pdp-hero[data-mlb-open] video { cursor: default; }
/* …except a click-to-fullscreen video, which IS a hit target (.st-fs sets pointer
   on the wrapper, but a rule matching the <video> itself beats that inheritance). */
.pdp-blocks[data-mlb-open] :is(.st-fs, [data-st-video-fs]) video { cursor: pointer; }

@media (max-width: 860px) {
  .mlb-slide { padding: 64px 16px 12px; }
  .mlb-nav { width: 40px; height: 40px; }
  .mlb-prev { left: 8px; }
  .mlb-next { right: 8px; }
  .mlb-thumb { width: 60px; height: 44px; }
  .mlb-strip { padding: 10px 16px 16px; }
}

/* ─── Compare tray ────────────────────────────────────── */
.wt-tray {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 180; display: flex; align-items: center; gap: 18px;
  padding: 12px 16px; border-radius: 14px; max-width: 94vw;
  border: 1px solid rgba(255,255,255,0.14);
}
.wt-tray-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.wt-tray-chip {
  display: flex; align-items: center; gap: 7px; padding: 5px 8px 5px 5px;
  border-radius: 999px; font-size: 12px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}
.wt-tray-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.wt-tray-chip button { cursor: pointer; background: none; border: 0; color: var(--text-mute); display: flex; }
.wt-tray-chip button svg { width: 13px; height: 13px; }
.wt-tray-actions { display: flex; align-items: center; gap: 12px; }
.wt-tray-clear {
  cursor: pointer; background: none; border: 0; color: var(--text-mute);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.wt-tray-clear:hover { color: var(--text); }

/* ─── Compare overlay ─────────────────────────────────── */
.wt-cmp { position: fixed; inset: 0; z-index: 210; display: none;
  background: rgba(10,9,8,0.86); }
.wt-cmp.open { display: flex; align-items: center; justify-content: center; }
.wt-cmp-panel {
  width: min(1040px, 94vw); max-height: 90vh; overflow: auto;
  border-radius: 16px; padding: 28px 30px; border: 1px solid rgba(255,255,255,0.14);
}
.wt-cmp-head { display: flex; align-items: center; justify-content: space-between; }
.wt-cmp-close {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22);
}
.wt-cmp-close svg { width: 19px; height: 19px; }
.wt-cmp-cols, .wt-cmp-row {
  display: grid; gap: 14px;
  grid-template-columns: 120px repeat(var(--cmp-cols, 3), 1fr);
}
.wt-cmp-cols { margin: 22px 0 8px; }
.wt-cmp-cols { grid-template-columns: repeat(var(--cmp-cols, 3), 1fr); }
.wt-cmp-col { position: relative; }
.wt-cmp-remove {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
  border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(20,17,14,0.7); border: 1px solid rgba(255,255,255,0.2);
}
.wt-cmp-remove svg { width: 14px; height: 14px; }
.wt-cmp-visual {
  display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background: #2a2622; position: relative;
}
.wt-cmp-visual img { width: 100%; height: 100%; object-fit: cover; }
.wt-cmp-visual.is-noimg::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, #2a2622 0 12px, #322d27 12px 24px);
}
.wt-cmp-name { margin-top: 10px; font-family: var(--serif); font-size: 18px; }
.wt-cmp-table { margin-top: 18px; }
.wt-cmp-row { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.wt-cmp-rowlabel {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-mute);
}
.wt-cmp-cell { font-size: 14px; }

/* — 3. Triptych "Materiál v reálné kuchyni" (kapitola II) */
.wt-trip { padding: 60px 0 120px; }
.wt-trip-head {
  max-width: 860px; margin: 0 auto 56px;
  text-align: center;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.wt-trip-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.wt-trip-card {
  position: relative; display: block;
  border-radius: 14px; overflow: hidden;
  background: #1a1612;
  text-decoration: none; color: inherit;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s;
  box-shadow: 0 18px 40px -28px rgba(0,0,0,0.6);
}
.wt-trip-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 90px -22px rgba(0,0,0,0.65);
}
.wt-trip-photo {
  position: relative; width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover; background-position: center;
  transition: transform 1.4s ease-out;
}
.wt-trip-card:hover .wt-trip-photo { transform: scale(1.05); }
.wt-trip-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,0.15) 0%, transparent 35%, rgba(10,9,8,0.75) 100%);
}
.wt-trip-meta {
  position: absolute; left: 26px; right: 26px; bottom: 24px;
  display: flex; flex-direction: column; gap: 8px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.wt-trip-pill {
  align-self: flex-start;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 5px 11px; border-radius: var(--r-xs);
}
.wt-trip-name {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 3.2vw, 44px); line-height: 0.95;
  letter-spacing: -0.015em;
  margin: 6px 0 0;
}
.wt-trip-line {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 4px 0 0;
}
.wt-trip-go {
  margin-top: 12px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.wt-trip-go svg { width: 15px; height: 15px; }

/* — 4. Catalog head — chapter-style centered title */
.wt-cat-head {
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  text-align: center;
  max-width: 880px; margin: 0 auto 48px;
}
.wt-cat-head .wt-cat-count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }

/* Reference section on worktop detail — video + photo grid */
.wtd2-reference { margin-top: 72px; }
.wtd2-ref-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 4.6vw, 64px); line-height: 1;
  letter-spacing: -0.02em; margin: 14px 0 30px;
}
.wtd2-video {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9;
  border: 0; padding: 0; cursor: pointer;
  background: #0a0908 center/cover no-repeat;
  border-radius: 14px; overflow: hidden;
  margin-bottom: 22px;
  box-shadow: 0 24px 60px -32px rgba(0,0,0,0.6);
  transition: transform .45s ease;
}
.wtd2-video:hover { transform: translateY(-3px); }
.wtd2-video.is-live { background: #000; cursor: default; }
.wtd2-video.is-live:hover { transform: none; }
.wtd2-video iframe { width: 100%; height: 100%; display: block; }
.wtd2-video-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%);
}
.wtd2-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,0.95); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  transition: transform .35s ease, background .35s;
}
.wtd2-video-play svg { width: 38px; height: 38px; margin-left: 4px; }
.wtd2-video:hover .wtd2-video-play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.wtd2-video-label {
  position: absolute; left: 24px; bottom: 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.wtd2-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.wtd2-gal-cell {
  position: relative; aspect-ratio: 4 / 3;
  border: 0; padding: 0; cursor: pointer;
  background: #1a1612 center/cover no-repeat;
  border-radius: 10px; overflow: hidden;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s;
}
.wtd2-gal-cell::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 100%);
  opacity: 0; transition: opacity .35s;
}
.wtd2-gal-cell:hover { transform: translateY(-3px); box-shadow: 0 14px 36px -18px rgba(0,0,0,0.6); }
.wtd2-gal-cell:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   Nábytek — modern luxury (.nl-*)
   Reference: Minotti / B&O / Vitra. True black, Inter at light weights,
   uppercase + wide tracking for labels, sharp edges, generous space.
   ═══════════════════════════════════════════════════════════════ */

.nl-section-label {
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 400; font-size: 11px;
  letter-spacing: 0.30em; text-transform: uppercase;
  color: rgba(245,238,224,0.55);
}
.nl-section-title {
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 200;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: 0.95; letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #f5eee0;
  margin: 16px 0 0;
}
.nl-divider {
  color: rgba(245,238,224,0.30);
  margin: 0 12px;
}

/* — 1. Hero — full-bleed, restrained, oversized type */
.nl-hero {
  position: relative;
  height: 100vh; min-height: 720px; max-height: 1080px;
  overflow: hidden;
  background: #0a0908;
}
.nl-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  filter: brightness(0.55) saturate(1) contrast(1.05);
}
.nl-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.15) 38%, rgba(10,9,8,0.85) 100%);
}
.nl-hero-inner {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-h, 80px) + 32px) 48px 32px;
  color: #f5eee0;
}
.nl-hero-meta {
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 400; font-size: 11px;
  letter-spacing: 0.30em; text-transform: uppercase;
  color: rgba(245,238,224,0.78);
  display: flex; align-items: center;
  gap: 0;
}
.nl-hero-meta-bottom {
  justify-content: space-between;
  align-items: flex-end;
}
.nl-hero-stats {
  display: flex; align-items: center;
}
.nl-hero-stats strong {
  font-weight: 500; color: #f5eee0;
}
.nl-hero-title {
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 200;
  font-size: clamp(96px, 18vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  align-self: flex-start;
  text-shadow: 0 4px 60px rgba(0,0,0,0.45);
}
.nl-hero-cta {
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 500; font-size: 12px;
  letter-spacing: 0.30em; text-transform: uppercase;
  color: #f5eee0; text-decoration: none;
  padding: 14px 24px;
  border: 1px solid rgba(245,238,224,0.40);
  transition: background .35s ease, border-color .35s ease;
}
.nl-hero-cta:hover {
  background: rgba(245,238,224,0.10);
  border-color: rgba(245,238,224,0.85);
}

/* — 2. Rooms — edge-to-edge grid */
.nl-rooms { padding: 140px 0 140px; }
.nl-rooms-head {
  max-width: 1400px;
  padding: 0 48px;
  margin: 0 auto 56px;
  display: flex; flex-direction: column; gap: 10px;
}
.nl-rooms-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.nl-room {
  position: relative;
  height: clamp(360px, 46vh, 540px);
  border: 0; padding: 0;
  background: #0a0908;
  cursor: pointer; overflow: hidden;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.nl-room-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.78) saturate(0.95);
  transition: transform 1.4s ease-out, filter .6s ease;
}
.nl-room:hover .nl-room-bg {
  transform: scale(1.06);
  filter: brightness(0.92) saturate(1);
}
.nl-room-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,0.10) 0%, transparent 40%, rgba(10,9,8,0.78) 100%);
}
.nl-room-info {
  position: absolute; left: 28px; right: 28px; bottom: 26px;
  display: flex; flex-direction: column; gap: 4px;
  color: #f5eee0;
}
.nl-room-num {
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 400; font-size: 11px;
  letter-spacing: 0.30em; color: rgba(245,238,224,0.6);
}
.nl-room-label {
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 300; font-size: clamp(28px, 2.4vw, 36px);
  letter-spacing: -0.005em;
  margin-top: 2px;
}
.nl-room-count {
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 400; font-size: 11px;
  letter-spacing: 0.30em; color: rgba(245,238,224,0.7);
  margin-top: 6px;
}

/* — 3. Featured — 5 luxury cards in a balanced row */
.nl-featured { padding: 0 0 140px; }
.nl-featured-head {
  max-width: 1400px;
  padding: 0 48px;
  margin: 0 auto 56px;
  display: flex; flex-direction: column; gap: 10px;
}
.nl-featured-meta {
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 400; font-size: 12.5px;
  color: rgba(245,238,224,0.65);
  letter-spacing: 0.02em;
  margin-top: 6px; max-width: 580px;
}
.nl-featured-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}
.nl-card {
  position: relative; display: flex; flex-direction: column;
  background: #110f0c;
  color: #f5eee0;
  text-decoration: none;
  overflow: hidden;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), background .35s;
}
.nl-card:hover {
  background: #1a1612;
}
.nl-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: var(--r-md);
}
.nl-card-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.06) 0%, transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.25) 100%);
}
.nl-card:hover .nl-card-bg {
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.10) 0%, transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.3) 100%);
}
.nl-card-watermark {
  position: relative; z-index: 1;
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 200; font-size: clamp(80px, 8vw, 140px);
  letter-spacing: -0.05em; line-height: 1;
  color: rgba(245,238,224,0.10);
  transition: color .45s ease;
}
.nl-card:hover .nl-card-watermark { color: rgba(245,238,224,0.18); }
.nl-card-info {
  padding: 18px 22px 24px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.nl-card-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 400; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245,238,224,0.7);
}
.nl-card-brand { color: #f5eee0; }
.nl-card-price { letter-spacing: 0.04em; text-transform: none; color: #f5eee0; font-weight: 500; font-size: 13px; }
.nl-card-price-onreq { color: rgba(245,238,224,0.65); font-style: italic; font-weight: 400; }
.nl-card-name {
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 300; font-size: 15px;
  line-height: 1.35; letter-spacing: -0.005em;
  color: rgba(245,238,224,0.92);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* — 4. Sortiment — full catalog with modern shell header */
.nl-sortiment { padding: 0 0 100px; }
.nl-sortiment-head {
  max-width: 1400px;
  padding: 0 48px;
  margin: 0 auto 56px;
  display: flex; flex-direction: column; gap: 10px;
}

/* — 5. Outro — minimal black, sans-serif statement */
.nl-outro {
  padding: 140px 0 160px;
  border-top: 1px solid rgba(245,238,224,0.10);
}
.nl-outro-inner {
  max-width: 1400px;
  padding: 0 48px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start;
}
.nl-outro-title {
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 200; font-size: clamp(48px, 6.5vw, 96px);
  line-height: 0.95; letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #f5eee0;
  margin: 6px 0 0;
}
.nl-outro-copy {
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 300; font-size: 16px;
  line-height: 1.55; color: rgba(245,238,224,0.78);
  max-width: 540px; margin-top: 6px;
}
.nl-outro-cta {
  margin-top: 26px;
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 500; font-size: 12px;
  letter-spacing: 0.30em;
  color: #f5eee0; text-decoration: none;
  padding: 16px 28px;
  border: 1px solid rgba(245,238,224,0.40);
  transition: background .35s ease, border-color .35s ease;
}
.nl-outro-cta:hover {
  background: rgba(245,238,224,0.10);
  border-color: rgba(245,238,224,0.85);
}

@media (max-width: 980px) {
  .nl-hero-inner { padding: calc(var(--nav-h, 80px) + 18px) 18px 18px; }
  .nl-rooms-head, .nl-featured-head, .nl-sortiment-head, .nl-outro-inner { padding: 0 18px; }
  .nl-rooms-grid { grid-template-columns: 1fr 1fr; }
  .nl-featured-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 560px) {
  .nl-rooms-grid, .nl-featured-grid { grid-template-columns: 1fr; }
  .nl-hero-meta-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   Nábytek page — legacy classes below (older revisions, kept for
   reference but no longer rendered)
   ═══════════════════════════════════════════════════════════════ */

/* — 1. Cinematic hero — full-bleed family reel + italic display.
   Hero height = viewport minus the filter row that sits immediately below,
   so the filter is always visible at the page fold on the very first frame. */
.nab-cine {
  position: relative;
  height: calc(100vh - 72px); min-height: 640px;
  overflow: hidden;
  background: #0a0908;
}
.nab-cine-media { position: absolute; inset: 0; z-index: 0; }
.nab-cine-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.04);
  filter: brightness(0.75) saturate(1.05);
}
.nab-cine-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 25%, rgba(28,24,19,0) 0%, rgba(28,24,19,0.55) 100%),
    linear-gradient(180deg, rgba(28,24,19,0.55) 0%, rgba(28,24,19,0.15) 35%, rgba(28,24,19,0.85) 100%);
}
.nab-cine-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; padding-bottom: 60px; color: #f5eee0;
}
.nab-cine-frame {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 1240px; padding-bottom: 40px;
}
.nab-cine-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(54px, 9.5vw, 148px); line-height: 0.94;
  letter-spacing: -0.025em; margin: 0;
  color: #fff; text-shadow: 0 4px 36px rgba(0,0,0,0.45);
  max-width: 20ch;
}
.nab-cine-title .italic { font-style: normal; font-weight: 300; }
.nab-cine-lead {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(18px, 1.55vw, 22px); line-height: 1.55;
  color: rgba(245,238,224,0.88);
  max-width: 640px; margin: 12px 0 0;
}
.nab-cine-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.nab-cine-bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 32px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(245,238,224,0.7);
}
.nab-cine-stamp::before {
  content: ''; display: inline-block; width: 28px; height: 1px;
  background: rgba(245,238,224,0.5); margin-right: 12px; vertical-align: middle;
}

/* — 2. Editorial room scenes — full-bleed scrolling chapters */
.nab-scene {
  position: relative;
  min-height: 86vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.nab-scene-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.02);
  transition: transform 1.6s ease-out;
}
.nab-scene:hover .nab-scene-bg { transform: scale(1.06); }
.nab-scene-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(10,9,8,0.85) 0%, rgba(10,9,8,0.55) 38%, rgba(10,9,8,0.10) 70%, rgba(10,9,8,0) 100%);
}
.nab-scene.is-flipped .nab-scene-scrim {
  background:
    linear-gradient(285deg, rgba(10,9,8,0.85) 0%, rgba(10,9,8,0.55) 38%, rgba(10,9,8,0.10) 70%, rgba(10,9,8,0) 100%);
}
.nab-scene-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 14px;
  max-width: 560px;
  color: #f5eee0;
  padding: 100px 0;
}
.nab-scene.is-flipped .nab-scene-inner { margin-left: auto; }
.nab-scene-num {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(80px, 9vw, 132px); line-height: 0.85;
  color: rgba(245,238,224,0.18);
  margin-bottom: -42px;
  letter-spacing: -0.04em;
}
.nab-scene-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--brand-hi, #d77a7e);
  align-self: flex-start;
  margin-top: 8px;
}
.nab-scene-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 5.4vw, 78px); line-height: 1;
  letter-spacing: -0.02em; margin: 4px 0 0;
}
.nab-scene-title .italic { font-style: normal; font-weight: 300; }
.nab-scene-story {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6;
  color: rgba(245,238,224,0.86);
  margin: 14px 0 8px;
  max-width: 480px;
}
.nab-scene-cta {
  align-self: flex-start; margin-top: 14px;
  cursor: pointer;
}

/* — 3. Featured row — cream paper section with 1+4 photo-backdrop cards */
.nab-featured {
  background: var(--bg-paper, #f5eee0);
  color: var(--text-paper, #1c1813);
  padding: 130px 0 130px;
}
.nab-featured-head {
  max-width: 880px; margin: 0 auto 56px;
  text-align: center;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.nab-featured-head .eyebrow {
  color: var(--brand, #c8262c);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.20em; text-transform: uppercase;
}
.nab-featured-head .display-m {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(42px, 5.4vw, 76px); line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-paper, #1c1813);
  margin: 4px 0 0;
}
.nab-featured-head .display-m .italic { font-style: normal; }
.nab-featured-lede {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 18px; line-height: 1.55;
  color: rgba(28,24,19,0.7);
  max-width: 580px;
  margin-top: 4px;
}
.nab-featured-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  height: clamp(620px, 70vh, 820px);
}
.nab-feat-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-md);
  text-decoration: none; color: #fff;
  background: #1a1612;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s;
  box-shadow: 0 14px 36px -22px rgba(0,0,0,0.45);
}
.nab-feat-card:nth-child(1) { grid-row: span 2; grid-column: 1; }
.nab-feat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px -22px rgba(0,0,0,0.45);
}
.nab-feat-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1.6s ease-out;
}
.nab-feat-card:hover .nab-feat-bg { transform: scale(1.06); }
.nab-feat-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.10) 0%, transparent 35%, rgba(10,9,8,0.85) 100%);
}
.nab-feat-content {
  position: absolute; left: 26px; right: 26px; bottom: 24px;
  display: flex; flex-direction: column; gap: 6px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
}
.nab-feat-brand {
  align-self: flex-start;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,238,224,0.85);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 5px 11px; border-radius: var(--r-xs);
}
.nab-feat-name {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(20px, 1.7vw, 26px); line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 8px 0 0;
}
.nab-feat-card:nth-child(1) .nab-feat-name {
  font-size: clamp(28px, 2.6vw, 40px);
  font-style: italic; font-weight: 300;
}
.nab-feat-sub {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,238,224,0.85);
  margin-top: 4px;
}
.nab-feat-price {
  font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.05em;
  color: #fff;
  margin-top: 6px;
}
.nab-feat-price .italic { font-style: italic; font-family: var(--serif); }
/* Fix round 1, Important 4/Critical 2 pattern: featuredCard() is unwired today,
   but applPriceHtml() nests .ac-now here too the moment it is — pre-empt the
   same dark-on-dark trap as .rset-now/.rsp-price above. */
.nab-feat-price .ac-now,
.nab-feat-price .ac-onreq,
.nab-feat-price .ac-free {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; color: #fff;
}
.nab-feat-price .ac-orig {
  font-family: var(--mono); font-size: 11px;
  color: rgba(255,255,255,0.6);
  text-decoration: line-through;
}
.nab-feat-price .ac-price-note { color: rgba(255,255,255,0.7); }
.nab-feat-go {
  margin-top: 8px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
  opacity: 0.85;
}
.nab-feat-go svg { width: 14px; height: 14px; }

/* — 4. Sortiment — quiet catalog entry */
.nab-sortiment { padding: 110px 0 110px; }
.nab-sortiment-head {
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  text-align: center;
  max-width: 880px; margin: 0 auto 56px;
}
.nab-sortiment-head .display-m {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(40px, 5vw, 64px); line-height: 1;
  letter-spacing: -0.02em; margin: 0;
}
.nab-sortiment-lede {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 17px; line-height: 1.55;
  color: rgba(245,238,224,0.78);
  max-width: 580px;
}

@media (max-width: 980px) {
  .nab-cine { height: auto; min-height: 600px; }
  .nab-cine-bottom { padding: 0 18px; }
  .nab-scene { min-height: 70vh; }
  .nab-scene-scrim, .nab-scene.is-flipped .nab-scene-scrim {
    background: linear-gradient(180deg, rgba(10,9,8,0.40) 0%, rgba(10,9,8,0.20) 30%, rgba(10,9,8,0.88) 100%);
  }
  .nab-scene-inner, .nab-scene.is-flipped .nab-scene-inner { margin-left: 0; }
  .nab-featured-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .nab-feat-card:nth-child(1) { grid-row: auto; grid-column: span 2; aspect-ratio: 16 / 10; }
  .nab-feat-card { aspect-ratio: 4 / 5; }
}
@media (max-width: 560px) {
  .nab-featured-grid { grid-template-columns: 1fr; }
  .nab-feat-card:nth-child(1), .nab-feat-card { grid-column: auto; aspect-ratio: 4 / 5; }
}

/* ── (legacy below — kept for now, not used by new layout) ────────── */

/* Editorial intro (replaces the cinematic video hero) */
.nab-intro { padding: 180px 0 60px; }
.nab-intro-head {
  display: flex; flex-direction: column; gap: 18px;
  text-align: center; align-items: center;
  max-width: 980px; margin: 0 auto 56px;
}
.nab-intro-head .display-l {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(48px, 7vw, 96px); line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 10px 0 0;
}
.nab-intro-head .display-l .italic { font-style: normal; font-weight: 300; }
.nab-intro-lead {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55;
  color: rgba(245,238,224,0.86);
  max-width: 660px; margin-top: 8px;
}

/* Zone cards — same square-corner + hover language as spotrebice's brand cards */
.nab-intro .nabz-grid {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1400px; margin: 0 auto; padding: 0 24px;
}
@media (max-width: 980px) {
  .nab-intro .nabz-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .nab-intro .nabz-grid { grid-template-columns: 1fr; }
}
.nabz-card .sbc-eyebrow { color: var(--brand-hi, var(--brand)); }
.nabz-card .sbc-title { font-style: italic; font-size: 24px; }

/* Featured "Top z aktuální nabídky" — 5 cards, first one takes 2× width
   for an editorial 1+4 rhythm (no auto-fill that breaks into 4+1). */
.atr-cards.nab-featured-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 18px;
}
.atr-cards.nab-featured-row > :first-child .ac-thumb { aspect-ratio: 4 / 3; }
.atr-cards.nab-featured-row > :first-child .ac-name { font-size: 22px; }
@media (max-width: 1100px) {
  .atr-cards.nab-featured-row { grid-template-columns: repeat(3, 1fr); }
  .atr-cards.nab-featured-row > :first-child { grid-column: span 3; }
}
@media (max-width: 720px) {
  .atr-cards.nab-featured-row { grid-template-columns: 1fr 1fr; }
  .atr-cards.nab-featured-row > :first-child { grid-column: span 2; }
}

/* Zone cards — color-coded hero panels by room */
.nab-zones-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  max-width: 1400px; padding: 0 24px; margin: 56px auto 0;
}
.nab-zone-card {
  position: relative;
  height: clamp(320px, 42vh, 440px);
  border: 0; border-radius: 14px;
  color: #f5eee0; cursor: pointer; text-align: left;
  overflow: hidden;
  padding: 0;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s;
  box-shadow: 0 18px 40px -28px rgba(0,0,0,0.6);
}
.nab-zone-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 32px 90px -22px rgba(0,0,0,0.7);
}
.nab-zone-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1.4s ease-out;
}
.nab-zone-card:hover .nab-zone-bg { transform: scale(1.06); }
.nab-zone-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.20) 0%, transparent 35%, rgba(10,9,8,0.75) 100%);
}
.nab-zone-content {
  position: absolute; left: 28px; right: 28px; bottom: 24px;
  display: flex; flex-direction: column; gap: 6px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
}
.nab-zone-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,238,224,0.85);
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-xs);
}
.nab-zone-label {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(34px, 3.6vw, 48px); line-height: 0.95;
  letter-spacing: -0.015em;
  margin-top: 8px;
}
.nab-zone-tag {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,238,224,0.85);
  margin-top: 4px;
}
.nab-zone-go {
  margin-top: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.nab-zone-go svg { width: 15px; height: 15px; }

/* Featured pieces + catalog product cards */
.nab-feat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.nab-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 30px;
}
/* (Legacy .nab-card grid design removed — /nabytok now uses the SHARED
   .appliance-card / .catalog-paper treatment, same as /spotrebice.) */
/* Detail page — feed přednosti ledger */
.nab-d-usps { list-style: none; margin: 0; padding: 0; }
.nab-d-usps li {
  font-family: var(--sans); font-size: 15px; line-height: 1.55;
  color: rgba(245,238,224,0.80);
  padding: 13px 0; border-top: 1px solid rgba(245,238,224,0.09);
}
.nab-d-usps li:first-child { border-top: 0; }
.nab-d-usps strong { color: var(--text); font-weight: 500; }

/* Filters — legacy block from an earlier revision, kept as no-op so other
   rules can still reference .nab-f if any straggler markup exists. */
.nab-f {
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.nab-f-label {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute);
}
.nab-f-select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 14px;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 10px 36px 10px 14px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23f5eee0' stroke-width='1.6' fill='none'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}
.nab-f-select:focus { outline: none; border-color: var(--brand); }

.nab-catalog { padding: 60px 0 120px; }
.wt-more { text-align: center; margin-top: 40px; }

/* Nabytok detail page — extra blocks layered on top of .wtd2-* */
.nab-d-watermark {
  position: absolute;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(140px, 16vw, 240px);
  color: rgba(245,238,224,0.20);
  letter-spacing: -0.02em;
  pointer-events: none;
}
.wtd2-stage.is-noimg { display: flex; align-items: center; justify-content: center; }
.nab-d-priceblock {
  margin-top: 36px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.nab-d-price {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 3vw, 40px); line-height: 1;
  letter-spacing: -0.02em;
}
.nab-d-price .italic { font-style: italic; }
.nab-d-price-note {
  font-size: 13.5px; color: var(--text-mute); max-width: 540px;
  margin-top: 6px;
}

@media (max-width: 980px) {
  .wt-tiers { grid-template-columns: 1fr; }
  .wt-grid  { grid-template-columns: repeat(2, 1fr); }
  .wt-cmp-cols, .wt-cmp-row { grid-template-columns: 90px repeat(var(--cmp-cols, 3), 1fr); }
  .wt-cmp-cols { grid-template-columns: repeat(var(--cmp-cols, 3), 1fr); }
  .wtd2-gallery { grid-template-columns: repeat(2, 1fr); }
  .wt-cine { height: auto; min-height: 600px; }
  .wt-cine-bottom { padding: 0 18px; }
  .wt-trip-grid { grid-template-columns: 1fr; }
  .wt-chapter { padding: 80px 0 30px; }
  .wt-trip { padding: 40px 0 80px; }
  .nab-zones-grid { grid-template-columns: repeat(2, 1fr); }
  .nab-feat-grid, .nab-grid { grid-template-columns: repeat(2, 1fr); }
  .nab-filters { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nab-zones-grid { grid-template-columns: 1fr; }
  .nab-feat-grid, .nab-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wt-grid { grid-template-columns: 1fr; }
  .wtd2-gallery { grid-template-columns: 1fr; }
}

/* ═══ Auth pages (login / activation / reset / account) ═══ */
/* The login panel is the booking modal (.bk-modal) standing still: same glass,
   hairline, radius, progress dots, serif title and .field inputs. Blur is capped
   at 12px with no saturate() — see the video-performance note. */
.auth-shell {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-h) + 32px) var(--gutter) 64px;
  overflow: hidden;
}
/* a soft brand bloom for the glass to actually pick up — a panel blurring a
   flat colour reads as a plain box */
.auth-shell::before {
  content: '';
  position: absolute; inset: -20% -10% auto -10%; height: 120%;
  background:
    radial-gradient(52% 46% at 22% 18%, rgba(200, 38, 44, 0.20), transparent 70%),
    radial-gradient(46% 42% at 82% 78%, rgba(245, 238, 224, 0.07), transparent 72%);
  pointer-events: none;
}
.auth-modal {
  position: relative;
  width: min(560px, 100%);
  background: var(--at-panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--at-line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 1px 0 var(--at-hover) inset;
  overflow: hidden;
}
.auth-head { padding: 28px 36px 0; }
.auth-head .info span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--at-mute); }
.auth-head .info h3 { font-family: var(--serif); font-size: 28px; font-weight: 300; margin: 6px 0 0; }

.auth-steps { display: flex; gap: 6px; padding: 20px 36px 0; }
.auth-dot {
  flex: 1; height: 2px; border-radius: 999px;
  background: var(--at-line-strong);
  overflow: hidden; position: relative;
}
.auth-dot::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 0; background: var(--brand);
  transition: width 600ms cubic-bezier(.22,1,.36,1);
}
/* same semantics as .bk-step-dot: half-filled = you are here, full = passed */
.auth-dot.active::after { width: 50%; }
.auth-dot.done::after { width: 100%; }

.auth-body { padding: 36px; }
.auth-title { font-family: var(--serif); font-size: 34px; font-weight: 300; line-height: 1.05; margin: 0 0 10px; }
.auth-title em { font-style: italic; color: var(--at-mute); font-weight: 300; }
.auth-sub { color: var(--at-mute); font-size: 14px; line-height: 1.6; margin: 0 0 32px; max-width: 46ch; }
.auth-sub strong { color: var(--at-text); font-weight: 400; }
.auth-code { font-family: var(--mono) !important; letter-spacing: 0.34em; font-size: 22px !important; }
.auth-actions { display: flex; align-items: center; gap: 20px; margin-top: 28px; flex-wrap: wrap; }
.auth-again {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--at-mute); background: none; border: 0; padding: 0; cursor: pointer;
  transition: color 200ms ease;
}
.auth-again:hover { color: var(--at-text); }
/* informational by default; red is reserved for a real failure */
.auth-msg { min-height: 1.2em; margin: 24px 0 0; color: var(--at-mute); font-size: 13px; line-height: 1.6; }
.auth-msg.err { color: var(--brand); }
.auth-links { font-size: 0.85rem; }
.auth-links a { color: var(--at-mute); text-decoration: underline; }
@media (max-width: 560px) {
  .auth-head, .auth-steps { padding-left: 24px; padding-right: 24px; }
  .auth-body { padding: 28px 24px 32px; }
  .auth-title { font-size: 28px; }
}
.auth-profile { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 24px; font-size: 0.9rem; }
.auth-profile dt { color: var(--at-mute); }
.auth-profile dd { margin: 0; }
/* ═══ Atelier — B2B dashboard, customers list, order detail ═══ */
/* ── Atelier themes — every atelier rule reads --at-*, never global tokens.
     html[data-at-theme] is set pre-paint by the inline head snippet carried
     by every atelier shell (prihlaseni/muj-ucet/zakaznici/zakazka/objednavka);
     public pages never carry the attribute, so these rules can't leak. ── */
html[data-at-theme='dark'] {
  color-scheme: dark;
  --at-bg: #1c1813; --at-panel: #241f19; --at-panel-2: #2b251e;
  --at-text: #f5eee0; --at-mute: #9a8f80;
  --at-line: rgba(245,238,224,.12); --at-line-soft: rgba(245,238,224,.07);
  --at-input-bg: rgba(245,238,224,.05); --at-shadow: none;
  --at-glass: rgba(28,24,19,.85);
  --at-dim: rgba(245,238,224,.45); --at-line-strong: rgba(245,238,224,.22); --at-hover: rgba(245,238,224,.06);
  --at-nova: #4f7196; --at-roz: #d6b242; --at-plat: #d68c42; --at-zisk: #4a7c59; --at-ztrac: #a05656; --at-exsp: #7a5380;
}
html[data-at-theme='light'] {
  color-scheme: light;
  --at-bg: #f6f2ea; --at-panel: #fffdf8; --at-panel-2: #efe9dd;
  --at-text: #1d1914; --at-mute: #5f564a;
  --at-line: rgba(33,29,24,.17); --at-line-soft: rgba(33,29,24,.10);
  --at-input-bg: #fffdf8;
  --at-shadow: 0 1px 3px rgba(33,29,24,.06), 0 4px 14px rgba(33,29,24,.05);
  --at-glass: rgba(246,242,234,.85);
  --at-dim: rgba(33,29,24,.45); --at-line-strong: rgba(33,29,24,.26); --at-hover: rgba(33,29,24,.05);
  --at-nova: #3d6285; --at-roz: #8a6a1c; --at-plat: #a5601f; --at-zisk: #3a6a49; --at-ztrac: #964444; --at-exsp: #6b4472;
}
html[data-at-theme] body { background: var(--at-bg); color: var(--at-text); }
/* Light readability: the site-wide `antialiased` smoothing thins Inter 300/400
   on paper into a washed gray — native smoothing + a step up in weight keeps
   the working surface crisp. */
html[data-at-theme='light'] body { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
html[data-at-theme='light'] .atelier-wrap { font-weight: 400; }
html[data-at-theme='light'] .atelier-wrap strong, html[data-at-theme='light'] .zk-code, html[data-at-theme='light'] .nv-tb-code { font-weight: 600; }
/* Theme-swap crossfade only AFTER a manual toggle (class added on first click),
   never on page load; killed entirely under reduced motion. */
html.at-theme-anim[data-at-theme] body,
html.at-theme-anim[data-at-theme] .atelier-topbar { transition: background .15s ease, color .15s ease, border-color .15s ease; }
@media (prefers-reduced-motion: reduce) {
  html.at-theme-anim[data-at-theme] body, html.at-theme-anim[data-at-theme] .atelier-topbar { transition: none; }
}
.atelier-theme-toggle {
  display: inline-flex; align-items: center; background: none;
  border: 1px solid var(--at-line); border-radius: 999px; padding: 7px;
  color: var(--at-mute); cursor: pointer; transition: color 0.12s, border-color 0.12s;
}
.atelier-theme-toggle:hover { color: var(--at-text); border-color: var(--at-mute); }
.atelier-theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.atelier-theme-toggle svg { width: 16px; height: 16px; }
.atelier-topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--at-glass);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--at-line);
}
.atelier-topbar-inner {
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--gutter); height: var(--nav-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
}
.atelier-brand-wrap { display: flex; align-items: center; gap: 16px; }
.atelier-back {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: none; border: none; padding: 8px 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--at-mute); transition: color 0.12s, opacity 0.12s;
}
.atelier-back svg { width: 15px; height: 15px; }
.atelier-back:hover { color: var(--at-text); }
.atelier-brand-sep { width: 1px; height: 22px; background: var(--at-line-strong); flex: none; }
/* Plain Sykora wordmark on the far left → the PUBLIC site home. The "atelier"
   mark next to it goes to the atelier overview; these are two distinct homes. */
.atelier-home-logo { display: inline-flex; align-items: center; text-decoration: none; }
.atelier-home-logo .brand-logo { height: 17px; width: auto; display: block; opacity: 0.75; transition: opacity 0.12s; }
.atelier-home-logo:hover .brand-logo { opacity: 1; }
/* Zpět + breadcrumbs row: page content right under the topbar (scrolls with
   the page, NOT part of the sticky nav bar) — on every atelier page. */
.atelier-subbar-inner {
  max-width: var(--container); margin: 0 auto; padding: 20px var(--gutter) 0;
  display: flex; align-items: center; gap: 14px; min-width: 0;
}
.atelier-subbar-sep { height: 15px; }
.atelier-crumbs {
  display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--at-mute); white-space: nowrap;
}
.atelier-crumbs a { color: var(--at-mute); text-decoration: none; transition: color 0.12s; }
.atelier-crumbs a:hover { color: var(--at-text); }
.atelier-crumbs .crumb-cur { color: var(--at-text); }
.atelier-crumbs .crumb-sep { display: inline-flex; opacity: 0.55; flex: none; }
.atelier-crumbs .crumb-sep svg { width: 11px; height: 11px; }
.atelier-brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; color: var(--at-text); text-decoration: none; }
.atelier-brand .brand-logo { height: 19px; width: auto; display: block; filter: none; align-self: center; }
.atelier-brand-mark { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; letter-spacing: 0.02em; }
.atelier-brand-tag { font-family: var(--mono); font-size: 0.56rem; color: var(--at-mute);
  text-transform: uppercase; letter-spacing: 0.34em; line-height: 1; margin-left: 2px; }
.atelier-board-link { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--at-mute); text-decoration: none; }
.atelier-board-link:hover { color: var(--at-text); }
.atelier-nav { display: flex; gap: 4px; align-items: center; }
.atelier-nav a {
  color: var(--at-mute); text-decoration: none; font-size: 0.85rem; padding: 8px 14px; border-radius: var(--r-xs);
  transition: color 0.12s, background 0.12s;
}
.atelier-nav a:hover { color: var(--at-text); background: var(--at-hover); }
.atelier-nav a.is-active { color: var(--at-text); background: var(--at-hover); }
.atelier-nav a.atelier-cta {
  background: var(--brand); color: white; margin-left: 16px;
}
.atelier-nav a.atelier-cta:hover { background: var(--brand-hi); }
.atelier-user { display: flex; align-items: center; gap: 16px; }
.atelier-user-name { color: var(--at-text); font-size: 0.85rem; }
.atelier-link {
  background: transparent; border: none; color: var(--at-mute); cursor: pointer; padding: 0;
  font: inherit; font-size: 0.85rem; text-decoration: underline; text-decoration-color: var(--at-hover);
}
.atelier-link:hover { color: var(--at-text); }

.atelier-wrap {
  max-width: var(--container); margin: 0 auto; padding: 48px var(--gutter);
}

.atelier-eyebrow {
  font-family: var(--mono); font-size: 0.7rem; color: var(--brand);
  text-transform: uppercase; letter-spacing: 0.2em; margin: 0 0 12px;
}
.atelier-hero {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px;
  padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--at-line);
}
.atelier-hero h1 { font-family: var(--serif); font-size: 3rem; font-weight: 400; margin: 0; color: var(--at-text); line-height: 1.05; }
.atelier-sub { color: var(--at-mute); font-size: 0.9rem; margin: 8px 0 0; }
.atelier-cta-big { padding: 14px 28px; font-size: 0.95rem; }

.atelier-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.atelier-stat {
  background: var(--at-panel); border: 1px solid var(--at-line); border-radius: 12px;
  padding: 24px;
}
.atelier-stat-num { font-family: var(--serif); font-size: 2.4rem; font-weight: 400; color: var(--at-text); line-height: 1; }
.atelier-stat-label { color: var(--at-mute); font-size: 0.8rem; margin-top: 8px; }

.atelier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px; }
.atelier-card {
  background: var(--at-panel); border: 1px solid var(--at-line); border-radius: var(--r-md);
  box-shadow: var(--at-shadow); padding: 24px;
}
.atelier-card header {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px;
}
.atelier-card h2 { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; margin: 0; color: var(--at-text); }
.atelier-empty { text-align: center; padding: 24px 0; color: var(--at-mute); font-size: 0.85rem; }
.atelier-empty p { margin: 0 0 12px; }
.atelier-empty-large {
  padding: 64px 24px; border: 1px dashed var(--at-line-strong); border-radius: var(--r-md);
}
.atelier-empty-large .atelier-sub { margin: 0 0 24px; max-width: 420px; margin-inline: auto; }
/* Account / atelier area only — the bordered pill ghost. Scoped to .atelier-wrap
   so it does NOT leak onto the editorial ghost links (hero "Rezervovat schůzku",
   product pages), which use the borderless `.btn.ghost` defined in the core
   Buttons section above. */
.atelier-wrap .btn.ghost {
  background: transparent; color: var(--at-text); border: 1px solid var(--at-line-strong); padding: 10px 20px;
  border-radius: 6px; font: inherit; font-size: 0.85rem; cursor: pointer; text-decoration: none; display: inline-block;
}
.atelier-wrap .btn.ghost:hover { border-color: var(--brand); color: var(--brand-hi); }
/* The dark-glass .btn.solid is unreadable on paper — light theme swaps it to a
   panel button; the red nav CTA stays the single loud element in the topbar. */
html[data-at-theme='light'] .atelier-wrap .btn.solid {
  background: var(--at-panel-2); color: var(--at-text); border: 1px solid var(--at-line-strong);
}
html[data-at-theme='light'] .atelier-wrap .btn.solid:hover { border-color: var(--brand); color: var(--brand); }

/* ── Atelier forms — ONE rule for every control on atelier pages. The .field
     component is shared with the public booking modal, so everything here is
     keyed on html[data-at-theme], which only atelier shells ever carry. ── */
html[data-at-theme] .field label { color: var(--at-mute); }
html[data-at-theme] .field input,
html[data-at-theme] textarea,
html[data-at-theme] input[type="text"],
html[data-at-theme] input[type="number"],
html[data-at-theme] input[type="date"],
html[data-at-theme] input[type="search"],
html[data-at-theme] input[type="tel"],
html[data-at-theme] input[type="time"],
html[data-at-theme] input[type="email"] {
  background: var(--at-input-bg); color: var(--at-text);
  border: 1px solid var(--at-line); border-radius: var(--r-sm);
  padding: 11px 14px; caret-color: var(--brand);
}
html[data-at-theme] input::placeholder,
html[data-at-theme] textarea::placeholder { color: var(--at-dim); }
html[data-at-theme] input:focus,
html[data-at-theme] select:focus,
html[data-at-theme] textarea:focus { border-color: var(--brand); outline: none; }
html[data-at-theme] .field input:focus-visible,
html[data-at-theme] .field select:focus-visible,
html[data-at-theme] .field textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Custom checkboxes — hairline rounded square, brand check. */
html[data-at-theme] input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0 2px 0 0;
  border: 1px solid var(--at-line-strong); border-radius: 5px;
  background: var(--at-input-bg); cursor: pointer; position: relative;
  transition: border-color 0.12s, background 0.12s;
}
html[data-at-theme] input[type="checkbox"]:hover { border-color: var(--at-mute); }
html[data-at-theme] input[type="checkbox"]:checked { background: var(--brand); border-color: var(--brand); }
html[data-at-theme] input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
html[data-at-theme] input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
html[data-at-theme] input[type="checkbox"]:disabled { opacity: 0.45; cursor: default; }
html[data-at-theme] input[type="radio"] { accent-color: var(--brand); }

/* Glass selects — site-style dark-glass pill with a drawn chevron. */
html[data-at-theme] select,
html[data-at-theme] .field select,
html[data-at-theme] .zk-filters select {
  appearance: none; -webkit-appearance: none;
  background-color: var(--at-panel-2); backdrop-filter: blur(12px);
  color: var(--at-text);
  border: 1px solid var(--at-line); border-radius: var(--r-sm);
  padding: 10px 38px 10px 14px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a8f80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
html[data-at-theme='light'] select,
html[data-at-theme='light'] .field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6153' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html[data-at-theme] select:hover, html[data-at-theme] .field select:hover { border-color: var(--at-line-strong); }

/* Filled buttons — hollow ghosts are gone in the atelier: primary = brand red,
   secondary (.btn.soft + restyled .btn.ghost) = filled panel tone. */
html[data-at-theme] .atelier-wrap .btn.solid,
html[data-at-theme] .bk-modal .btn.solid,
html[data-at-theme] .customer-modal .btn.solid {
  background: var(--brand); color: #fff; border: none; border-radius: 999px;
  padding: 11px 22px; font-size: 0.85rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.12s, opacity 0.12s;
}
html[data-at-theme] .atelier-wrap .btn.solid:hover, html[data-at-theme] .bk-modal .btn.solid:hover,
html[data-at-theme] .customer-modal .btn.solid:hover { background: #a81f24; }
html[data-at-theme] .atelier-wrap .btn.solid:disabled { opacity: 0.4; cursor: default; }
html[data-at-theme] .atelier-wrap .btn.ghost,
html[data-at-theme] .atelier-wrap .btn.soft,
html[data-at-theme] .bk-modal .btn.ghost,
html[data-at-theme] .customer-modal .btn.ghost {
  background: var(--at-panel-2); color: var(--at-text); border: 1px solid var(--at-line);
  border-radius: 999px; padding: 10px 20px; font: inherit; font-size: 0.85rem;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.12s, border-color 0.12s;
}
/* Hover = výplň `.btn::before` (jede zespodu) barvou TEXTU tématu a text
   barvou POZADÍ: tmavý režim světlá výplň + tmavý text, světlý režim naopak.
   Výplň se NESMÍ nechat na `currentColor` — ten na hover sleduje barvu textu,
   takže výplň i text byly totéž (krémová na krémové, „Aktualizovat" po
   najetí zmizel; 2. 9. 2026). */
html[data-at-theme] .atelier-wrap .btn.ghost::before,
html[data-at-theme] .atelier-wrap .btn.soft::before,
html[data-at-theme] .bk-modal .btn.ghost::before,
html[data-at-theme] .customer-modal .btn.ghost::before { background: var(--at-text); }
html[data-at-theme] .atelier-wrap .btn.ghost:hover,
html[data-at-theme] .atelier-wrap .btn.soft:hover,
html[data-at-theme] .bk-modal .btn.ghost:hover,
html[data-at-theme] .customer-modal .btn.ghost:hover { background: var(--at-hover); border-color: var(--at-text); color: var(--at-bg); }
html[data-at-theme] .atelier-wrap .btn:disabled::before { display: none; }
html[data-at-theme] .atelier-wrap .btn.soft:disabled, html[data-at-theme] .atelier-wrap .btn.ghost:disabled { opacity: 0.45; cursor: default; }

/* ── Editor sticky toolbar — the single action surface of the návrh. ── */
.nv-toolbar {
  position: sticky; top: var(--nav-h); z-index: 90;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter);
  background: var(--at-glass); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--at-line);
}
.nv-tb-left, .nv-tb-right { display: flex; align-items: center; gap: 16px; min-width: 0; }
.nv-tb-code { font-family: var(--mono); font-size: 0.95rem; font-weight: 500; letter-spacing: .05em; color: var(--at-text); display: inline-flex; align-items: center; gap: 9px; }
.nv-tb-code .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--at-line-strong); flex: none; }
.nv-tb-code.zk-nova .dot { background: var(--at-nova); }
.nv-tb-code.zk-roz .dot { background: var(--at-roz); }
.nv-tb-code.zk-plat .dot { background: var(--at-plat); }
.nv-tb-code.zk-zisk .dot { background: var(--at-zisk); }
.nv-tb-code.zk-ztrac .dot { background: var(--at-ztrac); }
.nv-tb-code.zk-exsp .dot { background: var(--at-exsp); }
.nv-tb-total { font-family: var(--mono); font-size: 0.95rem; color: var(--at-text); white-space: nowrap; }
.nv-tb-total small { font-size: 0.68rem; color: var(--at-mute); letter-spacing: .06em; text-transform: uppercase; }
.nv-tb-check { display: inline-flex; gap: 7px; align-items: center; font-size: 0.78rem; color: var(--at-mute); white-space: nowrap; }
.nv-more-wrap { position: relative; }
.nv-more-btn { padding: 10px 12px !important; }
/* Cena s DPH pod cenou bez DPH — u KAŽDÉ položky návrhu, ne jen u spotřebičů
   (přání uživatele 27. 8. 2026). Návrh se počítá bez DPH, prodejce ale mluví
   se zákazníkem v cenách s DPH, takže mít u sebe obě čísla je rozdíl mezi
   „vidím" a „musím to přepočítat". Prázdné, když položka sazbu nenese —
   pak se nic nevymýšlí. */
.nvec-sum-vat, .nv-sum-vat {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--at-mute); margin-top: 2px; white-space: nowrap;
}
.nvec-sum-vat:empty, .nv-sum-vat:empty { display: none; }

/* ── Custom select (at-select) — 1:1 with the .nv-menu glass panel. ── */
.at-select { position: relative; display: block; }
.at-select select { display: none !important; }
.at-select-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--at-panel-2); color: var(--at-text);
  border: 1px solid var(--at-line); border-radius: var(--r-sm);
  padding: 11px 14px; font: inherit; font-size: 0.9rem;
  transition: border-color 0.12s, background 0.12s;
}
.at-select-btn:hover { border-color: var(--at-line-strong); }
.at-select-btn:disabled { opacity: 0.5; cursor: default; }
.at-select-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.at-select-btn svg { width: 14px; height: 14px; color: var(--at-mute); flex: none; }
.at-select-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-select-menu[hidden] { display: none; }
.at-select-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 95;
  background: var(--at-glass); backdrop-filter: blur(12px);
  border: 1px solid var(--at-line); border-radius: var(--r-sm);
  box-shadow: var(--at-shadow), 0 16px 44px rgba(0,0,0,.22);
  padding: 6px; display: flex; flex-direction: column;
  max-height: 320px; overflow: auto;
}
html[data-at-theme='light'] .at-select-menu { box-shadow: var(--at-shadow), 0 16px 44px rgba(33,29,24,.16); }
.at-select-opt {
  display: flex; align-items: center; width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--r-xs); padding: 10px 12px;
  font: inherit; font-size: 0.9rem; color: var(--at-text); cursor: pointer;
}
.at-select-opt:hover { background: var(--at-hover); }
.at-select-opt.on { color: var(--brand); font-weight: 500; }
.at-select-opt:disabled { color: var(--at-dim); cursor: default; }
/* Hledání uvnitř nabídky (přidává se od 8 položek výš, viz enhanceAtelierSelect).
   `position: sticky` proto, že nabídka sama scrolluje — bez toho by políčko
   při rolování dlouhého seznamu studií odjelo pryč a hledalo by se naslepo. */
.at-select-find {
  position: sticky; top: -6px; z-index: 1; margin: -6px -6px 6px; padding: 10px 12px;
  background: var(--at-panel-2); color: var(--at-text);
  border: 0; border-bottom: 1px solid var(--at-line);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font: inherit; font-size: 0.9rem; width: calc(100% + 12px);
}
.at-select-find:focus { outline: none; border-bottom-color: var(--brand); }
.at-select-find::placeholder { color: var(--at-dim); }
.at-select-empty { margin: 0; padding: 12px; color: var(--at-mute); font-size: 0.85rem; }
/* ⚠ Nabídka dědí šířku po tlačítku (`left:0;right:0`), takže ji NEROZŠÍŘÍ nic,
   co je uvnitř. Od chvíle, kdy filtr studia nese celý název i s městem
   („Classic Praha CZ s.r.o. · Čestlice") místo tříznakové zkratky, se do ní
   text nevešel a uživatel to hlásil jako „strašně úzké" — dvakrát, protože
   napoprvé jsem šířku dal nativnímu `<select>`, který je tu `display:none`.
   `min-width:100%` drží zarovnání s tlačítkem, `width:max-content` nechá
   nabídku růst podle nejdelší položky a `max-width` jí brání vyjet z okna. */
.zk-filters .at-select-menu, .atelier-wrap .at-select-menu {
  right: auto; min-width: 100%; width: max-content; max-width: min(420px, 92vw);
}
.zk-filters .at-select-opt { white-space: nowrap; }
/* Zavřené tlačítko taky nesmí být úzké — jinak je z názvu vidět „Classic Pra…". */
.zk-filters .at-select { min-width: 240px; }

.nv-menu[hidden] { display: none; }
.nv-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 95; min-width: 220px;
  background: var(--at-glass); backdrop-filter: blur(12px);
  border: 1px solid var(--at-line); border-radius: var(--r-sm);
  box-shadow: var(--at-shadow), 0 16px 44px rgba(0,0,0,.22);
  padding: 6px; display: flex; flex-direction: column;
}
html[data-at-theme='light'] .nv-menu { box-shadow: var(--at-shadow), 0 16px 44px rgba(33,29,24,.16); }
.nv-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--r-xs); padding: 10px 12px;
  font: inherit; font-size: 0.85rem; color: var(--at-text); cursor: pointer;
}
.nv-menu button:hover { background: var(--at-hover); }
.nv-menu button:disabled { color: var(--at-dim); cursor: default; }
.nv-menu button:disabled:hover { background: none; }
.nv-menu button svg { width: 15px; height: 15px; color: var(--at-mute); }
@media (max-width: 860px) {
  .nv-toolbar { flex-wrap: wrap; }
  .nv-tb-total { display: none; }
}

/* ── Atelier modals — the shared bk-overlay/bk-modal shell re-skinned per
     theme (zálohy, schůzka, ztracená …). Hairline header, actions footer. ── */
html[data-at-theme] .bk-modal {
  background: var(--at-panel); color: var(--at-text);
  border: 1px solid var(--at-line); box-shadow: var(--at-shadow), 0 24px 64px rgba(0,0,0,.22);
}
html[data-at-theme='light'] .bk-modal { box-shadow: var(--at-shadow), 0 24px 64px rgba(33,29,24,.18); }
html[data-at-theme] .bk-overlay { background: rgba(20,17,13,.45); }
html[data-at-theme='light'] .bk-overlay { background: rgba(33,29,24,.28); }
html[data-at-theme] .bk-modal .bk-close { color: var(--at-mute); border-color: var(--at-line); }
html[data-at-theme] .bk-modal .bk-close:hover { color: var(--at-text); }
html[data-at-theme='light'] .bk-modal .btn.solid { background: var(--brand); color: #fff; border: none; }

/* „Nový zákazník" je ateliérová plocha, ale nakreslená ještě v SITE paletě
   (`var(--bg)`/`var(--text)`), zatímco její obsah kreslí ateliérové tokeny.
   Ve světlém režimu se ty dva rozešly: deska zůstala tmavá, kdežto všechno na
   `--at-text`/`--at-mute` zčernalo do neviditelna — banner „Tohoto zákazníka už
   máte", hláška pod formulářem i „Zavřít" šly přečíst teprve po označení myší
   (nahlášeno 4. 9. 2026). Přeskinováno stejně jako `.bk-modal` výše; tlačítka
   jezdí na týchž pravidlech, jen s doplněným selektorem. */
html[data-at-theme] .customer-modal { background: rgba(20,17,13,.45); }
html[data-at-theme='light'] .customer-modal { background: rgba(33,29,24,.28); }
html[data-at-theme] .customer-modal-inner {
  background: var(--at-panel); color: var(--at-text);
  border-color: var(--at-line); box-shadow: var(--at-shadow), 0 24px 64px rgba(0,0,0,.22);
}
html[data-at-theme='light'] .customer-modal-inner { box-shadow: var(--at-shadow), 0 24px 64px rgba(33,29,24,.18); }
html[data-at-theme] .customer-modal-inner header h2 { color: var(--at-text); }
html[data-at-theme] .customer-form-grid label { color: var(--at-mute); }
html[data-at-theme] .customer-form-grid input,
html[data-at-theme] .customer-form-grid select {
  background: var(--at-input-bg); color: var(--at-text); border-color: var(--at-line);
}
html[data-at-theme] .customer-match-banner { color: var(--at-text); }
html[data-at-theme] .customer-match-banner .cmb-helios { color: var(--at-zisk); }
/* Login page (public nav + auth modal hybrid): the dark-glass CTA and the
   over-dark nav vignette both misread on paper. */
html[data-at-theme='light'] .auth-modal .btn.solid { background: var(--brand); color: #fff; border: none; }
html[data-at-theme='light'] .auth-modal .btn.solid:hover { background: var(--brand-hi, #a81f24); }
html[data-at-theme='light'] .nav.over-dark:not(.scrolled)::before { display: none; }
html[data-at-theme='light'] .nav.over-dark { color: var(--at-text); }

.atelier-profile-card {
  background: var(--at-panel); border: 1px solid var(--at-line); border-radius: var(--r-md);
  box-shadow: var(--at-shadow); padding: 24px;
}
.atelier-profile-card h2 { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; margin: 0 0 16px; }
.atelier-profile { display: grid; grid-template-columns: max-content 1fr; gap: 6px 24px; font-size: 0.88rem; }
.atelier-profile dt { color: var(--at-mute); }
.atelier-profile dd { margin: 0; color: var(--at-text); }

.atelier-page-head {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px;
  padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--at-line);
}
.atelier-page-head h1 { font-family: var(--serif); font-size: 2.4rem; font-weight: 400; margin: 0; color: var(--at-text); line-height: 1.1; }

.atelier-banner {
  background: rgba(200, 38, 44, 0.08); border: 1px solid rgba(200, 38, 44, 0.3);
  border-radius: 8px; padding: 14px 18px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px; font-size: 0.85rem;
}
.atelier-banner strong { color: var(--at-text); }
.atelier-banner span { color: var(--at-mute); }

.atelier-table-wrap { overflow-x: auto; border: 1px solid var(--at-line); border-radius: 12px; }
.atelier-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.atelier-table th, .atelier-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--at-line); }
.atelier-table th { background: var(--at-hover); color: var(--at-mute); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.atelier-table tbody tr:hover { background: var(--at-hover); }
.atelier-table tbody tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 0.7rem; font-family: var(--mono); }
.badge-pending { background: rgba(192, 168, 120, 0.15); color: var(--gold); }
.badge-synced { background: rgba(109, 210, 138, 0.12); color: #6dd28a; }
.badge-failed { background: rgba(255, 139, 123, 0.12); color: #ff8b7b; }

.zakazka-head .zakazka-actions { display: flex; gap: 12px; }
.zakazka-plugin {
  background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 24px; overflow: hidden;
}
.zakazka-plugin-head {
  padding: 18px 24px; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 16px;
}
.zakazka-plugin-head h2 { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; margin: 0; color: var(--text); }
.zakazka-plugin-slot {
  min-height: 600px; padding: 0; background: rgba(0,0,0,0.2);
  display: grid; place-items: center;
}
.zakazka-plugin-placeholder {
  text-align: center; padding: 48px; color: var(--text-mute);
}
.zakazka-plugin-placeholder p { margin: 0 0 12px; }
.zakazka-plugin-placeholder .btn.solid { margin-top: 12px; }
.zakazka-plugin-loading { color: var(--text-mute); font-size: 0.9rem; padding: 24px; }
.zakazka-plugin-error { color: #ff8b7b; font-size: 0.9rem; padding: 24px; }
/* NEVER set `display` on the plugin host. The plugin puts display:flex on its own
   host element; this class selector outranks that, and forcing display:block makes
   its .app-container size to CONTENT (measured 171px instead of 780px) — every box
   below it, including the 3D canvas, then collapses to height 0. You get the step
   list and no room. Verified 2026-08-03 by diffing the canvas ancestor chain against
   the working imos-test.html harness, which styles the bare tag (no class) so the
   plugin's own flex wins. */
imos-net-roomplanner-plugin.zakazka-plugin-active { min-height: 600px; width: 100%; }

/* Fullscreen configurator. A 600px inline panel is not enough room to lay out a
   kitchen, so while it is open the section becomes a fixed full-viewport layer
   above the atelier topbar (z 100) and the sticky toolbar (z 300), but BELOW
   .bk-overlay (z 400) so modals still open on top of it — a tie would leave that
   to DOM order. The head stays a pinned top bar, which is what keeps the live
   price and "Ukončit návrh" permanently reachable — the whole point of the mode. */
.zakazka-plugin--full {
  position: fixed; inset: 0; z-index: 380;
  margin: 0; border: 0; border-radius: 0;
  background: var(--bg);
  display: flex; flex-direction: column;
}
.zakazka-plugin--full .zakazka-plugin-head { flex: 0 0 auto; align-items: center; }
/* push "Ukončit návrh" to the far right; title + price stay grouped left */
.zakazka-plugin--full .zakazka-plugin-head .btn { margin-left: auto; }
.zakazka-plugin--full .zk-imos-price { font-size: 12.5px; color: var(--at-text, var(--text)); }
/* The slot is a centering grid in panel mode — in fullscreen it must fill instead.
   MEASURED: with a plain block slot the outer boxes size correctly (908px) but the
   plugin's internal canvas still comes out 1039x0 — its own layout needs a FLEX
   parent + flex:1 child to resolve, which is the recipe imos-test.html verified.
   Don't "simplify" this back to display:block. */
.zakazka-plugin--full .zakazka-plugin-slot { flex: 1 1 auto; min-height: 0; display: flex; }
.zakazka-plugin--full imos-net-roomplanner-plugin.zakazka-plugin-active {
  flex: 1; height: 100%; width: 100%; min-height: 0;   /* no `display` — see above */
}
body.imos-fullscreen { overflow: hidden; }

@media (max-width: 900px) {
  .atelier-topbar-inner { grid-template-columns: 1fr auto; }
  .atelier-nav { display: none; }
  .atelier-hero, .atelier-page-head { grid-template-columns: 1fr; }
  .atelier-stats, .atelier-grid { grid-template-columns: 1fr; }
}

/* ═══ Přehled dashboard (muj-ucet #at-dashboard) — stat strip, expiring
   callout, activity ledger, F5e. Fail-soft: mount stays empty on fetch
   failure, so no empty-state CSS is needed here. ═══ */
.at-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
  margin-bottom: 24px;
}
.at-stat {
  background: var(--at-panel); border: 1px solid var(--at-line); border-radius: var(--r-md);
  padding: 18px 20px;
}
.at-stat-num { display: block; font-family: var(--mono); font-size: 2rem; font-weight: 500; color: var(--at-text); line-height: 1; }
.at-stat-num.zk-roz  { color: var(--at-roz); }
.at-stat-num.zk-plat { color: var(--at-plat); }
.at-stat-num.zk-nova  { color: var(--at-nova); }
.at-stat-num.zk-exsp  { color: var(--at-exsp); }
.at-stat-num.zk-ztrac { color: var(--at-ztrac); }
.at-stat-num.zk-zisk { color: var(--at-zisk); }
.at-stat-label { display: block; font-family: var(--serif); font-size: 0.9rem; color: var(--at-mute); margin-top: 6px; }
.at-stat .atelier-sub { display: block; margin-top: 4px; font-size: 0.72rem; }

/* Filtr „studio / obchodník" nad nástěnkou Přehledu. Platí pro dlaždice
   i pro seznam zakázek pod nimi — proto stojí nad obojím, ne uvnitř seznamu.
   Tvar sdílí s `.zk-filters`; věta o tom, co je právě vidět, dotlačí pravý kraj. */
.at-scope .atelier-sub { flex: 1 1 200px; }
.at-scope:empty { display: none; }

/* Aktivita + Vyprší brzy side by side — two half-width boxes, not a full row. */
.at-duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: start; margin-bottom: 24px;
}
.at-duo:empty { display: none; margin: 0; }
.at-expiring {
  border: 1px solid var(--at-line); border-left: 3px solid #b9802f; border-radius: var(--r-md);
  padding: 18px 20px; background: rgba(185, 128, 47, 0.06);
}
.at-expiring.is-empty { border-left: 1px solid var(--at-line); background: var(--at-panel); }
.at-activity {
  border: 1px solid var(--at-line); border-radius: var(--r-md);
  padding: 18px 20px; background: var(--at-panel);
}
.at-expiring h3, .at-activity h3 {
  font-family: var(--serif); font-weight: 400; font-size: 1.1rem; margin: 0 0 12px; color: var(--at-text);
}
.at-expiring-row, .at-activity-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--at-line);
  color: var(--at-mute); text-decoration: none; font-size: 0.85rem;
}
.at-expiring-row:last-child, .at-activity-row:last-child { border-bottom: none; }
a.at-expiring-row:hover, a.at-activity-row:hover { color: var(--at-text); }
.at-activity-row .ai { width: 14px; height: 14px; flex-shrink: 0; color: var(--at-dim); }
.at-activity-time { font-family: var(--mono); font-size: 0.72rem; color: var(--at-dim); flex-shrink: 0; min-width: 74px; }
.at-activity-label { color: var(--at-mute); }

@media (max-width: 900px) {
  .at-stats { grid-template-columns: repeat(2, 1fr); }
  .at-duo { grid-template-columns: 1fr; }
}

/* ═══ Customer create modal (atelier) ═══ */
.customer-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: 24px;
}
.customer-modal[hidden] { display: none; }
.customer-modal-inner {
  width: min(640px, 100%); max-height: 90vh; overflow: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 28px;
}
.customer-modal-inner header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.customer-modal-inner header h2 { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; margin: 0; color: var(--text); }
.customer-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.customer-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--text-mute); }
.customer-form-grid input, .customer-form-grid select {
  padding: 9px 11px; border-radius: 6px; background: rgba(0,0,0,0.3); color: var(--text);
  border: 1px solid rgba(255,255,255,0.12); font: inherit; font-size: 0.88rem;
}
.customer-form-grid input:focus, .customer-form-grid select:focus { outline: none; border-color: var(--brand); }
@media (max-width: 600px) { .customer-form-grid { grid-template-columns: 1fr; } }

.customer-match-banner { margin: 4px 0 12px; padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid transparent; display: flex; color: var(--text);
  flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; }
.customer-match-banner[hidden] { display: none; }
.customer-match-banner.is-local { background: rgba(200,38,44,.06); border-color: rgba(200,38,44,.2); }
.customer-match-banner.is-info  { background: rgba(74,124,89,.08); border-color: rgba(74,124,89,.25); }
.customer-match-banner .cmb-actions { margin-left: auto; display: flex; gap: 8px; }
.customer-match-banner .cmb-helios { display: flex; align-items: center; gap: 6px; color: #3a6147; }

/* ═══ Zákazka order flow ═══ */
.zakazka-addbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
#order-mode-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px; background: rgba(200,38,44,0.95); color: #fff;
  font-size: 0.9rem; backdrop-filter: blur(8px);
}
#order-mode-bar .btn.solid { background: #fff; color: var(--brand); }

/* Návrh "picking mode" bottom bar (public catalog → shop_navrh, F4 task 11).
   Same fixed-bottom slot as #order-mode-bar (unrelated, older order-mode
   feature) but dark-glass, matching the "Unified catalog filter shell"
   convention: edge-to-edge background, container-bound inner row. */
.navrh-pick-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: rgba(28,24,19,0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-strong);
}
.navrh-pick-bar-inner {
  max-width: var(--container); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.navrh-pick-msg { font-size: 0.9rem; color: var(--text); }
.navrh-pick-count { color: var(--text-mute); font-family: var(--mono); font-size: 0.8rem; }
.navrh-pick-actions { display: flex; gap: 10px; align-items: center; }

/* ═══════════════════════════════════════════════════════════════
   Studio finder + detail (Najít studio)
   ═══════════════════════════════════════════════════════════════ */
.st-narrow { max-width: 760px; }

/* ─── Finder ─────────────────────────────────────────── */
.st-finder-hero { padding: 170px 0 50px; }
.st-finder-hero .st-finder-lead {
  max-width: 560px; margin-top: 22px; font-size: 18px;
  line-height: 1.65; color: var(--text-mute);
}
.st-filter-shell {
  position: sticky; top: var(--nav-h, 80px); z-index: 60; width: 100vw;
  margin-left: calc(50% - 50vw); padding: 14px 0;
  background: rgba(20,17,14,0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.st-filter-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.st-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.st-chip {
  cursor: pointer; padding: 8px 16px; border-radius: 999px; font-size: 13px; color: var(--text);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  transition: border-color .25s, background .25s;
}
.st-chip:hover { border-color: var(--brand); }
.st-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.st-search { flex: 1 1 200px; min-width: 180px; }
.st-map-toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 16px; border-radius: 999px; font-size: 13px; color: var(--text);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
}
.st-map-toggle svg { width: 15px; height: 15px; }
.st-map-toggle:hover { border-color: var(--brand); }
.st-map-toggle.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* "Nejblíže vám" — geolocation toggle, mirrors the map toggle */
.st-near-toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 16px; border-radius: 999px; font-size: 13px; color: var(--text);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  transition: border-color .3s, background .3s, color .3s, opacity .3s;
}
.st-near-toggle svg { width: 15px; height: 15px; }
.st-near-toggle:hover { border-color: var(--brand); }
.st-near-toggle.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.st-near-toggle.is-locating { opacity: 0.65; pointer-events: none; }
.st-card-dist {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: #fff;
  background: rgba(20,17,14,0.5); border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.st-card-dist svg { width: 12px; height: 12px; opacity: 0.85; }
.st-group-near .st-group-count { display: inline-flex; align-items: center; gap: 6px; }
.st-group-near .st-group-count svg { width: 13px; height: 13px; }

/* Členská data se nepodařilo načíst (member-data.js, spec 2026-09-07) — musí být
   VIDĚT, nikdy prázdná mřížka. Stejný důvod jako .st-map-fail níž. */
.member-data-fail { padding: 160px 0 120px; text-align: center; color: var(--text); }
.member-data-fail p { color: var(--text-dim); margin-top: 12px; }
.kc-page .kc-login { padding: 120px 24px; text-align: center; display: grid; gap: 20px; justify-items: center; }

.st-finder { padding: 40px 0 120px; }
.st-map-wrap { height: 460px; border-radius: var(--r-md); overflow: hidden; margin-bottom: 46px;
  border: 1px solid rgba(255,255,255,0.10); }
.st-map-fail {
  height: 100%; min-height: 200px; display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; text-align: center; padding: 24px;
  font-family: var(--mono); font-size: 13px; color: var(--text-mute);
}
.st-map-fail a { color: var(--brand); text-decoration: none; }
.st-map-fail a:hover { text-decoration: underline; }
.st-group { margin-top: 64px; }
.st-group:first-child { margin-top: 12px; }
.st-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 16px; margin-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.10);
}
.st-group-name { font-family: var(--serif); font-weight: 400; line-height: 1; font-size: clamp(26px, 3.4vw, 40px); }
.st-group-count {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mute); white-space: nowrap;
}
.st-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }

/* Editorial overlay card — warm-toned photo, type leads */
.st-card {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--r-md); color: #fff; background: #221e19;
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color .5s, transform .5s, box-shadow .5s;
}
.st-card:hover {
  border-color: rgba(200,38,44,0.55); transform: translateY(-6px);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,0.85);
}
.st-card-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* resting = black & white; full colour returns on hover (see below) */
  filter: grayscale(1) contrast(1.06) brightness(0.82);
  transform: scale(1.02);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .7s;
}
.st-card:hover .st-card-photo { transform: scale(1.08); filter: grayscale(0) contrast(1.03) brightness(0.96); }
.st-card-photo.is-noimg {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(200,38,44,0.16), transparent 60%),
    repeating-linear-gradient(135deg, #221e19 0 14px, #2a2520 14px 28px);
}
.st-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  /* neutral monochrome darkening for the resting B&W state */
  background: linear-gradient(180deg, rgba(12,10,9,0) 36%, rgba(12,10,9,0.5) 70%, rgba(8,7,6,0.92) 100%);
  transition: opacity .6s;
}
.st-card:hover::after { opacity: 0.5; }
.st-card-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 5px;
  transition: opacity .4s, transform .4s;
}
.st-card:hover .st-card-cap { opacity: 0; transform: translateY(10px); }

/* Glassmorphic info card — revealed on hover, address + phone + hours */
.st-card-info {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  display: flex; flex-direction: column; padding: 17px 18px 16px;
  border-radius: var(--r-md);
  background: rgba(18,15,12,0.42);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 22px 48px -24px rgba(0,0,0,0.85);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .45s, transform .5s cubic-bezier(.2,.7,.2,1);
}
.st-card:hover .st-card-info { opacity: 1; transform: translateY(0); }
.st-info-country {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.62);
}
.st-info-name { font-family: var(--serif); font-size: 23px; line-height: 1.05; margin-top: 3px; }
.st-info-rows {
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.14);
}
.st-info-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.35; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.84);
}
.st-info-row svg { width: 13px; height: 13px; flex: none; margin-top: 1px; opacity: 0.68; }
.st-info-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 13px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff;
}
.st-info-cta svg { width: 14px; height: 14px; }
.st-card-country {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.st-card-name { font-family: var(--serif); font-size: 26px; line-height: 1.05; }
.st-card-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.62); margin-top: 3px; }
.st-card-go {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,17,14,0.5); border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .45s, transform .45s, background .3s, border-color .3s;
}
.st-card-go svg { width: 16px; height: 16px; }
.st-card:hover .st-card-go { opacity: 1; transform: translateY(0); background: var(--brand); border-color: var(--brand); }
.st-empty { padding: 80px 0; text-align: center; color: var(--text-mute); font-family: var(--serif); font-style: italic; font-size: 22px; }

/* Leaflet — dark theme to match the site */
.leaflet-container { background: #17140f; font-family: var(--sans); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: #221e19; color: var(--text);
  border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 14px 40px -12px rgba(0,0,0,0.7);
}
.leaflet-popup-content { font-size: 13px; line-height: 1.5; }
.leaflet-popup-content strong { font-family: var(--serif); font-size: 16px; font-weight: 400; }
.leaflet-popup-content a { color: var(--brand); }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-mute); }
.leaflet-bar { border: none; box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
.leaflet-bar a, .leaflet-control-zoom a {
  background: #221e19; color: var(--text); border-color: rgba(255,255,255,0.12);
}
.leaflet-bar a:hover { background: #2c2722; }
.leaflet-control-attribution { background: rgba(20,17,14,0.7); color: var(--text-dim); }
.leaflet-control-attribution a { color: var(--text-mute); }

/* ─── Detail page ────────────────────────────────────── */
.st-back { position: absolute; left: 0; right: 0; top: 96px; z-index: 6; pointer-events: none; }
.st-back-link {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px 9px 14px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: rgba(20,17,14,0.42);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .3s, border-color .3s, transform .3s;
}
.st-back-link:hover { background: rgba(200,38,44,0.85); border-color: var(--brand); transform: translateX(-3px); }
.st-detail { display: block; }
.st-blk { padding: 56px 0; }
.st-blk.st-hero { padding: 0; }

.st-hero {
  position: relative; min-height: 64vh; display: flex; align-items: flex-end;
  overflow: hidden;
}
.st-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.78) contrast(1.05) brightness(0.84) sepia(0.12); }
.st-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,9,8,calc(0.2 + var(--ov,0.45))) 0%, rgba(10,9,8,0.1) 60%, rgba(10,9,8,0.3) 100%);
}
.st-hero-inner { position: relative; z-index: 1; padding-bottom: 56px; }
.st-hero-inner .display-l { margin-top: 10px; }
/* S eyebrow nad nadpisem potřebuje display-l plnou mezeru — jinak do něj naráží
   háček/čárka prvního řádku (viz obecné pravidlo u .display-l). Bez eyebrow
   (plainCity varianta s .st-h1-pre kickerem) zůstává těsných 10px výše. */
.st-hero-inner .eyebrow + .display-l { margin-top: 24px; }
.st-hero-meta { margin-top: 18px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.72); }

.st-text .st-body, .st-quote .st-narrow { margin-top: 18px; }
.st-body { line-height: 1.75; color: var(--text-mute); }
.st-body p + p { margin-top: 16px; }
.st-text-center { text-align: center; }
.st-text-center .st-narrow { margin-left: auto; margin-right: auto; }

.st-image figure { margin: 0; }
.st-image img { width: 100%; border-radius: var(--r-md); display: block; }
.st-image figcaption, .st-gal-cell figcaption, .st-video-cap {
  margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-mute);
}
.st-w-inset .container { max-width: 820px; }
.st-w-full { padding-left: 0; padding-right: 0; }
.st-w-full .container { max-width: none; padding: 0; }
.st-w-full img { border-radius: var(--r-md); }

/* image / video — horizontal alignment (left / center / right). Not for full-width. */
.st-image.st-align-left:not(.st-w-full) figure,
.st-image.st-align-right:not(.st-w-full) figure { max-width: 66%; }
.st-image.st-align-left:not(.st-w-full) figure { margin-right: auto; margin-left: 0; }
.st-image.st-align-right:not(.st-w-full) figure { margin-left: auto; margin-right: 0; }
.st-video.st-align-left:not(.st-w-full) .st-narrow { margin-left: 0; margin-right: auto; }
.st-video.st-align-right:not(.st-w-full) .st-narrow { margin-left: auto; margin-right: 0; }
@media (max-width: 760px) {
  .st-image.st-align-left:not(.st-w-full) figure,
  .st-image.st-align-right:not(.st-w-full) figure { max-width: 100%; }
}

/* Video block — editorial 50/50 mode (align left/right): video half, eyebrow +
   heading + body in the other half. Mirrors the video_feature split. */
.st-video-ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.st-video-ed-media { margin: 0; min-width: 0; }
/* min-width:0 + overflow-wrap so a long unbroken word can't blow the 1fr column
   past the container (the "text presahuje" overflow). */
.st-video-ed-copy { min-width: 0; overflow-wrap: anywhere; }
.st-video-editorial.st-video-ed-right .st-video-ed-media { order: 2; }   /* video on the right */
.st-video-ed-copy .eyebrow { display: block; }
.st-video-ed-copy h2 { margin-top: 14px; }
.st-video-ed-copy .st-body { margin-top: 18px; }
/* Mirror: eyebrow + heading hug the OUTER edge (away from the video) — video left
   → text aligned right, video right → aligned left. Body stays left (readable). */
.st-video-editorial.st-video-ed-left  .st-video-ed-copy { text-align: right; }
.st-video-editorial.st-video-ed-right .st-video-ed-copy { text-align: left; }
.st-video-ed-copy .st-body { text-align: left; }
@media (max-width: 860px) {
  .st-video-ed-grid { grid-template-columns: 1fr; gap: 22px; }
  .st-video-editorial.st-video-ed-right .st-video-ed-media { order: 0; }
  .st-video-editorial .st-video-ed-copy { text-align: left; }   /* stacked = natural left */
}

.st-gal-track { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.st-gal-cell { margin: 0; }
.st-gal-cell img, .st-gal-cell video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); display: block; }
.st-gal-grid .st-gal-cell:first-child { grid-column: 1 / -1; }
.st-gal-grid .st-gal-cell:first-child img { aspect-ratio: 16 / 9; }

/* gallery width + alignment (own classes — NOT st-w-full, which unpads every
   .container inside and would break the carousel's container-bound UI row) */
.st-gallery.st-gal-w-full { padding-left: 0; padding-right: 0; }
.st-gal-bleed { padding: 0 clamp(10px, 1.2vw, 18px); }
.st-gallery.st-gal-w-inset .container { max-width: 980px; }
.st-gallery.st-gal-w-inset.st-galign-left .container { margin-left: 0; }
.st-gallery.st-gal-w-inset.st-galign-right .container { margin-right: 0; }

/* ── Gallery carousel: story filmstrip — slides keep their natural width at a
      fixed height, drag / wheel scroll, counter + progress + glass arrows ── */
.st-gal-carousel .st-gal-track {
  display: flex; gap: clamp(12px, 1.6vw, 22px);
  overflow-x: auto; scroll-behavior: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; user-select: none;
}
.st-gal-carousel .st-gal-track::-webkit-scrollbar { display: none; }
.st-gal-carousel .st-gal-track.is-grab { cursor: grabbing; scroll-snap-type: none; }
/* Belt-and-braces with the dragstart preventDefault in wireGalleries(): an <img>
   is draggable by default, and the browser's own image drag hijacks the gesture
   (pointercancel) so the strip stops following the mouse. */
.st-gal-carousel .st-gal-track :is(img, video) { -webkit-user-drag: none; user-select: none; }
.st-gal-carousel .st-gal-cell {
  flex: none; position: relative; scroll-snap-align: start;
  display: flex; flex-direction: column; overflow: hidden;
}
.st-gal-carousel .st-gal-cell img, .st-gal-carousel .st-gal-cell video {
  height: clamp(360px, 56vh, 620px); width: auto; max-width: 82vw;
  aspect-ratio: auto; object-fit: cover; border-radius: var(--r-md);
}
.st-gal-carousel .st-cell-cap { width: 0; min-width: 100%; }
/* Clickable gallery cell (admin „Klikatelné" + a picked product). Deliberately
   invisible at rest so the photography stays the subject — a brand hairline INSET
   from the edge plus a corner arrow fade in on hover/focus, which reads as "this
   opens something" without putting a permanent chrome frame on every photo.
   `align-self: flex-start` matters: a carousel cell is a column flex container, so a
   stretched <a> would try to size to a width its own content defines. The existing
   `.st-gal-cell img/video` rules still match through the <a> (descendant selectors),
   so wrapping changes no sizing. */
.st-gal-link { display: block; position: relative; align-self: flex-start;
  border-radius: var(--r-md); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.st-gal-link::after { content: ''; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid var(--brand); border-radius: calc(var(--r-md) - 4px);
  opacity: 0; transition: opacity .32s ease; }
.st-gal-link:hover::after, .st-gal-link:focus-visible::after { opacity: 1; }
.st-gal-link:focus { outline: none; }
.st-gal-link-ico { position: absolute; right: 22px; bottom: 22px; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; color: #fff;
  background: rgba(12,10,8,0.5); border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(7px); transition: opacity .32s ease, transform .32s cubic-bezier(.22,1,.36,1); }
.st-gal-link:hover .st-gal-link-ico, .st-gal-link:focus-visible .st-gal-link-ico { opacity: 1; transform: none; }
/* The shared arrow is a STROKE path — every icon on the site has to say so explicitly
   or it defaults to fill:black + stroke:none and renders as an invisible blob on dark
   (same trap as .st-fs-play svg). Rotated to read as "go there" rather than "next". */
.st-gal-link-ico svg { width: 15px; height: 15px; display: block; transform: rotate(-45deg);
  stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.st-gal-ghost {
  position: absolute; top: 16px; right: 18px; z-index: 1; pointer-events: none;
  font-family: var(--mono); font-size: clamp(26px, 3vw, 40px); line-height: 1;
  color: rgba(255,255,255,0.65); text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.st-gal-ui { display: flex; align-items: center; gap: 22px; margin-top: 22px; }
.st-gal-count { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--text-mute); display: inline-flex; align-items: baseline; gap: 6px; }
.st-gal-count b { color: var(--text); font-weight: 500; }
.st-gal-count i { font-style: normal; opacity: 0.5; }
.st-gal-progress { flex: 1; height: 1px; background: rgba(255,255,255,0.14); position: relative; }
.st-gal-progress i { position: absolute; left: 0; top: -0.5px; height: 2px; width: 0;
  background: var(--brand); }
.st-gal-navs { display: inline-flex; gap: 10px; }
.st-gal-nav {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(245,238,224,0.06);
  color: var(--text); display: inline-flex; align-items: center; justify-content: center;
  transition: background .3s, border-color .3s, color .3s;
}
.st-gal-nav svg { width: 16px; height: 16px; }
.st-gal-prev svg { transform: rotate(180deg); }
.st-gal-nav:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── Gallery collage: "volně rozložené" — a deterministic scatter over a
      12-col grid (sizes, ratios and vertical offsets vary in a 6-slot loop) ── */
.st-gal-collage .st-gal-track {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.2vw, 30px); align-items: start;
}
.st-gal-collage .st-gal-cell:nth-child(6n+1) { grid-column: 1 / span 5; }
.st-gal-collage .st-gal-cell:nth-child(6n+1) img { aspect-ratio: 4 / 3; }
.st-gal-collage .st-gal-cell:nth-child(6n+2) { grid-column: 8 / span 4; margin-top: clamp(48px, 7vw, 120px); }
.st-gal-collage .st-gal-cell:nth-child(6n+2) img { aspect-ratio: 3 / 4; }
.st-gal-collage .st-gal-cell:nth-child(6n+3) { grid-column: 2 / span 4; margin-top: clamp(12px, 2vw, 40px); }
.st-gal-collage .st-gal-cell:nth-child(6n+3) img { aspect-ratio: 1 / 1; }
.st-gal-collage .st-gal-cell:nth-child(6n+4) { grid-column: 7 / span 5; margin-top: clamp(40px, 6vw, 100px); }
.st-gal-collage .st-gal-cell:nth-child(6n+4) img { aspect-ratio: 4 / 3; }
.st-gal-collage .st-gal-cell:nth-child(6n+5) { grid-column: 1 / span 4; }
.st-gal-collage .st-gal-cell:nth-child(6n+5) img { aspect-ratio: 3 / 4; }
.st-gal-collage .st-gal-cell:nth-child(6n+6) { grid-column: 6 / span 6; margin-top: clamp(24px, 4vw, 70px); }
.st-gal-collage .st-gal-cell:nth-child(6n+6) img { aspect-ratio: 16 / 10; }

/* ── Gallery masonry: natural photo heights flowing in columns ── */
.st-gal-masonry .st-gal-track { display: block; columns: 3; column-gap: 18px; }
.st-gal-masonry.st-gal-cols-2 .st-gal-track { columns: 2; }
.st-gal-masonry.st-gal-cols-4 .st-gal-track { columns: 4; }
.st-gal-masonry .st-gal-cell { break-inside: avoid; margin: 0 0 18px; }
.st-gal-masonry .st-gal-cell img, .st-gal-masonry .st-gal-cell video { aspect-ratio: auto; height: auto; }

.st-it-grid { display: grid; gap: 44px; grid-template-columns: 1fr 1fr; align-items: center; }
.st-image-text.st-it-right .st-it-media { order: 2; }
.st-it-media { margin: 0; }
.st-it-media img { width: 100%; border-radius: var(--r-md); display: block; }
.st-it-cta { margin-top: 24px; }

.st-video-frame { position: relative; padding-top: 56.25%; border-radius: var(--r-md); overflow: hidden; }
.st-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-video-el { width: 100%; border-radius: var(--r-md); display: block; }
/* Keep a 16:9 box even before/without loaded metadata, so a slow, blocked, or
   failed source (e.g. an HEVC rendition the browser can't decode) never collapses
   the player to a thin control-bar strip. Explicit st-vh-* heights override this. */
.st-video:not([class*="st-vh-"]) .st-video-el { aspect-ratio: 16 / 9; object-fit: cover; background: #000; }

/* Media grid — several videos / images side by side, each with title + copy */
.st-mg-head { margin-bottom: 30px; }
.st-mg-head .eyebrow { display: block; }
.st-mg-head h2 { margin-top: 12px; }
.st-mg-track { display: grid; gap: 30px 24px; grid-template-columns: repeat(2, 1fr); }
.st-mg-cols-3 .st-mg-track { grid-template-columns: repeat(3, 1fr); }
.st-mg-cell { margin: 0; }
.st-mg-media {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  aspect-ratio: 16 / 9; background: #17140f;
  border: 1px solid rgba(255,255,255,0.08);
}
.st-mg-media video, .st-mg-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.86) contrast(1.04) brightness(0.92);
}
.st-mg-frame { padding-top: 0; }
.st-mg-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.st-mg-clickable { cursor: pointer; }
.st-mg-play {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  pointer-events: none; transition: background .4s;
}
.st-mg-play svg {
  box-sizing: content-box;  /* else border-box folds the padding ring into the size and hides the triangle */
  width: 26px; height: 26px; color: #fff; fill: currentColor; padding: 16px; border-radius: 50%;
  background: rgba(20,17,14,0.45); border: 1px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .4s, background .3s, border-color .3s;
}
.st-mg-clickable:hover .st-mg-play { background: rgba(20,17,14,0.2); }
.st-mg-clickable:hover .st-mg-play svg { transform: scale(1.08); background: var(--brand); border-color: var(--brand); }
/* media-grid captions now render through the unified .st-cell-cap stack */
.st-mg-cell .st-cell-cap { margin-top: 16px; }

/* ── Click → fullscreen video: shared glassmorph play affordance (opt-in per
   block via admin „Přehrát na celou obrazovku po kliknutí"). Two markup shapes:
   .st-fs = the whole media wrapper is the hit target (video / split / video+text);
   .st-fs-layer + .st-fs-play--hit = icon-only hit target over overlaid-text media
   (hero / scenic band) so it never blocks the overlaid CTAs. Glass = blur≤12px,
   no saturate() (project rule). */
.st-fs { position: relative; cursor: pointer; }
.st-video-el-wrap { display: block; }
.st-fs-layer {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.st-fs-play {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; transition: background .4s;
}
.st-fs-play svg {
  /* content-box: the global `* { box-sizing: border-box }` would otherwise fold
     the 18px ring into the 26px size and collapse the triangle to 0 (the "red
     circle, no icon" bug). fill: the play glyph is a filled shape, not a line icon. */
  box-sizing: content-box;
  width: 26px; height: 26px; color: #fff; fill: currentColor; padding: 17px; border-radius: 50%;
  background: rgba(20,17,14,0.4); border: 1px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .4s, background .3s, border-color .3s;
}
/* icon-only variant: the icon itself is the hit target, not the full layer */
.st-fs-play--hit { position: static; inset: auto; pointer-events: auto; cursor: pointer; }
/* scenic band carries big CENTERED copy — park the play icon in the corner so
   it never sits on top of the heading */
.st-scenic-band .st-fs-layer { align-items: flex-end; justify-content: flex-end; padding: clamp(18px, 2.4vw, 34px); }
.st-fs:hover .st-fs-play svg,
.st-fs-play--hit:hover svg,
.st-fs-play--hit:focus-visible svg { transform: scale(1.08); background: var(--brand); border-color: var(--brand); }

/* Cinematic hero play → fullscreen button (near the progress dots, bottom-right
   so it clears the centered dots + scroll cue). */
.hero-fs-btn {
  position: absolute; right: clamp(18px, 5vw, 60px); bottom: clamp(20px, 5vh, 52px);
  z-index: 4; display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 17px 10px 13px; border-radius: 999px; cursor: pointer;
  color: #f5eee0; background: rgba(20,17,14,0.34); border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--sans); font-weight: 500; font-size: 0.82rem; letter-spacing: .02em;
  transition: background .3s, border-color .3s, transform .3s;
}
.hero-fs-btn:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-2px); }
.hero-fs-ic { display: inline-flex; }
.hero-fs-ic svg { width: 15px; height: 15px; fill: currentColor; }
@media (max-width: 640px) { .hero-fs-btn .hero-fs-tx { display: none; } .hero-fs-btn { padding: 11px; } }
.st-mg-cell .st-cell-title { font-size: 21px; line-height: 1.15; }

/* Branded fallback for studio cards without a photo (partner studios) */
.st-card-mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 120px; line-height: 1; color: rgba(255,255,255,0.07);
  pointer-events: none; user-select: none;
}

/* Contact + map section width — constrains the WHOLE section (incl. the full-bleed
   glass / map_top map, which ignores the inner .container), so it actually resizes,
   not just the overlay card. Mirrors the other blocks: wide = content width ·
   inset = narrow · full = edge-to-edge (default). */
/* wide = the SAME visual width as a "wide" video/content block: var(--container)
   minus the two gutters, centered — so their edges line up exactly. */
.st-contact.st-cw-wide  { max-width: calc(var(--container) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.st-contact.st-cw-inset { max-width: 920px; margin-left: auto; margin-right: auto; }
/* .st-cw-full = no cap (edge-to-edge) */
/* Full-bleed glass: the map fills the whole section, so "Mezery kolem" (spacing)
   must be a MARGIN, not padding — padding only insets the card (leaving the card
   NOT full-height) and never creates a real gap to the hero above (the map fills
   it). Convert to margin here (3 classes so it beats the generic .st-blk.st-sp-*
   regardless of source order). padding:0 → the frosted card spans the FULL map
   height. Bottom-bar variant keeps its own align. */
.st-contact-glass.st-blk.st-sp-tight { padding-top: 0; padding-bottom: 0; margin-top: 24px; margin-bottom: 24px; }
.st-contact-glass.st-blk.st-sp-loose { padding-top: 0; padding-bottom: 0; margin-top: 96px; margin-bottom: 96px; }
.st-contact-glass:not(.st-glass-bottom) { align-items: stretch; }
.st-contact-glass:not(.st-glass-bottom) .st-contact-glass-inner { display: flex; }
.st-contact-glass:not(.st-glass-bottom) .st-contact-card { display: flex; flex-direction: column; justify-content: center; }
/* Narrow glass: shrink the card so it doesn't cover the centered map pin. */
.st-contact-glass.st-cw-inset .st-contact-card { max-width: 360px; }
.st-contact-grid { display: grid; gap: 48px; grid-template-columns: 0.9fr 1.1fr; align-items: center; }
.st-contact-addr { margin-top: 14px; font-size: 19px; line-height: 1.5; }
.st-contact-links { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.st-contact-links a { font-size: 17px; color: var(--text); }
.st-contact-links a:hover { color: var(--brand); }
.st-hours { margin-top: 22px; }
.st-hours > div {
  display: flex; justify-content: space-between; gap: 20px; max-width: 320px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.09);
}
.st-hours dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-mute); }
.st-hours dd { font-size: 14px; }
.st-contact-desc { margin-top: 16px; max-width: 44ch; line-height: 1.7; color: var(--text-mute); font-size: 16px; }
.st-contact-cta { margin-top: 30px; }
.st-contact-cta .btn.solid {
  background: rgba(255,255,255,0.07); color: #fff; border-color: rgba(255,255,255,0.18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
  transition: border-color .35s, transform .35s, background .35s;
}
.st-contact-cta .btn.solid:hover {
  background: rgba(255,255,255,0.12); border-color: var(--brand); transform: translateY(-2px);
}
.st-contact-map { min-height: 440px; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10); }
.st-contact-map .st-map { height: 100%; min-height: 440px; }
.st-mapblock .st-map { height: 420px; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10); }
.st-map { background: #e8e4dd; position: relative; }
/* "Navigovat do studia" — opens the studio in Google Maps (desktop parity with
   mobile). Top-right glass pill floating above the Leaflet panes: clear of the
   zoom control (top-left) and the © attribution (bottom-right). Hidden on
   mobile (mobile.js adds its own centered link). */
.st-map-open { position: absolute; z-index: 1000; right: 14px; top: 14px;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: 999px; background: rgba(20,17,14,0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.16); color: #fff; text-decoration: none;
  font: 600 11px/1 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.st-map-open svg { width: 16px; height: 16px; color: var(--brand); flex: 0 0 auto; }
.st-map-open:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-2px); }
.st-map-open:hover svg { color: #fff; }
/* Contact: map + booking CTA stacked in the right column (CTA sits under the map). */
.st-contact-mapcol { display: flex; flex-direction: column; gap: 18px; }
.st-contact-mapcol .st-contact-map { flex: 1 1 auto; }
.st-contact-mapcol .st-contact-cta { margin-top: 0; }
.st-contact-mapcol .st-contact-cta .btn { width: 100%; justify-content: center; }

/* ── Kontakt + mapa — switchable layouts (default glass; all keep map+popis) ── */
.st-contact-mapleft .st-contact-grid { grid-template-columns: 1.1fr 0.9fr; }
/* Glass: full-bleed map with a frosted info card floating over it.
   TOP edge is always square, only the BOTTOM corners are rounded
   ("hore hranatá, dole oblá"). */
.st-contact-glass { position: relative; padding: 0; min-height: 560px; display: flex; align-items: center; overflow: hidden; border-radius: 0 0 var(--r-md) var(--r-md); }
.st-contact-glass-map { position: absolute; inset: 0; z-index: 0; }
.st-contact-glass-map .st-contact-map { height: 100%; min-height: 100%; border: 0; }
.st-contact-glass-map .st-map { height: 100%; min-height: 100%; }
/* The overlay layer must NOT eat map clicks — only the card is interactive,
   so the Leaflet map under it stays draggable/zoomable. */
.st-contact-glass-inner { position: relative; z-index: 1; width: 100%; pointer-events: none; }
.st-contact-card { max-width: 460px; padding: 40px 40px 44px; pointer-events: auto;
  background: rgba(20,17,14,0.55); border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 70px rgba(0,0,0,0.42); }
.st-contact-card .st-contact-desc { color: rgba(255,255,255,0.78); }
/* Glass card positions (all over a full-bleed map) */
.st-glass-right .st-contact-card { margin-left: auto; }
.st-glass-center .st-contact-card { margin-left: auto; margin-right: auto; text-align: center; }
.st-glass-center .st-contact-links { align-items: center; }
.st-contact-glass.st-glass-bottom { align-items: flex-end; }
.st-glass-bottom .st-contact-glass-inner { padding-bottom: 40px; }
.st-glass-bottom .st-contact-card { max-width: none; }
/* Map on top, full width; info below */
.st-contact-maptop .st-contact-map-wide { height: 420px; margin-bottom: 38px; }
.st-contact-maptop .st-contact-map-wide .st-map { height: 100%; min-height: 420px; }
@media (max-width: 880px) {
  .st-contact-glass { min-height: 0; display: block; }
  .st-contact-glass-map { position: relative; height: 300px; }
  .st-contact-glass-inner .st-contact-card { max-width: none; margin-top: -90px; }
}

/* Inline blocks — freeform studio blocks placed among the fixed sections */
.page-blocks { padding: 40px 0; }
.page-blocks .st-blk:first-child { margin-top: 0; }
/* Blocks are placed deliberately — show them immediately, don't gate on the scroll observer. */
.page-blocks .reveal, .page-blocks .image-reveal { opacity: 1; transform: none; }

.st-team-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.st-team-card {
  display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.st-team-photo { flex: 0 0 64px; }
.st-team-photo img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.st-team-meta { display: flex; flex-direction: column; gap: 2px; }
.st-team-name { font-family: var(--serif); font-size: 17px; }
.st-team-role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-mute); }
.st-team-meta a { font-size: 13px; color: var(--text-mute); }
.st-team-meta a:hover { color: var(--brand); }

/* Team layout variants (base = "cards" above; others override).
   Portréty + Čtverce use centred flex-wrap so any number of people (incl. a
   partial last row) stays centred, never left-aligned. */
/* Portréty — large round photo centred, text under */
.st-team-portraits .st-team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 30px; }
.st-team-portraits .st-team-card { flex: 0 1 200px; flex-direction: column; align-items: center; text-align: center;
  background: none; border: none; padding: 0; gap: 16px; }
.st-team-portraits .st-team-photo { flex: none; }
.st-team-portraits .st-team-photo img { width: 138px; height: 138px; }
.st-team-portraits .st-team-meta { align-items: center; gap: 4px; }
.st-team-portraits .st-team-name { font-size: 21px; }
/* Čtverce — large square portrait, text under */
.st-team-squares .st-team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.st-team-squares .st-team-card { flex: 0 1 300px; flex-direction: column; align-items: stretch;
  background: none; border: none; padding: 0; gap: 14px; }
.st-team-squares .st-team-photo { flex: none; width: 100%; }
.st-team-squares .st-team-photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--r-md); }
.st-team-squares .st-team-name { font-size: 20px; }
.st-team-squares .st-team-meta { align-items: flex-start; text-align: left; }
/* Řádky — full-width rows, large photo left */
.st-team-rows .st-team-grid { grid-template-columns: 1fr; gap: 0; }
.st-team-rows .st-team-card { align-items: center; gap: 28px; background: none; border: none;
  border-top: 1px solid rgba(255,255,255,0.1); border-radius: 0; padding: 26px 4px; }
.st-team-rows .st-team-card:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.st-team-rows .st-team-photo { flex: 0 0 88px; }
.st-team-rows .st-team-photo img { width: 88px; height: 88px; }
.st-team-rows .st-team-name { font-size: 26px; font-weight: 300; }

.st-cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.st-quote { text-align: center; }
.st-quote-text { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); line-height: 1.4; font-style: italic; }
.st-quote-author { display: block; margin-top: 18px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
.st-divider hr { border: 0; border-top: 1px solid rgba(255,255,255,0.10); }

/* Home atelier cities are now links — keep the existing look, add affordance */
.cities a.city { text-decoration: none; color: inherit; transition: border-color .25s, transform .25s; }
.cities a.city:hover { border-color: var(--brand); transform: translateY(-2px); }

@media (max-width: 980px) {
  .st-grid { grid-template-columns: repeat(2, 1fr); }
  .st-it-grid, .st-contact-grid { grid-template-columns: 1fr; gap: 26px; }
  .st-image-text.st-it-right .st-it-media { order: 0; }
  .st-gal-track { grid-template-columns: repeat(2, 1fr); }
  .st-mg-cols-3 .st-mg-track { grid-template-columns: repeat(2, 1fr); }
  .st-team-grid { grid-template-columns: 1fr 1fr; }
  .st-hero { min-height: 52vh; }
}
@media (max-width: 560px) {
  .st-grid, .st-team-grid { grid-template-columns: 1fr; }
  .st-mg-track, .st-mg-cols-3 .st-mg-track { grid-template-columns: 1fr; }
}

/* Studio block options (Phase 2) */
.st-video.st-w-full { padding-left: 0; padding-right: 0; }
.st-video.st-w-full .st-video-el, .st-video.st-w-full .st-video-frame { border-radius: var(--r-md); }
.st-video.st-w-full .st-video-cap { display: block; margin-top: 10px; }

/* Explicit section heights (admin "Výška sekce"). The <video>/<iframe> fills the
   set height; object-fit: cover crops instead of letterboxing. Without a height
   class the video keeps its natural aspect ratio (auto). */
.st-video[class*="st-vh-"] .st-video-el { object-fit: cover; height: var(--st-vh); }
.st-video[class*="st-vh-"] .st-video-frame { padding-top: 0; height: var(--st-vh); }
.st-video.st-vh-sm   { --st-vh: 42vh; }
.st-video.st-vh-md   { --st-vh: 58vh; }
.st-video.st-vh-lg   { --st-vh: 78vh; }
.st-video.st-vh-full { --st-vh: 100vh; }
/* Hero section height overrides (default — no class — stays the standard 64vh) */
.st-hero.st-vh-sm   { min-height: 42vh; }
.st-hero.st-vh-md   { min-height: 58vh; }
.st-hero.st-vh-lg   { min-height: 78vh; }
.st-hero.st-vh-full { min-height: 100vh; }
.st-gal-cols-2 .st-gal-track { grid-template-columns: repeat(2, 1fr); }
.st-gal-cols-4 .st-gal-track { grid-template-columns: repeat(4, 1fr); }
.st-gal-cols-2 .st-gal-cell:first-child, .st-gal-cols-4 .st-gal-cell:first-child { grid-column: auto; }
.st-gal-cols-2 .st-gal-cell:first-child img, .st-gal-cols-4 .st-gal-cell:first-child img { aspect-ratio: 4 / 3; }
.st-blk.st-sp-tight { padding-top: 24px; padding-bottom: 24px; }
.st-blk.st-sp-loose { padding-top: 96px; padding-bottom: 96px; }
@media (max-width: 980px) { .st-gal-cols-4 .st-gal-track { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .st-gal-cols-2 .st-gal-track, .st-gal-cols-4 .st-gal-track { grid-template-columns: 1fr; } }

/* ── Scenic blocks: image_text width/valign, bg tints, split_feature, scenic_band ── */
.st-image-text.st-it-v-top .st-it-grid { align-items: start; }
.st-image-text.st-it-v-bottom .st-it-grid { align-items: end; }
.st-image-text.st-w-inset .container { max-width: 980px; }
.st-image-text.st-w-full { padding-left: 0; padding-right: 0; }
.st-image-text.st-w-full .container { max-width: none; padding: 0; }
.st-image-text.st-w-full .st-it-grid { gap: 0; }
.st-image-text.st-w-full .st-it-copy { padding: 0 var(--gutter); }

/* Section background tints (text / quote) */
.st-text.st-bg-paper, .st-quote.st-bg-paper { background: var(--bg-paper); color: var(--text-paper); }
.st-bg-paper .st-body { color: var(--text-mute-paper); }
.st-bg-paper .eyebrow { color: var(--text-mute-paper); }
.st-text.st-bg-dark, .st-quote.st-bg-dark { background: #14110d; }

/* split_feature — full-height scenic split (photo one half, copy the other) */
.st-split-feature { padding: 0; }
.st-sf-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 78vh; }
.st-split-feature.st-sf-6040 .st-sf-grid { grid-template-columns: 6fr 4fr; }
.st-split-feature.st-sf-right .st-sf-figure { order: 2; }
.st-split-feature.st-sf-right.st-sf-6040 .st-sf-grid { grid-template-columns: 4fr 6fr; }
.st-sf-figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-md); }
.st-sf-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.82) contrast(1.04) brightness(0.92); }
.st-sf-copy { display: flex; align-items: center; justify-content: center; padding: 72px var(--gutter); }
.st-sf-copy-inner { max-width: 560px; }
.st-sf-copy .display-m { margin-top: 12px; }
.st-sf-copy .st-body { margin-top: 18px; }
.st-sf-cta { margin-top: 28px; }
.st-split-feature.st-sf-dark { background: #14110d; color: var(--text); }
.st-split-feature.st-sf-dark .st-body { color: rgba(255,255,255,0.7); }
/* video media keeps its full frame (no cover-crop) — the row follows the video */
.st-split-feature.st-sf-video .st-sf-grid { min-height: 0; align-items: center; }
.st-split-feature.st-sf-video .st-sf-media { position: static; height: auto; object-fit: unset; filter: none; }
@media (max-width: 820px) {
  .st-sf-grid, .st-split-feature.st-sf-6040 .st-sf-grid,
  .st-split-feature.st-sf-right.st-sf-6040 .st-sf-grid { grid-template-columns: 1fr; min-height: 0; }
  .st-split-feature.st-sf-right .st-sf-figure { order: 0; }
  .st-sf-figure { min-height: 56vh; }
  .st-split-feature.st-sf-video .st-sf-figure { min-height: 0; }
  .st-sf-copy { padding: 48px var(--gutter); }
}

/* scenic_band — full-bleed photo/video with overlaid copy (mid-page hero) */
.st-scenic-band { position: relative; padding: 0; min-height: 60vh; display: flex; align-items: center; overflow: hidden; border-radius: var(--r-md); }
.st-scenic-band.st-vh-sm { min-height: 42vh; } .st-scenic-band.st-vh-md { min-height: 58vh; }
.st-scenic-band.st-vh-lg { min-height: 78vh; } .st-scenic-band.st-vh-full { min-height: 100vh; }
.st-band-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.8) contrast(1.05) brightness(0.82); }
.st-scenic-band::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,9,8,calc(0.25 + var(--ov,0.4))) 0%, rgba(10,9,8,0.18) 55%, rgba(10,9,8,0.35) 100%); }
.st-band-inner { position: relative; z-index: 1; color: #fff; }
.st-band-inner .eyebrow { color: rgba(255,255,255,0.82); }
.st-band-inner .display-l { margin-top: 12px; }
.st-band-inner .eyebrow + .display-l { margin-top: 24px; }
.st-band-body { margin-top: 18px; color: rgba(255,255,255,0.82); max-width: 620px; }
.st-band-cta { margin-top: 28px; }
.st-band-center { justify-content: center; text-align: center; }
.st-band-center .st-band-body { margin-left: auto; margin-right: auto; }
.st-band-right { justify-content: flex-end; text-align: right; }
.st-band-right .st-band-body { margin-left: auto; }

/* ── Editorial block set (chapter_head / image_trio / image_duo / video_feature)
      — one shared vocabulary: mono eyebrows + serif display + mono captions,
      so the blocks compose into magazine spreads. ── */

/* unified per-asset caption stack (single image / gallery / trio / duo / media
   grid): mono index / serif title / body text / small mono meta / arrow CTA */
.st-cell-cap { margin-top: 13px; }
.st-cell-idx { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--brand); margin-bottom: 7px; }
.st-cell-title { display: block; font-family: var(--serif); font-size: 19px; line-height: 1.2; color: var(--text); }
.st-cell-body { margin-top: 8px; }
.st-cell-body p { font-size: 15px; line-height: 1.65; color: var(--text-mute); margin: 0 0 8px; }
.st-cell-body p:last-child { margin-bottom: 0; }
.st-cell-meta { margin: 8px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  line-height: 1.65; color: var(--text-mute); }
.st-cell-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text); text-decoration: none; transition: color .3s; }
.st-cell-cta svg { width: 14px; height: 14px; transition: transform .3s; }
.st-cell-cta:hover { color: var(--brand); }
.st-cell-cta:hover svg { transform: translateX(3px); }
/* pill button variant — compact size so it sits naturally under a photo cell */
.st-cell-btn { margin-top: 16px; }
.st-cell-btn .btn { padding: 12px 20px; gap: 9px; }
.st-cell-btn .btn .arrow { width: 14px; height: 14px; }
/* the legacy mono figcaption rule (.st-image/.st-gal-cell) must not re-style the stack */
figcaption.st-cell-cap { margin-top: 13px; font-family: var(--sans); font-size: 15px; letter-spacing: 0; color: inherit; }
.st-head-cta { margin-top: 24px; }
/* text block — block-level CTA under the body */
.st-text-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.st-text-center .st-text-cta { justify-content: center; }
/* inline button inside body copy ([btn:Text](url)) — sized to sit on a text line */
.st-inline-btn { vertical-align: middle; margin: 2px 2px; padding: 9px 16px; font-size: 13px; }
.st-inline-btn .arrow { width: 13px; height: 13px; }

/* chapter_head — hairline + mono index + serif display + perex */
.st-ch-rule { border: 0; border-top: 1px solid rgba(255,255,255,0.14); margin: 0 0 42px; }
.st-bg-paper .st-ch-rule { border-color: rgba(20,17,14,0.18); }
.st-ch-grid { display: grid; grid-template-columns: 1fr; }
.st-ch-grid.st-ch-has-idx { grid-template-columns: auto 1fr; gap: 12px 40px; align-items: baseline; }
.st-ch-idx { font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; color: var(--brand); }
.st-ch-copy .eyebrow { display: block; }
.st-ch-copy h2 { margin-top: 10px; }
.st-ch-lead { margin-top: 18px; max-width: 620px; }
.st-ch-center { text-align: center; }
.st-ch-center .st-ch-grid.st-ch-has-idx { grid-template-columns: 1fr; }
.st-ch-center .st-ch-idx { margin-bottom: 14px; }
.st-ch-center .st-ch-lead { margin-left: auto; margin-right: auto; }
.st-chapter.st-bg-paper, .st-vf.st-bg-paper { background: var(--bg-paper); color: var(--text-paper); }
.st-chapter.st-bg-dark, .st-vf.st-bg-dark { background: #14110d; }

/* ═══ Návod na údržbu — kapitola + akordeon materiálů ═════════════════════
   Blok `care_guide` (spec 2026-07-28-pece-o-kuchyni-navod-design). Hlavička
   drží rytmus .st-chapter (mono číslo vlevo, serif nadpis vpravo), pod ní jsou
   jednotlivé materiály jako nativní <details>. ═══ */
.st-care { padding: clamp(48px, 6vw, 86px) 0 0; }
.st-care-head { display: grid; grid-template-columns: 1fr; }
.st-care-head.st-care-has-idx { grid-template-columns: auto 1fr; gap: 12px 40px; align-items: baseline; }
.st-care-idx { font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; color: var(--brand); }
.st-care-copy .eyebrow { display: block; }
.st-care-copy h2 { margin-top: 10px; scroll-margin-top: 110px; }  /* kotva nesmí zmizet pod nav */
.st-care-lead { margin-top: 18px; max-width: 620px; }

/* Upozornění: svislá červená linka, ne plná výplň — musí být vidět, ale nesmí
   přebít nadpis kapitoly pár pixelů nad ním. */
.st-care-note {
  margin: 26px 0 0; padding: 12px 0 12px 18px;
  border-left: 2px solid var(--brand);
  max-width: 68ch; font-size: 15px; line-height: 1.7; color: rgba(245,238,224,0.84);
}

.st-care-list { margin-top: clamp(26px, 3vw, 40px); border-top: 1px solid rgba(245,238,224,0.14); }
.st-care-item { border-bottom: 1px solid rgba(245,238,224,0.14); }
.st-care-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 17px 0; cursor: pointer; color: var(--text);
  list-style: none;                        /* Firefox trojúhelník */
  transition: color .25s ease;
}
.st-care-sum::-webkit-details-marker { display: none; }
.st-care-sum:hover { color: var(--brand); }
.st-care-name { font-size: 16.5px; line-height: 1.4; }
/* Plus → minus: svislá čárka se při otevření srovná do vodorovné. */
.st-care-mark { position: relative; flex: none; width: 13px; height: 13px; }
.st-care-mark::before, .st-care-mark::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 13px; height: 1px;
  background: currentColor; transition: transform .3s ease;
}
.st-care-mark::after { transform: rotate(90deg); }
.st-care-item[open] .st-care-mark::after { transform: rotate(0deg); }

.st-care-body { padding: 0 0 28px; max-width: 68ch; }
.st-care-body .st-body { font-size: 15.5px; color: rgba(245,238,224,0.82); }
.st-care-body .st-body p + p { margin-top: 15px; }
/* Dílčí nadpisy uvnitř návodu („Akrylát NEW", „Základní čištění") jdou z *hvězdiček*. */
.st-care-body .st-body .italic { color: var(--text); font-style: normal; font-family: var(--serif); font-size: 17px; }
.st-care-item--media .st-care-body {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 30px;
  align-items: start; max-width: 900px;
}
.st-care-fig { margin: 0; }
.st-care-fig img { width: 100%; height: auto; display: block; border-radius: var(--r-md); }

/* ── Rejstřík kapitol ────────────────────────────────────────────────────
   Nástupce čtyř číslovaných dlaždic ze starého rozcestníku. Sází ho
   renderInfoMain automaticky, když má stránka dvě a více kapitol. */
.st-care-ix { padding: clamp(22px, 3vw, 36px) 0 0; }
.st-care-ix-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
}
.st-care-ix-item {
  display: flex; align-items: center; gap: 14px; height: 100%;
  padding: 17px 18px; border: 1px solid rgba(245,238,224,0.16); border-radius: var(--r-md);
  color: var(--text); text-decoration: none; cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.st-care-ix-item:hover { border-color: var(--brand); background: rgba(245,238,224,0.04); }
.st-care-ix-num { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--brand); }
.st-care-ix-name { flex: 1; font-family: var(--serif); font-weight: 300; font-size: 17px; line-height: 1.25; }
.st-care-ix-go { display: flex; opacity: .45; transition: opacity .25s ease, transform .3s ease; }
.st-care-ix-go svg { width: 15px; height: 15px; }
.st-care-ix-item:hover .st-care-ix-go { opacity: 1; transform: translateX(3px); }

@media (max-width: 620px) {
  .st-care-item--media .st-care-body { grid-template-columns: 1fr; gap: 18px; }
  .st-care-fig { max-width: 220px; }
  /* Číslo nad nadpis: vedle sebe si 40px mezera na 350px sloupci bere šířku,
     kterou nadpis potřebuje víc. */
  .st-care-head.st-care-has-idx { grid-template-columns: 1fr; gap: 8px; }
}
.st-bg-paper .st-cell-title { color: var(--text-paper); }
.st-bg-paper .st-cell-body p, .st-bg-paper .st-cell-meta { color: var(--text-mute-paper); }
.st-bg-paper .st-cell-cta { color: var(--text-paper); }

/* stats_band — editorial numbers strip: mono label above a big serif value,
   hairline verticals between items (horizontal hairlines when stacked) */
.st-stats.st-bg-paper { background: var(--bg-paper); color: var(--text-paper); }
.st-stats.st-bg-dark { background: #14110d; }
.st-stats-head { margin-bottom: 44px; }
.st-stats-head .eyebrow { display: block; }
.st-stats-head h2 { margin-top: 10px; }
.st-stats-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.st-stat { display: flex; flex-direction: column; gap: 12px; padding: 6px clamp(24px, 3.4vw, 56px); border-left: 1px solid rgba(255,255,255,0.14); }
.st-stat:first-child { padding-left: 0; border-left: 0; }
.st-bg-paper .st-stat { border-color: rgba(20,17,14,0.18); }
.st-stat-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); }
.st-stat-value { font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 4.8vw, 68px); line-height: 1; letter-spacing: -0.015em; color: var(--text); }
.st-stat-value .italic { font-style: normal; }
.st-bg-paper .st-stat-value { color: var(--text-paper); }
.st-stat-note { font-size: 14px; line-height: 1.55; color: var(--text-mute); max-width: 300px; }
.st-bg-paper .st-stat-note { color: var(--text-mute-paper); }
.st-stats-center { text-align: center; }
.st-stats-center .st-stat { align-items: center; }
.st-stats-center .st-stat-note { margin: 0 auto; }
@media (max-width: 820px) {
  .st-stats-grid { grid-auto-flow: row; grid-auto-columns: unset; }
  .st-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,0.14); padding: 26px 0; gap: 10px; }
  .st-stat:first-child { border-top: 0; padding-top: 0; }
  .st-bg-paper .st-stat { border-color: rgba(20,17,14,0.18); }
}

/* shared intro/outro of the editorial image blocks — always container-bound,
   even when the photo row itself runs edge to edge */
.st-trio-headwrap { max-width: var(--container); margin: 0 auto 38px; padding: 0 var(--gutter); }
.st-trio-headwrap-below { margin-bottom: 0; margin-top: 30px; }
.st-trio-head .eyebrow { display: block; }
.st-trio-head h2 { margin-top: 12px; }
.st-trio-head .st-body { margin-top: 16px; max-width: 620px; }

/* image_trio — 2–4 portrait photos side by side */
.st-trio-grid { display: grid; gap: clamp(10px, 1.2vw, 18px); grid-template-columns: repeat(3, 1fr); align-items: start; }
.st-trio-n2 .st-trio-grid { grid-template-columns: repeat(2, 1fr); }
.st-trio-n4 .st-trio-grid { grid-template-columns: repeat(4, 1fr); }
.st-trio-bleed { padding: 0 clamp(10px, 1.2vw, 18px); }
.st-trio-cell, .st-duo-cell { margin: 0; }
.st-trio-media, .st-duo-media { overflow: hidden; background: #17140f; border-radius: var(--r-md); }
.st-trio-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.st-trio-r23 .st-trio-media img { aspect-ratio: 2 / 3; }
.st-trio-r11 .st-trio-media img { aspect-ratio: 1 / 1; }

/* image_duo — large + small photo, optional magazine offset on the smaller one */
.st-duo-grid { display: grid; gap: clamp(18px, 2.6vw, 36px); grid-template-columns: 7fr 5fr; align-items: start; }
.st-duo-right .st-duo-grid { grid-template-columns: 5fr 7fr; }
.st-duo-even .st-duo-grid { grid-template-columns: 1fr 1fr; }
.st-duo-media img { width: 100%; object-fit: cover; display: block; }
.st-duo-left .st-duo-cell:nth-child(1) .st-duo-media img,
.st-duo-right .st-duo-cell:nth-child(2) .st-duo-media img { aspect-ratio: 4 / 3; }
.st-duo-left .st-duo-cell:nth-child(2) .st-duo-media img,
.st-duo-right .st-duo-cell:nth-child(1) .st-duo-media img,
.st-duo-even .st-duo-media img { aspect-ratio: 3 / 4; }
.st-duo-left.st-duo-offset .st-duo-cell:nth-child(2),
.st-duo-right.st-duo-offset .st-duo-cell:nth-child(1),
.st-duo-even.st-duo-offset .st-duo-cell:nth-child(2) { margin-top: clamp(40px, 7vw, 110px); }

/* video_feature — video + editorial copy beside or stacked */
.st-vf-grid { display: grid; gap: clamp(28px, 3.5vw, 56px); grid-template-columns: 5fr 7fr; align-items: center; }
.st-vf-left .st-vf-grid { grid-template-columns: 7fr 5fr; }
.st-vf-right .st-vf-media { order: 2; }
.st-vf-media { margin: 0; min-width: 0; }
.st-vf-video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: #000; border-radius: var(--r-md); }
.st-vf-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000; border-radius: var(--r-md); }
.st-vf-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.st-vf-stack .st-vf-video, .st-vf-stack .st-vf-frame { aspect-ratio: 16 / 9; }
.st-vf-copy .eyebrow { display: block; }
.st-vf-copy h2 { margin-top: 12px; }
.st-vf-copy .st-body { margin-top: 18px; max-width: 620px; }
.st-vf-cta { margin-top: 28px; }
/* stacked: copy and media live in sibling wrapper divs (container / bleed) */
.st-vf-stack > div + div { margin-top: 34px; }
/* full width: stacked = media edge to edge; side = grid edge to edge, copy padded */
.st-vf.st-vf-w-full { padding-left: 0; padding-right: 0; }
.st-vf-bleed { padding: 0; }
.st-vf-grid.st-vf-fullgrid { gap: 0; }
.st-vf-grid.st-vf-fullgrid .st-vf-copy { padding: 56px var(--gutter); }
.st-vf-fullgrid .st-vf-video, .st-vf-fullgrid .st-vf-frame { height: 100%; }

@media (max-width: 860px) {
  /* trio becomes a swipe row — three stacked portraits would be a wall */
  .st-trio-grid, .st-trio-n2 .st-trio-grid, .st-trio-n4 .st-trio-grid {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
  }
  .st-trio-cell { scroll-snap-align: start; }
  .st-duo-grid, .st-duo-right .st-duo-grid, .st-duo-even .st-duo-grid { grid-template-columns: 1fr; }
  .st-duo-left.st-duo-offset .st-duo-cell:nth-child(2),
  .st-duo-right.st-duo-offset .st-duo-cell:nth-child(1),
  .st-duo-even.st-duo-offset .st-duo-cell:nth-child(2) { margin-top: 0; }
  .st-vf-grid, .st-vf-left .st-vf-grid { grid-template-columns: 1fr; }
  .st-vf-right .st-vf-media { order: 0; }
  .st-ch-grid.st-ch-has-idx { grid-template-columns: 1fr; gap: 10px; }
  /* gallery: lower filmstrip, calmer collage (2-col rhythm), 2-col masonry */
  .st-gal-carousel .st-gal-cell img, .st-gal-carousel .st-gal-cell video { height: clamp(240px, 42vh, 380px); max-width: 86vw; }
  .st-gal-collage .st-gal-track { grid-template-columns: 1fr 1fr; gap: 14px; }
  .st-gal-collage .st-gal-cell { grid-column: auto !important; margin-top: 0 !important; }
  .st-gal-collage .st-gal-cell:nth-child(even) { margin-top: 22px !important; }
  .st-gal-masonry .st-gal-track, .st-gal-masonry.st-gal-cols-4 .st-gal-track { columns: 2; column-gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   Design language system — interactive wheel (home)
   ═══════════════════════════════════════════════════════════ */
/* seamless — no own background; blends with the surrounding (dark) home sections */
.dls { position: relative; color: #fff; padding: 54px 0 62px; }
.dls::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 52% at 50% 46%, rgba(200,38,44,0.07), transparent 72%); }
/* two-column: editorial intro left, interactive wheel right */
.dls-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(250px, 26%) 1fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.dls-intro { max-width: 440px; }
.dls-intro h2 { margin-top: 14px; }
.dls-lead { margin-top: 20px; color: rgba(255,255,255,0.72); font-size: 16px; line-height: 1.72; max-width: 42ch; }
.dls-meta { margin-top: 30px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.dls-meta-num { color: var(--brand-hi); }
.dls-stage { position: relative; z-index: 1; width: 100%; max-width: 940px; aspect-ratio: 1; margin: 0; justify-self: center; }
@media (max-width: 980px) {
  .dls-layout { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .dls-intro { max-width: none; margin: 0 auto; }
  .dls-lead { margin-left: auto; margin-right: auto; }
  .dls-stage { margin: 0 auto; max-width: min(560px, 88vw); }
}
/* animated "hover me" hint over the wheel (desktop mirror of mobile .m-cwheel-hint) */
.dls-hint { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; gap: 9px; width: max-content;
  padding: 8px 15px; border-radius: 999px; color: #fff; pointer-events: none;
  background: rgba(12,10,8,0.55); border: 1px solid rgba(255,255,255,0.2); transition: opacity .34s ease; }
.dls-hint.is-out { opacity: 0; }
.dls-hint-ico { display: inline-flex; transform-origin: 50% 50%; animation: dlsHintSpin 2.4s linear infinite; }
.dls-hint-ico svg { width: 18px; height: 18px; display: block; }
.dls-hint-cap { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
@keyframes dlsHintSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (max-width: 768px) { .dls-hint { display: none; } }

/* The building/home the hovered collection is meant for — ONE square panel centred
   under the wheel, shown on desktop AND mobile. The wheel column stacks stage + panel;
   the stage keeps its own width rules (mobile.css forces it to 100vw), so the column
   must not constrain it. */
/* Wheel + photo stack, shifted RIGHT as a unit. The shift is `margin-left: auto` on the
   COLUMN, not `align-items: flex-end` on its children — the stage is a square box whose
   visible ring is centred inside it, so right-aligning the children flushed the photo to
   the box edge while the wheel stayed optically centred, and the two read as crooked.
   Centring both inside a right-pushed column keeps them on one vertical axis. */
.dls-wheelcol { display: flex; flex-direction: column; align-items: center; min-width: 0;
  width: min(100%, 940px); margin-left: auto;
  /* At full size the wheel already fills its grid track, so `margin-left: auto` has no
     slack to work with. The nudge right is therefore a TRANSFORM — it does not change
     layout width, so the section cannot grow a horizontal scrollbar; the section clips
     the x overflow below as a belt-and-braces. */
  transform: translateX(clamp(0px, 2.6vw, 48px)); }
/* One column below 980px — centre the whole stack again. Must live AFTER the base rule:
   the ≤980px block further up the file has equal specificity, so source order decides. */
@media (max-width: 980px) { .dls-wheelcol { margin-left: auto; margin-right: auto; transform: none; } }
/* Home wheel only (NOT the shared .dls used by the domov / domhub wheels). Generous
   bottom padding so the NEXT chapter starts well clear of the photo. */
/* Bottom padding carries the 22px standoff frame PLUS the gap itself, so the visible
   space under the frame stays the ~35px the photo alone had. */
#design-wheel { padding-top: 34px; padding-bottom: clamp(40px, 3.6vw, 62px); z-index: 2;
  overflow-x: clip; }   /* `clip`, not `hidden` — keeps overflow-y visible for the shadow */
/* The stage is a SQUARE box while the wheel's lowest label sits well above its bottom
   edge, leaving a ~18% dead band. Pull the panel up through it, or the photo reads as
   a detached element adrift instead of belonging under the wheel. */
/* NOT `overflow: hidden` — the standoff frame below is drawn OUTSIDE the box and would
   be clipped away. The photo is rounded by inheriting the radius instead. */
.dls-house { position: relative; z-index: 3;
  /* ~25% down from the 42vw it was — the reduction belongs to the PHOTO; the wheel
     itself stays at full size. */
  width: clamp(300px, 31.5vw, 520px); aspect-ratio: 16 / 9;
  margin-top: clamp(-58px, -3vw, -12px);
  pointer-events: none; border-radius: var(--r-md);
  /* Hard edges, lifted off the page by a shadow underneath — deliberately NOT a soft
     edge blend. Two layers: a wide diffuse cast biased downwards so the photo reads as
     hovering over the section it overlaps, plus a tight one to seat the bottom edge. */
  box-shadow: 0 42px 80px -26px rgba(0,0,0,0.85), 0 10px 26px -14px rgba(0,0,0,0.7);
  opacity: 0; transform: scale(0.985); transition: opacity .42s ease, transform .42s cubic-bezier(.2,.7,.3,1); }
/* Standoff frame — the same hairline as the wheel's outer ring (.dls-ring), held away
   from the photo the way that ring is held away from the centre medallion, rather than
   hugging the edge. Negative inset puts it outside the box; the radius grows by the
   same amount so the corners stay concentric. */
/* Standoff frame + its marks, drawn as SVG rather than borders/gradients. The marks copy
   `.dls-mark` — the short fat arcs the wheel puts on its ring at each collection —
   EXACTLY: measured off the live wheel at 30.5px long, 3.2 stroke, round caps, α .55,
   on a 166.6px period. A CSS `dashed` border cannot set dash length, and repeating
   gradients cannot round the dash ends; both read as a dense perforation instead of the
   wheel's sparse, capsule-shaped marks.
   NO viewBox on purpose — an SVG without one uses CSS pixels as its user units, so the
   dash lengths and stroke stay undistorted whatever the box's aspect ratio. `overflow:
   visible` keeps the half of the stroke that straddles the 100%×100% rect edge. */
/* EXPLICIT width/height, not `inset: -22px`: an <svg> carries an intrinsic 300×150 and
   insets alone do not stretch it, so the frame silently rendered at 300×150 and the
   marks bunched up inside it. */
.dls-house-frame { position: absolute; top: -22px; left: -22px;
  width: calc(100% + 44px); height: calc(100% + 44px);
  overflow: visible; pointer-events: none; }
.dls-house-frame rect { fill: none; rx: calc(var(--r-md) + 22px); }
.dls-house-frame-line { stroke: rgba(255,255,255,0.16); stroke-width: 1.22; }
/* Same geometry as the wheel's `.dls-mark` (30.5 long on a 166.6 period, round caps),
   but quieter: on the wheel a mark is a hover target on a big ring, here it is pure
   decoration beside a bright photo and at α.55/3.2 it shouted. */
.dls-house-frame-marks { stroke: rgba(255,255,255,0.3); stroke-width: 2.2;
  stroke-linecap: round; stroke-dasharray: 30.5 136.1; }
.dls-house.is-on { opacity: 1; transform: none; }
/* ABSOLUTE, not in-flow: with `height: 100%` against the container's auto height the
   percentage resolves to auto, so the browser fell back to the photo's own intrinsic
   ratio and the box came out 1.47 instead of the declared 16:9. */
.dls-house-media { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit;
  object-fit: cover; display: block; }
/* One <img> per family stays mounted and is toggled with [hidden] (see showHouse),
   so a photo is never re-requested while its first request is still in flight.
   The `display: block` above outranks the UA rule for [hidden] — without this line
   every family's photo would stack up visible on top of each other. */
.dls-house-media[hidden] { display: none; }
/* placeholder until a real photo is uploaded in the admin */
.dls-house.is-placeholder {
  background: linear-gradient(150deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015)); }
.dls-house-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.32); }
.dls-house-ph svg { width: 22%; height: 22%; display: block; }

.dls-svg { width: 100%; height: 100%; display: block; overflow: visible; }

.dls-ring { fill: none; stroke: rgba(255,255,255,0.16); stroke-width: 1.3; }
.dls-axis { fill: rgba(255,255,255,0.42); font-family: var(--mono); font-size: 17px;
  letter-spacing: 0.26em; text-transform: uppercase; text-anchor: middle; }
.dls-tick { stroke: rgba(255,255,255,0.22); stroke-width: 1; transition: stroke .3s; }
.dls-mark { fill: none; stroke: rgba(255,255,255,0.55); stroke-width: 3.4; stroke-linecap: round; transition: stroke .3s, stroke-width .3s; }
.dls-year { fill: rgba(255,255,255,0.45); font-family: var(--mono); font-size: 15px; letter-spacing: 0.06em; transition: fill .3s; }
.dls-name { fill: #fff; font-family: var(--sans); font-weight: 600; font-size: 27px; letter-spacing: 0.04em; transition: fill .3s; }

.dls-fam.is-link { cursor: pointer; }
.dls-fam { transition: opacity .35s ease; }
.dls-stage.has-hover .dls-fam:not(.is-active) { opacity: 0.26; }
.dls-fam.is-active .dls-mark { stroke: var(--brand); stroke-width: 5.4; }
.dls-fam.is-active .dls-tick { stroke: rgba(200,38,44,0.85); }
.dls-fam.is-active .dls-year { fill: rgba(255,255,255,0.85); }
.dls-fam.is-link:focus { outline: none; }
.dls-fam.is-link:focus-visible .dls-mark { stroke: var(--brand); }

/* centre overlay */
.dls-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; pointer-events: none; padding: 0; }
.dls-tagline { font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 2.3vw, 30px); line-height: 1.34; color: #fff; max-width: 54%; }
.dls-tagline .italic { font-style: italic; }
.dls-detail { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: dlsFade .4s ease; }

/* hover medallion — the family's kitchen reel plays inside the circle */
.dls-vid { position: relative; width: 52%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  display: block; pointer-events: auto; text-decoration: none; box-shadow: 0 30px 70px -34px rgba(0,0,0,0.9); }
.dls-vid-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dls-vid::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 36%, transparent 46%, rgba(8,6,5,0.5) 100%),
              linear-gradient(to top, rgba(8,6,5,0.86), transparent 44%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.dls-vid-cap { position: absolute; left: 0; right: 0; bottom: 16%; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 7px; }
.dls-vid .dls-d-name { font-size: clamp(26px, 3.4vw, 40px); }
.dls-vid .dls-d-cta { color: #fff; }
.dls-vid:hover .dls-d-cta, .dls-vid:focus-visible .dls-d-cta { color: var(--brand); }
.dls-d-meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.dls-d-name { font-family: var(--serif); font-size: clamp(36px, 5.2vw, 58px); line-height: 1; }
.dls-d-cta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); display: inline-flex; align-items: center; gap: 7px; }
.dls-d-cta svg { width: 15px; height: 15px; }
.dls-d-soon { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.38); }
@keyframes dlsFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* entrance (ring draws, families + centre fade in) */
.dls .dls-ring { stroke-dasharray: 1772; stroke-dashoffset: 1772; }
.dls.in .dls-ring { animation: dlsDraw 1.5s cubic-bezier(.6,.05,.2,1) .1s forwards; }
@keyframes dlsDraw { to { stroke-dashoffset: 0; } }
.dls .dls-fams, .dls .dls-axis, .dls .dls-center { opacity: 0; transition: opacity .9s ease; }
.dls.in .dls-fams { opacity: 1; transition-delay: .55s; }
.dls.in .dls-axis { opacity: 1; transition-delay: .35s; }
.dls.in .dls-center { opacity: 1; transition-delay: .7s; }

@media (max-width: 600px) {
  .dls { padding: 60px 0 66px; }
  .dls-stage { width: 94vw; }
  .dls-name { font-size: 30px; } .dls-year { font-size: 17px; } .dls-axis { font-size: 20px; }
  .dls-tagline { max-width: 58%; font-size: 19px; }
}

/* ═══ TEST: "Celý domov" navigation hub (test-hub.html) ═══ */
.domhub { position: relative; color: #fff; padding: 96px 0 104px; overflow: hidden; }
.domhub::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 58% at 72% 42%, rgba(200,38,44,0.12), transparent 70%); }
.domhub-grid { position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 84px); align-items: center; }
.domhub-aside { max-width: 470px; }
.domhub-title { margin: 16px 0 18px; }
.domhub-copy { color: rgba(255,255,255,0.7); margin-bottom: 30px; max-width: 42ch; }
.domhub-list { display: flex; flex-direction: column; }
.domhub-link { display: flex; align-items: center; gap: 18px; padding: 17px 0;
  border-top: 1px solid rgba(255,255,255,0.12); color: #fff;
  transition: padding-left .35s ease, color .3s ease, opacity .3s ease; }
.domhub-link:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.domhub-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.4); width: 22px; transition: color .3s ease; }
.domhub-tx { display: flex; flex-direction: column; flex: 1; gap: 3px; }
.domhub-name { font-family: var(--serif); font-size: clamp(21px, 2.2vw, 27px); line-height: 1; }
.domhub-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.45); }
.domhub-arr { color: rgba(255,255,255,0.32); transition: color .3s ease, transform .3s ease; }
.domhub-arr svg { width: 16px; height: 16px; }
.domhub-link.is-soon { opacity: 0.5; cursor: default; }
.domhub.has-hover .domhub-link:not(.is-active) { opacity: 0.4; }
.domhub-link.is-active { padding-left: 12px; }
.domhub-link.is-active .domhub-num { color: var(--brand); }
.domhub-link.is-active .domhub-arr { color: var(--brand); transform: translateX(4px); }
.domhub-ring { display: flex; justify-content: center; }
.domhub-ring .dls-stage { width: min(600px, 100%); }
.domhub-ring .dls-fams { opacity: 1; }        /* no draw-in dependency outside .dls */
@media (max-width: 900px) {
  .domhub { padding: 64px 0 72px; }
  .domhub-grid { grid-template-columns: 1fr; gap: 36px; }
  .domhub-ring { order: -1; }
  .domhub-ring .dls-stage { width: min(440px, 86vw); }
}

/* ═══ TEST: cinematic "Celý domov" worlds band (test-worlds.html) ═══ */
.worlds { position: relative; min-height: 100vh; display: flex; color: #fff; overflow: hidden; }
.worlds-bg { position: absolute; inset: 0; z-index: 0; }
.wbg-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 900ms ease; }
.wbg-layer.is-on { opacity: 1; }
.wbg-default { opacity: 1; background:
  radial-gradient(120% 90% at 25% 18%, #2b2118 0%, #15110d 55%, #0a0908 100%); }
.wbg-default.dim { opacity: 0; }
.wbg-ambient { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.5; transition: opacity .6s ease; }
.worlds.has-hover .wbg-ambient { opacity: 0.22; }
.worlds-veil { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.18) 38%, rgba(10,9,8,0.82) 100%); }
.worlds-inner { position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; justify-content: space-between; padding: 52px 0 46px; }
.worlds-title { max-width: 15ch; margin-top: 20px; min-height: 1.1em;
  font-size: clamp(38px, 6vw, 92px); line-height: 1; transition: opacity .35s ease; }
.worlds-sub { margin-top: 18px; max-width: 44ch; color: rgba(255,255,255,0.74);
  font-size: 15px; line-height: 1.65; }
.worlds-list { display: flex; border-top: 1px solid rgba(255,255,255,0.18); margin-top: clamp(26px, 4vh, 44px); }
.worlds-item { flex: 1; display: flex; flex-direction: column; gap: 14px;
  padding: 28px 28px 6px 0; color: #fff; transition: opacity .3s ease; }
.worlds-item + .worlds-item { padding-left: 30px; border-left: 1px solid rgba(255,255,255,0.16); }
.worlds-idx { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: rgba(255,255,255,0.5); }
.worlds-name { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 50px); line-height: 1; }
.worlds-cta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); display: inline-flex; align-items: center; gap: 8px;
  transition: color .3s ease, gap .3s ease; }
.worlds-cta svg { width: 14px; height: 14px; }
.worlds.has-hover .worlds-item:not(.is-active) { opacity: 0.42; }
.worlds-item.is-active .worlds-cta { color: var(--brand); gap: 13px; }
@media (max-width: 800px) {
  .worlds { min-height: 0; }
  .worlds-inner { padding: 48px 0 44px; }
  .worlds-list { flex-direction: column; margin-top: 32px; }
  .worlds-item { padding: 20px 0; gap: 10px; }
  .worlds-item + .worlds-item { padding-left: 0; border-left: none; border-top: 1px solid rgba(255,255,255,0.16); }
}

/* ══════════════════ Edgy: front-colour configurator ══════════════════ */
/* Lives inside the kitchen product page (renderProduct, p.configurator).    */
/* Left = the room render with pixel-aligned colour overlays that crossfade; */
/* right = a rotary dial ("kolečko") of front colours.                       */
.edgy-config {
  border-top: 1px solid var(--line);
  padding: 120px 0 130px;
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(200,38,44,0.07), transparent 58%),
    var(--bg);
}
.ec-head { max-width: 760px; margin: 0 auto; text-align: center; }
.ec-head h2 { margin-top: 16px; }
.ec-sub { margin: 18px auto 0; max-width: 560px; color: var(--text-mute); font-size: 16px; line-height: 1.7; }

.ec-stage-wrap {
  margin-top: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr);
  gap: 56px;
  align-items: center;
}

/* — left: the kitchen — */
.ec-stage {
  position: relative;
  aspect-ratio: 1448 / 1086;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev-1);
  box-shadow: 0 44px 100px -55px rgba(0,0,0,0.9);
}
.ec-base, .ec-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  -webkit-user-drag: none; user-select: none;
}
.ec-overlay { opacity: 0; transition: opacity 0.55s ease; will-change: opacity; }
.ec-overlay.active { opacity: 1; }
.ec-tag {
  position: absolute; left: 20px; bottom: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text); padding: 8px 14px; border-radius: 999px;
  background: rgba(20,17,13,0.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(245,238,224,0.12);
}

/* — right: the dial / kolečko — */
.ec-dial-wrap { display: flex; justify-content: center; }
.ec-dial {
  position: relative;
  width: 340px; height: 340px;
  --orbit: 122px;            /* swatch-centre radius */
}
.ec-ring {
  position: absolute; inset: 16px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(245,238,224,0.04), inset 0 30px 70px -45px rgba(0,0,0,0.85);
}
.ec-ring::after {
  content: ''; position: absolute; inset: -14px;
  border-radius: 50%; border: 1px dashed rgba(245,238,224,0.09);
}
.ec-needle {
  position: absolute; left: 50%; bottom: 50%;
  width: 2px; height: var(--orbit); margin-left: -1px;
  transform-origin: 50% 100%;
  transform: rotate(var(--t-active, 0deg));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  background: linear-gradient(to top, transparent, var(--brand));
  border-radius: var(--r-xs); pointer-events: none;
}
.ec-swatch {
  position: absolute; top: 50%; left: 50%;
  width: 64px; height: 64px; margin: -32px;
  border: 0; background: none; padding: 0; cursor: pointer;
  transform: rotate(var(--t)) translateY(calc(-1 * var(--orbit))) rotate(calc(-1 * var(--t)));
}
.ec-dot {
  display: block; width: 46px; height: 46px; margin: 9px;
  border-radius: 50%; background: var(--sw);
  border: 1px solid rgba(245,238,224,0.18);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.7), inset 0 2px 6px rgba(255,255,255,0.12);
  outline: 2px solid transparent; outline-offset: 4px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, outline-color 0.3s ease;
}
.ec-swatch:hover .ec-dot { transform: scale(1.08); }
.ec-swatch.active .ec-dot {
  transform: scale(1.14);
  outline-color: var(--brand);
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.7), 0 0 0 4px rgba(200,38,44,0.13), inset 0 2px 6px rgba(255,255,255,0.14);
}
.ec-swatch:focus-visible { outline: none; }
.ec-swatch:focus-visible .ec-dot { outline-color: var(--brand-hi); }
.ec-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 150px; text-align: center; pointer-events: none;
}
.ec-c-label { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); }
.ec-c-name { display: block; margin-top: 7px; font-family: var(--serif); font-weight: 300; font-size: 22px; line-height: 1.15; color: var(--text); }

@media (max-width: 900px) {
  .ec-stage-wrap { grid-template-columns: 1fr; gap: 36px; }
  .ec-dial-wrap { order: 2; }
  .edgy-config { padding: 84px 0 92px; }
}
@media (max-width: 560px) {
  .ec-dial { width: 280px; height: 280px; --orbit: 100px; }
  .ec-swatch { width: 56px; height: 56px; margin: -28px; }
  .ec-dot { width: 40px; height: 40px; margin: 8px; }
}

/* ── Naše realizace (studio block) ─────────────────────────────── */
.st-realizace .st-real-head { margin-bottom: 32px; }
.st-real-grid { display: grid; gap: 24px; grid-template-columns: repeat(var(--rcols, 3), 1fr); }
.st-real-cols-2 .st-real-grid { --rcols: 2; }
.st-real-cols-3 .st-real-grid { --rcols: 3; }
@media (max-width: 900px) { .st-real-grid { --rcols: 2; } }
@media (max-width: 600px) { .st-real-grid { --rcols: 1; } }
.st-real-card { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md);
  overflow: hidden; transition: transform .35s ease, border-color .35s ease; }
.st-real-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.22); }
.st-real-card.is-draft { opacity: .72; }
.st-real-badge { position: absolute; top: 12px; left: 12px; z-index: 1;
  padding: 4px 10px; border-radius: var(--r-xs); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(4px); }
.st-real-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(255,255,255,.05); }
.st-real-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.st-real-card:hover .st-real-photo img { transform: scale(1.04); }
.st-real-card.is-noimg .st-real-photo { min-height: 180px; }
.st-real-cap { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; }
.st-real-title { font-family: Fraunces, serif; font-size: 1.25rem; line-height: 1.2; }
.st-real-excerpt { font-size: .9rem; opacity: .7; }
.st-real-go { position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 18px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .45s, transform .45s, background .3s, border-color .3s; }
.st-real-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.st-real-card:hover .st-real-go { opacity: 1; transform: translateY(0); background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.45); }

/* ═══════════════════════════ Dvířka / Korpusy ═══════════════════════════ */
/* /dvirka Kapitola I uses 4 family cards — a quad variant of .triptych with a
   fourth hover-expand slot. Reuses all .tript-card visuals. /korpusy stays on
   the 3-card .triptych. */
/* ⚠ Klidový stav se píše VYPSANĚ, ne `repeat(N, 1fr)`. Prohlížeč mezi
   `repeat()` a vypsaným seznamem stop NEinterpoluje, takže první najetí myší
   skočilo skokem a teprve další (vypsaný → vypsaný) se animovalo — přesně to,
   co bylo vidět na /obkladove-panely proti dvoukartovému pásu větví, který
   vypsaný `1fr 1fr` má. Změřeno 1. 9. 2026: kolekce byly na cílové šířce už
   v 50 ms, větve šly 703 → 773 → 812 → 818 px. Základní `.triptych` výš
   v souboru je vypsaný ze stejného důvodu. */
.triptych.is-quad { grid-template-columns: 1fr 1fr 1fr 1fr; }
.triptych.is-quad.has-hover-0 { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.triptych.is-quad.has-hover-1 { grid-template-columns: 1fr 1.5fr 1fr 1fr; }
.triptych.is-quad.has-hover-2 { grid-template-columns: 1fr 1fr 1.5fr 1fr; }
.triptych.is-quad.has-hover-3 { grid-template-columns: 1fr 1fr 1fr 1.5fr; }
.triptych.is-quad .tript-card { height: min(64vh, 620px); min-height: 460px; }
/* A quarter-width card is ~320px, where the default meta row wraps both the
   count and the CTA onto two lines — tighten the footer for the quad only. */
.triptych.is-quad .tript-meta { left: 24px; right: 24px; bottom: 24px; }
.triptych.is-quad .tript-meta h3 { font-size: clamp(30px, 3vw, 48px); }
.triptych.is-quad .tript-meta .row { gap: 10px; }
.triptych.is-quad .tript-meta .row .price { font-size: 12px; white-space: nowrap; }
.triptych.is-quad .tript-meta .cta {
  padding: 10px 14px; letter-spacing: 0.14em; gap: 8px; white-space: nowrap;
}

/* /obkladove-panely Kapitola I má PĚT karet (pět kolekcí ROCKO) — quint
   varianta .triptych. Karty jsou užší, takže mají nižší minimum než quad,
   jinak by z nich byly svislé proužky. Pod 980px se to stejně jako ostatní
   varianty skládá do jednoho sloupce (viz @media níž v souboru). */
.triptych.is-quint { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
/* Šest sloupců — pás materiálů na /pracovni-desky (laminát se dělí na
   dřevotřísku a kompakt, k tomu masiv a tři kamenné). Stopy VYPSANÉ, ne
   `repeat()`: mezi repeat() a vypsaným seznamem prohlížeč neinterpoluje
   a první najetí myší by skočilo skokem. */
.triptych.is-sext { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
/* Sedm sloupců — sedm kategorií dvířek (Lamino, Xtreme, Akryl, Dýha, Lak,
   Masiv, Fólie). Stopy VYPSANÉ, ne `repeat()`. */
.triptych.is-sept { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.triptych.is-sept.has-hover-0 { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.triptych.is-sept.has-hover-1 { grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr 1fr 1fr; }
.triptych.is-sept.has-hover-2 { grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr 1fr 1fr; }
.triptych.is-sept.has-hover-3 { grid-template-columns: 1fr 1fr 1fr 1.5fr 1fr 1fr 1fr; }
.triptych.is-sept.has-hover-4 { grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr 1fr 1fr; }
.triptych.is-sept.has-hover-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1.5fr 1fr; }
.triptych.is-sept.has-hover-6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr; }
.triptych.is-sept .tript-card { height: min(48vh, 460px); min-height: 330px; }
.triptych.is-sept .tript-meta { left: 16px; right: 16px; bottom: 16px; }
.triptych.is-sept .tript-meta h3 { font-size: clamp(18px, 1.5vw, 26px); }
.triptych.is-sept .tript-meta .lead { display: none; }
@media (max-width: 1300px) { .triptych.is-sept { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 860px)  { .triptych.is-sept { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .triptych.is-sept { grid-template-columns: 1fr; } }
.triptych.is-sext.has-hover-0 { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr; }
.triptych.is-sext.has-hover-1 { grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr 1fr; }
.triptych.is-sext.has-hover-2 { grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr 1fr; }
.triptych.is-sext.has-hover-3 { grid-template-columns: 1fr 1fr 1fr 1.5fr 1fr 1fr; }
.triptych.is-sext.has-hover-4 { grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr 1fr; }
.triptych.is-sext.has-hover-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1.5fr; }
.triptych.is-sext .tript-card { height: min(52vh, 500px); min-height: 360px; }
.triptych.is-sext .tript-meta { left: 18px; right: 18px; bottom: 18px; }
.triptych.is-sext .tript-meta h3 { font-size: clamp(20px, 1.8vw, 30px); }
@media (max-width: 1100px) { .triptych.is-sext { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .triptych.is-sext { grid-template-columns: 1fr; } }
.triptych.is-quint.has-hover-0 { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
.triptych.is-quint.has-hover-1 { grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr; }
.triptych.is-quint.has-hover-2 { grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr; }
.triptych.is-quint.has-hover-3 { grid-template-columns: 1fr 1fr 1fr 1.5fr 1fr; }
.triptych.is-quint.has-hover-4 { grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr; }
.triptych.is-quint .tript-card { height: min(58vh, 560px); min-height: 400px; }
.triptych.is-quint .tript-meta { left: 20px; right: 20px; bottom: 20px; }
.triptych.is-quint .tript-meta h3 { font-size: clamp(24px, 2.2vw, 38px); }

/* Pás pěti kolekcí se hýbe jinak než tříkartový triptych na home, i když dědí
   týž přechod. Změřeno: doma se najetá karta posune o 177 px a ustoupí jí DVĚ
   sousední (483→412 px); tady se posune o 103 px a ustoupí jí ČTYŘI naráz
   (283→257 px). Stejných 700 ms tak nad pětkou působí nervózně — nejvíc při
   návratu, kdy se všech pět srovná zpět najednou. Nejrychlejší prvek celého
   stacku byl navíc text (500 ms plochým `ease`), který se na 283px kartě
   přelévá přes několik řádků.

   Proto je tady přechod delší a ZÁMĚRNĚ ASYMETRICKÝ — rozjezd svižný, návrat
   klidnější. Asymetrie stojí na tom, že prohlížeč čte dobu ze stavu, DO
   kterého přechází: základní pravidlo platí pro zmenšování, pravidlo
   s `has-hover-*` pro zvětšování. Home (`.triptych` bez `is-quint`) zůstává
   nedotčený. */
.triptych.is-quint { transition: grid-template-columns 1150ms cubic-bezier(.22,1,.36,1); }
.triptych.is-quint[class*="has-hover-"] { transition: grid-template-columns 820ms cubic-bezier(.22,1,.36,1); }
.triptych.is-quint .tript-meta .lead {
  transition: max-height 820ms cubic-bezier(.22,1,.36,1), opacity 820ms ease, margin 820ms ease;
}
.triptych.is-quint .tript-card:hover .tript-meta .lead {
  transition: max-height 620ms cubic-bezier(.22,1,.36,1), opacity 620ms ease, margin 620ms ease;
}

/* ── /obkladove-panely — Vlastnosti (ikonové karty) ───────────────────────── */
.panel-feats .pf-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.6vw, 26px); margin-top: clamp(30px, 4vw, 52px);
}
.pf-card {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(20px, 2vw, 28px);
  background: rgba(245, 238, 224, 0.025);
}
/* Ikona dědí barvu z karty a je TAHOVÁ — `box-sizing: content-box` je tu
   povinné: globální `* { box-sizing: border-box }` by padding složil dovnitř
   kresby a tenké tahy by se slily (týž problém, jaký kdysi srazil .st-fs-play). */
.pf-ico { display: block; width: 40px; height: 40px; color: var(--brand); }
.pf-ico svg {
  width: 100%; height: 100%; box-sizing: content-box;
  fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.pf-title { margin-top: 16px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.pf-text { margin-top: 8px; color: var(--text-mute); font-size: 14px; line-height: 1.65; }

/* ── /obkladove-panely — Materiál (příběh + čísla + montáž) ───────────────── */
.panel-mat .pm-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 5vw, 80px); align-items: start;
}
.panel-mat .pm-copy p { margin-top: 18px; max-width: 54ch; line-height: 1.75; }
.pm-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
}
.pm-fact { background: var(--bg-paper); padding: 18px 20px; }
.pm-fact dt {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-mute);
}
.pm-fact dd { margin-top: 6px; font-family: var(--serif); font-size: 20px; }
.pm-steps { margin-top: clamp(22px, 3vw, 34px); }
.pm-steps-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.pm-steps-head svg {
  width: 20px; height: 20px; box-sizing: content-box; flex: none;
  fill: none; stroke: var(--brand); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.pm-steps ol { margin-top: 14px; padding-left: 0; list-style: none; counter-reset: pmstep; }
.pm-steps li {
  counter-increment: pmstep; position: relative;
  padding: 10px 0 10px 40px; border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.55;
}
.pm-steps li::before {
  content: counter(pmstep, decimal-leading-zero);
  position: absolute; left: 0; top: 11px;
  font-family: var(--mono); font-size: 12px; color: var(--brand);
}

/* ── Materiál řady ROCKO na DETAILU panelu ────────────────────────────────
   Obsah je pro všech 29 dekorů STEJNÝ — popisuje materiál, ne kresbu. Proto
   má sekce vlastní hlavičku, která to říká nahlas: bez ní by opakovaný text
   působil jako duplicitní obsah, ne jako technický list řady. */
.wtd2-panelmat { margin-top: clamp(44px, 6vw, 76px); padding-top: clamp(30px, 4vw, 46px); border-top: 1px solid var(--line); }
.pmx-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.pmx-note { color: var(--text-mute); font-size: 13px; line-height: 1.6; max-width: 62ch; }
/* Nadpis materiálového bloku na detailu dekoru. Obkladové panely ho nemají —
   tam je místo něj `.pmx-note`, protože celá řada ROCKO je jeden materiál. */
.pmx-title { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; margin: 0; }

.pmx-copy { margin-top: clamp(26px, 3.5vw, 40px); columns: 2; column-gap: clamp(30px, 4vw, 56px); }
.pmx-copy p { break-inside: avoid; margin: 0 0 14px; line-height: 1.75; }

/* Údaje v jednom pásu — pod textem, ne vedle něj: čte se to jako shrnutí
   odstavců nad ním, a nevzniká úzký sloupec s dlouhým textem.
   `auto-fit` místo napevno čtyř sloupců: obkladové panely mají údaje čtyři,
   materiálový blok na detailu dekoru tři, a pevná čtyřka nechávala u tří
   prázdné okno vpravo dole. */
.pmx-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  margin-top: clamp(26px, 3.5vw, 38px);
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.pmx-fact { background: var(--bg); padding: 18px 20px; }
.pmx-fact dt { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.pmx-fact dd { margin: 6px 0 0; font-family: var(--serif); font-size: clamp(17px, 1.4vw, 21px); }

/* Vlastnosti jako dvousloupcový rejstřík, ne mřížka karet: pět položek by
   v mřížce nechalo poslední řádek roztrhaný (3 + 2). */
.pmx-feats { list-style: none; padding: 0; margin: clamp(30px, 4vw, 44px) 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(30px, 4vw, 56px); }
.pmx-feat { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.pmx-ico { flex: none; width: 26px; height: 26px; color: var(--brand); margin-top: 2px; }
.pmx-ico svg { width: 100%; height: 100%; box-sizing: content-box; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pmx-feat-body { display: flex; flex-direction: column; gap: 4px; }
.pmx-feat-body strong { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
.pmx-feat-body span { color: var(--text-mute); font-size: 13px; line-height: 1.6; }

/* Montáž vodorovně — čtyři kroky vedle sebe čtou jako postup, pod sebou jako
   další odrážkový seznam. */
.pmx-steps { margin-top: clamp(30px, 4vw, 44px); }

/* Odkazy na dokumenty od výrobce (technický list ROCKO). ⚠ Bez pravidla pro
   `svg` roste inline ikona z ICONS.arrow do celé šířky bloku — na detailu
   panelu z ní byla šipka přes celou obrazovku (nahlásila Sára 1. 9. 2026).
   Inline SVG bez width/height se chová jako blok, ne jako písmeno. */
.pmx-docs { list-style: none; padding: 0; margin: clamp(20px, 2.6vw, 30px) 0 0; display: grid; gap: 10px; }
.pmx-docs a {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.5;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-xs);
  transition: border-color .3s, background .3s;
}
.pmx-docs a:hover { border-color: var(--brand); background: rgba(255,255,255,.04); }
.pmx-docs svg {
  flex: none; width: 16px; height: 16px; box-sizing: content-box;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}

.pmx-steps-head { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.pmx-steps-head svg { width: 18px; height: 18px; box-sizing: content-box; flex: none; fill: none; stroke: var(--brand); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pmx-steps ol { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 26px); counter-reset: pmxstep; }
.pmx-steps li { counter-increment: pmxstep; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.pmx-steps li::before { content: counter(pmxstep, decimal-leading-zero); display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 11px; color: var(--brand); }

@media (max-width: 900px) {
  .pmx-copy { columns: 1; }
  .pmx-facts { grid-template-columns: 1fr 1fr; }
  /* Mezery v pásu jsou kreslené podbarvením (`gap: 1px` nad `--line`), takže
     nedoplněná poslední řádka NEzůstane prázdná — vykreslí se jako plné okno.
     U dvou sloupců to potká každý lichý počet údajů (materiálový blok má tři),
     proto poslední lichý roztáhneme přes celou šířku. Scopnuto do téhle větve:
     nad 900 px se počet sloupců řídí `auto-fit` a neúplná řádka nevzniká. */
  .pmx-facts .pmx-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pmx-feats { grid-template-columns: 1fr; }
  .pmx-steps ol { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
  .panel-feats .pf-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-mat .pm-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .panel-feats .pf-grid { grid-template-columns: 1fr; }
  .pm-facts { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .triptych.is-quad,
  .triptych.is-quad.has-hover-0, .triptych.is-quad.has-hover-1,
  .triptych.is-quad.has-hover-2, .triptych.is-quad.has-hover-3 {
    grid-template-columns: 1fr 1fr;
  }
  .triptych.is-quad .tript-card { height: 52vh; min-height: 380px; }
}
@media (max-width: 760px) {
  .triptych.is-quad,
  .triptych.is-quad.has-hover-0, .triptych.is-quad.has-hover-1,
  .triptych.is-quad.has-hover-2, .triptych.is-quad.has-hover-3 {
    grid-template-columns: 1fr;
  }
}

/* Décor detail — "Dvířka i korpus" / "Pouze dvířka" usage badge */
.fr-usage-badge {
  display: inline-block; margin-top: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(245,238,224,0.82);
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(245,238,224,0.24);
  background: rgba(245,238,224,0.06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ══════════════ Kitchen material-combination configurator ══════════════
   Immersive wheel + recolorable kitchen SVG on a living mood background.
   Wheel = mode machine (presets ↔ per-zone materials, layered rings); zone
   selection via the top tabs / clicking SVG shapes (no chunky chips). The
   mood background crossfades a blurred render + tints to the selection.
   See wireKitchenConfigurator() in app.js. */
.kc { position: relative; overflow: hidden; padding: 124px 0 124px; color: var(--text); --moodc: #2e323d; }
.kc-bg { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 85% at 50% 16%, color-mix(in srgb, var(--moodc) 30%, #15110d), #120f0c 70%);
  transition: background 1100ms ease; }
.kc-bg-layer { position: absolute; inset: -7%; background-size: cover; background-position: center;
  filter: blur(20px) brightness(.58) saturate(1.2); transform: scale(1.08); opacity: 0; transition: opacity 950ms ease; }
.kc-bg-layer.show { opacity: 1; }
.kc-bg-scrim { position: absolute; inset: 0;
  background: radial-gradient(120% 92% at 50% 22%, transparent 36%, rgba(11,9,7,.45) 72%, rgba(18,15,12,0) 90%),
    linear-gradient(rgba(11,9,7,.45), rgba(11,9,7,.26) 36%, rgba(11,9,7,.5) 60%, #120f0c 85%, #120f0c 100%); }
.kc > *:not(.kc-bg) { position: relative; z-index: 1; }

.kc-head { text-align: center; max-width: 760px; margin: 0 auto; }
.kc-head .display-m { margin-top: 10px; }
.kc-sub { margin-top: 14px; color: var(--text-mute); max-width: 600px; margin-inline: auto; }

.kc-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin-top: 34px; }
.kc-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px;
  border-radius: 30px; cursor: pointer; color: var(--text-mute); font: 500 11px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; background: transparent; border: 1px solid transparent; transition: .22s; }
.kc-tab:hover { color: var(--text); }
.kc-tab.active { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.kc-tab.active::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 5px; height: 1px; background: var(--brand); }
.kc-tab-dot { width: 14px; height: 14px; border-radius: 50%; background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,.4); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.kc-tab-dot.soon { background: repeating-linear-gradient(45deg,#3a342d,#3a342d 3px,#2a251f 3px,#2a251f 6px); }

.kc-stagewrap { display: grid; grid-template-columns: minmax(300px, .96fr) 1.30fr; gap: 64px; align-items: center; margin-top: 58px; }
.kc-wheel-col { position: relative; min-width: 0; }

.kc-wheel { position: relative; width: 100%; height: min(82vh, 720px); overflow: hidden; user-select: none; touch-action: none; }
.kc-arc { position: absolute; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; pointer-events: none; }
.kc-orbs { position: absolute; inset: 0; }
.kc-orb { position: absolute; left: 0; top: 0; width: 120px; height: 120px; border-radius: 16px;
  background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.28); cursor: pointer; padding: 0;
  box-shadow: 0 8px 22px rgba(0,0,0,.45); transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .55s ease, border-color .25s, box-shadow .25s; will-change: transform, opacity; }
.kc-orb.is-mat { border-radius: 50%; width: 90px; height: 90px; }
.kc-orb.soon { background: repeating-linear-gradient(45deg, #3a342d, #3a342d 6px, #2a251f 6px, #2a251f 12px); }
/* photo-mode Kombinace orb = the Edgy shape filled with the combo's REAL material
   textures, on a soft heavy-white tint of the combo colour (bg set inline per orb) */
.kc-orb.has-svg { display: grid; place-items: center; overflow: hidden; border-color: rgba(0,0,0,.16); box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 8px 22px rgba(0,0,0,.4); }
.kc-orb-svg { width: 78%; height: 78%; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.kc-orb-svg svg { width: 100%; height: 100%; display: block; }
.kc-orb.has-svg.is-focus { border-color: var(--brand); }
.kc-orb:hover { border-color: #fff; }
.kc-orb.is-focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(200,38,44,.45), 0 12px 30px rgba(0,0,0,.55); }
/* Kombinace orb = official Barevné rodiny tile (its own bg + full shape) */
.kc-orb.has-tile { background-size: cover; background-position: center; border-color: rgba(255,255,255,.16); box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.kc-orb.has-tile.is-soon { filter: saturate(.62) brightness(.94); }       /* not yet bound to a real photo config */
.kc-orb.has-tile.is-soon.is-focus { filter: none; }
/* "Připravujeme" placeholder in the stage for not-yet-bound families */
.kc-soon { position: absolute; inset: 0; z-index: 65; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(12,10,8,.55); backdrop-filter: blur(4px); }
.kc-soon[hidden] { display: none; }
.kc-soon-img { width: min(42%, 320px); aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); box-shadow: 0 18px 44px rgba(0,0,0,.55); }
.kc-soon-tag { font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #f5eee0; opacity: .82; }
.kc-focus { position: absolute; left: 60%; right: 0; top: 50%; transform: translateY(-50%); z-index: 5; text-align: left; pointer-events: none; }
.kc-focus-sub { display: block; font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.kc-focus-name { font-family: var(--serif); font-size: clamp(21px, 2.6vw, 34px); line-height: 1.14; color: #fff; }
/* configurator shape card moved OUT of the photo, now sits UNDER the focused
   combo name in the wheel column (user 2026-06-15). Re-enable pointer-events
   (the parent .kc-focus is none) so the SVG zones stay clickable. */
.kc-focus .kc-svgcard {
  position: static; left: auto; bottom: auto; z-index: auto;
  width: min(100%, 260px); max-width: 260px; margin: 18px 0 0;
  pointer-events: auto;
}
.kc-wheel-nav { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 12px; }
.kc-wnav { width: 46px; height: 46px; border-radius: 50%; background: rgba(18,15,11,.5); backdrop-filter: blur(8px);
  border: 1px solid rgba(245,238,224,.35); color: #f5eee0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; }
.kc-wnav svg { width: 18px; height: 18px; stroke: #f5eee0; stroke-width: 1.8; fill: none; }
.kc-wnav.up svg { transform: rotate(-90deg); }
.kc-wnav.down svg { transform: rotate(90deg); }
.kc-wnav:hover { background: rgba(40,34,26,.8); border-color: rgba(245,238,224,.65); }

.kc-preview-col { min-width: 0; display: flex; flex-direction: column; gap: 24px; padding-left: 7%; }
.kc-stage { position: relative; aspect-ratio: 3/2; background: transparent; }
.kc-room { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; opacity: 0; transition: opacity .7s ease;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent), linear-gradient(to bottom, transparent, #000 11%, #000 85%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent), linear-gradient(to bottom, transparent, #000 11%, #000 85%, transparent);
  mask-composite: intersect; }
.kc-room.on { opacity: 1; }
.kc-front-overlay { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: center;
  opacity: 0; transition: opacity .5s ease; z-index: 1; pointer-events: none; }
/* photo "klikačka": aligned cut-out layers — identical box + edge mask to .kc-room */
.kc-pl { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: center;
  opacity: 0; transition: opacity .45s ease, filter .25s ease; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent), linear-gradient(to bottom, transparent, #000 11%, #000 85%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent), linear-gradient(to bottom, transparent, #000 11%, #000 85%, transparent);
  mask-composite: intersect; }
.kc-pl.on { opacity: 1; }
/* hover-highlight: light up the hovered zone in BOTH the kitchen photo + the tvar card */
.kc-pl.on.kc-hot { filter: brightness(1.22) saturate(1.06); }
.kc-stage.kc-hotting { cursor: pointer; }
#kc-svgwrap [data-zone] { transition: opacity .2s ease, filter .2s ease; }
#kc-svgwrap.has-hot [data-zone] { opacity: .42; }
#kc-svgwrap [data-zone].kc-hot { opacity: 1; filter: brightness(1.08) drop-shadow(0 0 7px rgba(255, 255, 255, .5)); }
.kc-stage.kc-photo-mode::after { z-index: 70; }   /* atmosphere sits above the full composite */
.kc-stage.kc-photo-mode .kc-svgcard { z-index: 75; display: block; }  /* card on TOP of the photo, not behind it */
.kc-stage.kc-photo-mode .kc-tag { z-index: 80; }
.kc-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(125% 95% at 64% 42%, transparent 56%, rgba(12,9,7,.42)); }
.kc-svgcard { position: absolute; left: 20px; bottom: 20px; z-index: 2; width: 44%; max-width: 300px; aspect-ratio: 1;
  /* subtle per-farebnice colour behind the shape (--moodc set on the .kc section) */
  background: radial-gradient(120% 100% at 50% 24%, color-mix(in srgb, var(--moodc) 30%, rgba(20,16,12,.62)), rgba(15,12,9,.72));
  backdrop-filter: blur(12px); border: 1px solid rgba(245,238,224,.14);
  border-radius: 16px; box-shadow: 0 16px 44px rgba(0,0,0,.5); transition: background .5s ease; }
.kc-svgwrap { position: absolute; inset: 12px; display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.45)); }
.kc-svgwrap svg { width: 100%; height: 100%; overflow: visible; }
.kc-svgwrap [data-zone] { transition: filter .25s; }
.kc-tag { position: absolute; right: 18px; top: 16px; z-index: 3; font: 500 10.5px/1 var(--mono); letter-spacing: .14em;
  color: #fff; background: rgba(0,0,0,.42); padding: 8px 13px; border-radius: 30px; backdrop-filter: blur(4px); }

.kc-readout { display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 6px 18px;
  min-height: 44px; font: 500 10.5px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.kc-ro { display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.kc-ro.active { color: var(--text); }
.kc-ro i { width: 16px; height: 16px; border-radius: 4px; background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,.2); }
.kc-ro b { color: var(--text-mute); font-weight: 500; letter-spacing: .04em; }
.kc-ro.active b { color: #fff; }

.kc-mood { padding: 64px 0 96px; margin-top: -2px; background: #120f0c; color: var(--text); }
.kc-mood-head { text-align: center; }
.kc-mood-head .display-m { margin-top: 8px; }
.kc-mood-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.kc-mood-pill { padding: 10px 24px; border-radius: 30px; cursor: pointer; font: 500 12px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); color: var(--text-mute); transition: .2s; }
.kc-mood-pill:hover { color: var(--text); }
.kc-mood-pill.active { background: var(--acc); border-color: var(--acc); color: #fff; }
.kc-mood-stage { margin-top: 30px; }
.kc-belt { width: 100vw; margin-left: calc(50% - 50vw); display: flex; flex-direction: column; gap: 8px;
  height: min(82vh, 860px); overflow: hidden; }
.kc-belt-row { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.kc-belt-track { display: flex; gap: 8px; height: 100%; width: max-content; will-change: transform; }
.kc-belt-row.left .kc-belt-track { animation: kcBeltLeft 280s linear infinite; }
.kc-belt-row.right .kc-belt-track { animation: kcBeltRight 312s linear infinite; }
.kc-belt-row:hover .kc-belt-track { animation-play-state: paused; }
.kc-belt-item { flex: 0 0 auto; height: 100%; margin: 0; overflow: hidden; border-radius: var(--r-xs); }
.kc-belt-item img { height: 100%; width: auto; display: block; transition: opacity .7s ease, transform .45s ease, filter .45s ease; }
.kc-belt.kc-belt-swap .kc-belt-item img { opacity: .22; }
.kc-belt-item:hover img { transform: scale(1.035); filter: brightness(1.07); }
@keyframes kcBeltLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes kcBeltRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 760px) { .kc-belt { height: 64vh; } }
.kc-soon-card { text-align: center; padding: 80px 20px; border: 1px dashed rgba(255,255,255,.2); border-radius: 16px;
  font: 500 13px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--text-dim);
  max-width: var(--container); margin: 0 auto; }

@media (max-width: 980px) {
  .kc-stagewrap { grid-template-columns: 1fr; gap: 40px; }
  .kc-wheel-col { order: 2; }
  .kc-preview-col { order: 1; }
  .kc-wheel { width: min(86vw, 420px); }
  .kc-sw { width: 46px; height: 46px; }
}

/* Barevné rodiny composition tiles on the wheel */
.kcw-tile { stroke: rgba(255,255,255,.28); stroke-width: 1; transition: stroke .25s, stroke-width .25s; }
.kcw-item:hover .kcw-tile, .kcw-item:focus-visible .kcw-tile { stroke: #fff; }
.kcw-item.is-active .kcw-tile { stroke: var(--brand); stroke-width: 3; }
.kc-stage.is-tile .kc-photo { object-fit: contain; background: #16130f; padding: 4%; }

/* Custom cursor: over the configurator wheel, the dot becomes a gentle up/down scroll arrow */
.cursor-scroll { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease; }
.cursor-scroll svg { width: 12px; height: 18px; fill: none; stroke: #f5eee0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cursor.kc-scroll { width: 34px; height: 34px; background: rgba(20,17,13,.32); border-color: rgba(245,238,224,.5); box-shadow: 0 0 16px rgba(0,0,0,.28); backdrop-filter: blur(3px); }
.cursor.kc-scroll .label { opacity: 0 !important; }
.cursor.kc-scroll .cursor-scroll { opacity: .95; }

/* ═══════════════════════ Nav: user dropdown menu ═══════════════════════ */
.nav-actions { position: relative; }
.user-menu {
  position: absolute; top: calc(100% + 16px); right: 0; min-width: 248px;
  background: rgba(24, 20, 15, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 238, 224, 0.12); border-radius: 14px;
  padding: 8px; z-index: 200;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease;
}
.user-menu.open { opacity: 1; transform: none; }
.um-head {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px 13px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(245, 238, 224, 0.1);
}
.um-name { font-family: var(--serif); font-size: 17px; color: var(--text); }
.um-mail { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--text-dim); }
.user-menu a, .user-menu button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 9px; border: 0; background: none;
  font-family: var(--sans); font-size: 13.5px; color: var(--text-mute);
  text-decoration: none; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.user-menu a:hover, .user-menu button:hover { background: rgba(245, 238, 224, 0.07); color: var(--text); }
/* Skupina odkazů ven z webu (Sykora admin · KitchenBoard · ACADEMY) — oddělená
   linkou, aby bylo poznat, že vedou mimo ateliér. */
.user-menu a.um-sep { margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(245, 238, 224, 0.1); }
.user-menu #um-logout { margin-top: 6px; border-top: 1px solid rgba(245, 238, 224, 0.1); border-radius: 0; color: var(--text-dim); }
.user-menu #um-logout:hover { color: var(--brand-hi); background: none; }

/* ═══════ Studio detail: SEO H1 kicker + FAQ section (SEO & GEO analýza) ═══════ */
.st-h1-pre {
  display: block;
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 24px;
}
.st-faq { padding: 110px 0 130px; }
.st-faq .eyebrow { margin-bottom: 18px; }
.st-faq-list { margin-top: 44px; max-width: 1060px; }
/* Interactive FAQ — click a question (left) to reveal its answer (right).
   Mobile (default) = accordion; desktop (≥761px) = master-detail with a subtle
   gray hairline (var(--line)) between the columns. NO row separators — the two
   sides are set apart by generous spacing around the central line. */
.st-faq-qbtn {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 14px 4px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.32; color: var(--text-mute);
  transition: color .2s ease;
}
.st-faq-qbtn::after {
  content: ''; flex: 0 0 auto; width: 18px; height: 1px; margin-top: 12px;
  background: currentColor; opacity: 0;
  transition: width .25s ease, opacity .2s ease, background-color .2s ease;
}
.st-faq-qbtn:hover { color: var(--text); }
.st-faq-qbtn:hover::after { opacity: .4; }
.st-faq-qbtn.is-active { color: var(--brand-hi); }
.st-faq-qbtn.is-active::after { width: 28px; opacity: 1; background: var(--brand-hi); }
.st-faq-panel { display: none; }
.st-faq-panel.is-active { display: block; animation: faqFade .35s ease; }
.st-faq-panel p {
  margin: 0; max-width: 600px; padding: 6px 4px 26px;
  font-size: 14.5px; line-height: 1.78; color: var(--text-mute);
}
@keyframes faqFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 761px) {
  .st-faq-ix { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .st-faq-row { display: contents; }
  .st-faq-qbtn {
    grid-column: 1; padding: 16px 56px 16px 4px;
    border-right: 1px solid var(--line);
  }
  .st-faq-panel { grid-column: 2; grid-row: 1 / span 99; align-self: start; }
  .st-faq-panel p { padding: 8px 4px 8px 56px; font-size: 15.5px; line-height: 1.8; }
}
.st-faq-cta { margin-top: 48px; }

/* Home FAQ — sits under the footer "Začněte vlastní kapitolu" CTA */
.home-faq { text-align: center; margin-bottom: 96px; }
.home-faq .eyebrow { display: block; margin-bottom: 16px; }
.home-faq .display-m { margin-bottom: 4px; }
.home-faq .st-faq-list { margin: 40px auto 0; text-align: left; }
@media (max-width: 760px) { .home-faq { margin-bottom: 64px; } }

/* ═══ Info / footer pages (Proč Sykora, Kontakt, Záruka, …) ═══ */
.info-hero { padding: 200px 0 90px; }
/* photo hero: title + lead overlaid on a cover image */
.info-hero--photo { position: relative; padding: 220px 0 70px; min-height: 72vh; display: flex; align-items: flex-end; overflow: hidden; border-radius: var(--r-md); }
.info-hero--photo .info-hero-media { position: absolute; inset: 0; z-index: 0; }
.info-hero--photo .info-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.info-hero--photo::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.18) 38%, rgba(10,9,8,0.88) 100%); }
.info-hero--photo .container { position: relative; z-index: 2; width: 100%; }
.info-hero--photo .info-lead { color: rgba(245,238,224,0.86); }
.info-hero .info-lead {
  max-width: 580px; margin-top: 24px; font-size: 19px;
  line-height: 1.65; color: var(--text-mute);
}
.info-hero .info-body { max-width: 640px; margin-top: 34px; }
.info-hero .info-body p {
  font-size: 15px; line-height: 1.8; color: var(--text-mute);
}
.info-hero .info-body p + p { margin-top: 16px; }
.info-hero .info-body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ═══ Glass blur kill-switch — .no-blur is set by DEFAULT at boot (app.js).
   backdrop-filter over playing video recomputes per frame and A/B-tested as
   the video-stutter source on client GPUs (2026-06-10). ?blur re-enables. ═══ */
.no-blur *, .no-blur *::before, .no-blur *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ═══ Edgy — Identity themes (fotenie editorial switcher) ════════════════════
   The /spotrebice-style warm-dark editorial section on product.html?id=edgy.
   Four photographed colorways (Signature / Dune / Heritage / Midnight); the
   chip switcher crossfades a cinematic hero + swaps the story & gallery and
   drives the configurator below. JS: edgyIdentityHTML / wireEdgyIdentity. ═══ */
.edgy-id {
  position: relative;
  padding: clamp(40px, 5vw, 80px) 0 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.edgy-id::before {                 /* faint accent bloom keyed to the active theme */
  content: ''; position: absolute; top: -10%; left: 50%; width: 80vw; height: 60vh;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--eid-accent) 16%, transparent), transparent 72%);
  opacity: .5; pointer-events: none; transition: background .8s ease;
}
/* section header — overlaid on the TOP of the hero photo */
.edgy-id-head {
  position: absolute; left: 0; right: 0; top: clamp(30px, 4vw, 60px); z-index: 3;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .55);
}
.edgy-id-head .eyebrow { color: rgba(255, 255, 255, .82); }
.edgy-id-head .display-m { margin-top: 14px; color: #fff; max-width: 15ch; }
.edgy-id-intro {
  margin-top: 18px; max-width: 52ch; color: rgba(255, 255, 255, .84);
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6;
}

/* theme chips */
/* theme selector = editorial accent-bar tabs (line + serif name + material),
   overlaid on the bottom of the hero photo */
.edgy-id-switch {
  position: absolute; left: 0; right: 0; bottom: clamp(26px, 3.8vw, 52px); z-index: 3;
  margin-top: 0;
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: clamp(20px, 2.8vw, 46px);
}
.eid-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
  padding: 0; border: 0; background: none; color: var(--text);
  cursor: pointer; text-align: left; opacity: .62;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .55);
  transition: opacity .4s ease;
}
.eid-chip:hover, .eid-chip.active { opacity: 1; }
.eid-bar {
  width: 26px; height: 2px; background: var(--text-dim);
  transition: width .5s cubic-bezier(.2, .7, .2, 1), background .45s ease;
}
.eid-chip:hover .eid-bar { background: var(--text-mute); }
.eid-chip.active .eid-bar { width: 100%; background: var(--dot); }
.eid-chip-txt { display: flex; flex-direction: column; gap: 4px; line-height: 1.12; }
.eid-chip-name {
  font-family: var(--serif); font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 400; letter-spacing: -.01em;
}
.eid-chip-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim); transition: color .4s ease;
}
.eid-chip.active .eid-chip-tag { color: color-mix(in srgb, var(--dot) 60%, var(--text-mute)); }

/* cinematic crossfading hero */
.edgy-id-stage {
  position: relative; margin-top: 0;
  width: 100%; height: clamp(600px, 82vh, 880px);
  background: #100d0a;
}
.eid-layer {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1s ease;
  will-change: opacity;
}
.eid-layer.is-active { opacity: 1; }
.eid-stage-grad {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(16, 13, 10, .8) 0%, rgba(16, 13, 10, .3) 16%, transparent 40%),
    linear-gradient(to top, rgba(16, 13, 10, .94) 0%, rgba(16, 13, 10, .6) 17%, rgba(16, 13, 10, .12) 40%, transparent 60%);
}
.eid-stage-cap {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(22px, 4vw, 48px); width: 100%;
  display: flex; flex-direction: column; gap: 8px;
}
.eid-stage-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--eid-accent) 50%, #fff);
}
.eid-stage-name {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(40px, 7vw, 104px); line-height: .96; color: #fff;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .5);
}

/* story + gallery */
.edgy-id-lower {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr);
  gap: clamp(32px, 5vw, 76px); align-items: start;
  padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(72px, 9vw, 120px);
}
.eid-story { position: sticky; top: calc(var(--nav-h) + 40px); }
.eid-story-eyebrow { color: var(--eid-accent); transition: opacity .19s ease, color .5s ease; }
.eid-story-text { margin-top: 18px; transition: opacity .19s ease; }
.eid-story-text p {
  margin-top: 15px; font-family: var(--serif); font-weight: 300;
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; color: var(--text);
}
.eid-story-text p:first-child { margin-top: 0; }
.eid-story-hint {
  display: block; margin-top: 22px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
}
.eid-story.eid-swap .eid-story-eyebrow,
.eid-story.eid-swap .eid-story-text { opacity: 0; }

.eid-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.eid-tile { margin: 0; overflow: hidden; border-radius: 4px; background: var(--bg-elev-1); }
.eid-tile:first-child { grid-column: 1 / -1; }
.eid-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 16 / 10; transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.eid-tile:hover img { transform: scale(1.045); }

@media (max-width: 920px) {
  .edgy-id-lower { grid-template-columns: 1fr; }
  .eid-story { position: static; }
}
@media (max-width: 560px) {
  .edgy-id-switch { gap: 22px 28px; }
  .eid-chip-name { font-size: 17px; }
  .eid-gallery { grid-template-columns: 1fr; }
  .eid-tile:first-child { grid-column: auto; }
}

/* ═══════════════════════ Akcie (promotions) ═══════════════════════ */

/* Cart totals — applied akcie rows (drawer + cart summary + checkout) */
.drawer-foot .totals .sum.sum-sub { font-family: var(--mono); font-size: 14px; color: var(--text-mute); }
.drawer-foot .totals.promo-line { padding-bottom: 12px; }
.drawer-foot .totals.promo-line .label { color: var(--brand-hi); text-transform: none; letter-spacing: 0.08em; font-size: 11px; }
.drawer-foot .totals.promo-line .sum { font-family: var(--mono); font-size: 14px; color: var(--brand-hi); }
.promo-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff; background: var(--akce-c, var(--brand)); padding: 3px 8px; align-self: center;
}
/* „registrace u výrobce" u cashbacku/záruky — visí na názvu akce, ať řádek
   zůstane dvouprvkový (flex space-between); ztlumené, štítek zůstává hlavní. */
.promo-reg {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-mute); white-space: nowrap;
}
/* Přímí potomci = obě buňky řádku. Bez `>` by `span:last-child` chytal i
   vnořený `.promo-reg` a přebil ho (je specifičtější). */
.summary .row.promo-line > span:first-child { color: var(--brand-hi); }
/* :not(.promo-tag) — u informační akce je pravou buňkou barevný štítek, který
   si nese vlastní bílý text; bez výjimky ho tohle pravidlo přebilo na červenou
   (červená na tyrkysové „ZÁRUKA 10 LET“ byla nečitelná). */
.summary .row.promo-line > span:last-child:not(.promo-tag) { font-family: var(--mono); font-size: 12px; color: var(--brand-hi); align-self: center; }

/* /spotrebice brand hero — "Akce" click-through overlay on the promo photo */
.sbc-akce { position: absolute; inset: 0; z-index: 6; display: block; }
.sbc-akce-tag {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff; background: var(--brand); padding: 6px 12px;
  border-radius: var(--r-xs);
  transition: transform .3s ease;
}
.sbc-akce:hover .sbc-akce-tag { transform: translateY(-2px); }


/* akce.html — listing */
.akce-list-head { padding: calc(var(--nav-h) + 56px) 0 40px; }
/* display-l runs a 0.92 line-height, so „Aktuální" ascenders + diacritics paint
   ABOVE their line box and collided with the eyebrow sitting flush on top of it
   (the boxes never overlapped — the glyphs did). Both akce headers need the gap. */
.akce-list-head .eyebrow,
.akce-hero .eyebrow { display: inline-block; margin-bottom: 20px; }
.akce-list-head .info-lead { max-width: 580px; margin-top: 24px; font-size: 19px; line-height: 1.65; color: var(--text-mute); }
.akce-list { padding: 28px 0 96px; }
/* Brand filter — the ?brand= route existed from day one but had no UI, so the
   only way into it was a click-through from /spotrebice. Uses the shared sticky
   "Unified catalog filter shell" (see that block); the chips are <a>s here, so
   they need the underline killed. */
.akce-filters .filter-chip { text-decoration: none; }
/* One line at every width — wrapped chips made the sticky bar 108px tall on a
   390px phone (a third of the screen). Same rule as every other chip bar. */
.akce-filters .row {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.akce-filters .row::-webkit-scrollbar { display: none; }
/* ═══ Výpis akcí ═══════════════════════════════════════════════════════════
   Výpis vykresluje TÝŽ bento renderer jako pás na /spotrebice (.apak-* výše),
   takže obě plochy jsou jeden systém a nemohou se rozejít. Ledger varianta
   (nabídka vysázená velkým serifem, řádky přes celou šířku) byla 2026-08-13
   zamítnutá: na tmavém podkladu působila prázdně a rozostřené pásy kreativy
   jako nedohraný obrázek. Vlastní CSS proto výpis nemá — jen odsazení stacku. */
.akce-list .apak-stack { margin-top: 4px; }
/* Odznak a platnost si drží HLAVIČKA DETAILU akce (.akce-hero-meta) — zůstávají
   i po zrušení karet výpisu. */
.akce-card-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; background: var(--akce-c, var(--brand)); padding: 5px 10px;
  border-radius: var(--r-xs);
}
.akce-card-valid { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--text-dim); }
.akce-empty { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-mute); padding: 40px 0 80px; }

/* akce.html — detail */
.akce-hero { padding: calc(var(--nav-h) + 56px) 0 0; }
.akce-crumbs { margin-bottom: 18px; }
.akce-hero-meta { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.akce-hero-meta .akce-card-badge { position: static; }
.akce-hero .info-lead { max-width: 620px; margin-top: 22px; font-size: 19px; line-height: 1.65; color: var(--text-mute); }
.akce-expired {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text); background: rgba(255, 255, 255, 0.12); padding: 5px 10px;
  border-radius: var(--r-xs);
}
/* The hero creative shows WHOLE — campaign banners carry text/logos that a
   cover-crop cuts off at full width (looked fine only in the narrow editor
   preview). Extremely tall photos get letterboxed within 80vh instead. */
/* Container-bound, not full-bleed: the creative lines up with the crumb / H1 /
   lead column above it, and the corner radius actually reads (a full-bleed
   rounded corner sits in the viewport gutter and looks like a mistake). */
.akce-hero-media {
  margin: 48px auto 0; max-width: var(--container); padding: 0 var(--gutter);
}
.akce-hero-media img {
  width: 100%; height: auto; max-height: 80vh; object-fit: contain; display: block;
  border-radius: var(--r-md);
}
.akce-outro { padding: 90px 0 140px; }
.akce-outro-note { max-width: 560px; margin-top: 18px; font-size: 15px; line-height: 1.75; color: var(--text-mute); }
.akce-outro-cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 22px; }
.akce-outro .btn:not(.solid)::before { background: var(--text); }

/* ═══════════ Flex Identity mood wheel — the board-01 editorial layout ═══════════
   product.html?id=flex (identity.layout === 'wheel' in kitchen-config). A
   vertical-typo hero band, an interactive ROTATING mood wheel (tangential ring
   labels + circular photo bubbles, one 90° segment per theme), a per-theme
   editorial story and a lifestyle outro. JS: flexWheelHTML / wireIdentityWheel.
   All photos are SQUARE; only the wheel ring/bubbles are circles. ═══ */
.fxw {
  position: relative;
  /* transparent — let the body's continuous red bloom carry through behind
     FLEX · Identity (the head + wheel), like the home triptych section.
     No border-top: a hairline between the .pdp body and the section read as
     a stray line on the seamless dark page. */
  overflow: hidden;
}
/* identity section — wheel sits LEFT of the first lifestyle photo (.fxw-duo),
   the editorial photos are CONTAINED + ROUNDED like the rest of the site
   (user 2026-06-15; was full-bleed + square 2026-06-12). NO per-section accent
   bloom: its radial got clipped by the section's overflow:hidden at the top
   edge, which painted a faint full-width hairline at the seam. The body's red
   bloom is the only ambience. */
.fxw .container { max-width: none; }
.fxw .fxw-lower { max-width: min(1800px, 95vw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ── hero: photo left, black band with vertical typography right ── */
.fxw-hero {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(128px, 16.5vw, 232px);
  padding-top: calc(var(--nav-h) + clamp(12px, 1.8vw, 28px));
}
.fxw-hero-media {
  position: relative;
  height: clamp(540px, 84vh, 900px);
  overflow: hidden;
  background: var(--bg-elev-1);
  border-radius: var(--r-md);
}
.fxw-hero-ph {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1s ease; will-change: opacity;
}
.fxw-hero-ph.is-active { opacity: 1; }
/* darken the photo's right edge into the band so the vertical wordmark never
   blends with a bright photo (Edgy's „Edgy" descenders reach further than Flex's). */
.fxw-hero-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 76%, rgba(16, 13, 10, .92) 100%);
}
.fxw-band {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(20px, 2.4vw, 34px); padding-top: clamp(8px, 1.4vw, 22px);
}
.fxw-band-theme {
  writing-mode: vertical-rl;
  font-family: var(--mono); font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  transition: color .5s ease;
}
.fxw-band-name {
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(78px, 11vw, 176px); line-height: .82; letter-spacing: -.02em;
  color: #fff;
}

/* ── section head over the wheel — centered, identical treatment to the
   configurator (.kc-head) + mood (.kc-mood-head) headers on this page so the
   identity heading reads the same as every other section header on the site. */
.fxw-head { text-align: center; max-width: 760px; margin: 0 auto; padding-top: clamp(44px, 5.5vw, 84px); }
.fxw-head .display-m { margin-top: 12px; }
.fxw-intro {
  margin-top: 16px; max-width: 600px; margin-inline: auto;
  color: var(--text-mute); font-size: 16px; line-height: 1.65;
}

/* ── the mood wheel — paired LEFT of the first lifestyle photo ── */
.fxw-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: center;
  max-width: min(1800px, 95vw); margin: 0 auto;
  padding: clamp(28px, 4vw, 60px) var(--gutter) clamp(8px, 2vw, 22px);
}
.fxw-wheel-wrap {
  display: flex; justify-content: center; align-items: center;
  padding: 0;
}
.fxw-stage { --sz: min(38vw, 600px); position: relative; width: var(--sz); height: var(--sz); }
/* right column: per-theme copy stacked over the first photo, both fade on swap */
.fxw-duo-copy {
  display: flex; flex-direction: column;
  gap: clamp(20px, 2.6vw, 34px);
  transition: opacity .22s ease;
}
.fxw-duo-copy.fxw-swap { opacity: 0; }
.fxw-duo-copy .fxw-story-copy { padding: 0; }
.fxw-duo-copy .fxw-ph { width: 100%; }
.fxw-ring {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--sz) * .56); height: calc(var(--sz) * .56);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%;
}
.fxw-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; pointer-events: none; max-width: calc(var(--sz) * .42);
}
.fxw-center-name {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .42em; text-indent: .42em;
  /* lightened accent so it stays readable for dark accents too (Edgy red) */
  color: color-mix(in srgb, var(--fxw-accent) 45%, #fff);
  transition: color .5s ease;
}
.fxw-center-sub {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.12; color: #fff;
}
.fxw-orbit {
  position: absolute; inset: 0;
  transform: rotate(var(--rot));
  transition: transform 1.15s cubic-bezier(.25, .7, .2, 1);
  will-change: transform;
}
/* tangential ring label — sits just OUTSIDE the ring (so the ring stays a
   complete circle) and is rigidly attached to the wheel: its rotation is fixed
   in the orbit frame, so it rotates WITH the ring (no in-place flip). No dashes
   around it. */
.fxw-lab {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--sz) * .315));
  background: none; border: 0; padding: 0; cursor: pointer;
}
.fxw-lab-txt {
  display: block; padding: 4px 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  white-space: nowrap; color: rgba(255, 255, 255, .5);
  transform: rotate(90deg);
  transition: color .45s ease;
}
.fxw-lab:hover .fxw-lab-txt { color: rgba(255, 255, 255, .85); }
.fxw-lab.is-active .fxw-lab-txt { color: #fff; }
/* photo bubble (inner image counter-rotates so it stays upright) */
.fxw-bub {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--sz) * var(--bs)); height: calc(var(--sz) * var(--bs));
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--sz) * var(--rf)));
  background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%;
}
.fxw-bub-im {
  position: absolute; inset: 0; display: block; border-radius: 50%;
  background-size: cover; background-position: center;
  box-shadow: 0 10px 44px rgba(0, 0, 0, .45);
  transform: rotate(calc(-1 * (var(--a) + var(--rot)))) scale(var(--bsc, .9));
  transition: transform 1.15s cubic-bezier(.25, .7, .2, 1), opacity .55s ease, filter .55s ease;
  opacity: .68; filter: saturate(.85) brightness(.95);
}
.fxw-bub:hover { --bsc: .97; }
.fxw-bub.is-active { --bsc: 1; }
.fxw-bub:hover .fxw-bub-im, .fxw-bub.is-active .fxw-bub-im { opacity: 1; filter: none; }

/* ── editorial story + outro ── */
.fxw-lower {
  padding-bottom: clamp(48px, 6vw, 90px);
  transition: opacity .22s ease;
}
/* wheel pages: close the see-through gap between the identity section and the
   configurator — the .kc section is transparent (124px top pad), so the body's
   colored ambient bloom peeked through between the two. */
.fxw ~ .pdp-blocks { padding: 0; background: var(--bg); }
.fxw ~ .pdp-blocks .kc { padding-top: clamp(48px, 6vw, 84px); }
.fxw ~ .pdp-blocks .kc-mood { padding-bottom: 36px; }
/* INHERITED configurator — a realization page of a line whose own product
   authors the wheel (JS: the `pdp-kc-tail` branch in renderProduct). Same three
   sections appended after the editorial blocks, so they need the same tightened
   rhythm the line's own page gets from the rule above; the opaque background
   stops the body's ambient bloom showing through .kc's transparent top pad. */
.pdp-kc-tail { background: var(--bg); }
.pdp-kc-tail .kc { padding-top: clamp(48px, 6vw, 84px); }
.pdp-kc-tail .kc-mood { padding-bottom: 36px; }
.fxw-lower.fxw-swap { opacity: 0; }
.fxw-story-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
#fxw-tag { color: var(--fxw-accent); transition: color .5s ease; }
/* story text = the site's standard body copy (sans / Inter), like the home
   "Kompozice na míru" copy + editorial lead — NOT big serif statements. */
.fxw-lead { margin-top: 18px; }
.fxw-lead p {
  margin-top: 16px;
  font-size: 19px; line-height: 1.7; color: var(--text-mute);
}
.fxw-lead p:first-child { margin-top: 0; }
.fxw-hint {
  display: block; margin-top: 26px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
}
.fxw-ph { margin: 0; overflow: hidden; background: var(--bg-elev-1); border-radius: var(--r-md); }
.fxw-ph img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.fxw-ph:hover img { transform: scale(1.035); }
.fxw-ph-1 img { aspect-ratio: 16 / 11; }
.fxw-ph-2 img { aspect-ratio: 16 / 11; }
.fxw-story-row {
  display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
  margin-top: clamp(36px, 4.5vw, 64px);
}
.fxw-story-row .fxw-ph[hidden] { display: none; }
.fxw-text p {
  margin-top: 14px;
  font-size: 16px; line-height: 1.7; color: var(--text-mute);
}
.fxw-text p:first-child { margin-top: 0; }
.fxw-note {
  display: block; margin-top: 22px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
}
.fxw-outro {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(40px, 5vw, 72px);
}
.fxw-outro .fxw-ph img { aspect-ratio: 16 / 10; }
.fxw-outro .fxw-ph:nth-child(1) { grid-column: 1 / span 7; }
.fxw-outro .fxw-ph:nth-child(2) { grid-column: 8 / span 5; margin-top: clamp(28px, 4vw, 56px); }
.fxw-outro .fxw-ph:nth-child(3) { grid-column: 3 / span 8; }

@media (max-width: 920px) {
  .fxw-hero { grid-template-columns: 1fr; padding-top: 0; }
  /* mobile: the photo runs full-bleed under the transparent nav, like .pdp-hero */
  .fxw-hero-media { height: clamp(420px, 62vh, 600px); }
  .fxw-band {
    flex-direction: row; align-items: baseline; justify-content: flex-start;
    gap: 18px; padding: 16px var(--gutter) 0;
  }
  .fxw-band-theme, .fxw-band-name { writing-mode: horizontal-tb; }
  .fxw-band-name { font-size: clamp(54px, 13vw, 92px); line-height: 1; order: -1; }
  .fxw-stage { --sz: min(82vw, 560px); }
  .fxw-lab-txt { font-size: 9px; letter-spacing: .24em; gap: 8px; }
  .fxw-duo { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 44px); }
  .fxw-story-row { grid-template-columns: 1fr; }
  .fxw-outro { grid-template-columns: 1fr; gap: 16px; }
  .fxw-outro .fxw-ph:nth-child(n) { grid-column: auto; margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Home: Rozcestník produktů — "Vyberte produkt"
   Photo-card grid driven by the admin kitchen categories
   (SYKORA_CATEGORIES, edited in sykora-admin → Kolekce).
   Each card → shop.html?cat=<slug>.
   ═══════════════════════════════════════════════════════════════ */
.home-rozc { padding: clamp(72px, 10vw, 150px) 0; }
.rozc-head { margin-bottom: clamp(34px, 5vw, 60px); }
.rozc-head h2 { margin-top: 14px; }
.rozc-sub { margin-top: 18px; max-width: 52ch; color: var(--text-mute); font-size: 16px; line-height: 1.75; }

.rozc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 32px);
}
/* Tall, framed portrait cards — photo + name over a bottom gradient, with a
   sublist that slides up on hover. The card is an <article>; .rozc-cover is the
   full-card link, the sublinks sit above it. */
.rozc-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(245,238,224,0.14);
  background: #100e0c;
  isolation: isolate;
  transition: border-color .5s ease;
}
.rozc-card:hover { border-color: rgba(245,238,224,0.26); }
.rozc-media { position: absolute; inset: 0; }
.rozc-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
/* hover: a touch closer + gently desaturated (zašedí) — paired with the dark veil */
.rozc-card:hover .rozc-media img { transform: scale(1.045); filter: grayscale(0.5); }
/* gentle, uniform image darkening on hover */
.rozc-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(8,7,6,0.30); opacity: 0; transition: opacity .5s ease;
}
.rozc-card:hover .rozc-media::after { opacity: 1; }
/* progressive bottom darkening (intensifies on hover so the sublist reads) */
.rozc-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(8,7,6,0.92) 0%, rgba(8,7,6,0.7) 22%, rgba(8,7,6,0.25) 48%, rgba(8,7,6,0) 70%);
  transition: opacity .5s ease;
}
.rozc-cover { position: absolute; inset: 0; z-index: 2; }

.rozc-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: clamp(20px, 2vw, 30px);
  display: flex; flex-direction: column; gap: 12px;
  pointer-events: none;            /* clicks fall through to .rozc-cover … */
  background: rgba(16,13,10,0);
  border-top: 1px solid transparent;
  transition: background .5s ease, border-color .5s ease,
              backdrop-filter .5s ease, -webkit-backdrop-filter .5s ease;
}
/* glassmorphism on hover — frosted panel behind the name + sublist.
   blur capped at 12px, no saturate() (perf; see the .no-blur kill-switch). */
.rozc-card:hover .rozc-foot,
.rozc-card:focus-within .rozc-foot {
  background: rgba(16,13,10,0.42);
  border-top-color: rgba(245,238,224,0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.rozc-name {
  margin: 0; color: #fff;
  font-family: var(--serif); font-weight: 300; letter-spacing: -0.02em;
  font-size: clamp(24px, 2.2vw, 34px); line-height: 1.02;
}
.rozc-subs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .55s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.rozc-card:hover .rozc-subs,
.rozc-card:focus-within .rozc-subs { max-height: 240px; opacity: 1; }
.rozc-subs a {
  pointer-events: auto;            /* … but the sublinks stay clickable */
  display: inline-flex; align-items: center; gap: 8px; width: max-content;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(245,238,224,0.82); text-decoration: none;
  transition: color .25s ease, transform .25s ease;
}
.rozc-subs a::before { content: ''; width: 14px; height: 1px; background: var(--brand-hi); flex: none; }
.rozc-subs a:hover { color: #fff; transform: translateX(3px); }

@media (max-width: 1080px) { .rozc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .rozc-grid { grid-template-columns: 1fr; }
  .rozc-card { aspect-ratio: 4 / 5; }
  .rozc-subs { max-height: 240px; opacity: 1; }   /* touch: always shown */
}

/* ═══ Rozcestník — hover-spotlit expanding row of worlds ═══
   Same mechanism as the Novinky triptych: a CSS grid whose track widths
   (grid-template-columns, fr units) animate. JS (wireRozcRow) sets the template
   so the hovered card's track widens; at rest the first card is featured. fr-grid
   interpolates smoothly where flex-grow stutters. The hovered card also lights up
   (full colour + brand-red hairline + enlarged name + revealed sub-links).
   `LIVE` selectors below = "first card at rest, OR whichever card is hovered". */
.rozc-row {
  margin-top: clamp(34px, 5vw, 60px);
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;   /* pre-JS fallback: first featured */
  gap: clamp(10px, 1.1vw, 18px);
  /* the box widen/shrink uses an ease-IN-OUT curve so the width moves gradually
     across the whole duration — an ease-out curve front-loads the motion (covers
     ~80% in the first 300ms) and reads as an instant snap no matter the duration. */
  transition: grid-template-columns 600ms cubic-bezier(.65, 0, .35, 1);
}
.rozc-row .rozc-card {
  min-width: 0;
  height: clamp(360px, 40vw, 560px); aspect-ratio: auto;
  filter: grayscale(.34) brightness(.8);
  transition: filter 700ms cubic-bezier(.22, 1, .36, 1),
              border-color 700ms cubic-bezier(.22, 1, .36, 1),
              box-shadow 700ms cubic-bezier(.22, 1, .36, 1);
  will-change: filter;
}
/* promote the photo to its own compositor layer so the grayscale→colour
   transition doesn't repaint the card's text every frame (smoother) */
.rozc-row .rozc-media img { transform: translateZ(0); backface-visibility: hidden; }
/* LIVE state (width is handled by the grid template; this is colour/lift only) */
.rozc-row:not(:hover) .rozc-card.is-active,
.rozc-row .rozc-card:hover {
  filter: none;
  border-color: rgba(245,238,224,0.30);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,0.85);
}
/* brand-red hairline crowns the live card */
.rozc-row:not(:hover) .rozc-card.is-active::before,
.rozc-row .rozc-card:hover::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4;
  background: var(--brand);
}
/* neutralise the legacy grid hover (darkening veil + img desaturate + foot glass) */
.rozc-row .rozc-card:hover .rozc-media img { filter: none; transform: scale(1.04); }
.rozc-row .rozc-card:hover .rozc-media::after { opacity: 0; }
.rozc-row .rozc-card:hover .rozc-foot,
.rozc-row .rozc-card:focus-within .rozc-foot {
  background: none; border-top-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* foot: tag + name always visible; subs + Prohlédnout reveal on the live card */
.rozc-row .rozc-foot {
  padding: clamp(18px, 1.6vw, 26px);
  gap: 10px; background: none; border-top: 0; backdrop-filter: none;
}
.rozc-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245,238,224,0.7);
}
.rozc-row .rozc-name {
  font-size: clamp(19px, 1.7vw, 27px);
  transition: font-size 700ms cubic-bezier(.22, 1, .36, 1);
}
.rozc-row:not(:hover) .rozc-card.is-active .rozc-name,
.rozc-row .rozc-card:hover .rozc-name { font-size: clamp(26px, 2.4vw, 38px); }
/* subs hidden by default; shown on the live card */
.rozc-row .rozc-subs {
  max-height: 0; opacity: 0;
  transition: max-height 700ms cubic-bezier(.22, 1, .36, 1), opacity 500ms ease;
}
.rozc-row:not(:hover) .rozc-card.is-active .rozc-subs,
.rozc-row .rozc-card:hover .rozc-subs { max-height: 220px; opacity: 1; }
.rozc-go {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-hi);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 700ms cubic-bezier(.22, 1, .36, 1), opacity 500ms ease;
}
.rozc-go svg { width: 15px; height: 15px; }
.rozc-row:not(:hover) .rozc-card.is-active .rozc-go,
.rozc-row .rozc-card:hover .rozc-go { max-height: 26px; opacity: 1; margin-top: 2px; }

/* Tablet / mobile: a swipeable row (no hover) — each world keeps a comfortable
   width and shows its name + subs; tap the card to enter. Horizontal overflow
   only; vertical page scroll is never trapped (no lenis-prevent). */
@media (max-width: 900px) {
  /* swipeable row (no hover): equal-width tracks, horizontal overflow only —
     vertical page scroll is never trapped. JS clears the inline template here. */
  .rozc-row {
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 72vw;
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .rozc-row::-webkit-scrollbar { display: none; }
  .rozc-row .rozc-card {
    height: clamp(420px, 96vw, 560px);
    scroll-snap-align: center; filter: none;
  }
  .rozc-row .rozc-card .rozc-name { font-size: clamp(24px, 6vw, 32px); }
  .rozc-row .rozc-card .rozc-subs { max-height: 220px; opacity: 1; }
  .rozc-row .rozc-card .rozc-go { max-height: 26px; opacity: 1; }
}
/* NOTE: deliberately NO prefers-reduced-motion guard here — the box-expand must
   animate like the Novinky triptych (which has no guard either). An earlier
   `transition: none` guard made the expand snap instantly for reduce-motion
   users, so no duration/easing change had any visible effect. */

/* Hero — per-reel link to the kitchen currently playing, plus its description.
   The description is never shown: it stays in the DOM (max-height collapse,
   never display:none) purely so crawlers index the copy, while the visible hero
   lead is the static editorial line and the arrow link goes to the PDP. */
.hero-desc-wrap { margin-top: 18px; max-width: 50ch; }
.hero-desc-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(245,238,224,0.7);
  transition: color .3s ease;
}
.hero-desc-toggle:hover { color: var(--text); }
/* arrow stays WHITE even though the label is dimmed cream */
.hero-desc-toggle svg { width: 15px; height: 15px; stroke: #fff; transition: transform .4s ease; }
.hero-desc-toggle:hover svg { transform: translateX(5px); }
.hero-desc {
  margin: 0; max-height: 0; overflow: hidden; opacity: 0;
  color: rgba(245,238,224,0.78); font-size: 15px; line-height: 1.7;
}

/* ── Cookie consent banner (Consent Mode v2) ───────────────────────────── */
/* Od 24. 8. 2026 je lišta MODÁLNÍ: dokud návštěvník nerozhodne, je celý web
   ztmavený a neklikatelný. Wrap proto kryje celý viewport a kliknutí bere na
   sebe. Do té doby měl `pointer-events: none`, protože transparentní pás u
   spodní hrany polykal kliknutí na to, co leželo pod ním (měřeno: primární CTA
   na home hero nešlo kliknout na žádné desktopové šířce). Teď je to polykání
   ZÁMĚR a `pointer-events` se sem nesmí vracet — bez něj by ztmavení bylo jen
   optické. Scroll drží consent.js přes `document.body.style.overflow`.

   Rozvržení je podle předlohy (Louis Vuitton): nadpis vlevo nahoře, odmítnutí
   jako podtržený text vpravo nahoře, dvě STEJNĚ ŠIROKÁ tlačítka vedle sebe a
   drobný text s odkazy pod nimi. Převzaté jsou POZICE a stavba textu, NE barvy
   — karta zůstává tmavá v našich tokenech.

   z-index 1600 je NAD mobilním chrome: .m-topbar i .m-tabbar sedí na 1200,
   .m-sheet-wrap na 1400 a toast na 1500 (mobile.css). Na 1200 by tabbar zůstal
   nad ztmavením a klikatelný.

   `width: 100vw` je kvůli `html { scrollbar-gutter: stable }`: ten zmenší
   iniciální containing block, takže `inset: 0` u fixed prvku končí 15 px před
   pravým okrajem a v tom pruhu zůstal web NEZTMAVENÝ — viditelný šev přes celou
   výšku. `vw` se počítá včetně místa pro posuvník, takže pruh přikryje. */
.consent-wrap {
  position: fixed; inset: 0; width: 100vw; z-index: 1600; display: none;
  align-items: center; justify-content: center;
  padding: 24px var(--gutter, 24px);
  background: rgba(6, 5, 4, .68);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.consent-wrap.is-open { display: flex; }
/* Strop výšky + rolování jen v .consent-body drží tlačítka vždycky na očích,
   i když si někdo rozklikne Nastavení. */
.consent-card {
  width: 100%; max-width: 920px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; gap: 22px; overflow: hidden;
  background: rgba(20, 18, 16, .94); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: var(--r-md, 14px);
  padding: 32px 36px; box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.consent-card:focus { outline: none; }

/* Nadpis vlevo, odmítnutí vpravo nahoře, pod tím vlasová linka. */
.consent-top { flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.consent-title { margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: 24px; line-height: 1.2; letter-spacing: .01em; color: var(--text, #f3ece3); }

.consent-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.consent-eyebrow { font-family: var(--mono, monospace); text-transform: uppercase;
  letter-spacing: .12em; font-size: 11px; color: var(--brand); display: block; margin-bottom: 12px; }
.consent-lead { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--text, #eee); }
.consent-lead:last-child { margin-bottom: 0; }
.consent-lead a { color: var(--text); text-decoration: underline; }
.consent-cats { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
/* author `display: flex` beats the UA rule `[hidden] { display: none }` (author
   origin wins), so the "Nastavení" toggle could never hide the checkboxes —
   the same trap as `.bk-city[hidden]`. This rule is REQUIRED. */
.consent-cats[hidden] { display: none; }
.consent-cat { font-size: 14px; display: inline-flex; gap: 8px; align-items: center; color: var(--text); }

/* Dvě STEJNĚ široká tlačítka vedle sebe — to je ta pozice z předlohy. */
.consent-actions { flex: 0 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.consent-actions .btn { width: 100%; justify-content: center; white-space: nowrap;
  font-size: 12px; padding: 18px 20px; }

/* Drobný text s odkazy pod tlačítky. */
.consent-fine { flex: 0 0 auto; }
.consent-fine p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.55;
  color: rgba(245, 238, 224, .55); }
.consent-fine p:last-child { margin-bottom: 0; }
.consent-fine a { color: rgba(245, 238, 224, .78); text-decoration: underline;
  text-underline-offset: 3px; transition: color 240ms ease; }
.consent-fine a:hover { color: var(--text, #f3ece3); }

/* „Pokračovat bez přijetí" = odmítnutí. Podtržený text vpravo nahoře, jak je
   v předloze. Je to ústup od 19. 8. 2026, kdy mělo odmítnutí doslova stejnou
   třídu jako souhlas — GDPR chce odmítnutí stejně SNADNÉ jako souhlas a jedním
   kliknutím pořád je, rovnocenně už ale nevypadá. */
.consent-decline {
  appearance: none; -webkit-appearance: none; background: none; border: 0;
  margin: 0; padding: 4px 0; cursor: pointer; flex: 0 0 auto; text-align: right;
  font-family: var(--sans); font-size: 13px; letter-spacing: .02em; line-height: 1.4;
  color: rgba(245, 238, 224, .74);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(245, 238, 224, .45);
  transition: color 240ms ease, text-decoration-color 240ms ease;
}
/* POVINNÉ: `.consent-decline` má na mobilu autorský `display: inline-flex`,
   který přebije UA pravidlo `[hidden] { display: none }` (autorský původ
   vyhrává) — bez tohohle by se „Pokračovat bez přijetí" na telefonu ukazovalo
   pořád. Přesně ta samá past jako u `.consent-cats[hidden]` o pár řádků výš. */
.consent-decline[hidden] { display: none; }
.consent-decline:hover { color: var(--text, #f3ece3); text-decoration-color: currentColor; }
.consent-decline:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 3px; border-radius: 2px; }

/* Mobil: sheet u spodní hrany přes celou šířku, NEJVÝŠ do půlky obrazovky
   (text se uvnitř roluje, tlačítka i drobný text zůstávají přišpendlené dole).
   Tlačítka zůstávají vedle sebe — jsou krátká a `.btn` je `overflow: hidden`,
   takže se hlídá, že se popisek neořízne (stará past téhle lišty). */
@media (max-width: 720px) {
  .consent-wrap { align-items: flex-end; padding: 0; }
  .consent-card {
    max-width: none; max-height: 50vh; gap: 16px;
    border: 0; border-top: 1px solid var(--line);
    border-radius: var(--r-lg, 20px) var(--r-lg, 20px) 0 0;
    padding: 22px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .consent-top { padding-bottom: 14px; gap: 14px; flex-wrap: wrap; }
  .consent-title { font-size: 20px; }
  .consent-decline { font-size: 12.5px; min-height: 40px; display: inline-flex; align-items: center; }
  .consent-lead { font-size: 14px; }
  .consent-cats { gap: 12px 18px; }
  .consent-actions { gap: 10px; }
  .consent-actions .btn { padding: 16px 10px; min-height: 50px;
    font-size: 11px; letter-spacing: 0.08em; }
  .consent-fine p { font-size: 11.5px; }
}

/* ═══ Výprodej (clearance) ═══ */
/* The grid + card reuse the /spotrebice catalog classes (.atr-cards /
   .appliance-card / .ac-*); only výprodej-specific bits live here. */
.vp-grid { gap:22px; }
.vp-card--sold { opacity:.62; }
/* clearance flags inside the catalog card's .ac-flags (top-left) */
.vp-flag { background:var(--brand); color:#fff; font:600 12px/1 var(--sans); padding:4px 8px; border-radius:999px; letter-spacing:.01em; }
.vp-flag-sold { background:rgba(0,0,0,.72); color:#fff; font:600 11px/1 var(--sans); padding:4px 8px; border-radius:999px; }
/* „Jen s kuchyní" — tmavá výplň jako „Prodáno", ne červená: červenou si na
   výprodejové kartě drží VÝHRADNĚ odznak slevy, a tenhle pill nad ním slevu
   podmiňuje, nepřidává. Tvar (999px pill) sdílí s oběma sousedy. */
.vp-flag-kitchen { background:rgba(28,24,19,.86); color:#fff; font:600 11px/1 var(--sans); padding:4px 8px; border-radius:999px; }
/* Detail kusu: pill vedle −% a pod cenou celá věta. Odznak sám o sobě je
   zkratka; u ceny, kterou zákazník uvidí jako inzerovanou, musí být napsané,
   za jaké podmínky platí. Selektor je ZDVOJENÝ schválně: `.vp-d-tag` je
   deklarovaný POZDĚJI v tomhle souboru, takže by holé `.vp-d-tag--kitchen`
   při stejné specificitě prohrálo pořadím ve zdroji a pill by vyšel
   brand-red místo tmavé — zdvojení vyhrává specificitou bez ohledu na to. */
.vp-d-tag.vp-d-tag--kitchen { background:rgba(28,24,19,.86); }
.vp-d-kitchen { margin:6px 0 0; font:400 13px/1.45 var(--sans); color:var(--text-mute); }
.vp-studio-sub { opacity:.85; }
.ac-price-row .ac-orig { text-decoration:line-through; }
/* legacy detail/overlay bits still used by the simple (non-PDP) detail */
.vp-tag { position:absolute; top:10px; left:10px; background:var(--brand); color:#fff; font:500 13px/1 var(--mono); padding:6px 9px; border-radius:999px; }
.vp-sold { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); color:#fff; font:500 18px 'Fraunces',serif; }
/* Rezervovaný kus zůstává ve výpisu — mizí jen CTA. Štítek má vlastní barvu,
   aby se nepletl s „Prodáno": rezervaci lze zrušit, prodej ne. */
.vp-flag-reserved { background:#b9802f; color:#fff; font:600 11px/1 var(--sans); padding:4px 8px; border-radius:999px; }
.vp-reserved { background:#b9802f; color:#fff; font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-xs); }
/* Nad fotkou detailu vpravo — vlevo už sedí štítek slevy (.vp-tag). */
.vp-d-main .vp-reserved { position:absolute; top:10px; right:10px; z-index:2; }
.vp-cat { font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute); }
.vp-name { font:400 19px/1.25 'Fraunces',serif; margin:0; }
.vp-note { font-size:13px; color:var(--text-mute); margin:0; }
/* flex-wrap kvůli `.ac-price-note` („… bez DPH"): bez něj flexbox ignoruje
   její display:block a naskládá ji VEDLE ceny, ne pod ni — táž past jako
   u `.ac-price` / `.pdp-price` výš. */
.vp-prices { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-top:2px; }
.vp-prices .ac-price-note { gap:0; margin-top:4px; font-size:12px; }
.vp-old { text-decoration:line-through; color:var(--text-mute); font-size:14px; }
.vp-new { color:var(--text); font:500 18px var(--sans); }
.vp-studio { font:500 12px var(--mono); color:var(--text-mute); }
.vp-cta { margin-top:8px; align-self:flex-start; }
.vp-cta--disabled { opacity:.5; pointer-events:none; }
.vp-studio-cta { margin-top:28px; text-align:center; }

/* Sklad studia — sesterská sekcia výprodeja (rovnaké karty, iný odznak). */
.sk-flag-vyprodej { background: var(--brand); color: #fff; }
.sk-card .ac-subcat + .ac-subcat { margin-left: 8px; }
/* Sekce skladu na studiu = blok galerie (carousel) s nadpisem a tlačítkem;
   vnořený .st-gallery je také .st-blk, jeho svislý padding by se sčítal. */
.sk-studio-section .st-gallery { padding: 0; }
.sk-studio-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-bottom: 26px; }
.sk-studio-head .eyebrow { display: block; margin-bottom: 12px; }
.sk-studio-head-text { min-width: 0; }
.sk-studio-all { flex: none; }
/* Řádka s počítadlem a šipkami patří ke KARTÁM, ne doprostřed prázdna. */
.sk-studio-section .st-gal-ui { margin-top: 10px; }
.sk-detail .sk-meta, .sk-detail .sk-desc, .sk-detail .sk-note { margin-top: 12px; }
.sk-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 24px 0; }
.sk-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); }
.sk-item .ac-price-note { display: block; margin-top: 4px; }

/* ═══ Výprodej — editorial category tiles (Kuchyně / Vybavení) ═══
   Big photo buttons above the listing. Copy + photos are admin-editable
   (Stránky → Výprodej). A group with no items is muted and not clickable. */
.vp-tiles-wrap { padding-top:8px; padding-bottom:26px; }
.vp-tiles-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.vp-tiles-reset { background:none; border:0; cursor:pointer; padding:0;
  font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); }
.vp-tiles-reset:hover { color:var(--text); }
.vp-tiles { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:760px) { .vp-tiles { grid-template-columns:1fr 1fr; gap:22px; } }
/* Od 10. 9. 2026 jsou kocky TŘI (Kuchyně · Nábytek · Spotřebiče). Ve dvou
   sloupcích by třetí spadla sama na druhý řádek a vypadala jako přílepek;
   na širokém viewportu proto stojí vedle sebe. Dva sloupce zůstávají pro
   tablet, kde by tři byly na šířku nečitelné. */
@media (min-width:1080px) { .vp-tiles { grid-template-columns:repeat(3,1fr); } }

.vp-tile { position:relative; display:block; width:100%; text-align:left; padding:0; cursor:pointer;
  min-height:clamp(180px,26vh,260px); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--bg-elev-1,#221d18); color:var(--text);
  transition:border-color .25s, transform .25s; }
.vp-tile:hover { border-color:rgba(245,238,224,.34); transform:translateY(-2px); }
.vp-tile.is-on { border-color:var(--brand); }
.vp-tile-media { position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .6s cubic-bezier(.22,1,.36,1); }
.vp-tile:hover .vp-tile-media { transform:scale(1.04); }
.vp-tile-media--none { background:linear-gradient(135deg,#2a231c,#1c1813); }
/* legibility scrim under the copy */
.vp-tile-media::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(12,10,8,0) 30%,rgba(12,10,8,.82) 100%); }
.vp-tile-body { position:relative; display:flex; flex-direction:column; gap:6px;
  height:100%; justify-content:flex-end; padding:22px 24px; }
.vp-tile-title { font:400 clamp(24px,2.4vw,34px)/1.05 'Fraunces',Georgia,serif; color:#f5eee0; }
.vp-tile-text { font:400 14px/1.5 var(--sans); color:rgba(245,238,224,.76); max-width:44ch; }
.vp-tile-meta { display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:rgba(245,238,224,.66); }
.vp-tile-meta svg { width:14px; height:14px; transition:transform .25s; }
.vp-tile:hover .vp-tile-meta svg { transform:translateX(4px); }
.vp-tile--empty { cursor:default; opacity:.5; }
.vp-tile--empty:hover { transform:none; border-color:var(--line); }
.vp-tile--empty:hover .vp-tile-media { transform:none; }

/* ═══ Výprodej / Sklad — slim „kocky" kategorií ═══
   Úzká pilulka pod velkými dlaždicemi: název + počet vlevo, výřez produktu
   vpravo. Sada je stejná jako pásy ve výpisu (viz vpCatBoxes v app.js).

   ⚠ Kotouč pod produktem je SVĚTLÝ schválně a `multiply` je to, co dělá výřez:
   bílé pozadí fotky se do kotouče ztratí a zůstane jen produkt. Bez kotouče
   (čistý výřez na tmavé pilulce) byly černá trouba, mikrovlnka i varná deska
   neviditelné — vyzkoušeno. Aby se míchal JEN s kotoučem a ne s tmavou
   stránkou pod ním, musí být na kotouči `isolation: isolate`.

   ⚠ Kotouč kreslí až `vpCutoutProbe()` (třída `is-on`), a když se pro kategorii
   nenajde snímek na bílé, celý ho zahodí. Prázdné světlé kolečko vedle názvu
   vypadá jako chyba sazby. */
.vp-cbx-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.vp-cbx { display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  height:56px; padding:0 8px 0 20px; border:1px solid var(--line); border-radius:999px;
  background:rgba(245,238,224,.035); color:var(--text);
  transition:border-color .25s, background .25s; }
.vp-cbx:hover { border-color:rgba(245,238,224,.32); background:rgba(245,238,224,.08); }
.vp-cbx.is-on { border-color:var(--brand); background:rgba(200,38,44,.12); }
.vp-cbx-t { font:400 15px/1 var(--sans); color:#f5eee0; white-space:nowrap; }
.vp-cbx-n { font:500 11px/1 var(--mono); letter-spacing:.06em; color:rgba(245,238,224,.45); }
.vp-cbx-ph { flex:0 0 42px; width:42px; height:42px; margin-left:4px; display:block;
  border-radius:50%; overflow:hidden; isolation:isolate; }
.vp-cbx-ph.is-on { background:#efe8dc; box-shadow:0 0 0 1px rgba(245,238,224,.12); }
.vp-cbx-ph img { width:100%; height:100%; object-fit:contain; display:block; padding:5px;
  mix-blend-mode:multiply; transition:transform .3s cubic-bezier(.22,1,.36,1); }
.vp-cbx:hover .vp-cbx-ph img { transform:scale(1.09); }
@media (max-width:720px) {
  .vp-cbx-row { gap:8px; margin-top:18px; }
  .vp-cbx { height:48px; padding:0 7px 0 16px; gap:8px; }
  .vp-cbx-t { font-size:13.5px; }
  .vp-cbx-ph { flex-basis:36px; width:36px; height:36px; }
}

/* Výprodej reservation: a displayed piece stands in ONE studio, so its ateliér
   select is locked to that branch (no caret, no menu) with a short explanation. */
.sel.is-locked .sel-trigger { pointer-events:none; opacity:.9; }
.sel.is-locked .sel-caret { display:none; }
.kp-lock-note { margin-top:8px; font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--text-dim); }
/* `.btn.solid` is a dark GLASS pill meant for dark sections: over `.catalog-paper`
   its 55%-alpha fill composites to a mid grey, and `--text` is flipped to the dark
   paper ink — a washed 4.05:1 label. On a paper panel make the pill genuinely
   solid so the cream label reads properly. (Hover keeps #fff on brand red.) */
.catalog-paper .btn.solid {
  background: rgba(20,16,12,0.94);
  border-color: rgba(20,16,12,0.94);
  color: #f5eee0;
}
/* modal */
.vp-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
.vp-modal-back { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.vp-modal-card { position:relative; background:var(--bg-panel); color:var(--text-paper); max-width:440px; width:92%; border-radius:var(--r-lg); padding:34px 30px; }
.vp-modal-x { position:absolute; top:12px; right:14px; background:none; border:0; font-size:26px; cursor:pointer; color:inherit; }
.vp-modal-title { font:400 24px 'Fraunces',serif; margin:8px 0 4px; }
.vp-modal-sub { color:var(--text-mute-paper); margin-bottom:18px; }
.vp-modal-form { display:flex; flex-direction:column; gap:12px; }
.vp-modal-form label { display:flex; flex-direction:column; gap:5px; font:500 12px var(--mono); text-transform:uppercase; letter-spacing:.05em; }
.vp-modal-form input, .vp-modal-form textarea { padding:10px 12px; border:1px solid rgba(0,0,0,.18); border-radius:var(--r-sm); font:400 15px var(--sans); background:#fff; color:#1a1713; }
.vp-res-msg { color:var(--brand); font-size:13px; }
.vp-res-ok { font:400 16px/1.6 var(--sans); }

/* Card links — reset anchor style so the card photo + title are clickable */
.vp-media-link { display:block; text-decoration:none; color:inherit; }
.vp-name-link { text-decoration:none; color:inherit; }
.vp-name-link:hover .vp-name { text-decoration:underline; text-underline-offset:3px; }

/* ═══ Výprodej detail ═══ */
.vp-detail { padding:40px var(--gutter,24px) 80px; }
/* Pás „Další z tohoto studia" pod JEDNODUCHÝM detailem výprodeje (kus, který
   není napojený na katalog). Leží UVNITŘ krémového listu `.vp-detail-sheet`,
   takže barvy karet si `.pdp-related-grid` bere z jeho přepsaných tokenů —
   stejně jako v znovupoužitém katalogovém PDP, aby obě podoby detailu
   vypadaly stejně. Přepisuje se jen svislý prostor: `.section` je 140 px
   a nad pásem už je 80 px z `.vp-detail`. */
.vp-d-related { padding:56px 0 72px; border-top:1px solid var(--line); }
@media (max-width: 900px) { .vp-d-related { padding:36px 0 48px; } }
.vp-d-back { display:inline-flex; align-items:center; gap:6px; font:500 13px var(--mono); color:var(--text-mute); text-decoration:none; margin-bottom:32px; transition:color .2s; }
.vp-d-back:hover { color:var(--text); }
.vp-d-layout { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.vp-d-gallery { display:flex; flex-direction:column; gap:12px; }
.vp-d-main { position:relative; aspect-ratio:4/3; background:#fff; border-radius:var(--r-md); overflow:hidden; }
.vp-d-main img { width:100%; height:100%; object-fit:contain; display:block; }
.vp-d-main--sold .vp-tag { display:none; }
.vp-d-thumbs { display:flex; gap:8px; flex-wrap:wrap; }
.vp-d-thumb { width:76px; height:76px; border-radius:var(--r-sm); background-size:cover; background-position:center; background-color:#fff; border:2px solid transparent; cursor:pointer; transition:border-color .2s; }
.vp-d-thumb:hover { border-color:var(--brand); }
.vp-d-info { display:flex; flex-direction:column; gap:16px; padding-top:4px; }
.vp-d-title { font:400 34px/1.2 'Fraunces',serif; margin:4px 0 0; }
.vp-d-prices { gap:12px; }
.vp-d-old { font-size:16px; }
.vp-d-new { font:600 26px/1 var(--sans); color:var(--text); }
.vp-d-tag { background:var(--brand); color:#fff; font:500 13px/1 var(--mono); padding:5px 9px; border-radius:999px; align-self:center; }
.vp-d-note { font-size:14px; color:var(--text-mute); margin:0; }
.vp-d-studio { font:500 13px var(--mono); color:var(--text-mute); margin:0; }
.vp-d-studio a { color:var(--text-mute); text-decoration:underline; text-underline-offset:3px; transition:color .2s; }
.vp-d-studio a:hover { color:var(--text); }
/* POPIS — a jen on — jde POD fotky přes celou šířku. Rozhodl o tom tvar, ne
   vkus: u konvektomatu MIELE stál 882 px vysoký sloupec textu vedle 486 px
   vysoké fotky, takže stránka pod fotkou pokračovala jen napravo. „Rezervovat"
   i zavřená harmonika s parametry ZŮSTÁVAJÍ ve sloupci vedle fotek. */
.vp-d-lead { margin:44px 0 0; }
.vp-d-lead .eyebrow { display:block; margin-bottom:12px; }
.vp-d-lead-body { font:400 16px/1.7 var(--sans); color:var(--text); }
.vp-d-lead-body p { margin:0 0 .85em; }
.vp-d-lead-body p:last-child { margin-bottom:0; }
.vp-d-lead-body .vp-d-h { margin-top:1.4em; }
.vp-d-lead-body .vp-d-h:first-child { margin-top:0; }
/* Dva sloupce až tam, kde je řádek jinak přes 100 znaků. Sloupce se lámou po
   odstavcích (`break-inside`), takže se věta nerozdělí přes zlom. */
@media (min-width:1100px) {
  .vp-d-lead-body { columns:2; column-gap:56px; }
  .vp-d-lead-body > * { break-inside:avoid; }
}
/* Přednosti si z katalogového PDP nesou vlastní dělicí linku (`.pdp-usps`
   border-top) a v detailu výprodeje navazují rovnou na popis — vyšla z toho
   čárka těsně pod „POPIS". Uvnitř detailu se nekreslí, odsazení dělá padding.
   Zároveň se ruší jejich vlastní gutter: `.vp-detail` ho už má, takže se obsah
   předností odsazoval o jeden gutter víc než popis nad ním. */
.vp-detail .pdp-usps { border-top:0; padding:72px 0 0; }
.vp-detail .vp-cta { margin-top:4px; }
@media (max-width:760px) {
  .vp-d-layout { grid-template-columns:1fr; gap:28px; }
  .vp-d-title { font-size:26px; }
  .vp-d-new { font-size:22px; }
  .vp-detail { padding:24px var(--gutter,16px) 60px; }
}

/* ═══ Výprodej — clearance banner + extras over a reused appliance PDP ═══ */
.vp-pdp-banner { max-width:var(--container); margin:0 auto; padding:14px var(--gutter,16px) 0; }
.vp-pdp-banner-row { display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:16px 18px; border-radius:var(--r-md); background:rgba(0,0,0,.05); }
.appl-shop-page .vp-pdp-banner-row { background:rgba(0,0,0,.04); }
.vp-pdp-owner { font:500 13px/1 var(--mono); letter-spacing:.04em; opacity:.7; }
.vp-pdp-banner-row .vp-cta { margin-left:auto; }
.vp-pdp-extra { display:grid; gap:24px; margin-top:16px;
  padding:18px; border-radius:var(--r-md); border:1px solid var(--line,rgba(0,0,0,.1)); }
.vp-pdp-extra .eyebrow { display:block; margin-bottom:8px; }
.vp-pdp-extra-text p { font:400 15px/1.65 var(--sans); margin:0 0 .8em; }
.vp-pdp-extra-text p:last-child { margin-bottom:0; }
@media (min-width:880px) { .vp-pdp-extra { grid-template-columns:1fr 1fr; align-items:start; } }

/* ═══ Výprodej — telo detailu z HTML šablony ═══
   Typografie karty spotřebiče, aby výprodej nevypadal jako jiná, horší třída
   zboží. Přednosti si vlastní CSS neberou — používají .pdp-usps* z PDP.
   `overflow-x` je tu kvůli široké tabulce parametrů: rolovat smí sama v sobě,
   stránka se vodorovně posouvat nesmí. */
/* Tělo sedí v PRAVÉM sloupci pod tlačítkem „Rezervovat", ne pod celým
   dvojsloupcem — tam viselo přes celou šířku uprostřed stránky a nepatřilo
   k ničemu. Stejné místo, jaké má harmonika na detailu nábytku.
   `min-width: 0` je nutné: v gridovém sloupci by široká tabulka parametrů
   sloupec roztáhla, místo aby rolovala sama v sobě. */
.vp-d-body { margin: 28px 0 0; min-width: 0; }
.vp-d-body .vp-d-h { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 27px); line-height: 1.25; margin: 34px 0 12px; }
.vp-d-body p { margin: 0 0 14px; line-height: 1.65; }
.vp-d-body .vp-d-ul { margin: 0 0 18px; padding-left: 20px; }
.vp-d-body .vp-d-ul li { margin: 0 0 7px; line-height: 1.6; }
.vp-d-specs { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.vp-d-specs td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vp-d-specs tr td:first-child { width: 42%; opacity: .7; }

/* Výprodej catalog filter bar */
.vp-hero { padding-top:clamp(48px,8vh,96px); padding-bottom:32px; }
.vp-lead { font:400 16px/1.7 var(--sans); color:var(--text-mute); margin:12px 0 0; max-width:560px; }
.vp-shell { padding-top:0; }
.vp-facets-bar .row { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.vp-facets-bar .appl-facets { flex:1 1 auto; margin:0; padding:0; border-bottom:0; }
.vp-facets-bar .cat-search-mount { flex:0 0 auto; padding-left:12px; border-left:1px solid var(--line); }
/* MOBIL — /vyprodej má SEDM pilulek, ne jednu rolující řádku chipů jako
   /nabytok a vzorkovníky, takže se sem jejich vzor nedá opsat celý:
   `overflow-x: auto` na `.appl-facets` by ořízlo rozbalené menu (je uvnitř
   `position: absolute`), a nowrap řádka se search boxem 297 px vytlačila
   hledání mimo obrazovku (platilo UŽ PŘED sedmi pilulkami — naměřeno na
   390 px: `searchRight` 433 při `vw` 390) a `.appl-facets` zmáčkla tak, že
   každá pilulka spadla na vlastní řádek (6 řádků, 296 px lišty).
   Řešení je stejné jako všude jinde — sloupec, hledání přes celou šířku —
   a k tomu ZRUŠENÁ sticky: napevno přišpendlený filtr vysoký přes 200 px
   sežere na telefonu čtvrtinu obrazovky u každého kusu mřížky. */
@media (max-width: 768px) {
  .vp-facets-bar { position: static; margin-bottom: 24px; }
  .vp-facets-bar .row { flex-direction: column; align-items: stretch; gap: 10px; }
  .vp-facets-bar .cat-search-mount { width: 100%; margin: 0; padding: 0; border-left: 0; }
  .vp-facets-bar .appl-fb-pill { flex: 0 0 auto; }
}
.vp-empty { font:400 16px/1.7 var(--sans); color:var(--text-mute); padding:48px 0 80px; }
/* „Zvolené filtry nic nenašly" — cesta ven musí být v té větě, ne jen v liště
   nad mřížkou: na mobilu je lišta v tu chvíli odscrollovaná pryč. */
.vp-empty-clear {
  font: inherit; color: var(--brand-hi); background: none; border: none; padding: 0;
  cursor: pointer; border-bottom: 1px solid currentColor;
}
#vp-results .atr-head { margin-top:32px; }
#vp-pager { margin-top:32px; }

/* ═══ Produkty — category view (kompozice carousel + bound furniture catalog) ═══ */
/* Set 2026-06-24: a Produkty category shows its curated kompozice in a carousel
   then the nábytek catalog scoped to that category (white paper, like /spotřebiče). */
.prod-cat { padding-top: 8px; padding-bottom: 96px; }
/* When the e-shop furniture catalog is present it pads its own bottom (140px),
   so don't double it. Short views (world grid / kompozice-only subcats) keep the
   96px so the content never crowds the footer CTA. */
.prod-cat:has(.prod-furniture) { padding-bottom: 0; }
.shop-landing-hint {
  max-width: 540px; margin: 0 auto; padding: 56px 0 96px; text-align: center;
  font-size: 16px; line-height: 1.7; color: var(--text-mute);
}
.prod-cat-head { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; padding-bottom: 8px; }
.prod-cat-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute); background: none; border: 0; cursor: pointer; padding: 0;
  transition: color .25s ease;
}
.prod-cat-back:hover { color: var(--text); }
.prod-cat-back-ico { display: inline-flex; transform: rotate(180deg); }
.prod-cat-back-ico svg { width: 15px; height: 15px; }
.prod-cat-head h2 {
  font-family: var(--serif); font-weight: 300; letter-spacing: -0.02em;
  font-size: clamp(30px, 4vw, 52px); line-height: 1.05; margin: 0;
}
.prod-komp { margin-top: 24px; }
.prod-komp > .eyebrow { display: block; margin-bottom: 16px; }
.prod-komp .prod-komp-vp { margin: 0 -2px; }
.prod-furniture { margin-top: 56px; padding-top: 8px; border-top: 1px solid var(--line); }
.prod-furniture-intro { padding-top: 32px; }
.prod-furniture-intro > .eyebrow { display: block; }
/* The scoped furniture filter bar sits inside the dark page; keep its sticky
   offset consistent with the standalone /nabytok bar. */
.prod-furniture .nab-filters { margin-top: 12px; }
.prod-komp .appl-cat-scroll .prod-card { flex: 0 0 320px; scroll-snap-align: start; }
/* /shop — a category card is the SAME size in a grid (world / search / line) and
   in a carousel (sub-category kompozice + landing). The GRIDS keep the default
   .prod-grid behaviour: repeat(3,1fr) → cards GROW to fill the width (right edge
   aligned), 2-col ≤1100, 1-col ≤640. The CAROUSELS track that grid column width
   via calc so their cards grow to match (grid col-gap is 32px → 3-col column =
   (100% − 64px)/3, 2-col = (100% − 32px)/2). Scoped to .prod-cat so /spotrebice
   + /nabytok keep their 320px carousel cards. (2026-06-25) */
.prod-cat .appl-cat-scroll { gap: 32px; }   /* match the grid's 32px column gap so a carousel is spaced like the world grid */
.prod-cat .appl-cat-scroll .appliance-card,
.prod-cat .appl-cat-scroll .prod-card {
  flex: 0 0 calc((100% - 64px) / 3);
  scroll-snap-align: start;
}
@media (max-width: 1100px) {
  .prod-cat .appl-cat-scroll .appliance-card,
  .prod-cat .appl-cat-scroll .prod-card { flex-basis: calc((100% - 32px) / 2); }
}
@media (max-width: 640px) {
  .prod-cat .appl-cat-scroll .appliance-card,
  .prod-cat .appl-cat-scroll .prod-card { flex-basis: 80vw; }
}

/* ═══ Kolekce — návrhové řady cards (2026-06-24) ═══ */
.kol-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.kol-line-card { display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-elev-1); border: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: transform .4s ease, border-color .3s ease; }
.kol-line-card:hover { transform: translateY(-4px); border-color: var(--brand); }
.kol-line-media { aspect-ratio: 4/3; overflow: hidden; background: rgba(255,255,255,.03); }
.kol-line-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.kol-line-card:hover .kol-line-media img { transform: scale(1.04); }
.kol-line-ph { width: 100%; height: 100%; background: linear-gradient(135deg, rgba(200,38,44,.12), rgba(255,255,255,.03)); }
.kol-line-body { padding: 20px 22px 24px; }
.kol-line-name { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2vw, 30px); margin: 0; }
.kol-line-tag { font: 400 14px/1.6 var(--sans); color: var(--text-mute); margin: 8px 0 0; }
.kol-line-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.kol-line-card:hover .kol-line-go { color: var(--brand); }
.kol-line-go svg { width: 14px; height: 14px; }

/* ═══ Produkty mega-drill in the menu drawer (2026-06-24) ═══ */
.nav-mm { position: relative; }
.nav-mm-eyebrow { display: block; font: 500 11px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-mute); padding: 4px 0 10px; }
.nav-mm-prod { padding-bottom: 0; margin-bottom: 26px; }
.nav-mm-world { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 0; background: none; border: 0; cursor: pointer; text-decoration: none;
  font-family: var(--serif); font-size: 20px; font-weight: 300; color: rgba(245,238,224,.86); text-align: left;
  transition: color .2s ease; }
.nav-mm-world:hover { color: #fff; }
.nav-mm-world--lead:hover { color: #fff; }
.nav-mm-chev { width: 18px; height: 18px; flex: 0 0 auto; opacity: .5; transition: transform .2s ease, opacity .2s ease; }
.nav-mm-world:hover .nav-mm-chev { opacity: 1; transform: translateX(3px); }
/* level 1 — world detail. Visibility is driven SOLELY by the .show-l1 class so
   stepping back never leaves the detail stacked under the worlds list. */
.nav-mm-l1 { display: none; }
.nav-mm.show-l1 .nav-mm-l0 { display: none; }
.nav-mm.show-l1 .nav-mm-l1 { display: block; animation: navMmIn .3s ease both; }
@keyframes navMmIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.nav-mm-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute);
  padding: 4px 0 14px; transition: color .2s ease; }
.nav-mm-back:hover { color: #fff; }
.nav-mm-back svg { width: 16px; height: 16px; }
.nav-mm-title { display: block; font-family: var(--serif); font-weight: 300; font-size: 30px;
  color: #fff !important; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.nav-mm-subs { display: flex; flex-direction: column; padding: 6px 0 4px; }
.nav-mm-subs a { display: block; padding: 13px 0; font-family: var(--serif); font-size: 18px; font-weight: 300;
  color: rgba(245,238,224,.82) !important; border-bottom: 1px solid var(--line); }
.nav-mm-subs a:last-child { border-bottom: 0; }
.nav-mm-subs a:hover { color: #fff !important; }
.nav-mm-prods { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 18px; }
.nav-mm-pcard { display: block; text-decoration: none; }
.nav-mm-pthumb { display: block; aspect-ratio: 4/3; border-radius: var(--r-sm); overflow: hidden; background: rgba(255,255,255,.05); }
.nav-mm-pthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nav-mm-pcard:hover .nav-mm-pthumb img { transform: scale(1.05); }
.nav-mm-pname { display: block; margin-top: 8px; font: 400 13px/1.35 var(--sans); color: rgba(245,238,224,.8); }
.nav-mm-pcard:hover .nav-mm-pname { color: #fff; }

/* ═══════ /nabytok — variant picker (agency reference: „Konfigurovatelný produkt") ═══════
   The info card shows only the CHOSEN option per axis; the pickers are full-width bands
   under the product block. The size band's cards are the dimensioned drawings — which is
   what a kóta is for, and it retires the „Přesně na míru" section they used to sit in. */

/* Chosen-option rows in the info card */
.pv-choices { margin: 22px 0 4px; display: flex; flex-direction: column; gap: 10px; }
.pv-choice {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-elev-1);
}
.pv-choice-thumb {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--r-xs);
  overflow: hidden; background: #fff; display: grid; place-items: center;
}
.pv-choice-thumb img { width: 100%; height: 100%; object-fit: contain; }
/* A decor thumb is a swatch photo with a printed wordmark in a corner — crop past it,
   exactly as the strip's cards do. */
.pv-choice[data-pv-choice="barva"] .pv-choice-thumb img {
  object-fit: cover; transform: scale(1.35); transform-origin: 62% 38%;
}
/* …except a fabric texture, which has no wordmark to crop past. */
.pv-choice[data-pv-choice="barva"] .pv-choice-thumb img.pv-tex,
.pv-dd-thumb img.pv-tex { object-fit: cover; transform: none; }
.pv-choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pv-choice-axis {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-dim);
}
.pv-choice-val { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-choice-edit {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); border-bottom: 1px solid transparent; padding: 2px 0;
}
.pv-choice-edit:hover { border-bottom-color: var(--brand); }

/* Let the price (and its two rules) breathe away from the option rows. Scoped to the
   sibling selector so the appliance detail, which has no option rows, is untouched. */
.pv-choices + .pdp-price { margin-top: 20px; }

/* Collapsible rows under the CTA. Hairlines separate CLOSED rows; an open row drops its
   own rules and sits on a soft panel instead, so the expanded content isn't sliced up. */
.pdp-acc { margin-top: 26px; border-top: 1px solid var(--line); }
.pdp-acc-row { border-bottom: 1px solid var(--line); transition: background .18s ease; }
.pdp-acc-row[open] {
  border-bottom-color: transparent; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg-elev-2) 55%, transparent);
  margin: 6px 0;
}
.pdp-acc-row[open] + .pdp-acc-row { border-top: 1px solid var(--line); }
.pdp-acc-row > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 12px;
}
.pdp-acc-row > summary::-webkit-details-marker { display: none; }
.pdp-acc-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pdp-acc-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-dim); }
.pdp-acc-row[open] .pdp-acc-icon { color: var(--brand); }
.pdp-acc-label { font-size: 14px; color: var(--text); }
.pdp-acc-chev {
  width: 9px; height: 9px; border-right: 1.5px solid var(--text-dim); border-bottom: 1.5px solid var(--text-dim);
  transform: rotate(-45deg); transition: transform .2s ease; flex: 0 0 auto; margin-right: 4px;
}
.pdp-acc-row[open] .pdp-acc-chev { transform: rotate(45deg); }
.pdp-acc-body { padding: 0 12px 20px; }
/* No hairline stripes inside an open row: the specs table rules its own rows, and
   stacked on the panel they read as a fence. Rows are separated by rhythm instead. */
.pdp-acc-body .specs-table > div { border: 0; padding: 7px 0; }
.pdp-acc-body .specs-table > div + div { border-top: 0; }
.pdp-acc-body .specs-table dt { color: var(--text-dim); }
.pdp-acc-body > p { color: var(--text-mute); }
.pdp-acc-body .specs-table { margin-top: 0; }
.nab-dims-fig { margin: 0 0 20px; border-radius: var(--r-md); overflow: hidden; background: #fff; }
.nab-dims-fig[hidden] { display: none; }
.nab-dims-fig img { display: block; width: 100%; height: auto; }
.nab-dims-dl { max-width: 420px; }

/* KOINOR 3D configurator link — a secondary, clearly OUTBOUND row under the
   poptávka CTA. Deliberately not a second solid pill: it must not compete with
   the primary action, and it leaves the site. Rendered only for the séries the
   manufacturer's configurator actually carries (see koinorConfigUrl in app.js). */
.nab-cfg {
  display: flex; align-items: center; gap: 14px; margin-top: 12px;
  padding: 14px 18px; border-radius: var(--r-md); text-decoration: none;
  border: 1px solid var(--line); color: var(--text);
  transition: border-color 240ms ease, background 240ms ease;
}
.nab-cfg:hover { border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.04); }
.nab-cfg-ico { flex: none; display: flex; color: var(--brand); }
.nab-cfg-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nab-cfg-txt b { font-weight: 500; font-size: 15px; }
.nab-cfg-txt em {
  font-style: normal; font-size: 12.5px; color: var(--text-mute); line-height: 1.35;
}
.nab-cfg-arw { flex: none; margin-left: auto; color: var(--text-mute); transition: transform 240ms ease; }
.nab-cfg:hover .nab-cfg-arw { transform: translateX(3px); }

/* V4: vlastní konfigurátor nábytku. Od 1. 9. 2026 je to PILULKA v jedné řadě
   s „Poslat poptávku" (`.btn.brand.pill`), ne karta pod ním: široký obdélník
   s podtitulkem vypadal jako banner, ne jako akce. Slot kolem něj drží místo
   v řádku i tehdy, když kus napojený není — a `flex: 1` na `.qty-row .btn` by
   se přes `<span>` obalu neprosadilo, proto se dědí sem.
   ⚠ Prázdný slot NESMÍ v řádku zabírat mezeru (`gap: 12px` by za tlačítkem
   nechal viset vzduch), proto `:empty { display: none }`. */
.nab-kc-slot { display: flex; flex: 1; }
.nab-kc-slot:empty { display: none; }
.nab-kc-slot .nab-kc { flex: 1; }
/* KOINOR (`.nab-cfg` bez `.nab-kc`) zůstává kartou — vede VEN z webu, na stránku
   výrobce, a to je jiný druh kroku než sestavit si kus u nás. */
a.btn.nab-kc { text-decoration: none; }

/* Decor strip — sits under the gallery, next to the thing it colours.
   `min-width: 0` is load-bearing: a horizontally-scrolling flex track inside a grid
   column otherwise sizes the COLUMN to its content, and the 11 swatches pushed the
   product's left column to 1330px while the info card collapsed to 221px. */
.pdp-shop-left { min-width: 0; }
.pv-decors { margin-bottom: 20px; min-width: 0; }
.pv-decors-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.pv-axis-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-dim);
}
.pv-band-nav { display: flex; gap: 8px; }
.pv-band-arrow {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.pv-band-arrow:hover { border-color: var(--brand); color: var(--brand); }
.pv-band-arrow svg { width: 16px; height: 16px; }

.pv-band-track {
  display: flex; gap: 12px; overflow-x: auto; scroll-behavior: auto;
  padding-bottom: 6px; scrollbar-width: none; min-width: 0; max-width: 100%;
}
.pv-band-track::-webkit-scrollbar { display: none; }

.pv-card {
  flex: 0 0 auto; width: 110px; padding: 0; border: 0; background: none; cursor: pointer;
  text-align: left; display: flex; flex-direction: column; gap: 6px;
}
.pv-card-media {
  position: relative; display: block; border-radius: var(--r-xs); overflow: hidden;
  background: #fff; border: 1px solid var(--line); aspect-ratio: 1 / 1;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pv-card:hover .pv-card-media { border-color: var(--text-dim); }
.pv-card.is-active .pv-card-media { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.pv-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; }
/* Material swatch photos carry a printed wordmark ("XTREME …") in a corner. At card
   size it reads as a stray glyph, so zoom past it — the texture is uniform. */
.pv-card-img--swatch { object-fit: cover; padding: 0; transform: scale(1.35); transform-origin: 62% 38%; }
/* Vendor FABRIC textures (Calligaris/Connubia `furniture-fabrics/`) fill the tile
   edge to edge — but WITHOUT the zoom above: that crop only exists to dodge a
   printed wordmark, and a woven texture has none to dodge. Zooming would just
   throw away resolution. */
.pv-card-img--tex { object-fit: cover; padding: 0; }
.pv-card-none { position: absolute; inset: 0; background: var(--bg-elev-2); }
.pv-card-tick {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand); color: #fff;
  opacity: 0; transform: scale(.8); transition: opacity .16s ease, transform .16s ease;
}
.pv-card-tick svg { width: 12px; height: 12px; }
.pv-card.is-active .pv-card-tick { opacity: 1; transform: none; }
.pv-card-name { font-size: 11px; line-height: 1.25; color: var(--text); }
.pv-card-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); margin-top: -4px;
}

@media (max-width: 680px) {
  .pv-card { width: 92px; }
  .pv-band-nav { display: none; }
}

/* Size / edge / finish: a dropdown under its own „změnit" */
.pv-choice { position: relative; }
.pv-choice--static .pv-choice-body { padding-right: 6px; }
.pv-dd {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; left: 0;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-elev-1);
  box-shadow: 0 18px 40px rgba(0,0,0,.14); padding: 6px; max-height: 320px; overflow-y: auto;
}
.pv-dd[hidden] { display: none; }
.pv-dd-opt {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px;
  border: 0; background: none; border-radius: var(--r-xs); cursor: pointer; text-align: left;
}
.pv-dd-opt:hover { background: var(--bg-elev-2); }
.pv-dd-thumb {
  flex: 0 0 auto; width: 54px; height: 40px; border-radius: var(--r-xs);
  overflow: hidden; background: #fff; display: grid; place-items: center;
}
.pv-dd-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pv-dd-name { flex: 1 1 auto; font-size: 14px; color: var(--text); }
.pv-dd-tick { flex: 0 0 auto; width: 16px; height: 16px; color: var(--brand); opacity: 0; }
.pv-dd-tick svg { width: 100%; height: 100%; }
.pv-dd-opt.is-active .pv-dd-tick { opacity: 1; }
.pv-dd-opt.is-active .pv-dd-name { color: var(--brand); }

/* Card meta: "9 barev · 3 rozměry" — tells the grid there is more inside,
   without paying for nine thumbnails per card. Swatches live on the PDP. */
.ac-variants { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--text-dim); }
.nab-dims-fig[hidden] { display: none; }

/* Configurator CTA — centered under the stage. `.kc` is a dark section, so the
   button must be `.btn.solid`; a plain `.btn` hover-fills with `--bg` and vanishes. */
.kc-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 56px;
  text-align: center;
}
.kc-cta-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin: 0;
}
/* AI disclosure (JS: kcNoteHTML). Lives under the mood section's heading —
   .kc-note--head — so it is read before the photos it describes. We say it out
   loud rather than let someone else say it for us, so it is set as editorial
   copy (mono eyebrow + the sentence in the reading sans), not as fine print
   under the CTA where it read as something we hoped nobody would notice. */
.kc-note-head {
  max-width: 640px;
  margin: 20px auto 0;
  text-align: center;
}
.kc-note-head p {
  margin: 10px 0 0;
  font-size: clamp(13.5px, 0.95vw, 15px);
  line-height: 1.6;
  color: var(--text-mute);
  text-wrap: balance;
}
/* Standalone fallback — only reached when the kitchen_mood block was removed. */
.kc-note {
  padding: 0 0 clamp(56px, 7vw, 96px);
  background: var(--bg);
}
.kc-note-in {
  max-width: 720px;
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--line);
  text-align: center;
}
.kc-note-in p {
  margin: 14px 0 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.65;
  color: var(--text-mute);
  text-wrap: balance;
}
@media (max-width: 720px) {
  .kc-cta { margin-top: 36px; }
}

/* ═══ Zakázky (muj-ucet + editor) — dark editorial redesign, F1 ═══ */
/* Status = left accent bar + label, NOT the old eshop's full-row fills. */
.zk-filters { display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:0 0 18px; }
.zk-filters input[type="search"], .zk-filters select {
  background: var(--at-input-bg); color: var(--at-text); border: 1px solid var(--at-line-strong);
  border-radius: var(--r-sm); padding: 10px 14px; font: inherit; min-width: 220px;
}
.zk-filters input[type="search"] { flex: 1; }
/* Filtr studia a obchodníka nese od 27. 8. 2026 jméno studia i s městem
   („Classic Praha CZ s.r.o. · Čestlice"), ne tříznakovou zkratku. Na 220 px se
   to nevešlo a rozbalený seznam byl podle uživatele „strašně úzký" — nabídka
   dědí šířku po zavřeném <select>, takže ji NEROZŠÍŘÍ nic, co je uvnitř.
   `width: auto` nechá pole růst podle nejdelší položky, `max-width` mu brání
   sežrat celý řádek a `flex-shrink: 0` ho drží nad `min-width`, když se řádek
   zalomí — jinak by ho pružné hledací pole zase stlačilo. */
.zk-filters select { width: auto; max-width: min(380px, 100%); flex: 0 0 auto; }
@media (max-width: 700px) {
  /* Na mobilu je řádek jednosloupcový, takže plná šířka je čitelnější
     než tři pole vedle sebe, z nichž každé uřízne konec názvu. */
  .zk-filters select { max-width: 100%; width: 100%; }
}
.zk-inactive { display:flex; gap:8px; align-items:center; font-size:13px; color: var(--at-mute); }
/* Ledger rows — the atelier's signature: entries in a zakázková kniha.
   Hairline lines + a 2px status spine, no card chrome. */
.zk-row { position:relative; display:flex; justify-content:space-between; gap:16px; align-items:center;
  padding:14px 14px 14px 20px; border-bottom: 1px solid var(--at-line-soft);
  transition: background 0.12s ease; }
.zk-row:hover { background: var(--at-panel); }
.zk-row::before { content:''; position:absolute; left:0; top:10px; bottom:10px; width:2px; border-radius:1px; background: var(--at-line-strong); }
.zk-row.zk-nova::before  { background: var(--at-nova); }
.zk-row.zk-roz::before   { background: var(--at-roz); }
.zk-row.zk-plat::before  { background: var(--at-plat); }
.zk-row.zk-exsp::before  { background: var(--at-exsp); }
.zk-row.zk-ztrac::before { background: var(--at-ztrac); }
.zk-row.zk-zisk::before  { background: var(--at-zisk); }
.zk-main { display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; min-width:0; }
.zk-code { font-family: var(--mono); font-size: 0.95rem; font-weight: 500; letter-spacing:.05em;
  color: var(--at-text); background: none; border: none; padding: 0; cursor:pointer;
  transition: color 200ms ease; }
.zk-code:hover { color: var(--brand); }
/* Starý e-shop (old-eshop import): badge + old-identifiers meta line */
.zk-old { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--at-mute); border: 1px solid var(--at-line); border-radius: 999px; padding: 3px 9px;
  white-space: nowrap; display: inline-block; }
.zk-old-meta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em;
  color: var(--at-mute); margin: 10px 0 0; }
.zk-actions { display:flex; gap:14px; align-items:center; flex-shrink:0; }
.zk-pager { display:flex; gap:12px; align-items:center; justify-content:center; padding:10px; }

/* Návrh editor */
.nv-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.nv-tab { position:relative; padding:9px 16px; border:1px solid var(--at-line); border-radius:999px;
  font-size:13px; color: var(--at-mute); background: var(--at-panel); cursor:pointer; }
.nv-tab.active { color: var(--at-text); border-color: var(--at-line-strong); background: var(--at-panel-2); }
.nv-tab .dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:8px; background: var(--at-line-strong); }
.nv-tab { display: inline-flex; align-items: center; }
.nv-tab-x { display: none; align-items: center; margin-left: 8px; color: var(--at-dim); border-radius: 50%; }
.nv-tab-x svg { width: 12px; height: 12px; }
.nv-tab:hover .nv-tab-x { display: inline-flex; }
.nv-tab-x:hover { color: var(--brand); }
.nv-tab.zk-roz .dot { background:var(--at-roz); } .nv-tab.zk-plat .dot { background:var(--at-plat); }
.nv-tab.zk-exsp .dot { background: var(--at-exsp); } .nv-tab.zk-ztrac .dot { background: var(--at-ztrac); }
.nv-tab.zk-nova .dot { background: var(--at-nova); } .nv-tab.zk-zisk .dot { background:var(--at-zisk); }
.nv-section { margin: 26px 0; }
.nv-section > h3 { font-family: var(--serif); font-weight:300; font-size:22px; margin:0 0 4px; }
.nv-section > .atelier-sub { margin-bottom: 14px; display:block; }
.nv-row, .nv-rowhead { display:grid; grid-template-columns: 1fr 84px 120px 56px 110px 32px; gap:10px; align-items:center; }
.nv-row { padding:10px 0; border-bottom: 1px solid var(--at-line); }
/* Column captions. Without them the row is two bare number boxes side by side and the price
   gets typed into „Počet" — which then reads as „the total never updates", because a line
   with no unit price contributes nothing (reported on a live order, 2026-08-07).
   NOT a .nv-row: collectPatch() walks every .nv-row and would throw on the missing inputs. */
.nv-rowhead { padding:2px 0 6px; font-family: var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--at-dim); border-bottom: 1px solid var(--at-line); }
.nv-rowhead span:nth-child(2), .nv-rowhead span:nth-child(3) { text-align:left; }
.nv-rowhead span:nth-child(4), .nv-rowhead span:nth-child(5) { text-align:right; }
.nv-row input { background: transparent; border:none; border-bottom:1px solid var(--at-line-strong);
  color: var(--at-text); font: inherit; padding:6px 2px; min-width:0; }
.nv-row input:focus { outline:none; border-bottom-color: var(--brand); }
.nv-row input[readonly] { border-bottom-style: dotted; color: var(--at-mute); }
.nv-vat, .nv-sum { font-family: var(--mono); font-size: 12px; color: var(--at-mute); text-align:right; }
.nv-sum { color: var(--at-text); }
.nv-x { background:none; border:none; color: var(--at-dim); font-size:18px; cursor:pointer; }
.nv-x:hover { color: var(--brand); }
.nv-add { margin-top: 12px; }
.zk-basket { border:1px solid var(--at-line); border-radius: var(--r-md); padding:16px 18px; margin-bottom:12px;
  background: var(--at-panel); }
.zk-basket-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.zk-basket-params { font-family: var(--mono); font-size:11px; color: var(--at-dim); line-height:1.7; margin-top:8px; }
.zk-basket-thumbs { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.zk-basket-thumbs img { width:64px; height:64px; object-fit:cover; border-radius:var(--r-xs);
  border:1px solid var(--at-line); display:block; background:var(--at-panel); }
.zk-basket-docs { display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-family:var(--mono); font-size:11.5px; }
.zk-basket-docs a { display:inline-flex; align-items:center; gap:6px; color:var(--at-mute); text-decoration:none; }
.zk-basket-docs a:hover { color:var(--at-text); }
.zk-basket-refresh { margin-top:10px; font-size:12px; }
/* Imported Imos basket — read-only tiles + whole-kitchen render. */
.zk-imos-hero { border-radius: var(--r-md); overflow: hidden; margin-bottom: 14px; }
.zk-imos-hero img { width: 100%; height: auto; display: block; }
/* Per-basket toolbar above the kitchen render (editable návrh only). */
.zk-imos-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.zk-imos-tb {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 10px; border-radius: var(--r-xs);
  border: 1px solid var(--at-line, rgba(255,255,255,.14)); background: transparent;
  color: var(--at-mute); font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  transition: color .15s, border-color .15s;
}
.zk-imos-tb:hover { color: var(--at-text, var(--text)); border-color: var(--at-line, rgba(255,255,255,.3)); }
.zk-imos-tb--danger:hover { color: var(--brand); border-color: var(--brand); }
/* Reads as a stated reason, not a whisper. As plain dim text it sat invisible in
   the button row and sellers read the absent "Upravit" as a broken UI. */
.zk-imos-tb-note {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; line-height: 1.35;
  color: var(--at-text, var(--text));
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--at-line, rgba(255,255,255,0.14));
  border-radius: var(--r-xs); padding: 5px 10px;
}
.zk-imos-tb-note .ai { width: 14px; height: 14px; flex: 0 0 auto; color: var(--at-mute); }
/* Per-basket expander — understated centered toggle, split from the hero render by
   a top hairline (not a boxy folder-looking bar). Cabinet cards hidden until open. */
.zk-imos-cardsbtn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; cursor: pointer;
  margin-top: 18px; padding: 11px 12px; border: none;
  border-top: 1px solid var(--at-line, rgba(255,255,255,.12)); background: transparent;
  color: var(--at-mute); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  transition: color .15s;
}
.zk-imos-cardsbtn:hover { color: var(--at-text, var(--text)); }
.zk-imos-chev { width: 15px; height: 15px; transition: transform .2s ease; }
/* Smoothly-revealed block (submenu + cabinet grid + doplnky). grid-rows 0fr→1fr
   animates height with no fixed max-height. */
.zk-imos-reveal {
  display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden;
  transition: grid-template-rows .28s ease, opacity .28s ease;
}
.zk-imos-reveal-inner { min-height: 0; overflow: hidden; }
.zk-basket--imos.zk-imos--cards-open .zk-imos-reveal { grid-template-rows: 1fr; opacity: 1; }
.zk-imos--cards-open .zk-imos-chev { transform: rotate(180deg); }
/* Submenu bar inside the reveal. */
.zk-imos-submenu { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
/* Cabinet card grid — always grid (its visibility is the reveal's job now). */
.zk-imos-grid {
  display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.zk-imos--cards-open .zk-imos-card { animation: zkImosCardIn .3s ease both; }
@keyframes zkImosCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .zk-imos-reveal { transition: none; } }
.zk-imos-card {
  border: 1px solid rgba(0,0,0,.10); border-radius: var(--r-md);
  overflow: hidden; background: #fff;
}
.zk-imos-face { position: relative; aspect-ratio: 4 / 5; background: #fff; overflow: hidden; }
.zk-imos-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.zk-imos-ph { position: absolute; inset: 0; background: var(--at-panel-2, rgba(255,255,255,.06)); }
.zk-imos-cshade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.32), rgba(0,0,0,0) 42%); }
.zk-imos-cpill { position: absolute; top: 8px; left: 8px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.5); border-radius: 999px; padding: 3px 8px; }
/* Caption on the shade: name (left) + price (right, revealed by the price toggle). */
.zk-imos-cap { position: absolute; left: 10px; right: 10px; bottom: 9px; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 8px; }
.zk-imos-cname { color: #fff; font-family: var(--serif); font-weight: 300; font-size: 15px; line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,.6); }
/* ⓘ info button on the photo (top-right) */
.zk-imos-infobtn { position: absolute; top: 8px; right: 8px; z-index: 4; width: 30px; height: 30px; border-radius: 50%;
  border: none; cursor: pointer; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #1a1a1a;
  box-shadow: 0 2px 7px rgba(0,0,0,.22); padding: 0; transition: background .15s, color .15s; }
.zk-imos-infobtn:hover { background: #fff; }
.zk-imos-infobtn svg { width: 17px; height: 17px; }
.zk-imos-card.zk-imos--info-open .zk-imos-infobtn { background: var(--brand); color: #fff; }
/* Params overlay — fades + slides in smoothly over the photo when ⓘ is toggled. */
.zk-imos-info { position: absolute; inset: 0; z-index: 3; padding: 14px; overflow: auto;
  background: rgba(20,17,13,.93); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease; }
.zk-imos-card.zk-imos--info-open .zk-imos-info { opacity: 1; transform: translateY(0); pointer-events: auto; }
.zk-imos-info-h { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.zk-imos-cspecs { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: #fff; }
@media (max-width: 720px) { .zk-imos-grid { grid-template-columns: 1fr 1fr; } }
/* One price toggle per imported basket (price-tag), icon-only. Shown only once the
   product cards are expanded — hidden while the grid is collapsed. */
.zk-imos-headright { display: inline-flex; align-items: center; gap: 10px; }
.zk-imos-pricebtn {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 5px 9px; border-radius: var(--r-xs);
  border: 1px solid var(--at-line, rgba(255,255,255,.14)); background: transparent;
  color: var(--at-mute); font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  transition: color .15s, border-color .15s, background .15s;
}
.zk-imos-pricebtn:hover { color: var(--at-text, var(--text)); border-color: var(--at-line, rgba(255,255,255,.3)); }
.zk-imos-pricebtn .ai { width: 15px; height: 15px; flex: 0 0 auto; }
.zk-imos-pricebtn[aria-pressed="true"] { color: var(--brand); border-color: var(--brand); }
/* Per-cabinet import price — hidden until the basket's toggle is on. */
.zk-imos-cardprice-val { display: none; font-family: var(--mono); font-size: 13px; font-weight: 600; color: #fff;
  white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.zk-imos--prices-on .zk-imos-cardprice-val { display: inline; }
/* Doplňkové položky — accessory items table inside the basket reveal. */
.zk-imos-doplnky { margin-top: 18px; border-top: 1px solid var(--at-line, rgba(255,255,255,.12)); padding-top: 12px; }
.zk-imos-doplnky-toggle { background: none; border: none; cursor: pointer; padding: 4px 0;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--at-text, var(--text)); font-family: var(--serif); font-weight: 300; font-size: 17px; }
.zk-dop-chev { width: 15px; height: 15px; transition: transform .2s ease; }
.zk-imos-doplnky-toggle[aria-expanded="false"] .zk-dop-chev { transform: rotate(-90deg); }
.zk-imos-doplnky-body { overflow: hidden; }
.zk-imos-doplnky-body.zk-dop-collapsed { display: none; }
.zk-imos-doplnky-table { margin-top: 8px; }
.zk-dop-row, .zk-imos-doplnek-row { display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,0.9fr) 54px 92px minmax(0,1fr) 62px minmax(0,1fr) 30px;
  gap: 10px; align-items: center; padding: 7px 0; }
.zk-dop-head { border-bottom: 1px solid var(--at-line, rgba(255,255,255,.10)); }
.zk-dop-head span { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--at-mute); }
.zk-imos-doplnek-row { border-bottom: 1px solid var(--at-line, rgba(255,255,255,.06)); }
.zk-imos-doplnek-row input, .zk-imos-doplnek-row select {
  width: 100%; padding: 6px 8px; border-radius: var(--r-xs);
  border: 1px solid var(--at-line, rgba(255,255,255,.14)); background: transparent; color: var(--at-text, var(--text)); font: inherit; }
.zk-dop-proj, .zk-dop-bez, .zk-dop-sdph { font-family: var(--mono); font-size: 12px; color: var(--at-text, var(--text)); }
.zk-dop-x { background: none; border: none; cursor: pointer; color: var(--at-mute); font-size: 20px; line-height: 1; }
.zk-dop-x:hover { color: var(--brand); }
.zk-dop-empty { padding: 10px 0; }
/* Add-form */
.zk-imos-doplnek-form { display: grid; grid-template-columns: minmax(0,2fr) 64px minmax(0,1fr) 74px auto; gap: 10px;
  align-items: center; margin-top: 12px; }
.zk-imos-doplnek-form input, .zk-imos-doplnek-form select {
  padding: 8px 10px; border-radius: var(--r-xs); border: 1px solid var(--at-line, rgba(255,255,255,.14));
  background: transparent; color: var(--at-text, var(--text)); font: inherit; }
.zk-dopf-err { grid-column: 1 / -1; color: var(--brand); font-size: 12px; }
.zk-imos-doplnek-open { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 5px 9px; border-radius: var(--r-xs); border: 1px solid var(--at-line, rgba(255,255,255,.14));
  background: transparent; color: var(--at-mute); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }
.zk-imos-doplnek-open:hover { color: var(--at-text, var(--text)); }
@media (max-width: 720px) {
  .zk-dop-head { display: none; }
  .zk-imos-doplnek-row, .zk-imos-doplnek-form { grid-template-columns: 1fr 1fr; }
}
.zk-imos-price { font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--at-mute); margin-right:14px; }
.nv-savestate { font-family: var(--mono); font-size:11px; letter-spacing:.08em; color: var(--at-dim); }
.nv-savestate.err { color: var(--brand); }
.nv-totals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, auto); gap: 4px 72px;
  align-items: start; text-align: right; margin: 32px 0; padding-top: 24px; border-top: 1px solid var(--at-line); }
.nv-totals .nv-tot-controls { grid-column: 1; grid-row: 1 / span 5; justify-content: flex-start; margin: 0; }
.nv-totals .nv-vatbreak, .nv-totals > .atelier-sub, .nv-totals .big { grid-column: 2; }
.nv-totals .big { font-family: var(--serif); font-size: 32px; }
@media (max-width: 860px) { .nv-totals { grid-template-columns: 1fr; } .nv-totals .nv-tot-controls, .nv-totals .nv-vatbreak, .nv-totals > .atelier-sub, .nv-totals .big { grid-column: 1; grid-row: auto; } }
.nv-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; border-top:1px solid var(--at-line); padding-top:22px; }
.nv-suggest { position:relative; }
/* Add-another-product bar — a distinct action zone, set apart from the product
   grid by a hairline + breathing room, with the search field and the browse
   button paired on one row (not loose form fields blending into the cards). */
.nv-additem { margin-top:28px; padding-top:22px; border-top:1px solid var(--at-line); }
.nv-additem-label { display:block; font-family: var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color: var(--at-mute); margin-bottom:12px; }
.nv-additem-row { display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
.nv-additem-search { flex:1 1 320px; display:flex; align-items:center; gap:9px;
  background: var(--at-input-bg); border:1px solid var(--at-line-strong); border-radius: var(--r-sm);
  padding:0 14px; transition: border-color .15s ease; }
.nv-additem-search:focus-within { border-color: var(--brand); }
.nv-additem-search .nv-additem-ico { flex:none; display:grid; place-items:center; color: var(--at-mute); }
.nv-additem-search .nv-additem-ico svg { width:16px; height:16px; }
.nv-additem-search input { flex:1; min-width:0; border:none; background:transparent; outline:none;
  font: inherit; color: var(--at-text); padding:13px 0; }
.nv-additem-row #nv-eshop-browse { flex:none; align-self:stretch; }
@media (max-width: 560px) { .nv-additem-row #nv-eshop-browse { flex:1 1 100%; justify-content:center; } }
.nv-suggest-list { position:absolute; z-index:50; left:0; right:0; top:100%; margin-top:6px;
  background: var(--at-panel); border:1px solid var(--at-line-strong); border-radius: var(--r-sm);
  max-height: 320px; overflow:auto; }
.nv-suggest-item { display:flex; gap:12px; align-items:center; padding:10px 14px; cursor:pointer; }
.nv-suggest-item:hover { background: var(--at-hover); }
.nv-suggest-item img { width:44px; height:44px; object-fit:contain; background:#fff; border-radius: var(--r-xs); flex:none; }
.nv-suggest-item .nm { flex:1; font-size:13px; min-width:0; }
.nv-suggest-item .pr { font-family: var(--mono); font-size:12px; color: var(--at-mute); white-space:nowrap; }
@media (max-width: 700px) {
  .nv-row { grid-template-columns: 1fr 64px 90px 44px; }
  .nv-row .nv-sum, .nv-row .nv-x { display:none; }
}

/* F2 pricing — nůžky / za 1 Kč / měšec / rezerva / DPH breakdown */
.nv-row--disc { grid-template-columns: 1fr 72px 110px 46px 130px 44px 110px 32px; }
.nv-disc-wrap { display:flex; align-items:center; gap:6px; }
.nv-disc-wrap .ai { width:12px; height:12px; opacity:.6; flex:none; }
.nv-disc { width:100%; background:transparent; border:none; border-bottom:1px solid var(--at-line-strong); color:var(--at-text); font:inherit; padding:6px 2px; }
.nv-1kc { font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; border:1px solid var(--at-line); border-radius:999px; padding:4px 9px; background:transparent; color:var(--at-dim); cursor:pointer; }
.nv-1kc.on { color:var(--at-text); border-color:var(--brand); background:rgba(200,38,44,0.14); }
.nv-tot-controls { display:flex; gap:22px; align-items:flex-end; justify-content:flex-end; flex-wrap:wrap; margin-bottom:14px; }

/* VIP slevový kupón v totals bloku návrhu. Uplatněný kupón se ukazuje jako
   „štítek + částka + Zrušit", neuplatněný jako pole s tlačítkem — tvar se mění,
   šířka ne, aby řádek ovládacích prvků neposkakoval. */
.nv-vip { min-width: 240px; }
.nv-vip-row { display:flex; gap:8px; align-items:center; }
.nv-vip-row input { flex:1 1 auto; min-width:0; text-transform:uppercase; }
.nv-vip-on { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.nv-vip-code { font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line-strong); border-radius:var(--r-xs); padding:4px 8px; }
.nv-vip-err { color:var(--brand); display:block; margin-top:6px; }
.nv-tot-controls .field { max-width:220px; }
.nv-cap { min-width:200px; }
/* Text jen pro čtečky. ⚠ Bez tohohle pravidla je jméno pole VIDĚT vedle ikony —
   `class="vh"` ho používá `fieldBarHtml`, aby ikona nebyla pro čtečku prázdné
   tlačítko. */
.vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
      clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* Lišta čtyř ikon — pole se za nimi otevře až klikem, a to jako PLOVOUCÍ OKNO
   (přání majitele 31. 8. 2026; rozbalování v řádku posouvalo celý panel). */
.nv-fieldbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.nv-fitem { position:relative; }
.nv-fbtn { display:inline-flex; align-items:center; gap:7px; padding:9px 12px;
  background:rgba(255,255,255,.03); border:1px solid var(--line-strong);
  border-radius:var(--r-sm); color:var(--text-dim); cursor:pointer; font:inherit; }
.nv-fbtn:hover { color:var(--text); border-color:var(--brand); }
.nv-fbtn .ai { width:20px; height:20px; }
.nv-fbtn[aria-expanded="true"] { color:var(--text); border-color:var(--brand);
  background:rgba(200,38,44,.10); }
/* Zadaná částka MUSÍ být vidět i zavřená — jinak nastavená BK nebo sleva
   zmizí za ikonou a prodejce o nich neví. */
.nv-fbtn-val { font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--text); }
.nv-fbtn--set { color:var(--text); }
.nv-fbtn--off { opacity:.5; }

/* Plovoucí okno pod ikonou. `min-width` drží čitelnou šířku i u krátkých polí;
   `z-index` musí být nad součty pod ním, jinak okno mizí za velkým číslem. */
.nv-pop { position:absolute; top:calc(100% + 8px); left:0; z-index:40; min-width:280px;
  padding:14px; background:var(--at-panel, #1b1713); border:1px solid var(--line-strong);
  border-radius:var(--r-md); box-shadow:0 18px 40px rgba(0,0,0,.55);
  display:flex; flex-direction:column; gap:8px; }
/* ⚠ MUSÍ tu být: `.nv-pop` výš nastavuje `display:flex`, což má vyšší
   specificitu než globální `[hidden] { display:none }` — bez tohohle pravidla
   by se všechna okna vykreslila naráz a klik na ikonu by nedělal nic. */
.nv-fpanel[hidden] { display:none; }
.nv-pop h4 { margin:0; font-size:13px; letter-spacing:.02em; }
.nv-pop input { background:rgba(0,0,0,.35); border:1px solid var(--line-strong);
  color:var(--text); border-radius:var(--r-xs); padding:9px 11px; font:inherit; width:100%; }
/* Poslední ikony v řadě by oknem přetekly z panelu ven — proto se u nich
   ukotví zprava. Třídu dává JS podle skutečné polohy, ne podle pořadí. */
.nv-pop--right { left:auto; right:0; }
/* ⚠ Panel součtů sedí u paty editoru, takže okno otevřené dolů přeteče pod
   stránku. `--up` ho překlopí nad ikonu; třídu dává JS po změření. */
.nv-pop--up, .nv-hint.nv-pop--up { top:auto; bottom:calc(100% + 8px); }

/* Stav měšce jako bublinka při najetí na peněženku — natrvalo pod panelem
   zabíral místo. Drží se i při fokusu z klávesnice, jinak by byl nedostupný. */
.nv-hint { position:absolute; top:calc(100% + 8px); left:0; z-index:39; min-width:240px; max-width:320px;
  padding:10px 12px; background:var(--at-panel, #1b1713); border:1px solid var(--line-strong);
  border-radius:var(--r-sm); box-shadow:0 12px 28px rgba(0,0,0,.5);
  /* Krátká prodleva, ne nula: bublinka, která naskočí okamžitě, bliká při
     každém přejetí myší přes lištu. 400 ms je běžná pauza — dost na to, aby
     nerušila, a málo na to, aby se čekalo (nativní `title` má ~1–2 s a přesně
     to uživatel odmítl). `visibility` se přepíná skokem na konci přechodu,
     jinak by šla bublinka klikat, ještě než je vidět. */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .14s, visibility 0s linear .14s; }
.nv-fitem:hover > .nv-hint,
.nv-fitem:focus-within > .nv-hint { opacity:1; visibility:visible;
  transition:opacity .14s .4s, visibility 0s linear .4s; }
/* Otevřené okno bublinku přebije — dvě plovoucí vrstvy přes sebe jsou nečitelné. */
.nv-fitem:has(.nv-pop:not([hidden])) > .nv-hint { opacity:0; visibility:hidden; }
.nv-hint.nv-pop--right { left:auto; right:0; }

/* Pole, které v tomhle návrhu nedává smysl (BK a navýšení budgetu bez vyráběné
   položky). Zůstává vidět s důvodem — schované by prodejci nic nevysvětlilo. */
.field--off { opacity:.55; }
.field--off input { cursor:not-allowed; }
.nv-field-why { display:block; margin-top:4px; color:var(--at-warn, #d08a3a); }

.nv-cap-bar { height:4px; border-radius:999px; background:var(--at-panel-2); overflow:hidden; margin-top:6px; }
.nv-cap-bar i { display:block; height:100%; background:var(--brand); border-radius:999px; }
/* Měšec v mínusu — návrh se v tomhle stavu nedá odeslat do Heliosu, takže to
   nesmí vypadat jako „skoro plno". Vlastní odstín, ne jen značková červená. */
.nv-cap-bar--minus { background:rgba(200,38,44,.22); }
.nv-cap-bar--minus i { background:#e0474d; }
.nv-vatbreak { display:flex; flex-direction:column; gap:4px; align-items:flex-end; font-family:var(--mono); font-size:11.5px; color:var(--at-mute); margin:10px 0; }
.nv-repriced { list-style:none; margin:14px 0 0; padding:12px 14px; display:flex; flex-direction:column; gap:8px;
  background: var(--at-panel); border:1px solid var(--at-line); border-radius: var(--r-sm); }
.nv-repriced li { display:flex; justify-content:space-between; gap:12px; font-size:12.5px; }
.nv-repriced li span { font-family:var(--mono); color: var(--at-mute); white-space:nowrap; }
@media (max-width: 700px) {
  /* Discount editing is desktop-only; mobile shows name/qty/price/effective sum
     (4 visible children = 4 tracks; the F1 rule above hides .nv-sum for plain
     rows — re-shown here because the EFFECTIVE price must stay visible). */
  .nv-row--disc { grid-template-columns: 1fr 60px 90px 90px; }
  .nv-row--disc .nv-1kc, .nv-row--disc .nv-vat, .nv-row--disc .nv-disc-wrap, .nv-row--disc .nv-x { display:none; }
  .nv-row--disc .nv-sum { display:block; }
  .nv-tot-controls { justify-content:flex-start; }
}

/* ── Eshop items as rset-style product cards (nv-eshop-grid) ──────────────────
   Photo-on-white face like the /spotrebice set-builder result card (rset):
   numbered pill, shade, EU/dB/tier chips, brand logo — with the editor controls
   behind an "Upravit" overlay on the photo (next to Vyměnit). Card stays a
   `.nv-row.nv-eshop-card` and keeps .nv-name/.nv-qty/.nv-price/.nv-disc in the DOM
   so collectPatch/recomputeOptimistic/wireEditor keep working. --at-* tokens. */
.nv-eshop-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap:18px; margin-top:4px; }
.nv-eshop-grid > .atelier-sub { grid-column:1/-1; }
.nv-row.nv-eshop-card { display:block; grid-template-columns:none; gap:0; align-items:stretch; padding:0;
  border-bottom:none; position:relative; background: var(--at-panel); border:1px solid var(--at-line);
  border-radius: var(--r-md); box-shadow: var(--at-shadow); overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease; }
.nv-row.nv-eshop-card:hover { transform: translateY(-3px); box-shadow: var(--at-shadow), 0 14px 32px rgba(0,0,0,.18); }
/* Photo face */
.nvec-face { position:relative; aspect-ratio: 4 / 5; background:#fff; overflow:hidden; }
.nvec-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6%; }
/* Whole face opens the appliance detail when the row matches a catalog product. */
.nv-eshop-card[data-appl-href] .nvec-face { cursor:pointer; }
.nvec-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-weight:300; font-size:44px; color: var(--at-dim); background: var(--at-panel-2); }
.nvec-shade { position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to top, rgba(0,0,0,.30), rgba(0,0,0,0) 45%); }
.nvec-pill { position:absolute; top:8px; left:8px; font-family: var(--mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background: rgba(0,0,0,.5); border-radius:999px; padding:3px 8px; }
.nvec-chips { position:absolute; left:8px; bottom:44px; display:flex; gap:6px; align-items:center; }
.nvec-energy img { height:18px; width:auto; display:block; }
.nvec-energy .ac-energy-badge, .nvec-energy .energy-chip { position:static; }
.nvec-db { font-family: var(--mono); font-size:10px; color:#fff; background: rgba(0,0,0,.5); border-radius:999px; padding:2px 8px; }
.nvec-tier { font-family: var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#fff;
  background: rgba(0,0,0,.5); border-radius:999px; padding:2px 8px; }
.nvec-badge { position:absolute; left:8px; bottom:44px; font-family: var(--mono); font-size:9px; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background: rgba(0,0,0,.55); border-radius:4px; padding:2px 7px; }
.nvec-logo { position:absolute; top:8px; left:50%; transform:translateX(-50%); max-width:46%; height:20px; }
.nvec-logo img { height:20px; width:auto; max-width:100%; object-fit:contain; display:block;
  filter: brightness(0) invert(1); opacity:.9; }
/* Overlay tools: Vyměnit / Upravit / × (stacked, top-right on the photo) */
.nvec-tools { position:absolute; top:6px; right:6px; z-index:3; display:flex; flex-direction:column; gap:6px; }
.nv-eshop-card .nvec-tool { width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; display:grid;
  place-items:center; background: rgba(255,255,255,.92); color:#1a1a1a; box-shadow: 0 2px 7px rgba(0,0,0,.22);
  padding:0; transition: background .15s; }
.nv-eshop-card .nvec-tool:hover { background:#fff; }
.nv-eshop-card .nvec-tool svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nv-eshop-card .nvec-tool.nvec-x { font-size:19px; line-height:1; }
/* Caption (name + sum) over the shade */
.nvec-cap { position:absolute; left:0; right:0; bottom:0; padding:9px 11px; display:flex; align-items:flex-end;
  justify-content:space-between; gap:8px; }
.nvec-cap .nvec-name { font-family: var(--serif); font-weight:300; font-size:15px; line-height:1.2; color:#fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.nv-eshop-card .nvec-cap .nvec-sum { display:block; font-family: var(--mono); font-size:13px; color:#fff;
  white-space:nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.6); margin:0; text-align:right; }
.nvec-cap .nvec-sumwrap { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.nvec-cap .nvec-qty { font-family: var(--mono); font-size:10px; font-weight:600; letter-spacing:.04em;
  line-height:1; color:#fff; background:rgba(200,38,44,.9); padding:3px 7px; border-radius:var(--r-xs);
  white-space:nowrap; text-shadow:none; }
/* Upravit panel — overlays the face; ALWAYS in DOM, toggled by .nv-edit-open. */
.nvec-edit { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; gap:8px; padding:12px;
  background: var(--at-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--at-text); opacity:0; pointer-events:none; transition: opacity .18s ease; overflow:auto; }
.nv-eshop-card.nv-edit-open { z-index:70; }
.nv-eshop-card.nv-edit-open .nvec-edit { opacity:1; pointer-events:auto; }
.nvec-edit-head { display:flex; align-items:center; justify-content:space-between; }
.nvec-edit-head .nvsp-eyebrow { font-family: var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--at-mute); }
.nvec-edit-close { background:none; border:none; color: var(--at-text); font-size:20px; line-height:1; cursor:pointer; padding:0 2px; }
.nvec-fld { display:flex; flex-direction:column; gap:3px; font-family: var(--mono); font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color: var(--at-dim); }
.nv-eshop-card .nvec-edit .nvec-fld input, .nv-eshop-card .nvec-edit .nv-name { background: var(--at-input-bg);
  border:1px solid var(--at-line-strong); border-radius: var(--r-xs); color: var(--at-text); font: inherit;
  font-size:13px; text-transform:none; letter-spacing:normal; padding:6px 8px; width:100%; }
.nv-eshop-card .nvec-edit input:focus { outline:none; border-color: var(--brand); }
.nv-eshop-card .nvec-edit input[readonly] { border-style:dotted; color: var(--at-mute); }
.nvec-fldrow { display:flex; gap:8px; align-items:flex-end; }
.nvec-fldrow .nvec-fld { flex:1; }
.nvec-vat { align-self:flex-end; padding-bottom:6px; font-family: var(--mono); font-size:12px; color: var(--at-mute); white-space:nowrap; }
.nvec-discrow { align-items:center; }
.nv-eshop-card .nvec-edit .nvec-disc-wrap { flex:1 1 auto; display:flex; align-items:center; gap:6px; }
.nv-eshop-card .nvec-edit .nvec-disc-wrap .nv-disc { flex:1; }

/* Swap panel — scoped dropdown over the card (search + brand chips + ranked list). */
/* Swap panel overlays the card face (inset:0), same as the Upravit panel — so it
   stays in view where you clicked instead of dropping below (and being clipped). */
.nv-swap-panel { position:absolute; z-index:60; inset:0; overflow:auto;
  background: var(--at-glass); border:1px solid var(--at-line-strong); border-radius: var(--r-md);
  box-shadow: var(--at-shadow), 0 16px 44px rgba(0,0,0,.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding:12px; opacity:0; transition: opacity .2s ease; pointer-events:none; }
html[data-at-theme='light'] .nv-swap-panel { box-shadow: var(--at-shadow), 0 16px 44px rgba(33,29,24,.16); }
.nv-eshop-card.nv-swap-open { z-index:70; }
.nv-eshop-card.nv-swap-open .nv-swap-panel { opacity:1; pointer-events:auto; }
.nvsp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.nvsp-eyebrow { font-family: var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color: var(--at-mute); }
.nvsp-close { background:none; border:none; color: var(--at-dim); font-size:18px; line-height:1; cursor:pointer; }
.nvsp-close:hover { color: var(--brand); }
.nvsp-filter { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.nvsp-search { background: var(--at-input-bg); border:1px solid var(--at-line-strong); border-radius: var(--r-xs);
  color: var(--at-text); font: inherit; padding:8px 10px; }
.nvsp-search:focus { outline:none; border-color: var(--brand); }
.nvsp-brands { display:flex; gap:6px; flex-wrap:wrap; }
.nvsp-fbrand { font-family: var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
  color: var(--at-mute); background:transparent; border:1px solid var(--at-line); border-radius:999px; padding:4px 9px; }
.nvsp-fbrand.active, .nvsp-fbrand:hover { color: var(--at-text); border-color: var(--brand); }
.nvsp-list { max-height:300px; overflow:auto; display:flex; flex-direction:column; gap:4px; }
.nvsp-item { display:flex; gap:10px; align-items:center; text-align:left; cursor:pointer; width:100%;
  background:transparent; border:none; border-radius: var(--r-sm); padding:7px 8px; }
.nvsp-item:hover { background: var(--at-hover); }
.nvsp-item img { width:48px; height:48px; object-fit:contain; background:#fff; border-radius: var(--r-xs); flex:none; }
.nvsp-info { display:flex; flex-direction:column; gap:1px; min-width:0; }
.nvsp-brand { font-family: var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--at-mute); }
.nvsp-name { font-size:13px; color: var(--at-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nvsp-price { font-family: var(--mono); font-size:11.5px; color: var(--at-mute); }
.nvsp-empty { font-size:12.5px; color: var(--at-mute); padding:12px 4px; }
@media (max-width: 520px) { .nv-eshop-grid { grid-template-columns: 1fr; } }

/* ── Atelier line icons + customer-first views (2026-07-10) ── */
.ai { width:15px; height:15px; flex:none; vertical-align:-2.5px; }
.atelier-nav a, .atelier-link, .atelier-user .atelier-link { display:inline-flex; align-items:center; gap:7px; }
.atelier-nav a .ai { width:14px; height:14px; opacity:.8; }
.atelier-nav a.is-active .ai, .atelier-nav a.atelier-cta .ai { opacity:1; }
.atelier-wrap .btn, .bk-modal .btn, .customer-modal .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn .ai { width:14px; height:14px; }
.atelier-card > header h2 { display:flex; align-items:center; gap:10px; }
.atelier-card > header h2 .ai { width:17px; height:17px; color: var(--at-mute); }
.zk-meta { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
.zk-meta .ai { width:12px; height:12px; opacity:.7; }
.zk-actions .atelier-link { gap:5px; font-size:12.5px; }
.zk-actions .ai { width:12.5px; height:12.5px; opacity:.75; }
.at-search { position:relative; flex:1; display:flex; align-items:center; min-width:220px; }
.at-search .ai { position:absolute; left:13px; color: var(--at-dim); pointer-events:none; }
.at-search input[type="search"] { width:100%; padding-left:38px; }

/* customer list rows */
.cst-row { display:flex; gap:16px; align-items:center; padding:14px 14px;
  border-bottom: 1px solid var(--at-line-soft); text-decoration:none; color:inherit;
  transition: background 200ms ease; }
.cst-row:hover { background: var(--at-panel); }
.cst-avatar { width:42px; height:42px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-family: var(--mono); font-size:13px; letter-spacing:.05em; color: var(--at-text);
  background: linear-gradient(135deg, rgba(200,38,44,0.28), rgba(200,38,44,0.08));
  border:1px solid rgba(200,38,44,0.35); }
.cst-avatar-lg { width:64px; height:64px; font-size:18px; }
.cst-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.cst-main strong { font-size:15px; }
.cst-meta { display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color: var(--at-mute); }
.cst-meta span { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.cst-meta .ai { width:12px; height:12px; opacity:.65; }
.cst-side { display:flex; gap:12px; align-items:center; flex-shrink:0; }
.cst-chip { display:inline-flex; align-items:center; gap:6px; font-family: var(--mono); font-size:11.5px;
  color: var(--at-mute); border:1px solid var(--at-line); border-radius:999px; padding:4px 11px; }
.cst-chip .ai { width:12px; height:12px; }
.cst-go { color: var(--at-dim); transition: transform 200ms ease, color 200ms ease; }
.cst-row:hover .cst-go { transform: translateX(3px); color: var(--at-text); }

/* customer detail head (karta zákazníka) */
.cst-back { margin-bottom:18px; font-size:13px; }
.cst-head { display:flex; gap:20px; align-items:center; margin: 6px 0 30px; flex-wrap:wrap; }
.cst-head-main { flex:1; min-width:240px; }
.cst-head-main h1 { font-family: var(--serif); font-weight:300; margin:0 0 8px; }
.cst-contacts { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color: var(--at-mute); }
.cst-contacts a, .cst-contacts span { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.cst-contacts a { color:inherit; text-decoration:none; }
.cst-contacts a:hover { color: var(--at-text); }
.cst-contacts .ai { width:13px; height:13px; opacity:.7; }
.cst-head-side { display:flex; gap:14px; align-items:center; }
.nv-tab-add { display:inline-flex; align-items:center; gap:7px; }
.nv-tab-add .ai { width:12px; height:12px; }
@media (max-width: 700px) {
  .cst-side .badge { display:none; }
  .cst-head-side { width:100%; justify-content:space-between; }
}

/* ── F4 smluvní dokumentace: zálohy modal, dokumenty sekce, podpis hint (2026-07-13) ── */
.nv-checkbox-hint:has(input:disabled) { opacity:.55; cursor:help; }
.nv-smlouva-status { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13.5px; color: var(--at-mute); }
.nv-smlouva-badge { font-family: var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color: var(--at-dim); border:1px solid var(--at-line); border-radius:999px; padding:2px 10px; }
.nv-smlouva-docs { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.nv-smlouva-doc { display:inline-flex; align-items:center; gap:10px; font-family: var(--mono); font-size:12.5px;
  color: var(--at-mute); text-decoration:none; padding:8px 12px; border:1px solid var(--at-line);
  border-radius: var(--r-sm); width:fit-content; max-width:100%;
  transition: border-color 200ms ease, color 200ms ease; }
.nv-smlouva-doc:hover { color: var(--at-text); border-color: var(--at-line-strong); }
.nv-smlouva-doc .ai { width:14px; height:14px; flex:none; opacity:.75; }
.nv-smlouva-doc-label { color: var(--at-text); }
.nv-smlouva-doc-date { color: var(--at-dim); }
.nv-smlouva-doc.is-soon { color: var(--at-dim); cursor: default; }
.nv-smlouva-doc.is-soon .nv-smlouva-doc-label { color: var(--at-dim); }
.nv-smlouva-doc-soon { font-style: italic; }
.nv-smlouva-pcts { display:grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap:16px; margin-bottom: 6px; }
.nv-smlouva-sum { font-family: var(--mono); font-size:12.5px; color: var(--at-mute); margin: 0 0 18px; }
.nv-smlouva-sum.err { color: var(--brand); }

/* ── F4 objednávka checkout (objednavka.html, 2026-07-13) ── */
.nv-1kc-flag {
  display:inline-flex; align-items:center; margin-left:8px; font-family: var(--mono);
  font-size:10.5px; letter-spacing:.04em; border:1px solid var(--brand); border-radius:999px;
  padding:2px 9px; color: var(--at-text); background: rgba(200,38,44,0.14);
}
.obj-items { display:flex; flex-direction:column; }
.obj-row {
  display:grid; grid-template-columns: 1fr 70px 140px; gap:10px; align-items:center;
  padding:10px 0; border-bottom: 1px solid var(--at-line); font-size:14px;
}
.obj-row-name { min-width:0; }
.obj-row-qty { font-family: var(--mono); font-size:12px; color: var(--at-mute); text-align:right; }
.obj-row-sum { font-family: var(--mono); font-size:13px; color: var(--at-text); text-align:right; white-space:nowrap; }
.obj-orig { color: var(--at-dim); text-decoration: line-through; margin-right:8px; }
.obj-totals { margin-top:10px; }
.obj-success {
  max-width:560px; margin:40px auto; padding:56px 32px; text-align:center;
  border:1px solid var(--at-line); border-radius: var(--r-lg); background: var(--at-panel);
}
.obj-success h1 { font-family: var(--serif); font-weight:300; font-size:2rem; margin:22px 0 10px; color: var(--at-text); }
.obj-success-icon {
  display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px;
  border-radius:50%; background: rgba(74,124,89,0.16); border:1px solid rgba(74,124,89,0.4); color:var(--at-zisk);
}
.obj-success-icon .ai { width:26px; height:26px; }
.obj-success-actions { justify-content:center; margin-top:26px; }

/* ═══ Guest vs. member (2026-07-21) ═══════════════════════════════════════
   `is-member` / `is-guest` land on <html> at boot (guest) and again once
   SYKORA_VIEWER resolves. Every rule tests :not(.is-member), so the
   undecided state paints as a guest and member-only chrome can never flash.
   Presentational only — the real gates are server-side.
   Spec: docs/superpowers/specs/2026-07-21-guest-member-konfigurator-design.md */
html:not(.is-member) .member-only { display: none !important; }
html:not(.is-member) #appl-builder,
html:not(.is-member) .appl-back-pill { display: none; }
/* The clickable brand cards (BORA/Miele/Electrolux) lead into the builder, so
   they must not promise a click to a guest. Hover treatment is shared with
   .abh-card--static. */
html:not(.is-member) [data-hero-scroll] { cursor: default; }
/* Split for i18n (the member-only sentence needs its own key), not for
   typography — to a member they must still read as one paragraph. */
.akce-outro-note + .akce-outro-note { margin-top: 6px; }

/* Auth-outage lock (2026-07-22, lockBuilder() in app.js): #appl-builder stays
   in the DOM instead of being removed, so it needs its own override of the
   guest display:none above — dimmed and inert behind a floating panel. Only
   ever reached by a browser that has already held a real session
   (sykora.member-seen); a genuine guest still gets display:none and never
   learns the konfigurátor exists. */
html:not(.is-member) #appl-builder.is-locked { display: block; }
.appl-builder-wrap.is-locked { position: relative; }
.appl-builder-wrap.is-locked > *:not(.appl-builder-lock) {
  opacity: .35;
  pointer-events: none;
}
.appl-builder-lock {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: auto;
}
.abl-inner {
  max-width: 380px;
  padding: 40px 36px;
  border-radius: var(--r-lg);
  background: var(--bg-elev-2);
  border: 1px solid var(--line-strong);
  text-align: center;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
.abl-inner .eyebrow { color: var(--brand-hi); display: inline-block; margin-bottom: 16px; }
.abl-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 10px;
}
.abl-note {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mute);
  margin: 0 0 24px;
}

/* ═══ Dokumenty a servis — rozcestník + boční menu ═══════════════════════════
   Spec docs/superpowers/specs/2026-07-23-dokumenty-servis-hub-design.md.
   Typografický systém, žádné fotografie — u 32k znaků VOP je čitelnost
   důležitější než efekt. Používá výhradně tokeny z :root. */

/* ── Rozcestník /dokumenty ─────────────────────────────────────────────── */
.doc-ix { padding: 20px 0 120px; }
.doc-ix-group + .doc-ix-group { margin-top: 72px; }
.doc-ix-glabel {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brand);
  margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(245,238,224,0.16);
}
.doc-ix-list { list-style: none; margin: 0; padding: 0; }
.doc-ix-link {
  display: grid; grid-template-columns: 54px 1fr 28px; align-items: baseline; gap: 14px;
  padding: 22px 4px; border-bottom: 1px solid rgba(245,238,224,0.09);
  text-decoration: none; color: var(--text); cursor: pointer;
  transition: background-color .3s ease, padding-left .3s ease;
}
.doc-ix-link:hover { background: rgba(245,238,224,0.04); padding-left: 14px; }
.doc-ix-num {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  color: var(--brand);
}
.doc-ix-name { font-family: var(--serif); font-size: clamp(19px, 2vw, 25px); font-weight: 300; }
.doc-ix-go { opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; }
.doc-ix-link:hover .doc-ix-go { opacity: .7; transform: translateX(0); }

/* ── Dvousloupcový detail ──────────────────────────────────────────────── */
.doc-layout {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px;
  max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px);
}
.doc-aside { padding-top: 210px; }        /* zarovná se s .info-hero padding 200px */
.doc-nav { position: sticky; top: 110px; }
.doc-nav-group + .doc-nav-group { margin-top: 34px; }
.doc-nav-glabel {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(245,238,224,0.45);
  margin-bottom: 12px;
}
.doc-nav-list { list-style: none; margin: 0; padding: 0; }
.doc-nav-link {
  display: block; padding: 7px 0 7px 14px; margin-left: -14px;
  border-left: 2px solid transparent;
  font-size: 14.5px; line-height: 1.45; color: rgba(245,238,224,0.66);
  text-decoration: none; cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.doc-nav-link:hover { color: var(--text); }
.doc-nav-link.is-active { color: var(--text); border-left-color: var(--brand); }
.doc-nav-all {
  display: inline-block; margin-top: 30px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(245,238,224,0.5);
  text-decoration: none; cursor: pointer; transition: color .25s ease;
}
.doc-nav-all:hover { color: var(--brand); }

/* Sloupec s obsahem — .info-hero uvnitř .doc-body už nemá vlastní .container
   grid, takže mu vrátíme jen svislý rytmus. */
.doc-body .info-hero { padding: 200px 0 40px; }
.doc-body .info-hero .container,
.doc-body .st-care .container,
.doc-body .st-care-ix .container,
.doc-body .doc-doc-in { padding-left: 0; padding-right: 0; max-width: none; }

/* Hero fotka v dokumentovém sloupci — pás NAD textem, ne pozadí pod ním.
   .info-hero--photo je dělaná pro celoširokou stránku (/o-nas): 72vh, fotka
   absolutně přes celou sekci a text přes ni. Uvnitř .doc-body ale hero sedí
   vedle bočního menu, takže fotka začínala až za ním jako oříznutý pruh, logo
   v navigaci leželo na ní a perex padal modelce na obličej. Tady z ní proto
   děláme obyčejný pás a text pouštíme pod něj — kontrast tím řeší layout,
   ne gradient. Mimo .doc-body se nemění nic.
   Svislý rytmus zůstává zděděný (200px shora), aby boční menu dál sedělo
   s horní hranou obsahu — .doc-aside na tu hodnotu spoléhá. */
.doc-body .info-hero--photo { display: block; min-height: 0; overflow: visible; border-radius: 0; }
.doc-body .info-hero--photo::after { content: none; }        /* ztmavovací gradient */
.doc-body .info-hero--photo .info-hero-media {
  position: static; height: clamp(200px, 26vw, 320px);
  margin-bottom: clamp(26px, 3.5vw, 42px);
  border-radius: var(--r-md); overflow: hidden;
}
.doc-body .info-hero--photo .info-lead { color: var(--text-mute); }

/* ── Tělo dokumentu ────────────────────────────────────────────────────── */
.doc-doc { padding: 0 0 120px; }
.doc-updated {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: rgba(245,238,224,0.42); margin: 0 0 34px;
}
.doc-toc {
  border-top: 1px solid rgba(245,238,224,0.14);
  border-bottom: 1px solid rgba(245,238,224,0.14);
  padding: 26px 0; margin: 0 0 54px;
}
.doc-toc-label {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin-bottom: 16px;
}
.doc-toc ol { margin: 0; padding: 0 0 0 1.4em; }
.doc-toc li { margin: 5px 0; }
.doc-toc a {
  color: rgba(245,238,224,0.72); text-decoration: none; font-size: 14.5px; cursor: pointer;
  transition: color .25s ease;
}
.doc-toc a:hover { color: var(--brand); }

/* Šířka sazby ~68 znaků a řádkování 1.75 — u třicetitisícového právního textu
   je to rozdíl mezi čitelným a nečitelným. */
.doc-rich { max-width: 68ch; font-size: 15.5px; line-height: 1.75; color: rgba(245,238,224,0.82); }
.doc-rich h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(21px, 2.2vw, 28px); line-height: 1.25; color: var(--text);
  margin: 62px 0 20px; scroll-margin-top: 110px;      /* kotvy nesmí zmizet pod nav */
}
.doc-rich h2:first-child { margin-top: 0; }
.doc-rich h3 { font-size: 17px; font-weight: 500; color: var(--text); margin: 34px 0 12px; }
.doc-rich h4 { font-size: 15.5px; font-weight: 500; color: var(--text); margin: 26px 0 10px; }
.doc-rich p { margin: 0 0 17px; }
/* Odsazení odstavce z editoru (Tab / Shift+Tab v adminu → class="doc-indent-N",
   jediná třída, kterou sanitizér na <p> propustí). Krok 2em = zřetelný posun,
   který v 68ch sazbě ještě neubere půl řádku; čtyři úrovně jsou strop schématu.
   Na mobilu se krok půlí přes proměnnou — 4 × 2em je na 390px třetina šířky
   a čtvrtá úroveň by lámala každé slovo na vlastní řádek. */
.doc-rich { --doc-indent: 2em; }
.doc-rich .doc-indent-1 { margin-left: var(--doc-indent); }
.doc-rich .doc-indent-2 { margin-left: calc(var(--doc-indent) * 2); }
.doc-rich .doc-indent-3 { margin-left: calc(var(--doc-indent) * 3); }
.doc-rich .doc-indent-4 { margin-left: calc(var(--doc-indent) * 4); }
@media (max-width: 640px) { .doc-rich { --doc-indent: 1em; } }
.doc-rich ul, .doc-rich ol { margin: 0 0 20px; padding-left: 1.5em; }
.doc-rich li { margin: 7px 0; }
/* Tiptap má v schématu `listItem → paragraph block*`, takže getHTML() emituje
   <li><p>…</p></li>, zatímco importovaná těla nesou holé <li> (GDPR 33×,
   Ochrana oznamovatelů 4×, Doprava 1×). Bez tohohle resetu by první uložení
   dokumentu v novém editoru tiše přidalo každé položce 17px z `.doc-rich p`.
   Nad dnešním holým <li> je pravidlo no-op — přesně o to jde. */
.doc-rich li > p:last-child { margin-bottom: 0; }
.doc-rich a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.doc-rich a:hover { color: var(--brand); }
.doc-rich strong { color: var(--text); font-weight: 500; }
/* Tabulky musí scrollovat samy, jinak roztáhnou celou stránku do šířky. */
.doc-rich table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 14px; display: block; overflow-x: auto; }
.doc-rich th, .doc-rich td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid rgba(245,238,224,0.12); vertical-align: top; }
.doc-rich th { font-weight: 500; color: var(--text); }

/* ── Mobil: boční menu se složí do vodorovně scrollujícího řádku ─────────
   Stejná konvence jako .wt-chip-bar a .appl-catalog-chips jinde na webu.
   Názvy skupin se skryjí — na 390px šířky by řádek roztrhaly. */
@media (max-width: 980px) {
  /* minmax(0, 1fr), NE holé 1fr: implicitní min-width:auto nechá grid track
     narůst na min-content nejširšího potomka. Tím byl .doc-body na 390px široký
     1603px (roztahoval ho nowrap řádek .doc-nav) a `overflow-x: hidden` na body
     ten přesah tiše OŘÍZL — právní dokumenty i návod na údržbu tak na mobilu
     mizely v půlce věty za pravým okrajem a boční menu nešlo odscrollovat.
     Desktopová deklarace nad tímhle media query minmax(0, …) používá odjakživa. */
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .doc-aside { padding-top: 150px; }
  .doc-nav {
    position: static; display: flex; gap: 6px; align-items: center;
    overflow-x: auto; white-space: nowrap;
    padding-bottom: 12px; border-bottom: 1px solid rgba(245,238,224,0.12);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .doc-nav::-webkit-scrollbar { display: none; }
  .doc-nav-group { display: contents; }
  .doc-nav-glabel { display: none; }
  .doc-nav-list { display: contents; }
  .doc-nav-list li { display: inline-block; }
  .doc-nav-link {
    padding: 7px 13px; margin: 0; border-left: 0;
    border: 1px solid rgba(245,238,224,0.16); border-radius: 999px; font-size: 13px;
  }
  .doc-nav-link.is-active { border-color: var(--brand); color: var(--text); }
  .doc-nav-all { margin-top: 0; margin-left: 8px; }
  .doc-body .info-hero { padding: 40px 0 30px; }
  .doc-rich { max-width: none; }
}

/* Poznámka: přepínání dokumentů běží jako obyčejná navigace (žádné View
   Transitions). Zkoušený `@view-transition` s pojmenovanými skupinami
   `doc-nav`/`doc-body` způsoboval, že prohlížeč morfoval tělo mezi rozdílně
   vysokými dokumenty (VOP 25k znaků vs. doprava 1,7k) — text se během přechodu
   vyškáloval, vyletěl nahoru a překryvná vrstva ho vykreslila přes fixní menu.
   Skutečný skok už řeší zapečený sidebar (prerender), takže plain navigace je
   čistá: žádný skok, žádný flash. Nevracet bez ověření v reálném prohlížeči. */

/* ── Busy overlay for atelier actions ─────────────────────────────────────────
   Sits above everything (fullscreen configurator z 380, .bk-overlay z 400) — while
   a server action runs, nothing else may be reachable, which is what makes a double
   click impossible rather than merely unlikely. Appears only after ~200ms (JS side)
   so a fast response never flashes it. */
.at-busy {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  background: rgba(10, 9, 8, 0.62);
  backdrop-filter: blur(6px);                    /* ≤12px, no saturate — perf rule */
  animation: at-busy-in 160ms ease-out both;
}
@keyframes at-busy-in { from { opacity: 0 } to { opacity: 1 } }
.at-busy-box {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 26px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  color: var(--text); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  box-shadow: 0 22px 60px rgba(0,0,0,0.5);
}
.at-busy-spin {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.22); border-top-color: var(--brand);
  animation: at-busy-spin 720ms linear infinite;
}
@keyframes at-busy-spin { to { transform: rotate(360deg) } }
body.at-busy-on { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  .at-busy { animation: none }
  .at-busy-spin { animation-duration: 2s }
}

/* ── Reklamace (atelier: zakázka → tab „Reklamace") ─────────────────────── */
/* The tab sits apart from the návrh tabs: it is a different KIND of thing, not
   another draft, so it gets its own separator rather than blending into the row. */
.nv-tab-rekl { margin-left:auto; }
.nv-tab-rekl .ai { width:13px; height:13px; margin-right:7px; }
.nv-tab-n { margin-left:7px; padding:1px 6px; border-radius:999px; font-family:var(--mono);
  font-size:10px; background: var(--at-line-strong); color: var(--at-text); }

.rk-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:14px; margin-top:18px; }
.rk-card { display:flex; flex-direction:column; gap:6px; align-items:flex-start; text-align:left;
  padding:16px 18px; border:1px solid var(--at-line); border-radius: var(--r-md);
  background: var(--at-panel); color: var(--at-text); cursor:pointer; }
.rk-card:hover { border-color: var(--at-line-strong); background: var(--at-panel-2); }
.rk-card strong { font-family: var(--serif); font-weight:300; font-size:19px; }
.rk-card-head { display:flex; align-items:center; gap:10px; width:100%; justify-content:space-between; }
.rk-msg { color: var(--at-exsp); }

.rk-badge { font-family: var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 8px; border-radius: var(--r-xs); border:1px solid var(--at-line-strong); color: var(--at-mute); }
.rk-badge.is-ok { color: var(--at-zisk); border-color: color-mix(in srgb, var(--at-zisk) 45%, transparent); }
.rk-badge.is-err { color: var(--at-ztrac); border-color: color-mix(in srgb, var(--at-ztrac) 45%, transparent); }
.rk-badge.is-pending { color: var(--at-plat); border-color: color-mix(in srgb, var(--at-plat) 45%, transparent); }

.rk-item { padding:16px 0; border-bottom:1px solid var(--at-line); }
.rk-item-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.rk-item-head strong { font-size:15px; }
.rk-item-del .ai { width:13px; height:13px; margin-right:6px; }
.rk-field { display:block; margin:10px 0 12px; }
.rk-field > span { display:block; font-family: var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color: var(--at-dim); margin-bottom:6px; }
.rk-field textarea { width:100%; background: rgba(0,0,0,.3); color: var(--at-text);
  border:1px solid var(--at-line-strong); border-radius: var(--r-sm); padding:10px 12px; font:inherit; }
.rk-field textarea:focus { outline:none; border-color: var(--brand); }
.rk-field textarea[readonly] { background: transparent; color: var(--at-mute); }

.rk-files { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.rk-file { display:inline-flex; align-items:center; gap:6px; padding:5px 8px 5px 10px;
  border:1px solid var(--at-line); border-radius: var(--r-xs); font-size:12px; }
.rk-file a { display:inline-flex; align-items:center; gap:6px; color: var(--at-text); text-decoration:none; }
.rk-file a:hover { color: var(--brand); }
.rk-file .ai { width:13px; height:13px; }
.rk-file-x { display:inline-flex; color: var(--at-dim); }
.rk-file-x:hover { color: var(--brand); }
.rk-file-x svg { width:12px; height:12px; }
.rk-upload { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; cursor:pointer;
  border:1px dashed var(--at-line-strong); border-radius: var(--r-xs); font-size:12px; color: var(--at-mute); }
.rk-upload:hover { color: var(--at-text); border-color: var(--at-text); }
.rk-upload .ai { width:13px; height:13px; }
.rk-upload.is-busy { opacity:.5; pointer-events:none; }

/* ── „Prečo to nejde / na čo sa čaká" ───────────────────────────────────── */
/* One rule across the atelier: a blocked or waiting state always says why, in place.
   A silent empty box makes the seller reload the page guessing (2026-08-07). */
/* „Co ještě chybí k objednávce" — okno nad zamknutým „Odeslat objednávku".
   Obal chytá hover/fokus; zamknuté tlačítko musí být pointer-events:none,
   jinak disabled control spolkne pointer a :hover na obalu nikdy nenastane.
   Mezera k tlačítku je PADDING okna (ne margin), aby přejetí myší z tlačítka
   do okna nebylo přerušené — jinak okno zmizí dřív, než se dá kliknout na
   „Odeslat data". */
.nv-vlozit-wrap { position:relative; display:inline-flex; outline:none; }
.nv-vlozit-wrap > .btn[disabled] { pointer-events:none; }
.nv-vlozit-wrap.has-pop { cursor:help; }
.nv-order-pop { display:none; position:absolute; right:0; top:100%; z-index:40; padding-top:8px; width:min(460px, calc(100vw - 48px)); text-align:left; font-size:.85rem; font-weight:400; letter-spacing:0; text-transform:none; }
.nv-order-pop > strong, .nv-order-pop ul { background: var(--at-panel); }
.nv-order-pop > strong { display:block; color: var(--at-text); padding:14px 18px 8px; border:1px solid var(--at-line); border-bottom:0; border-radius: var(--r-sm) var(--r-sm) 0 0; box-shadow: var(--at-shadow); }
.nv-order-pop ul { list-style:none; margin:0; padding:0 18px 14px; display:grid; gap:6px; border:1px solid var(--at-line); border-top:0; border-radius: 0 0 var(--r-sm) var(--r-sm); box-shadow: var(--at-shadow); }
.nv-order-pop li { display:flex; align-items:flex-start; gap:8px; color: var(--at-mute); line-height:1.5; white-space:normal; }
.nv-order-pop li .ai { width:15px; height:15px; flex:0 0 auto; margin-top:3px; }
.nv-order-pop li.is-ok .ai { color: var(--at-zisk); }
.nv-order-pop li.is-missing .ai { color: var(--brand); }
.nv-order-pop li.is-missing strong { color: var(--at-text); }
.nv-order-pop .atelier-link { margin-left:4px; }
.nv-vlozit-wrap:hover .nv-order-pop, .nv-vlozit-wrap:focus-within .nv-order-pop, .nv-vlozit-wrap.is-open .nv-order-pop { display:block; }
/* Úzká obrazovka: lišta se láme a roluje, absolutní okno by z ní vyjelo mimo
   viewport (naměřeno 390 px: pravý okraj na 552). Tam je okno spodní list. */
@media (max-width: 900px) {
  .nv-order-pop { position:fixed; left:12px; right:12px; top:auto; bottom:12px; width:auto; padding-top:0; z-index:120; }
}

/* ── Elektronická nabídka (nabidka.html) ─────────────────────────────── */
.nabidka-hero { background: var(--bg); color: var(--text); padding: 150px 0 64px; }
.nabidka-hero .nabidka-meta, .nabidka-sub { color: var(--text-mute); margin: 12px 0 0; }
.nabidka-notice { display:inline-block; margin-top:16px; padding:10px 16px; border-radius: var(--r-sm); background: rgba(200,38,44,.12); border:1px solid rgba(200,38,44,.35); }
.nabidka-notice.is-won { background: rgba(74,124,89,.15); border-color: rgba(74,124,89,.4); }
.nabidka-stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 32px; max-width: 900px; }
.nabidka-stats > div { padding: 16px 18px; border: 1px solid rgba(245,238,224,.14); border-radius: var(--r-md); background: rgba(245,238,224,.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nabidka-stats strong { display:block; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.1; }
.nabidka-stats span { display:block; margin-top: 4px; font-size: .78rem; color: var(--text-mute); letter-spacing: .04em; }
.nabidka-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
/* Krémový list = odtržený bloček: dole cikcak (dva pruhy trojúhelníků,
   levý a pravý sklon), který přechází do tmavé patičky. Rohy nahoře nechává
   .catalog-paper; dolní zaoblení ruší cikcak. */
.nabidka-paper { padding: 56px 0 80px; }
.nabidka-section { margin-bottom: 56px; }
.nabidka-section:last-of-type { margin-bottom: 0; }
.nabidka-rows { display:grid; gap: 0; border-top: 1px dashed rgba(33,29,24,.22); }
.nabidka-row { display:grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px dashed rgba(33,29,24,.22); }
.nabidka-row-qty { color: var(--text-mute); font-size: .9rem; }
.nabidka-row-price { font-variant-numeric: tabular-nums; font-weight: 500; }
.nabidka-row-price small { color: var(--text-mute); font-weight: 400; font-size: .75rem; margin-left: 6px; }
.nabidka-layout { display:grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.nabidka-main .display-s { margin: 0 0 20px; }
.nabidka-main .display-s small { font-family: var(--sans); font-size: .8rem; color: var(--text-mute); margin-left: 10px; vertical-align: middle; letter-spacing: .06em; }
.nabidka-assemblies { display:grid; gap:24px; margin-bottom: 56px; }
.nabidka-assembly { display:grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap:28px; background: #fff; border-radius: var(--r-lg); overflow:hidden; box-shadow: 0 1px 2px rgba(33,29,24,.05), 0 12px 32px rgba(33,29,24,.06); }
.nabidka-assembly.is-flipped { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }
.nabidka-assembly.is-flipped .nabidka-assembly-media { order: 2; }
.nabidka-assembly.is-flipped .nabidka-assembly-body { padding: 28px 0 28px 28px; }
.nabidka-assembly-media { aspect-ratio: 4/3; background: radial-gradient(ellipse at 50% 60%, #f7f3ec, #ece6da); display:flex; align-items:center; justify-content:center; }
.nabidka-assembly-media img { width:100%; height:100%; object-fit:contain; transition: transform 600ms cubic-bezier(.22,1,.36,1); }
.nabidka-assembly:hover .nabidka-assembly-media img { transform: scale(1.03); }
.nabidka-assembly-body { padding: 28px 28px 28px 0; display:flex; flex-direction:column; gap:12px; }
.nabidka-chips { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.nabidka-chips small, .nabidka-swatch small { display:block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); margin-right: 4px; }
.nabidka-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(33,29,24,.16); font-size: .8rem; }
.nabidka-swatches { display:flex; flex-wrap:wrap; gap: 10px 22px; }
.nabidka-swatch { display:inline-flex; align-items:center; gap: 10px; font-size: .92rem; }
.nabidka-swatch img, .nabidka-swatch i { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(33,29,24,.15); background: #e9e2d6; display:block; }
.nabidka-price { font-size: 1.4rem; margin: 6px 0 0; }
.nabidka-price small { font-size: .8rem; color: var(--text-mute); margin-left: 6px; }
.nabidka-card--plain { border:1px solid rgba(0,0,0,.08); border-radius: var(--r-md); padding: 20px; background:#fff; }
.nabidka-plain-photo { aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: #f4f1ec; margin-bottom: 14px; }
.nabidka-plain-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nvsp-noimg { width: 56px; height: 56px; border-radius: var(--r-xs); background: rgba(0,0,0,.06); flex: 0 0 auto; }
/* Only the QUOTE price (from the payload, drawn as .nabidka-card-price below)
   may show on a nabídka card — applianceCard()'s own price row is today's
   catalogue price, which can legitimately differ from what the seller offered. */
.nabidka-grid .ac-price-row { display:none; }
.nabidka-card { display:flex; flex-direction:column; }
.nabidka-card-price { font-size: 1.15rem; }
.nabidka-card-price small { display:block; font-size: .8rem; color: var(--text-mute); margin: 2px 0 0; }
.nabidka-steps { margin-top: 64px; padding-top: 36px; border-top: 1px solid rgba(33,29,24,.12); }
.nabidka-timeline { list-style:none; margin: 22px 0 0; padding: 0; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; position: relative; }
/* Spojovací linka mezi kruhy — pod nimi, přes celou šířku osy. */
.nabidka-timeline::before { content:''; position:absolute; left: 24px; right: 24px; top: 24px; height: 1px; background: rgba(33,29,24,.18); }
.nabidka-timeline li { position: relative; padding: 0 12px 0 0; }
.nabidka-step-dot { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: #fff; border: 1px solid rgba(33,29,24,.22); color: var(--text-mute); transition: background .3s, color .3s, border-color .3s; }
.nabidka-step-dot .ai { width: 20px; height: 20px; }
.nabidka-timeline li.is-now .nabidka-step-dot { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 6px rgba(200,38,44,.14); }
.nabidka-timeline li.is-done .nabidka-step-dot { background: #1d1914; border-color: #1d1914; color: #fff; }
.nabidka-timeline small { display:block; margin-top: 16px; font-size: .7rem; letter-spacing: .12em; color: var(--text-mute); }
.nabidka-timeline strong { display:block; margin: 4px 0 6px; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }
.nabidka-timeline li.is-now strong { color: var(--brand); }
.nabidka-step-text { display:block; font-size: .9rem; color: var(--text-mute); line-height: 1.55; max-width: 30ch; }
/* Rovnako vysoké karty: mřížka roztáhne, cena drží dole. */
.nabidka-grid { align-items: stretch; }
.nabidka-card { height: 100%; }
.nabidka-card > .appliance-card { flex: 1 1 auto; }
/* Cena nabídky sedí UVNITŘ karty, tam, kde má katalogová karta svou cenu. */
.nabidka-card-price { margin: auto 0 0; padding: 12px 0 0; }
.nabidka-aside { position: sticky; top: calc(var(--nav-h, 80px) + 24px); }
.nabidka-summary { position: relative; background: #fff; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 24px 24px 28px; box-shadow: 0 1px 2px rgba(33,29,24,.05), 0 12px 32px rgba(33,29,24,.06); }
/* Souhrn = účtenka: odtržený cikcak dole. */
.nabidka-summary::after { content:''; position:absolute; left:0; right:0; bottom:-13px; height:14px; pointer-events:none;
  background: conic-gradient(from -45deg at 50% 100%, #fff 90deg, transparent 0) left top / 28px 14px repeat-x; }
.nabidka-total { margin: 12px 0 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(33,29,24,.12); }
.nabidka-total strong { display:block; font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.05; }
.nabidka-total small { color: var(--text-mute); font-size: .8rem; }
.nabidka-summary .row { display:flex; justify-content:space-between; gap: 12px; padding: 7px 0; font-size: .92rem; color: var(--text-mute); }
.nabidka-aside-actions { display:grid; gap: 10px; margin-top: 18px; }
.nabidka-aside-actions .btn { justify-content: center; }
.nabidka-seller { display:flex; gap: 14px; align-items:flex-start; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(33,29,24,.12); font-size: .92rem; }
.nabidka-seller small { display:block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.nabidka-seller strong { display:block; margin: 2px 0 4px; }
.nabidka-seller a { display:block; color: var(--text-mute); text-decoration: none; }
.nabidka-seller a:hover { color: var(--brand); }
.nabidka-avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; display:flex; align-items:center; justify-content:center; font-weight: 600; letter-spacing: .04em; }
@media (max-width: 1100px) { .nabidka-layout { grid-template-columns: 1fr; } .nabidka-aside { position: static; } }
@media (max-width: 900px) {
  .nabidka-hero { padding-top: 110px; }
  .nabidka-assembly, .nabidka-assembly.is-flipped { grid-template-columns: 1fr; }
  .nabidka-assembly.is-flipped .nabidka-assembly-media { order: 0; }
  .nabidka-assembly-body, .nabidka-assembly.is-flipped .nabidka-assembly-body { padding: 0 20px 24px; }
  .nabidka-actions .btn { width: 100%; justify-content: center; }
  .nabidka-timeline { grid-template-columns: 1fr; gap: 28px; }
  .nabidka-timeline::before { left: 24px; right: auto; top: 24px; bottom: 24px; width: 1px; height: auto; }
  .nabidka-timeline li { padding-left: 64px; }
  .nabidka-step-dot { position: absolute; left: 0; top: 0; }
  .nabidka-timeline small { margin-top: 0; }
}

.nv-smlouva-why { display:flex; align-items:flex-start; gap:8px; margin-top:8px; line-height:1.5; }
.nv-smlouva-why .ai { width:15px; height:15px; flex:0 0 auto; margin-top:2px; }
.nv-smlouva-why.is-warn { color: var(--at-plat); }
.nv-smlouva-why.is-err  { color: var(--at-ztrac); }
.nv-spin { width:14px; height:14px; flex:0 0 auto; margin-top:2px; border-radius:50%;
  border:2px solid var(--at-line-strong); border-top-color: var(--brand);
  animation: nv-spin 0.8s linear infinite; }
@keyframes nv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nv-spin { animation-duration: 2.4s; } }
/* Neplatný dokument — ostáva viditeľný ako história, ale nie je klikateľný. */
.nv-smlouva-doc.is-stale { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.nv-smlouva-doc.is-stale .nv-smlouva-doc-soon { text-decoration: none; color: var(--at-ztrac); }

/* ── Poznámka designéra pod blokom ──────────────────────────────────────
   Pripája sa za ľubovoľný blok (renderBlock v studio-render.js), takže
   nesmie nič predpokladať o tom, čo je nad ňou. Krúžok má PEVNÝCH 46 px a
   `object-fit: cover` — to je to, čo drží jednotu stránky bez ohľadu na
   to, akú fotku niekto nahrá.

   Šírka ZRKADLÍ obsah bloku nad poznámkou (rozhodnutie 2026-08-17): default
   je plná šírka containeru (wide text/video/obrázok), modifikátory nižšie
   kopírujú užšie stĺpce blokov. Prideľuje ich noteWidthMods() v
   studio-render.js (bloky) a section-notes priechod v app.js (PDP sekcie) —
   hodnoty drž v synku s .st-narrow / .st-w-inset / .st-gal-w-inset. */
.st-dnote { padding: 0 0 40px; }
.st-dnote.st-bg-paper { background: var(--bg-paper); color: var(--text-paper); padding-top: 8px; }
.st-dnote.st-bg-dark { background: var(--bg); padding-top: 8px; }
.st-dnote-in {
  display: flex; gap: 16px; align-items: flex-start;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.st-dnote--narrow .st-dnote-in { max-width: 760px; }   /* .st-narrow */
.st-dnote--inset .st-dnote-in { max-width: 820px; }    /* .st-w-inset */
.st-dnote--inset-lg .st-dnote-in { max-width: 980px; } /* .st-gal-w-inset / .st-image-text.st-w-inset */
.st-dnote--center .st-dnote-in { margin-left: auto; margin-right: auto; }
.st-dnote--right .st-dnote-in { margin-left: auto; }
/* Poznámka vnorená DO bunky bloku (dnes prvá bunka dvojice fotiek — sedí pod
   textom prvej fotky vo voľnom rohu, ktorý offsetová druhá fotka necháva
   prázdny). Vnorený .container wrapper poznámky sa neutralizuje, šírku aj
   zarovnanie dáva bunka. */
.st-dnote--incell { padding-bottom: 0; margin-top: 26px; }
.st-dnote--incell .container { padding: 0; max-width: none; }
/* Poznámka pod popisom kuchyne („pribeh") NEsedí za .pdp-body ako sibling —
   app.js ju vkladá priamo do stĺpca .pdp-story, aby sedela tesne pod textom
   aj keď je pravý stĺpec (technický popis + CTA) vyšší. Šírku stĺpca tým
   dostáva zadarmo; vnorený .container wrapper poznámky treba len
   zneutralizovať (v stĺpci nemá čo centrovať ani odsadzovať). */
.st-dnote--sec-pribeh { margin-top: 38px; padding-bottom: 0; }
.st-dnote--sec-pribeh .container { padding: 0; max-width: none; }
.st-dnote-av {
  flex: 0 0 auto; width: 46px; height: 46px;
  border-radius: 50%; object-fit: cover; display: block;
}
.st-dnote-txt {
  margin: 0; font-family: var(--serif); font-style: italic;
  font-size: 17px; line-height: 1.62;
  color: color-mix(in srgb, currentColor 88%, transparent);
  overflow-wrap: anywhere;
}
.st-dnote-sig {
  display: block; margin-top: 9px;
  font-family: var(--mono); font-style: normal; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, currentColor 52%, transparent);
}
@media (max-width: 640px) {
  .st-dnote-in { gap: 13px; }
  .st-dnote-txt { font-size: 15.5px; }
}

/* Sekce návrhu, která zůstala jen kvůli existujícím řádkům (kusový prodej ji
   nepoužívá). Ztlumená, aby se na první pohled lišila od sekce, kterou prodejce
   používat smí — jinak vypadá stejně, jen v ní záhadně nejde nic přidat. */
.nv-section--locked { opacity: .78; }
.nv-sec-locked { display: block; margin-top: 4px; color: var(--brand); }

/* /zakazky.html — plný přehled zakázek účtu. Řádek je klikací odkaz do detailu;
   staví na týchž tokenech jako .cst-row v Zákaznících, ať to není druhý vzhled
   pro tutéž věc. */
.zp-row { display:flex; align-items:center; gap:16px; padding:14px 16px;
  border-bottom:1px solid var(--line); color:inherit; text-decoration:none; }
.zp-row:last-child { border-bottom:0; }
.zp-row:hover { background:rgba(255,255,255,.03); }
.zp-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.zp-main strong { font-size:15px; }
.zp-meta { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;
  font-size:12.5px; color:var(--text-dim); }
.zp-meta .ai { width:14px; height:14px; margin-right:4px; vertical-align:-2px; }
.zp-code { font-family:var(--mono); letter-spacing:.04em; }
.zp-arch { opacity:.7; }
.zp-side { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.zp-status { font-size:12.5px; color:var(--text-dim); }

/* Karta zákazníka — úprava údajů (ateliér) */
.cst-edit-form { grid-column: 1 / -1; margin-top: 18px; padding: 18px; border: 1px solid var(--at-line); border-radius: var(--r-md); background: var(--at-panel); }
.cst-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.cst-edit-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--at-mute); }
.cst-edit-grid input { font: inherit; font-size: .92rem; color: var(--at-text); background: var(--at-input-bg); border: 1px solid var(--at-line); border-radius: var(--r-xs); padding: 8px 10px; }
.cst-edit-wide { grid-column: 1 / -1; }
.cst-edit-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

/* ═══ Moje vizitka (/vizitka.html) — nastavení karty prodejce ══════════════
   Dva sloupce: vlevo se ladí, vpravo je NÁHLED SKUTEČNÉHO MAILU v <iframe>.
   Náhled je cizí HTML v prázdném sandboxu, takže mu nesmí nic ze stránky
   protéct dovnitř — proto se stylují jen rozměry rámu, ne jeho obsah. */
.viz-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.viz-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.viz-form .cst-edit-grid select { font: inherit; font-size: .92rem; color: var(--at-text); background: var(--at-input-bg); border: 1px solid var(--at-line); border-radius: var(--r-xs); padding: 8px 10px; }
.viz-note { margin: 12px 0 0; font-size: .78rem; }
.viz-uploads { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--at-line); }
.viz-slot-label { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--at-mute); margin-bottom: 8px; }
.viz-slot-body { display: flex; align-items: center; gap: 14px; }
.viz-slot-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* `.atelier-link` nastavuje `display`, což přebije atribut `hidden` — „Odebrat"
   pak svítilo i u prázdného slotu. */
.viz-slot-actions [hidden] { display: none; }
.viz-thumb { width: 76px; height: 76px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--at-line); border-radius: 50%; background: var(--at-input-bg);
  font-size: .7rem; color: var(--at-mute); text-align: center; }
.viz-thumb-wide { width: 160px; height: 90px; border-radius: var(--r-xs); }
.viz-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Nahrávací tlačítko je <label> se skrytým inputem — bez tohohle by mělo
   textový kurzor a nevypadalo jako tlačítko. */
.viz-file { cursor: pointer; }
.viz-href { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-size: .78rem; color: var(--at-mute); }
.viz-href input { font: inherit; font-size: .92rem; color: var(--at-text); background: var(--at-input-bg); border: 1px solid var(--at-line); border-radius: var(--r-xs); padding: 8px 10px; }
.viz-preview { position: sticky; top: 96px; }
#viz-frame { width: 100%; height: min(72vh, 900px); border: 1px solid var(--at-line); border-radius: var(--r-sm); background: #100e0c; }
@media (max-width: 980px) {
  .viz-cols { grid-template-columns: 1fr; }
  .viz-preview { position: static; }
  #viz-frame { height: 60vh; }
}

/* /vyprodej — „Do návrhu" na kartě v režimu výběru (ateliér) */
.vp-card .vp-navrh { margin: 12px 0 0; align-self: flex-start; font-size: 10px; padding: 10px 16px; }
/* Sklad studia — katalogový seznam (sklad.html) a mřížka kusů na stránce expozice. */
.sk-catalog { padding-top: 40px; }
.sk-catalog--first { padding-top: 132px; }
.sk-catalog + .sk-catalog { padding-top: 0; }
/* Expozice bez fotky (nábytek bez feedu): místo rozbitého <img> dlaždice s kódem. */
.sk-thumb-empty { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); }
.sk-thumb-code { font-family: var(--serif); font-size: 32px; letter-spacing: .04em; color: rgba(255,255,255,.35); }
.sk-catalog-head { margin-bottom: 40px; }
.sk-catalog-head .eyebrow { display: block; margin-bottom: 14px; }
.sk-catalog-sub { margin-top: 12px; color: var(--muted, #9a938a); font-size: 14px; }
.sk-catalog-sub a { text-decoration: underline; text-underline-offset: 3px; }
.sk-prod-card .prod-name em { font-style: italic; opacity: .6; font-size: .8em; margin-left: 6px; }
.sk-items-section .vp-paper { padding-bottom: 8px; }
/* Mřížka kusů expozice — .vp-grid nese jen gap, mřížku si sklad drží sám. */
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.sk-empty { grid-column: 1 / -1; padding: 40px 0; color: var(--muted, #9a938a); }
@media (max-width: 640px) { .sk-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Kusy expozice v bílém panelu (stránka kuchyně, kind=sklad): karty jako ve
   výprodeji, mřížka se zalamuje pod sebe. */
.sk-items-section .eshop-panel { padding-bottom: clamp(16px, 2vw, 26px); }
.sk-head-n { font-style: italic; font-weight: 300; font-size: .55em; opacity: .55; margin-left: 10px; }
.sk-items-section .sk-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* Půdorys studia na /sklad — sekce jsou vektorové tvary z PDF od grafika,
   podklad je render shora. Barvy odpovídají legendě v tom PDF. */
.sk-map-wrap { margin: 8px auto 46px; }
.sk-map-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.sk-map-title { font: 300 clamp(22px, 2.4vw, 30px)/1.15 var(--serif); margin: 0; }
.sk-map-note { margin: 0; font-size: 13px; color: var(--muted, #9a938a); }
/* Půdorys se vejde na obrazovku: vizovický je čtvercový, takže na plnou šířku
   kontejneru měřil 1345 px a odsouval všechno pod sebou o celý viewport.
   Strop je na VÝŠCE, šířka se dopočítá z poměru stran (`--sk-ar`), takže
   obrázek i překryv sekcí se zmenšují spolu. */
.sk-map { position: relative; border-radius: var(--r-md); overflow: hidden;
  max-width: min(100%, calc(74vh * var(--sk-ar, 1.6))); margin-inline: auto; }
.sk-map img { display: block; width: 100%; height: auto; }
/* preserveAspectRatio="none" + stejný poměr jako obrázek: tvary sedí na render
   při každé šířce, protože obojí je vyříznuté ze stejné stránky PDF. */
.sk-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-map-hit { cursor: pointer; }
/* Sekce bez přiřazené expozice zůstává jen naznačená — všech osmnáct v plné
   barvě udělalo z půdorysu barevnou kaši, ve které nešlo poznat, co je volné. */
.sk-map-zone { fill: currentColor; opacity: .11; transition: opacity .22s ease; }
.sk-map-zone.is-taken { opacity: .42; }
.sk-map-hit:hover .sk-map-zone, .sk-map-zone.is-hot { opacity: .74; }
/* Vybraný druh: ostatní sekce ustoupí, aby bylo vidět, kde ten druh v půdorysu je. */
.sk-map-zone.is-off { opacity: .03; }
.sk-map-wrap.is-filtering .sk-map-zone:not(.is-off) { opacity: .66; }
.sk-map-hit:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sk-map-zone, .sk-key { transition: none; } }
/* Barvu nese KAŽDÁ sekce v datech (z legendy toho PDF) — paleta v CSS by
   u druhého studia mlčela: Praha má sedm druhů a jiné odstíny než Vizovice. */
/* Živý popisek pod půdorysem: najetí na sekci nebo na druh v legendě sem píše,
   co to je. Serif proto, že je to jediná věta, kterou tu člověk čte — kolem
   jsou samá čísla a kódy. */
/* Jeden ovládací pruh pod půdorysem: vlevo živý popisek, vpravo druhy. Dvě
   řádky pod sebou působily jako dvě nesouvisející popisky. */
.sk-map-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; margin-top: 16px; }
.sk-map-cap { flex: 1 1 260px; margin: 0; min-height: 1.6em; font: 300 clamp(15px, 1.5vw, 18px)/1.5 var(--serif); color: var(--text); }
/* Legenda = ovládání. Druh se dá podržet (najetí) nebo zamknout (klik). */
.sk-map-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-key {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-xs);
  background: transparent; color: var(--text); font: 400 12.5px/1 var(--sans); cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.sk-key-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sk-key, currentColor); }
.sk-key-n { font-variant-numeric: tabular-nums; opacity: .5; }
.sk-key:hover, .sk-key:focus-visible { border-color: var(--sk-key, rgba(255,255,255,.4)); }
.sk-key.is-on, .sk-key[aria-pressed="true"] { border-color: var(--sk-key, #fff); background: color-mix(in srgb, var(--sk-key, #fff) 14%, transparent); }
.sk-key[aria-pressed="true"] .sk-key-n { opacity: .8; }
/* Karta expozice, na kterou se ukazuje v půdorysu (a naopak). */
.sk-prod-card.is-hot { outline: 1px solid rgba(255,255,255,.5); outline-offset: 4px; }

/* Podnadpis skupiny kusů (Kuchyně / Spotřebiče a vybavení) — jen když má
   expozice obojí; jedna skupina si nese nadpis panelu a druhý řádek by byl
   jen šum. */
.sk-group-head { margin: 26px 0 14px; font: 400 clamp(17px, 1.6vw, 21px)/1.2 var(--serif); color: var(--text-paper); }
.sk-group-head:first-child { margin-top: 0; }
.sk-group-n { font-style: italic; font-weight: 300; font-size: .8em; opacity: .5; margin-left: 8px; }
.sk-rows-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 2px 0; font-size: 14px; color: var(--text-paper); }
.sk-rows-foot b { font: 500 20px/1.1 var(--serif); }

/* Detail kusu expozice — odkazy na expozici / katalog nad souvisejícími kusy. */
.sk-d-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.sk-d-more { margin-top: 18px; font-size: 14px; }

/* ═══════════════════════════ TISK (audit 2026-09-05, C5) ═══════════════════════════
   Detail realizace vytištěný do PDF měl 13 stran, z toho 5 prázdných, oříznutou galerii a
   navigaci na každé straně. U nákupu za stovky tisíc si lidé podklady tisknou a posílají
   partnerovi. Pravidla jsou záměrně hrubá (`!important`): tiskový layout nemá soutěžit
   s 146 `overflow: hidden` a 19 `100vh` v hlavním stylu, jen je vypnout. */
@media print {
  .nav, .site-header, .skip-link, .video-ctl, .footer, .drawer, #cart-drawer, .bk-modal, .kp-modal,
  .consent, .consent-card, [id^="consent-"], .toast, .pdp-hero-progress, .scroll-hint, .nav-search,
  .nav-menu-overlay, .nav-menu-panel, .nav-mm-fly, .nav-search-overlay,
  .filter-bar, .appl-fb-bar, .nab-facets-host, .cat-search, .paginator, .compare-tray,
  video, .lazy-video, .hevc-source, iframe, [data-bk-open], .btn, button { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; }
  html, body { background: #fff !important; color: #111 !important; width: auto !important; height: auto !important; overflow: visible !important; }
  body { margin: 0 !important; padding: 0 !important; }
  main, section, article, .container, .stack, .pdp, .pdp-body, .appl-shop-sheet, .pdp-blocks,
  .hero, .hero-media, .pdp-hero, .pdp-gallery, .pdp-gallery-band, .catalog-paper, .st-gallery, .st-block {
    position: static !important; overflow: visible !important; height: auto !important;
    min-height: 0 !important; max-height: none !important; transform: none !important;
    background: transparent !important; color: #111 !important;
  }
  .reveal, .image-reveal, .in { opacity: 1 !important; transform: none !important; clip-path: none !important; visibility: visible !important; }
  img { max-width: 100% !important; height: auto !important; break-inside: avoid; page-break-inside: avoid; }
  picture, figure, .st-gal-cell, .prod-card, .appl-card, .pdp-facts, .pdp-usp { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; color: #111 !important; }
  p, li { orphans: 3; widows: 3; }
  a { color: inherit !important; text-decoration: none !important; }
  /* Tmavé pozadí hera a papírových sekcí by dalo černou stránku; text „mute" je na bílé nečitelný. */
  main, main * { background: transparent !important; color: #111 !important; }
  main .hero, main .hero *, main .pdp-hero, main .pdp-hero *, main [class*="hero-media"] { position: static !important; inset: auto !important; transform: none !important; }
  main .pdp-hero img, main .hero img { max-height: 110mm !important; width: auto !important; display: block; margin: 0 0 6mm; }
  .pdp-gallery, .pdp-gallery-band, .prod-grid { display: block !important; }
  .pdp-gallery img { display: block; margin: 0 0 6mm; max-height: 100mm !important; width: auto !important; }
  /* Galerie realizace: dvě fotky na řádek, ať netiskne jednu na stránku. */
  .st-gal-track { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 5mm !important; }
  .st-gal-track img, .st-block img { max-height: 95mm !important; width: 100% !important; object-fit: contain; }
  @page { margin: 14mm 12mm; }
}