/* ==========================================================================
   BeART TM Main CSS - Tactile Editorial Minimal (Part 1: Base & Header)
   Concept: Swiss High-End Typography x Agency
   ========================================================================== */

/**
 * Vlastný font — Inter variable (latin-ext subset, self-hosted).
 * Jeden variabilný woff2 pokrýva váhy 100–900 aj diakritiku slovenskú/českú.
 * Pôvod: Google Fonts / RSMS Inter Display; subset via fonttools.
 * Veľkosť 57 kB, žiadny build step — stačí @font-face.
 */
@font-face {
	font-family: 'Inter Latin';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2-variations');
}

/*
 * Náhradné písmo s rozmermi Interu: kým sa Inter (swap) načíta, text zaberá
 * rovnako miesta a po výmene nič neposkočí (CLS na pomalom mobile). Arial /
 * Liberation Sans / Arimo majú rovnaké metriky; hodnoty podľa hhea Interu
 * (ascent 1984, descent 494 / 2048) a priemernej šírky znakov.
 */
@font-face {
	font-family: 'Inter Fallback';
	font-style: normal;
	font-weight: 100 500;
	src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo');
	size-adjust: 107.12%;
	ascent-override: 90.44%;
	descent-override: 22.52%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Inter Fallback';
	font-style: normal;
	font-weight: 600 900;
	src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold');
	size-adjust: 107.12%;
	ascent-override: 90.44%;
	descent-override: 22.52%;
	line-gap-override: 0%;
}

/* ==========================================================================
   DIZAJNOVÉ TOKENY — dvojvrstvový model
   --------------------------------------------------------------------------
   Vrstva 1 (paleta) je nemenná: surové hodnoty značky, nikdy sa neprepínajú.
   Vrstva 2 (role) hovorí, na čo sa farba používa — a práve tá sa prepína
   medzi tmavým a svetlým režimom.
   Na konci bloku je vrstva spätnej kompatibility: pôvodné názvy
   (--beart-bg, --beart-text, --beart-cyan …) ostávajú, len ukazujú na role,
   takže stovky riadkov v ostatných súboroch netreba prepisovať.
   ========================================================================== */

:root {
	color-scheme: light;

	/* ---------- Vrstva 1: paleta (nemenná) ---------- */
	--beart-paper-000: #FFFFFF;
	--beart-paper-050: #FBFAFD;
	--beart-paper-100: #F7F4FD;
	--beart-paper-150: #F0EAFB;
	--beart-paper-200: #E7DEF8;

	--beart-ink-000: #000000;
	--beart-ink-700: #2A2634;
	--beart-slate-500: #57525F;
	--beart-slate-400: #7D7889;

	--beart-night-950: #09070F;
	--beart-night-900: #0E0B16;
	--beart-night-800: #17121F;
	--beart-night-700: #201A2B;
	--beart-white: #FFFFFF;

	/* Značková ružová → fialová. */
	--beart-blush-200: #F6C6EE;
	--beart-blush-300: #E9A4DE;
	--beart-lilac-300: #C2A4F7;
	--beart-violet-400: #8B5CF6;
	--beart-violet-350: #9B78F8;
	--beart-violet-400-rgb: 139, 92, 246;
	--beart-violet-600: #6D3BE4;
	--beart-violet-600-rgb: 109, 59, 228;
	--beart-violet-700: #5B2FD0;

	/* Podpis palety — používaj ho striedmo, na veľké plochy a CTA. */
	--beart-gradient-brand: linear-gradient(135deg, #F6C6EE 0%, #C2A4F7 52%, #8B5CF6 100%);
	--beart-gradient-brand-soft: linear-gradient(135deg, rgba(246, 198, 238, 0.30) 0%, rgba(194, 164, 247, 0.22) 52%, rgba(139, 92, 246, 0.16) 100%);

	/* ---------- Vrstva 2: role (prepínajú sa) ---------- */
	--beart-surface: var(--beart-paper-000);
	--beart-surface-raised: var(--beart-paper-050);
	--beart-surface-hover: var(--beart-paper-100);
	--beart-surface-inset: var(--beart-paper-100);
	--beart-surface-sunken: var(--beart-paper-050);
	--beart-surface-media: var(--beart-paper-150);

	/* Písmo je čisté čierne, nie sivé — to je zámer, nie prehliadnutie. */
	--beart-on-surface: var(--beart-ink-000);
	--beart-on-surface-strong: var(--beart-ink-000);
	--beart-on-surface-soft: var(--beart-ink-700);
	--beart-on-surface-muted: var(--beart-slate-500);

	--beart-accent: var(--beart-violet-600);
	--beart-accent-rgb: var(--beart-violet-600-rgb);
	--beart-accent-ink: var(--beart-white);
	/* Drobný akcentový text (odznaky, eyebrow) — v tmavom režime svetlejší, aby držal AA. */
	--beart-accent-text: var(--beart-accent);

	--beart-line: rgba(17, 12, 32, 0.10);
	--beart-line-strong: rgba(17, 12, 32, 0.24);
	--beart-line-dashed: rgba(17, 12, 32, 0.14);

	--beart-veil: rgba(109, 59, 228, 0.04);
	--beart-veil-strong: rgba(109, 59, 228, 0.07);
	--beart-mark: rgba(17, 12, 32, 0.26);
	--beart-mark-soft: rgba(17, 12, 32, 0.45);
	--beart-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, transparent 55%);

	--beart-shadow-card: 0 18px 40px rgba(46, 24, 92, 0.10);
	--beart-shadow-header: 0 10px 30px rgba(46, 24, 92, 0.08), 0 0 0 1px rgba(17, 12, 32, 0.03);
	--beart-shadow-drawer: -20px 0 50px rgba(46, 24, 92, 0.18);
	--beart-shadow-panel: 0 40px 80px rgba(46, 24, 92, 0.16), 0 0 0 1px rgba(17, 12, 32, 0.05);

	--beart-header-line: rgba(17, 12, 32, 0.10);
	--beart-panel-bg: var(--beart-paper-000);
	--beart-panel-line: rgba(17, 12, 32, 0.12);
	--beart-drawer-bg: var(--beart-paper-000);

	/* Prevrátené plochy (tmavé tlačidlo na bielom webe a naopak). */
	--beart-invert-bg: var(--beart-night-900);
	--beart-invert-fg: var(--beart-paper-000);

	--beart-spotlight: radial-gradient(
		520px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
		rgba(139, 92, 246, 0.14),
		transparent 55%
	);
	--beart-spotlight-sm: radial-gradient(
		460px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
		rgba(233, 164, 222, 0.18),
		transparent 55%
	);
	--beart-glow-soft: rgba(139, 92, 246, 0.06);
	--beart-glow-line: rgba(139, 92, 246, 0.32);
	--beart-glow-line-strong: rgba(109, 59, 228, 0.50);
	--beart-glow-ring: 0 0 18px rgba(139, 92, 246, 0.20);

	--beart-tint-magenta: rgba(233, 164, 222, 0.12);
	--beart-tint-green: rgba(139, 92, 246, 0.10);
	--beart-signal-ok: #1F7A4D;
	--beart-signal-alert: #C2185B;

	/* Pilierové akcenty sedia v post_content ako inline style, takže sa
	   nedajú prepísať premennou. Na bielom podklade sú pôvodné svietivé
	   odtiene nečitateľné, preto ich stmavíme filtrom. */
	--beart-pillar-shade: brightness(0.62) saturate(1.15);

	--beart-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E");

	--beart-toggle-sun: none;
	--beart-toggle-moon: inline-flex;

	/* ---------- Vrstva 3: spätná kompatibilita ---------- */
	--beart-bg: var(--beart-surface);
	--beart-card-bg: var(--beart-surface-raised);
	--beart-card-hover: var(--beart-surface-hover);
	--beart-cyan: var(--beart-accent);
	--beart-border: var(--beart-line);
	--beart-border-hover: var(--beart-line-strong);
	--beart-text: var(--beart-on-surface);
	--beart-muted: var(--beart-on-surface-muted);

	/* Čitateľná miera bežiaceho textu. Pixely (nie `ch`) schválne: pri fixnej
	   hodnote má aj veľký nadpis rovnakú šírku stĺpca ako odsek, takže okraje
	   sadnú presne pod seba. Zodpovedá `contentSize` v theme.json. */
	--beart-measure: 720px;

	--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
	--font-sans: 'Inter Latin', 'Inter Fallback', system-ui, -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
}

