/* ============================================================
   Simi — main stylesheet
   Mobile-first. Base = mobile (no media query). Desktop = @media (min-width:769px).
   Full-screen sections use 100lvh (never svh/dvh/vh). BEM naming.
   ⚠ Colors / type sizes below marked PLACEHOLDER are to be replaced with exact
     Figma values (task: read tokens from node 4-251 / 4-486). Do not ship placeholders.
   ============================================================ */

/* ------------------------------------------------------------
   @font-face — self-hosted (no Google connection; GDPR-friendly)
   ------------------------------------------------------------ */
/* DM Sans — variable, body */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url('../fonts/dmsans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url('../fonts/dmsans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'DM Sans';
	font-style: italic;
	font-weight: 100 1000;
	font-display: swap;
	src: url('../fonts/dmsans-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'DM Sans';
	font-style: italic;
	font-weight: 100 1000;
	font-display: swap;
	src: url('../fonts/dmsans-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* TAN AEGEAN — display / headings */
@font-face {
	font-family: 'TAN AEGEAN';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/tan-aegean.woff2') format('woff2');
}

/* ------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------ */
:root {
	/* Layout — desktop content is 1380 inside 1440 → 30px gutter (Figma).
	   Mobile gutter 15px (client-stated; verify against mobile frame). */
	--gutter: 16px;            /* mobile base (Figma: 358 in 390) */
	--gutter-desktop: 30px;    /* Figma HOMEPAGE_Desktop (1380 in 1440) */
	--container-max: 1440px;   /* Figma frame width */
	--detail-max: 1684px;      /* detail/shop lock on ultrawide: 1624 content + 2×30 gutter (Figma 1920 frame 29:1032 → content 1624, margins 148) */
	--header-h: 70px;          /* Figma header-OPEN (padding 15 + row 40 + 15) */
	--hero-bottom: 50px;       /* 1-sekcia bottom block (850-760-40) */
	/* Shared column x: header name AND open-menu links align to this. % for responsiveness
	   (Figma: name/links at x293 of 1440 ≈ 20.35%). */
	--col-x: 20.35%;

	/* Motion */
	--ease-out-quart: cubic-bezier(.165, .84, .44, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);

	/* Typography */
	--font-body: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	--font-display: 'TAN AEGEAN', Georgia, 'Times New Roman', serif;
	--tracking: -0.03em;       /* recurs across the design (−0.48/16, −0.72/24, −2.94/98) */

	/* Colors (Figma variables) */
	--color-canvas: #FFFFFF;   /* CANVAS — page background / white */
	--color-black: #131114;    /* BLACK — primary text */
	--color-red: #E6240E;      /* RED — accent (hero H1, links) */
	--color-offlight: #F3F2F0; /* OFF-LIGHT — light section fill */
	--color-white: #FFFFFF;    /* text on media */

	/* Semantic aliases */
	--color-bg: var(--color-canvas);
	--color-text: var(--color-black);
	--color-accent: var(--color-red);
}

/* ------------------------------------------------------------
   Reset (minimal — theme owns its typography)
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }   /* global anchor offset: #anchors never land under the fixed header */
body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500; /* DM Sans Medium is the design default */
	color: var(--color-text);
	background: var(--color-bg);
	letter-spacing: var(--tracking);
	font-variation-settings: 'opsz' 14; /* design uses opsz 14 */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.3;
}

/* ------------------------------------------------------------
   Type scale (desktop, from Figma). letter-spacing = --tracking (-0.03em).
     display / hero H1 : TAN AEGEAN 98px  / lh 1.35 / uppercase / --color-red
     header name       : DM Sans 500 24px / lh 1.3
     nav / cart / label: DM Sans 500 16px / lh 1.3 / uppercase
     body-sm           : DM Sans 500 16px / lh 1.25
     button underline  : DM Sans 700 18px / lh 1.3 / uppercase
   Section-specific sizes are read per node when each section is built.
   ------------------------------------------------------------ */
h1, h2, h3, h4, figure, p { margin: 0; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------ */
.container {
	width: 100%;
	max-width: var(--detail-max);   /* site content locks at 1624 (Figma responsive tab 29:71); fluid below ~1684 */
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.u-display { font-family: var(--font-display); }
.visually-hidden {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Reveal-on-scroll: apply ONLY to <img>, never to <video> (house rule) */
.js-reveal-bottom { opacity: 0; transform: translateY(24px); }

/* Fade-up-on-enter — hidden until the element scrolls into view, then fades up once
   (JS adds .is-in via IntersectionObserver). Used for the výstavy headline. */
.js-fade-in { opacity: 0; transform: translateY(14px); }
.js-fade-in.is-in { animation: simi-fade-up .9s cubic-bezier(.165, .84, .44, 1) both; }
@keyframes simi-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Utility — underline text button/link (Figma "Line 95" pattern)
   ============================================================ */
.link-underline {
	display: inline-block;
	position: relative;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
	padding-bottom: 3px;
}
.link-underline::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: currentColor;
	transform-origin: 0 50%;
}
/* Hover: the underline redraws — shrinks away to the right, then grows back from the
   left (ÉCLAIR "here-away" redraw, 0.75s). Pointer-only so touch devices skip it. */
@media (hover: hover) {
	.link-underline:hover::after,
	.link-underline:focus-visible::after {
		animation: underline-redraw 0.75s ease forwards;
	}
}
@keyframes underline-redraw {
	0%    { transform-origin: 100% 50%; transform: scaleX(1); }
	49.9% { transform-origin: 100% 50%; transform: scaleX(0); }
	50%   { transform-origin: 0    50%; transform: scaleX(0); }
	100%  { transform-origin: 0    50%; transform: scaleX(1); }
}

/* ============================================================
   Site header — header-OPEN: FIXED, always visible, NO hide-on-scroll
   Mobile (base): [name] ......... [KOŠÍK] [☰]   (Figma 4:849, h65, pad 16/16/6)
   Desktop:       [MENU ☰]  [name] ......... [KOŠÍK]  (Figma 4:566, h70, pad 15/30)
   ============================================================ */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 1000;
	color: var(--color-black);
}
.site-header__bar {
	position: relative;
	z-index: 2;                 /* above the menu overlay so ✕/name/cart stay visible */
	display: flex;
	align-items: center;
	padding: 16px var(--gutter) 6px;
	min-height: 65px;           /* Figma mobile header-open = 65px (desktop resets to --header-h) */
	background: var(--color-canvas);
	transition: background-color .4s ease;   /* recolour white↔off-light as a FADE (menu open/close, Jan) */
}
/* Vertical guide showing where the name column sits (also reused by the menu). */
.site-header__left { display: contents; } /* let children reorder freely */

.site-header__name {
	order: 1;
	margin-right: auto;
	font-weight: 600;         /* SemiBold */
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: var(--tracking);
	text-transform: uppercase;
	color: var(--color-black);
}
.site-header__cart {
	order: 2;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: var(--tracking);
	text-transform: uppercase;
	white-space: nowrap;
}
.site-header__menu-btn {
	order: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;               /* kill UA button padding so MENU aligns to the content edge */
	margin-left: 20px;        /* gap cart → menu (Figma) */
}
.site-header__menu-label { display: none; } /* mobile: icon only */
.site-header__menu-icon {
	position: relative;
	display: block;
	width: 18px;
	height: 12px;
}
/* duo-line icon (OPEN); collapses to ✕ when menu open */
.site-header__menu-icon-open,
.site-header__menu-icon-close {
	position: absolute;
	left: 0;
	height: 1.5px;
	background: currentColor;
	transition: transform .3s var(--ease-out-quart), opacity .2s;
}
.site-header__menu-icon-open { top: 3px; width: 18px; }
.site-header__menu-icon-open::after {
	content: "";
	position: absolute;
	left: 0; top: 6px;
	width: 18px; height: 1.5px;   /* both burger lines equal width (Figma 4:571) */
	background: currentColor;
}
.site-header__menu-icon-close { top: 6px; width: 18px; opacity: 0; transform: rotate(45deg); }
.site-header__menu-icon-close::after {
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: 18px; height: 1.5px;
	background: currentColor;
	transform: rotate(90deg);
}
body.menu-open .site-header__menu-icon-open { opacity: 0; }
body.menu-open .site-header__menu-icon-close { opacity: 1; }

/* ============================================================
   Menu overlay (OFF-LIGHT). First-pass sizes — confirm vs open-menu Figma node.
   ============================================================ */
.site-menu {
	position: fixed;
	inset: 0;
	z-index: 1;                 /* below the header bar (z2), above hero — slides out from under it */
	background: var(--color-offlight);
	color: var(--color-black);
	font-weight: 500;           /* DM Sans Medium */
	display: flex;
	flex-direction: column;
	opacity: 1;
	visibility: hidden;
	transform: translateY(-100%);   /* parked above the fold, behind the header */
	will-change: transform;
	transition: transform .5s var(--ease-in-out), visibility 0s .5s;
}
body.menu-open .site-menu { transform: translateY(0); visibility: visible; transition: transform .5s var(--ease-in-out), visibility 0s 0s; }
/* Empty-area / link close: fade out in place instead of sliding back up (the slide is only for the
   MENU button). Holds the panel at translateY(0) and only animates opacity. */
body.menu-fading .site-menu { transition: opacity .3s var(--ease-out-quart) !important; transform: translateY(0) !important; }
/* while the menu is open (and while it's still closing) the top bar matches the menu background
   (OFF-LIGHT). menu-closing holds the grey through the slide-up so the header only fades back to
   white AFTER the menu is fully gone (Jan) — not mid-close. */
body.menu-open .site-header__bar,
body.menu-closing .site-header__bar { background: var(--color-offlight); }

/* ---- HP intro loader (front page, first paint) ----
   The hero video + its white texts show first; then the header BAR slides down from the top
   over the video (its "Simi Čekovská" name is static — just rides in with the bar), while the
   HERO H1 (.hero__title) fades in word-by-word ("Simi" → micro-delay → "Čekovská").
   Initial state is gated on html.has-intro (set inline in <head>); main.js adds .intro-run
   after a short beat to play it. Header stays fixed/sticky throughout. */
.hero__title-word { display: inline-block; }
html.has-intro .site-header__bar { transform: translateY(-100%); }
html.has-intro .hero__title-word { opacity: 0; transform: translateY(12px); }
html.has-intro.intro-run .site-header__bar { transform: translateY(0); transition: transform .7s var(--ease-out-quart), background-color .4s ease; }   /* keep the bg fade alongside the intro slide */
html.has-intro.intro-run .hero__title-word { animation: simi-fade-up .8s cubic-bezier(.165, .84, .44, 1) both; }
html.has-intro.intro-run .hero__title-word--2 { animation-delay: .25s; }
@media (prefers-reduced-motion: reduce) {
	html.has-intro .site-header__bar { transform: none; }
	html.has-intro .hero__title-word { opacity: 1; transform: none; animation: none; }
}

.site-menu__body {
	display: flex;
	flex-direction: column;
	gap: 30px;
	align-items: flex-start;
	padding: calc(var(--header-h) + 60px) 16px 0; /* mobile: below header + pl16 */
}
.site-menu__nav { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.site-menu__list { display: flex; flex-direction: column; gap: 6px; }
.site-menu__item { display: flex; align-items: center; }   /* keeps the pre-sale pill optically centred with the big link text */
.site-menu__link {
	font-size: 36px;            /* mobile (desktop 42) */
	line-height: 1.2;
	letter-spacing: var(--tracking);
	color: var(--color-black);
}
.site-menu__item.is-active .site-menu__link { color: var(--color-red); }
.site-menu__lang { font-size: 36px; line-height: 1.2; letter-spacing: var(--tracking); }
.site-menu__lang-link { color: var(--color-black); }
.site-menu__lang-link:not(.is-active) { color: rgba(19, 17, 20, 0.3); } /* inactive lang 30% */
.site-menu__lang-link:not(.is-active):hover { color: var(--color-black); } /* full opacity on hover */
.site-menu__presale {
	font-size: 16px;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
	color: var(--color-black);
}

/* Menu mini-footer (pinned bottom). Mobile: pinterest + instagram only. */
.site-menu__footer {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	font-size: 16px;            /* match footer mini bottom row (Figma) */
	line-height: 1.3;
	letter-spacing: var(--tracking);
	text-transform: uppercase;
	padding: 0 16px 28px;       /* mobile gutter + bottom */
}
.site-menu__footer-l { flex: 1; display: flex; justify-content: space-between; gap: 24px; }
.site-menu__footer-r { display: none; } /* legal links: desktop only in menu */
.site-menu__copy { display: none; }     /* 2026© : desktop only in menu */
.site-menu__footer a:hover { color: var(--color-red); }

/* ============================================================
   Site footer (skeleton — real footer behaviour TBD from client)
   ============================================================ */
.site-footer {
	position: relative;
}

/* ============================================================
   Full-screen section base
   ============================================================ */
.section--full {
	min-height: 100lvh;
	position: relative;
}

/* ============================================================
   1. Sekcia — HERO  (mobile base: 4:630 390×844)
   ============================================================ */
.hero {
	position: relative;
	min-height: 100lvh;
	overflow: hidden;
	color: var(--color-white);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.hero__video--desktop { display: none; }
.hero__video--mobile { display: block; }
.hero__gradient {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 340px; /* 4:632: top 504 → 844 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 21.95%, rgba(0,0,0,0.5) 100%);
	pointer-events: none;
}
.hero__title {
	position: absolute;
	left: var(--gutter);
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	margin: 0;
	max-width: 358px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 46px;
	line-height: 1.35;
	letter-spacing: var(--tracking);
	text-transform: uppercase;
	color: var(--color-red);
}
.hero__foot {
	position: absolute;
	left: var(--gutter);
	right: var(--gutter);
	bottom: 102px; /* 4:633: top 659 + h83 = 742 → 844 */
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}
.hero__lead {
	max-width: 151px;   /* "Museum-Inspired. / Modern-Minded." 2 lines (Figma 4:634) */
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	color: var(--color-white);
}
.hero__link {
	font-size: 16px;
	color: var(--color-white);
}

/* utility */
.u-red { color: var(--color-red); }

/* ============================================================
   2. Sekcia — Subheadline (mobile 4:646: pad 50/16, Bold 16px, max 327)
   ============================================================ */
.s-sub { padding: 50px var(--gutter); }
.s-sub__text {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
	max-width: 320px;   /* mobile (Jan; Figma 4:647 = 327) */
	color: var(--color-black);
}

/* ============================================================
   4. Sekcia — na produkty (mobile 4:648: pad 128/16, gap 40, SemiBold 36px lh1.1, max 350)
   Hover CTA → text + button fade to RED (Figma annotation).
   ============================================================ */
/* 3. Sekcia — CTA Private-sale / EARLY ACCESS (Figma 4:468): OFF-LIGHT box, content
   bottom-aligned; "vstúpiť" opens the footer form. */
.s-private { padding: 60px var(--gutter); }
.s-private__box { background: var(--color-offlight); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 60px var(--gutter) 50px; min-height: 740px; }   /* mobile box = Figma 4:860 (740 tall, content bottom, 50 pad-b) */
.s-private__inner { display: flex; flex-direction: column; align-items: center; gap: 180px; width: 100%; }   /* mobile: 180 gap button→EARLY ACCESS (Figma 4:860) */
.s-private__cta { display: flex; flex-direction: column; align-items: center; gap: 40px; max-width: 462px; }
.s-private__text { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.3; text-transform: uppercase; letter-spacing: var(--tracking); text-align: center; color: var(--color-red); }
.s-private__btn { color: var(--color-red); font-size: 16px; }   /* mobile = Figma 4:659 (desktop → 18px) */
.s-private__big { margin: 0; font-weight: 600; font-size: 46px; line-height: 1.2; text-transform: uppercase; letter-spacing: var(--tracking); text-align: center; color: var(--color-red); cursor: pointer; }   /* clickable → opens big footer; hover = cursor only (Jan) */

.s-produkty { padding: 128px var(--gutter); }
.s-produkty__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	max-width: 350px;
}
.s-produkty__text {
	display: block;     /* it's now an <a> to /produkty/ — keep block wrapping */
	max-width: 345px;   /* mobile (Jan; Figma 4:649 = 350); reset on desktop */
	font-weight: 600;
	font-size: 36px;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
	color: var(--color-black);
	transition: color .4s var(--ease-out-quart);
}
.s-produkty__btn { color: var(--color-black); font-size: 18px; transition: color .4s var(--ease-out-quart); }   /* 18px both viewports (Figma 4:652 mobile = 18, unlike the 16px CTA buttons) */
/* Both the big text and the button link to /produkty/; hovering EITHER turns both red. */
.s-produkty__inner:has(.s-produkty__btn:hover) .s-produkty__text,
.s-produkty__inner:has(.s-produkty__text:hover) .s-produkty__btn,
.s-produkty__text:hover,
.s-produkty__btn:hover { color: var(--color-red); }

/* ============================================================
   5. Sekcia — edícia „How Old Are You?" (mobile 4:661: pad 30/16/80, gap 40, img 358×600, text gap30)
   ============================================================ */
.s-edicia { padding: 30px var(--gutter) 80px; }
.s-edicia__inner { display: flex; flex-direction: column; gap: 40px; }
.s-edicia__media { position: relative; margin: 0; width: 100%; overflow: hidden; }
.s-edicia__media-link { position: absolute; inset: 0; z-index: 2; }   /* whole image → /o-mne/#predstavenie-kolekcie (both viewports) */
.s-edicia__img { width: 100%; display: block; object-fit: cover; }
.s-edicia__img--desktop { display: none; }
.s-edicia__img--mobile { display: block; aspect-ratio: 358 / 600; }
.s-edicia__textbox { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.s-edicia__text {
	max-width: 340px;   /* mobile only (desktop sets 660 below) */
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
	color: var(--color-black);
}
.s-edicia__btn { color: var(--color-black); font-size: 16px; }   /* mobile = underline-link 16px; desktop → 18px */
/* "How Old Are You?" links to the section target; hover = cursor only, no underline (Jan). */
.s-edicia__edition { cursor: pointer; text-decoration: none; }
.s-edicia__edition:hover { text-decoration: none; }

/* ============================================================
   6. Sekcia — výstavy (mobile 4:1016/4:1021; desktop 4:499)
   ============================================================ */
.s-vystavy { background: var(--color-canvas); padding: 40px var(--gutter) 150px; }   /* mobile pad-bottom 150 so the footer doesn't reveal too soon (Jan); desktop 170 below */
.s-vystavy__inner { display: flex; flex-direction: column; }
.s-vystavy__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 46px;
	line-height: 1.35;
	letter-spacing: var(--tracking);
	text-transform: uppercase;
	color: var(--color-red);
	margin: 0 0 100px;
}
.s-vystavy__list { display: flex; flex-direction: column; }

.vystava {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 22px 16px;
	color: var(--color-black);
	line-height: 1.3;
}
.vystava:nth-child(odd)  { background: var(--color-offlight); }
.vystava:nth-child(even) { background: var(--color-canvas); }

.vystava__meta {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 20px;
	text-transform: uppercase;
}
.vystava__rok   { font-weight: 700; font-size: 16px; }   /* mobile 16px (Jan); desktop 18px below */
.vystava__typ   { font-weight: 400; font-size: 16px; justify-self: end; text-align: right; }
.vystava__nazov { font-weight: 700; font-size: 16px; grid-column: 1 / -1; }   /* mobile 16px (Jan); desktop 18px below */

.vystava__place { display: flex; flex-direction: column; gap: 8px; font-weight: 500; font-size: 16px; }
.vystava__mesto { align-self: flex-end; }

/* Mobile collapse: hidden rows until expanded */
.vystava.is-collapsed { display: none; }
.s-vystavy.is-expanded .vystava.is-collapsed { display: flex; }
.s-vystavy__more { align-self: center; margin-top: 30px; font-size: 16px; color: var(--color-black); }   /* mobile: centered (Jan); hidden on desktop */
.s-vystavy.is-expanded .s-vystavy__more { display: none; }

/* ============================================================
   Footer — big "Footer-long" (mobile 4:669 / desktop 4:425). OFF-LIGHT, red text.
   ============================================================ */
.site-footer { background: var(--color-offlight); color: var(--color-red); position: relative; z-index: 10; }
.site-footer__inner { display: flex; flex-direction: column; padding-block: 30px; }

/* Top: instagram / newsletter headline / pinterest */
.site-footer__top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: 100px;
	align-items: start;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: var(--tracking);
	text-transform: uppercase;
}
.site-footer__social { grid-row: 1; grid-column: 1; }
.site-footer__social--right { grid-row: 1; grid-column: 2; text-align: right; }
.site-footer__nwl-head { grid-row: 2; grid-column: 1 / -1; justify-self: center; max-width: 188px; margin: 0; text-align: center; font-weight: 700; }   /* mobile box = Figma 4:670 (16px inherited) */
/* Claims replaced 2026-09-14/15 (both languages long now) — wider Figma boxes: mobile 252, desktop SK 292 / EN 333. */
.site-footer__nwl-head { max-width: 252px; }

/* Big brand */
.site-footer__brand {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 100px;
	font-weight: 600;
	font-size: 46px;
	line-height: 1.2;
	letter-spacing: var(--tracking);
	text-transform: uppercase;
}
.site-footer__tagline {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 35px 0 0;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: var(--tracking);
	text-transform: uppercase;
}
.site-footer__tagline span { max-width: 160px; }   /* mobile: both spans 160 (desktop sets first to 145) */
.site-footer__tagline span:last-child { text-align: right; }

/* Newsletter form (jz-leads) */
.nwl { display: flex; flex-direction: column; gap: 20px; margin-top: 130px; }   /* mobile (Jan): 130 top, 20 gap between fields/checkbox (desktop grid overrides below) */
.nwl__name input, .nwl__email input {
	width: 100%;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--color-red);
	color: var(--color-red);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: var(--tracking);
	padding: 0 0 10px;
}
.nwl__name input::placeholder, .nwl__email input::placeholder { color: var(--color-red); opacity: 1; }
.nwl__name input:focus, .nwl__email input:focus { outline: none; }
/* Submit looks inactive (RED @ 50%, Figma 9:678) until the form is valid, then full opacity. */
.nwl__submit { align-self: flex-end; color: var(--color-red); font-size: 16px; opacity: 1; transition: opacity .3s var(--ease-out-quart); }   /* mobile 16px (Jan); desktop 18px below */
.nwl.is-awaiting .nwl__submit { opacity: .5; }   /* dim ONLY after the user focuses the fields and leaves them invalid (Jan/grafička) */
.nwl__error { margin: 0; color: var(--color-red); font-weight: 400; font-size: 14px; line-height: 1.3; letter-spacing: var(--tracking); }
.nwl__error[hidden] { display: none; }
/* Mobile column order: name, email, checkbox, THEN button (Figma 4:1096). Desktop uses
   grid-template-areas which ignore `order`, so this is mobile-only. */
.nwl__consent { order: 1; }
.nwl__submit { order: 2; }
.nwl__error { order: 3; }
.nwl__consent { display: flex; gap: 14px; align-items: flex-start; position: relative; font-weight: 400; font-size: 14px; line-height: 1.3; cursor: pointer; }
.nwl__consent input { position: absolute; top: 0; left: 0; width: 15px; height: 15px; margin: 0; opacity: 0; cursor: pointer; }
.nwl__consent-box { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; display: flex; align-items: center; justify-content: center; background: var(--color-offlight); border: 1px solid var(--color-red); }
/* Checked = small 7×7 red square centred in the box (Figma 4:610), NOT a fully-filled square. */
.nwl__consent input:checked ~ .nwl__consent-box::after { content: ""; width: 7px; height: 7px; background: var(--color-red); }
.nwl__consent-text b { font-weight: 700; }
.nwl__consent-link { color: inherit; text-decoration: none; cursor: pointer; }   /* hover: cursor only, no underline (Jan) */
.nwl__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nwl__status { order: 4; margin: 0; font-size: 14px; min-height: 1.2em; }   /* to the END — was sitting (empty) between email and checkbox, breaking that gap */

/* Footer video block */
.site-footer__video { display: flex; flex-direction: column; align-items: center; gap: 40px; margin-top: 80px; text-align: center; }
.site-footer__video-text { margin: 0 auto; max-width: 285px; font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: var(--tracking); text-transform: uppercase; }   /* mobile (Jan; Figma box 4:671 = 300) */
.site-footer__video-media { width: 100px; height: 143px; object-fit: cover; }   /* 100px wide, proportional (Jan; Figma mobile 4:1097 ≈ 100×142) */

/* Mini footer */
.site-footer__mini { display: flex; flex-direction: column; gap: 12px; margin-top: 80px; font-size: 16px; line-height: 1.3; letter-spacing: var(--tracking); text-transform: uppercase; }   /* 16px both viewports (Figma 4:580/4:584); mini-l uppercase, mini-r natural (below) */
.site-footer__mini-l, .site-footer__mini-r { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-footer__mini a:hover { opacity: .65; }
/* Mobile mini-footer (Figma 4:1101 / 5:346), for BOTH the big-footer mini and the standalone
   .site-footer-mini (shared classes): row1 = copyright | Instagram; then legal links in rows
   of 3 then 2 (reordered to Figma reading order); "created by boomex" alone, right-aligned. */
.site-footer__mini-l { justify-content: space-between; }
.site-footer__mini-r { gap: 6px 20px; justify-content: space-between; text-transform: none; }   /* mobile: mini-l stays uppercase, mini-r natural case (Figma 4:694); 6px row-gap → phantom break sums to ~12 between the 3- and 2-item rows */
.site-footer__credit-link { font-weight: 600; }   /* "boomex" SemiBold (Figma 4:589) */
/* mobile order → Figma 4:694: [Reklamácie·FAQ·Nastavenia] / [GDPR·VOP] / [credit] */
.site-footer__mini-r > :nth-child(1) { order: 50; }   /* VOP → row 2, after GDPR (DOM has it first) */
.site-footer__mini-r > :nth-child(2) { order: 10; }   /* Reklamácie */
.site-footer__mini-r > :nth-child(3) { order: 20; }   /* FAQ */
.site-footer__mini-r > :nth-child(4) { order: 30; }   /* Nastavenia cookies */
.site-footer__mini-r > :nth-child(5) { order: 40; }   /* GDPR */
.site-footer__credit { order: 60; width: 100%; margin-top: 19px; text-align: right; }   /* ~25px below the 2-item row (Figma 4:694: 6 row-gap + 19) */
.site-footer__mini-brk { order: 35; flex-basis: 100%; height: 0; margin: 0; }   /* forces wrap after Nastavenia → GDPR joins VOP */

/* Big footer — two behaviours (no-JS = normal flow, base rule above).
   • REVEAL (`.footer-reveal-armed`, added by JS on HP / O-mne / single product) — the
     footer is overlapped onto the last section (JS sets margin-top:-(section height)) and
     GSAP pins that section on reach-bottom; the pin's own one-viewport of scroll walks the
     footer up over the held section, 1:1 and reversible. It stays a normal-flow element, so
     a footer taller than the viewport keeps scrolling naturally once revealed.
   • CTA scroll-panel (`.has-footer-cta` + `.footer-open`) — a fixed overlay that rises on the
     newsletter CTA click and is DISMISSED BY SCROLL (Jan's spec): it covers the viewport from
     the top (form first) and, being taller than the fold, scrolls internally (JS drives
     scrollTop) to show its full height; scrolling UP past its top slides it back down and then
     hands the scroll to the page. `.footer-scrubbing` disables the glide while JS drives it. */
body.footer-reveal-armed .site-footer {
	position: relative;
	z-index: 60;                   /* over page content; the fixed header (z 1000) stays above */
	will-change: transform;        /* margin-top (the overlap) is set per-page by main.js */
	/* The reveal overlaps + pins by exactly ONE viewport (clientHeight). If the footer's own
	   content is SHORTER than the viewport (tall monitors: content ≈1218 < viewport), a fully
	   revealed footer can't reach the fold → a WHITE strip of (viewport − footerHeight) shows
	   below it (body is white, footer off-light). Guaranteeing the footer is ≥ one viewport tall
	   makes it always cover to the bottom, at any window height. (Rule #3: 100lvh, never vh.) */
	min-height: 100lvh;
}

/* The panel resting/hidden state. On CTA pages it applies from the START (has-footer-cta is a PHP
   body class) so the footer is already parked BELOW the fold on the very first paint — no 0→100%
   slide-down flash on load ("na chvíľu vidno large footer a potom scrollne dole"). On reveal pages
   it applies only while the CTA panel is engaged (`.footer-panel`, added by JS on open). */
body.has-footer-cta .site-footer,
body.footer-ready.footer-panel .site-footer {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 100lvh;
	overflow: hidden;              /* JS-driven internal scroll (scrollTop) + slide-down dismiss */
	z-index: 1100;                 /* above the fixed header — the panel covers everything */
	margin-top: 0;                 /* cancel the reveal overlap when panelized on a reveal page */
	transform: translateY(100%);   /* parked just below the fold, waiting */
	will-change: transform;
}
/* Enable the slide transition only once JS is ready → the INITIAL park (already at 100%) never
   animates; only the CTA open/close does. */
body.footer-ready.has-footer-cta .site-footer,
body.footer-ready.footer-panel .site-footer {
	transition: transform .6s var(--ease-in-out);
}
body.footer-ready.has-footer-cta.footer-open .site-footer,
body.footer-ready.footer-panel.footer-open .site-footer {
	transform: translateY(0);      /* rises to cover the viewport */
}
body.footer-ready.has-footer-cta.footer-scrubbing .site-footer,
body.footer-ready.footer-panel.footer-scrubbing .site-footer {
	transition: none;              /* JS drives transform while scrubbing / dismissing */
}
body.footer-ready.footer-open { overflow: hidden; }             /* lock the page behind while the panel is up */

/* Anti-FOUC: before JS positions the big footer it sits in normal flow and flashes on load
   ("na prvú vidno large footer"). Keep it hidden until JS arms the reveal / parks the CTA panel —
   only visibility (NOT position/transform/margin), so layout + ScrollTrigger measurements and the
   reveal movement stay identical; it's only ever revealed after arming anyway. */
body.has-footer-reveal .site-footer,
body.has-footer-cta .site-footer { visibility: hidden; }
body.footer-ready .site-footer { visibility: visible; }   /* JS adds footer-ready at the very start of initFooter, in the SAME synchronous pass as the positioning → no paint between, no flash; robust even if GSAP fails to arm the reveal */

/* Calm page transition: fade the page in on load (grafička: "fading", softer than the hard cut
   that also flashed the footer). The home page runs its own intro loader → exclude it. */
@keyframes simi-page-in { from { opacity: 0; } to { opacity: 1; } }
body:not(.home) { animation: simi-page-in .4s ease both; }
@media (prefers-reduced-motion: reduce) { body:not(.home) { animation: none; } }

/* Subpage mini-footer — always in flow on non-HP pages (HP hides it; the big footer
   reveals there instead). Exact design TBD; canvas bg + black text placeholder. */
/* Mini-footer is rendered (footer.php) only on legal + WooCommerce pages, so just show it. */
.site-footer-mini { display: block; background: var(--color-canvas); color: var(--color-black); border-top: 1px solid var(--color-black); }
body.has-footer-cta .site-footer-mini { border-top: 0; }   /* shop/WC: the grid already ends without a divider (Figma 4:1638 — no line before the footer) */
.site-footer-mini__inner { display: flex; flex-direction: column; gap: 12px; padding-block: 24px; font-size: 16px; line-height: 1.3; letter-spacing: var(--tracking); text-transform: uppercase; }   /* 16px (Figma); mini-l uppercase, mini-r natural (overridden below) */
.site-footer-mini a:hover { opacity: .65; }

/* Payment + 3D Secure logos — GoPay merchant-site requirement (card + 3DS logos on
   sales pages). Not in Figma: grayscaled + dimmed so the brand marks sit quiet in the
   design; per-logo heights equalize optical weight (aspect ratios differ wildly). */
.pay-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding-top: 24px; }
.pay-logos img { display: block; width: auto; }   /* full color (Jan 2026-09-08); grayscale variant rejected */
.pay-logos .pay-logos__gopay { height: 17px; }   /* .pay-logos prefix outguns WC's `.woocommerce-page img { height:auto }` */
.pay-logos .pay-logos__visa { height: 14px; }
.pay-logos .pay-logos__mc, .pay-logos .pay-logos__maestro { height: 28px; }
.pay-logos .pay-logos__3ds { height: 20px; }
@media (min-width: 769px) {
	/* Match the big footer's mini row EXACTLY (Figma 4:4833): 90px between the copyright/Instagram
	   group and the legal group; mini-l 98px internal, mini-r 30px, boomex hard-right. Was using
	   space-between + the inherited mobile 12px gap → Instagram sat glued to the legal links. */
	.site-footer-mini__inner { flex-direction: row; align-items: flex-end; gap: 90px; }
}

/* ============================================================
   Shop (Produkty) — grid of square cells + private-sale CTA (Figma 4:1140 / 4:1638)
   ============================================================ */
.shop { padding-top: var(--header-h); background: var(--color-canvas); overflow-x: clip; }   /* clip the vw-based full-bleed rule overflow at the client edge → no horizontal scrollbar (classic scrollbars); `clip` (not `hidden`) keeps overflow-y visible so the footer reveal is unaffected */
.shop__grid {
	display: grid;
	grid-template-columns: 1fr;      /* mobile: 1 column */
	border-top: 1px solid var(--color-black);
}
.shop-cell {
	aspect-ratio: 39 / 72;           /* mobile: full-width portrait cell (390×720) */
	border-bottom: 1px solid var(--color-black);
	position: relative;
	overflow: hidden;                /* clip any inner spill so it can never bleed over the footer (iOS aspect-ratio/dynamic-toolbar guard) */
	min-height: 0;
	list-style: none;
}

/* Product card */
.shop-card { margin: 0; }
.shop-card__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;   /* head (+ pre-sale badge) stay glued to the top with a constant gap;
	                                  the image is centred in the leftover space via auto margins below */
	gap: 24px;
	height: 100%;
	padding: 30px 16px;   /* mobile: 16px sides (Jan); desktop → 30px all */
	color: var(--color-black);
}
/* Centre the artwork in whatever space is left and pin the size/detail row to the bottom,
   regardless of whether the pre-sale badge is present (keeps the badge's gap constant). */
.shop-card__media-wrap { position: relative; margin: auto; width: 250px; max-width: 80%; }   /* centre artwork in leftover space; also the anchor for the sold-out label */
.shop-card__inner .simi-psbadge { margin-top: -12px; }   /* tight ~12px gap under the name (Figma), trims the 24px flex gap */
.shop-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: var(--tracking);
	text-transform: uppercase;
}
.shop-card__price { white-space: nowrap; }
/* "s DPH" / "incl. VAT" suffix next to a price (Figma price-update frames 2026-09:
   DM Sans Regular 16px, 8px after the bold 18px price, never uppercased). Shared by
   the shop card and the artwork-detail hero — sits INSIDE the price span, so reset
   the inherited bold/uppercase. */
