/* ──────────────────────────────────────────────────────────────────────────
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 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-panel: #f8f6f1; /* off-white product/catalog panels (spotřebiče katalog, košík, e-shop pásik) */
--bg-elev-1: #262119;
--bg-elev-2: #312a22;
--line: #2a2521;
--line-paper: #d8cdb8;
--line-strong: #423b32;
/* Text */
--text: #f5eee0;
--text-paper: #1a1612;
--text-mute: #a89e8a;
--text-mute-paper: #6b5f4d;
--text-dim: #6f6555;
/* Brand */
--brand: #c8262c; /* 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); }
/* Hover flyout — the product world's submenu rolls out BESIDE the drawer, from
behind it (z below the drawer). Only reachable ≥981px (drawer is desktop-only),
width clamped so it never overflows a narrow desktop. */
.nav-mm-fly {
position: fixed; top: 0; bottom: 0; left: min(420px, 100%); z-index: 200;
width: min(380px, calc(100vw - 460px));
/* near-opaque + light blur: animating a heavy backdrop-blur panel stutters the
slide-in, so keep the glass cheap here. */
background: rgba(12, 9, 7, 0.96);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
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;
padding: 96px 30px 32px; overflow-y: auto;
display: flex; flex-direction: column;
opacity: 0; transform: translateX(-14px); pointer-events: none;
transition: opacity .28s ease, transform .42s cubic-bezier(.22,1,.36,1);
}
.nav-mm-fly.open { opacity: 1; transform: none; pointer-events: auto; }
.nav-mm-fly .nav-mm-back { display: none; }
.nav-mm-fly .nav-mm-title { font-size: 26px; }
/* previews pushed to the very bottom of the flyout, under a "Doporučení" label */
.nav-mm-recs { margin-top: auto; padding-top: 24px; }
.nav-mm-recs-lbl { display: block; font: 500 11px/1 var(--mono); letter-spacing: .16em;
text-transform: uppercase; color: var(--text-mute); padding-bottom: 14px; }
/* ── Header search overlay ─────────────────────────────────────────────── */
.nav-search-overlay {
position: fixed; inset: 0; z-index: 210;
background: rgba(0,0,0,0.72);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
opacity: 0; pointer-events: none;
transition: opacity 320ms ease;
display: flex; justify-content: center;
padding: clamp(70px, 12vh, 140px) var(--gutter) 40px;
overflow-y: auto;
}
.nav-search-overlay.open { opacity: 1; pointer-events: auto; }
.nav-search-panel {
width: min(720px, 100%);
align-self: flex-start;
background: rgba(18, 14, 10, 0.92);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--r-lg);
box-shadow: 0 40px 90px rgba(0,0,0,0.5);
overflow: hidden;
transform: translateY(-14px); opacity: 0;
transition: transform 380ms cubic-bezier(.22,1,.36,1), opacity 380ms ease;
}
.nav-search-overlay.open .nav-search-panel { transform: translateY(0); opacity: 1; }
.ns-bar {
display: flex; align-items: center; gap: 14px;
padding: 18px 20px;
border-bottom: 1px solid rgba(255,255,255,0.09);
}
.ns-ico { width: 22px; height: 22px; color: rgba(255,255,255,0.55); flex: 0 0 auto; }
.ns-input {
flex: 1 1 auto; min-width: 0;
background: none; border: 0; outline: none;
color: var(--text);
font-family: var(--serif); font-weight: 300;
font-size: clamp(20px, 3vw, 28px);
letter-spacing: -0.01em;
}
.ns-input::placeholder { color: rgba(255,255,255,0.34); }
.ns-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ns-close {
flex: 0 0 auto; width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: none; border: 0; cursor: pointer;
color: rgba(255,255,255,0.6); border-radius: 999px;
transition: color 200ms ease, background 200ms ease;
}
.ns-close:hover { color: #fff; background: rgba(255,255,255,0.08); }
.ns-close svg { width: 18px; height: 18px; }
.ns-results { max-height: min(60vh, 560px); overflow-y: auto; padding: 8px 10px 14px; }
.ns-hint, .ns-empty {
padding: 34px 16px; text-align: center;
color: rgba(255,255,255,0.45);
font-size: 14px;
}
.ns-empty { color: rgba(255,255,255,0.6); }
.ns-group { padding: 8px 0; }
.ns-group + .ns-group { border-top: 1px solid rgba(255,255,255,0.06); }
.ns-group-label {
font-family: var(--mono);
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--brand);
padding: 8px 12px 6px;
}
.ns-row {
display: flex; align-items: center; gap: 14px;
padding: 9px 12px; border-radius: var(--r-md);
text-decoration: none; color: var(--text);
transition: background 180ms ease;
}
.ns-row:hover { background: rgba(255,255,255,0.06); }
.ns-row-thumb {
flex: 0 0 auto; width: 52px; height: 52px;
border-radius: var(--r-sm); overflow: hidden;
background: rgba(255,255,255,0.06);
display: flex; align-items: center; justify-content: center;
}
.ns-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ns-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ns-row-title {
font-size: 15px; line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ns-row-sub {
font-size: 12px; color: rgba(255,255,255,0.5);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ns-row-arr { flex: 0 0 auto; color: rgba(255,255,255,0.3); transition: transform 200ms ease, color 200ms ease; }
.ns-row-arr svg { width: 18px; height: 18px; }
.ns-row:hover .ns-row-arr { color: rgba(255,255,255,0.7); transform: translateX(3px); }
.nav-menu-head {
padding: 28px 32px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--line);
}
.nav-menu-head h3 { font-family: var(--serif); font-size: 28px; font-weight: 300; color: var(--text); }
.nav-menu-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
.nav-menu-close svg { width: 20px; height: 20px; stroke: var(--text); stroke-width: 1.2; fill: none; }
.nav-menu-scroll { flex: 1; overflow-y: auto; padding: 12px 32px 32px; }
/* links stacked vertically as an editorial list, drawer-style */
.nav-menu-panel .nav-links {
display: flex; flex-direction: column; gap: 0; align-items: stretch;
}
.nav-menu-panel .nav-links a {
display: block; padding: 6px 0;
font-family: var(--serif); font-size: 20px; font-weight: 300;
letter-spacing: 0.01em; text-transform: none;
color: rgba(245,238,224,0.86) !important; text-shadow: none !important;
}
.nav-menu-panel .nav-links a:hover { color: #fff !important; }
.nav-menu-panel .nav-links a.active { color: #fff !important; }
/* Drawer menu tiers (2026-07-07): "Najít studio" at top → Produkty group → primary
product links (M) → % Výprodej (L, brand red) → O nás / Výroba (s, secondary).
No per-item hairlines; items sit tight within a group, groups separated by gaps. */
.nav-mm-studio {
display: block; padding: 2px 0 0;
font-family: var(--serif); font-weight: 300; font-size: 32px; letter-spacing: 0.01em;
color: var(--brand) !important; text-shadow: none !important; transition: opacity .2s ease;
}
.nav-mm-studio:hover { opacity: .82; }
/* group gaps: Produkty→primary is the .nav-mm-prod margin; the tiers below add their own */
.nav-menu-panel .nav-links a.nav-link-sale {
font-size: 27px; color: #fff !important; margin-top: 26px;
}
.nav-menu-panel .nav-links a.nav-link-sale:hover { color: #fff !important; opacity: .82; }
.nav-menu-panel .nav-links a.nav-link-sale + .nav-link-sub { margin-top: 26px; }
.nav-menu-panel .nav-links a.nav-link-sub {
font-size: 15px; color: rgba(245,238,224,0.55) !important;
}
.nav-menu-panel .nav-links a.nav-link-sub:hover { color: #fff !important; }
.brand-mark {
font-family: var(--serif);
font-size: 24px; font-weight: 400;
letter-spacing: 0.04em;
display: flex; align-items: center; gap: 6px;
text-transform: uppercase;
justify-self: center;
}
.nav-actions { justify-self: end; }
.brand-logo { height: 30px; width: auto; display: block; color: inherit; }
.brand-mark .est { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: var(--text-mute); margin-left: 10px; padding-left: 10px; border-left: 1px solid currentColor; opacity: 0.7; }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-mute);
transition: color 240ms ease;
position: relative;
padding: 8px 0;
}
.nav-links a:hover, .nav-links a.active { color: currentColor; }
/* brand-red underline that grows from the left on hover; the active link keeps
it filled — one animated rule for both states */
.nav-links a::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: var(--brand);
transform: scaleX(0); transform-origin: left center;
transition: transform 340ms cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-actions { display: flex; gap: 4px; align-items: center; }
/* i18n language switcher — compact globe trigger + dark-glass popover */
.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); }
/* Blur-up (JS-driven, enhanceCardImages): the full card photo fades + sharpens in over a
tiny blurred preview of itself, so a lazy fetch never shows the flat dark placeholder.
The transient blur is one-shot on load (not a constant filter) — cheap. Keeps the hover
transform in the transition list so scale-on-hover still animates. */
.prod-thumb > img.blurup, .pin-card-thumb > img.blurup {
opacity: 0; filter: blur(12px);
transition: opacity 550ms ease, filter 650ms ease, transform 1200ms cubic-bezier(.22,1,.36,1);
}
.prod-thumb > img.blurup.blurup-in, .pin-card-thumb > img.blurup.blurup-in { opacity: 1; filter: blur(0); }
.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; }
@media (max-width: 768px) {
.atelier .stack > .reveal:not(.cities) { text-align: center; }
.atelier .stack > .reveal:not(.cities) h2 { max-width: none; }
.atelier .stack > .reveal:not(.cities) p { max-width: none !important; margin-left: auto; margin-right: auto; }
.atelier .stack > .reveal:not(.cities) > div { justify-content: center; }
}
.atelier .cities {
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; }
}
/* Košík + checkout na bielom podklade (2026-07-14) — položky aj Souhrn sú
biele karty ako .appliance-card na /spotrebice. Lokálne premapovanie
tokenov pokryje všetky inline var(--text-*) / var(--line) v markupe. */
.cart-table, .summary {
--text: var(--text-paper);
--text-mute: var(--text-mute-paper);
--text-dim: #8c7f6a;
--line: var(--line-paper);
--line-strong: #b9ac93;
--bg-elev-1: #ffffff;
background: var(--bg-panel); /* rovnaká off-white ako .catalog-paper na /spotrebice */
color: var(--text-paper);
border: 1px solid var(--line-paper);
border-radius: var(--r-lg);
}
.cart-table { padding: 6px 36px; align-self: start; }
.cart-table .cart-row:last-child { border-bottom: 0; }
@media (max-width: 640px) { .cart-table { padding: 4px 20px; } }
.summary {
padding: 40px;
position: sticky; top: calc(var(--nav-h) + 24px);
align-self: start;
}
.summary h3 { font-family: var(--serif); font-size: 28px; font-weight: 300; margin-bottom: 28px; }
.summary .row { display: flex; justify-content: space-between; padding: 12px 0; font-size: 14px; }
.summary .row.total { padding-top: 20px; margin-top: 8px; border-top: 1px solid var(--line); }
.summary .row.total .sum { font-family: var(--serif); font-size: 32px; font-weight: 300; }
.summary .btn { width: 100%; justify-content: center; margin-top: 24px; }
/* sekundárne CTA (Rezervovat schůzku): výplň hoveru musí byť krémová, nie
currentColor — ten sa na hoveri mení na --bg a tlačidlo "sčernie" bez textu */
.summary .btn:not(.solid) { margin-top: 10px; }
.summary .btn:not(.solid)::before { background: var(--text-paper); }
.summary .btn:not(.solid):hover { color: var(--bg-paper); }
/* dark-glass solid by na bielej karte splýval — plný ink + krémový text,
rovnaký pattern ako .appl-shop-sheet .btn.solid (hover ostáva brand red) */
.summary .btn.solid {
background: var(--text-paper);
color: var(--bg-paper);
border-color: var(--text-paper);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* ── Checkout / forms ───────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.field input, .field textarea, .field select {
background: transparent;
border: none;
border-bottom: 1px solid var(--line-strong);
padding: 14px 0;
color: var(--text); font-size: 15px; font-family: var(--serif);
transition: border-color 240ms ease;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--brand); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }
/* Site-grade custom select — replaces the ugly native