/* Svetlá téma je pevné východisko — nie systémové nastavenie. Tma sa zapne
   výhradne voľbou používateľa cez prepínač v hlavičke, ktorá sa ukladá do
   localStorage a nastavuje data-theme ešte pred vykreslením. */
:root[data-theme="dark"] {
	color-scheme: dark;

	--beart-surface: var(--beart-night-900);
	--beart-surface-raised: var(--beart-night-800);
	--beart-surface-hover: var(--beart-night-700);
	--beart-surface-inset: var(--beart-night-800);
	--beart-surface-sunken: var(--beart-night-950);
	--beart-surface-media: var(--beart-night-950);

	--beart-on-surface: #F6F4FB;
	--beart-on-surface-strong: var(--beart-white);
	--beart-on-surface-soft: #DED8EE;
	/* Svetlejšia tlmená šedá než slate-400: na zdvihnutých plochách
	   (night-800) drží ≥ 4,5:1 aj pre drobné meta texty (AA). */
	--beart-on-surface-muted: #8C8699;

	--beart-accent: var(--beart-violet-400);
	--beart-accent-rgb: var(--beart-violet-400-rgb);
	--beart-accent-ink: var(--beart-night-950);
	/* violet-400 má na night-800 len 4,3:1 — drobný text potrebuje ≥ 4,5:1. */
	--beart-accent-text: var(--beart-violet-350);
	/* Signálové farby svetlého režimu majú na night-900 len 3,3–3,7:1. */
	--beart-signal-ok: #4CC38A;
	--beart-signal-alert: #F06292;

	--beart-line: rgba(255, 255, 255, 0.10);
	--beart-line-strong: rgba(255, 255, 255, 0.22);
	--beart-line-dashed: rgba(255, 255, 255, 0.12);

	--beart-veil: rgba(255, 255, 255, 0.04);
	--beart-veil-strong: rgba(255, 255, 255, 0.06);
	--beart-mark: rgba(255, 255, 255, 0.24);
	--beart-mark-soft: rgba(255, 255, 255, 0.42);
	--beart-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 60%);

	--beart-shadow-card: 0 18px 40px rgba(0, 0, 0, 0.55);
	--beart-shadow-header: 0 10px 35px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.04);
	--beart-shadow-drawer: -20px 0 50px rgba(0, 0, 0, 0.75);
	--beart-shadow-panel: 0 40px 80px rgba(0, 0, 0, 0.80), 0 0 0 1px rgba(255, 255, 255, 0.05);

	--beart-header-line: rgba(255, 255, 255, 0.10);
	--beart-panel-bg: var(--beart-night-800);
	--beart-panel-line: rgba(255, 255, 255, 0.12);
	--beart-drawer-bg: var(--beart-night-800);

	--beart-invert-bg: var(--beart-paper-000);
	--beart-invert-fg: var(--beart-night-900);

	--beart-glow-soft: rgba(139, 92, 246, 0.10);
	--beart-glow-line: rgba(139, 92, 246, 0.40);
	--beart-glow-line-strong: rgba(194, 164, 247, 0.55);
	--beart-glow-ring: 0 0 18px rgba(139, 92, 246, 0.30);

	/* Rovnaká úprava pre explicitnú voľbu tmavého režimu. */
	--beart-gradient-brand-soft: linear-gradient(135deg, rgba(246, 198, 238, 0.10) 0%, rgba(194, 164, 247, 0.13) 52%, rgba(139, 92, 246, 0.20) 100%);

	--beart-pillar-shade: none;

	--beart-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.030'/%3E%3C/svg%3E");

	--beart-toggle-sun: inline-flex;
	--beart-toggle-moon: none;
}

/* Explicitná voľba svetlého režimu na tmavom systéme — role ostávajú
   tie z :root, len color-scheme treba vrátiť späť. */
:root[data-theme="light"] {
	color-scheme: light;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	background-color: var(--beart-bg);
	background-image: var(--beart-noise);
	color: var(--beart-text);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.beart-container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 2.5rem;
}

/* Hlavička v toku stránky — neprilepená, bez blur vrstvy.
   Sticky + backdrop-filter nútili prehliadač prekresľovať pruh cez celú
   šírku pri každom scrollovaní; takto sa hlavička odscrolluje s obsahom. */
.beart-header {
	position: relative;
	z-index: 1000;
	width: calc(100% - 2.5rem);
	max-width: 1360px;
	margin: 1rem auto 0;
	background: var(--beart-surface-raised);
	border: 1px solid var(--beart-header-line);
	border-radius: 9999px;
	box-shadow: var(--beart-shadow-header);
}

.beart-header-inner {
	max-width: 100%;
	margin: 0 auto;
	padding: 0.9rem 1.8rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.beart-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	font-size: 1.35rem;
	font-weight: 900;
	letter-spacing: -0.04em;
	color: var(--beart-on-surface-strong);
}

/* Textový názov v hornom menu (Logo::render_wordmark) — „BeART“ + „TM“ v rámčeku,
   ako v začiatkoch témy (commit 8c8d605, 24. 9.). Veľké logo je v hero. */
.beart-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 1.35rem;
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--beart-on-surface-strong);
	white-space: nowrap;
}

.beart-logo-badge {
	font-weight: 900;
	letter-spacing: -0.04em;
	color: var(--beart-on-surface-strong);
}

.beart-logo-tm {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--beart-accent-text);
	border: 1px solid var(--beart-glow-line-strong);
	padding: 0.1rem 0.3rem;
	border-radius: 4px;
}

.beart-wordmark--drawer {
	font-size: 1.2rem;
}

/* Logo (inc/class-logo.php) — pevná výška, šírka z pomeru strán viewBoxu,
   takže hlavička pri načítaní neposkočí. Čierne časti = currentColor. */
.beart-logo-svg {
	display: block;
	height: 38px;
	width: auto;
	aspect-ratio: 810 / 338;
	color: var(--beart-on-surface-strong);
}

.beart-logo-svg--drawer {
	height: 30px;
}

.beart-logo-svg--footer {
	height: 48px;
}

.beart-nav-desktop {
	display: flex;
	align-items: center;
}

.beart-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.beart-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--beart-muted);
	text-decoration: none;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.beart-nav-link:hover,
.beart-nav-link.is-current,
.beart-megamenu-trigger[aria-expanded="true"] {
	color: var(--beart-text);
	background: var(--beart-veil);
	border-color: var(--beart-border);
}

/* Aktívna sekcia: trvalé podčiarknutie — návštevník vidí, kde je. */
.beart-nav-link.is-current::after {
	transform: scaleX(1);
}

.beart-chevron {
	transition: transform 0.2s ease;
}

