/* ──────────────────────────────────────────────────────────────────────────
   Sykora — moderný redesign, editorial / cinematic
   Inspired by maisons (Vuitton, Hermès, Bulthaup, Boffi)
   Warm-dark + cream + Sýkora 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).
   6 faces, matching exactly what the old Google Fonts Fraunces load covered:
   weights 300/400/500/600 + italic 300/400. To REVERT: delete this block and
   restore `--serif` below to 'Fraunces' (the Google <link> in every *.html
   still loads Fraunces, so it keeps working as the fallback either way).
   ────────────────────────────────────────────────────────────────────────── */
@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: normal; font-weight: 600; font-display: swap;
  src: url('../vendor/tiempos/tiempos-600.woff2') format('woff2');
}

:root {
  /* Surface */
  --bg:           #1c1813;     /* softer warm-dark — site-wide base */
  --bg-paper:     #f3ede2;     /* cream paper sections */
  --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;     /* Sýkora 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:         'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
}

@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;
}
.display-l {
  font-family: var(--serif);
  font-size: clamp(56px, 9vw, 144px);
  line-height: 0.92;
  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; }

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-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); }

/* ── 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: 16px 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;
  border-bottom: 1px solid var(--line);
}
.nav-menu-panel .nav-links a:hover { color: #fff !important; }
.nav-menu-panel .nav-links a.active { 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 */
.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; }

.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; }

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

.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; }

.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); }

.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-quick {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  width: 48px; height: 48px;
  background: rgba(245,238,224,0.95);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  opacity: 0; transform: translateY(12px) scale(0.9);
  transition: all 320ms cubic-bezier(.22,1,.36,1);
}
.prod-card:hover .prod-quick { opacity: 1; transform: translateY(0) scale(1); }
.prod-quick:hover { background: var(--brand); color: #fff; }
.prod-quick svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.4; fill: none; }

.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;
  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: italic; }

.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;
}
.atelier .stack { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; }
@media (max-width: 1024px) { .atelier .stack { grid-template-columns: 1fr; gap: 40px; } }
.atelier h2 { max-width: 12ch; margin-top: 16px; }
.atelier .cities {
  columns: 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;
  border-bottom: 1px solid var(--line);
}
.atelier .city .name { font-family: var(--serif); font-size: 22px; }
.atelier .city .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }

/* ── 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); }
/* "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; }

.pdp-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.pdp-meta dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.pdp-meta dd { color: var(--text); font-family: var(--serif); font-size: 16px; }

/* 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; }

.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; }
}

.summary {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  padding: 40px;
  border-radius: var(--r-lg);
  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); }

/* ── 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; } }

/* 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);
}
.footer-cta h2 { font-size: clamp(48px, 7vw, 110px); line-height: 0.95; max-width: 18ch; margin: 16px auto 32px; color: var(--text); font-weight: 300; }

.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 80px;
}
.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; }
.footer-social { display: flex; gap: 12px; }
.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 .bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.06em;
}
@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 { flex-direction: column; gap: 12px; } }

/* 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; } }
@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; } }
.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; }

/* 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); }
@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; }

@media (max-width: 600px) {
  .bk-head { padding: 22px 22px 0; }
  .bk-head .info h3 { font-size: 24px; }
  .bk-steps { padding: 16px 22px 0; }
  .bk-body { padding: 26px 22px; }
  .bk-step-title { font-size: 30px; }
  .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; }
}

/* ── 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;
  z-index: 300;
  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 {
  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 partner marquee or the
   closing „Naši partneři" wall, collapse the doubled gap + drop the marquee's
   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-partner-marquee),
.appl-specialists:has(+ .appl-partners) { padding-bottom: 32px; }
.appl-specialists + .appl-partner-marquee { border-top: none; padding-top: 8px; }
.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;
}

/* ── Partner logo marquee — thin auto-scrolling strip above the configurator ── */
.appl-partner-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 24px 0;
  border-top: 1px solid rgba(245,238,224,0.08);
  border-bottom: 1px solid rgba(245,238,224,0.08);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.apm-track {
  display: inline-flex;
  align-items: center;
  gap: 68px;
  width: max-content;
  white-space: nowrap;
  animation: apmScroll 50s linear infinite;
  will-change: transform;
}
.appl-partner-marquee:hover .apm-track { animation-play-state: paused; }
.apm-logo { display: inline-flex; align-items: center; }
.apm-logo img {
  height: 26px; width: auto; max-width: 150px;
  filter: brightness(0) invert(1);
  opacity: 0.5;
  transition: opacity 300ms ease;
}
.apm-logo:hover img { opacity: 1; }
/* Track holds two identical copies; sliding by half a track loops seamlessly.
   -50% → 0 moves the logos left→right. */