.price-vat { margin-left: 8px; font-weight: 400; font-size: 16px; line-height: 1.25; text-transform: none; }
.shop-card__media { display: block; width: 100%; aspect-ratio: 250 / 340; overflow: hidden; }
.shop-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-card__desc {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	font-size: 16px;
	line-height: 1.25;
}
.shop-card__size { font-weight: 400; }
.shop-card__detail {
	font-weight: 500;
	color: rgba(19, 17, 20, 0.5);
	white-space: nowrap;
	transition: color .2s;
}
/* "+ Detail" goes 50%→100% only when hovering the IMAGE or the button itself; hovering the
   other texts just shows the pointer (Jan). */
.shop-card__detail:hover,
.shop-card__inner:has(.shop-card__media:hover) .shop-card__detail { color: var(--color-black); }

/* Private-sale CTA cell */
/* CTA box (Figma 4:1158 default / 4:1630 hover): OFF-LIGHT fill + RED text; hovering the
   button recolors the whole fill to RED and the text to WHITE. */
.shop-cta { display: flex; padding: 90px 16px; border-bottom: 0; aspect-ratio: auto; }   /* mobile: NOT a tall 39/72 tile — CTA cell fits its content (overrides .shop-cell). pad 90 top/bottom, 16 sides = box 16px off the edge like the product cards (Figma 4:1818, Jan). No divider under it. Desktop restores the grid border. */
.shop-cta__inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	padding: 40px;
	text-align: center;
	background: var(--color-offlight);
	transition: background .35s var(--ease-out-quart);
}
.shop-cta__text {
	margin: 0;
	max-width: 472px;
	font-weight: 700;
	font-size: 16px;   /* mobile (Jan); desktop 18px below */
	line-height: 1.3;
	letter-spacing: var(--tracking);
	text-transform: uppercase;
	color: var(--color-red);
	transition: color .35s var(--ease-out-quart);
}
.shop-cta__btn { color: var(--color-red); }
@media (hover: hover) {
	.shop-cta__inner:has(.shop-cta__btn:hover) { background: var(--color-red); }
	.shop-cta__inner:has(.shop-cta__btn:hover) .shop-cta__text,
	.shop-cta__inner:has(.shop-cta__btn:hover) .shop-cta__btn { color: var(--color-canvas); }
}