.beart-megamenu-trigger[aria-expanded="true"] .beart-chevron,
.beart-nav-has-megamenu:hover .beart-chevron {
	transform: rotate(180deg);
}

.beart-header-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* Editorial Buttons */
.beart-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-sans);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	border-radius: 6px;
	border: 1px solid var(--beart-border-hover);
	cursor: pointer;
	transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	white-space: nowrap;
}

.beart-btn-sm { padding: 0.5rem 1.1rem; font-size: 0.72rem; }
.beart-btn-md { padding: 0.8rem 1.6rem; font-size: 0.78rem; }
.beart-btn-lg { padding: 1rem 2.2rem; font-size: 0.82rem; }
.beart-btn-block { width: 100%; }

.beart-btn-gradient,
.beart-btn-primary {
	background: var(--beart-card-bg);
	color: var(--beart-text);
	border: 1px solid var(--beart-border-hover);
}

.beart-btn-gradient:hover,
.beart-btn-primary:hover {
	background: var(--beart-invert-bg);
	color: var(--beart-invert-fg);
	border-color: var(--beart-invert-bg);
}

/* Tlačidlá: jemné nadvihnutie pri hoveri a „stlačenie“ pri kliknutí.
   Len transform + shadow — žiadny filter ani layout. */
.beart-btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--beart-shadow-card);
}

.beart-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

/* --------------------------------------------------
   Mobile Drawer & Hamburger
   -------------------------------------------------- */
.beart-burger-btn {
	display: none;
	flex-direction: column;
	justify-content: space-around;
	width: 38px;
	height: 38px;
	background: var(--beart-card-bg);
	border: 1px solid var(--beart-border);
	border-radius: 6px;
	padding: 8px;
	cursor: pointer;
}
.beart-burger-bar { width: 100%; height: 2px; background: var(--beart-on-surface-strong); border-radius: 1px; }
/* Zavretá zásuvka je odsunutá za pravý okraj. Keďže je `position: fixed`,
   `overflow-x: hidden` na <body> ju NEOREŽE — na mobile sa preto dalo na ňu
   odrolovať a stránka sa „posúvala" do strany. `visibility: hidden` ju z
   plochy aj z poradia fokusu odstráni úplne; prechod ju necháva viditeľnú
   počas zatvárania, takže animácia ostáva plynulá. */
.beart-mobile-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; width: 88vw; max-width: 380px;
	background: var(--beart-drawer-bg); border-left: 1px solid var(--beart-border);
	box-shadow: var(--beart-shadow-drawer); transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s; z-index: 2000; overflow-y: auto;
}
.beart-mobile-drawer.is-open { transform: translateX(0); visibility: visible; }
.beart-mobile-drawer-inner { padding: 1.5rem; display: flex; flex-direction: column; min-height: 100%; }
.beart-mobile-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--beart-border); }
.beart-mobile-close { background: none; border: none; font-size: 1.8rem; color: var(--beart-on-surface-strong); cursor: pointer; }
.beart-mobile-list { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.beart-mobile-link, .beart-mobile-accordion-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.75rem 0.5rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 700; letter-spacing: 0;  color: var(--beart-on-surface-strong); text-decoration: none; background: none; border: none; text-align: left; cursor: pointer; }
.beart-mobile-accordion-content { display: none; padding-left: 0.5rem; padding-bottom: 1rem; }
.beart-mobile-pillar-title { display: block; font-family: var(--font-sans); font-size: 0.85rem;  letter-spacing: 0.01em; color: var(--beart-cyan); margin-bottom: 0.3rem; filter: var(--beart-pillar-shade); }
.beart-mobile-pillar-group ul { list-style: none; margin: 0; padding: 0; }
.beart-mobile-pillar-group li a { display: block; padding: 0.35rem 0; font-size: 0.88rem; color: var(--beart-muted); text-decoration: none; }
.beart-mobile-accordion.is-expanded .beart-mobile-accordion-content { display: block; }
.beart-mobile-accordion.is-expanded .beart-chevron { transform: rotate(180deg); }
.beart-mobile-pillar-group { margin-top: 1rem; padding-left: 0.75rem; border-left: 1px solid var(--beart-border-hover); }

/* --------------------------------------------------
   Editorial Footer & Cards Grid
   -------------------------------------------------- */
.beart-footer { background: var(--beart-surface-sunken); border-top: 1px solid var(--beart-border); padding: 6.5rem 0 3rem; margin-top: 7.5rem; position: relative; }
/* CTA pás nad pätičkou. Lesk (::after) aj spotlight musia ležať POD textom —
   kým boli nad ním, biely prechod nadpis vybielil do šeda. */
.beart-footer-hero {
	background:
		radial-gradient(40% 90% at 100% 0%, rgba(139, 92, 246, 0.22), transparent 70%),
		radial-gradient(45% 100% at 0% 100%, rgba(246, 198, 238, 0.45), transparent 70%),
		var(--beart-card-bg);
	border: 1px solid var(--beart-glow-line);
	border-radius: 24px;
	padding: clamp(2rem, 1.2rem + 3vw, 4rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 4rem;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.beart-footer-hero::before { content: ''; position: absolute; right: -60px; bottom: -120px; z-index: -1; width: 320px; height: 320px; border-radius: 50%; border: 36px solid rgba(139, 92, 246, 0.08); pointer-events: none; }
.beart-footer-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--beart-sheen); pointer-events: none; }
.beart-footer-hero > * { position: relative; z-index: 1; }
.beart-footer-hero .beart-btn-gradient { background: var(--beart-gradient-brand); color: var(--beart-ink-000); border-color: transparent; box-shadow: 0 10px 28px rgba(139, 92, 246, 0.28); }
.beart-footer-hero .beart-btn-gradient:hover { background: var(--beart-invert-bg); color: var(--beart-invert-fg); }
.beart-footer-hero-title { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.03em; margin: 0.5rem 0 0 0; color: var(--beart-on-surface-strong); }
.beart-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2.6rem; padding-bottom: 4.5rem; border-bottom: 1px solid var(--beart-border); }
.beart-footer-desc { font-size: 0.9rem; color: var(--beart-muted); margin: 1rem 0; line-height: 1.6; }
.beart-footer-title { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 700; line-height: 1.35; letter-spacing: 0.01em;  margin: 0 0 1.2rem 0; color: var(--beart-on-surface-strong); }
.beart-footer-title a { color: var(--beart-on-surface-strong); text-decoration: none; }
.beart-footer-title a:hover { color: var(--beart-cyan); }
.beart-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.beart-footer-links a { font-size: 0.85rem; color: var(--beart-muted); text-decoration: none; transition: color 0.2s; position: relative; }
.beart-footer-links a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--beart-dur-base, 0.26s) var(--beart-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.beart-footer-links a:hover { color: var(--beart-on-surface-strong); }
.beart-footer-links a:hover::after { transform: scaleX(1); }
/* --------------------------------------------------------------------------
   Kontakt a identifikačné údaje v pätičke
   --------------------------------------------------------------------------
   Telefón a e-mail sú odkazy (tel:, mailto:), aby sa na mobile dali vytočiť
   jedným ťuknutím. Ikona má pevnú veľkosť, takže riadok nikam neposkakuje.
   -------------------------------------------------------------------------- */
.beart-footer-contact { margin-top: 1.6rem; font-style: normal; display: flex; flex-direction: column; gap: 0.6rem; }
.beart-footer-contact-line { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--beart-on-surface-soft); text-decoration: none; }
.beart-footer-contact-line svg { flex: 0 0 auto; color: var(--beart-accent); }
a.beart-footer-contact-line:hover { color: var(--beart-on-surface-strong); }

