/**
 * Branike theme — minimal runtime CSS.
 * Per-visitor dark mode: toggling .is-dark-mode on <html> re-maps the color
 * presets to the dark palette (Design Manual §10). Everything uses
 * var(--wp--preset--color--*), so the whole site re-skins with zero layout shift.
 * Persistence + no-FOUC inline head script = HUB module (ADR-003 §5, Fáza 4).
 */

:root {
	color-scheme: light;
}

/*
 * Horizontal-overflow guard. Off-screen fixed/absolute widgets — e.g. the closed
 * WooCommerce mini-cart drawer, parked just past the right edge — can widen the
 * mobile layout viewport and let the whole page pan sideways. That sideways pan
 * drags the fixed navigation drawer (and its × button) off-screen. Clipping the
 * x-axis at the root pins everything to the visible viewport. `clip` (not
 * `hidden`) leaves the y-axis untouched, so the sticky header keeps working.
 */
html {
	overflow-x: clip;
}
/*
 * 🔴 27. 10. 2026 (branike.com /branike-forms/, mobil): `html { overflow-x: clip }` NESTAČÍ.
 * Na koreni sa `overflow` prenesie na VIEWPORT a tam sa `clip` správa ako `hidden` —
 * viewport sa dá posúvať ďalej (odmerané: `scrollTo(50, 0)` → `scrollX` 10, prst posúva
 * stránku doľava/doprava), keď niečo v obsahu pretečie (tu Custom HTML orbit, `width:100%`
 * + padding bez `border-box`, o 10 px). Na `body` sa `overflow` už neprenáša (koreň nie je
 * `visible`), takže tu `clip` naozaj oreže a NEvytvorí posuvný kontajner — `position: sticky`
 * (hlavička) funguje ďalej, `fixed` prvky sa neorezávajú (patria viewportu).
 * Brána: harness-bt-prechod-1011.mjs T12.
 */
body { overflow-x: clip; } /* jeden riadok = jednoznačná kotva mutácie M13/M14 */
/*
 * 🔴 27. 10. 2026 (branike.com /branike-forms/, /branike-blocks-…/ a ďalšie): orbit
 * (Custom HTML zo skillu bkv-orbit-hub) mal v starších stránkach reset `box-sizing`
 * len na POTOMKOCH, nie na `.bkv-orbit` samom — koreň s `width:100%` (alebo
 * `min-width: calc(100% + 60px)`) + padding bol o 20–28 px širší než stĺpec a na
 * telefóne vyliezol za okraj (skill to opravil 6. 8., stránky spred toho nie).
 * Jedno pravidlo tu opraví všetky stránky naraz bez prepisovania obsahu.
 * Brána: harness-bt-prechod-1011.mjs T13.
 */
.bkv-orbit { box-sizing: border-box; }

/*
 * WooCommerce mini-cart hardening. The CLOSED drawer stays in the DOM as a fixed,
 * off-screen box (~480px past the right edge). Because it is `position:fixed`, the
 * root `overflow-x: clip` above cannot always contain it, so on mobile it widens
 * the layout viewport and lets the whole page pan sideways / zoom out. In its
 * closed state (`--is-hidden`) the overlay is already fully transparent and
 * non-interactive, so we drop it out of layout entirely. Opening the cart removes
 * `--is-hidden`, so the drawer still slides in and works normally.
 */
.wc-block-components-drawer__screen-overlay--is-hidden {
	display: none !important;
}

/*
 * ── NOČNÁ PALETA SA UŽ NEPÍŠE TU ────────────────────────────────────────────
 * 🔴 Tu bola tabuľka pevných hexov (`--wp--preset--color--accent: #A78BFA` …).
 * Pre fialovú Branike bola správna — je z kapitoly 10 dizajn manuálu — ale
 * v momente, keď si klient vybral inú paletu, sa deň a noc rozišli: deň zelený,
 * noc stále fialová. Presne to Brani 07-27 videl.
 *
 * Nočnú paletu teraz počíta `BT_Palette` z tej DENNEJ, ktorá je práve aktívna.
 * Ten istý rebrík svetlostí, len odtieň sa vezme z palety klienta. Pribudne
 * dvadsať paliet → nepribudne ani jedna nočná tabuľka.
 */
html.is-dark-mode {
	background-color: var( --wp--preset--color--base );
	/* 🔴 Pozadie a text v páre aj na koreni — `body` ho aj tak prebije,
	   ale pravidlo, ktoré maľuje plochu, má vždy povedať aj čím sa na nej píše. */
	color: var( --wp--preset--color--contrast );
}

/*
 * 🔴 Most pre bloky písané aj pre Blocksy: `var(--theme-palette-color-8, #fff)`.
 * Branike téma Blocksy paletu nemá, takže fallback #fff platil aj v noci —
 * karta cenníka ostala biela a text na nej (už svetlý) zmizol. Brani 8. 10. 2026.
 * V bloku je hodnota zapísaná inline v uloženom obsahu, preto sa neopravuje
 * v bloku, ale tu: v noci premennú definujeme my. Cez deň zostáva #fff.
 * Rovnaký fallback má v branike-blocks ďalších 10 miest — opraví ich to naraz.
 */
html.is-dark-mode {
	--theme-palette-color-8: var( --wp--preset--color--surface );
}

/* Smooth, GPU-friendly theme switch (color only — no layout, no CLS). */
html.is-dark-mode,
html.is-dark-mode body {
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Dark-toggle button: small, subtle, square-ish (rendered via a core/html button). */
.branike-color-toggle {
	min-width: 2.5rem;
	padding: 0.45rem 0.6rem;
	font-size: 1rem;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	color: var( --wp--preset--color--contrast-two );
	background-color: transparent;
	border: 1px solid var( --wp--preset--color--accent-light );
	border-radius: 8px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.branike-color-toggle:hover,
.branike-color-toggle:focus-visible {
	background-color: var( --wp--preset--color--accent-light );
	color: var( --wp--preset--color--accent-strong );
}

/*
 * ── Sticky header ────────────────────────────────────────────────────────────
 * WordPress' position support puts `.is-position-sticky` on the header GROUP, but
 * that group's only parent is the `<header class="wp-block-template-part">` wrapper,
 * which is exactly as tall as the group itself (measured on dev: both 79px). A sticky
 * box can only travel inside its parent's box, so with zero spare height it scrolls
 * straight out of view — `position: sticky` was applied and did nothing at all.
 *
 * Fix: promote the WRAPPER, whose parent is `.wp-site-blocks` (the whole page, so
 * there is room to travel), and drop the inner group back to `static` so exactly one
 * sticky box remains. `:has()` keeps this opt-in per header pattern — presets without
 * the sticky attribute are untouched. Browsers without `:has()` get a normal
 * non-sticky header (graceful, nothing breaks, no layout shift either way).
 *
 * `top` mirrors core's own admin-bar logic (block-library/style.css): offset by the
 * admin bar height, and 0 below 600px where the bar is no longer fixed. For visitors
 * the variable is undefined, so the fallback 0px applies.
 */
@supports selector( :has( * ) ) {
	header.wp-block-template-part:has( > .is-position-sticky ) {
		position: sticky;
		top: var( --wp-admin--admin-bar--height, 0px );
		z-index: 10;
	}
	header.wp-block-template-part:has( > .is-position-sticky ) > .is-position-sticky {
		position: static;
	}
	@media screen and ( max-width: 600px ) {
		header.wp-block-template-part:has( > .is-position-sticky ) {
			top: 0;
		}
	}
}

/*
 * ── Sticky header that hides on scroll down ──────────────────────────────────
 * Opt-in from the settings page; `header-autohide.js` toggles the class.
 *
 * 🔴 THE RESTING STATE DECLARES NO `transform` ON PURPOSE. Any transform other
 * than `none` — including `translateY(0)` — makes this element the containing
 * block for `position: fixed` descendants, which would re-anchor the mobile
 * navigation drawer to the header instead of the viewport. The transform exists
 * only while the header is hidden. Going from `none` to `translateY(-100%)`
 * still animates, because `none` is interpolated as the identity matrix.
 *
 * Hiding is `transform` only — never height/display/position — so the document
 * flow is untouched and CLS stays 0.
 */
/*
 * ══ Prázdne pásy medzi hlavičkou, obsahom a pätičkou ══════════════════════════
 *
 * NÁLEZ (branike.com, 2026-08-02, odmerané v prehliadači): pod hlavičkou a nad
 * pätičkou bol na každej stránke pás cudzej farby — v dni biely, v noci čierny.
 * Nešlo o farbu, ale o skutočne prázdne miesto.
 *
 * Príčina: jadro vypisuje z `spacing.blockGap` pravidlo
 *     :where( .wp-site-blocks ) > * { margin-block-start: 24px }
 * ktoré platí aj pre TOP-LEVEL časti stránky. `main` tak dostal 24 px nad sebou
 * (pás pod hlavičkou) a `footer` 24 px nad sebou (pás nad pätičkou). Keďže
 * hlavička aj pätička majú vlastné pozadie a medzera nie, presvitalo ceznu telo
 * dokumentu — teda presne ten pruh, ktorý bolo vidno.
 *
 * 🔴 Blokový odstup vnútri obsahu sa NEMENÍ. Mení sa len vzťah troch najvyšších
 * súrodencov, ktoré na seba majú nadväzovať bez škáry. Selektor je zámerne
 * `.wp-site-blocks > tag` (0,1,1), aby spoľahlivo prebil `:where()` z jadra,
 * ktoré má špecificitu 0 — pravidlo musí VYHRAŤ, nie len existovať.
 * [[feedback_css_rule_must_win_not_exist]]
 */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > main,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/*
 * 🔴 26. 10. 2026 (belubiworld.com, úvod): medzi dvoma sekciami na celú šírku
 * presvital 16–24 px pás pozadia stránky. Ten istý blokový odstup jadra
 * (`:root :where(.is-layout-constrained) > *`) platí aj medzi dvoma `.alignfull`.
 * Brani: „Bez medzery" na všetkých weboch — kto medzeru chce, nastaví si ju
 * na bloku (okraj, medzerník, medzera blokov na skupine).
 *
 * · `.alignfull` za `.alignfull` → bez odstupu. V obsahu stránky (a čomkoľvek
 *   vnorenom) a v častiach šablóny (hlavička, pätička).
 * · Medzerník medzi dvoma sekciami dáva presne svoju výšku (inak 24 + výška + 24).
 *   Len v obsahu — medzerníky šablón (titulok → obsah, obsah → štítky) sú dizajn.
 * · `<style>`/`<script>`/`<link>` medzi nimi sa nerátajú — `branike/columns`
 *   vypisuje `<style>` PRED svoj obal, takže `+` bez nich by minul.
 * · Okraj zadaný na bloku je inline → vyhrá vždy. Medzera blokov zadaná na
 *   skupine → `BT_Full_Gap` dá skupine `bt-own-gap` a pravidlo ju vynechá.
 * · Text medzi sekciami, široké (nie plné) bloky → odstup ostáva.
 * Brána: harness-bt-full-gap.mjs (skutočné stránky cez `php -S`).
 */
:is(.wp-block-post-content, .wp-block-template-part, :is(.wp-block-post-content, .wp-block-template-part) :is(.is-layout-constrained, .is-layout-flow)):not(.bt-own-gap) > .alignfull:is(
	.alignfull + *,
	.alignfull + :is(style, script, link, noscript, template) + *,
	.alignfull + :is(style, script, link, noscript, template) + :is(style, script, link, noscript, template) + *
),
:is(.wp-block-post-content, .wp-block-post-content :is(.is-layout-constrained, .is-layout-flow)):not(.bt-own-gap) > :is(.alignfull + .wp-block-spacer, .alignfull + .wp-block-spacer + .alignfull) {
	margin-block-start: 0;
}
/*
 * Prvá viditeľná sekcia za skrytými súrodencami (`<style>`, skrytý H1) sedí na hlavičke.
 * Samotný skrytý H1 + sekciu rieši T9 nižšie — tu len kombinácie so `<style>` (inak by T9
 * nemal čo strážiť a jeho mutácia by prežila, CI #854).
 */
:is(.is-layout-constrained, .is-layout-flow) > .alignfull:is(
	:is(style, script, link, noscript, template):first-child + *,
	:is(style, script, link, noscript, template, .bt-sr-h1):first-child + :is(style, script, link, noscript, template) + *
) {
	margin-block-start: 0;
}

/*
 * 🔴 Skrývanie pri rolovaní má zmysel LEN pri lepiacej hlavičke — bez nej voľba
 * nerobila nič (odmerané 10. 10. 2026 na it2: vzor bez „Lepiace", trieda
 * `bt-header--hidden` sa prepínala, hlavička dávno odišla s obsahom). Zapnutá voľba
 * preto hlavičku prilepí sama, nech je vzor akýkoľvek. Priehľadná hlavička nad
 * hero ostáva `absolute` (silnejší selektor nižšie) — prilepená by nad obsahom
 * nebola čitateľná.
 */
body.bt-header-autohide header.wp-block-template-part {
	position: sticky;
	top: var( --wp-admin--admin-bar--height, 0px );
	z-index: 10;
}
body.bt-header-autohide header.wp-block-template-part > .is-position-sticky { position: static; }
body.bt-header-autohide header.wp-block-template-part:has( > .bt-topbar ) {
	top: calc( var( --wp-admin--admin-bar--height, 0px ) - var( --bt-topbar-h, 0px ) );
}
@media screen and ( max-width: 600px ) {
	body.bt-header-autohide header.wp-block-template-part { top: 0; }
	body.bt-header-autohide header.wp-block-template-part:has( > .bt-topbar ) { top: calc( 0px - var( --bt-topbar-h, 0px ) ); }
}
body.bt-header-autohide header.wp-block-template-part {
	transition: transform 0.25s ease;
}

body.bt-header-autohide header.wp-block-template-part.bt-header--hidden {
	transform: translateY( -100% );
}

/* Motion is a preference, not a decoration: honour it, but still hide/show. */
@media ( prefers-reduced-motion: reduce ) {
	body.bt-header-autohide header.wp-block-template-part {
		transition: none;
	}
}

/*
 * 🔴🔴 HEADER RESPONSIVENESS MOVED OUT — DO NOT PUT IT BACK HERE (2026-08-06)
 *
 * Two rules used to live here behind a hard-coded `@media (max-width: 781px)`:
 * header rows may wrap, and the mobile logo/hamburger placement. The menu,
 * however, collapses at `BT_Header_Actions::collapse_breakpoint()` — a computed
 * value. Two numbers that did not know about each other.
 *
 * MEASURED on branike.com: between 720 and 781 px the menu was already inline
 * while the bar still had to wrap → header 222 px tall, menu on three rows.
 * That was Brani's "the header keeps jumping".
 *
 * Both rules now come from `BT_Header_Actions::build_below_collapse_css()`,
 * which is generated from the SAME breakpoint. A literal breakpoint written
 * back into this file will fail `harness-bt-viewport-band.php`.
 * [[feedback_one_breakpoint_many_rules]]
 */

/*
 * 🔴🔴 Screen-reader label must never widen the document (2026-08-06).
 *
 * MEASURED on /prirucka/: `document.scrollWidth` was 818 at a 540 px viewport
 * (and 1790 at 940) — the whole page slid left/right, showing a bare strip of
 * background next to the content. The culprit was a single absolutely
 * positioned element: `label.wp-block-search__label.screen-reader-text`,
 * computed `width: 540px`.
 *
 * WHY IT DIFFERED PER PAGE: `.screen-reader-text{width:1px}` and core's
 * `.wp-block-search__label{width:100%}` have the SAME specificity, so source
 * order decides. Core prints the search block's inline style at a position that
 * depends on which blocks the request rendered — on `/` it landed before
 * `wc-blocks.css`, on `/prirucka/` after it. Same markup, opposite outcome.
 *
 * The fix is specificity, not order: two classes beat one, on every page.
 * Proven in the browser — scrollWidth went 818 → 540, 1790 → 940.
 */
.wp-block-search__label.screen-reader-text {
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.wp-block-search__label.screen-reader-text:focus {
	width: auto;
	height: auto;
	overflow: visible;
}

/*
 * ── Vyskakovacie hľadanie ─────────────────────────────────────────────────────
 * Predloha: branike.sk (viď `_reference/PRESETY-PREDLOHY.md`). Celoplošný tmavý
 * overlay, veľký vstup len so spodnou linkou, okrúhle brandové tlačidlo s lupou,
 * výsledky v dvoch stĺpcoch (náhľad + titulok), „Zobraziť viac" vycentrované.
 *
 * `hidden` na koreni robí celú prácu skrývania — JS len prepína atribút, takže
 * zatvorený modál je úplne von z layoutu (0 CLS, žiadny dopad na LCP).
 */
.bt-search-modal[hidden] {
	display: none;
}

.bt-search-modal {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	/*
	 * Horný odstup musí byť VÄČŠÍ než hlavička, inak vstup s lupou sedí presne
	 * na riadku hlavičky a opticky sa s ňou bije (Brani, 07-26: „lupa nie je pre
	 * modál zarovnaná"). ~18 vh posadí vstup pod hlavičku aj pri 2-radových
	 * variantách; `clamp` drží rozumný odstup aj na nízkych oknách.
	 */
	padding: clamp( 4rem, 18vh, 11rem ) clamp( 1rem, 5vw, 3rem ) clamp( 2rem, 8vh, 5rem );
	overflow-y: auto;
	background-color: rgba( 17, 24, 39, 0.97 );
	/* dark-mode-exception: modál vyhľadávania je uzavretý tmavý prekryv nad stránkou. */
	color: #fff;
}

/* Kým je modál otvorený, stránka pod ním sa nesmie scrollovať. */
html.bt-search-open {
	overflow: hidden;
}

.bt-search-modal__inner {
	width: 100%;
	max-width: 60rem;
}

.bt-search-modal__row {
	display: flex;
	align-items: center;
	gap: 1rem;
	border-bottom: 2px solid rgba( 255, 255, 255, 0.35 );
	padding-bottom: 0.75rem;
}

.bt-search-modal__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: clamp( 1.5rem, 4vw, 2.5rem );
	line-height: 1.2;
	padding: 0.25rem 0;
}

.bt-search-modal__input::placeholder {
	color: rgba( 255, 255, 255, 0.5 );
}

.bt-search-modal__input:focus {
	outline: none; /* fokus je zreteľný cez linku pod celým riadkom (nižšie) */
}

.bt-search-modal__row:focus-within {
	border-bottom-color: var( --wp--preset--color--accent, #7c3aed );
}

/* Okrúhle tlačidlo s lupou — ikona je nakreslená CSS-om, žiadny extra request. */
.bt-search-modal__submit {
	flex: 0 0 auto;
	width: 3.25rem;
	height: 3.25rem;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background-color: var( --wp--preset--color--accent, #7c3aed );
	position: relative;
}

/* dark-mode-exception: modál vyhľadávania je uzavretý tmavý prekryv nad stránkou. */
.bt-search-modal__submit::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.95rem;
	height: 0.95rem;
	margin: -0.6rem 0 0 -0.6rem;
	border: 2px solid #fff;
	border-radius: 50%;
}

/* dark-mode-exception: modál vyhľadávania je uzavretý tmavý prekryv nad stránkou. */
.bt-search-modal__submit::after {
	content: "";
	position: absolute;
	top: 58%;
	left: 57%;
	width: 0.6rem;
	height: 2px;
	background-color: #fff;
	transform: rotate( 45deg );
	transform-origin: left center;
}

/* Krížik — kruh s dvoma prekríženými čiarkami, vždy v pravom hornom rohu. */
.bt-search-modal__close {
	position: absolute;
	top: clamp( 0.75rem, 3vh, 2rem );
	right: clamp( 0.75rem, 3vw, 2rem );
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

/* dark-mode-exception: modál vyhľadávania je uzavretý tmavý prekryv nad stránkou. */
.bt-search-modal__close::before,
.bt-search-modal__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 25%;
	width: 50%;
	height: 2px;
	background-color: #fff;
}

.bt-search-modal__close::before {
	transform: rotate( 45deg );
}

.bt-search-modal__close::after {
	transform: rotate( -45deg );
}

.bt-search-modal__status {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: rgba( 255, 255, 255, 0.65 );
}

.bt-search-modal__results {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem 2.5rem;
	margin-top: 1.5rem;
}

/*
 * 🔴 BOLO `48em`, ZMENENÉ NA `768px` (19. 8. 2026)
 *
 * `48em` je pri predvolenom písme 768 px, takže to vyzeralo ako sused ostatných
 * zlomov. Lenže `em` v media query sa počíta z veľkosti písma PREHLIADAČA, nie
 * z našej. Návštevník, ktorý si ju zväčšil — bežné pri slabšom zraku — dostal
 * zlom napríklad pri 960 px a výsledky hľadania sa mu prepli inde než všetko
 * ostatné na webe. Bola to jediná jednotka mimo px zo 61 zlomov v repe, takže
 * to nevyzeralo ako rozhodnutie, ale ako preklep.
 *
 * ⚠️ Nie je to „em je zlé". Pre TYPOGRAFIU je relatívna jednotka správna. Ale
 * hranica ROZLOŽENIA sa musí zhodovať so zvyškom systému, inak sa web zalomí
 * na dvoch rôznych miestach naraz.
 */
@media ( min-width: 768px ) {
	.bt-search-modal__results {
		grid-template-columns: 1fr 1fr;
	}
}

.bt-search-modal__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem;
	border-radius: 12px;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bt-search-modal__item:hover,
.bt-search-modal__item.is-active,
.bt-search-modal__item:focus-visible {
	background-color: rgba( 255, 255, 255, 0.1 );
}

.bt-search-modal__thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	object-fit: cover;
	background-color: rgba( 255, 255, 255, 0.12 );
}

.bt-search-modal__title {
	font-weight: 600;
	line-height: 1.35;
}

.bt-search-modal__more {
	display: block;
	margin: 2rem auto 0;
	width: -moz-fit-content;
	width: fit-content;
	color: inherit;
	font-weight: 600;
}

/*
 * 🔴 `display: block` vyššie PREBÍJA atribút `hidden` — ten skrýva len cez UA
 * stylesheet, takže autorské pravidlo vyhrá. Bez tohto riadku svieti „Zobraziť
 * viac" aj pri prázdnom vstupe (nahlásené naživo 07-26). Rovnaká pasca ako
 * `.bt-search-modal[hidden]` vyššie — každý prvok, ktorý JS skrýva cez `hidden`
 * a CSS mu nastavuje `display`, potrebuje tento pár.
 */
.bt-search-modal__more[hidden] {
	display: none;
}

/*
 * ── Mobile menu button: TRI čiarky, nie dve ───────────────────────────────────
 * WordPress core kreslí hamburger presne DVOMA pathmi (`M4 7.5h16v1.5H4z` +
 * `M4 15h16v1.5H4z` — odmerané na deve 07-26). Dve čiarky čítajú ľudia ako
 * nedorobené; tri sú zaužívaná konvencia.
 *
 * Skryjeme coreové SVG (je `aria-hidden`, takže prístupný názov tlačidla
 * „Open menu" ostáva nedotknutý) a tri čiarky nakreslíme JEDNÝM pseudo-elementom
 * cez background-image: žiadny extra DOM, žiadny JS, `currentColor` → funguje na
 * svetlej aj tmavej hlavičke. Box má rovnakú stopu 24×24 ako coreové SVG, takže
 * sa nič neposunie (CLS 0).
 */
.wp-block-navigation__responsive-container-open svg {
	display: none;
}

.wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-image:
		linear-gradient( currentColor, currentColor ),
		linear-gradient( currentColor, currentColor ),
		linear-gradient( currentColor, currentColor );
	background-size: 100% 2px;
	background-position: 0 5px, 0 11px, 0 17px;
	background-repeat: no-repeat;
}

/*
 * ── Mobile navigation overlay (full-screen, clean, generously padded) ─────────
 * Our headers use justifyContent:center/right on desktop, which must not leak
 * into the overlay. Force a single left-aligned column with real breathing room
 * so labels never stagger or glue to the screen edge.
 */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp( 1.5rem, 7vw, 3.25rem ) !important;
}
/*
 * Drawer, not full-bleed: the panel takes ~90% from the right so a sliver of the
 * page peeks behind it. MOVED to `BT_Header_Actions::build_below_collapse_css()`
 * — the drawer look belongs to "header is collapsed", which is one computed
 * breakpoint, not a literal. See the note near the top of this file.
 */