/* ============================================================
   Detail diela (single product) — Figma 4:4590. Mobile base = stacked.
   Type: title/price/labels = DM Sans Bold 18px uppercase; body = Regular 16px.
   ============================================================ */
.dielo { padding-top: var(--header-h); background: var(--color-canvas); color: var(--color-black); }

/* HERO */
/* Mobile-first single-column grid (Figma 5:404). Structural wrappers
   (__left/__info/__top/__about/__buy/__cta-top) collapse via display:contents so
   their leaf children become direct grid items — this lets us place them in the
   Figma-mobile order, which differs from the desktop DOM order. Desktop (≥769)
   un-collapses the wrappers and reverts to the nested-flex 3-column layout. */
.dielo-hero {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"num   next"
		"art   art"
		"title wall"
		"sub   sub"
		"price price"
		"badge badge"
		"act   act"
		"blurb blurb"
		"note  note";
	column-gap: 20px;
	padding: 15px var(--gutter) 0;
}
.dielo-hero__left,
.dielo-hero__info,
.dielo-hero__top,
.dielo-hero__about,
.dielo-hero__buy,
.dielo-hero__cta-top { display: contents; }

.dielo-hero__num { grid-area: num; margin: 0; display: flex; gap: 3px; font-weight: 500; font-size: 16px; letter-spacing: var(--tracking); }
.dielo-hero__next { grid-area: next; justify-self: end; align-self: start; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 16px; white-space: nowrap; }
/* Exact Figma chevron (node 4:5027, Chevron_Left) rotated 180° → points right for "next". */
.dielo-hero__next-icon { flex: none; transform: rotate(180deg); }
/* Mobile: no forced aspect-ratio — WooCommerce's `img{height:auto}` keeps the image at its
   natural height, so a fixed aspect-ratio container left a gap under it. Let it hug the image.
   Desktop (below) restores width:503 / height:680 where the natural aspect matches. */
.dielo-hero__art { grid-area: art; width: 100%; margin-top: 12px; }
.dielo-hero__art-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mobile: flatten headline so title + subtitle become grid items. Title shares the "title/wall"
   row with the thumbs, both bottom-aligned (title's bottom edge meets the thumbs' bottom edge);
   the subtitle drops to its own full-width row, 50px below the thumbs. Desktop restores flex. */
.dielo-hero__headline { display: contents; }
.dielo-hero__title { grid-area: title; align-self: center; margin: 12px 0 0; max-width: 150px; font-weight: 700; font-size: 18px; line-height: 1.3; text-transform: uppercase; letter-spacing: var(--tracking); }   /* mobile: vertically CENTRED to the thumbs (both variants). Carries the wall's own margin-top:12 so their margin-boxes share the same centre. Wraps to 2 lines (Figma 5:418). Desktop resets margin. */
.dielo-hero__subtitle { grid-area: sub; margin: 50px 0 0; max-width: 170px; font-weight: 400; font-size: 16px; line-height: 1.25; }   /* 50px below the thumbs row; max-width 170 (mobile, grafička) */
.dielo-hero__wall { grid-area: wall; align-self: end; margin-top: 12px; display: flex; gap: 8px; }   /* bottom-aligned so the title meets the thumbs' bottom edge */
.dielo-hero__wall-thumb { width: 56px; height: 75px; padding: 0; border: 0; overflow: hidden; cursor: pointer; background: none; }
.dielo-hero__wall-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dielo-hero__price { grid-area: price; margin: 60px 0 0; font-weight: 700; font-size: 18px; line-height: 1.3; text-transform: uppercase; letter-spacing: var(--tracking); }
/* Mobile, no subtitle: the empty "sub" row would leave the price only 60px under the title. Figma
   6:652 keeps the price anchored (~179px title→price) via a tall reserved headline; here we add the
   reserve straight onto the price. Desktop resets this (it uses the headline min-height instead). */
/* Reserve set so title-bottom → price ≈ 180px (Figma 6:652) WITH the title centred to the thumbs
   below (the centred title sits ~26px above the thumbs' bottom, so 154 + 26 ≈ 180). */