.beart-footer-registry { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: 2rem; font-family: var(--font-sans); font-size: 0.78rem; color: var(--beart-muted); }

.beart-footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 2rem; font-family: var(--font-sans); font-size: 0.8rem; color: var(--beart-muted); }
.beart-footer-legal a { color: var(--beart-muted); text-decoration: none; }
.beart-footer-company { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px dashed var(--beart-line-dashed); }
.beart-footer-company .beart-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; }
.beart-footer-legal a:hover { color: var(--beart-on-surface-strong); }
.beart-dot-sep { margin: 0 0.5rem; opacity: 0.3; }
.beart-speed-badge { color: var(--beart-cyan); font-weight: 700; }

.beart-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.8rem; margin: 3rem 0; }
.beart-service-card {
	position: relative;
	background: var(--beart-card-bg);
	border: 1px solid var(--beart-border);
	border-radius: 12px;
	overflow: hidden;
	transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.beart-service-card::before {
	content: '+';
	position: absolute;
	top: 8px;
	left: 10px;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--beart-mark);
	z-index: 4;
	pointer-events: none;
	transition: color 0.2s ease;
}

.beart-service-card:hover::before {
	color: var(--beart-cyan);
}
.beart-service-card:hover {
	background: var(--beart-card-hover);
	border-color: var(--beart-border-hover);
	transform: translateY(-3px);
}
.beart-card-thumb { position: relative; overflow: hidden; background: var(--beart-surface-media); }
.beart-card-thumb img { width: 100%; height: 210px; object-fit: cover; transition: transform 0.35s ease; }
.beart-service-card:hover .beart-card-thumb img { transform: scale(1.03); }

/* Karta bez fotky — značková plocha s ikonou témy v rovnakej výške ako fotka. */
.beart-card-thumb--art a {
	display: grid;
	place-items: center;
	height: 210px;
	color: var(--beart-accent);
	background:
		radial-gradient(60% 70% at 25% 20%, var(--beart-tint-magenta), transparent 70%),
		radial-gradient(60% 70% at 85% 90%, var(--beart-glow-soft), transparent 70%),
		var(--beart-surface-media);
}
.beart-card-thumb--art svg { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.beart-service-card:hover .beart-card-thumb--art svg { transform: scale(1.1) rotate(-4deg); }

.beart-card-body { padding: 2.1rem; }

/* Stránkovanie archívov a blogu — tlačidlá namiesto holých odkazov. */
.beart-pagination { margin-top: 3rem; }
.beart-pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.beart-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 1rem;
	font-weight: 700;
	color: var(--beart-on-surface);
	text-decoration: none;
	background: var(--beart-surface-raised);
	border: 1px solid var(--beart-line);
	border-radius: 999px;
	transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.beart-pagination a.page-numbers:hover { border-color: var(--beart-line-strong); background: var(--beart-surface-hover); transform: translateY(-1px); }
.beart-pagination .page-numbers.current { color: var(--beart-accent-ink); background: var(--beart-accent); border-color: var(--beart-accent); }
.beart-pagination .page-numbers.dots { background: none; border: 0; min-width: 0; padding: 0 0.25rem; }
/* Meta riadok článku na karte v blogu (dátum • kategória). */
.beart-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.8rem; margin: 0 0 0.5rem 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--beart-on-surface-muted); }
.beart-card-meta .beart-card-cat { color: var(--beart-on-surface-soft); }
.beart-card-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.6rem 0; }
.beart-card-title a { color: var(--beart-on-surface-strong); text-decoration: none; transition: color 0.2s; }
.beart-card-title a:hover { color: var(--beart-cyan); }
.beart-card-excerpt { color: var(--beart-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.2rem; }
.beart-card-link { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-sans); font-size: 0.88rem; font-weight: 700; letter-spacing: 0.01em;  color: var(--beart-cyan); text-decoration: none; transition: color 0.2s ease, gap 0.2s ease; }
.beart-card-link:hover { gap: 0.65rem; }

.beart-single-main, .beart-archive-main, .beart-page-main { padding: 5.5rem 0 8rem; }
/* Hlavička aj pätička článku/stránky zdieľajú úzku čitateľnú mieru
   (`--beart-measure`) — rovnako ako bežiaci text pod nimi (vzor
   Medium/Substack/Stripe). Iba médiá (náhľadová fotka, galéria, samostatné
   fotky) presahujú na 1240 px. */
.beart-single-header,
.beart-page-header,
.beart-single-footer {
	max-width: var(--beart-measure);
	margin-inline: auto;
}
.beart-single-header { margin-bottom: 2.5rem; }
.beart-single-title { font-size: clamp(2.2rem, 1.8rem + 2.5vw, 4rem); font-weight: 900; letter-spacing: -0.035em; margin: 0.5rem 0; }

/* --------------------------------------------------------------------------
   Ikona pred veľkým nadpisom (single / page / archív / blog)
   --------------------------------------------------------------------------
   Inline SVG z Icons, vykresľuje HeadingIcons. Plochu drží CSS pevným
   rozmerom, takže sa nič nedopočítava po načítaní — CLS ostáva nula.
   Pohyb (nakreslenie ťahov, hover) je v motion.css pod
   prefers-reduced-motion: no-preference.
   -------------------------------------------------------------------------- */
.beart-title-row {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin: 0.5rem 0;
}

/* Nadpis dostane zvyšnú šírku a zalamuje sa normálne — ikona ho nerozbije. */
.beart-title-row > h1 {
	margin: 0;
	min-width: 0;
}

.beart-heading-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border: 1px solid var(--beart-line);
	border-radius: 16px;
	background: var(--beart-gradient-brand-soft);
	color: var(--beart-accent);
}

.beart-heading-icon svg {
	display: block;
	width: 32px;
	height: 32px;
}

@media (max-width: 640px) {
	/* Na mobile sa nadpis láme na tri aj štyri riadky — ikona preto sadá
	   k prvému riadku, nie do optického stredu odstavca. */
	.beart-title-row { gap: 0.8rem; align-items: flex-start; }
	.beart-heading-icon { width: 46px; height: 46px; border-radius: 12px; margin-top: 0.2rem; }
	.beart-heading-icon svg { width: 25px; height: 25px; }
}
.beart-single-meta { margin: 0 0 0.75rem 0; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; color: var(--beart-on-surface-muted); }
/* Byline s autorom — viditeľný „who created the content“ (E-E-A-T). */
.beart-byline { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.beart-byline a { color: var(--beart-on-surface-strong); text-decoration: none; }
.beart-byline a:hover { color: var(--beart-cyan); }
.beart-byline-role { color: var(--beart-on-surface-muted); }
.beart-sep { margin: 0 0.4rem; color: var(--beart-on-surface-muted); opacity: 0.5; }
.beart-single-lead { font-size: 1.25rem; color: var(--beart-muted); line-height: 1.6; }
.beart-single-featured-image { margin: 2.5rem auto; border-radius: 8px; overflow: hidden; border: 1px solid var(--beart-border); max-width: 1240px; }
/* Náhľadová fotka drží rovnakú stopu ako text pod ňou (1240 px) a pomer 3:2.
   Pôvodné `aspect-ratio` + `max-height` sa navzájom prebíjali — `max-height`
   skrátila pomer a výsledkom bol plochý pás ~3:1 s pásmi okolo fotky. Teraz je
   zdrojom pravdy sám pomer; `contain` fotku nikdy neoreže (orezané logo či
   nápis je horšie než neutrálny pás okolo), len ju symetricky zmestí. */
.beart-single-featured-image { background: var(--beart-surface-raised); }
.beart-single-featured-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	background: var(--beart-surface-raised);
}
/* Obsahový kontajner je široký (1240 px) — médiá (galérie, samostatné fotky,
   kontaktné karty, formulár) využijú veľký monitor. Bežiaci text sa zúži na
   68ch nižšie, aby riadky neboli príliš dlhé (Baymard 50–75ch, WCAG max 80ch). */