/* Close (×): always clearly visible — round tappable target, own contrast. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border-radius: 999px;
	color: var( --wp--preset--color--white, #fff );
	background-color: rgba( 255, 255, 255, 0.12 );
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
	background-color: rgba( 255, 255, 255, 0.22 );
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	padding-top: var( --wp--preset--spacing--50, 1.5rem );
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left;
	gap: clamp( 0.75rem, 2.5vh, 1.35rem );
	width: 100%;
}
/* Full-width, comfortable tap targets. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.35rem 0;
	font-size: clamp( 1.15rem, 4.5vw, 1.5rem );
}
/* Close (×) button — sits inside the padded edge, not jammed in the corner. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: clamp( 1.25rem, 5vw, 2rem );
	right: clamp( 1.25rem, 5vw, 2rem );
}

/*
 * Utility "hide on mobile": MOVED to `BT_Header_Actions::build_below_collapse_css()`.
 * "Mobile" ends where the header collapses — one breakpoint, not a literal.
 */

/*
 * Per-page container width (BT_Page_Settings, v2 kameň 1).
 * Overrides WP constrained-layout custom properties on <body> — pure CSS,
 * no JS, no layout shift (0 CLS). Applies only when a per-page value is set.
 */
/*
 * 🔴🔴 ŠÍRKA SA NASTAVUJE NA `main`, NIE NA `<body>`.
 *
 * NAMERANÉ na it2 (Brani, 29. 7.): „keď dám podujatia na celú šírku, tak to
 * aj menu roztiahne." Presne tak — premenná na `<body>` sa dedí do CELÉHO
 * dokumentu vrátane hlavičky a pätičky, takže sa s obsahom roztiahlo aj menu.
 *
 * Nastavenie sa volá „šírka OBSAHU" a presne to má robiť. Hlavička a pätička
 * majú vlastný vzhľad, ktorý si klient nastavuje inde — nesmú sa hýbať podľa
 * toho, akú šírku má práve otvorený článok.
 *
 * `main` je na to správne miesto: každá šablóna témy má práve jeden
 * (overené 12/12) a hlavička s pätičkou sú jeho SÚRODENCI, nie potomkovia.
 * Stráži to `harness-bt-page-settings.php`.
 */
body.bt-container-narrow main {
	--wp--style--global--content-size: 34rem;
}
body.bt-container-wide main {
	--wp--style--global--content-size: var( --wp--style--global--wide-size, 1200px );
}
body.bt-container-full main {
	--wp--style--global--content-size: 100%;
	--wp--style--global--wide-size: 100%;
}

/*
 * ── Medzera nad a pod obsahom stránky ───────────────────────────────────────
 * Brani 8. 10. 2026: obsah stránky sa lepil na pätičku — `page.html` pod
 * `wp:post-content` nemá žiadnu medzeru (`single.html` má spacer 70, preto
 * sa pravidlo týka len stránok). `page-no-title` nemá ani hornú.
 *
 * Predvolene ÁNO, stránka si ju vypne v paneli „Layout (Branike)"
 * → trieda `bt-space-off`. Šablóny „na celú šírku" a „landing" sa skladajú
 * zo sekcií, ktoré si okraje riešia samy — tých sa to netýka.
 *
 * Padding, nie margin: margin by sa s blockGap jadra zlial a výsledok by
 * závisel od toho, čo je posledný blok. CLS = 0 (rozmer je známy pri prvom
 * vykreslení, nič sa nedopočítava v JS).
 */
/*
 * 🔴 Brani 10. 10. 2026: „hore aj dole je biela medzera, to tam predtým
 * nebolo". Stránka, ktorá ZAČÍNA alebo KONČÍ sekciou na celú šírku (hero,
 * farebný pás, výzva), si okraj rieši sama — medzera by tam bola biely pás
 * medzi hlavičkou a hero, resp. medzi poslednou sekciou a pätičkou.
 * Odmerané na branike.com: 48 px hore na úvode, 64 px dole na 26 stránkach.
 * Medzera preto platí len vtedy, keď na tom okraji NIE JE `.alignfull`.
 */
body.page:not(.bt-space-off):not(.page-template-page-full-width):not(.page-template-landing) main .wp-block-post-content:not(:has(> .alignfull:last-child, > .alignfull + :is(style, script, link, noscript, template):last-child, > .alignfull + :is(style, script, link, noscript, template) + :is(style, script, link, noscript, template):last-child)) {
	padding-block-end: var( --wp--preset--spacing--70, 4rem );
}
body.page-template-page-no-title:not(.bt-space-off) main .wp-block-post-content:not(:has(> .alignfull:first-child, > :is(style, script, link, noscript, template, .bt-sr-h1):first-child + .alignfull, > :is(style, script, link, noscript, template, .bt-sr-h1):first-child + :is(style, script, link, noscript, template) + .alignfull)) {
	padding-block-start: var( --wp--preset--spacing--60, 3rem );
}
body.bt-space-off main .wp-block-post-content + .wp-block-spacer {
	display: none;
}

/*
 * ── Obsah + bočný panel ──────────────────────────────────────────────────────
 * Server-rendered obal okolo obsahu (BT_Page_Settings) — rozloženie drží trieda
 * od prvého vykreslenia, takže CLS = 0.
 *
 * 🔴🔴 O jednom či dvoch stĺpcoch rozhoduje šírka KONTAJNERA, nie okna.
 *
 * NAMERANÉ na it2 28. 7. (Brani zapol panel na podujatí):
 *     úzke rozloženie 680 px + panel → na obsah ostalo 344 px
 *     a na detail podujatia v ňom 248 px.
 * Panel bol pevných 18 rem a zapínal sa cez `@media ( min-width: 782px )`,
 * teda podľa OKNA. Okno bolo 1352, tak sa zapol — hoci stĺpec, v ktorom
 * naozaj leží, mal 680. To je ten istý omyl, ktorý sme v ten deň opravovali
 * už dvakrát inde.
 *
 * 🔴 RIEŠENÍM NIE JE ANI `@media`, ANI `@container`, ale štandardný „sidebar"
 * primitív (flex + wrap). `@container` by tu nepomohol: dotaz štýluje POTOMKOV
 * kontajnera, takže by sme na obal potrebovali ešte jeden obal. Flex to zvládne
 * sám a bez jediného zlomu v pixeloch:
 *
 *   · panel má základ 18 rem a berie si ho, kým je miesto
 *   · `flex-grow: 999` na obsahu zožerie všetok voľný priestor, takže sa panel
 *     nenaťahuje, kým sú vedľa seba
 *   · `min-inline-size: 60%` je PRAH: keď by obsah klesol pod 60 % kontajnera,
 *     riadok sa zalomí a panel ide pod obsah cez celú šírku
 *
 * Vychádza z toho prah ~800 px šírky KONTAJNERA (18 rem + medzera musí byť
 * najviac 40 %). Nikde ho nemusíme písať ani udržiavať — vyplynie zo vzťahu.
 *
 * 🔴 Pri ľavom paneli ostáva obsah v DOM PRVÝ a presúva sa len vizuálne
 * (`order`). Odčítačka aj klávesnica tak dostanú hlavný obsah skôr než
 * doplnkový panel (WCAG 2.1 — 1.3.2 a 2.4.3).
 */
.bt-with-sidebar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--60, 2rem );
}
.bt-with-sidebar > .bt-main {
	/* 🔴 `999` nie je preklep — obsah musí zožrať voľné miesto, inak by sa
	   panel roztiahol na polovicu. `min-inline-size` je prah zalomenia. */
	flex: 999 1 0;
	min-inline-size: 60%;
}
.bt-with-sidebar > .bt-sidebar {
	flex: 1 1 18rem;
	min-inline-size: 0;
}
/*
 * 🔴🔴 `wrap-reverse` NIE JE KOZMETIKA — bez neho skončí ľavý panel na telefóne
 * NAD článkom.
 *
 * `order: 1` platí aj po zalomení, takže panel, ktorý má na širokej obrazovke
 * stáť vľavo, sa na úzkej postaví PRED obsah. Návštevník tak vidí najprv
 * widgety a text až pod nimi. Odmerané v Chromiu (kontajner 1100, okno 430):
 *
 *     panel vpravo   obsah y = 80    panel y = 188   ← správne
 *     panel vľavo    obsah y = 146   panel y = 8     ← 🔴 panel hore
 *
 * Ironicky to išlo proti tomu, čo je o pár riadkov vyššie napísané ako výhoda:
 * v DOM obsah naozaj prvý JE (čítačka aj klávesnica sú v poriadku), ale oči ho
 * dostali ako druhý — teda nesúlad vizuálneho a fokusového poradia (WCAG 2.4.3).
 *
 * `wrap-reverse` obracia krížnu os: prvý riadok ide DOLE. Panel s `order: 1`
 * tak pri zalomení pristane pod obsahom sám, bez media query a bez napísaného
 * prahu — teda rovnakou cestou, akou vzniká aj samotné zalomenie.
 * Stráži to `_devtest/harness/harness-bt-sidebar-layout.mjs`.
 */