@keyframes apmScroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@media (max-width: 720px) {
  .apm-track { gap: 44px; animation-duration: 34s; }
  .apm-logo img { height: 20px; }
}

/* ── 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: italic; 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: numbered rows on the soft-dark section, no card */
.set-builder {
  max-width: 880px;
  margin: 0 auto;
  counter-reset: sbstep;
}
.sb-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  padding: 36px 0;
  border-top: 1px solid rgba(245,238,224,0.13);
  counter-increment: sbstep;
}
.sb-row:first-child { border-top: none; padding-top: 6px; }
@media (max-width: 720px) {
  .sb-row { grid-template-columns: 1fr; gap: 16px; padding: 30px 0; }
}
.sb-label {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text);
  padding-top: 3px;
}
.sb-label::before {
  content: counter(sbstep, decimal-leading-zero);
  display: block;
  color: var(--brand-hi);
  margin-bottom: 9px;
}

/* Brand — frosted-glass pills */
.sb-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-chip {
  padding: 12px 22px;
  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: 999px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px; letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.sb-chip:hover { border-color: rgba(255,255,255,0.30); }
.sb-chip.active {
  background: rgba(200,38,44,0.24);
  border-color: var(--brand);
  color: #fff;
}
.sb-chip-clear { color: var(--text-mute); }

/* Specialist brands — they make only a few appliances (Faber/Elica = odsávače,
   Liebherr = chlazení …). A "Specialisté" label sits on its OWN line (full-width
   flex item forces the wrap) and the specialist chips drop below it; each chip
   carries a small mono tag of the categories it covers. */
.sb-chip-divider {
  flex-basis: 100%;
  display: flex; align-items: center; gap: 12px;
  margin-top: 6px; padding-top: 2px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mute);
}
.sb-chip-divider::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,0.12);
}
.sb-chip--spec {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 3px; padding-top: 9px; padding-bottom: 9px;
  border-radius: var(--r-md);   /* two-line → soft rounded rect, not a stadium */
}
.sb-chip--spec .sb-chip-name { line-height: 1.05; }
.sb-chip-spec {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-mute);
}
.sb-chip--spec.active .sb-chip-spec { color: rgba(255,255,255,0.82); }
.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 brand row is a SUB-row of step 02 — it must not consume a
   step number, and reads as a continuation of the appliance brand row. */
.sb-row-brand-sink { counter-increment: none; border-top: none; padding-top: 0; margin-top: -18px; }
.sb-row-brand-sink .sb-label::before { content: none; }

/* "?" 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; }
.sb-help::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 { 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 {
  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 {
  background: rgba(12,10,8,0.86);
}
.appl-catalog-chips .filter-chip,
.nab-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 { 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 {
  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: italic; 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 hero cards (/dvirka · /korpusy · /pracovni-desky) ──────
   The spotřebiče brand card (.sb-brand-card.abh-card) repurposed to show a
   promo photo (propagační materiál) + a fan of real sample swatches (vzorky);
   a click opens that group's own filtered catalog. */
.matc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 14px;
}
.matc-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Sample swatch chips overlaid bottom-left of the promo (vzorky) */
.matc-swatches {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: flex; gap: 6px;
}
.matc-sw {
  width: 38px; height: 38px;
  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; }

/* Count + CTA: always visible, pinned to the card's bottom edge — the
   "opens its own catalog" affordance the user asked for. */
.matc-row {
  margin-top: auto;
  padding-top: 12px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
}
.matc-count { color: rgba(245,238,224,0.6); }
.matc-cta {
  color: var(--brand-hi);
  display: inline-flex; align-items: center; gap: 6px;
}
.matc-cta svg { width: 13px; height: 13px; }
.matc:hover .matc-cta { gap: 9px; }