.beart-single-content,
.beart-page-content {
	max-width: 1240px;
	margin-inline: auto;
}

/* Čitateľná miera textu: odstavce, nadpisy, zoznamy, citácie a tabuľky držia
   ~68 znakov na riadok a centrujú sa do širokého kontajnera — presne ako médiá.
   Toto je korporátny vzor „narrow text / wide media“ (Stripe, Medium, Linear). */
.beart-single-content > p,
.beart-single-content > h2,
.beart-single-content > h3,
.beart-single-content > h4,
.beart-single-content > h5,
.beart-single-content > h6,
.beart-single-content > ul,
.beart-single-content > ol,
.beart-single-content > blockquote,
.beart-single-content > table,
.beart-page-content > p,
.beart-page-content > h2,
.beart-page-content > h3,
.beart-page-content > h4,
.beart-page-content > h5,
.beart-page-content > h6,
.beart-page-content > ul,
.beart-page-content > ol,
.beart-page-content > blockquote,
.beart-page-content > table {
	max-width: var(--beart-measure);
	margin-inline: auto;
}
.beart-single-content { font-size: 1.1rem; line-height: 1.8; color: var(--beart-on-surface-soft); }

/* Výzva na akciu v obsahu služby (napr. odkaz na konfigurátor obrazov).
   Blok Skupina by inak spadol medzi „široké médiá“ — drží preto textovú
   mieru ako odseky okolo neho a tlačidlo nesie značkový prechod. */
.beart-service-cta {
	max-width: var(--beart-measure);
	margin-inline: auto;
	margin-block: 2rem;
	border: 1px solid var(--beart-border);
}

.beart-service-cta > p {
	margin-top: 0;
	font-size: 1rem;
}

/* Tlačidlo drží zdržanlivý jazyk témy (ako .beart-btn-gradient): svetlé
   s rámikom, pri hoveri sa invertuje. Farebný prechod by tu vytŕčal. */
.beart-service-cta .wp-block-button__link {
	background: var(--beart-card-bg);
	border: 1px solid var(--beart-border-hover);
	border-radius: 999px;
	color: var(--beart-text);
	font-family: var(--font-sans);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.8rem 1.7rem;
}

.beart-service-cta .wp-block-button__link:hover,
.beart-service-cta .wp-block-button__link:focus-visible {
	background: var(--beart-invert-bg);
	border-color: var(--beart-invert-bg);
	color: var(--beart-invert-fg);
}

/* --------------------------------------------------------------------------
   Fotky v obsahu (bloky Obrázok a Galéria)
   --------------------------------------------------------------------------
   Celé rozhranie stojí na oblých rohoch — fotka nesmie byť jediný ostrý
   obdĺžnik na stránke. Rádius aj rám drží <figure>, nie <img>: obrázok sa pri
   hoveri priblíži a orez musí ostať na rodičovi (overflow: hidden).
   Rovnaký rádius ako karty (12 px), rovnaký rám ako ostatné plochy.
   -------------------------------------------------------------------------- */
.beart-single-content .wp-block-image,
.beart-page-content .wp-block-image,
.beart-single-content .wp-block-gallery .wp-block-image,
.beart-page-content .wp-block-gallery .wp-block-image {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--beart-border);
	background: var(--beart-card-bg);
}

/* Samostatný obrázok (mimo galérie) drží svoju prirodzenú veľkosť, obmedzenú
   stropom 1240 px na šírku (zhodne s textom) a 72vh na výšku. Naťahovať fotku
   nasilu na plnú šírku stĺpca by portrét (napr. 924×2000) nafúklo na
   ~1960 px výšky; `fit-content` nechá figure sadnúť presne na obraz, takže
   okolo úzkej fotky nevznikne široký prázdny rám. */
.beart-single-content > .wp-block-image,
.beart-page-content > .wp-block-image {
	margin: 2.2rem auto;
	width: fit-content;
	max-width: 1240px;
}

.beart-single-content > .wp-block-image img,
.beart-page-content > .wp-block-image img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 72vh;
	object-fit: contain;
}

/* Galéria vyplní celú šírku textu a rovnomerne ju rozdelí medzi fotky.
   `auto-fit` (na rozdiel od predchádzajúceho `auto-fill`) nevyhradí miesto
   pre prázdne stĺpce — trojica fotiek predtým zaberala tretinu riadku
   a napravo ostalo ~640 px mŕtveho miesta, pričom text pod galériou tiekol
   cez celú šírku. Dlaždica je minimálne 240 px, aby drobnosti (samolepka,
   gravírovaný krížik) nešli do nečitateľnej veľkosti, a orez na fotke ostáva
   zámerne vypnutý — `contain` v dlaždici nikdy neodsekne nápis ani logo. */
.beart-single-content .wp-block-gallery.has-nested-images,
.beart-page-content .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0.9rem;
	margin: 2.2rem 0;
}

.beart-single-content .wp-block-gallery .wp-block-image figcaption,
.beart-page-content .wp-block-gallery .wp-block-image figcaption {
	font-size: 0.72rem;
	line-height: 1.35;
	padding: 0.5rem 0.6rem;
}

/* Šírku vnorenej fotky si WordPress presadzuje pravidlom
   `.wp-block-gallery.has-nested-images.columns-N figure.wp-block-image:not(#individual-image)`,
   ktoré má nadsadenú špecificitu (`:not(#id)` + typový selektor). Pri
   dvojstĺpcovej galérii sme ho ešte prebili, pri trojstĺpcovej už nie — a
   dlaždica sa zrazila na tretinu stopy mriežky, čiže na nechtík.
   `!important` je tu zámerný: prepisujeme cudzie CSS, ktoré si špecificitu
   nafúklo, a nechceme s ním súťažiť pri každom ďalšom `columns-N`. */
.beart-single-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image),
.beart-page-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	width: auto !important;
	max-width: none !important;
	margin: 0;
	flex: none;
}

/* Dlaždice galérie majú jednotnú výšku (pomer 3:2), ale fotka sa NIKDY
   neorezáva — `object-fit: contain` ju do dlaždice zmestí celú a prípadné
   pásy po stranách vyplní podklad karty. Stojatá fotka tak neroztiahne riadok
   do výšky a zároveň z nej nič nezmizne: orezaný nápis alebo odseknuté logo
   je horšie než pás vedľa fotky. */
.beart-single-content .wp-block-gallery .wp-block-image,
.beart-page-content .wp-block-gallery .wp-block-image {
	aspect-ratio: 3 / 2;
	background: var(--beart-surface-raised);
}

.beart-single-content .wp-block-gallery .wp-block-image img,
.beart-page-content .wp-block-gallery .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Popisok samostatnej fotky sedí v jej ráme. Popisky v galérii si WordPress
   kreslí sám ako prekryv nad spodnou hranou — do toho nešliapeme. */
.beart-single-content > .wp-block-image figcaption,
.beart-page-content > .wp-block-image figcaption {
	margin: 0;
	padding: 0.7rem 0.9rem 0.8rem;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--beart-on-surface-soft);
	background: var(--beart-card-bg);
	text-align: left;
}