/*
 * 🔴🔴 `flex-end` PRI OBRÁTENEJ OSI ZNAMENÁ HORE — a bez tohto riadku visel
 * ľavý panel pri SPODKU riadku.
 *
 * Odmerané na branike.com 29. 8. (stránka 7215, okno 1352, kontajner 1256):
 *
 *     obsah y = 248    panel y = 560    → panel o 312 px NIŽŠIE
 *
 * `.bt-with-sidebar` má `align-items: flex-start`, čo je správne — lenže
 * `wrap-reverse` o riadok vyššie obracia priečnu os, takže „start" je zrazu
 * DOLE. Pravý panel `wrap-reverse` nemá, a preto tú istú chybu nikdy nemal.
 *
 * Mutácie priamo na živej stránke (Δ panela voči vrchu obsahu):
 *     dnes 312 px · `align-items: flex-end` 0 · `flex-wrap: wrap` 0
 * Posledná možnosť je pritom past: bez `wrap-reverse` skončí panel na telefóne
 * NAD článkom — presne nález z 21. 8., ktorý `wrap-reverse` opravil. Preto sa
 * obracia zarovnanie, nie zalamovanie.
 *
 * 🔴 Zmeriavaj to v SEKVENCII s prahom zalomenia, nie oddelene: „stoja vedľa
 * seba" je zelené aj vtedy, keď je panel odsunutý o 312 px — boxy sa stále
 * prekrývajú. [[feedback_hover_and_click_must_be_measured_in_sequence]]
 */
.bt-sidebar-left {
	flex-wrap: wrap-reverse;
	align-items: flex-end;
}
.bt-sidebar-left > .bt-main {
	order: 2;
}
.bt-sidebar-left > .bt-sidebar {
	order: 1;
}

/*
 * Search button — jemné, malé, on-brand (prepíše prípadné cudzie/červené štýly
 * z pluginov). Ikonové tlačidlo v hlavičke = mäkký fialový akcent, nie krikľavý blok.
 */
.wp-block-search__button {
	background-color: var( --wp--preset--color--accent-light );
	color: var( --wp--preset--color--accent-strong );
	border: none;
	border-radius: 8px;
	padding: 0.45rem 0.6rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}
/*
 * 🔴 `base`, NIE `#fff`. V noci je akcent SVETLÝ, takže biely text na ňom
 * padá — na it2 to na tlačidle „Pridať do košíka" dalo 2,41. Rovnaký pár
 * ako `elements.button` v `theme.json`, a rovnaký dôvod.
 */
.wp-block-search__button:hover,
.wp-block-search__button:focus-visible {
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base, #fff );
}
.wp-block-search__button svg { fill: currentColor; }

/*
 * WooCommerce ikony v hlavičke — účet a mini-košík.
 *
 * 🔴 PREČO TO TREBA (odmerané na it2.branike.sk 07-26):
 *   .wp-block-woocommerce-customer-account → display:block, šírka 680 px (celý rad!)
 *   .wp-block-woocommerce-mini-cart        → inline-block, 40×40
 * Keď ich klient položí do skupiny s rozložením „constrained" (čo je bežné — napr.
 * rad s menu), účet sa roztiahne cez celú šírku a košík spadne pod neho. Preto
 * vyzerali „kade-tade": nešlo o chybu patternu, ale o to, že tie bloky sú blokové
 * a plnošírkové, nech ich dáte kamkoľvek.
 *
 * Riešime to tu, nie v patterne, aby to platilo VŠADE — aj keď si ich klient
 * pretiahne inam v Site Editore.
 */
.wp-block-woocommerce-customer-account,
.wp-block-woocommerce-mini-cart {
	display: inline-flex;
	align-items: center;
	width: auto;
	max-width: none;
	vertical-align: middle;
}
.wp-block-woocommerce-customer-account .wc-block-customer-account__link,
.wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: auto;
	min-width: 40px;
	min-height: 40px;
	padding: 0 0.5rem;
	border: 0;
	border-radius: 8px;
	background-color: transparent;
	color: inherit;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-woocommerce-customer-account .wc-block-customer-account__link:hover,
.wc-block-mini-cart__button:hover {
	background-color: var( --wp--preset--color--accent-light );
	color: var( --wp--preset--color--accent-strong );
}
/* Focus musí ostať jasne viditeľný — WCAG 2.1, ovládanie klávesnicou. */
.wp-block-woocommerce-customer-account .wc-block-customer-account__link:focus-visible,
.wc-block-mini-cart__button:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent-strong );
	outline-offset: 2px;
}
/* Rovnaká optická veľkosť oboch ikon. */
.wp-block-woocommerce-customer-account svg,
.wc-block-mini-cart__button svg {
	width: 22px;
	height: 22px;
}

/*
 * Ikonové položky v e-shop hlavičkách (telefón, otváracie hodiny, adresa…).
 * Ikony sú inline Tabler SVG s pevným width/height priamo v markupe — tu sa rieši
 * len rozloženie, nie veľkosť, aby CSS nemohlo spôsobiť posun (CLS).
 */
.bt-ico-item .bt-ico {
	flex: 0 0 auto;
	color: var( --wp--preset--color--accent-strong );
}
/* Odstavce vnútri musia byť tesné — sú to dva riadky jedného údaja, nie text stránky. */
.bt-ico-text > p {
	margin: 0;
	line-height: 1.25;
}
.bt-ico-label {
	font-weight: 600;
}
.bt-ico-sub {
	font-size: 0.78em;
	opacity: 0.75;
}
/* V tmavom pruhu (topbar) musí ikona zdediť farbu textu, inak zmizne. */
.has-dark-three-background-color .bt-ico-item .bt-ico {
	color: currentColor;
}

/*
 * ── Widget oblasti (blok `branike/widget-area`) ─────────────────────────────
 *
 * 🔴 ODMERANÉ NA it2 (0.66.0): nadpis widgetu v tmavej pätičke bol tmavý na
 * tmavom — prakticky neviditeľný. Príčina nie je v našom kóde: `theme.json`
 * generuje pravidlo `h1, h2, h3, h4, h5, h6 { color: var(--…--contrast) }`
 * a to prebije farbu zdedenú z pruhu pätičky (odstavec bol biely, nadpis
 * `rgb(31,41,55)` — presne to je ten rozdiel).
 *
 * Riešime to zámerne ÚZKO — len vnútri widget oblasti, kde obsah dodáva klient
 * a nemá ako vedieť, na akom pozadí skončí. Globálne `color: inherit` na
 * nadpisy by rozbilo typografiu celého webu.
 *
 * Špecificita: `.bt-widget-area h3` = (0,1,1) prebije `h3` = (0,0,1) bez
 * `!important`. Žiadny rozmerový zásah → 0 CLS.
 */
/*
 * 🔴 Selektor musí pokrývať OBA obaly widget obsahu:
 *   · `.bt-widget-area`    — jedna oblasť (blok `branike/widget-area`)
 *   · `.bt-widget-columns` — rad stĺpcov v pätičke (blok `branike/widget-columns`)
 * Keď pribudol druhý blok (0.68.0), pravidlo mierilo len na prvý a nadpisy
 * v pätičke boli zase tmavé na tmavom. Odmerané v prehliadači, nie odhadnuté.
 */
:is( .bt-widget-area, .bt-widget-columns ) :is( h1, h2, h3, h4, h5, h6 ),
:is( .bt-widget-area, .bt-widget-columns ) .bt-widget__title {
	color: inherit;
}
/* Odkazy vo widgete rovnako — kontrast musí platiť aj pre ne (WCAG 2.1, 1.4.3). */
:is( .bt-widget-area, .bt-widget-columns ) a:where( :not( .wp-element-button ) ) {
	color: inherit;
}
/* Posledný widget v oblasti nesmie tlačiť medzeru do spodku stĺpca. */
:is( .bt-widget-area, .bt-widget-columns__col ) > .bt-widget:last-child > *:last-child {
	margin-bottom: 0;
}

/*
 * ── branike/social: zoznam bez odrážok ───────────────────────────────────────
 * 🔴🔴 ODMERANÉ NA ŽIVOM it2 07-27. Reset MUSÍ byť tu, v hárku, nie v inline
 * štýle bloku: WordPress prepúšťa inline štýly cez allowlist `safe_style_css`
 * (`safecss_filter_attr`) a `list-style` v ňom nie je. Namerané: `margin`
 * a `padding` z inline štýlu prešli (odsadenie 40 px → 0), ale
 * `list-style-type` ostalo `disc`, `<li>` mali `display:list-item`
 * a `::marker` sa vykreslil. Prejav: bodka pred prvou sociálnou ikonou
 * v hlavičke aj v pätičke — vo všetkých presetoch naraz.
 */
.bt-social,
.bt-social > li {
	list-style: none;
}

/*
 * ── branike/social: RESET OKRAJA ZOZNAMU ────────────────────────────────────
 * 🔴🔴 PREČO SA `margin` PRESŤAHOVAL Z INLINE ŠTÝLU SEM (2026-08-04)
 *
 * `render.php` písal do `style` bloku `margin:0` natvrdo. Inline štýl prebije
 * hárok VŽDY, takže pravidlo `footer .bt-social { margin-block-start: … }`
 * o dvadsať riadkov nižšie NEPLATILO. Odmerané na živom branike.com:
 * `margin-top: 0px`, medzera od nadpisu „Sledujte nás" **0 px** — presne stav,
 * ktorý to pravidlo malo odstrániť. Komentár pri ňom pritom predpokladal, že
 * inline `margin` môže prísť len z nastavenia člena; v skutočnosti ho tam dával
 * náš vlastný render. [[feedback_css_rule_must_win_not_exist]]
 *
 * 🔴 Reset tu ZOSTÁVA — bez neho by sa vrátil predvolený `margin` prehliadača
 * pre `<ul>` (1em zhora aj zdola) a rad ikon by odskočil.
 * 🔴 Poradie v hárku je zámerné: `footer .bt-social` je nižšie a špecifickejšie
 * (0,1,1 proti 0,1,0), takže vyhrá. A keď si člen margin bloku naozaj nastaví,
 * jadro ho vypíše inline a prebije oboje — tak to má byť.
 */
.bt-social {
	margin: 0;
}

.bt-social > li::marker {
	content: "";
}

/*
 * ── branike/social: DOTYKOVÝ CIEĽ ───────────────────────────────────────────
 * 🔴🔴 ODMERANÉ NA branike.com 2026-08-03: `footer .bt-social` — klikacia plocha
 * odkazu 20 × 20 px. Odkaz nemal vlastný `padding`, takže cieľ = veľkosť ikony.
 *
 * WCAG 2.5.8 (AA) žiada 24 × 24 CSS px, WCAG 2.5.5 (AAA) 44 × 44. Dvadsať je
 * pod oboma. Na dotykovom displeji to znamená, že sa medzi Facebookom
 * a Instagramom trafíš len omylom.
 *
 * 🔴 PREČO `min-inline-size`, A NIE VÄČŠIA IKONA: `size` je atribút bloku
 * s predvolenou hodnotou 20. Zdvihnúť default by SPÄTNE zväčšil ikony na
 * všetkých weboch, kde blok hodnotu nemá uloženú — teda skoro všade. Toto
 * mení PLOCHU, nie vzhľad: ikona zostáva presne taká, aká bola.
 *
 * 🔴 PREČO SA CIELE NEPREKRÝVAJÚ: `gap` je 8 px, cieľ 44 px → stredy susedných
 * odkazov sú 52 px od seba. WCAG 2.5.8 povoľuje podmerné ciele len ak sa
 * neprekrývajú; tu nie sú ani podmerné, ani sa neprekrývajú.
 *
 * 🔴 Dve triedy (0,2,0) zámerne — jedna by prehrala s ktorýmkoľvek
 * `.wp-block-… a` pravidlom z jadra alebo z rodičovskej témy.
 * [[feedback_css_rule_must_win_not_exist]]
 */
.bt-social .bt-social__link {
	min-inline-size: 44px;
	min-block-size: 44px;
}

/*
 * ── branike/social: ODSTUP OD NADPISU V PÄTIČKE ─────────────────────────────
 * 🔴🔴 ODMERANÉ: `margin-top` bloku `0px`, medzera od nadpisu „Sledujte nás"
 * doslova 0 — ikony sa lepili na text.
 *
 * 🔴 PREČO V HÁRKU, A NIE VO VZOROCH: presetov pätičky je štrnásť a na weboch,
 * ktoré si pätičku uložili v Site Editore, sa súbor vzoru už vôbec nečíta —
 * vykresľuje sa kópia z databázy. [[feedback_fse_db_copy_beats_theme_files]]
 * Oprava vo vzoroch by tie weby minula. Pravidlo v hárku ich pokryje všetky.
 *
 * 🔴 PREČO TO NEPREBIJE VLASTNÉ NASTAVENIE ČLENA: keď blok margin naozaj má,
 * jadro ho vypíše ako INLINE štýl, a ten vyhráva nad hárkom. Toto je teda
 * predvolená hodnota pre blok bez nastavenia, nie natvrdo daný odstup.
 *
 * 🔴 Obmedzené na pätičku: v hlavičke sedia ikony v riadku vedľa loga, kde by
 * horný odstup rozhodil zvislé zarovnanie celého pruhu.
 */
footer .bt-social {
	margin-block-start: var(--wp--preset--spacing--20, 1rem);
}
/* Ale v riadku vedľa loga/menu (flex) by ten odstup posunul ikony 5 px pod os riadku (footer-logo-social, 10. 10. 2026). */
footer .is-layout-flex:not(.is-vertical) > .bt-social { margin-block: 0; }

/*
 * ── ZVISLÝ ZOZNAM ODKAZOV V PÄTIČKE JE PRIREDKÝ ────────────────────────────
 *
 * 🔴 ODMERANÉ 30. 8. 2026 na `footer-4col` pri 1440 px:
 *
 *     položka menu   25 px     medzera medzi položkami   24 px
 *     6 položiek  →  celý zoznam 267 px
 *
 * Medzera je takmer taká vysoká ako samotný riadok. Zoznam odkazov tým prerastie
 * všetky ostatné stĺpce a pätička vyzerá roztrhaná — obsah stĺpcov vyšiel
 * 116 / 308 / 162 / 65 px, teda vedľa navigácie zostalo 146 až 243 px hluchého
 * miesta.
 *
 * 🔴 Nie je to chyba vzoru. Je to globálny `styles.spacing.blockGap: 1.5rem`
 * z `theme.json`, ktorý je pre odstavce a sekcie správny a pre zoznam odkazov
 * v pätičke priveľký. Preto sa NEMENÍ globálna hodnota, ale sa prebíja LEN
 * v pätičke a LEN pre zvislú navigáciu.
 *
 * 🔴 Prečo tento tvar selektora: rozostup vypisuje jadro cez vygenerovanú
 * triedu `wp-container-core-navigation-is-layout-*` (0-1-0). `footer` +
 * `.wp-block-navigation.is-vertical` + `> ul` má 0-3-1, takže vyhráva bez
 * `!important`. Overené meraním, nie odhadom zo špecificity.
 *
 * ⚠️ `row-gap`, nie `gap`: vodorovný rozostup si zvislý zoznam nepýta a keby sa
 * blok niekedy prepol na viacstĺpcový, nechceme mu zúžiť medzeru medzi stĺpcami.
 *
 * 🔴 HODNOTA JE ZÁMERNE MIMO ŠKÁLY a nie je to nedopatrenie. Najprv tu bolo
 * `var(--wp--preset--spacing--10, .75rem)` — lenže preset `10` v `theme.json`
 * NEEXISTUJE (škála začína na `20` = 0.5rem), takže sa ticho použil záložný
 * `.75rem`. Vyzeralo to, že sa opieram o škálu, a neopieral som sa: presne ten
 * druh tichého záskoku, ktorý sa pri ďalšej zmene nikto nedozvie.
 * Škála je stavaná pre SEKCIE (0.5 · 1 · 1.5 · 2 · 3 · 4 rem); pre riadky
 * zoznamu je 0.5rem natesno a 1rem späť priveľa. 0.75rem je teda vedomá
 * výnimka pre tento jeden prípad, napísaná priamo.
 */
footer .wp-block-navigation.is-vertical > ul.wp-block-navigation__container {
	row-gap: .75rem;
}