.dielo-hero--no-sub .dielo-hero__price { margin-top: 154px; }
.dielo-hero__actions { grid-area: act; margin-top: 40px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.dielo-hero__cart { font-weight: 700; font-size: 16px; color: var(--color-black); }   /* mobile 16 (Figma 5:x); desktop 18 below */
.dielo-hero__cart.added, .dielo-hero__cart:hover { color: var(--color-red); }
.woocommerce .dielo-hero__cta-top a.added_to_cart { display: none; }   /* hide WC's auto link — we render our own reserved-slot one (with chevron) below. Needs `.woocommerce … a` to outrank WC's `.woocommerce a.added_to_cart{display:inline-block}` (0,2,1). */
/* Our own "Zobraziť košík" link (Figma "buttony" 73:x). COLLAPSED until revealed on add — the
   Figma default state has no view-cart link, so it must NOT reserve height (a reserved slot made
   the right column overflow the fixed 680px photo → the "Simi Čekovská, 2026." sign dropped below
   the photo). Revealed on add / when already in cart. Sits 10px under the "pridané do košíka (+N)"
   label (actions gap 20 → pull up 10), BLACK, with an inline chevron SVG (node 73:80). */
.dielo-hero__viewcart {
	display: none;
	margin-top: -10px;
	align-items: center;
	gap: 6px;
	color: var(--color-black);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
}
.dielo-hero__viewcart.is-shown { display: inline-flex; }
.dielo-hero__viewcart-chevron { flex: none; }
.dielo-hero__gift { display: inline-flex; align-items: center; gap: 6px; padding-left: 0; font-weight: 500; font-size: 16px; }   /* padding-left 0 all viewports (grafička) — drop the UA button inline padding */
.dielo-hero__gift-icon { flex: none; width: 24px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.dielo-hero__gift-icon svg { display: block; }

/* ============================================================
   Gift-link: recipient banner (Figma 42:1386) + modal (42:1252 / 42:1231)
   ============================================================ */
.gift-banner { display: flex; flex-direction: column; align-items: center; gap: 50px; text-align: center; padding: 80px var(--gutter) 30px; }
.gift-banner__title { margin: 0; max-width: 694px; font-weight: 600; font-size: 40px; line-height: 1.12; text-transform: uppercase; letter-spacing: var(--tracking); color: var(--color-black); }
.gift-banner__text { margin: 0; max-width: 452px; font-weight: 700; font-size: 18px; line-height: 1.3; text-transform: uppercase; letter-spacing: var(--tracking); color: var(--color-black); }

.gift-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: var(--gutter); }
.gift-modal[hidden] { display: none; }
.gift-modal__overlay { position: absolute; inset: 0; background: rgba(19, 17, 20, .35); opacity: 0; transition: opacity .3s var(--ease-out-quart); }
.gift-modal__box { position: relative; z-index: 1; width: 100%; max-width: 582px; background: var(--color-offlight); padding: 60px 40px; opacity: 0; transform: translateY(10px); transition: opacity .3s var(--ease-out-quart), transform .3s var(--ease-out-quart); }
body.gift-open .gift-modal__overlay { opacity: 1; }
body.gift-open .gift-modal__box { opacity: 1; transform: none; }
.gift-modal__close { position: absolute; top: 16px; right: 20px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; color: var(--color-red); }
.gift-modal__head { margin: 0 auto 40px; max-width: 300px; font-weight: 700; font-size: 18px; line-height: 1.3; text-transform: uppercase; letter-spacing: var(--tracking); text-align: center; color: var(--color-red); }
.gift-modal__form, .gift-modal__result { display: flex; flex-direction: column; align-items: center; gap: 30px; max-width: 282px; margin: 0 auto; }
.gift-modal__form[hidden], .gift-modal__result[hidden] { display: none; }   /* result REPLACES the form */
.gift-field { width: 100%; }
.gift-field input { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--color-red); color: var(--color-red); font-family: var(--font-body); font-weight: 400; font-size: 16px; letter-spacing: var(--tracking); padding: 0 0 10px; }
.gift-field input::placeholder { color: var(--color-red); opacity: 1; }
.gift-field input:focus { outline: none; }
.gift-modal__btn { color: var(--color-red); font-size: 18px; }
.gift-modal__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gift-modal__msg { margin: 0; min-height: 1em; font-size: 14px; color: var(--color-red); }
/* result */
.gift-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding-bottom: 12px; border-bottom: 1px solid var(--color-black); }
.gift-link__url { font-weight: 500; font-size: 16px; color: var(--color-black); word-break: break-all; }
.gift-link__copy { flex: none; display: inline-flex; color: var(--color-black); }
.gift-link__copy.is-copied { color: var(--color-red); }
.gift-share { display: flex; align-items: center; gap: 42px; width: 100%; }
.gift-share__label { flex: none; font-size: 14px; color: rgba(19, 17, 20, .4); }
.gift-share__btns { display: flex; align-items: center; gap: 10px; }
.gift-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgba(19, 17, 20, .3); border-radius: 10px; background: var(--color-canvas); transition: border-color .2s; }
.gift-share__btn:hover { border-color: var(--color-black); }
/* Brand colours (icons use fill:currentColor) */
.gift-share__btn[data-gift-share="messenger"] { color: #0084ff; }
.gift-share__btn[data-gift-share="whatsapp"] { color: #25d366; }
.gift-share__btn[data-gift-share="x"] { color: #000; }
@media (min-width: 769px) {
	.gift-banner { padding: 80px var(--edge-pad) 30px; }
	.gift-banner__title { font-size: 68px; line-height: 1.12; }
	.gift-modal__box { padding: 70px; }
}
.dielo-hero__blurb { grid-area: blurb; margin-top: 60px; display: flex; flex-direction: column; gap: 35px; }
.dielo-hero__blurb > p { margin: 0; max-width: 324px; font-weight: 700; font-size: 16px; line-height: 1.3; text-transform: uppercase; letter-spacing: var(--tracking); }   /* mobile 16px (Jan); cap Figma 5:414; desktop → 18px + 487 below */
/* Higher specificity than `.dielo-hero__blurb > p` (0,1,1), which was forcing the signature
   to 18px/700/uppercase. Signature is DM Sans Medium 16 / lh 125% (Figma dev-mode node 5:416). */
.dielo-hero__blurb > .dielo-hero__sign { font-weight: 500; font-size: 16px; line-height: 1.25; text-transform: none; color: var(--color-black); }
.dielo-hero__note { grid-area: note; margin: 60px 0 0; max-width: 200px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; font-weight: 400; font-size: 16px; line-height: 1.25; letter-spacing: var(--tracking); }   /* mobile cap Figma 5:411 (desktop → 240 below) */
/* Collection name inside the specs list is SemiBold (Figma char override 600, client comment 2026-09-03). */
.dielo-hero__note b, .dielo-hero__note strong { font-weight: 600; }

/* BODY — one uniform vertical rhythm between ALL flexible blocks (mobile: 160 top, 45 gap) */
.dielo-body { padding: 160px var(--gutter) 80px; display: flex; flex-direction: column; gap: 45px; }
.dielo-body__content { display: contents; }   /* mobile: blocks flow as .dielo-body's own flex children */
.dielo-body__cart { display: none; }           /* mobile: sticky body cart is desktop-only (inline block cart stays) */
.woocommerce .dielo-body a.added_to_cart { display: none; }  /* the body cart is add-only (Figma 5:22) — hide WC's auto view-cart link (outrank WC's .woocommerce a.added_to_cart) */
.dielo-block { display: flex; flex-direction: column; gap: 40px; }
/* Description paragraphs (Figma mobile 6:452 = 30px/lh1.2/indent90; desktop 42/260 below). */
.dielo-block--text { max-width: 917px; font-size: 30px; line-height: 1.2; color: var(--color-black); }
.dielo-block--text p { margin: 0 0 1em; }
.dielo-block--text p:last-child { margin-bottom: 0; }
.dielo-block--text:first-of-type > p:first-child,
.dielo-block--text:first-of-type { text-indent: 90px; }
.dielo-block--text:first-of-type > p:first-child ~ p { text-indent: 0; }

/* gallery block (main + swap thumbs) */
.dielo-block--gallery { gap: 30px; margin-bottom: -14px; }   /* mobile: main→thumbs gap 30px; margin-bottom tightens thumbs→next-text to 31px (body gap 45 − 14; grafička +10px over the former 21px). Desktop resets both. */
.dielo-gallery__main { width: 100%; max-width: 266px; }
.dielo-gallery__main img { width: 100%; height: auto; display: block; }
/* Mobile: thumb pair right-aligned under the main image, 6px gap (Figma 6:477 Images 2/3). */
.dielo-gallery__thumbs { display: flex; gap: 6px; justify-content: flex-end; }
.dielo-gallery__thumb { width: 131px; max-width: calc(50% - 3px); padding: 0; border: 0; background: none; cursor: pointer; }
.dielo-gallery__thumb img { width: 100%; height: auto; display: block; }

/* medium image + text */
.dielo-block--image-text { }
.dielo-imgtext__media { max-width: none; }
.dielo-imgtext__media img { width: 100%; height: auto; display: block; }
.dielo-imgtext__text { margin: 0; max-width: 266px; font-weight: 400; font-size: 16px; line-height: 1.25; }   /* mobile: Figma 4:4791 imgtext copy width */
.dielo-imgtext__cart { display: none; margin-top: 24px; color: var(--color-black); font-weight: 700; font-size: 18px; }   /* the SECOND add-to-cart is hidden on mobile (client 2026-09-16: only ONE on mobile); desktop uses the sticky body cart instead */
/* The secondary cart buttons mirror the hero one (client 2026-09-15): red on hover + in-cart. */
.dielo-body__cart.added, .dielo-body__cart:hover,
.dielo-imgtext__cart.added, .dielo-imgtext__cart:hover { color: var(--color-red); }

/* large image */
.dielo-block--big { gap: 0; }
.dielo-big__img { height: auto; display: block; }
/* Big image caps at 680 (Figma 5:34 / 9:631); full-width on mobile. Higher specificity than
   WooCommerce's `.woocommerce img { max-width:100% }`, which was stretching it full-width. */
.dielo-block--big .dielo-big__img { width: 680px; max-width: 100%; }

/* SPECS (fixed bottom) */
.dielo-specs { padding: 0 var(--gutter) 40px; display: flex; flex-direction: column; gap: 40px; }   /* bottom spacing moved to .dielo-foot (client 2026-09-15) */
/* Bottom row: "všetky produkty" left + "Ďalšie dielo" right on one line, full page
   width (Figma 2_Sekcia_Artwork-Description; the 140/150 pre-footer padding lives here now). */
.dielo-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 var(--gutter) 140px; }
.dielo-foot__next { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 16px; white-space: nowrap; }
.dielo-foot__next-icon { flex: none; transform: rotate(180deg); }   /* same chevron as the hero next-link, flipped to point right */
.dielo-specs__kolekcia-h { margin: 0 0 10px; font-weight: 700; font-size: 18px; line-height: 1.2; text-transform: uppercase; letter-spacing: var(--tracking); }
.dielo-specs__kolekcia p { margin: 0; font-weight: 400; font-size: 16px; line-height: 1.25; max-width: 327px; }
.dielo-specs__cols { display: flex; flex-direction: column; gap: 30px; }
.spec { display: flex; flex-direction: column; gap: 12px; }
.spec__label { font-weight: 700; font-size: 18px; line-height: 1.2; text-transform: uppercase; letter-spacing: var(--tracking); }
.spec__val { font-weight: 400; font-size: 16px; line-height: 1.25; }
.dielo-specs__all { color: var(--color-black); font-weight: 700; font-size: 18px; }

/* ============================================================
   Desktop (min-width 769) — additive overrides only
   ============================================================ */
@media (min-width: 769px) {
	.container { padding-inline: var(--gutter-desktop); }

	/* Header — desktop (Figma 4:566): [MENU ☰] .... [KOŠÍK], name absolute at --col-x */
	.site-header__bar { padding: 15px var(--gutter-desktop); min-height: var(--header-h); justify-content: space-between; }
	.site-header__menu-btn { order: 1; margin-left: 0; }
	.site-header__menu-label {
		display: inline;
		font-weight: 500;
		font-size: 16px;
		line-height: 1.3;
		letter-spacing: var(--tracking);
		text-transform: uppercase;
	}
	.site-header__name {
		position: absolute;
		left: var(--col-x);          /* aligns with the open-menu link column */
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
		font-weight: 600;            /* Semibold (Jan) */
		font-size: 24px;
		text-transform: uppercase;   /* desktop name uppercase (Jan) */
		letter-spacing: -0.72px;
	}
	.site-header__cart { order: 3; font-size: 16px; }

	/* Menu overlay — desktop: links align to name column (--col-x), links 42px */
	.site-menu__body { padding: calc(var(--header-h) + 80px) var(--edge-pad) 0 var(--col-x); }
	.site-menu__link,
	.site-menu__lang { font-size: 42px; }
	/* Menu mini-footer — desktop: [2026© · INSTAGRAM] .... [legal links · created by] */
	.site-menu__footer { padding: 0 var(--edge-pad) 27px; gap: 90px; }   /* L↔R block gap, like footer mini (90px) */
	.site-menu__footer-l { flex: none; justify-content: flex-start; gap: 98px; }   /* copy↔INSTAGRAM bound 98px, like footer mini-l */
	.site-menu__copy { display: inline; }
	.site-menu__linkedin { display: none; }
	.site-menu__footer-r { display: flex; flex: 1; gap: 30px; align-items: flex-end; justify-content: flex-start; text-transform: none; }   /* legal links fill + natural case, like footer mini-r */
	.site-menu__credit { margin-left: auto; }   /* "created by boomex" flush to the right edge, like the other footers */

	/* Hero — desktop (Figma 4:483 1440×850) */
	.hero__video--desktop { display: block; }
	.hero__video--mobile { display: none; }
	.hero__gradient {
		height: 205px; /* 4:485: top 645 → 850 */
		background: linear-gradient(179deg, rgba(0,0,0,0) 23.35%, rgba(0,0,0,0.15) 100%);
	}
	.hero__title {
		left: var(--edge-pad);        /* lock to the content column on ultrawide (not the raw gutter) */
		max-width: 970px;
		font-size: 98px;
	}
	.hero__foot {
		left: var(--gutter-desktop);
		right: var(--gutter-desktop);
		bottom: var(--hero-bottom); /* 50px */
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 0;
	}
	.hero__lead { max-width: 153px; }   /* tagline 2 lines (Figma 4:487) */
	.hero__link { font-size: 18px; }

	/* Section 2 (4:481: pad 60/30, Bold 18px, max 590) */
	.s-sub { padding: 60px var(--gutter-desktop); }
	.s-sub__text { font-size: 18px; max-width: 550px; }   /* desktop (Jan; Figma 4:482 = 570) */

	/* Section 4 (4:476: pad 106/30, gap 60, SemiBold 68px lh1.2, max 903) */
	.s-private { padding: 0; }
	.s-private__box { min-height: 790px; padding: 0 0 60px; }
	.s-private__inner { gap: 190px; }
	.s-private__cta { gap: 50px; }
	.s-private__big { font-size: 68px; }
	.s-private__btn { font-size: 18px; }   /* desktop (Jan) */
	.s-private__text { font-size: 18px; }

	.s-produkty { padding: 160px var(--gutter-desktop) 106px; }   /* desktop pad-top 160 (Jan) */
	.s-produkty__inner { gap: 60px; max-width: 903px; min-height: 638px; justify-content: center; }
	.s-produkty__text { max-width: 903px; font-size: 68px; line-height: 1.2; }   /* Figma 4:477 (68px, 903 wide) */

	/* Section 5 (4:461: pad 30/30/130, gap 40; img aspect 1380/700; text-box row space-between) */
	.s-edicia { padding: 30px var(--gutter-desktop) 130px; }
	.s-edicia__img--desktop { display: block; aspect-ratio: 1380 / 700; }
	.s-edicia__img--mobile { display: none; }
	.s-edicia__textbox { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 40px; }
	.s-edicia__text { font-size: 18px; max-width: 660px; }
	.s-edicia__btn { white-space: nowrap; font-size: 18px; }   /* desktop (Jan) */

	/* Section 5 image: scroll-scrub expand to full-bleed. --x (0→1) driven by GSAP.
	   x=0 → contained (100%); x=1 → +2×gutter wide, shifted -gutter → edge-to-edge. */
	.s-edicia__media {
		--x: 0;
		width: calc(100% + var(--x) * var(--gutter-desktop) * 2);
		margin-inline: calc(var(--x) * var(--gutter-desktop) * -1);
		will-change: width, margin;
	}

	/* Section 6 — výstavy (desktop 4:499): heading 100px, 3-col rows, all rows shown */
	.s-vystavy { padding: 30px var(--gutter-desktop) 170px; }   /* desktop: 170px white space before the footer scrolls up (Jan) */
	.s-vystavy__title { font-size: 100px; line-height: 1.3; letter-spacing: -3px; margin-bottom: 140px; }
	.vystava { flex-direction: row; justify-content: space-between; gap: 30px; padding: 22px 30px; align-items: center; }
	.vystava__meta { display: flex; flex: 1 1 660px; justify-content: space-between; gap: 20px; align-items: center; }
	.vystava__nazov { grid-column: auto; flex: 0 1 427px; font-size: 18px; }   /* desktop keeps 18px */
	.vystava__rok { flex: 0 0 121px; font-size: 18px; }   /* desktop keeps 18px */
	.vystava__typ { flex: 0 0 109px; justify-self: auto; text-align: left; }
	.vystava__place { flex: 0 1 591px; flex-direction: row; justify-content: space-between; gap: 20px; align-items: center; }
	.vystava__mesto { align-self: auto; text-align: right; }
	.vystava.is-collapsed { display: flex; }   /* desktop shows all rows */
	.s-vystavy__more { display: none; }         /* no "show more" on desktop */

	/* Footer — desktop (4:425) */
	.site-footer__inner { padding-block: 40px; }
	.site-footer__top { grid-template-columns: 1fr auto 1fr; row-gap: 0; }
	.site-footer__nwl-head { grid-row: 1; grid-column: 2; }
	.site-footer__social--right { grid-row: 1; grid-column: 3; }
	.site-footer__nwl-head { font-size: 18px; min-width: 185px; max-width: 191px; }   /* desktop 18px (Figma 4:426); min-width holds the row after the enlargement (Jan) */
	.site-footer__nwl-head:lang(sk) { max-width: 292px; }   /* new SK claim box (Figma 2026-09-14) */
	.site-footer__nwl-head:lang(en) { max-width: 333px; }   /* new EN claim box (Figma 2026-09-15) */
	.site-footer__brand { margin-top: 240px; font-size: 68px; }
	.site-footer__tagline { font-size: 18px; }
	.site-footer__tagline span:first-child { max-width: 145px; }
	.site-footer__tagline span:last-child { max-width: 160px; }
	/* EN taglines wrap to 2 lines like the Slovak version (client comment
	   2026-09-03; mobile is OK). Breaks match the Figma EN footer: after
	   "CONTEXT" / after "QUIET" — widths measured against the LIVE font
	   metrics (our tracking is tighter than the Figma boxes' 212/237). */
	.site-footer__tagline span:first-child:lang(en) { max-width: 190px; }
	.site-footer__tagline span:last-child:lang(en) { max-width: 237px; }
	.site-footer__video-text { font-size: 18px; max-width: 325px; }   /* desktop (Jan; Figma box 4:434 = 342) */
	.site-footer__video-media { width: 133px; height: 190px; }   /* desktop 133×190 (Figma 4:4832); mobile stays 100×143 */
	.nwl {
		position: relative;
		display: grid;
		grid-template-columns: 282px 290px max-content;
		grid-template-areas: "name email submit" "consent consent .";
		column-gap: 10px;
		row-gap: 14px;
		align-items: end;
		margin-top: 60px;
	}
	.nwl__name { grid-area: name; }
	.nwl__email { grid-area: email; }
	.nwl__submit { grid-area: submit; align-self: end; font-size: 18px; }   /* desktop 18px (mobile 16) */
	.nwl__consent { grid-area: consent; margin-top: 4px; max-width: 378px; }
	/* Error sits right NEXT TO the consent text (Figma 9:678: x=421 in the form,
	   consent ends ~407) — not at the form's far right edge (client 2026-09-15). */
	.nwl__error { position: absolute; left: 421px; right: auto; top: 41px; width: 263px; text-align: left; }
	.site-footer__video { margin-top: 120px; }
	/* Desktop mini-footer spans the full width (Figma 4:577):
	   [copyright ·98· instagram] …90… [legal links ·30·] …auto… [boomex hard-right]. */
	.site-footer__mini { flex-direction: row; align-items: flex-end; gap: 90px; margin-top: 100px; }
	.site-footer__mini-l { flex: none; gap: 98px; justify-content: normal; }   /* simi↔instagram bound, like header Menu↔name (Figma 4:579) */
	.site-footer__mini-r { flex: 1; gap: 30px; justify-content: normal; }   /* natural case (Figma 4:584); mini-l stays uppercase */
	.site-footer__mini-r > :nth-child(1n) { order: 0; }   /* undo the mobile reorder — MATCH the nth-child specificity so this wins on desktop */
	.site-footer__mini-brk { display: none; }   /* no forced wrap on desktop */
	.site-footer__credit { width: auto; margin: 0 0 0 auto; text-align: right; }   /* "created by boomex" pushed hard-right → last (Figma 4:589) */

	/* Shop — 2 columns of square cells with dividing lines (Figma 720×720). Only the INNER
	   grid lines show: no outer left/right perimeter (Jan) — the top border + cell bottoms +
	   the col-1→col-2 divider remain. */
	.shop__grid { grid-template-columns: 1fr 1fr; }
	.shop-cell { aspect-ratio: 1 / 1; border-right: 1px solid var(--color-black); }
	.shop-cell:nth-child(2n) { border-right: 0; }   /* right column → no outer-right perimeter */
	.shop-card__inner { padding: 30px; }
	/* CTA (Figma 4:1158): the offlight box is CENTRED in the square cell and sized to its content,
	   so it adapts as the cell shrinks (was: fixed 190px padding → the box got squeezed below the
	   text at ~1000px and the copy spilled out). No bottom/right grid border (free cell). */
	.shop-cta { padding: 70px; align-items: center; justify-content: center; border-right: 0; border-bottom: 0; }
	/* Inner box metrics from the Figma EN CTA (580×340): 117 top / 76 bottom / 54 sides,
	   51 text→button gap (client comment 2026-09-03: more breathing room above and below). */
	.shop-cta__inner { flex: 0 1 auto; padding: 117px 54px 76px; gap: 51px; }
	.shop-cta__text { font-size: 18px; }   /* desktop (mobile 16) */
	.shop-cta__btn { font-size: 18px; }   /* desktop (Jan) */

	/* Ultrawide lock: detail + shop stop expanding at 1624 content and centre
	   (Figma 1920 frame 29:1032). Below the cap they stay fluid (viewport − gutter). */
	.dielo, .shop__grid { max-width: var(--detail-max); margin-inline: auto; }

	/* When the viewport is wider than the grid, the HORIZONTAL rules (grid top + each row's
	   bottom) bleed to the viewport edges while the cards stay inside the grid (Jan). The
	   vertical col divider + the card content stay contained. Cells drop overflow:hidden
	   (desktop only — the iOS spill guard is a mobile concern) so the line pseudos can extend.
	   Each pseudo is bounded to the viewport edges (calc(...50vw)) → no horizontal scroll. */
	.shop__grid { position: relative; border-top: 0; }
	.shop__grid::before { content: ""; position: absolute; top: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); height: 1px; background: var(--color-black); }
	.shop-cell { overflow: visible; border-bottom: 0; }
	.shop-cell::after { content: ""; position: absolute; bottom: 0; height: 1px; background: var(--color-black); }
	.shop-cell:nth-child(odd)::after  { left: calc(100% - 50vw); right: 0; }   /* left half + left bleed */
	.shop-cell:nth-child(even)::after { left: 0; right: calc(100% - 50vw); }   /* right half + right bleed */
	.shop-cta::after { content: none; }   /* CTA stays line-free (Figma 4:1158) */

	/* ---- Detail diela — desktop (Figma 4:5039): un-collapse the mobile grid
	   back to the nested-flex 3-column layout (left | art | info) ---- */
	.dielo-hero {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 24px;
		padding: 30px var(--gutter-desktop) 60px;
	}
	/* Fixed 3 columns (left 239 | art 503 | info 590), 24px flex gaps. On >1440 the leftover
	   width belongs BETWEEN the left panel and the ART+info block: Figma pins left-panel to the
	   left edge and the ART+info block to the right content edge (1624 lock), the middle gap
	   flexing 24px@1440 → 268px@1920 (frames 29:885 / 29:1032). margin-left:auto on ART does that,
	   keeping "Ďalšie dielo" (right-aligned in the 590 info col) pinned to the right on ultrawide. */
	.dielo-hero__left { display: flex; flex-direction: column; width: 239px; height: 680px; justify-content: space-between; gap: 0; flex: none; }
	/* Below 1440 the content is narrower than the fixed 1380 (left 239 + art 503 + info 590 + gaps),
	   so art + info must shrink to avoid a horizontal scrollbar (Jan: 1360 overflowed). At ≥1440
	   there's no deficit → they stay exact; the image is object-fit:cover so it just crops narrower. */
	.dielo-hero__art { width: 503px; height: 680px; aspect-ratio: auto; flex: 0 1 auto; min-width: 0; margin-left: auto; }
	.dielo-hero__info { display: flex; flex-direction: column; width: 590px; height: 680px; justify-content: space-between; gap: 0; flex: 0 1 auto; min-width: 0; }
	.dielo-hero__top { display: flex; flex-direction: column; gap: 80px; }
	.dielo-hero__about { display: flex; flex-direction: row; justify-content: space-between; }
	/* Restore flex column (mobile flattens it to display:contents for the grid) + undo the
	   mobile grid alignment so title/subtitle/thumbs stack normally in the info column. */
	/* Headline reserves a fixed block so the price/CTAs stay anchored whether or not the subtitle
	   exists; without the subtitle the reserve shows as the big title→price gap. Figma 6:597 has a
	   138px headline with a 39px title → 179px title-bottom-to-price-top. Our title renders ~23px
	   (1 line), so 122px reproduces the SAME 179px visual gap — and keeps the "added" state (with
	   the revealed "Zobraziť košík") within the fixed 680px photo height. */
	.dielo-hero__headline { display: flex; flex-direction: column; width: 263px; min-width: 0; gap: 60px; min-height: 122px; }
	.dielo-hero__buy { display: flex; flex-direction: column; width: 247px; gap: 80px; }
	/* In cart → the revealed "Zobraziť košík" (~30px) is absorbed by tightening the gift→thumbs gap
	   (80→50), so the thumbnails stay put and don't get pushed onto the blurb; the sign stays aligned. */
	.dielo-hero--in-cart .dielo-hero__buy { gap: 50px; }
	/* Pre-sale: the badge adds ~76px (badge 36 + one 40px cta-top gap) to the buy column. Reclaim
	   exactly that from the two top-group gaps so every product returns to its PRE-badge headroom —
	   the info column is height:680 + space-between, so the signature stays bottom-aligned to the
	   photo as long as content ≤ 680 (this restores the same headroom the tuned layout had before). */
	.dielo-hero__info:has(.simi-psbadge) .dielo-hero__top { gap: 40px; }   /* was 80 (−40) */
	.dielo-hero__info:has(.simi-psbadge) .dielo-hero__buy { gap: 44px; }   /* was 80 (−36) */
	/* + in-cart also reveals "Zobraziť košík" (+30) → tighten the gift→thumbs gap further (44−30). */
	.dielo-hero--in-cart .dielo-hero__info:has(.simi-psbadge) .dielo-hero__buy { gap: 14px; }
	.dielo-hero__cta-top { display: flex; flex-direction: column; gap: 40px; }
	.dielo-hero__wall { gap: 10px; align-self: start; }
	.dielo-hero__wall-thumb { width: 75px; height: 100px; }
	.dielo-hero__title { max-width: none; align-self: auto; margin-top: 0; }   /* mobile 150 cap + centring + 12px margin are mobile-only */
	.dielo-hero__subtitle { margin-top: 0; max-width: none; }   /* mobile 50px drop is grid-only; desktop uses headline gap; drop the mobile 170 cap */
	.dielo-hero__blurb { gap: 35px; }
	.dielo-hero__blurb > p { max-width: 546px; font-size: 18px; }   /* desktop keeps 18px; 546 = Figma EN detail (client 2026-09-03: wider box → 3 lines, signature stays within the artwork zone) */
	/* zero the mobile grid margins */
	.dielo-hero__art, .dielo-hero__headline, .dielo-hero__wall,
	.dielo-hero__price, .dielo-hero__actions, .dielo-hero__blurb,
	.dielo-hero__note { margin-top: 0; }
	.dielo-hero--no-sub .dielo-hero__price { margin-top: 0; }   /* desktop: no-sub reserve is the mobile mechanism; desktop uses the headline min-height */
	.dielo-hero__note { max-width: 240px; }   /* left-column note caps at 240 (Figma 4:5016) */
	/* NOTE: the thumbs→blurb gap is NOT a fixed margin — it is the free space `justify-content:
	   space-between` leaves between the top group and the bottom group (blurb+sign). It grows/shrinks
	   as content changes (e.g. subtitle present/absent, Figma 6:596), keeping the sign bottom-aligned
	   to the 680px photo. Do not hardcode it. */

	/* Body blocks — internal desktop layouts (uniform 80px between blocks; mobile tightens to 45) */
	/* Desktop: 2-col grid — description content (left) + a sticky "pridať do košíka" that holds
	   top-right through the whole section (Figma 5:22). The single grid row is as tall as the
	   content, so position:sticky keeps the cart pinned until the description ends. */
	.dielo-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: start; gap: 0; padding: 80px var(--gutter-desktop) 0; }
	.dielo-body__content { display: flex; flex-direction: column; gap: 80px; min-width: 0; }
	.dielo-body__cart { display: block; position: sticky; top: calc(var(--header-h) + 40px); align-self: start; justify-self: end; white-space: nowrap; color: var(--color-black); font-weight: 700; font-size: 18px; }
	.dielo-imgtext__cart { display: none; }   /* desktop: superseded by the sticky body cart */
	.dielo-hero__cart { font-size: 18px; }   /* mobile 16 → desktop 18 */
	.dielo-specs__kolekcia-h { margin-bottom: 12px; }   /* mobile 10 → desktop 12 (matches spec gaps) */
	/* Description paragraphs (Figma 4:5047/4:5048): 917 wide, 42px / lh1.2 / BLACK; the FIRST
	   paragraph is indented 260px on its first line (Figma 42:1284). */
	.dielo-block--text { max-width: 917px; font-size: 42px; line-height: 1.2; color: var(--color-black); }
	.dielo-block--text:first-of-type > p:first-child,
	.dielo-block--text:first-of-type { text-indent: 260px; }
	.dielo-block--text:first-of-type > p:first-child ~ p { text-indent: 0; }
	.dielo-block--gallery { flex-direction: row; align-items: flex-end; gap: 80px; margin-bottom: 0; }
	.dielo-gallery__main { width: 351px; max-width: none; }
	.dielo-gallery__thumbs { gap: 15px; justify-content: normal; }   /* desktop: 175px thumbs, 15px gap (mobile right-aligns at 6px) */
	.dielo-gallery__thumb { width: 175px; max-width: none; }
	.dielo-block--image-text { flex-direction: row; align-items: flex-end; gap: 64px; }
	.dielo-imgtext__media { width: 350px; max-width: none; flex: none; }
	.dielo-imgtext__body { max-width: 415px; }
	.dielo-imgtext__text { max-width: none; }

	/* Specs — kolekcia + 2-column specs (Figma 5:32/5:33) */
	.dielo-specs {
		display: grid;
		grid-template-columns: 327px 1fr;
		grid-template-areas: "kolekcia cols";
		column-gap: 88px;
		row-gap: 60px;
		max-width: 965px;
		padding: 100px var(--gutter-desktop) 60px;
	}
	.dielo-foot { padding: 0 var(--gutter-desktop) 150px; }
	.dielo-specs__kolekcia { grid-area: kolekcia; }
	.dielo-specs__cols { grid-area: cols; display: block; column-count: 2; column-gap: 40px; }
	.dielo-specs__cols .spec { break-inside: avoid; margin-bottom: 30px; }
}