/* Náhľadová fotka článku drží rovnaký rádius ako zvyšok obsahu. */
.beart-single-featured-image { border-radius: 12px; }
.beart-404-main { padding: 8rem 0; text-align: center; }
.beart-404-code { font-family: var(--font-mono); font-size: clamp(5rem, 4rem + 6vw, 9rem); font-weight: 900; color: var(--beart-on-surface-strong); letter-spacing: -0.05em; display: block; margin-bottom: 1rem; }

@media (max-width: 1024px) {
	.beart-nav-desktop, .beart-header-cta { display: none; }
	.beart-burger-btn { display: flex; }
	.beart-footer-grid { grid-template-columns: repeat(2, 1fr); }
	.beart-footer-brand { grid-column: 1 / -1; }
	.beart-footer-hero { flex-direction: column; text-align: left; }
}
@media (max-width: 640px) {
	.beart-footer-grid { grid-template-columns: 1fr; }
	.beart-footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}

.beart-mobile-footer { margin-top: auto; padding-top: 1.5rem; }

.beart-btn-outline {
	background: transparent;
	color: var(--beart-muted);
	border: 1px solid var(--beart-border);
}

.beart-btn-outline:hover {
	background: var(--beart-veil-strong);
	color: var(--beart-text);
	border-color: var(--beart-border-hover);
}

.beart-badge-glow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.75rem;
	font-family: var(--font-sans);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: 4px;
	background: var(--beart-glow-soft);
	border: 1px solid var(--beart-glow-line);
	color: var(--beart-cyan);
	margin-bottom: 1.2rem;
}

.beart-pill-tag {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: 4px;
	background: var(--beart-surface-raised);
	border: 1px solid var(--beart-border);
	color: var(--beart-muted);
	margin-right: 0.35rem;
	margin-bottom: 0.35rem;
}

/* --------------------------------------------------
   Dynamic Cursor Lighting (Spotlight Effect)
   & Editorial Polygrafické Detaily (Hairlines & Crosses)
   -------------------------------------------------- */

.beart-spotlight,
.beart-service-card,
.beart-product-card-inner,
.beart-megamenu-col {
	position: relative;
	background: var(--beart-card-bg);
	border: 1px solid var(--beart-border);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.25s ease;
}

.beart-spotlight::after,
.beart-service-card::after,
.beart-product-card-inner::after,
.beart-megamenu-col::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--beart-spotlight);
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
	z-index: 2;
}

.beart-spotlight:hover::after,
.beart-service-card:hover::after,
.beart-product-card-inner:hover::after,
.beart-megamenu-col:hover::after {
	opacity: 1;
}

.beart-spotlight:hover,
.beart-service-card:hover,
.beart-product-card-inner:hover,
.beart-megamenu-col:hover {
	border-color: var(--beart-border-hover);
	background-color: var(--beart-card-hover);
	transform: translateY(-3px);
	box-shadow: var(--beart-shadow-card);
}

/* Pri stlačení sa karta vráti o chvíľu nižšie — drobné „stlačenie“ pod prstom.
   Len transform, aby prechod ostal na kompozítore. */
.beart-spotlight:active,
.beart-service-card:active,
.beart-product-card-inner:active,
.beart-megamenu-col:active {
	transform: translateY(-1px);
	box-shadow: var(--beart-shadow-header);
}


/* --------------------------------------------------
   Košík v hlavičke
   -------------------------------------------------- */
.beart-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	color: var(--beart-muted);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.beart-cart-link:hover,
.beart-cart-link:focus-visible {
	color: var(--beart-text);
	background: var(--beart-veil);
	border-color: var(--beart-border);
}

.beart-cart-count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	font-family: var(--font-mono);
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	color: var(--beart-accent-ink);
	background: var(--beart-accent);
	border-radius: 9px;
}

/* --------------------------------------------------
   Prepínač svetlej a tmavej témy
   -------------------------------------------------- */
.beart-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	color: var(--beart-muted);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.beart-theme-toggle:hover {
	color: var(--beart-text);
	background: var(--beart-veil);
	border-color: var(--beart-border);
}

.beart-theme-toggle:focus-visible {
	outline: 2px solid var(--beart-accent);
	outline-offset: 3px;
}

.beart-theme-toggle-icon {
	line-height: 0;
}

.beart-theme-toggle-icon--sun {
	display: var(--beart-toggle-sun);
}

.beart-theme-toggle-icon--moon {
	display: var(--beart-toggle-moon);
}

/* Varianta v mobilnom draweri — vedľa zatváracieho krížika. */
.beart-mobile-top .beart-theme-toggle {
	margin-left: auto;
	margin-right: 0.4rem;
	border-color: var(--beart-border);
}

/* --------------------------------------------------
   Prechod pri prepnutí režimu
   Trieda sa pridáva len na čas prepnutia, aby trvalé prechody
   nekolidovali s hoverom. Pri „reduce motion" sa nepridáva vôbec.
   -------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

	:root.is-theme-switching,
	:root.is-theme-switching body,
	:root.is-theme-switching .beart-header,
	:root.is-theme-switching .beart-footer,
	:root.is-theme-switching .beart-mobile-drawer,
	:root.is-theme-switching .beart-megamenu-panel,
	:root.is-theme-switching .beart-spotlight,
	:root.is-theme-switching .beart-service-card,
	:root.is-theme-switching .beart-product-card-inner,
	:root.is-theme-switching .beart-megamenu-col {
		transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
	}
}

@media (prefers-reduced-motion: reduce) {

	.beart-theme-toggle {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Kontaktné karty a dopytový formulár
   --------------------------------------------------------------------------
   Rovnaký jazyk ako ostatné karty: rádius 12 px, rám z role, nadvihnutie pri
   hoveri (pohyb je v motion.css). Formulár drží 2-stĺpcovú mriežku, ktorá sa
   na mobile zloží pod seba.
   -------------------------------------------------------------------------- */
.beart-contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin: 2rem 0 2.6rem; }

.beart-contact-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.6rem 1.5rem; border: 1px solid var(--beart-border); border-radius: 12px; background: var(--beart-card-bg); text-decoration: none; }
.beart-contact-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 0.6rem; border: 1px solid var(--beart-border); border-radius: 10px; color: var(--beart-accent); }
.beart-contact-card-label { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--beart-muted); }
.beart-contact-card-value { font-size: 1.05rem; font-weight: 700; color: var(--beart-on-surface-strong); }
.beart-contact-card-note { font-size: 0.85rem; line-height: 1.5; color: var(--beart-on-surface-soft); }

/* Mapa je vložená ako iframe z OpenStreetMap — na rozdiel od Google Maps
   neukladá návštevníkovi žiadne cookies, takže nepotrebuje súhlas. */