/*
 * ── PODMENU V ZÁSUVKE: ZATVORENÉ, SO ŠÍPKOU, OTVORÍ SA AŽ KLIKOM ────────────
 * 🔴🔴 ODMERANÉ NA it2 07-27, po zapnutí `openSubmenusOnClick`.
 *
 * Atribút sám nestačí. Jadro má v zásuvke pravidlo, ktoré podmenu NÁSILNE
 * ROZBALÍ — namerané: `aria-expanded="false"`, a napriek tomu
 * `display:flex; visibility:visible; opacity:1`. Na obrazovke to vyzeralo tak,
 * že „Services" len odsadene visí pod „Home" a nie je z toho jasné, že k nemu
 * patrí. Presne to Brani nechcel.
 *
 * Tu sa preto viditeľnosť podmenu viaže na to, čo hovorí PREPÍNAČ. `aria-expanded`
 * nie je ozdoba pre čítačky obrazovky — je to stav, a CSS ho má nasledovať.
 * Keď sa raz zmení mechanika v jadre, toto pravidlo ostane správne, lebo sa
 * pýta na stav, nie na triedu.
 *
 * `:has()` je zámerne opt-in: prehliadač bez neho dostane dnešné správanie
 * (rozbalené), nič sa nerozbije.
 *
 * Šípku treba vypísať zvlášť — v zásuvke ju jadro skrýva, lebo počíta s tým,
 * že je aj tak všetko rozbalené.
 */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:has( > .wp-block-navigation-submenu__toggle[aria-expanded="false"] )
	> .wp-block-navigation__submenu-container {
	display: none;
}

/*
 * 🔴 ŠÍPKA: `.wp-block-navigation` NA ZAČIATKU NIE JE OZDOBA — je to špecifickosť.
 *
 * Jadro šípku v zásuvke skrýva pravidlom
 * `.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__submenu-icon{display:none}`.
 * `:where()` má nulovú špecifickosť, takže je to (0,3,0) — presne toľko, koľko
 * mala prvá verzia tohto pravidla. Pri zhode rozhoduje poradie v dokumente
 * a `style.min.css` jadra sa načíta NESKÔR než téma, takže jadro vyhralo.
 *
 * Odmerané na it2 0.73.1: podmenu sa síce zatvorilo, ale šípka zmizla tiež —
 * a bez nej nie je z ničoho vidieť, že tam podmenu vôbec je. To je horšie než
 * pôvodný stav. Predradenie `.wp-block-navigation` dvíha špecifickosť na (0,4,0)
 * a pravidlo vyhrá bez `!important`.
 */
.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-icon {
	display: inline-flex;
	margin-inline-start: 0.35rem;
}

/*
 * Položka s podmenu v zásuvke: názov a šípka na JEDNOM riadku.
 *
 * 🔴 ODMERANÉ NA it2 0.73.6, po prepnutí `openSubmenusOnClick` na false.
 * Markup sa tým zmenil: rodič je `<a>` (aby sa naň dalo kliknúť) a šípka je
 * samostatné `<button class="wp-block-navigation__submenu-icon
 * wp-block-navigation-submenu__toggle">`. Odkaz ale dostal plnú šírku —
 * namerané 296 z 297 px — takže deväťpixelovej šípke neostalo miesto
 * a zalomila sa POD názov. Brani: „šípka keď je podmenu nesmie byť dole,
 * ale vedľa menu položky."
 *
 * Odkaz sa preto zúži na obsah a šípka dostane vlastnú klikaciu plochu.
 * 32×32 px nie je od oka: je to najmenšia plocha, ktorú WCAG 2.1 (2.5.5)
 * pre dotykový cieľ odporúča, a zároveň sa vojde do riadku menu bez toho,
 * aby ho zvýšila.
 *
 * 🔴 `:has( > …__toggle )` na KAŽDOM z týchto pravidiel je zámerné. Prvá verzia
 * ho mala len na poslednom a `width: auto` tak spadlo na VŠETKY položky menu —
 * odkazy sa zúžili na text a stratili spoločné zarovnanie. Na obrazovke to
 * vyzeralo, že „Home" je vľavo a zvyšok na stred. Pravidlo sa smie dotknúť len
 * tej jednej položky, ktorá podmenu naozaj má.
 */
.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:has( > .wp-block-navigation-submenu__toggle )
	> .wp-block-navigation-item__content {
	flex: 0 1 auto;
	width: auto;
}

.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:has( > .wp-block-navigation-submenu__toggle )
	> .wp-block-navigation__submenu-icon {
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 2rem;
	min-height: 2rem;
	padding: 0;
}

/* Samotná šípka: 9 px bola sotva viditeľná, 16 px je čitateľná aj na telefóne. */
.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:has( > .wp-block-navigation-submenu__toggle )
	> .wp-block-navigation__submenu-icon svg {
	width: 16px;
	height: 16px;
}

.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:has( > .wp-block-navigation-submenu__toggle ) {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
}

.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item
	> .wp-block-navigation__submenu-container {
	flex-basis: 100%;
}


/*
 * ── BIELY PÁS NAD FAREBNÝM PRUHOM HLAVIČKY ──────────────────────────────────
 * 🔴 ODMERANÉ NA it2 07-27. Nie je to náš padding — je to JADRO:
 *   `:where(.wp-block-group.has-background){padding:1.25em 2.375em}`
 * Každá skupina s pozadím dostane 20 px zvislého paddingu. Vonkajší obal
 * hlavičky má biele pozadie (`base`), takže nad tmavým pruhom presvitalo
 * 20 px bielej. Brani: „hore je biely pás, to tam nechcem."
 *
 * `:where()` má NULOVÚ špecifickosť, takže na prebitie stačí čokoľvek —
 * `!important` netreba. Rady si nesú vlastný padding, takže sa nič nestratí.
 */
header.wp-block-template-part > .wp-block-group.has-background,
footer.wp-block-template-part > .wp-block-group.has-background {
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * 🔴 10. 10. 2026 — TO ISTÉ JADROVÉ PRAVIDLO DÁVA AJ 38 px VODOROVNE (2.375em).
 * Galéria pri 390 px: `header-stacked` mal obsah len 266 px široký — 38 px
 * z obalu s pozadím + 24 px globálneho paddingu vnútorného riadku. Logo
 * a ikony sa do toho nezmestili a hlavička sa zalomila na dva riadky.
 * Obal, ktorý NEMÁ vlastný globálny padding, odstup nenesie — nesú ho riadky
 * v ňom. `:not(.has-global-padding)`: obal s rozložením „constrained" si svoj
 * odstup berie z premennej a ten sa meniť nesmie.
 */
header.wp-block-template-part > .wp-block-group.has-background:not(.has-global-padding),
footer.wp-block-template-part > .wp-block-group.has-background:not(.has-global-padding) {
	padding-left: 0;
	padding-right: 0;
}

/* ══ BT FORM CONTROLS ▼ ═══════════════════════════════════════════════════════
 *
 * Formulárové prvky — jeden štandard, ŽIADNE nastavenie.
 *
 * Brani 07-27: výber zoradenia v obchode je „taký mini pásik". Nie je to chyba
 * obchodu — je to natívny `<select>`, ktorý si nikto nenaštýloval. To isté platí
 * pre filtre, komentáre, Fluent Forms aj naše pluginy. Preto sa to rieši TU,
 * raz, pre celý web, a nie v každom module zvlášť.
 *
 * 🔴 VŠETKY hodnoty idú z palety cez `var()`. Nič sa neukladá ako hex, takže
 *    noc funguje sama (BT_Palette premenné v tmavom režime remapuje) a každá
 *    dvojica prechádza kontrastnou bránou v `harness-bt-palettes.php`.
 *
 * 🔴 ŠÍPKA NEMÁ ZAPEČENÚ FARBU. Nie je to `url("data:image/svg+xml,…")` —
 *    tá by v noci ostala čierna na tmavom. Kreslia ju dva prechody s
 *    `currentColor`, takže farbu DEDÍ od textu poľa presne ako maska.
 *    Prečo nie `mask-image`: maska sa aplikuje na celý element a `<select>`
 *    nemá vlastný pseudoprvok, na ktorý by sa dala zavesiť — maskoval by sa
 *    aj text voľby. Prechod je jediný spôsob, ako farbu zdediť a text nechať
 *    na pokoji. Výsledok je ten istý: farba sa počíta v prehliadači.
 *
 * 🔴 HRANICA, KTORÚ TREBA POVEDAŤ NAHLAS: naštýlovať sa dá len ZATVORENÝ
 *    ovládač. Rozbalený zoznam kreslí operačný systém a CSS naň nedosiahne
 *    v žiadnom prehliadači. Prepísať by sa dal len vlastným JS komponentom —
 *    vlastná klávesnicová obsluha, ARIA, a na mobile by sa stratil natívny
 *    výber, ktorý je lepší než čokoľvek, čo postavíme. Vedomé rozhodnutie.
 *    Jediná páka, ktorú NA TO máme, je `color-scheme` nižšie — tá povie
 *    systému, akými farbami má ten rozbalený zoznam nakresliť.
 *
 * Špecificita `body :is(…)` = (0,1,2). O jeden krok nad plugin triedami
 * (`.ff-el-form-control` = 0,1,0) aj nad `.woocommerce-ordering select`
 * (0,1,1), takže nezáleží na poradí načítania štýlov. Podtečená je zámerne
 * nízko — potomkovská téma prebije to isté pravidlo bez `!important`.
 */

:root {
	--bt-field-bg:          var( --wp--preset--color--base );
	--bt-field-text:        var( --wp--preset--color--contrast );
	--bt-field-border:      var( --wp--preset--color--contrast-three );
	--bt-field-placeholder: var( --wp--preset--color--contrast-three );
	--bt-field-focus:       var( --wp--preset--color--accent );
	--bt-field-invalid:     var( --wp--preset--color--error );
	--bt-field-muted-bg:    var( --wp--preset--color--surface );
	--bt-field-muted-text:  var( --wp--preset--color--contrast-three );

	/* Rovnaký rádius aj zvislé odsadenie ako `elements.button` v theme.json —
	   pole a tlačidlo vedľa seba musia pôsobiť ako jedna sada. */
	--bt-field-radius:      10px;
	--bt-field-min-height:  44px;   /* WCAG 2.5.5 / 2.5.8 — cieľ pre prst */
	--bt-field-pad-x:       0.85rem;
	--bt-field-pad-y:       0.6rem;
}

/*
 * Systémové ovládacie prvky v noci. Toto je jediná vec, ktorá dosiahne na
 * ROZBALENÝ zoznam, na natívny výber dátumu aj na posuvník — prehliadač ich
 * prekreslí tmavými farbami sám. Bez toho by sa v tmavom režime otvoril biely
 * zoznam. Denný `color-scheme: light` je hore v hlavičke súboru.
 */
html.is-dark-mode {
	color-scheme: dark;
}

body :is(
	input:not( [type] ),
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="number"],
	input[type="date"],
	input[type="datetime-local"],
	input[type="month"],
	input[type="week"],
	input[type="time"],
	select,
	textarea
):not( :where( .wp-block-search__input, .bt-search-modal__input, #wpadminbar * ) ) {
	box-sizing: border-box;
	max-width: 100%;
	min-height: var( --bt-field-min-height );
	padding: var( --bt-field-pad-y ) var( --bt-field-pad-x );
	font-family: inherit;
	/* 16 px je spodná hranica, pod ktorou iOS pri zaostrení stránku priblíži. */
	font-size: 1rem;
	line-height: 1.4;
	color: var( --bt-field-text );
	background-color: var( --bt-field-bg );
	border: 1px solid var( --bt-field-border );
	border-radius: var( --bt-field-radius );
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * 🔴 `#wpadminbar *` vo výnimke NIE JE opatrnosť navyše — je to odmeraný nález.
 * Admin lišta má vlastné vyhľadávacie pole (`.adminbar-input`) a to naše
 * pravidlo mu na it2 natiahlo výšku na 44 px. Vidí to len prihlásený, takže
 * by to bolo ticho nesprávne dlho. Admin lišta je kus WordPressu, nie webu.
 */
body :is( input, select, textarea ):not( :where( #wpadminbar * ) )::placeholder {
	color: var( --bt-field-placeholder );
	opacity: 1;  /* Firefox inak stlmí na ~0.54 a kontrast spadne pod bránu. */
}

body textarea {
	min-height: 8rem;
	line-height: 1.6;
	resize: vertical;
}

/*
 * Šípka — dva trojuholníkové polovičky z `currentColor`, priložené k sebe.
 * Vrstva s 45deg je ĽAVÁ polovica (ďalej od pravého okraja), 135deg pravá;
 * odsadenia sa preto musia líšiť presne o šírku polovice (5 px).
 * `[multiple]` a `[size]` zoznam nerozbaľujú → šípka by klamala.
 */
body select:not( [multiple] ):not( [size] ) {
	padding-right: 2.25rem;
	cursor: pointer;
	background-image:
		linear-gradient( 45deg, transparent 50%, currentColor 50% ),
		linear-gradient( 135deg, currentColor 50%, transparent 50% );
	background-size: 5px 5px, 5px 5px;
	background-position: right 17px center, right 12px center;
	background-repeat: no-repeat;
}

[dir="rtl"] body select:not( [multiple] ):not( [size] ),
body [dir="rtl"] select:not( [multiple] ):not( [size] ) {
	padding-right: var( --bt-field-pad-x );
	padding-left: 2.25rem;
	background-position: left 12px center, left 17px center;
}

/*
 * Zaostrenie. Prstenec je `outline`, nie `box-shadow` — v režime vysokého
 * kontrastu (forced-colors) box-shadow zmizne, outline nie.
 * `accent` na `base` aj na `surface` je gatovaná dvojica (harness, oba režimy).
 */
body :is(
	input:not( [type] ),
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="number"],
	input[type="date"],
	input[type="datetime-local"],
	input[type="month"],
	input[type="week"],
	input[type="time"],
	select,
	textarea
):not( :where( .wp-block-search__input, .bt-search-modal__input, #wpadminbar * ) ):focus-visible {
	outline: 2px solid var( --bt-field-focus );
	outline-offset: 2px;
	border-color: var( --bt-field-focus );
}

body :is( input, select, textarea ):is( :disabled, [readonly] ) {
	color: var( --bt-field-muted-text );
	background-color: var( --bt-field-muted-bg );
	cursor: not-allowed;
}

body :is( input, select, textarea )[aria-invalid="true"] {
	border-color: var( --bt-field-invalid );
}

/*
 * Zaškrtávacie políčka a prepínače ostávajú NATÍVNE — `accent-color` prefarbí
 * značku aj v noci a nestratí sa prístupnosť ani správanie na dotyku.
 * Veľkosť dvíhame na 1.15rem, aby sa dali trafiť prstom.
 */
body :is( input[type="checkbox"], input[type="radio"] ) {
	accent-color: var( --wp--preset--color--accent );
	min-width: 1.15rem;
	min-height: 1.15rem;
}

body :is( input[type="checkbox"], input[type="radio"] ):focus-visible {
	outline: 2px solid var( --bt-field-focus );
	outline-offset: 2px;
}

/* ══ BT FORM CONTROLS ▲ ══════════════════════════════════════════════════════ */

/* ══ BT SHOP BADGES ▼ ═══════════════════════════════════════════════════════
 *
 * Odznaky v obchode — štyri štýly, farba zo slotu palety.
 *
 * Brani 27. 7. 2026: „chcem pár variantov na výber: klasika, farebné,
 * so zvýraznením, s rámom aj bez."
 *
 * Dizajn je TU, hodnoty prídu z `BT_Badges::build_css()` ako štyri premenné:
 *   --bt-badge          farba slotu, cez `var()` → drží krok s paletou aj v noci
 *   --bt-badge-on       text na plnej výplni (dopočítaný, `var()` sa nezmeria)
 *   --bt-badge-soft-on  text na tinte (dopočítaný z TINTY, nie z farby slotu)
 *
 * 🔴 Prečo `color-mix` a nie druhá farba z palety: tinta sa musí vyhodnotiť
 * v prehliadači, aby sa v noci prepočítala sama z nočného `base`. Uložený
 * svetlý odtieň by bol zamrznutá kópia — presne to, čo sme dvakrát rušili.
 * PHP tú istú zmes počíta v `BT_Badges::mix()`, takže brána vie zmerať kontrast
 * a nemusí si ho domýšľať.
 *
 * 🔴 Odznak leží NAD fotkou produktu. Preto majú `fill`, `soft` aj `outline`
 * vlastnú plochu — kontrast je pri nich zmerateľný a bránou strážený.
 * Štýl `text` plochu nemá, takže jeho čitateľnosť závisí od fotky pod ním.
 * Je to vedomé (je to najtichší variant, pre katalógy bez akcií) a povedané
 * aj v tooltipe pri nastavení. Predvolený NIE JE.
 */

.wc-block-components-product-sale-badge,
.woocommerce span.onsale,
.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 1.75rem;
	padding: 0.25rem 0.7rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	white-space: nowrap;
	background-color: transparent;
	color: var( --wp--preset--color--contrast );
}

/* ── fill — plná výplň slotom, text dopočítaný ───────────────────────────── */
body.bt-badges--fill :is( .wc-block-components-product-sale-badge, span.onsale ) {
	background-color: var( --bt-badge );
	border-color: var( --bt-badge );
	color: var( --bt-badge-on );
}

/* ── soft — 15 % tinta slotu nad podkladom stránky, text dopočítaný ──────── */
body.bt-badges--soft :is( .wc-block-components-product-sale-badge, span.onsale ) {
	background-color: color-mix( in srgb, var( --bt-badge ) 15%, var( --wp--preset--color--base ) );
	border-color: color-mix( in srgb, var( --bt-badge ) 15%, var( --wp--preset--color--base ) );
	color: var( --bt-badge-soft-on );
}

/* ── outline — plocha z podkladu stránky, rám a text v slote ─────────────── */
body.bt-badges--outline :is( .wc-block-components-product-sale-badge, span.onsale ) {
	background-color: var( --wp--preset--color--base );
	border-color: var( --bt-badge );
	color: var( --bt-badge );
}

/* ── text — holý text, žiadna plocha ─────────────────────────────────────── */
body.bt-badges--text :is( .wc-block-components-product-sale-badge, span.onsale ) {
	padding-inline: 0;
	background-color: transparent;
	border-color: transparent;
	color: var( --bt-badge );
}

/*
 * Odčítačka obrazovky si ponecháva pôvodné „Product on sale" od Woo — náš
 * filter mení len viditeľný text. Zmena „ZĽAVA" → „−25 %" teda nezhorší to,
 * čo počuje nevidiaci návštevník.
 */

/* ══ BT SHOP BADGES ▲ ═══════════════════════════════════════════════════════ */

/* ══ BT SHOP LINKS ▼ ═══════════════════════════════════════════════════════
 * Obľúbené a Porovnanie ako ikonové odkazy v rade hlavičky, plus fotka
 * prihláseného pri účte. Rozmer, farbu aj prstenec zaostrenia dedia
 * z `BT_Header_Actions::CONTROLS` — tu je len bublina s počtom a avatar.
 */
.bt-wishlist-link,
.bt-compare-link {
	position: relative;
	text-decoration: none;
}
.bt-shop-count {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-end: 2px;
	min-inline-size: 16px;
	padding: 0 4px;
	font-size: 11px;
	line-height: 16px;
	font-weight: 600;
	text-align: center;
	border-radius: 999px;
	background-color: var( --wp--preset--color--accent );
	/* 🔴 `backgroundColor` bez `textColor` = tmavé na tmavom. Pár, nie polovica. */
	color: var( --wp--preset--color--base );
}
/* Prázdny zoznam → žiadna bublina. `hidden` sám o sebe prehrá s `position`. */
.bt-shop-count[hidden] {
	display: none;
}

/*
 * Fotka prihláseného namiesto panáčika.
 * 🔴 Rozmer sa berie z premennej radu ikon, aby účet nevytŕčal — a `object-fit`
 * je povinný: štvorcový výrez z obdĺžnikovej fotky inak roztiahne tvár.
 */
.bt-account-avatar {
	inline-size: 26px;
	block-size: 26px;
	border-radius: 999px;
	object-fit: cover;
	display: block;
}

/* ══ BT SHOP LINKS ▲ ═══════════════════════════════════════════════════════ */

/* ══ BT PRODUCT META ▼ ═════════════════════════════════════════════════════
 * Katalógové číslo · kategórie · značka pod tlačidlom do košíka.
 *
 * Brani 28. 7. k predlohe: „tie kategórie a ostatné sú super nápad."
 *
 * 🔴 Blok `woocommerce/product-meta` už tie údaje vypisuje — nič nové sem
 * negenerujeme, len im dávame tvar z predlohy: názov poľa VERZÁLKAMI a
 * stlmene, hodnota normálne. Menej kriku, ľahšie čítanie.
 *
 * 🔴 Prázdne pole (produkt bez značky) si blok rieši sám a nevypíše ho —
 * preto tu nie je žiadne `display: none`, ktoré by neskôr niečo skrylo omylom.
 */
.wp-block-woocommerce-product-meta {
	margin-block-start: 1.25rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var( --wp--preset--color--surface );
	font-size: 0.95rem;
	line-height: 1.7;
}
.wp-block-woocommerce-product-meta .wp-block-woocommerce-product-sku,
.wp-block-woocommerce-product-meta .wc-block-components-product-sku,
.wp-block-woocommerce-product-meta .wp-block-post-terms {
	display: block;
}
/*
 * Názov poľa dodáva blok ako prvý textový uzol s prefixom (napr. „SKU:").
 * Bez zásahu do markupu ho vieme odlíšiť len tam, kde ho blok obalí — preto
 * verzálky nasadzujeme na PREFIX bloku, nie na celý riadok.
 */
.wp-block-woocommerce-product-meta .wp-block-post-terms__prefix,
.wp-block-woocommerce-product-meta .wc-block-components-product-sku__label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --wp--preset--color--contrast-two );
}
.wp-block-woocommerce-product-meta a {
	color: var( --wp--preset--color--contrast-two );
	text-decoration: none;
}
.wp-block-woocommerce-product-meta a:hover {
	color: var( --wp--preset--color--accent-strong );
	text-decoration: underline;
}