/* ============================================================
   Short-viewport fallbacks (laptop chrome ~720px floor)
   ============================================================ */
@media (max-height: 760px) { /* scale hero type/padding — fill when hero is built */ }
@media (max-height: 700px) { /* … */ }

/* ============================================================
   O MNE (About) — Figma O-mne_Desktop 4:2311 / O-mne_Mobil 4:2664
   Mobile-first; desktop overrides in the nested @media below.
   ============================================================ */
.omne { background: var(--color-canvas); color: var(--color-black); padding-top: var(--header-h); }

/* shared section label (DM Sans Bold 18px uppercase) */
.omne-label { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.3; text-transform: uppercase; letter-spacing: var(--tracking); color: var(--color-black); }   /* mobile 16px; desktop 18px below */

/* 1 — HERO */
/* MOBILE hero (Figma 4:2798): title top-left, portrait centred, then the labels OVERLAP the
   portrait's lower edge — CONTEMPORARY (left) + MOTÍVY (right) flank it, FIGURATÍVNA centred
   below. Desktop rebuilds it absolutely (below). */
.omne-hero { position: relative; padding: 60px var(--gutter) 0; display: flex; flex-direction: column; align-items: stretch; }
.omne-hero__title { margin: 0; font-weight: 600; font-size: 46px; line-height: 1.1; text-transform: uppercase; letter-spacing: var(--tracking); text-align: left; }
.omne-hero__portrait { align-self: center; margin-top: 50px; width: 253px; aspect-ratio: 253 / 362; }
.omne-hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; display: block; }
.omne-hero__labels { position: relative; z-index: 1; margin-top: -66px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 33px; font-weight: 700; font-size: 16px; line-height: 1.3; text-transform: uppercase; letter-spacing: var(--tracking); color: var(--color-red); }
.omne-hero__label { margin: 0; }
.omne-hero__label--l { grid-area: 1 / 1; }
.omne-hero__label--r { grid-area: 1 / 2; text-align: right; }
.omne-hero__label--c { grid-area: 2 / 1 / 3 / 3; text-align: center; }

/* 2 — MOJA FILOZOFIA (Figma 94:55). MOBILE: label → intro → bio → presale (centered) → image.
   Desktop rebuilds the intro/bio + sticky presale layout (below). */
/* moja filozofia + predstavenie kolekcie share this wrapper so the presale link is sticky
   through BOTH. Mobile: plain column, presale ordered between the two sections (centered). */
.omne-philo { display: flex; flex-direction: column; }   /* mobile: moja-filozofia + presale (order below); kolekcia is a sibling AFTER this wrapper */
.omne-about { padding: 160px var(--gutter) 0; display: flex; flex-direction: column; }   /* mobile pad-top 160 (Jan) */
.omne-about__top { display: flex; flex-direction: column; gap: 40px; }
.omne-about__intro { font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: var(--tracking); }
.omne-about__intro p { margin: 0 0 1.2em; }
.omne-about__intro p:last-child { margin-bottom: 0; }
.omne-about__bio-row { margin-top: 80px; display: flex; flex-direction: column; }
.omne-about__bio { font-weight: 500; font-size: 30px; line-height: 1.2; letter-spacing: var(--tracking); }
.omne-about__bio p { margin: 0 0 1.2em; text-indent: 90px; }
.omne-about__bio p:last-child { margin-bottom: 0; }
.omne-about__presale { order: 1; align-self: flex-start; margin-top: 40px; margin-left: var(--gutter); color: var(--color-black); }   /* mobile: between filozofia + kolekcia, left-aligned to the content gutter (Jan) */
.omne-about__img { margin-top: 50px; width: 282px; aspect-ratio: 327 / 440; }   /* mobile margin-top 50 (Jan); desktop 60 below */
.omne-about__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 3 — PREDSTAVENIE KOLEKCIE (Figma 94:70) — split into its own section */
.omne-kolekcia { padding: 140px var(--gutter) 0; display: flex; flex-direction: column; gap: 40px; }
.omne-kolekcia__lead { margin: 0; font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: var(--tracking); }
.omne-kolekcia__body { font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: var(--tracking); }
.omne-kolekcia__body p { margin: 0 0 1.2em; }
.omne-kolekcia__body p:last-child { margin-bottom: 0; }
.omne-kolekcia__body .u-red { color: var(--color-red); }