.beart-map-frame { border: 1px solid var(--beart-border); border-radius: 12px; overflow: hidden; margin: 1.5rem 0; line-height: 0; }
.beart-map-frame iframe { display: block; width: 100%; height: 380px; border: 0; }
.beart-maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 1.5rem 0; }
.beart-map-card { margin: 0; }
.beart-map-card .beart-map-frame { margin: 0; }
/* Zástupca mapy Google pred kliknutím — technická mriežka ako v hero. */
.beart-map-frame--google:not(.is-loaded) { height: 380px; background-color: var(--beart-surface-raised); background-image: linear-gradient(color-mix(in oklab, var(--beart-on-surface) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--beart-on-surface) 5%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.beart-map-load { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 100%; padding: 1.5rem; font: inherit; line-height: 1.4; color: var(--beart-on-surface); background: none; border: 0; cursor: pointer; }
.beart-map-load svg { color: var(--beart-accent); transition: transform 0.25s ease; }
.beart-map-load:hover svg, .beart-map-load:focus-visible svg { transform: translateY(-3px); }
.beart-map-load-title { font-size: 1rem; font-weight: 700; }
.beart-map-load-note { font-size: 0.8rem; color: var(--beart-on-surface-muted); }
.beart-map-caption { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.6rem; font-size: 0.88rem; }
.beart-map-caption strong { margin-right: auto; }
@media (max-width: 760px) { .beart-maps { grid-template-columns: minmax(0, 1fr); } }

.beart-contact-form-wrap { margin: 1.5rem 0 0; }
.beart-contact-form { padding: 2rem; border: 1px solid var(--beart-border); border-radius: 12px; background: var(--beart-card-bg); }
.beart-form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.beart-form-field { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 1.2rem; }
.beart-form-field label { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 700; color: var(--beart-on-surface-strong); }
.beart-req { color: var(--beart-accent); }

.beart-contact-form input[type="text"],
.beart-contact-form input[type="email"],
.beart-contact-form input[type="tel"],
.beart-contact-form select,
.beart-contact-form textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--beart-on-surface-strong);
	background: var(--beart-surface);
	border: 1px solid var(--beart-border);
	border-radius: 8px;
}

.beart-contact-form textarea { resize: vertical; min-height: 140px; }

.beart-contact-form input:focus-visible,
.beart-contact-form select:focus-visible,
.beart-contact-form textarea:focus-visible { outline: 2px solid var(--beart-accent); outline-offset: 1px; }

.beart-form-consent { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 1.4rem; font-size: 0.85rem; line-height: 1.55; color: var(--beart-on-surface-soft); }
.beart-form-consent input { margin-top: 0.25rem; }
.beart-form-actions { margin: 0; }

.beart-form-note { padding: 0.9rem 1.1rem; border: 1px solid var(--beart-border); border-radius: 10px; font-size: 0.92rem; margin: 0 0 1.2rem; }
.beart-form-note--ok { border-color: var(--beart-accent); color: var(--beart-on-surface-strong); }
.beart-form-note--err { border-color: var(--beart-line-strong); color: var(--beart-on-surface-strong); }

/* Honeypot nesmie byť display:none — časť robotov taký blok preskočí.
   Odsunieme ho mimo obrazovky a vyradíme z toku aj z čítačiek. */
.beart-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
	.beart-form-row { grid-template-columns: 1fr; gap: 0; }
	.beart-contact-form { padding: 1.4rem; }
}

/* Hlavná akcia formulára nesie značkový prechod — rovnaká logika ako hero:
   oko musí na prvý pohľad vedieť, kam kliknúť. */
.beart-contact-form button[type="submit"] {
	padding: 0.85rem 1.9rem;
	background-color: transparent;
	background-image: var(--beart-gradient-brand);
	border-color: transparent;
	color: var(--beart-ink-000);
	box-shadow: var(--beart-shadow-card);
}

/* ==========================================================================
   MOBILNÁ TYPOGRAFIA A MENU
   --------------------------------------------------------------------------
   Komponentové veľkosti sú v `rem`, čiže sa počítajú z <html> (16 px), nie
   z <body> (17 px). Drobné hodnoty ako 0.78rem tak na telefóne vychádzali
   okolo 12 px, čo je pod hranicou pohodlného čítania. Zdvihnutím základu sa
   proporčne zväčší celá sekundárna typografia naraz, bez zásahu do desiatok
   jednotlivých pravidiel.
   ========================================================================== */
@media (max-width: 700px) {

	html {
		font-size: 17px;
	}

	/* Tlačidlá sú zároveň dotykové ciele, tie potrebujú viac než proporčný
	   nárast — podľa odporúčania na min. ~44 px výšku zásahovej plochy. */
	.beart-btn-sm { font-size: 0.82rem; padding: 0.65rem 1.2rem; }
	.beart-btn-md { font-size: 0.88rem; padding: 0.85rem 1.6rem; }
	.beart-btn-lg { font-size: 0.95rem; padding: 1rem 2rem; }

	/* Najdrobnejšie popisky (meta riadky, pätička) držíme nad 13 px. */
	.beart-card-meta,
	.beart-footer-registry,
	.beart-footer-bottom { font-size: 0.82rem; }

	/* Hlavička sa na 360 px displej nezmestila: logo (102 px) + akcie (205 px)
	   + odsadenie 2x30 px + medzera 34 px = ~402 px. Stlačíme odsadenie aj
	   medzery, aby pruh sadol aj na úzke telefóny. */
	.beart-header-inner {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		gap: 0.6rem;
	}
	.beart-header-actions { gap: 0.6rem; }

	/* Pod článkom zostávalo na telefóne 263 px prázdna plocha: 8rem spodného
	   odsadenia `main` (136 px) a k tomu 7.5rem `margin-top` pätičky (127 px).
	   Padding a margin sa nikdy nezlúčia, takže sa sčítali — na 844 px vysokom
	   displeji je to takmer tretina obrazovky bez obsahu. Zároveň berieme
	   pätičke časť horného odsadenia, aby sivý pás nad kartou „Vytvorme spolu"
	   nezačínal prázdnotou. E-shop sa takto zmenšuje už dávnejšie
	   (`.beart-woocommerce-main` vo `woocommerce.css`), držíme rovnaký vzor. */
	.beart-single-main,
	.beart-archive-main,
	.beart-page-main { padding-bottom: 3rem; }

	.beart-footer { margin-top: 2.5rem; padding-top: 3.5rem; }
}

/* Veľmi úzke telefóny (320 px): logo + päť ovládacích prvkov sa inak
   nezmestia ani po zúžení vyššie. Stlačíme odsadenie a medzery na minimum. */
@media (max-width: 360px) {
	.beart-header-inner {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		gap: 0.4rem;
	}
	.beart-header-actions { gap: 0.35rem; }
}

/* --------------------------------------------------------------------------
   Online konfigurátory — štítok „Novinka“ v menu a pás nad pätičkou
   (inc/class-configurators.php). Tlačidlá sa skladajú z aktívnych pluginov.
   -------------------------------------------------------------------------- */

.beart-badge-new {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.12rem 0.45rem;
	border-radius: 999px;
	background: var(--beart-accent);
	color: var(--beart-accent-ink);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
	vertical-align: 0.12em;
	white-space: nowrap;
}

.beart-mobile-pillar-group li a.is-new { color: var(--beart-on-surface-strong); font-weight: 700; }

/* Pás nad pätičkou — technický výkres: čiarkovaný rám, rohové značky. */
.beart-konfig-band { margin-top: 6rem; }
.beart-konfig-band + .beart-footer { margin-top: 3.5rem; }
/* Na úvode v obsahu medzi pásom strojov a piliermi — piliere majú vlastný horný odstup. */
.beart-konfig-band.is-home { margin-top: clamp(2.5rem, 1.8rem + 2.5vw, 4rem); }

.beart-konfig-band-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem;
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	border: 1px dashed var(--beart-line-dashed);
	border-radius: 16px;
	background: var(--beart-card-bg);
}

/* Rohové „kóty“ — len ozdoba, nesie ich ::before/::after. */
.beart-konfig-band-inner::before,
.beart-konfig-band-inner::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid var(--beart-accent);
	pointer-events: none;
}

.beart-konfig-band-inner::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 16px; }
.beart-konfig-band-inner::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 16px; }