/* ══ BT PRODUCT META ▲ ═════════════════════════════════════════════════════ */

/* ══ BT ACCOUNT NAV ▼ ══════════════════════════════════════════════════════
 * Ikony pri položkách navigácie „Môj účet".
 *
 * Brani 28. 7.: „bolo by krásne mať v Môj účet ikonky ako na foto, detail,
 * ale pre oči je to krásne." Presne tak — je to detail, preto je celý
 * v CSS a nepridáva ani bajt do HTML.
 *
 * 🔴 Ikony sú `mask-image` s `currentColor`, nie obrázky s farbou v sebe:
 * v tmavom režime a pri aktívnej položke musia farbu zdediť.
 *
 * 🔴 `aria-hidden` netreba — pseudo-prvok odčítačka obrazovky nečíta.
 * Text položky ostáva jediným prístupným názvom.
 */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
/*
 * 🔴 `li` je flex kontajner zámerne: v markupe WooCommerce sú medzi značkami
 * odriadkovania a tabulátory. V blokovom `li` z nich vznikne prázdny riadkový
 * box a každá položka narastie o výšku riadka (namerané na it2: 78 px namiesto
 * 46). Vo flex kontajneri sa biele znaky na anonymnú položku nemenia.
 */
.woocommerce-MyAccount-navigation li {
	display: flex;
	/* 🔴 Woo blocktheme dáva položkám spodné odsadenie 1rem — riadky sa rozliezli. */
	margin: 0;
	padding: 0;
}
.woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	inline-size: 100%;
	line-height: 1.3;
	/*
	 * 🔴 Bez `border-box` sa 44 px počíta na OBSAH a s odsadením vyjde 62 px
	 * (namerané na it2). Dotykový cieľ má byť 44, nie o tretinu vyšší riadok.
	 */
	box-sizing: border-box;
	/*
	 * 🔴🔴 Fallback pre neznámy endpoint (cudzí plugin si pridá vlastnú položku)
	 * PATRÍ SEM, na odkaz — nie do `::before`. Vlastná premenná nastavená priamo
	 * na pseudo-prvku prebije akúkoľvek hodnotu zdedenú z `a`, takže by ikonu
	 * dostali VŠETKY položky rovnakú (namerané na it2: bodka všade).
	 */
	--bt-acc: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E" );
	/* 44 px dotykový cieľ — položky menu sa klikajú aj na mobile. */
	min-block-size: 44px;
	padding: 0.55rem 0.9rem;
	text-decoration: none;
	color: var( --wp--preset--color--contrast-two );
	border-block-end: 1px solid var( --wp--preset--color--surface );
	border-radius: 8px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.woocommerce-MyAccount-navigation li a:hover {
	background-color: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--accent-strong );
}
.woocommerce-MyAccount-navigation li a:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}
.woocommerce-MyAccount-navigation li.is-active a {
	background-color: var( --wp--preset--color--accent );
	/* 🔴 Pozadie a text vždy v páre — inak tmavé na tmavom. */
	color: var( --wp--preset--color--base );
	font-weight: 600;
}