@media (max-width: 980px) {
  .matc-grid, .matc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .matc-grid, .matc-grid--4 { grid-template-columns: 1fr; }
}

/* "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); }

/* ── Quick-start predlohy — first row of the builder ──────────────────── */
/* Quick-start — icon-led rounded feature cards (redesigned 2026-06-15):
   a round line-icon badge, serif name + tagline, and a footer meta line with an
   arrow that slides in on hover. Fully rounded (var(--r-lg)). */
.sb-quickstarts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 680px) { .sb-quickstarts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .sb-quickstarts { grid-template-columns: 1fr; } }
.sb-qs-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 20px 16px;
  background: rgba(245,238,224,0.045);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(245,238,224,0.12);
  border-radius: var(--r-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease,
              transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.sb-qs-icon {
  width: 46px; height: 46px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(245,238,224,0.06);
  border: 1px solid rgba(245,238,224,0.14);
  color: var(--brand-hi);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.sb-qs-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sb-qs-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sb-qs-name {
  font-family: var(--serif);
  font-size: 18px; font-weight: 400; line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--text);
}
.sb-qs-tagline {
  font-family: var(--sans);
  font-size: 12px; line-height: 1.45;
  color: var(--text-mute);
}
.sb-qs-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 4px; padding-top: 13px;
  border-top: 1px solid rgba(245,238,224,0.1);
}
.sb-qs-meta {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-hi);
}
.sb-qs-go { display: inline-flex; color: var(--brand-hi); opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; }
.sb-qs-go svg { width: 16px; height: 16px; }
.sb-qs-card:hover {
  border-color: rgba(200,38,44,0.5);
  background: rgba(200,38,44,0.08);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(0,0,0,0.32);
}
.sb-qs-card:hover .sb-qs-icon { color: #fff; background: rgba(200,38,44,0.22); border-color: var(--brand); }
.sb-qs-card:hover .sb-qs-go { opacity: 1; transform: translateX(0); }
.sb-qs-card.is-active {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.sb-qs-card.is-active .sb-qs-icon { color: #fff; background: rgba(200,38,44,0.25); border-color: var(--brand); }

/* Kitchen-property toggles (Tichá / Úsporná / Celá kuchyně) — same card shell as
   the old quick-starts, but three across and with a check mark instead of the
   hover arrow. The mark is faint by default, brand-lit when the toggle is on. */
.sb-quickstarts--props { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .sb-quickstarts--props { grid-template-columns: 1fr; } }
.sb-prop { cursor: pointer; }
.sb-prop-mark { opacity: 0.22; transform: none; color: var(--text-mute); }
.sb-prop-mark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sb-prop:hover .sb-prop-mark { opacity: 0.85; transform: none; color: var(--brand-hi); }
.sb-prop.is-active .sb-prop-mark { opacity: 1; color: var(--brand-hi); transform: none; }

/* Brief red ring on the rows a quick-start just filled */
@keyframes sb-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(200,38,44,0); }
  28%  { box-shadow: 0 0 0 3px rgba(200,38,44,0.28); }
  100% { box-shadow: 0 0 0 0 rgba(200,38,44,0); }
}
.sb-pulse { animation: sb-pulse-ring 720ms ease; }

/* Categories — outline pills */
.sb-cats { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-cat {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 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);
  border-radius: 999px;
  color: var(--text-mute);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.sb-cat input { display: none; }
.sb-cat-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.sb-cat-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sb-cat-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.sb-cat:hover { border-color: rgba(255,255,255,0.30); color: var(--text); }
.sb-cat.active {
  border-color: var(--brand);
  background: rgba(200,38,44,0.20);
  color: #fff;
}
.sb-cat.active .sb-cat-icon { color: var(--brand-hi); }

/* 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);
}
.set-builder .btn {
  width: 100%;
  margin-top: 40px;
  justify-content: center;
}

/* ── Result (glass summary header, glow-on-success) ───────────────────── */
.appl-result {
  max-width: 1180px;
  margin: 80px auto 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 10px;
  background: var(--brand);
  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);
}
.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;
}
.rset-now {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.95);
}
.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); }
.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; }
/* 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, a gap above the footer so the rounded
     bottom corners read on the dark page */
  margin: calc(var(--nav-h) + 22px) 0 56px;
}
@media (max-width: 900px) { .appl-shop-sheet { border-radius: var(--r-md); margin-top: calc(var(--nav-h) + 14px); } }
/* 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;
}
/* 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;
}
/* 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; }

/* ── 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 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: italic; 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;
  background: rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  z-index: 3;
  transition: background 200ms ease, border-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(200,38,44,0.55); border-color: var(--brand); }
.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-paper);
  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: #f8f6f1; /* 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,
.catalog-paper .appl-promo-logo { filter: none; }
.catalog-paper .appl-promo-logo { opacity: 0.85; }
/* 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). */
.appl-promo, .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; }
/* info subtypes (admin "Druh": cashback keeps the info blue) */
[data-akce-kind="zaruka"] { --akce-c: #3e7c7b; }
[data-akce-kind="darek"]  { --akce-c: #7a5380; }

.appl-cat-promos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-bottom: 48px;
}
.appl-cat-promos:empty { display: none; }
.appl-promo {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 22px 18px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--akce-c);
  background: linear-gradient(160deg, color-mix(in srgb, var(--akce-c) 14%, transparent) 0%, rgba(0, 0, 0, 0) 60%);
  text-decoration: none; color: inherit;
  transition: border-color .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.appl-promo:hover { border-color: color-mix(in srgb, var(--akce-c) 65%, transparent); transform: translateY(-3px); }
.appl-promo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.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;
}
.appl-promo-logo {
  height: 16px; max-width: 110px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: 0.75;
}
.appl-promo-title { font-family: var(--serif); font-size: 19px; line-height: 1.2; color: var(--text); }
.appl-promo-desc { font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: var(--text-mute); flex: 1; }
.appl-promo-valid { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--text-dim); }