/* 3 — VÝSTAVY: the shared s-vystavy <section> is used directly on O-mne (no wrapper div);
   scope the O-mne spacing to `.omne .s-vystavy` so the HP výstavy is unaffected. */
.omne .s-vystavy { padding-top: 240px; padding-bottom: 90px; }   /* desktop top 240 (Jan); mobile bottom 90 so výstavy→mood gap = 90+80 = 170 (Jan); desktop bottom re-asserted to 170 below */

/* 4 — MOOD */
.omne-mood { padding: 80px var(--gutter) 90px; }   /* mobile top 80 (výstavy→mood gap 90+80 = 170, Jan); bottom 90 unchanged */
/* MOBILE (Figma 4:2974): vertical stack with 3 full-width divider lines. Order:
   [top line] museum+caption (left) → red-dress (right) → [line] → blue (left) → text →
   face+caption (left) → všetky (right) → [bottom line]. The __col wrappers collapse
   (display:contents) so their children flatten into one column and reorder via `order`.
   DESKTOP (below) rebuilds these as the absolute-positioned collage. */
.omne-mood__inner { display: flex; flex-direction: column; align-items: stretch; }
.omne-mood__col { display: contents; }
.omne-mood__fig { margin: 0; display: flex; flex-direction: column; gap: 30px; }
.omne-mood__fig img, .omne-mood__img img { width: 100%; height: auto; object-fit: cover; display: block; }
.omne-mood__rule { display: block; width: 100%; border-top: 1px solid var(--color-black); }
.omne-mood__rule--1 { order: 0; }                                                 /* top line */
.omne-mood__fig--01 { order: 1; width: 210px; }                                   /* museum + caption */
.omne-mood__fig--01 img { aspect-ratio: 210 / 192; }
.omne-mood__img--02 { order: 2; width: 192px; align-self: flex-end; margin-top: 80px; }  /* red-dress, right */
.omne-mood__img--02 img { aspect-ratio: 192 / 180; }
.omne-mood__rule--2 { order: 3; }                                                 /* line below red-dress */
.omne-mood__img--03 { order: 4; width: 320px; max-width: 100%; margin-top: 80px; }        /* blue */
.omne-mood__img--03 img { aspect-ratio: 320 / 310; }
.omne-mood__text { order: 5; margin: 140px 0 0; font-weight: 400; font-size: 16px; line-height: 1.25; letter-spacing: var(--tracking); }
.omne-mood__right { order: 6; margin-top: 80px; display: flex; gap: 30px; align-items: flex-start; }
.omne-mood__fig--04 { width: 144px; max-width: 145px; flex: none; }
.omne-mood__fig--04 img { aspect-ratio: 144 / 135; }
.omne-mood__caption { margin: 0; max-width: 185px; }
.omne-mood__all { order: 7; align-self: flex-end; margin-top: 140px; font-size: 16px; color: var(--color-black); }   /* mobile 16px (Jan); desktop 18px below */
.omne-mood__rule--3 { order: 8; margin-top: 20px; }                               /* bottom line */

/* 5 — CHANGE HISTORY (hover/focus swaps Default ↔ Second) */
.omne-change { padding: 120px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 80px; }
.omne-change__text { margin: 0; max-width: 335px; text-align: center; font-weight: 700; font-size: 18px; line-height: 1.3; text-transform: uppercase; letter-spacing: var(--tracking); color: var(--color-black); transition: color 1s ease; }
.omne-change.is-changed .omne-change__text { color: var(--color-red); }
.omne-change__media { position: relative; width: 262px; aspect-ratio: 350 / 460; }
.omne-change__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 1s ease; }
.omne-change__img--second { opacity: 0; }
/* Scroll into view → light cross-fade: the old (default) image fades OUT while the red
   (second) fades IN — "minulosť sa premieňa v súčasnosť" (JS adds .is-changed, once). */
.omne-change.is-changed .omne-change__img--default { opacity: 0; }
.omne-change.is-changed .omne-change__img--second { opacity: 1; }

/* 6 — KONTAKT */
.omne-kontakt { padding: 80px var(--gutter) 140px; display: flex; flex-direction: column; gap: 80px; }
.omne-kontakt__top { display: flex; flex-direction: column; gap: 40px; }
.omne-kontakt__row { display: flex; flex-direction: column; gap: 50px; }
.omne-kontakt__reach { margin: 0; font-weight: 500; font-size: 28px; line-height: 1.2; letter-spacing: var(--tracking); }
.omne-kontakt__reach a { color: var(--color-black); }
.omne-kontakt__social { display: flex; flex-direction: column; gap: 15px; }
.omne-kontakt__ig { font-weight: 500; font-size: 28px; line-height: 1.2; letter-spacing: var(--tracking); color: var(--color-black); }
.omne-kontakt__li { font-weight: 500; font-size: 16px; line-height: 1.3; text-transform: uppercase; letter-spacing: var(--tracking); color: var(--color-black); }
.omne-kontakt__details { display: flex; flex-direction: column; gap: 40px; }
.omne-kontakt__block { display: flex; flex-direction: column; gap: 20px; }
.omne-kontakt__dlabel { margin: 0; font-weight: 500; font-size: 16px; line-height: 1.25; letter-spacing: var(--tracking); }
.omne-kontakt__dbody { margin: 0; font-weight: 400; font-size: 16px; line-height: 1.25; letter-spacing: var(--tracking); }

/* ---- O MNE — desktop ---- */
@media (min-width: 769px) {
	/* 1 — HERO: layered (portrait centred, title left, labels bottom row) */
	/* hero content is centred within the full 960 frame INCLUDING the header band
	   (Figma), so cancel the .omne top padding for the hero only (header overlays it). */
	.omne-label { font-size: 18px; }   /* desktop (mobile 16) */
	.omne-hero { position: relative; height: 960px; margin-top: calc(-1 * var(--header-h)); padding: 0 var(--gutter-desktop); display: block; }
	.omne-hero__title { position: absolute; left: var(--edge-pad); top: calc(50% - 132px); width: 667px; font-size: 68px; line-height: 1.12; text-align: left; }
	/* Centered WITHOUT a transform (left/top offsets by half its size) so GSAP's pin can own
	   the transform for the ~140px sticky hold (see initOmnePortrait). */
	.omne-hero__portrait { position: absolute; left: calc(50% - 251px); top: calc(50% - 377px); width: 502px; aspect-ratio: 502 / 720; margin: 0; }
	/* Labels anchored to the VIEWPORT, not the 960px hero (client 2026-09-15): the row's
	   bottom edge sits 10 % above the viewport bottom on any screen height (13" MacBooks
	   included); max() keeps it inside the hero on very tall screens. */
	.omne-hero__labels { position: absolute; left: var(--col-x); right: var(--edge-pad); top: auto; bottom: max(calc(960px - 90lvh), 30px); width: auto; margin: 0; display: flex; justify-content: space-between; font-size: 18px; }
	.omne-hero__label { flex: none; }
	.omne-hero__label--c { text-align: center; }
	.omne-hero__label--r { text-align: right; max-width: 160px; }   /* desktop (Jan) */

	/* 2 — ABOUT */
	/* Wrapper is a grid: content (philosophy in row 1, collection in row 2) in col 1, the presale
	   link in col 2. The presale occupies ROW 1 only → position:sticky un-sticks at the END of the
	   omne-about section (not through kolekcia — Jan). Clicking it reveals the footer. */
	/* Moja filozofia (Figma 94:55): intro 28 (top) → bio 42 + sticky presale (right) → image. */
	.omne-philo { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; padding-inline: var(--edge-pad); }
	.omne-philo > .omne-about { grid-column: 1; grid-row: 1; padding-inline: 0; }
	.omne-about { display: block; padding-top: 20px; padding-bottom: 0; }
	.omne-about__top { display: block; }
	.omne-about__intro { max-width: 800px; margin-top: 40px; font-size: 28px; }   /* desktop (Jan; Figma 854) */
	.omne-about__bio-row { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 40px; margin-top: 140px; }
	.omne-about__bio { max-width: 800px; font-size: 42px; }   /* desktop (Jan; Figma 854) */
	.omne-about__bio p { text-indent: 245px; }   /* desktop (Jan; Figma 260) */
	.omne-about__presale { grid-column: 2; grid-row: 1 / 2; align-self: start; margin: 0; flex: none; white-space: nowrap; position: sticky; top: calc(var(--header-h) + 40px); font-size: 18px; }   /* sticky only within the omne-about row → un-sticks at the END of the omne-about section (Jan); opens the footer */
	.omne-about__img { margin-top: 60px; width: 327px; aspect-ratio: 327 / 440; }

	/* Predstavenie kolekcie (Figma 94:70) */
	.omne-kolekcia { padding: 140px var(--edge-pad) 0; }   /* now a sibling of .omne-philo → carry the edge padding itself (aligns with moja-filozofia) */
	.omne .s-vystavy { padding-bottom: 170px; }   /* desktop: restore 170 (mobile uses 90 for the tighter výstavy→mood gap) — placed AFTER the base .omne .s-vystavy so it wins */
	.omne-kolekcia__lead { max-width: 854px; font-size: 28px; }
	.omne-kolekcia__body { max-width: 854px; font-size: 28px; }


	/* 4 — MOOD */
	/* Mood — TOP image row and the BOTTOM text block occupy the SAME grid cell so the
	   images overlay the top divider line (Figma 4:2555 layered look). */
	.omne-mood { padding: 140px var(--gutter-desktop); }
	/* Desktop reproduces Figma's exact vertical structure (node 4:2555) so the three full-width
	   divider lines land precisely as designed — crossing UNDER the images (images sit above the
	   lines via z-index) and never through any text. Horizontal placement follows the left-edge
	   rule: left items at x0, right column on the line at x770. Elements are absolutely placed;
	   the __col wrappers collapse (display:contents) so their children position against __inner.
	   Origin (y0) = top of the top images. */
	.omne-mood__inner { position: relative; height: 690px; }
	.omne-mood__col { display: contents; }
	.omne-mood__fig, .omne-mood__img, .omne-mood__text, .omne-mood__right, .omne-mood__all { position: absolute; z-index: 1; }
	.omne-mood__fig--01 { left: 0; top: 0; width: 210px; }
	.omne-mood__img--02 { left: 394px; top: 50px; width: 192px; }   /* red-dress (Jan) */
	.omne-mood__img--03 { left: 770px; top: -80px; width: 320px; max-width: none; }   /* blue (Jan) */
	.omne-mood__text  { left: 0; top: 360px; width: 590px; max-width: 590px; }   /* (Jan) */
	.omne-mood__right { left: 770px; top: 450px; width: 610px; gap: 30px; }
	.omne-mood__fig--04 { position: relative; top: -60px; width: 192px; max-width: none; }   /* desktop face 192 (mobile 144); nudged up (Jan) */
	.omne-mood__fig--04 img { aspect-ratio: 192 / 180; }
	.omne-mood__caption { position: relative; top: -60px; width: 190px; max-width: none; }   /* align its top with fig--04 (also nudged -60) (Jan) */
	.omne-mood__all { right: 0; top: 545px; align-self: auto; font-size: 18px; color: var(--color-black); }   /* 30px under the last mood divider line (Jan); desktop keeps 18px */
	/* Full-width dividers (Figma Line 107/108/109) — behind the images (z-index 0). */
	.omne-mood__rule { display: block; position: absolute; left: 0; right: 0; z-index: 0; border-top: 1px solid var(--color-black); }
	.omne-mood__rule--1 { top: 130px; }   /* red-dress top / blue mid / museum lower */
	.omne-mood__rule--2 { top: 310px; }   /* red-dress + blue bottom */
	.omne-mood__rule--3 { top: 630px; }   /* face bottom, above "všetky produkty" */

	/* 5 — CHANGE */
	.omne-change { padding: 140px var(--gutter-desktop); }
	.omne-change__text { max-width: 441px; }
	.omne-change__media { width: 350px; }

	/* 6 — KONTAKT */
	.omne-kontakt { padding: 140px var(--gutter-desktop) 200px; gap: 80px; }   /* desktop pad-bottom 200 (Jan) */
	.omne-kontakt__row { flex-direction: row; justify-content: space-between; align-items: flex-start; }
	.omne-kontakt__reach { font-size: 42px; }
	.omne-kontakt__social { align-items: flex-end; text-align: right; }
	.omne-kontakt__ig { font-size: 42px; }
	.omne-kontakt__details { flex-direction: row; gap: 113px; max-width: 753px; }
	.omne-kontakt__block:first-child { width: 326px; }
	.omne-kontakt__block:last-child { width: 314px; }
}

/* ============================================================
   Ultrawide content lock — SITE-WIDE (Figma responsive tab 29:71)
   Backgrounds stay full-bleed; content caps at 1624 centred (margins grow
   past ~1684px viewport). --edge-pad uses 100% (scrollbar-aware) so it aligns
   with the .dielo/.shop__grid/.container (margin-inline:auto) lock exactly.
   ============================================================ */
@media (min-width: 769px) {
	:root {
		--edge-pad: max(var(--gutter-desktop), calc((100% - 1624px) / 2));
		/* Header name + open-menu links sit a FIXED gap in from the locked content edge.
		   The name must be exactly 193px from the MENU button (Jan) → MENU renders ~80px
		   wide at the edge, so name/links start at edge-pad + 80 + 193 = edge-pad + 273.
		   Holds at every width (edge-pad varies, MENU width is constant). */
		--col-x: calc(var(--edge-pad) + 273px);
	}
	.site-header__bar,
	.hero,
	.s-sub, .s-private, .s-produkty, .s-edicia, .s-vystavy,
	.omne-hero, .omne-philo, .omne-mood, .omne-change, .omne-kontakt {
		padding-inline: var(--edge-pad);
	}
	/* absolutely-positioned bits that must follow the same content edge */
	.hero__foot { left: var(--edge-pad); right: var(--edge-pad); }
}

/* ============================================================
   Legal / GDPR pages (Figma Obchod 4:4148 / GDPR 4:3710)
   Sidebar nav + WYSIWYG content. Everything DM Sans 16px.
   ============================================================ */
.legal { background: var(--color-canvas); color: var(--color-black); padding: calc(var(--header-h) + 40px) var(--gutter) 80px; display: flex; flex-direction: column; gap: 50px; }
.legal__nav { display: flex; flex-direction: column; gap: 40px; }
.legal__nav-list { display: flex; flex-direction: column; gap: 10px; }
.legal__nav-link { font-weight: 500; font-size: 16px; line-height: 1.25; letter-spacing: var(--tracking); color: var(--color-black); }
.legal__nav-link.is-current { color: var(--color-red); }
.legal__nav-link:hover { color: var(--color-red); }
/* Cross-section link (Figma 4:3924 "Button-Faq"): DM Sans Medium 16px black, no underline,
   real chevron SVG (node 4:3927) pointing right — NOT an › entity. */
.legal__cross { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-weight: 500; font-size: 16px; line-height: 1.25; letter-spacing: var(--tracking); text-decoration: none; color: var(--color-black); }
.legal__cross-icon { flex: none; height: 10px; width: auto; }
.legal__title { margin: 0 0 24px; font-weight: 700; font-size: 18px; line-height: 1.25; text-transform: uppercase; letter-spacing: var(--tracking); }   /* only the main title is 18px; section headings (h3) are 16px */
.legal-content { font-weight: 400; font-size: 16px; line-height: 1.25; letter-spacing: var(--tracking); }
.legal-content h3 { margin: 24px 0 12px; font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: var(--tracking); }
/* Letter-marked sub-labels (A)–F) in "Zásady spracúvania" §3): bigger gap above than below to separate them from the previous block. Same size/weight as body (Figma). */
.legal-content h4 { margin: 40px 0 12px; font-weight: 400; font-size: 16px; line-height: 1.25; letter-spacing: var(--tracking); }
.legal-content p { margin: 0 0 12px; }
.legal-content ul { margin: 0 0 12px; padding-left: 1.2em; list-style: disc; }
.legal-content li { margin: 0 0 15px; }
/* Inline text links get the site's redraw-on-hover underline (like every other link), but keep
   the normal body weight/case (unlike .link-underline, which is bold uppercase button style). */