/* Ikona pred textom. Tvar dodá `--bt-acc` z pravidiel nižšie. */
.woocommerce-MyAccount-navigation li a::before {
	content: "";
	inline-size: 20px;
	block-size: 20px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var( --bt-acc ) center / contain no-repeat;
	mask: var( --bt-acc ) center / contain no-repeat;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a {
	--bt-acc: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders a {
	--bt-acc: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1 12H5z'/%3E%3Cpath d='M9 7V5a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads a {
	--bt-acc: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='m8 11 4 4 4-4'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address a {
	--bt-acc: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account a {
	--bt-acc: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	--bt-acc: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4H6v16h8'/%3E%3Cpath d='M18 12H10'/%3E%3Cpath d='m15 9 3 3-3 3'/%3E%3C/svg%3E" );
}
/* Naše endpointy z WooKitu. */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--oblubene a {
	--bt-acc: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7z'/%3E%3C/svg%3E" );
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--moja-kniznica a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--moje-faktury a {
	--bt-acc: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h10l4 4v12H5z'/%3E%3Cpath d='M15 4v4h4'/%3E%3C/svg%3E" );
}

/* Môj Branike účet (LG portál vo WC, 5. 10. 2026) — licencie a weby = kľúč. */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--branike-ucet a {
	--bt-acc: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m10.85 12.15 8.65-8.65'/%3E%3Cpath d='m18 5 2 2'/%3E%3Cpath d='m15 8 2 2'/%3E%3C/svg%3E" );
}

/* Moja práca (BSM, 30. 9. 2026) — rozcestník pracovníka. */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--moja-praca a {
	--bt-acc: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E" );
}

/* ══ BT ACCOUNT NAV ▲ ══════════════════════════════════════════════════════ */

/* ══ BT DEMO STORE NOTICE ▼ ═══════════════════════════════════════════════
 *
 * NÁLEZ (branike.com, 2026-08-02, odmerané v prehliadači): oznam „Toto je demo
 * obchod" sedel uprostred stránky a na `/moj-ucet-2/` zakrýval pole Heslo —
 * teda ovládací prvok, bez ktorého sa používateľ neprihlási.
 *
 * Príčina je stret dvoch cudzích CSS, nie naše nastavenie:
 *   · `woocommerce.css`            → `position: absolute; top: 0`
 *   · `woocommerce-blocktheme.css` → `bottom: 0`
 * Absolútne pozicovaný prvok bez pozicovaného predka sa ukotví k počiatočnému
 * obsahovému bloku, takže `bottom: 0` znamená spodok PRVEJ OBRAZOVKY — a keďže
 * `absolute` roluje s dokumentom, oznam skončí uprostred obsahu.
 * Odmerané: `position: absolute`, dopočítané `top: 651px`.
 *
 * 🔴 `fixed`, nie `absolute`: oznam má byť ukotvený k oknu, nie k dokumentu.
 * 🔴 `top: auto` je povinné — inak `top: 0` z `woocommerce.css` prebije `bottom`
 *    a oznam skočí hore pod hlavičku.
 * 🔴 Odsadenie obsahu, aby oznam neprekryl koniec stránky. Dáva sa LEN keď je
 *    demo režim zapnutý (`body.woocommerce-demo-store`), takže bežný web
 *    o žiadne miesto neprichádza.
 * [[feedback_css_rule_must_win_not_exist]]
 */
body.woocommerce-demo-store .woocommerce-store-notice,
body.woocommerce-demo-store p.demo_store {
	position: fixed;
	top: auto;
	bottom: 0;
}

/* 🔴🔴 BIELY PÁS POD PÄTIČKOU (Brani, 2026-08-03 — „prečo tam pridáva ten biely pás")
 *
 * Odmerané v prehliadači na branike.com: `.wp-site-blocks` malo
 * `padding-bottom: 72px`, pätička končila 72 px nad koncom dokumentu a tá
 * medzera svietila bielym pozadím stránky.
 *
 * Príčina sú DVA ZDROJE PRAVDY o tom, či oznam existuje:
 *   · triedu `woocommerce-demo-store` vypíše PHP a na stránke ZOSTANE navždy
 *   · samotný oznam skryje WooCommerce cez JS inline `style="display:none"`
 *     hneď, ako ho návštevník zavrie (pamätá si to v cookie `store_notice`)
 *
 * Odsadenie sa teda držalo triedy, ktorá hovorí „oznam je zapnutý", zatiaľ čo
 * oznam už dávno nebolo vidieť. Odmerané: `display: none`, výška 0 — a napriek
 * tomu 72 px odsadenia.
 *
 * 🔴 `:has()` sa pýta na SKUTOČNÝ STAV oznamu, nie na triedu. Keď je oznam
 * viditeľný, odsadenie platí (inak by fixný pruh prekryl koniec stránky); keď
 * ho návštevník zavrie, zmizne aj odsadenie. Overené v prehliadači: 72 px → 0.
 * [[feedback_gate_must_read_the_real_token]] · [[feedback_css_rule_must_win_not_exist]]
 *
 * 🔴 Bez `:has()` (staršie prehliadače) pravidlo neplatí a odsadenie sa nedá —
 * teda návrat k stavu „oznam môže prekryť pätičku", nie k bielemu pásu.
 * Prekrytá pätička je menšie zlo než trvalá diera na každej stránke.
 */
body.woocommerce-demo-store:has(
	.woocommerce-store-notice:not([style*="none"]),
	p.demo_store:not([style*="none"])
) .wp-site-blocks {
	padding-bottom: 4.5rem;
}

/* Admin lišta posúva stránku, nie okno — oznam je fixný, takže sa jej netýka. */
body.admin-bar.woocommerce-demo-store .woocommerce-store-notice,
body.admin-bar.woocommerce-demo-store p.demo_store {
	top: auto;
}
/* ══ BT DEMO STORE NOTICE ▲ ═══════════════════════════════════════════════ */

/* ══ BT HEADER EXTRAS ▼ ═══════════════════════════════════════════════════
 * Tagline pod názvom webu + prepínač jazykov v rade ikon (BT_Header_Extras).
 *
 * 🔴 Obidve pribúdajú do hlavičky, ktorá má KONEČNÚ ŠÍRKU. Preto sú tesné:
 * tagline sa neláme na druhý riadok a prepínač si nepýta viac miesta než
 * ostatné ikony. Odmerané pri ikonách obchodu: 9 položiek menu + 6 ikon
 * po 43 px = 1209 px do riadka širokého 1200 → košík spadol nižšie.
 */

.bt-header-tagline {
	margin: 2px 0 0;
	font-size: .8125rem;
	line-height: 1.3;
	/* 🔴 Tlmená farba je token palety, nie hex — inak by v noci nestmavla
	   spolu s hlavičkou a ostala by svietiť. */
	color: var(--wp--preset--color--contrast-three, #6B7280);
	/* Popis býva dlhý; radšej ho skrátime, než aby rozhodil výšku hlavičky. */
	max-width: 42ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Na úzkej obrazovke hlavička nemá miesto ani na názov + popis. */
@media (max-width: 600px) {
	.bt-header-tagline { display: none; }
}

.bt-header-lang {
	display: inline-flex;
	align-items: center;
	/* Rovnaký dotykový cieľ ako ostatné ovládacie ikony (WCAG 2.5.5). */
	min-height: var(--bt-hicon-box, 40px);
}

/* 🔴 `select` od LingoPressu prichádza s vlastnou šírkou; bez tohto by rad
   ikon roztiahol a na 1200 px hlavičke by košík spadol do druhého riadka. */
.bt-header-lang select,
.bt-header-lang .lp-switcher select {
	max-width: 9rem;
	font-size: .875rem;
}
/*
 * Branike Translate (free) v hlavičke (26. 10. 2026): jeho rozbaľovací prepínač vždy
 * píše názov jazyka. Pri vzhľade „len vlajka" ostane názov pre čítačku, nie na očiach.
 * Prepínač sedí v toku hlavičky — nie `fixed` ako plávajúce tlačidlo.
 */
.bt-header-lang--free .lingopress-widget {
	position: static;
}
/*
 * 🔴 27. 10. 2026 (belubiworld, telefón): zoznam jazykov vyliezal za pravý okraj obrazovky
 * (390 px: 187..443). Do okna ho po otvorení posunie Branike Translate (lingopress.js
 * `fitList`); tu len strop šírky, aby sa na úzkej obrazovke vôbec zmestil.
 */
.bt-header-lang--free .lp-dropdown-list {
	max-width: calc(100vw - 16px);
}
.bt-lang-noname .lp-current-name {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}
/* ══ BT HEADER EXTRAS ▲ ═══════════════════════════════════════════════════ */


/* ══ BT MOBILE BODY FLOOR ▼ ═══════════════════════════════════════════════
 *
 * Spodná hranica veľkosti pre BEŽNÝ TEXT na mobile.
 *
 * 🔴 PREČO `!important` — jediná vec, ktorá tú hodnotu prebije.
 * `branike/text` má `supports.typography.fontSize: false` a namiesto toho
 * vlastný atribút `fontSize`, ktorý `computeStyles()` zapíše priamo do markupu
 * ako `style="font-size:14.5px"`. Inline štýl je mimo dosahu témy: `theme.json`
 * ho neprebije, lebo core generuje `:root :where(.wp-block-branike-text){…}` —
 * `:where()` má NULOVÚ špecifickosť a žiadny `!important`. Zmerané na WP 7.1-RC4.
 * Autorský `!important` v stylesheete je jediné, čo autorský inline porazí;
 * presne na tom stojí aj samotný core (`block-supports/states.php:672`).
 * Je to vedomá výnimka z pravidla „žiadne !important" — správa sa ako utility.
 *
 * 🔴 PREČO NIE PLOŠNE na `.wp-block-branike-text`
 * Malé písmo nie je vždy chyba. ODMERANÉ na branike.com (19. 8. 2026):
 *   12–13 px + `font-weight: 6–900`  → štítky a nadpisy sekcií („Backend",
 *                                       „Architektúra ekosystému") — ZÁMER, nechať
 *   13–15 px + `font-weight: 400`    → bežný text a popisy kariet — PRIMALÉ
 * Rozhoduje teda HRÚBKA, nie samotná veľkosť. Preto `:not()` na tučné rezy;
 * všetky tučné hodnoty (600/700/800/900) sú zapečené inline, overené.
 *
 * 🔴 ZLOM JE 782 px = core `@tablet` (`settings.viewport.tablet`), NIE 480.
 *
 * Pôvodne tu bolo 480 (core `@mobile`) a ODMERANÉ na branike.com to fungovalo:
 * pri 413 px šlo 41 prvkov na 16 px. Lenže 480 px je len ÚZKY mobil. Väčšie
 * telefóny na šírku a malé tablety padajú do pásma 481–767 px — a tam by popis
 * karty ostal na 14,5 px. Brani to na telefóne videl ako „stále malé".
 *
 * 🔴 NEMENÍ sa `settings.viewport.mobile` v `theme.json`. Bolo by to lákavé
 * (aby „to číslo sedelo"), ale posunutím `mobile` na 782 by core `@tablet`
 * vyšlo naprázdno — `@media (782px < width <= 782px)` nezachytí nič — a rozbili
 * by sme responzívne štýly jadra kvôli jednej záplate. Správne párovanie je:
 * spodná hranica bežného textu platí pre mobil AJ tablet, čiže po `tablet`.
 *
 * `harness-bt-typography.php` (bod 5) preto porovnáva toto číslo so
 * `settings.viewport.TABLET`. Keď sa rozídu, brána sčervenie — to je jej úloha.
 *
 * ⚠️ DOČASNÉ. Je to záplata na zapečené px, nie cieľový stav. Cieľ je, aby
 * `branike/text` px do markupu nezapekal — to je zmena `save()` a chce
 * `deprecated` + migráciu. Pozor: samotné zapnutie `supports.typography.fontSize`
 * to NEVYRIEŠI — náš atribút sa volá rovnako ako core (`fontSize`) a core by
 * hodnotu „14.5px" čítal ako SLUG PRESETU (`has-14-5-px-font-size`), čím by sa
 * zmenil markup a všetky existujúce bloky by boli neplatné.
 *
 * OVEROVANIE: na živom webe pravidlo trafilo 41 prvkov, všetkých 41 reálne
 * zmenilo `getComputedStyle().fontSize`, a 0 necielených sa nezmenilo.
 * Pravidlo teda VYHRÁVA, nielen existuje. [[feedback_css_rule_must_win_not_exist]]
 *
 * 🔴 DOSAH ZMERANÝ NA CELOM WEBE (19. 8. 2026, 196 slovenských URL zo sitemap):
 *     1251 prvkov `branike/text` má zapečený font-size
 *        564 bežný rez (13 · 14 · 14,5 · 15 · 16 · 16,5 · 17 · 18 px)
 *        687 tučný rez  (štítky a nadpisy — tých sa podlaha ZÁMERNE netýka)
 *     → toto pravidlo dnes trafí 250 prvkov na 14 URL.
 * Tých 41 vyššie bolo z JEDNEJ stránky; celok je väčší.
 */
/* ── 🔧 JEDINÉ MIESTO, KDE SA MENÍ VEĽKOSŤ ────────────────────────────────
 *
 * Chceš text na mobile väčší alebo menší? Zmeň TOTO jedno číslo, nič iné.
 * Platí len pod zlomom nižšie (do 782 px); desktopu sa to nedotkne.
 *
 * ┌──────────────────────────────────────────────────────────────────────┐
 * │  1rem      = 16 px   ← teraz                                         │
 * │  1.0625rem = 17 px   (ako odsek témy na mobile)                      │
 * │  1.125rem  = 18 px                                                   │
 * └──────────────────────────────────────────────────────────────────────┘
 *
 * 🔴 V `rem`, nie v px — a je to zámer, nie zvyk.
 * `rem` sa škáluje s veľkosťou písma nastavenou v PREHLIADAČI, takže návštevník,
 * ktorý si ju zväčšil (bežné pri slabšom zraku), dostane väčšiu podlahu. Pevných
 * `16px` by mu ju zastropovalo — pri hodnote, ktorej celý zmysel je čitateľnosť,
 * by to bolo proti sebe.
 * Rovnako je v `rem` celá škála v `theme.json` (`small` 0.875, `huge` 2.5–3.5),
 * takže px by tu bola jediná výnimka v inak jednotnej téme.
 *
 * ℹ️ V paneli Štýly sa jednotka dá prepnúť pri každom poli (px / rem / em) —
 * kto chce vidieť px, prepne si to tam.
 *
 * ⚠️ Nie je to nastavenie v administrácii a ZÁMERNE ním nie je. Do Štýlov to
 * dať nejde — `theme.json` generuje `:root :where(.wp-block-branike-text){…}`
 * bez `!important` a zapečený inline štýl to neprebije (zmerané na 7.1-RC4).
 * A vlastný panel v Branike Theme by duplikoval to, čo WP 7.1 prináša natívne
 * (`RESPONSIVE_STATES` = Tablet/Mobile v paneli Štýly). Po oprave `branike/text`
 * celá táto sekcia zmizne a veľkosti sa budú nastavovať v Štýloch.
 */
:root {
	/* 19. 8. 2026: 1rem → 1.0625rem (16 → 17 px) na Braniho žiadosť. */
	--bt-mobile-body-min: 17px;
}

@media (max-width: 782px) {

	p.wp-block-branike-text:is(
		[style*="font-size:12px"],   [style*="font-size:12.5px"],
		[style*="font-size:13px"],   [style*="font-size:13.5px"],
		[style*="font-size:14px"],   [style*="font-size:14.5px"],
		[style*="font-size:15px"],   [style*="font-size:15.5px"]
	):not(:is(
		[style*="font-weight:6"], [style*="font-weight:7"],
		[style*="font-weight:8"], [style*="font-weight:9"]
	)) {
		font-size: var( --bt-mobile-body-min, 17px ) !important;
		/* Riadkovanie sa zapeká zvlášť (`line-height:1.6`) a pri väčšom písme
		   drží — preto ho tu zámerne nesaháme. */
	}
}
/* ══ BT MOBILE BODY FLOOR ▲ ═══════════════════════════════════════════════ */

/* ══ „Zobraziť košík" vo výpise produktov ako obrysové tlačidlo ═══════════
 * Po pridaní do košíka WooCommerce (blok `woocommerce/product-button`,
 * `get_view_cart_html()`) ukáže pod tlačidlom holý podčiarknutý odkaz
 * `a.added_to_cart` — 14 px / 400, bez rámu. Brani 28. 9. 2026: „nevýrazné".
 * Je to ďalší krok nákupu, preto sekundárne tlačidlo: rovnaký tvar ako hlavné
 * (radius 10 px, 600), obrys namiesto plochy. Odmerané na it2 (WC 11.1.2).
 * Farby vždy v páre: text accent-strong na podklade stránky, pri hover plocha
 * accent + text base — nikdy tmavé na tmavom v tmavých paletách.
 */
.wp-block-woocommerce-product-button a.added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box; /* bez toho 68 px namiesto 48,5 (zmerané na it2) */
	min-block-size: 44px; /* dotykový cieľ */
	margin-block-start: 0.5rem;
	padding: calc( 0.75rem - 2px ) calc( 1.5rem - 2px );
	border: 2px solid var( --wp--preset--color--accent );
	border-radius: 10px;
	background-color: transparent;
	color: var( --wp--preset--color--accent-strong );
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-woocommerce-product-button a.added_to_cart:hover {
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
}
.wp-block-woocommerce-product-button a.added_to_cart:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent-strong );
	outline-offset: 2px;
}
@media ( prefers-reduced-motion: reduce ) {
	.wp-block-woocommerce-product-button a.added_to_cart { transition: none; }
}

/* ══ Košík: rovnako široký ako nadpis nad ním ══════════════════════════════
 * 🔴 Brani 28. 9. 2026 (it2 /kosik/, 1352 px): „košík je skôr doľava ako na stred".
 * `woocommerce-blocktheme.css` dá košíku `max-width: 1000px` a počíta s tým, že
 * ho vycentruje rozloženie stránky. Šablóna košíka má obsah `alignwide` v rozložení
 * FLOW (bez automatických okrajov) — košík ostal vľavo a vpravo 200 px prázdne,
 * pod nadpisom širokým 1200 px. Košík teda dostane šírku obsahu: ľavý aj pravý
 * okraj sedí s nadpisom a s riadkom menu. (0,3,1) > (0,2,1) WooCommerce.
 */
.woocommerce-cart main .wp-block-post-content > .woocommerce {
	max-width: none;
}

/* ══ Hlavička pokladne (`parts/header-checkout.html`) ═════════════════════
 * Odkaz „Košík" (`woocommerce/cart-link`) je jediná cesta späť — dotykový
 * cieľ 44 px, viditeľné zameranie. Čiaru pod hlavičkou dáva blok (accent-light
 * ako `header-default`), nie CSS.
 */
.bt-checkout-header .wc-block-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	box-sizing: border-box;
	min-block-size: 44px;
	padding-inline: 0.5em;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}
.bt-checkout-header .wc-block-cart-link:hover .wc-block-cart-link__text {
	text-decoration: underline;
}
.bt-checkout-header .wc-block-cart-link:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent-strong );
	outline-offset: 2px;
}
.bt-checkout-header .wc-block-cart-link svg {
	inline-size: 24px;
	block-size: 24px;
}

/*
 * Sociálne siete (blok branike/social) jednofarebne: farba textu pruhu, farba
 * značky až pri prejdení myšou / fokuse (Brani 10. 10. 2026). `!important`, lebo
 * blok píše farbu inline (`color:currentColor`) a hárok by inak neprebil.
 * Farbu značky nesie odkaz v premennej `--bt-net` (render.php) — v hárku žiadny hex.
 */
.bt-social.is-style-mono .bt-social__link { transition: color .15s ease; }
.bt-social.is-style-mono .bt-social__link:is(:hover, :focus-visible) { color: var(--bt-net, currentColor) !important; }
@media (prefers-reduced-motion: reduce) { .bt-social.is-style-mono .bt-social__link { transition: none; } }

/*
 * Na pruhu vo farbe akcentu značkové farby NEPREJDÚ (odmerané 10. 10. 2026 na it2:
 * facebook/instagram/linkedin/youtube na accent-strong 1,80–1,91 : 1 vo svetlom,
 * 2,18–2,30 : 1 v tmavom; prah pre ikonu je 3 : 1). Ikona tam preto ostane vo farbe
 * textu pruhu (štýl „značka" aj prejdenie myšou pri „jednofarebné") a prejdenie
 * ukáže kruh z farby textu — `box-shadow`, aby sa nič neposunulo.
 */
:is(.has-accent-background-color, .has-accent-strong-background-color) .bt-social .bt-social__link { color: inherit !important; }
:is(.has-accent-background-color, .has-accent-strong-background-color) .bt-social .bt-social__link:is(:hover, :focus-visible) {
	color: inherit !important;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 18%, transparent);
	box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 18%, transparent);
}

/*
 * ── PRIEHĽADNÁ HLAVIČKA (BT_Header_Transparent, 10. 10. 2026) ────────────────
 * Nad úvodným obrázkom (`body.bt-has-hero`) leží hlavička NA ňom; inde sa správa
 * ako bežná svetlá hlavička — inak biele na bielom (namerané 1 : 1).
 * `!important` pri farbe: jadrové `.has-white-color` má `!important` samo.
 */
body.bt-has-hero header.wp-block-template-part:has(.bt-header-transparent) {
	position: absolute;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 30;
}
body:not(.bt-has-hero) .bt-header-transparent {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
body:not(.bt-has-hero) .bt-header-transparent .has-white-color,
body:not(.bt-has-hero) .bt-header-transparent .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast) !important;
}

/*
 * ── PÄTIČKY (galéria 16 vzorov, 10. 10. 2026) ──────────────────────────────
 * 1. Dva farebné pásy pod sebou (CTA nad pätičkou) na seba nadväzujú. Medzi nimi
 *    bola medzera bloku 24 px a presvitalo ňou pozadie stránky (footer-cta).
 */
footer.wp-block-template-part .wp-block-group.has-background + .wp-block-group.has-background {
	margin-block-start: 0;
}

/*
 * 2. Oddeľovač nad copyrightom cez celú šírku obsahu. Jadrový predvolený štýl
 *    kreslí 100 px čiarku v strede — pod širokými stĺpcami vyzerala ako chyba.
 *    Farba z textu pruhu so 20 % krytím: sedí na tmavom aj svetlom pruhu.
 */
/* `is-style-wide` bez zarovnania (footer-contact-icons) kreslil čiaru len cez šírku obsahu — 335 px v strede 1440 px pätičky (galéria 10. 10. 2026). */
footer.wp-block-template-part .wp-block-separator:is(.alignwide, .is-style-wide):not(.is-style-dots) {
	width: auto;
	max-width: var(--wp--style--global--wide-size);
	height: 0;
	border: 0;
	border-top: 1px solid currentColor;
	background: none !important;
	opacity: .2;
}

/*
 * 3. (Selektor `.wp-site-blocks > footer`, nie `.wp-block-template-part` — brána zlomov
 *    hlavičky by inak 781 px brala ako zlom hlavičky.)
 *    781 = párové k 782: jadro skladá stĺpce pod seba práve pod 782 px
 *    (`max-width: 781px` v block-library) — mriežka musí zapnúť v tom istom pixeli.
 *    Na telefóne stĺpce s odkazmi vedľa seba po dvoch, prvý (značka, popis,
 *    siete) cez celú šírku. Pod sebou mala footer-mega 1 487 px a footer-4col 832 px.
 */
/*
 * E-mail v stĺpci pätičky sa nezalomí ani pri stĺpcoch vedľa seba (belubiworld 26. 10. 2026,
 * 782 px: stĺpec 163 px, `bunnybelubi@gmail.co|m`). Jadro dáva stĺpcom `word-break: break-word`,
 * čím sa adresa smie lámať kdekoľvek a stĺpec sa zúži pod ňu. Tu sa lámať nesmie a stĺpec
 * je aspoň taký široký ako adresa — ostatné stĺpce si rozdelia zvyšok.
 * `bt-col-email` dáva BT_Footer_Cols. Brána: harness-bt-footer-cols.mjs.
 */