/* 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));
  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); }
.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);
}
.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: italic; 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); }
.wt-card-swatch { display: block; aspect-ratio: 4 / 3; background: #2a2622; position: relative; }
.wt-card-swatch img { 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: italic; }
@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;
}
.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; }

/* ─── 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: italic; 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: italic; 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: italic; }
.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); }
.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: italic; 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) ═══ */
.auth-section {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}
.auth-card {
  width: min(420px, 100%);
  padding: 32px 28px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}
.auth-card h1 { font-family: var(--serif); font-size: 2rem; margin: 0 0 24px; }
.auth-card form { display: flex; flex-direction: column; gap: 16px; }
.auth-card label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--text-mute); }
.auth-card input {
  padding: 10px 12px; border-radius: 8px;
  background: rgba(0,0,0,0.3); color: var(--text);
  border: 1px solid rgba(255,255,255,0.12); font: inherit;
}
.auth-card input:focus { outline: none; border-color: var(--brand); }
.auth-card .btn.solid { margin-top: 8px; }
.auth-msg { min-height: 1.2em; color: var(--brand); font-size: 0.9rem; }
.auth-links { font-size: 0.85rem; }
.auth-links a { color: var(--text-mute); text-decoration: underline; }
.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(--text-mute); }
.auth-profile dd { margin: 0; }
/* ═══ Atelier — B2B dashboard, customers list, order detail ═══ */
.atelier-topbar {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(to bottom, rgba(28,24,19,0.92), rgba(28,24,19,0.78));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--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 { display: flex; align-items: baseline; gap: 8px; color: var(--text); text-decoration: none; }
.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.65rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.2em; }
.atelier-nav { display: flex; gap: 4px; align-items: center; }
.atelier-nav a {
  color: var(--text-mute); text-decoration: none; font-size: 0.85rem; padding: 8px 14px; border-radius: 6px;
  transition: color 0.12s, background 0.12s;
}
.atelier-nav a:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.atelier-nav a.is-active { color: var(--text); background: rgba(255,255,255,0.06); }
.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(--text); font-size: 0.85rem; }
.atelier-link {
  background: transparent; border: none; color: var(--text-mute); cursor: pointer; padding: 0;
  font: inherit; font-size: 0.85rem; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.15);
}
.atelier-link:hover { color: var(--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(--line);
}
.atelier-hero h1 { font-family: var(--serif); font-size: 3rem; font-weight: 400; margin: 0; color: var(--text); line-height: 1.05; }
.atelier-sub { color: var(--text-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: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 12px;
  padding: 24px;
}
.atelier-stat-num { font-family: var(--serif); font-size: 2.4rem; font-weight: 400; color: var(--text); line-height: 1; }
.atelier-stat-label { color: var(--text-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: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 12px;
  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(--text); }
.atelier-empty { text-align: center; padding: 24px 0; color: var(--text-mute); font-size: 0.85rem; }
.atelier-empty p { margin: 0 0 12px; }
.atelier-empty-large {
  padding: 64px 24px; border: 1px dashed var(--line-strong); border-radius: 12px;
}
.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(--text); border: 1px solid var(--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); }

.atelier-profile-card {
  background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 12px;
  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(--text-mute); }
.atelier-profile dd { margin: 0; color: var(--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(--line);
}
.atelier-page-head h1 { font-family: var(--serif); font-size: 2.4rem; font-weight: 400; margin: 0; color: var(--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(--text); }
.atelier-banner span { color: var(--text-mute); }

.atelier-table-wrap { overflow-x: auto; border: 1px solid var(--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(--line); }
.atelier-table th { background: rgba(255,255,255,0.02); color: var(--text-mute); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.atelier-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.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; }
imos-net-roomplanner-plugin.zakazka-plugin-active { display: block; min-height: 600px; width: 100%; }

@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; }
}

/* ═══ 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; } }

/* ═══ 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); }

/* ═══════════════════════════════════════════════════════════════
   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; }

.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: 'Inter', sans-serif; }
.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; }
.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%; }
}

.st-gal-track { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.st-gal-cell { margin: 0; }
.st-gal-cell img { 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; }
.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 {
  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%; }
.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 { 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 {
  width: 30px; height: 30px; color: #fff; 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; }
.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;
}

.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-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; }
.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); }

/* 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 { 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); }
}
.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. */
.triptych.is-quad { grid-template-columns: repeat(4, 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; }

@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); }
.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: 18px;
}
.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;
}
.summary .row.promo-line span:first-child { color: var(--brand-hi); }
.summary .row.promo-line span:last-child { font-family: var(--mono); font-size: 12px; color: var(--brand-hi); align-self: center; }
.summary .row.promo-line .promo-tag { color: #fff; }

/* /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;
  transition: transform .3s ease;
}
.sbc-akce:hover .sbc-akce-tag { transform: translateY(-2px); }

/* Catalog promo banner is a link now */
a.appl-promo { text-decoration: none; color: inherit; transition: border-color .3s ease; }
a.appl-promo:hover { border-color: rgba(200, 38, 44, 0.55); }

/* akce.html — listing */
.akce-list-head { padding: calc(var(--nav-h) + 72px) 0 24px; }
.akce-list-head .info-lead { max-width: 580px; margin-top: 24px; font-size: 19px; line-height: 1.65; color: var(--text-mute); }
.akce-all-link {
  display: inline-block; margin-top: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mute);
}
.akce-all-link:hover { color: var(--text); }
.akce-list { padding: 40px 0 140px; }
.akce-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }
.akce-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); background: var(--bg-elev-1);
  text-decoration: none; color: inherit;
  transition: border-color .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.akce-card:hover { border-color: rgba(200, 38, 44, 0.5); transform: translateY(-4px); }