.legal-content a { display: inline-block; position: relative; color: inherit; text-decoration: none; padding-bottom: 2px; }
.legal-content a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: 0 50%; }
@media (hover: hover) { .legal-content a:hover::after, .legal-content a:focus-visible::after { animation: underline-redraw 0.75s ease forwards; } }
/* Section headings (uppercase red) — e.g. the FAQ sections (Figma 4:4539). */
.legal-content h2 { margin: 40px 0 16px; font-weight: 700; font-size: 16px; line-height: 1.25; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--color-red); }
.legal-content h2:first-child { margin-top: 0; }
/* FAQ uses standard legal styling: h3 = category headings (no bullet/indent), questions are
   bold <strong> inside <ul><li> (disc bullet from .legal-content ul), answers follow after <br>. */

@media (min-width: 769px) {
	.legal { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 40px; padding: calc(var(--header-h) + 60px) var(--edge-pad) 130px; }
	.legal__nav { width: 347px; flex: none; position: sticky; top: calc(var(--header-h) + 60px); }
	.legal__body { width: 853px; flex: none; }
}

/* ============================================================
   CART (custom wrapper around the WooCommerce Cart BLOCK) — Figma 75:83 / 79:538 / 80:613
   ============================================================ */
.simi-cart { padding: 30px 0 60px; color: var(--color-black); font-family: var(--font-body); }   /* no L/R padding — the parent .container already provides the gutter (avoids double inset / logo misalign) */
.simi-cart__title { margin: 0 0 30px; font-weight: 600; font-size: 46px; line-height: 1.12; text-transform: uppercase; letter-spacing: var(--tracking); color: var(--color-black); }
.simi-cart__lead { margin: 0; max-width: 251px; font-weight: 500; font-size: 20px; line-height: 1.12; }
.simi-cart__back { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 16px; line-height: 1.25; color: var(--color-black); }
.simi-cart__back-icon { flex: none; }
.simi-cart__presale { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.simi-cart__presale-text { margin: 0; max-width: 507px; font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: var(--tracking); text-transform: uppercase; }   /* whole text uppercase (client 2026-09-15, SK+EN); box 507 per frame */
/* Red "privátny predpredaj" is a link → opens the footer (same as "Prihlásiť sa"); inherits the text style, hover = cursor only. */
.simi-cart__presale-link { color: var(--color-red); text-decoration: none; cursor: pointer; }
.simi-cart__presale-btn { font-weight: 700; font-size: 16px; line-height: 1.3; text-transform: uppercase; letter-spacing: var(--tracking); color: var(--color-black); }

/* Empty state (Figma 80:613): heading+lead, back-link 40px below, presale block far below. */
.simi-cart--empty { display: flex; flex-direction: column; align-items: flex-start; }
.simi-cart--empty .simi-cart__intro { display: flex; flex-direction: column; gap: 30px; }
.simi-cart--empty .simi-cart__back { margin-top: 40px; }
.simi-cart--empty .simi-cart__presale { margin-top: 180px; }

/* Filled: heading, block cart, then (below the table) the "Pokračovať v nákupe" link + shipping note. */
.simi-cart__block { margin-top: 24px; }
/* When the last item is removed client-side the WC block briefly renders its own default empty
   cart; hide it so it doesn't flash before initCartEmptyReload() reloads to our custom design. */
.simi-cart--filled .wp-block-woocommerce-empty-cart-block { display: none !important; }
/* Mobile: stack "Continue shopping" + the shipping note under each other (client
   2026-09-15: don't cram them on one wrapping line, esp. in EN). Desktop rejoins. */
.simi-cart__foot { margin-top: 30px; margin-bottom: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.simi-cart__ship { margin: 0; font-weight: 500; font-size: 16px; line-height: 1.25; color: var(--color-red); }

/* Min 14px everywhere in the block cart (WC default is 13px) + DM Sans + black. */
.simi-cart .wp-block-woocommerce-cart,
.simi-cart .wc-block-cart { font-family: var(--font-body); color: var(--color-black); }
.simi-cart .wc-block-cart :is(th, td, p, a, label, .wc-block-components-product-name,
.wc-block-formatted-money-amount, .wc-block-components-totals-item__label,
.wc-block-components-totals-item__value, .wc-block-cart__totals-title,
.wc-block-components-product-metadata, .wc-block-components-panel__button,
.wc-block-components-quantity-selector__button, .wc-block-components-quantity-selector__input,
.wc-block-components-totals-shipping__via, .wc-block-components-product-badge,
.wc-block-cart-item__total-price-and-sale-badge-wrapper, .wc-block-components-order-summary-item__description) { font-size: 14px; }
.simi-cart .wc-block-components-product-name { font-size: 14px !important; font-weight: 500 !important; }   /* stubborn WC em-sizing holdout; MEDIUM not bold (client 2026-09-16, Figma cart) */
/* Cart column header on MOBILE (WooCommerce hides it on small screens; the client wants it there
   too, 2026-09-17): a simple flex row — PRODUKT left, CENA SPOLU right, underline — decoupled from
   the table columns (which don't line up on the stacked mobile layout). Desktop keeps WC's default. */
@media (max-width: 768px) {
	.simi-cart .wc-block-cart-items__header { display: flex !important; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--color-black); padding-bottom: 12px; margin-bottom: 4px; }
	.simi-cart .wc-block-cart-items__header th { padding: 0 !important; }
	.simi-cart .wc-block-cart-items__header-product { display: none !important; }
	.simi-cart .wc-block-cart-items__header-image { text-align: left; }
	.simi-cart .wc-block-cart-items__header-total { text-align: right; white-space: nowrap; }
}
/* Summary heading "ZHRNUTIE KOŠÍKA" */
.simi-cart .wc-block-cart__totals-title { font-weight: 700; letter-spacing: var(--tracking); text-transform: uppercase; }
/* Missing period on the order-note toggle label (client 2026-09-17). The block-checkout label is
   client-rendered (React) → append the "." via CSS so we don't fight React's re-render. Scoped to
   the add-note block only (the checkbox label class is shared by other checkboxes). SK + EN. */
.wc-block-checkout__add-note .wc-block-components-checkbox__label::after { content: "."; }

/* Checkout / continue button (note 6): site-black, square, not WC's dark grey. */
.simi-cart .wc-block-cart__submit-button,
.simi-cart .wc-block-components-button.contained,
.simi-cart a.checkout-button {
	background: var(--color-black) !important;
	border-color: var(--color-black) !important;
	border-radius: 0 !important;
	color: var(--color-canvas) !important;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: var(--tracking);
}

/* Footer pinned to the viewport bottom on short carts (sticky-footer push-down, NOT position:sticky). */
body.woocommerce-cart { display: flex; flex-direction: column; min-height: 100lvh; }
body.woocommerce-cart .site-main { flex: 1 0 auto; }
body.woocommerce-cart .site-footer-mini { border-top: 0; }   /* note 7: no line */

@media (min-width: 769px) {
	.simi-cart { padding: 40px 0 80px; }   /* no L/R padding — the .container already locks to edge-pad (aligns with the header logo) */
	.simi-cart__title { font-size: 68px; line-height: 1.12; margin-bottom: 30px; }
	.simi-cart__lead { max-width: 462px; font-size: 24px; }
	.simi-cart--empty { padding-inline: 0; }   /* empty cart aligns to the container gutter (no extra edge-pad) — Figma 79:538 */
	.simi-cart--empty .simi-cart__presale { margin-top: 200px; }
	.simi-cart__presale-text { max-width: 507px; font-size: 18px; }   /* SK box = Figma 79:538 (507; was 446 → text looked cramped, client 2026-09-16) */
	/* EN copy is longer — its Figma text box is 534px, keeps the designed wrap */
	:lang(en) .simi-cart__presale-text { max-width: 534px; }
	.simi-cart__presale-btn { font-size: 18px; }
	.simi-cart__foot { margin-bottom: 0; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 20px; }   /* desktop: back to one row; 30px bottom gap is mobile-only */
}
/* The foot is moved by JS into .wc-block-cart__main (the products column) so it inherits the table's
   width naturally — no calc, no fixed widths. Full-width row inside that column: link left, ship right. */
.wc-block-cart__main > .simi-cart__foot { width: 100%; }

/* Cart, mobile: lift the whole screen to ~30px under the fixed header (the generic page container
   reserves ~110px). The cart's own 30px top padding then gives the ~30px gap. Desktop unchanged. */
@media (max-width: 768px) {
	body.woocommerce-cart .container { padding-top: var(--header-h) !important; }   /* beat page.php inline calc(header+40) */
}

/* ============================================================
   CHECKOUT (WooCommerce Checkout BLOCK) — grafička notes 75:194/219/222/229/195
   ============================================================ */
/* Page title "Checkout" H1 → same type as the cart heading (.simi-cart__title):
   DM Sans SemiBold, uppercase, 46px mobile / 68px desktop (override .u-display serif). */
body.woocommerce-checkout h1.u-display {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 46px;
	line-height: 1.12;
	text-transform: uppercase;
	letter-spacing: var(--tracking);
	color: var(--color-black);
}
@media (min-width: 769px) {
	body.woocommerce-checkout h1.u-display { font-size: 68px; }   /* match cart heading on desktop */
}

/* DM Sans + min 14px (note 2 covers cart AND checkout). */
.wc-block-checkout, .wp-block-woocommerce-checkout { font-family: var(--font-body); color: var(--color-black); }
.wc-block-checkout :is(input, select, textarea, label, p, span, a, button,
.wc-block-components-text-input, .wc-block-components-checkout-step__title,
.wc-block-components-totals-item__label, .wc-block-components-totals-item__value) { font-size: 14px; }

/* Note 4: remove ALL border radius (square) — fields, selects, boxes, buttons. Keep radio dots round. */
.wc-block-checkout :is(input, select, textarea,
.wc-block-components-text-input, .wc-block-components-address-form input,
.wc-block-components-button, .wc-block-components-checkout-place-order-button,
.wc-block-components-radio-control-accordion-option, .wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__package, .wc-block-components-totals-coupon,
.wc-block-components-address-card, .wc-blocks-components-select__container, .wc-blocks-components-select__select,
.wc-block-checkout__payment-method, .wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block) { border-radius: 0 !important; }
/* WC draws the payment radio-group's option borders on ::after pseudo-elements with a 4px radius
   (the last option = "Dobierka" got the rounded bottom) — square those too (radio dots stay round). */
.wc-block-checkout :is(.wc-block-components-radio-control, .wc-block-components-radio-control-accordion-option, .wc-block-components-radio-control__option)::after { border-radius: 0 !important; }
.wc-block-checkout input[type="radio"], .wc-block-checkout .wc-block-components-radio-control__input { border-radius: 50% !important; }

/* Checkboxes (Figma 75:210): 15×15px, OFF-LIGHT fill, 1px solid black, square. The WC checkmark SVG is already 15px → overlays fine. */
.wc-block-checkout .wc-block-components-checkbox__input[type="checkbox"] {
	position: relative;
	width: 15px;
	height: 15px;
	min-width: 15px;
	box-sizing: border-box;
	background: var(--color-offlight) !important;
	border: 1px solid var(--color-black) !important;
}
/* Checked = a 7×7 red square centred in the box (like the newsletter consent, Figma 4:610) — NOT WC's tick. */
.wc-block-checkout .wc-block-components-checkbox__mark { display: none !important; }
.wc-block-checkout .wc-block-components-checkbox__input[type="checkbox"]::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 7px;
	height: 7px;
	background: var(--color-black);   /* checkout is all-black → black check square (Jan; cart/newsletter stay red) */
	opacity: 0;
}
.wc-block-checkout .wc-block-components-checkbox__input[type="checkbox"]:checked::before { opacity: 1; }
/* Required consent = a server-enforced additional checkout field (#order-simi-suhlas).
   Hide WooCommerce's own Terms block (passive, client-side only) to avoid duplicate text. */
.wc-block-checkout__terms, .wp-block-woocommerce-checkout-terms-block { display: none !important; }
/* Hide WooCommerce's "Vytvárate objednávku ako hosť." guest notice under the e-mail field (Jan 2026-09-16). */
.wc-block-checkout__guest-checkout-notice { display: none !important; }
/* Consent text + links to VOP + GDPR (Figma 75:210): black, bold links. */
.wc-block-checkout .simi-terms { color: var(--color-black); }
.wc-block-checkout .simi-terms a { color: var(--color-black); font-weight: 700; text-decoration: none; }

/* Note 6: place-order button — site black, square, 60% opacity until all required fields are filled. */
.wc-block-components-checkout-place-order-button {
	background: var(--color-black) !important;
	border-color: var(--color-black) !important;
	color: var(--color-canvas) !important;
	font-family: var(--font-body);
	letter-spacing: var(--tracking);
	opacity: .6;
	transition: opacity .2s ease;
}
body.simi-checkout-ready .wc-block-components-checkout-place-order-button { opacity: 1; }

/* Required-field asterisk (added via JS) — red. */
.simi-req-star { color: var(--color-black); margin-left: 2px; }   /* checkout is all-black (Jan) */

/* Note 5: phone REQUIRED (forced via WC option filter). Label reads
   "Telefónne číslo * (napr. +421 900 123 456)" — hint span in 30% black, same line (Figma 75:229). */
.simi-phone-hint { color: rgba(19, 17, 20, .3); font-weight: 400; }

/* Consent section (Jan): hide its step heading ("Ďalšie informácie o objednávke") — just the
   checkbox — and reorder the order section so the order NOTE is above the consent, and the consent
   sits right above the "Zadať objednávku" button. The form is block-flow → flex it and order the
   trailing blocks (the earlier steps keep DOM order at order:0). */
.wc-block-checkout__order-fields .wc-block-components-checkout-step__heading-container { display: none !important; }
.wc-block-checkout__form { display: flex; flex-direction: column; }
.wc-block-checkout__form > .wc-block-checkout__order-notes { order: 1; }
.wc-block-checkout__form > .wc-block-checkout__order-fields { order: 2; }
.wc-block-checkout__form > .wc-block-checkout__terms       { order: 3; }
.wc-block-checkout__form > .wc-block-checkout__actions     { order: 4; }

/* ============================================================
   THANK YOU / order-received (Figma 78:241 / 78:256, Jan's 11 points)
   ============================================================ */
.woocommerce-order { font-family: var(--font-body); color: var(--color-black); font-size: 16px; }   /* base; nothing under 16px (Jan, was 14) */

/* (1) big title + lead (Figma 78:241) — 46px mobile / 68px desktop like the cart heading
   (68px "OBJEDNÁVKA" ink-overflowed the 390px viewport → horizontal scroll) */
.simi-thankyou__title { margin: 0 0 30px; font-weight: 600; font-size: 46px; line-height: 1.12; text-transform: uppercase; letter-spacing: var(--tracking); }
@media (min-width: 769px) {
	.simi-thankyou__title { font-size: 68px; }
}
.woocommerce-order .simi-thankyou__lead, .simi-cancelled .simi-thankyou__lead { margin: 0; max-width: 420px; font-weight: 500; font-size: 24px; line-height: 1.2; }