.wp-site-blocks > footer .wp-block-column.bt-col-email {
	word-break: normal;
	overflow-wrap: normal;
	min-width: min-content;
}
/* …aj vnútri: kontakt s ikonou (`.bt-ico-sub`) má `overflow-wrap: anywhere` (footer-charity, 75 px). */
.wp-site-blocks > footer .wp-block-column.bt-col-email * {
	word-break: normal;
	overflow-wrap: normal;
}
@media (max-width: 781px) {
	.wp-site-blocks > footer .wp-block-columns.is-layout-flex:has(> .wp-block-column:nth-child(3)) {
		display: grid !important;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		column-gap: var(--wp--preset--spacing--40, 1.5rem);
		row-gap: var(--wp--preset--spacing--50, 2rem);
	}
	.wp-site-blocks > footer .wp-block-columns.is-layout-flex:has(> .wp-block-column:nth-child(3)) > .wp-block-column:first-child,
	/*
	 * Kontakt s ikonami a stĺpec len so sieťami tiež cez celú šírku: v polovici (159 px)
	 * sa adresa lámala pod ikonu a štvrtá sieť (44 px cieľ dotyku) padala na druhý riadok
	 * (galéria 10. 10. 2026: footer-charity, -contact-icons, -mega, -contact).
	 */
	.wp-site-blocks > footer .wp-block-columns.is-layout-flex:has(> .wp-block-column:nth-child(3)) > .wp-block-column:has(.bt-ico-item),
	.wp-site-blocks > footer .wp-block-columns.is-layout-flex:has(> .wp-block-column:nth-child(3)) > .wp-block-column:has(.bt-social):not(:has(nav, .wp-block-site-title)),
	.wp-site-blocks > footer .wp-block-columns.is-layout-flex:has(> .wp-block-column:nth-child(3)) > .bt-col-full-m {
		grid-column: 1 / -1;
	}
	/*
	 * Stĺpec, ktorý by ostal v rade SÁM (nepárny počet polovičných stĺpcov medzi
	 * stĺpcami cez celú šírku alebo na konci — 1., 3. alebo 5.), ide tiež cez celú šírku — inak sedí v ľavej polovici a pravá je prázdna.
	 * belubiworld 26. 10. 2026: „Kontakt" 172 px, e-mail zalomený pred posledným „m".
	 * `bt-col-full-m` dáva BT_Footer_Cols (vnorený `:has()` by prehliadač zahodil).
	 */
	.wp-site-blocks > footer .wp-block-columns.is-layout-flex:has(> .wp-block-column:nth-child(3)) > :is(
		:is(.wp-block-column:first-child, .bt-col-full-m) + .wp-block-column,
		:is(.wp-block-column:first-child, .bt-col-full-m) + .wp-block-column:not(.bt-col-full-m) + .wp-block-column:not(.bt-col-full-m) + .wp-block-column,
		:is(.wp-block-column:first-child, .bt-col-full-m) + .wp-block-column:not(.bt-col-full-m) + .wp-block-column:not(.bt-col-full-m) + .wp-block-column:not(.bt-col-full-m) + .wp-block-column:not(.bt-col-full-m) + .wp-block-column
	):not(.bt-col-full-m):is(:last-child, :has(+ .bt-col-full-m)) {
		grid-column: 1 / -1;
	}
	/*
	 * Riadok „názov · menu · siete · copyright" (footer-light, -logo-social, -minimal,
	 * spodný pás -cta a -newsletter) sa na telefóne zalamoval napoly: názov vľavo,
	 * menu na stred, siete znova vľavo. Pod sebou a všetko zľava.
	 */
	.wp-site-blocks > footer .wp-block-group.is-layout-flex.is-content-justification-space-between:has(> :nth-child(3)) {
		flex-direction: column;
		align-items: flex-start;
	}
	/* `nav` a `nav ul`, nie triedy navigácie — brána zlomov by ich v 781 px brala za hlavičku. */
	.wp-site-blocks > footer .wp-block-group.is-content-justification-space-between:has(> :nth-child(3)) nav,
	.wp-site-blocks > footer .wp-block-group.is-content-justification-space-between:has(> :nth-child(3)) nav ul {
		justify-content: flex-start;
	}
}
/*
 * Dva stĺpce (footer-2col): menu sa lepilo hneď za značku a pravá polovica pätičky
 * ostala prázdna. Druhý stĺpec bez pevnej šírky sa odsunie k pravému okraju.
 */
@media (min-width: 782px) {
	.wp-site-blocks > footer .wp-block-columns.is-layout-flex:not(:has(> .wp-block-column:nth-child(3))) > .wp-block-column:nth-child(2):last-child:not([style*="flex-basis"]) {
		flex: 0 1 auto;
		margin-inline-start: auto;
	}
}
/* Kontakt s ikonou: text sa zalomí vedľa ikony, nie pod ňu. */
.bt-ico-item.is-nowrap { flex-wrap: nowrap; }
.bt-ico-item .bt-ico-text { min-width: 0; }
.bt-ico-item .bt-ico-sub { overflow-wrap: anywhere; }
/* Vycentrovaná pätička (footer-simple, -stacked): siete pod centrovaným názvom/logom tiež na stred. */
.wp-site-blocks > footer .wp-block-group:has(> :is(.wp-block-site-title.has-text-align-center, .bt-footer-logo.is-center)) > .bt-social {
	justify-content: center;
}

/*
 * ── HORNÝ RIADOK (BT_Header_Topbar, 10. 10. 2026) ──────────────────────────────
 * Pevná výška (40 px) — lepiaca hlavička sa o ňu posunie nahor, takže pri
 * rolovaní odíde horný riadok a hlavný ostane. Farby z palety cez triedy
 * `has-*-background-color` / `has-*-color` (pár, oba režimy).
 */
header.wp-block-template-part { --bt-topbar-h: 40px; }
.bt-topbar {
	height: var(--bt-topbar-h);
	box-sizing: border-box;
	overflow: hidden;
	font-size: .875rem;
	line-height: 1.2;
	padding-inline: var(--wp--style--root--padding-left, 1.5rem);
}
.bt-topbar__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}
.bt-topbar__side {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-width: 0;
	white-space: nowrap;
}
.bt-topbar__side--right { margin-inline-start: auto; }
.bt-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.bt-topbar__item svg { flex: none; opacity: .85; }
.bt-topbar a { color: inherit; text-decoration: none; }
.bt-topbar a:hover,
.bt-topbar a:focus-visible { text-decoration: underline; text-underline-offset: .25em; }
.bt-topbar__button {
	padding: .3rem .8rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-weight: 600;
}
.bt-topbar__button:hover,
.bt-topbar__button:focus-visible { text-decoration: none !important; color: inherit; background: color-mix(in srgb, currentColor 14%, transparent); }
.bt-topbar .bt-social { margin: 0; }
@supports selector( :has( * ) ) {
	header.wp-block-template-part:has( > .bt-topbar ):has( > .is-position-sticky ) {
		top: calc( var( --wp-admin--admin-bar--height, 0px ) - var( --bt-topbar-h ) );
	}
	@media screen and ( max-width: 600px ) {
		header.wp-block-template-part:has( > .bt-topbar ):has( > .is-position-sticky ) {
			top: calc( 0px - var( --bt-topbar-h ) );
		}
	}
}

/* Siete „len v hornom riadku" / „skryť" — originály vo vzore zmiznú, panel menu a horný riadok ostanú. */
header.bt-social-top .bt-social:not( .bt-topbar * ):not( .bt-nav-extras * ),
header.bt-social-none .bt-social:not( .bt-nav-extras * ),
header.bt-social-none .bt-nav-extras__social {
	display: none !important;
}

/*
 * Horný riadok nahrádza kontaktný pruh vzoru (BT_Header_Topbar::dup_classes):
 * duplikát v pruhu zmizne; `bt-tb-full` = v pruhu neostal iný kontakt → preč celý pás
 * (sieť v ňom už skrýva bt-social-top/none). Zvýraznené .bt-ico-item a stĺpce ostávajú.
 */
header.bt-tb-phone .wp-block-group.has-background:not( .bt-topbar, .bt-topbar *, .bt-nav-extras *, .wp-block-column * ):not( :has( .wp-block-site-logo, .wp-block-site-title, nav, .bt-header-actions, .bt-ico-item, .wp-block-buttons, .wp-block-search, .wc-block-product-search, .wp-block-widget-area, .bt-center-logo, .wp-block-columns ) ) [data-bt-contact="contact_phone"],
header.bt-tb-email .wp-block-group.has-background:not( .bt-topbar, .bt-topbar *, .bt-nav-extras *, .wp-block-column * ):not( :has( .wp-block-site-logo, .wp-block-site-title, nav, .bt-header-actions, .bt-ico-item, .wp-block-buttons, .wp-block-search, .wc-block-product-search, .wp-block-widget-area, .bt-center-logo, .wp-block-columns ) ) [data-bt-contact="contact_email"],
header.bt-tb-address .wp-block-group.has-background:not( .bt-topbar, .bt-topbar *, .bt-nav-extras *, .wp-block-column * ):not( :has( .wp-block-site-logo, .wp-block-site-title, nav, .bt-header-actions, .bt-ico-item, .wp-block-buttons, .wp-block-search, .wc-block-product-search, .wp-block-widget-area, .bt-center-logo, .wp-block-columns ) ) [data-bt-contact="contact_address"],
header.bt-tb-hours .wp-block-group.has-background:not( .bt-topbar, .bt-topbar *, .bt-nav-extras *, .wp-block-column * ):not( :has( .wp-block-site-logo, .wp-block-site-title, nav, .bt-header-actions, .bt-ico-item, .wp-block-buttons, .wp-block-search, .wc-block-product-search, .wp-block-widget-area, .bt-center-logo, .wp-block-columns ) ) [data-bt-contact="contact_hours"],
header.bt-tb-full:is( .bt-social-top, .bt-social-none ) .wp-block-group.has-background:not( .bt-topbar, .bt-topbar *, .bt-nav-extras *, .wp-block-column * ):not( :has( .wp-block-site-logo, .wp-block-site-title, nav, .bt-header-actions, .bt-ico-item, .wp-block-buttons, .wp-block-search, .wc-block-product-search, .wp-block-widget-area, .bt-center-logo, .wp-block-columns ) ):has( [data-bt-contact] ),
header.bt-tb-full .wp-block-group.has-background:not( .bt-topbar, .bt-topbar *, .bt-nav-extras *, .wp-block-column * ):not( :has( .wp-block-site-logo, .wp-block-site-title, nav, .bt-header-actions, .bt-ico-item, .wp-block-buttons, .wp-block-search, .wc-block-product-search, .wp-block-widget-area, .bt-center-logo, .wp-block-columns ) ):has( [data-bt-contact] ):not( :has( .bt-social ) ) {
	display: none !important;
}

/* Telefón a e-mail ako odkaz (BT_Header_Mobile::link_contact) — vzhľad textu okolo, podčiarknutie pri prejdení myšou. */
[data-bt-contact] > a[href^="tel:"],
[data-bt-contact] > a[href^="mailto:"] {
	color: inherit;
	text-decoration: none;
}
[data-bt-contact] > a[href^="tel:"]:is(:hover, :focus-visible),
[data-bt-contact] > a[href^="mailto:"]:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: .25em;
}

/*
 * ── FARBA HLAVIČKY (BT_Header_Color, 10. 10. 2026) ───────────────────────────
 * Pás dostane pár pozadie + text zo servera. Tu len to, čo vo vzore nesie
 * VLASTNÚ farbu a na novom pozadí by nebolo čitateľné. Mimo `<nav>` prekrytia
 * a horného riadku — tie majú vlastný pár.
 */
/*
 * Vlastná farba textu vzoru zdedí farbu pásu: tmavý slogan na tmavom / značkovom
 * páse, biele menu vzoru `header-dark` na svetlom (odmerané v galérii 10. 10.:
 * „Domov" biele na bielom 1 : 1, na značke v tmavom režime 2 : 1). Prvky s vlastným
 * pozadím (tlačidlá, pilulky, samotné pásy) a mobilné prekrytie si farbu nechajú.
 */
header.bt-hc :is(.has-white-color, .has-base-color):not(.has-background):not(.bt-topbar *):not(.wp-block-navigation__responsive-container):not(.wp-block-navigation__responsive-container.is-menu-open *):not(.wp-block-button__link),
header.bt-hc:is(.bt-hc-dark, .bt-hc-brand) :is(.has-contrast-color, .has-contrast-two-color, .has-contrast-three-color, .has-black-color):not(.has-background):not(.bt-topbar *):not(.wp-block-navigation__responsive-container):not(.wp-block-navigation__responsive-container.is-menu-open *):not(.wp-block-button__link) {
	color: inherit !important;
}
/* Svetlá pilulka bez vlastnej farby textu (napr. telefón v smile-dent) ostane čitateľná. */
header.bt-hc :is(.has-accent-light-background-color, .has-surface-background-color, .has-base-background-color, .has-white-background-color):not(.has-text-color):not(.bt-topbar) {
	color: var( --wp--preset--color--contrast );
}
/* Druhý pás tmavej hlavičky: tá istá farba ako hlavný + nádych z farby textu (sedí pri tmavom aj svetlom „pruhu"). */
header.bt-hc:is(.bt-hc-dark, .bt-hc-brand) .bt-hc-band2 { background-image: linear-gradient( color-mix( in srgb, currentColor 8%, transparent ), color-mix( in srgb, currentColor 8%, transparent ) ); }
/* Na značkovom páse plné tlačidlo v akcente splynie — obráti sa na svetlé. */
header.bt-hc-brand .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.bt-topbar *),
header.bt-hc-btn-invert .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.bt-topbar *) {
	background-color: var( --wp--preset--color--base ) !important;
	color: var( --wp--preset--color--accent-strong ) !important;
}
/* Ikona kontaktu je v akcente — na tmavom aj značkovom páse by splynula (real-estate „Call now"). */
header.bt-hc:is(.bt-hc-dark, .bt-hc-brand) .bt-ico-item .bt-ico:not(.bt-topbar *) { color: currentColor; }
/*
 * Biela silueta loga (`.bt-on-dark`, BT_Header_Actions) na páse vo farbe značky
 * v nočnom režime: pás je vtedy svetlý — logo ostane, aké je.
 */
html.is-dark-mode header.wp-block-template-part:not(.bt-hc-night-dark) :is(.has-accent-strong-background-color, .has-accent-background-color).bt-on-dark .custom-logo-link .custom-logo { filter: none; }
/* Horný riadok rovnakej farby ako hlavička — tenká deliaca čiara, aby nesplynuli. */
header.bt-hc:is(.bt-hc-dark, .bt-hc-brand) > .bt-topbar { box-shadow: inset 0 -1px 0 color-mix(in srgb, currentColor 14%, transparent); }

/*
 * ── LOGO V PÄTIČKE (BT_Footer_Options::logo_instead_of_title, 10. 10. 2026) ──
 * Výška pevná, šírka dopočítaná — obrázok má width/height v markupe (CLS 0).
 */
footer.wp-block-template-part .bt-footer-logo { margin: 0; line-height: 0; }
footer.wp-block-template-part .bt-footer-logo.is-center { display: flex; justify-content: center; }
footer.wp-block-template-part .bt-footer-logo :is(.custom-logo, .bt-logo--dark) {
	height: var( --bt-footer-logo-h, 40px );
	width: auto;
	max-width: 220px;
	object-fit: contain;
}

/*
 * ── PÄTIČKA: JEDNOTNÝ VZHĽAD A ZAROVNANIE (Brani 10. 10. 2026: „zarovnania zvisle
 * aj vodorovne, nie všelijako") ───────────────────────────────────────────────
 * Platí pre všetky vzory aj pre pätičku uloženú v DB.
 *
 * 1. Prvý riadok každého stĺpca má rovnakú výšku ako logo — značka, nadpis
 *    stĺpca aj názov webu sedia na jednej osi a zoznamy pod nimi začínajú na
 *    jednej línii.
 */
.wp-site-blocks > footer .wp-block-columns > .wp-block-column > :is(.wp-block-heading, .wp-block-site-title, .bt-footer-logo):first-child {
	min-height: var( --bt-footer-logo-h, 40px );
	display: flex;
	align-items: center;
	margin-block: 0 var( --wp--preset--spacing--30, 1rem ) !important;
}
.wp-site-blocks > footer .wp-block-columns > .wp-block-column > .bt-footer-logo.is-center:first-child { justify-content: center; }
.wp-site-blocks > footer .wp-block-columns > .wp-block-column > :is(.wp-block-heading, .wp-block-site-title, .bt-footer-logo):first-child + * { margin-top: 0 !important; }
/* 2. Jeden štýl nadpisov stĺpcov (boli dva: VEĽKÉ s rozostupom a normálne). */
.wp-site-blocks > footer .wp-block-columns > .wp-block-column > .wp-block-heading {
	font-size: var( --wp--preset--font-size--small ) !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1.3;
}
/* 3. Rovnaké medzery v zoznamoch — menu, právne aj kontakt. */
.wp-site-blocks > footer .wp-block-column .wp-block-navigation.is-vertical .wp-block-navigation__container,
.wp-site-blocks > footer .wp-block-column .wp-block-navigation.is-vertical {
	row-gap: var( --wp--preset--spacing--20, .6rem ) !important;
}
.wp-site-blocks > footer .wp-block-column:has(> .wp-block-heading) > p + p { margin-top: var( --wp--preset--spacing--20, .6rem ) !important; }
/* 4. Stĺpec bez jediného odkazu (výplň `#` zmazaná, právna stránka neexistuje) zmizne celý. */
.wp-site-blocks > footer .wp-block-column:has(> .wp-block-navigation):not(:has(.wp-block-navigation-item)) { display: none; }
.wp-site-blocks > footer .wp-block-columns:not(:has(.wp-block-navigation-item, p, .bt-social, .bt-ico-item, img, .wp-block-site-title)) { display: none; }
/*
 * 5. Copyright pod stĺpcami: cez šírku stĺpcov, nad ním čiara. Zarovnanie berie zo vzoru
 *    (v galérii aj v Editore je na stred). 🔴 26. 10. 2026 (Brani, belubiworld): tu bolo
 *    `text-align: left !important` — náhľad vzoru ukazoval stred, web vľavo. Brani: „v strede".
 */