.beart-konfig-band-eyebrow {
	display: inline-block;
	margin-bottom: 0.6rem;
	color: var(--beart-accent-text);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.beart-konfig-band-title {
	margin: 0 0 0.5rem;
	color: var(--beart-on-surface-strong);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-wrap: balance;
}

.beart-konfig-band-lead {
	max-width: 34rem;
	margin: 0;
	color: var(--beart-on-surface-muted);
	font-size: 0.98rem;
	line-height: 1.55;
}

.beart-konfig-band-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.beart-konfig-btn {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-height: 64px;
	height: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--beart-border-hover);
	border-radius: 12px;
	background: var(--beart-surface);
	color: var(--beart-on-surface-strong);
	text-decoration: none;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.beart-konfig-btn:hover {
	transform: translateY(-2px);
	border-color: var(--beart-accent);
	box-shadow: var(--beart-shadow-card);
}

.beart-konfig-btn:focus-visible {
	outline: 2px solid var(--beart-accent);
	outline-offset: 3px;
}

.beart-konfig-btn[aria-current="page"] {
	border-color: var(--beart-accent);
	background: var(--beart-veil);
}

.beart-konfig-btn-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--beart-line);
	border-radius: 10px;
	color: var(--beart-accent);
}

.beart-konfig-btn-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.1rem; min-width: 0; }
.beart-konfig-btn-label { font-size: 1rem; font-weight: 800; line-height: 1.25; }
.beart-konfig-btn-desc { color: var(--beart-on-surface-muted); font-size: 0.8rem; line-height: 1.35; }
.beart-konfig-btn-arrow { flex: 0 0 auto; color: var(--beart-accent); font-size: 1.1rem; transition: transform 0.2s ease; }
.beart-konfig-btn:hover .beart-konfig-btn-arrow { transform: translateX(3px); }

@media (max-width: 600px) {
	.beart-konfig-band { margin-top: 4rem; }
	.beart-konfig-band-inner { padding: 1.25rem 1rem; gap: 1.25rem; }
	.beart-konfig-btn { gap: 0.7rem; padding: 0.75rem 0.85rem; }
	.beart-konfig-btn-icon { width: 36px; height: 36px; }
}

@media (min-width: 1000px) {
	.beart-konfig-band-inner {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		align-items: center;
		gap: 2.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.beart-konfig-btn,
	.beart-konfig-btn-arrow { transition: none; }
	.beart-konfig-btn:hover,
	.beart-konfig-btn:hover .beart-konfig-btn-arrow { transform: none; }
}

/* --------------------------------------------------------------------------
   Okno „Ďakujeme — je to v košíku“ (inc/class-added-to-cart.php)
   -------------------------------------------------------------------------- */

.beart-added {
	width: min(100% - 1.5rem, 36rem);
	max-height: min(90vh, 52rem);
	max-height: min(90svh, 52rem);
	padding: 0;
	overflow: auto;
	border: 1px solid var(--beart-border-hover);
	border-radius: 16px;
	background: var(--beart-surface);
	color: var(--beart-text);
	box-shadow: var(--beart-shadow-panel);
}

/* Bez JS (nemodálne `open`): plávajúci panel pri spodnom okraji. */
.beart-added:not(:modal) {
	position: fixed;
	inset: auto 0 0.75rem;
	z-index: 1500;
	margin: 0 auto;
}

.beart-added::backdrop {
	background: color-mix(in srgb, var(--beart-night-950) 55%, transparent);
}

html.beart-added-open { overflow: hidden; }

.beart-added-inner { position: relative; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }

.beart-added-close-form { position: absolute; top: 0.5rem; right: 0.5rem; margin: 0; }

.beart-added-close {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--beart-on-surface-muted);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.beart-added-close:hover { background: var(--beart-surface-hover); color: var(--beart-on-surface-strong); }

.beart-added-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.35rem;
	color: var(--beart-signal-ok);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.beart-added-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 999px;
	background: var(--beart-signal-ok);
	color: var(--beart-surface);
	font-size: 0.8rem;
}

.beart-added-title {
	margin: 0 2.5rem 1.1rem 0;
	color: var(--beart-on-surface-strong);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.beart-added-item {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 0.9rem;
	padding: 0.9rem;
	border: 1px dashed var(--beart-line-dashed);
	border-radius: 12px;
}

.beart-added-thumb img { display: block; width: 76px; height: 76px; border-radius: 8px; object-fit: cover; }
.beart-added-name { margin: 0 0 0.35rem; font-weight: 800; color: var(--beart-on-surface-strong); }
.beart-added-name a { color: inherit; }

.beart-added-meta { font-size: 0.82rem; color: var(--beart-on-surface-muted); }
.beart-added-meta dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.1rem 0.6rem; margin: 0; }
.beart-added-meta dt { font-weight: 700; color: var(--beart-on-surface-soft); }
.beart-added-meta dd { margin: 0; }
.beart-added-meta dd p { margin: 0; }

.beart-added-price {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
}

.beart-added-price strong { color: var(--beart-on-surface-strong); font-size: 1.05rem; }

.beart-added-subtotal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 1rem 0;
	color: var(--beart-on-surface-muted);
	font-size: 0.9rem;
}

.beart-added-subtotal strong { color: var(--beart-on-surface-strong); }

.beart-added-actions { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.beart-added-actions .beart-btn { width: 100%; min-height: 48px; white-space: normal; }
.beart-added-continue-form { margin: 0; }
.beart-added-actions .beart-added-continue { background: var(--beart-card-bg); color: var(--beart-text); font-family: var(--font-sans); }

.beart-added-actions .beart-added-primary {
	border-color: transparent;
	background: var(--beart-gradient-brand);
	color: var(--beart-ink-000);
	font-size: 0.95rem;
}

@media (min-width: 560px) {
	.beart-added-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.beart-added-actions .beart-added-primary { grid-column: 1 / -1; }
}

.beart-added-more { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--beart-line-dashed); }
.beart-added-more-title { margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--beart-on-surface-muted); }

.beart-added-cross { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.beart-added-cross-item { display: flex; flex-direction: column; gap: 0.4rem; }
.beart-added-cross-link { display: flex; flex-direction: column; gap: 0.25rem; color: var(--beart-on-surface-strong); text-decoration: none; font-size: 0.85rem; }
.beart-added-cross-link img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; object-fit: cover; }
.beart-added-cross-name { font-weight: 700; }
.beart-added-cross-price { color: var(--beart-on-surface-muted); font-size: 0.8rem; }
.beart-added-cross-item .added_to_cart { font-size: 0.8rem; }

.beart-added-others { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.beart-added-other {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--beart-border-hover);
	border-radius: 999px;
	color: var(--beart-on-surface-strong);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}

.beart-added-other svg { color: var(--beart-accent); }
.beart-added-other:hover { border-color: var(--beart-accent); }

.beart-added-shop { margin: 1rem 0 0; text-align: center; font-size: 0.85rem; }
.beart-added-shop a { color: var(--beart-on-surface-muted); }

.beart-added :focus-visible { outline: 2px solid var(--beart-accent); outline-offset: 2px; }

@media (max-width: 560px) {
	/* Na mobile ako list zospodu. */
	.beart-added:modal { margin: auto auto 0; width: 100%; max-width: none; border-radius: 16px 16px 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
	.beart-added[open] { animation: beart-added-in 0.22s cubic-bezier(0.16, 1, 0.3, 1); }

	@keyframes beart-added-in {
		from { opacity: 0; transform: translateY(12px); }
		to { opacity: 1; transform: translateY(0); }
	}
}

/* Ilustračné rendery v dvoch verziách (IllustrationImage) — viditeľná len verzia k režimu.
   !important: WooCommerce nastavuje obrázkom vo výpise display:block s vyššou špecificitou. */
:root:not([data-theme="dark"]) .beart-ill--dark,
:root[data-theme="dark"] .beart-ill--light {
	display: none !important;
}