.akce-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-elev-1); }
.akce-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.akce-card:hover .akce-card-media img { transform: scale(1.04); }
.akce-card-ph { width: 100%; height: 100%; background: linear-gradient(120deg, rgba(200, 38, 44, 0.25), rgba(200, 38, 44, 0.04)); }
.akce-card-badge {
  position: absolute; top: 14px; left: 14px;
  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;
}
.akce-card-text { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.akce-card-brand { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-hi); }
.akce-card-text h3 { font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1.15; }
.akce-card-text p { font-size: 13.5px; line-height: 1.65; color: var(--text-mute); flex: 1; }
.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) + 72px) 0 0; }
.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;
}
/* 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. */
.akce-hero-media { margin-top: 48px; }
.akce-hero-media img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; display: block; }
.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; }
.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 — collapsible per-reel kitchen description (SEO copy under an arrow).
   The text stays in the DOM (max-height collapse, never display:none) so
   crawlers index it; the visible hero lead is the static editorial line. */
.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); }
.hero-desc-toggle svg { width: 15px; height: 15px; transition: transform .4s ease; }
.hero-desc-wrap.is-open .hero-desc-toggle svg { transform: rotate(90deg); }
.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;
  transition: max-height .6s cubic-bezier(.16,1,.3,1), opacity .5s ease, margin-top .5s ease;
}
.hero-desc-wrap.is-open .hero-desc { max-height: 360px; opacity: 1; margin-top: 14px; }