.wp-site-blocks > footer .wp-block-group:has(> .wp-block-columns) > .bt-footer-copyright,
.wp-site-blocks > footer .wp-block-group:has(> .is-content-justification-space-between) > .bt-footer-copyright {
	max-width: var( --wp--style--global--wide-size ) !important;
	padding-top: var( --wp--preset--spacing--40, 1.5rem );
	border-top: 1px solid color-mix( in srgb, currentColor 20%, transparent );
}
.wp-site-blocks > footer .wp-block-group:has(> .wp-block-separator) > .bt-footer-copyright { border-top: 0; padding-top: 0; }
/* Copyright v orámovanom spodnom páse (footer-logo-social) — tiež vľavo, cez šírku riadku nad ním. */
.wp-site-blocks > footer .wp-block-group:has(> .is-content-justification-space-between) > .wp-block-group > .bt-footer-copyright {
	max-width: var( --wp--style--global--wide-size ) !important;
	text-align: left !important;
}
/*
 * 6. Widgety v pätičke (blok branike/widget-columns): nadpisy rovnako ako nadpisy
 *    stĺpcov a bez horného okraja — na it2 mali H3 20 px navyše a H4 nie, takže
 *    nadpisy štyroch stĺpcov sedeli na dvoch rôznych výškach.
 */
.wp-site-blocks > footer .bt-widget :is(h2, h3, h4, h5, h6) {
	font-size: var( --wp--preset--font-size--small ) !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1.3;
	margin-top: 0 !important;
	margin-bottom: var( --wp--preset--spacing--30, 1rem );
}
/* Prvý prvok pod nadpisom widgetu bez vlastného okraja — zoznamy pod nadpismi začínajú na jednej línii (it2: menu o 4 px nižšie). */
.wp-site-blocks > footer .bt-widget :is(h2, h3, h4, h5, h6) + * { margin-top: 0 !important; }
/* 7. Tlačidlo bez adresy (staršia pätička s newsletterom v DB) je mŕtve — nevykresliť. */
.wp-site-blocks > footer .wp-block-button:has(> a.wp-block-button__link:not([href])) { display: none; }
/*
 * …a pás s výzvou (newsletter, „Spolupracujme"), ktorému nezostalo ani jedno funkčné
 * tlačidlo, nemá zmysel: „Odoberajte novinky" bez možnosti sa prihlásiť. Zobrazí sa,
 * keď sa vyplní odkaz (Nastavenia témy → Pätička / tlačidlo hlavičky).
 */
.wp-site-blocks > footer .wp-block-group:has(> .wp-block-buttons):not(:has(a.wp-block-button__link[href])) { display: none; }
/*
 * 8. Widget, z ktorého ostal len nadpis (napr. „Otváracie hodiny" s prázdnym údajom
 *    — väzba sa vypustila), aj stĺpec widgetov bez obsahu sa nevykreslí (it2, 10. 10.).
 */
.wp-site-blocks > footer .bt-widget:not(:has(p, ul, ol, a, img, figure, form, table, iframe, .bt-ico-item, .bt-social)) { display: none; }
.wp-site-blocks > footer .bt-widget-columns__col:not(:has(p, ul, ol, a, img, figure, form, table, iframe, .bt-ico-item, .bt-social)) { display: none; }
/* 9. Odkazy vo widgetoch ako odkazy v stĺpcoch — bez podčiarknutia, podčiarknutie pri prejdení. */
.wp-site-blocks > footer .bt-widget a:not(.wp-block-button__link) { text-decoration: none; }
.wp-site-blocks > footer .bt-widget a:not(.wp-block-button__link):is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: .2em; }

/* ══════════════════════════════════════════════════════════════════════════
 * PRECHOD TÉMY 11. 10. 2026 (AUDIT-TEMA-PRECHOD-2026-10-11.md) — T2 T5 T6 T10
 * Merané na it2 v Chromiu 390/768/1280 × svetlý/tmavý. Brána: harness-bt-prechod-1011.mjs
 * ══════════════════════════════════════════════════════════════════════════ */

/*
 * T2 — nadpis v sekcii s farbou pozadia A textu zdedí farbu sekcie.
 * `theme.json` (elements.heading) dáva nadpisom `contrast` priamo na prvok, a to
 * prebije dedenie: tmavá sekcia s bielym textom mala nadpis 1,14 : 1 (neviditeľný),
 * v tmavom režime svetlá sekcia 2,31 : 1.
 * Len priame deti a dve úrovne obalov BEZ vlastného pozadia — karta s vlastným
 * pozadím vnútri sekcie si farbu nadpisu necháva. Nadpis s vlastnou farbou tiež.
 */
:where(.has-text-color.has-background) > :where(h1, h2, h3, h4, h5, h6):not(.has-text-color),
:where(.has-text-color.has-background) > :where(:not(.has-background)) > :where(h1, h2, h3, h4, h5, h6):not(.has-text-color),
:where(.has-text-color.has-background) > :where(:not(.has-background)) > :where(:not(.has-background)) > :where(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
	color: inherit;
}

/*
 * T9 — skrytý H1 (šablóny bez nadpisu, BT_Frontend_Strings::hidden_h1) je prvé dieťa
 * obsahu. Nesmie ničomu brať „prvé miesto": blok za ním by dostal medzeru zhora
 * (it2: 20 px pás medzi hlavičkou a sekciou na celú šírku v Plnej šírke a Landingu).
 */
.wp-block-post-content > .bt-sr-h1:first-child + * {
	margin-block-start: 0;
}

/*
 * T5 — dlhé slovo alebo adresa sa zalomí. `html` má `overflow-x: clip`, takže
 * nezalomený text sa nevysunie do strany, ale ZMIZNE (it2: URL v odseku odrezaná
 * na 390 aj 1280 px). `break-word` nemení šírku stĺpcov tabuliek ani flexu.
 */
:where(.wp-block-post-content, .wp-block-post-excerpt, .wp-block-post-title, .wp-block-query, .wp-block-comments) {
	overflow-wrap: break-word;
}

/*
 * T6 — vyhľadávanie v obsahu (výsledky, 404, bočný panel) v tmavom režime.
 * Jadro dáva obalu `background:#fff` a sivý rám natvrdo; prehliadač v tmavom
 * režime pole stmaví → biely rám s tmavým poľom. Pár pozadie + text z palety.
 */
:where(main, aside, footer, .wp-block-post-content) .wp-block-search__button-inside .wp-block-search__inside-wrapper {
	background-color: var( --wp--preset--color--base );
	border-color: color-mix( in srgb, var( --wp--preset--color--contrast ) 30%, transparent );
	color: var( --wp--preset--color--contrast );
}
:where(main, aside, footer, .wp-block-post-content) .wp-block-search__button-inside .wp-block-search__input {
	background-color: transparent;
	color: inherit;
}
:where(main, aside, footer, .wp-block-post-content) .wp-block-search__input::placeholder {
	color: var( --wp--preset--color--contrast-three );
	opacity: 1;
}

/*
 * T10 — odkazy v menu hlavičky a v pätičke reagujú na myš (it2: bez zmeny,
 * zmerané myšou). Podčiarknutie nemení rozmer → 0 CLS. Ikony sociálnych sietí
 * jemne zosvetlia.
 */
header .wp-block-navigation-item__content:hover,
footer .wp-block-navigation-item__content:hover,
footer a:where(:not(.wp-element-button, .wp-block-button__link, .bt-social a)):hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}
:is(header, footer) .bt-social a:hover,
:is(header, footer) .wp-social-link a:hover {
	opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * BLOKY JADRA WP 7.x — Záložky a Akordeón v štýle témy (FSE novinky 11. 10. 2026, N6)
 *
 * Jadro ich dáva holé: akordeón bez oddelenia otázok, záložky bez spodnej
 * linky a s tenkým 2 px ukazovateľom. Téma doplní len to, čo chýba.
 *
 * 🔴 Všetko cez `currentColor`, nie cez farbu palety: blok môže stáť v tmavej
 *    sekcii (biely text) aj na bielej stránke — farba palety by v jednom z nich
 *    zmizla. `currentColor` je vždy farba textu okolo.
 * 🔴 `:where()` = nulová špecificita. Čo si klient nastaví v bloku, vyhrá.
 * ═══════════════════════════════════════════════════════════════════════════ */
:where(.wp-block-accordion-item) {
	border-block-end: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
:where(.wp-block-accordion-item:first-child) {
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
:where(.wp-block-accordion-panel) {
	padding-bottom: var(--wp--preset--spacing--30, 1rem);
}
:where(.wp-block-accordion-heading__toggle:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
:where(.wp-block-tab-list button:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
:where(.wp-block-tab-list) {
	border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
:where(.wp-block-tab-list button)[aria-selected=true] {
	font-weight: 600;
}
/* 🔴 Tu NIE `:where()`: jadro má ten istý selektor a jeho hárok sa pri samostatnom
   načítaní blokov vypíše AŽ ZA témou → pri rovnakej špecificite vyhrá jeho 2 px. */
.wp-block-tab-list button[aria-selected=true]::before {
	border-bottom-width: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MOBILNÉ MENU AKO ŠABLÓNA (WP 7.0 „Navigation Overlay", N2 — 11. 10. 2026)
 *
 * Keď má blok Navigácia vybranú šablónu menu, jadro pridá `disable-default-overlay`
 * a NEdá kontajneru žiadne pozadie — farbu má priniesť šablóna. Lenže bloky
 * šablóny jadro vykresľuje BEZ filtra `render_block_data`, takže štýl sekcie
 * (`is-style-section-dark`) ani farby elementov sa do stránky nedostanú.
 * Odmerané v Chromiu (WP 7.1.3, 390 px): otvorené menu priehľadné, stránka
 * presvitala. K tomu naše odsadenie zásuvky `!important` + odsadenie šablóny.
 *
 * Preto: kontajner dostane bezpečné tmavé pozadie a biely text (ak má šablóna
 * vlastné pozadie, prekryje ho), naše odsadenie v tomto režime odpadá.
 * ═══════════════════════════════════════════════════════════════════════════ */
.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay {
	padding: 0 !important;
	background-color: var( --wp--preset--color--dark-three );
	color: var( --wp--preset--color--white );
}
.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay .wp-block-navigation__responsive-container-content {
	padding-top: 0;
}
.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay .wp-block-navigation__overlay-container {
	width: 100%;
	min-height: 100%;
}
/* Naša šablóna `mobile-menu`: odkazy v farbe textu šablóny, nie akcentom (na tmavom by zanikli). */
.bt-overlay-menu a:where(:not(.wp-element-button)) {
	color: inherit;
}
/* Zatváracie „×" z jadra má natvrdo čiernu — na tmavej šablóne 1,31 : 1. Dedí farbu textu šablóny. */
.disable-default-overlay .wp-block-navigation-overlay-close {
	color: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Obľúbené a Porovnanie vo vysúvacom menu (T12, 11. 10. 2026)
 * Pod zlomom ich lišta nemá (it2 390 px: lupa padala do 2. riadku, 118 px) —
 * sú v zásuvke, s textom. Nad zlomom zásuvka nie je → skryté.
 * ═══════════════════════════════════════════════════════════════════════════ */
.bt-drawer-shop {
	display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .bt-drawer-shop {
	display: flex;
	order: 99;
	flex-direction: column;
	gap: 0.25rem;
	width: 100%;
	margin-top: var( --wp--preset--spacing--40, 1.5rem );
	padding-top: var( --wp--preset--spacing--40, 1.5rem );
	border-top: 1px solid color-mix( in srgb, currentColor 22%, transparent );
}
.bt-drawer-shop > a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
	font-size: clamp( 1rem, 4vw, 1.15rem );
}
.bt-drawer-shop > a:hover .bt-drawer-label,
.bt-drawer-shop > a:focus-visible .bt-drawer-label {
	text-decoration: underline;
}
.bt-drawer-shop > a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.bt-drawer-shop .bt-shop-count {
	position: static;
	margin-inline-start: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Hlavička na mobile „Len logo a ☰" (Brani 11. 10. 2026): hľadanie, tma, účet,
 * košík a jazyk v otvorenom menu, s názvom. Vkladá BT_Header_Actions::inject_drawer_tools
 * len pri tomto variante; mimo otvoreného menu skryté.
 * ═══════════════════════════════════════════════════════════════════════════ */
.bt-drawer-search,
.bt-drawer-tools {
	display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .bt-drawer-search {
	display: block;
	order: -1; /* pred menu — obsah zásuvky je flex a menu môže mať vlastné poradie */
	width: 100%;
	/* 🔴 Pod zatváracím tlačidlom (44 px vpravo hore) — inak ho pole prekrylo (cloud 390 px). */
	margin-top: calc( 44px + 0.75rem );
	margin-bottom: var( --wp--preset--spacing--40, 1.5rem );
}
.bt-drawer-search form {
	display: flex;
	align-items: stretch;
	border: 1px solid color-mix( in srgb, currentColor 40%, transparent );
	border-radius: 999px;
	overflow: hidden;
}
.bt-drawer-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 0 1rem;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
}
.bt-drawer-search input[type="search"]::placeholder {
	color: inherit;
	opacity: 0.75;
}
.bt-drawer-search button {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.bt-drawer-search form:focus-within {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.bt-drawer-search input[type="search"]:focus {
	outline: none;
}
.wp-block-navigation__responsive-container.is-menu-open .bt-drawer-tools {
	display: flex;
	order: 100; /* za menu aj za obľúbenými (cloud 390 px: „Tmavý režim" stál nad položkami menu) */
	flex-direction: column;
	gap: 0.25rem;
	width: 100%;
	margin-top: var( --wp--preset--spacing--40, 1.5rem );
	padding-top: var( --wp--preset--spacing--40, 1.5rem );
	border-top: 1px solid color-mix( in srgb, currentColor 22%, transparent );
}
/* Hneď pod obľúbenými a porovnaním — jedna skupina, nie dve čiary. */
.wp-block-navigation__responsive-container.is-menu-open .bt-drawer-shop + .bt-drawer-tools {
	margin-top: 0.25rem;
	padding-top: 0;
	border-top: 0;
}
.bt-drawer-tools > a,
.bt-drawer-tools > button {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-decoration: none;
	font: inherit;
	font-size: clamp( 1rem, 4vw, 1.15rem );
	cursor: pointer;
	text-align: start;
}
.bt-drawer-tools > a:hover .bt-drawer-label,
.bt-drawer-tools > a:focus-visible .bt-drawer-label,
.bt-drawer-tools > button:hover .bt-drawer-label,
.bt-drawer-tools > button:focus-visible .bt-drawer-label {
	text-decoration: underline;
}
.bt-drawer-tools > a:focus-visible,
.bt-drawer-tools > button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.bt-drawer-tools > button[aria-pressed="true"] .bt-drawer-label::after {
	content: " ✓";
}
.bt-drawer-tools .bt-shop-count {
	position: static;
	margin-inline-start: 0.25rem;
}
.bt-drawer-lang {
	margin-top: 0.5rem;
}
.bt-drawer-lang a {
	color: inherit;
}
/*
 * Branike Translate v menu (26. 10. 2026): rozbaľovací prepínač vo farbách menu (nie biela
 * karta), 44 px ciele. Zoznam sa otvára V TOKU menu — absolútne položený by v posúvanom
 * paneli menu prekryl položky alebo ušiel pod okraj.
 */
.bt-drawer-lang .lingopress-widget {
	position: static;
	display: block;
}
.bt-drawer-lang .lp-dropdown-trigger {
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid color-mix( in srgb, currentColor 35%, transparent );
	border-radius: 999px;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
}
.bt-drawer-lang .lp-dropdown-list {
	position: static;
	max-height: none;
	margin-top: 0.5rem;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
}
.bt-drawer-lang .lp-dropdown-item {
	min-height: 44px;
	color: inherit;
	font: inherit;
}
.bt-drawer-lang .lp-dropdown-item.lp-active {
	color: inherit;
	background: color-mix( in srgb, currentColor 12%, transparent );
}
.bt-drawer-lang .lp-powered-by,
.bt-drawer-lang .lp-powered-by a {
	color: inherit;
	opacity: 0.75;
}