/* (3) bump any WC sub-16px text up to 16px (WC's em sizes are more specific → !important) */
.woocommerce-order ul.order_details li,
.woocommerce-order .iban,
.woocommerce-order .shipped_via,
.woocommerce-order small { font-size: 16px !important; }
/* order-overview values (<strong>: číslo, dátum, e-mail, suma, platba) → 18px uppercase (Jan) */
.woocommerce-order ul.order_details li strong { font-size: 18px !important; text-transform: uppercase; }
/* BACS bank-details heading ("Detaily účtu") → Medium 24px, 30px above (Jan) */
.woocommerce-order .wc-bacs-bank-details-heading { margin-top: 30px; font-weight: 500; font-size: 24px; }

/* (4)+(10) body copy — BACS note + billing/shipping addresses — regular weight */
.woocommerce-order p,
.woocommerce-order address,
.woocommerce-order .woocommerce-customer-details :is(td, address, p) { font-weight: 400; }

/* order-details section (Podrobnosti objednávky) — 80px above (Jan) */
.woocommerce-order .woocommerce-order-details { padding-top: 80px; }
/* (5) order-details title / (9) address column title → Medium 24px */
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title { font-weight: 500; font-size: 24px; }

/* (6) every heading gets 30px below (h3 excluded — e.g. BACS "Detaily účtu" shouldn't get the big gap) */
.woocommerce-order :is(h1, h2, .woocommerce-order-details__title, .woocommerce-column__title) { margin-bottom: 30px; }

/* (2) order overview (číslo/dátum/…) sits 30px under the lead + 30px below (ul.order_details beats WC's rule) */
.woocommerce-order ul.order_details { margin-top: 30px; margin-bottom: 30px; }

/* (8) order-table header cells (Produkt / Cena spolu) → Medium 24px */
.woocommerce-order .woocommerce-table--order-details thead th { font-weight: 500; font-size: 24px; }

/* (7) square tables + the billing/shipping address box — no border radius anywhere */
.woocommerce-order table,
.woocommerce-order table th,
.woocommerce-order table td,
.woocommerce-order .woocommerce-customer-details address { border-radius: 0 !important; }

/* "Ďalšie informácie" (grafička feedback): the consent field is dropped server-side
   (show_in_order_confirmation=false); our own section renders ONLY when the customer left
   an order note — heading Medium 24 + the note in a bordered box (like the address boxes). */
.woocommerce-order .simi-thankyou__extra h2 { font-weight: 500; font-size: 24px; }
.woocommerce-order .simi-thankyou__note { border: 1px solid rgba(19, 17, 20, 0.2); padding: 18px 20px; font-weight: 400; }
/* the same note also renders as the LAST row of the order table — hide the duplicate
   (body class set only when a note exists, so no-note orders keep their last row) */
.simi-has-note .woocommerce-table--order-details tfoot tr:last-child { display: none; }

/* gap between "Simona Čekovská:" and the IBAN line → 30px (grafička feedback) */
.woocommerce-order .wc-bacs-bank-details-account-name { margin: 0 0 30px; }
.woocommerce-order ul.bacs_details { margin-top: 0; }

/* (11) back-to-shop link spacing */
.simi-thankyou__back { margin-top: 50px; }
/* Top back-link under the lead (client design 2026-09-15, 2_Sekcia: lead→link gap 67px)
   — on the received, failed and cancelled views. */
.simi-thankyou__back--top { margin: 67px 0 0; }
.simi-cancelled { padding-bottom: 100px; }
/* FAILED payment view (client 2026-09-15) — matches the order-received pattern;
   the pay CTA + the WC "Akcia" row buttons use the site's underline-link style
   instead of WP's gray pills. */
.simi-thankyou__failed-actions { margin: 30px 0 0; }
.simi-thankyou__pay { font-size: 18px; color: var(--color-black); }
.simi-thankyou__pay:hover { color: var(--color-red); }
/* !important beats the wc-blocks/wp-element-button component styles that load after the theme. */
.woocommerce-order .order-actions-button {
	background: none !important; border: 0 !important; border-radius: 0 !important;
	padding: 0 0 3px !important; margin: 0 24px 0 0 !important;
	font-weight: 700 !important; font-size: 16px !important; line-height: 1.3 !important;
	text-transform: uppercase; letter-spacing: var(--tracking);
	color: var(--color-black) !important;
	text-decoration: underline !important; text-underline-offset: 5px;
}
.woocommerce-order .order-actions-button:hover { background: none !important; color: var(--color-red) !important; }

/* ============================================================
   Pre-sale announcement bar (client 2026-09-16) — fixed above the header,
   infinite RTL marquee (~35px/s, linear, seamless). Only when .has-annbar.
   ============================================================ */
:root { --annbar-h: 36px; }
.simi-annbar {
	position: fixed; inset: 0 0 auto 0; z-index: 1100; height: var(--annbar-h);
	display: flex; align-items: center; overflow: hidden;
	background: var(--color-red); color: var(--color-canvas);
	text-decoration: none; white-space: nowrap;
}
.simi-annbar__track { display: inline-flex; flex: none; will-change: transform; animation: simi-annbar-scroll 120s linear infinite; }
.simi-annbar__seq { display: inline-block; font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: var(--tracking); text-transform: uppercase; padding-right: 0; }
.simi-annbar__dot { margin: 0 10px 0 24px; }
@keyframes simi-annbar-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .simi-annbar__track { animation: none; } }
/* Push the fixed header + anchor offset down by the bar height when present. */
.has-annbar .site-header { top: var(--annbar-h); }
.has-annbar { scroll-padding-top: calc(var(--header-h) + var(--annbar-h) + 24px); }
.has-annbar body { padding-top: var(--annbar-h); }

/* Pre-sale countdown INSIDE the private-sale box. Exact Figma layout — MOBILE 358:593, DESKTOP
   358:344 — with EXPLICIT gaps (not space-between): the two interior gaps are asymmetric. DM Sans
   (body font), not the display serif. Values are the Figma element offsets; verified via figma-parity. */
.s-private--presale .s-private__box { justify-content: flex-start; padding-top: 46px; padding-bottom: 1px; }   /* +4/-12 removed the base section padding stacking (figma-parity) */
.s-private--presale .s-private__inner { flex: 0 0 auto; justify-content: flex-start; gap: 0; }
.s-private__countdown-block { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; }   /* lead → countdown (mobile 30) */
.s-private--presale .s-private__cta { margin-top: 97px; }    /* countdown → newsletter (mobile) */
.s-private--presale .s-private__big { margin-top: 160px; line-height: 1.1; }   /* odoberať → big word; mobile big-word lh (Figma 50.6/46) */
.s-private--presale .s-private__text { font-size: 18px; line-height: 1.3; }   /* mobile newsletter = Figma 18px @ lh130% (still 5 lines) */
.s-private__lead { margin: 0; max-width: 434px; font-weight: 500; font-size: 16px; line-height: 1.25; letter-spacing: var(--tracking); text-align: center; color: var(--color-red); }   /* box width Figma 358:344 = 434 */
/* „novej kolekcie" / „new collection" inline CTA → Products: normal weight/case, persistent underline, redraw on hover. */
.s-private__lead-link { display: inline-block; position: relative; color: inherit; padding-bottom: 2px; }
.s-private__lead-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: 0 50%; }
@media (hover: hover) { .s-private__lead-link:hover::after, .s-private__lead-link:focus-visible::after { animation: underline-redraw 0.75s ease forwards; } }
.s-private__countdown { margin: 0; font-weight: 600; font-size: 62px; line-height: 1.1; letter-spacing: var(--tracking); text-align: center; color: var(--color-red); font-variant-numeric: tabular-nums; }   /* mobile 62, lh 68/62 */
@media (min-width: 769px) {
	.s-private--presale .s-private__box { min-height: 0; padding-top: 51px; padding-bottom: 65px; }   /* auto-height (not fixed 790) so the bottom gap stays exactly 65px — the countdown's line-box is shorter than Figma's inflated bbox, and a fixed height would leak that ~17px into the bottom whitespace */
	.s-private__countdown-block { gap: 29px; }                 /* lead → countdown (desktop) */
	.s-private--presale .s-private__cta { margin-top: 70px; }   /* countdown → newsletter (desktop) */
	.s-private--presale .s-private__big { margin-top: 160px; line-height: 1.2; }   /* desktop big-word lh 81.6/68 */
	.s-private--presale .s-private__text { line-height: 1.3; }  /* desktop newsletter lh 23.4/18 */
	.s-private__countdown { font-size: 100px; line-height: 1.3; }   /* desktop 100, lh 130/100 */
}

/* Pre-sale checkout e-mail gate */
.simi-presale-gate { margin: 12px 0 0; font-size: 14px; line-height: 1.4; letter-spacing: var(--tracking); font-weight: 600;
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 3px; }   /* Figma 358:106: icon→label 3px, all DM Sans 600/14 */
.simi-presale-gate__icon { display: inline-flex; flex: none; }
.simi-presale-gate__icon svg { display: block; }
.simi-presale-gate__label { font-weight: 600; text-transform: uppercase; }
.simi-presale-gate__msg { margin-left: 2px; }   /* label→message = 3px gap + 2px = 5px (Figma) */
.simi-presale-gate[data-mode="confirmed"] .simi-presale-gate__msg { color: #00863a; }
.simi-presale-gate[data-mode="error"] .simi-presale-gate__msg { color: var(--color-red); }
.simi-presale-gate__cta { font-weight: 700; text-transform: uppercase; color: inherit; text-decoration: underline; cursor: pointer; }
/* During the window, block the place-order button until access is confirmed. */
.simi-presale-block .wc-block-components-checkout-place-order-button { opacity: .55; pointer-events: none; }

/* ============================================================
   Pre-sale badges + sold-out (client 2026-09-16)
   ============================================================ */
/* Static red badge — shop card (under the name) + detail hero (below the price). Figma pre-sale page. */
.simi-psbadge { display: inline-flex; flex-direction: column; align-self: flex-start; margin-top: 8px;
	padding: 5px 10px; background: var(--color-red); color: var(--color-canvas);
	font-weight: 700; font-size: 12px; line-height: 1.25; letter-spacing: var(--tracking); text-transform: uppercase; }
/* Detail: badge lives in its own mobile grid row (below the price, above the buy actions).
   justify-self:start so the grid item hugs its content (168px in Figma) instead of stretching full-width. */
.dielo-hero .simi-psbadge { grid-area: badge; align-self: start; justify-self: start; margin-top: 24px; }
/* Desktop: badge is a flex item in .dielo-hero__cta-top — the 40px flex gap handles spacing.
   (This min-width rule follows the base rule above so it wins the cascade despite the earlier 769 block.) */
@media (min-width: 769px) { .dielo-hero .simi-psbadge { margin-top: 0; } }

/* Menu marquee pill next to „Produkty" */
.simi-psmenu { display: inline-flex; align-items: center; overflow: hidden; vertical-align: middle;
	width: 150px; height: 26px; margin-left: 14px; border-radius: 2px;
	background: var(--color-red); color: var(--color-canvas); text-decoration: none; }
.simi-psmenu__track { display: inline-flex; flex: none; will-change: transform; animation: simi-annbar-scroll 18s linear infinite; }
.simi-psmenu__seq { display: inline-block; white-space: nowrap; font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: var(--tracking); text-transform: uppercase; }
.simi-psmenu__dot { margin: 0 8px 0 16px; }
@media (prefers-reduced-motion: reduce) { .simi-psmenu__track { animation: none; } }

/* Cart / order-summary headline tag */
.simi-headline-tag { color: var(--color-black); font-weight: 500; text-transform: uppercase; white-space: nowrap; }   /* Figma 358:50: BLACK #131114, MEDIUM (w500), not red/bold */
@media (max-width: 768px) { .simi-headline-tag { display: block; white-space: normal; overflow: hidden; text-overflow: ellipsis; } }

/* Sold-out — product card (Figma 358:1530): a single F3F2F0 @ 70% veil over the WHOLE box
   (name, price, image, desc) with red „VYPREDANÉ"/„SOLD OUT" centred. pointer-events:none so
   the box stays fully clickable (client: whole box is a link). */
.shop-card--soldout .shop-card__inner { position: relative; }
/* F3F2F0 @ 70% veil over the WHOLE box (incl. photo); pointer-events:none so the box stays clickable. */
.shop-card--soldout .shop-card__inner::after { content: ""; position: absolute; inset: 0; z-index: 2;
	background: rgba(243, 242, 240, 0.7); pointer-events: none; }
/* „VYPREDANÉ" pinned 38.5px BELOW the artwork, centred (Figma 358:1530: img bottom → label = 38.5px). */
.shop-card__soldout { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 38.5px; z-index: 3;
	color: var(--color-red); font-weight: 700; font-size: 18px; letter-spacing: var(--tracking); text-transform: uppercase; white-space: nowrap;
	pointer-events: none; }

/* Sold-out — detail: text instead of buy actions. Figma 358:1258 → BLACK (not red). */
.dielo-hero__soldout { margin: 20px 0 0; color: var(--color-black); font-weight: 700; font-size: 18px; letter-spacing: var(--tracking); text-transform: uppercase; }
.simi-soldout .dielo-body__cart, .simi-soldout .dielo-imgtext__cart { display: none !important; }

/* ============================================================
   CookieYes banner — accent recolour (plugin blue → SIMI red)
   ============================================================ */
/* The plugin paints its accent (#1863DC, revisit bubble #0056A7) TWICE: a <style>
   block that script.js injects into <head> at runtime (so it lands after our
   stylesheet) AND inline style="" attributes on every button in the banner
   template. Both beat a plain theme rule, so every override below needs
   !important. The plugin's own CSS uses no !important anywhere, so nothing
   fights back. Colours are not editable in the plugin UI — this file is the
   single source of truth, and it survives plugin updates.
   Contrast: #E6240E vs #FFFFFF = 4.54:1 → WCAG AA for normal text. */

/* Solid buttons — „Prijať všetky" / „Odmietnuť všetky" (notice + preference centre).
   Both stay solid so reject keeps equal prominence with accept (GDPR). */
.cky-btn-accept,
.cky-btn-reject { background: var(--color-red) !important; border-color: var(--color-red) !important; color: var(--color-canvas) !important; }

/* Outlined buttons — „Prispôsobiť" (notice) / „Uložiť moje predvoľby" (preference centre) */
.cky-btn-customize,
.cky-btn-preferences { color: var(--color-red) !important; background: transparent !important; border-color: var(--color-red) !important; }

/* Inline links + „Zobraziť viac / menej" disclosure buttons */
.cky-notice-des a.cky-policy,
.cky-notice-des button.cky-policy,
.cky-preference-content-wrapper .cky-show-desc-btn,
button.cky-show-desc-btn:not(:hover):not(:active) { color: var(--color-red) !important; }

/* Category toggle — ON state */
.cky-switch input[type="checkbox"]:checked { background: var(--color-red) !important; }

/* Floating „revisit consent" bubble (only if that widget is switched on) */
.cky-btn-revisit-wrapper { background: var(--color-red) !important; }

/* Keyboard focus ring (plugin ships 2px solid #1863dc on every focusable) */
.cky-notice-des a.cky-policy:focus-visible,
.cky-notice-des button.cky-policy:focus-visible,
.cky-preference-content-wrapper .cky-show-desc-btn:focus-visible,
.cky-accordion-header .cky-accordion-btn:focus-visible,
.cky-preference-header .cky-btn-close:focus-visible,
.cky-switch input[type="checkbox"]:focus-visible,
.cky-footer-wrapper a:focus-visible,
.cky-btn:focus-visible,
.cky-consent-bar .cky-banner-btn-close:focus-visible { outline-color: var(--color-red) !important; }