/* ── Cookie consent banner (Consent Mode v2) ───────────────────────────── */
.consent-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  display: none; padding: 0 var(--gutter, 24px) 18px; }
.consent-wrap.is-open { display: block; }
.consent-card { max-width: 760px; margin: 0 auto; display: flex; gap: 22px;
  align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: rgba(20, 18, 16, .82); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: var(--r-md, 14px);
  padding: 18px 22px; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.consent-eyebrow { font-family: var(--mono, monospace); text-transform: uppercase;
  letter-spacing: .12em; font-size: 11px; color: var(--brand); display: block; margin-bottom: 6px; }
.consent-lead { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text, #eee); max-width: 52ch; }
.consent-lead a { color: var(--text); text-decoration: underline; }
.consent-cats { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.consent-cat { font-size: 12.5px; display: inline-flex; gap: 7px; align-items: center; color: var(--text); }
.consent-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.consent-actions .btn { font-size: 12.5px; }
@media (max-width: 720px) { .consent-card { flex-direction: column; align-items: stretch; }
  .consent-actions { justify-content: stretch; } .consent-actions .btn { flex: 1; } }

/* ═══ 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 'Inter',sans-serif; padding:4px 8px; border-radius:999px; letter-spacing:.01em; }
.vp-flag-sold { background:rgba(0,0,0,.72); color:#fff; font:600 11px/1 'Inter',sans-serif; padding:4px 8px; border-radius:999px; }
.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 'JetBrains Mono',monospace; 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; }
.vp-cat { font:500 11px/1 'JetBrains Mono',monospace; 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; }
.vp-prices { display:flex; align-items:baseline; gap:10px; margin-top:2px; }
.vp-old { text-decoration:line-through; color:var(--text-mute); font-size:14px; }
.vp-new { color:var(--text); font:500 18px 'Inter',sans-serif; }
.vp-studio { font:500 12px 'JetBrains Mono',monospace; 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; }
/* 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-paper); 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 'JetBrains Mono',monospace; 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 'Inter',sans-serif; background:#fff; color:#1a1713; }
.vp-res-msg { color:var(--brand); font-size:13px; }
.vp-res-ok { font:400 16px/1.6 'Inter',sans-serif; }

/* 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; }
.vp-d-back { display:inline-flex; align-items:center; gap:6px; font:500 13px 'JetBrains Mono',monospace; 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 'Inter',sans-serif; color:var(--text); }
.vp-d-tag { background:var(--brand); color:#fff; font:500 13px/1 'JetBrains Mono',monospace; padding:5px 9px; border-radius:999px; align-self:center; }
.vp-d-note { font-size:14px; color:var(--text-mute); margin:0; }
.vp-d-desc { font:400 15px/1.65 'Inter',sans-serif; color:var(--text); }
.vp-d-desc p { margin:0 0 .8em; }
.vp-d-desc p:last-child { margin-bottom:0; }
.vp-d-studio { font:500 13px 'JetBrains Mono',monospace; 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); }
.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 'JetBrains Mono',monospace; 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 'Inter',sans-serif; 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 catalog filter bar */
.vp-hero { padding-top:clamp(48px,8vh,96px); padding-bottom:32px; }
.vp-lead { font:400 16px/1.7 'Inter',sans-serif; 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); }
.vp-empty { font:400 16px/1.7 'Inter',sans-serif; color:var(--text-mute); padding:48px 0 80px; }
#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 'Inter', sans-serif; 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: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.nav-mm-all { display: block; padding: 10px 0 14px; font: 400 13px/1 var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: rgba(245,238,224,.62) !important; }
.nav-mm-all:hover { color: #fff !important; }
.nav-mm-world { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer;
  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:last-child { border-bottom: 0; }
.nav-mm-world: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 'Inter', sans-serif; color: rgba(245,238,224,.8); }
.nav-mm-pcard:hover .nav-mm-pname { color: #fff; }