/**
 * Vlastná hlavička — benab-style (px-shop-theme) dizajn.
 *
 * Samostatné CSS bez build kroku — hlavička sa načítava na každej stránke.
 * Tokeny (aj --pc-sage a --pc-topbar-text) sú len na :root v base.css,
 * .px-header ich neredeklaruje — child ich prepíše jedným miestom.
 *
 * Breakpointy ako zvyšok témy: mobil < 768, tablet 768–1023,98,
 * desktop ≥ 1024 (pri 1024 px desktopová hlavička aj obsah).
 *
 * Panely, ktoré do prvého vykreslenia nezasahujú (ponuka live vyhľadávania,
 * drawer, mini-košík), sú v assets/css/header-panels.css — ten nie je
 * v <head>, dopĺňa ho assets/js/header.js mimo kritickej cesty.
 */

.px-header {
	--px-header-topbar-h: 2.5rem;
	--px-header-main-h: 4rem;

	position: sticky;
	top: 0;
	z-index: var(--pc-z-header);
	font-size: var(--pc-fs-md);
	line-height: 1.4;
	color: rgb(var(--pc-ink));
}

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

.px-header a {
	text-decoration: none;
	color: inherit;
}

.px-header ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.px-header-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}

.px-header .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Rovnaký kontajner ako archív / úvodka. Odsadenie je v premennej, lebo si
   ho pýta aj mega panel — ten je absolútne pozicovaný a hrany má zarovnať
   s obsahom kontajnera, nie s jeho vonkajším okrajom. */
.px-header__container {
	--px-gutter: 1rem;

	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: var(--pc-container);
	padding-left: var(--px-gutter);
	padding-right: var(--px-gutter);
}

@media (min-width: 640px) {
	.px-header__container { --px-gutter: 1.5rem; }
}

@media (min-width: 1024px) {
	.px-header__container { --px-gutter: 2rem; }
}

/* Sticky: topbar odscrolluje, hlavný pruh zostáva */
@media (min-width: 768px) {
	.px-header {
		top: calc(-1 * var(--px-header-topbar-h));
	}
}

@media (min-width: 783px) {
	body.admin-bar .px-header {
		top: calc(32px - var(--px-header-topbar-h));
	}
}

.px-header.is-stuck .px-header__main {
	box-shadow: 0 4px 16px rgb(var(--pc-ink) / 0.08);
}

/* =========================================================================
   TOPBAR
   ========================================================================= */

.px-header__topbar {
	/* Tmavý pás — prstenec z --pc-accent-deep by na --pc-ink nebolo vidieť. */
	--pc-focus: var(--pc-accent-bright);

	background: rgb(var(--pc-ink));
	color: rgb(var(--pc-topbar-text));
	font-size: var(--pc-fs-xs);
}

/* Odkazy pásu sú riadok textu (~16 px). Cieľ kliknutia preto berie celú
   výšku pásu — vzhľad sa nemení, plocha áno (WCAG 2.5.8). */
.px-header__contacts a,
.px-header__topmenu a {
	display: inline-flex;
	align-items: center;
	min-height: var(--px-header-topbar-h);
}

.px-header__topbar a:focus-visible {
	outline: 2px solid rgb(var(--pc-focus));
	outline-offset: -2px;
	border-radius: var(--pc-radius-xs);
}

.px-header__topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-4);
	height: var(--px-header-topbar-h);
}

.px-header__contacts {
	display: flex;
	align-items: center;
	gap: var(--pc-space-5);
	min-width: 0;
}

.px-header__contacts a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	transition: color 0.15s;
}

.px-header__contacts a:hover {
	color: rgb(var(--pc-accent-bright));
}

.px-header__contacts .px-header-icon {
	width: 0.875rem;
	height: 0.875rem;
	color: rgb(var(--pc-accent-bright));
}

.px-header__tagline {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 1023.98px) {
	.px-header__tagline { display: none; }
}

.px-header__topnav {
	display: flex;
	align-items: center;
	gap: var(--pc-space-5);
	flex-shrink: 0;
}

.px-header__topmenu {
	display: flex;
	align-items: center;
	gap: var(--pc-space-5);
}

.px-header__topmenu a {
	transition: color 0.15s;
}

.px-header__topmenu a:hover,
.px-header__topmenu .current-menu-item > a {
	color: rgb(var(--pc-accent-bright));
}

/* Na tablete sa horné menu nezmestí — je v draweri */
@media (max-width: 1023.98px) {
	.px-header__topnav nav { display: none; }
}

.px-header__social {
	display: flex;
	align-items: center;
	gap: var(--pc-space-1);
}

/* Ikona má 16 px, cieľ dotyku aspoň 24 px (WCAG 2.5.8): odkaz je štvorec
   1.5rem s ikonou v strede, medzera medzi ikonami ostáva opticky ~12 px. */
.px-header__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	transition: color 0.15s;
}

.px-header__social a:hover {
	color: rgb(var(--pc-accent-bright));
}

.px-header__social .px-header-icon {
	width: 1rem;
	height: 1rem;
}

@media (max-width: 767.98px) {
	.px-header__topbar { display: none; }
}

/* =========================================================================
   HLAVNÝ PRUH
   ========================================================================= */

.px-header__main {
	background: rgb(var(--pc-paper));
	border-bottom: 1px solid rgb(var(--pc-line));
	transition: box-shadow 0.2s;
}

.px-header__main-inner {
	display: flex;
	align-items: center;
	gap: var(--pc-space-6);
	height: var(--px-header-main-h);
}

@media (min-width: 1024px) {
	.px-header { --px-header-main-h: 5.5rem; }
}

.px-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.px-header__logo img {
	display: block;
	width: auto;
	height: 2.25rem;
}

@media (min-width: 1024px) {
	.px-header__logo img { height: 3rem; }
}

.px-header__logo-text {
	font-size: var(--pc-fs-xl);
	font-weight: 700;
}

/* ---- Desktop navigácia (menu Kategórie) ---- */

.px-header__nav {
	flex: 1;
	min-width: 0;
	display: flex;
	justify-content: flex-end;
}

@media (max-width: 1023.98px) {
	.px-header__nav { display: none; }
}

.px-header__menu {
	display: flex;
	align-items: center;
	gap: var(--pc-space-1);
}

/* Kotva mega panela je kontajner pruhu, nie položka ani navigácia — panel
   ide na celú šírku obsahu stránky. Položky preto ostávajú `static`
   a podčiarknutie beží voči odkazu, nie voči <li>. */
.px-header__main-inner,
.px-header__navbar > .px-header__container {
	position: relative;
}

.px-header__menu > li {
	position: static;
	display: flex;
	align-items: center;
}

/* Menu v hlavnom riadku: položka je vysoká ako celý riadok. Mega panel
   začína pod ním a keby bola položka len taká vysoká ako odkaz (~2.25rem
   v 5.5rem riadku), myš by cestou dole opustila `li:hover` a panel by sa
   zavrel skôr, než sa naň dá prejsť. Odkaz ostáva vlastným boxom
   (podčiarknutie, chevron). V samostatnom pruhu (`nav--bar`) to netreba —
   pruh je presne taký vysoký ako položky, medzera tam nevzniká (0.5.8:
   min-height tam zbytočne zdvihol pruh na 5.5rem). */
.px-header__main-inner .px-header__menu > li {
	min-height: var(--px-header-main-h);
}

/* O stupeň menšie než zvyšok hlavičky (0.9375rem): lišta je jej najhustejší
   riadok — osem kategórií, ktoré sa nesmú zalomiť, a od pridania ikon si
   každá berie ešte 1.25rem navyše. Zhoduje sa s prvou úrovňou mega panela,
   takže po otvorení panela veľkosť textu neposkočí. */
.px-header__menu > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: var(--pc-space-2) var(--pc-space-3);
	font-size: var(--pc-fs-sm);
	font-weight: 500;
	white-space: nowrap;
	transition: color 0.15s;
}

/* Podčiarknutie označuje, kde zákazník práve je — nie kde má myš. Pri
   hoveri ho nekreslíme: otvorený mega panel je sám o sebe dosť veľký signál
   a linka pod položkou splývala s akcentovou hranou panela. */
.px-header__menu > li > a::after {
	content: '';
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.125rem;
	height: 2px;
	background: rgb(var(--pc-accent));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s;
}

.px-header__menu > li:hover > a,
.px-header__menu > li:focus-within > a,
.px-header__menu > li.current-menu-item > a,
.px-header__menu > li.current-menu-ancestor > a {
	color: rgb(var(--pc-accent-deep));
}

.px-header__menu > li.current-menu-item > a::after,
.px-header__menu > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* Chevron pre položky s podmenu. Glyf kreslí maska vycentrovaná v boxe
   (véčko je symetrické okolo stredu viewBoxu), takže otočka o 180° okolo
   stredu boxu je zároveň otočka okolo vlastnej osi glyfu — bez oblúku. */
.px-header__menu .menu-item-has-children > a::before {
	content: '';
	order: 2;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.18s ease;
	flex-shrink: 0;
}

/* Otvorený panel otočí šípku nahor */
.px-header__menu > li:hover:not(.is-dismissed) > a::before,
.px-header__nav:not(.is-enhanced) .px-header__menu > li:focus-within > a::before {
	transform: rotate(180deg);
}

/* ---- Spúšťač mega panela (header.js, `.is-enhanced`) ----
   S JS má položka s panelom za odkazom tlačidlo s `aria-expanded`
   (vzor disclosure): odkaz vedie na kategóriu, tlačidlo otvára panel.
   Klávesnica tak panel otvorí Enterom/medzerníkom a Esc ho zavrie
   (WCAG 1.4.13, 2.1.1); myš otvára hoverom ako doteraz.

   Tlačidlo nezaberá miesto v lište (child témy majú úzke lišty, niektoré
   bez šípok — každý pixel navyše ju zalomil): je skryté ako text pre
   čítačku a jeho fokus sa ukáže rámčekom okolo celej položky; otvorený
   panel otočí šípku odkazu. */
.px-header__megatoggle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	background: none;
	color: inherit;
}

.px-header__menu > li:has(> .px-header__megatoggle:focus-visible) > a {
	outline: 2px solid rgb(var(--pc-focus));
	outline-offset: 2px;
	border-radius: var(--pc-radius-xs);
}

.px-header__menu > li.is-open > a::before {
	transform: rotate(180deg);
}

/* ---- Mega panel ----
   Panel visí pod pruhom cez celú šírku obsahu kontajnera — hrany sedia
   s logom aj s obsahom stránky pod hlavičkou.

   Druhá úroveň je hlavička stĺpca (obrázok alebo ikona kategórie + názov),
   tretia holý zoznam odkazov pod ňou. Zoznam tečie do vyvážených stĺpcov
   (`columns`), nie do mriežky: kategórie majú od nuly po osem podpoložiek
   a mriežka by pod každým krátkym stĺpcom nechala dieru cez celý riadok.

   Obsah dopĺňa pxt_nav_subcategories() z product_cat, obal .px-mega
   pridáva PXT_Mega_Walker. */

.px-mega {
	position: absolute;
	top: 100%;
	left: var(--px-gutter);
	right: var(--px-gutter);
	max-height: min(78vh, 48rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	/* Dole stačí málo — odstup pod posledným riadkom nesie samotná skupina. */
	padding: var(--pc-space-7) var(--pc-space-7) var(--pc-space-2);
	background: rgb(var(--pc-paper));
	/* Panel aj lišta sú biele, takže hranu musí spraviť rám a tieň. Hore je
	   akcentová linka — hlavička sa nad ňou skončí a panel čitateľne začne;
	   tieň má tesnú vrstvu (odsadí panel od lišty) a mäkkú (odlepí ho od
	   stránky pod ním). */
	border: 1px solid rgb(var(--pc-line));
	border-top: 2px solid rgb(var(--pc-accent));
	border-radius: 0 0 var(--pc-radius-lg) var(--pc-radius-lg);
	box-shadow: var(--pc-shadow-popover);
	opacity: 0;
	visibility: hidden;
	/* Panel má stovky odkazov a desiatky obrázkov. content-visibility ich
	   necháva nevykreslené (a obrázky nenačítané), kým sa menu neotvorí —
	   samotné visibility:hidden na to nestačí, panel je hneď pod hlavičkou,
	   teda „vo výreze“, a lazy obrázky by sa načítali. */
	content-visibility: hidden;
	transform: translateY(-0.5rem);
	/* `visibility` sa pri zatváraní prepne až po doznení animácie (delay),
	   pri otváraní hneď (pravidlo nižšie má delay 0). Prechod visibility
	   z hidden začínal snímkou, v ktorej je panel ešte `hidden` — rýchly
	   Tab v nej podkategórie preskočil. */
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	z-index: var(--pc-z-dropdown);
}

.px-header__menu > li:hover:not(.is-dismissed) > .px-mega,
.px-header__nav:not(.is-enhanced) .px-header__menu > li:focus-within > .px-mega,
.px-header__menu > li.is-open > .px-mega {
	opacity: 1;
	visibility: visible;
	content-visibility: visible;
	transform: translateY(0);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

/* Počet stĺpcov si nájde šírka panela: na kontajneri v plnej šírke ich
   vyjde šesť, na užšom okne postupne ubúdajú. */
.px-mega > .sub-menu {
	columns: 11.5rem;
	column-gap: var(--pc-space-6);
}

/* Kategória s hŕstkou skupín (do päť): `columns` by ich vyvažovali podľa
   výšky — tri krátke skupiny skončia v prvom stĺpci, štvrtá v druhom
   a zvyšok panela zíva prázdny. Tu preto idú skupiny vedľa seba zľava ako
   flex položky a viditeľná je len karta široká podľa obsahu.

   Obal .px-mega však ostáva celoplošný a NEVIDITEĽNÝ: drží hover. Keby sa
   zúžil, položka vpravo (napr. posledná v lište) a karta vľavo by nemali
   spoločnú plochu a menu by sa pri ceste myšou zavrelo skôr, než sa naň
   dá prejsť. Vzhľad panela (podklad, rám, tieň, odsadenie) preto nesie
   .sub-menu. Od šiestej skupiny platí multicol na plnú šírku vyššie.

   Pozor: `:has()` sa nesmie vnárať do `:has()` — prehliadač by celé
   pravidlo zahodil. Preto sa obal pýta na šiestu skupinu priamo. */
.px-mega:not(:has(> .sub-menu > li:nth-child(6))) {
	padding: 0;
	max-height: none;
	overflow: visible;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.px-mega > .sub-menu:not(:has(> li:nth-child(6))) {
	/* Obal je na celú šírku kontajnera (drží hover a kotvu), karta v ňom
	   sedela vždy vľavo bez ohľadu na to, nad ktorou položkou je myš.
	   `--px-mega-offset` ju posunie pod položku; hodnotu počíta header.js
	   a orezáva ju o pravý okraj obalu. Bez JS ostáva 0 = pri ľavom okraji. */
	margin-left: var(--px-mega-offset, 0);
	columns: auto;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0 var(--pc-space-10);
	box-sizing: border-box;
	width: max-content;
	max-width: 100%;
	max-height: min(78vh, 48rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding: var(--pc-space-7) var(--pc-space-7) var(--pc-space-2);
	background: rgb(var(--pc-paper));
	border: 1px solid rgb(var(--pc-line));
	border-top: 2px solid rgb(var(--pc-accent));
	border-radius: 0 0 var(--pc-radius-lg) var(--pc-radius-lg);
	box-shadow: var(--pc-shadow-popover);
}

.px-mega > .sub-menu:not(:has(> li:nth-child(6))) > li {
	flex: 0 1 auto;
	min-width: 11.5rem;
}

/* Médium kategórie — rovnaký box ako .pc-cat-tiles__icon v archíve */
.px-header .px-menu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	overflow: hidden;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--pc-radius-sm);
	background: rgb(var(--pc-soft));
	color: rgb(var(--pc-accent));
	transition: background 0.15s ease;
}

.px-header .px-menu-icon svg {
	width: 1.375rem;
	height: 1.375rem;
}

/* Obrázok kategórie: bez šedého podkladu, fotky sú na bielom a rám za nimi
   robí lem. cover, lebo pomery strán sú rôzne a contain by rozhádzal riadok. */
.px-header .px-menu-icon--photo {
	background: none;
}

.px-header .px-menu-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Prvá úroveň: ikona ide do riadku k názvu, nie do boxu ako v paneli —
   lišta je riadok textu a 2.25rem podklad by ju zdvojnásobil. Akcent ju
   odlíši od textu a zároveň drží lištu farebne pri značke. */
.px-header__menu > li > a > .px-menu-icon {
	width: 1.25rem;
	height: 1.25rem;
	background: none;
	border-radius: 0;
	color: rgb(var(--pc-accent));
	transition: color 0.15s;
}

.px-header__menu > li > a > .px-menu-icon svg {
	width: 100%;
	height: 100%;
}

/* Bez podčiarknutia nesie spätnú väzbu hoveru len farba — nech stmavne aj
   ikona, nielen text. `inherit` je vtedy accent-deep z pravidla vyššie. */
.px-header__menu > li:hover > a > .px-menu-icon,
.px-header__menu > li:focus-within > a > .px-menu-icon,
.px-header__menu > li.current-menu-item > a > .px-menu-icon,
.px-header__menu > li.current-menu-ancestor > a > .px-menu-icon {
	color: inherit;
}

/* Chevron dropdownov sem nepatrí (v paneli nič nevyklápame) */
.px-header__menu .sub-menu .menu-item-has-children > a::before {
	content: none;
}

/* Druhá úroveň — hlavička stĺpca aj s vlastným zoznamom je jeden blok;
   `break-inside` ho drží pokope, inak by hlavička ostala na konci stĺpca
   a jej odkazy pokračovali v nasledujúcom. */
.px-mega > .sub-menu > li {
	break-inside: avoid;
	/* Strop šírky drží riadky čitateľné aj v jedno- či dvojstĺpcovom paneli,
	   kde by sa stĺpec roztiahol na celý kontajner. */
	max-width: 22rem;
	padding-bottom: var(--pc-space-5);
}

.px-mega > .sub-menu > li > a {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: var(--pc-space-1) 0;
	font-size: var(--pc-fs-sm);
	font-weight: 700;
	line-height: 1.25;
	color: rgb(var(--pc-ink));
	transition: color 0.15s ease;
}

.px-mega > .sub-menu > li > a:hover,
.px-mega > .sub-menu > li:focus-within > a {
	color: rgb(var(--pc-accent-deep));
}

/* Médium hlavičky pri hoveri prevezme akcent — celý blok tak reaguje ako
   jeden prvok, nielen text. */
.px-mega > .sub-menu > li > a:hover .px-menu-icon:not(.px-menu-icon--photo) {
	background: rgb(var(--pc-accent) / 0.12);
}

/* Tretia úroveň — holý zoznam zarovnaný pod text hlavičky, nie pod médium.
   Vlasová linka vedie stredom média a viaže odkazy k svojej kategórii; pri
   šiestich stĺpcoch vedľa seba je to jediné, čo ich od seba oddelí. */
.px-mega .sub-menu .sub-menu {
	display: grid;
	margin: var(--pc-space-1) 0 0 1.125rem;
	padding-left: 1.625rem;
	border-left: 1px solid rgb(var(--pc-line));
}

.px-mega .sub-menu .sub-menu a {
	display: block;
	padding: 0.1875rem 0;
	font-size: var(--pc-fs-xs);
	font-weight: 500;
	line-height: 1.35;
	color: rgb(var(--pc-muted));
	transition: color 0.15s ease, transform 0.15s ease;
}

.px-mega .sub-menu .sub-menu a:hover,
.px-mega .sub-menu .sub-menu li:focus-within > a {
	color: rgb(var(--pc-accent-deep));
	transform: translateX(2px);
}

/* „Ďalšie (n)" — zvyšok podkategórií je na archíve rodiča */
.px-mega .sub-menu .px-menu-more > a {
	color: rgb(var(--pc-accent-deep));
	font-weight: 600;
}

/* ---- Akcie vpravo ---- */

.px-header__actions {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex-shrink: 0;
	margin-left: auto;
}

/* `a.` v selektore: inak vyhráva `.px-header a { color: inherit }` a text by bol tmavý */
.px-header a.px-header__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem var(--pc-space-5);
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-accent));
	color: rgb(var(--pc-on-accent));
	font-weight: 600;
	font-size: var(--pc-fs-sm);
	white-space: nowrap;
	transition: background 0.15s;
}

.px-header a.px-header__cta:hover {
	background: rgb(var(--pc-accent-deep));
	color: rgb(var(--pc-on-accent));
}

/* `a.` aj tu, a nielen kvôli farbe: bez neho má selektor nižšiu špecificitu
   (0,2,0) než pravidlo vyššie (0,2,1) a `display: none` sa neuplatní — media
   query špecificitu nedvíha. CTA potom ostávalo v hlavičke aj na mobile,
   akcie pretiekli za okraj a hamburger — jediný vstup do menu — skončil
   mimo obrazovky. */
@media (max-width: 1279.98px) {
	.px-header__main a.px-header__cta { display: none; }
}

.px-header__iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(var(--pc-sunk));
	color: rgb(var(--pc-sage));
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.px-header__iconbtn:hover {
	background: rgb(var(--pc-accent));
	color: rgb(var(--pc-on-accent));
}

/* Čakanie na CSS panelov (header.js, `toggleBusy()`). Tlačidlo musí dať
   najavo, že klik zaregistrovalo — inak vyzerá pokazene. Bez animácie
   a bez posunu rozmerov, aby to nespôsobilo CLS ani nerušilo. */
.px-header [data-px-toggle].is-loading {
	opacity: 0.6;
	cursor: progress;
}

@media (max-width: 767.98px) {
	.px-header__account { display: none; }
}

.px-header__hamburger {
	background: rgb(var(--pc-accent));
	color: rgb(var(--pc-on-accent));
}

.px-header__hamburger:hover {
	background: rgb(var(--pc-accent-deep));
}

@media (min-width: 1024px) {
	.px-header__hamburger { display: none; }
}

/* ---- Košík ---- */

.px-header__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-2);
	height: 2.5rem;
	padding: 0 0.875rem;
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-sunk));
	font-weight: 600;
	font-size: var(--pc-fs-sm);
	transition: background 0.15s;
}

.px-header__cart:hover {
	background: rgb(var(--pc-soft));
}

.px-header__cart-icon {
	position: relative;
	display: inline-flex;
	color: rgb(var(--pc-sage));
}

.px-header__cart:hover .px-header__cart-icon {
	color: rgb(var(--pc-accent));
}

.px-header-cart-count {
	position: absolute;
	top: -0.5rem;
	right: -0.625rem;
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 var(--pc-space-1);
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-accent));
	color: rgb(var(--pc-on-accent));
	font-size: var(--pc-fs-3xs);
	font-weight: 700;
	line-height: 1.125rem;
	text-align: center;
}

.px-header-cart-total {
	white-space: nowrap;
}

/* Mobil: päť akcií s krúžkami a medzerami sa do radu nezmestí a rad
   pretekal za pravý okraj. Podfarbenie aj medzery idú preč — spacing nesie
   samotný box (gap 0, ikona centrovaná v 2.25rem), logo klesne o stupeň.
   Hover stavy prefarbujú na bielu/akcent s podkladom, bez podkladu by ikona
   zmizla — preto override aj na :hover. */
@media (max-width: 767.98px) {
	.px-header__main-inner { gap: var(--pc-space-3); }

	/* Poistka pre extra úzke displeje: logo sa smie stlačiť, kresba sa
	   zmenší so zachovaným pomerom strán a drží pri ľavom okraji. */
	.px-header__logo {
		flex-shrink: 1;
		min-width: 0;
	}

	.px-header__logo img {
		height: 2rem;
		max-width: 100%;
		object-fit: contain;
		object-position: left center;
	}

	/* Kompaktné podfarbené ikony (pôvodne boli na mobile transparentné;
	   zmena 0.4.6 podľa libike). Tokeny --pc-sunk/--pc-accent preberá child
	   téma, takže odtieň sa prispôsobí každému webu. */
	/* Krúžok ostáva 2.25rem, cieľ dotyku má 44 px: pseudo-element presahuje
	   o 0.25rem na každú stranu a medzera 0.5rem zaručí, že sa plochy
	   susedných ikon neprekrývajú. */
	.px-header__actions { gap: var(--pc-space-2); }

	.px-header__iconbtn::after,
	.px-header__cart::after {
		content: '';
		position: absolute;
		inset: calc(-1 * var(--pc-space-1));
	}

	.px-header__iconbtn {
		width: 2.25rem;
		height: 2.25rem;
		background: rgb(var(--pc-sunk));
		border-radius: 50%;
	}

	.px-header__iconbtn:hover {
		background: rgb(var(--pc-accent));
		color: rgb(var(--pc-on-accent));
	}

	.px-header__hamburger {
		color: rgb(var(--pc-accent));
	}

	/* Košík: súčet je na mobile skrytý, ostáva ikona s počítadlom —
	   rovnaký sunk krúžok ako ostatné akcie. */
	.px-header__cart,
	.px-header__cart:hover {
		width: 2.25rem;
		height: 2.25rem;
		padding: 0;
		justify-content: center;
		background: rgb(var(--pc-sunk));
		border-radius: 50%;
	}

	.px-header-cart-total { display: none; }
}

/* =========================================================================
   PANELY (search / drawer / minicart) + BACKDROP
   ========================================================================= */

.px-header__backdrop {
	position: fixed;
	inset: 0;
	background: rgb(var(--pc-ink) / 0.5);
	z-index: var(--pc-z-overlay);
	opacity: 0;
	transition: opacity 0.2s;
}

.px-header__backdrop.is-open {
	opacity: 1;
}

.px-header__panel[hidden],
.px-header__backdrop[hidden] {
	display: none;
}

/* ---- Drawer + mini-košík (pravé panely) — škrupina ----

   Obsah oboch panelov je v header-panels.css, ktorý sa načítava lenivo.
   Škrupina však musí byť tu: `<aside class="px-header__panel px-header__drawer" hidden>`
   je v HTML od začiatku a keby sa lenivý súbor nenačítal (výpadok siete,
   agresívny blokovač), `header.js` panel aj tak otvorí — poslucháč `error`
   ho zámerne odblokuje. Bez `position: fixed` by sa celý strom menu vysypal
   do toku stránky. Rovnaký dôvod ako pri `.pc-filters` v archive.css. */

.px-header__drawer,
.px-header__minicart {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(22rem, 100vw);
	background: rgb(var(--pc-paper));
	z-index: var(--pc-z-drawer);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.25s ease;
	box-shadow: -8px 0 32px rgb(var(--pc-ink) / 0.15);
	/* Scroll patrí do škrupiny, nie len na `.px-header__drawer-body` v lazy
	   súbore: keby sa ten nenačítal, dlhý strom kategórií by pretiekol pod
	   spodok viewportu bez možnosti sa k nemu dostať. */
	overflow-y: auto;
	overscroll-behavior: contain;
}

.px-header__drawer.is-open,
.px-header__minicart.is-open {
	transform: translateX(0);
}

/* WP admin bar (32px, fixná od 783px) nesmie prekrývať hlavičku panela */
@media (min-width: 783px) {
	body.admin-bar .px-header__drawer,
	body.admin-bar .px-header__minicart {
		top: 32px;
	}
}

.px-header__drawer[hidden],
.px-header__minicart[hidden] {
	display: none;
}

/* Desktop: mini-košík aj backdrop začínajú pod hlavným pruhom hlavičky
   (`--px-panel-top` meria header.js pri otvorení), aby panel neprekrýval
   ikony a košík sa dal zavrieť tou istou ikonou. Tri triedy — prebije
   posun o admin bar vyššie; meraná hrana ho už obsahuje. */
@media (min-width: 1024px) {
	.px-header .px-header__minicart.is-below-header,
	.px-header .px-header__backdrop.is-below-header {
		top: var(--px-panel-top, 0);
	}

	.px-header .px-header__minicart.is-below-header {
		border-top: 1px solid rgb(var(--pc-line));
		border-bottom-left-radius: var(--pc-radius-lg);
	}
}

/* ---- Ponuka live vyhľadávania — škrupina ----
   Kontajner je v markupe `hidden` a plní ho JS; bez ukotvenia by inline
   dropdown na desktope roztlačil hlavičku. Riadky ponuky sú v lazy súbore. */

/* Live výsledky (plnené z REST pixeler/v1/search cez header.js) */
.px-header__search-results {
	margin-top: var(--pc-space-3);
	max-height: 60vh;
	overflow-y: auto;
}

.px-header__search-results[hidden] {
	display: none;
}

/* Pri inline poli je ponuka samostatný dropdown zakotvený pod poľom —
   v pruhu nie je kam ju rozvinúť. */
.px-header__search--inline .px-header__search-results {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 0.5rem);
	margin: 0;
	padding: var(--pc-space-2);
	max-height: 70vh;
	background: rgb(var(--pc-card));
	border: 1px solid rgb(var(--pc-line));
	border-radius: var(--pc-radius);
	box-shadow: 0 18px 40px rgb(var(--pc-ink) / 0.12);
	z-index: var(--pc-z-popover);
}

/* ---- Vyhľadávanie ----
   Dve umiestnenia toho istého poľa: viditeľné v hlavnom pruhu
   (.px-header__search--inline, desktop) a v páse pod hlavičkou
   (.px-header__search--panel v .px-header__search-panel, mobil). */

.px-header__search-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: rgb(var(--pc-paper));
	border-bottom: 1px solid rgb(var(--pc-line));
	box-shadow: 0 16px 32px rgb(var(--pc-ink) / 0.1);
	padding: var(--pc-space-5) 0 var(--pc-space-6);
	z-index: var(--pc-z-popover);
}

/* Pole v pruhu zaberie voľné miesto medzi logom a akciami, ale na širokom
   monitore sa neroztiahne na pol obrazovky — ponuka výsledkov by potom
   bola pás textu bez okraja. */
.px-header__search--inline {
	position: relative;
	flex: 1;
	min-width: 0;
	max-width: 34rem;
	margin-inline: auto;
}

/* Do úzkeho pruhu sa pole nezmestí — pod 1025px hľadanie preberá ikona. */
@media (max-width: 1023.98px) {
	.px-header__search--inline { display: none; }
}

/* A naopak: kde je pole vidno, ikona v akciách je len duplicita. */
@media (min-width: 1024px) {
	.px-header--search-inline .px-header__searchbtn { display: none; }
}

.px-header__search-form {
	display: flex;
	align-items: center;
	gap: var(--pc-space-3);
}

/* Inline pole nesie rám samo — v paneli ho nesie celý pás. */
.px-header__search--inline .px-header__search-form {
	gap: var(--pc-space-2);
	padding: 0.3rem 0.3rem 0.3rem var(--pc-space-4);
	border: 1px solid rgb(var(--pc-field-border));
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-paper));
	transition: border-color 0.15s, box-shadow 0.15s;
}

/* Rovnaký fokus ako polia v base.css: rám + 1px prstenec vo --pc-focus. */
.px-header__search--inline .px-header__search-form:focus-within {
	outline: 2px solid transparent;
	border-color: rgb(var(--pc-focus));
	box-shadow: 0 0 0 1px rgb(var(--pc-focus));
}

.px-header__search-icon {
	color: rgb(var(--pc-sage));
	width: 1.375rem;
	height: 1.375rem;
}

/* Pole bez vlastného rámu — rám aj odsadenie nesie celý pás hľadania.
   Preto tu vypíname aj základ polí z base.css (padding a focus ring);
   viditeľný fokus dáva nižšie `outline` na `:focus-visible`. */
.px-header__search-input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	outline: 0;
	box-shadow: none;
	font-size: var(--pc-fs-lg);
	color: rgb(var(--pc-ink));
	background: transparent;
}

.px-header__search-input:focus {
	box-shadow: none;
}

.px-header__search-input:focus-visible {
	outline: 2px solid rgb(var(--pc-focus));
	outline-offset: 2px;
	border-radius: var(--pc-radius-xs);
}

/* Inline pole má prstenec na celom ráme (:focus-within vyššie) — druhý
   obrys okolo samotného textového poľa by bol rám v ráme. */
.px-header__search--inline .px-header__search-input {
	height: 2rem;
	font-size: var(--pc-fs-md);
}

.px-header__search--inline .px-header__search-input:focus-visible {
	outline: 0;
}

.px-header__search-input::placeholder {
	color: rgb(var(--pc-muted));
}

.px-header__search-submit {
	padding: 0.55rem var(--pc-space-6);
	border: 0;
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-accent));
	color: rgb(var(--pc-on-accent));
	font-weight: 600;
	font-size: var(--pc-fs-sm);
	cursor: pointer;
	transition: background 0.15s;
}

.px-header__search-submit:hover {
	background: rgb(var(--pc-accent-deep));
}

/* V pruhu tlačidlo sedí v ráme poľa — nižšie a s vlastným zaoblením. */
.px-header__search--inline .px-header__search-submit {
	flex-shrink: 0;
	padding: 0.45rem 1.15rem;
	font-size: var(--pc-fs-xs);
}

.px-header__search-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-2);
	margin-top: var(--pc-space-4);
	font-size: var(--pc-fs-xs);
	color: rgb(var(--pc-muted));
}

.px-header .px-header__search-links a {
	padding: 0.3rem var(--pc-space-3);
	border: 1px solid rgb(var(--pc-line));
	border-radius: var(--pc-radius-control);
	color: inherit;
	transition: border-color 0.15s, color 0.15s;
}

.px-header .px-header__search-links a:hover {
	border-color: rgb(var(--pc-accent));
	color: rgb(var(--pc-accent-deep));
}

/* ---- Menu kategórií v samostatnom pruhu (pxt_header_nav_position = 'bar') ---- */

/* Rozperka drží ikony vpravo, keď menu nie je v hlavnom pruhu. */
.px-header__spacer {
	flex: 1;
	min-width: 0;
}

/* Linka je zdola, nie zhora: zhora ju už kreslí `.px-header__main`
   (border-bottom) a obe dokopy dávali 2px pruh. Takto ohraničuje hlavičku
   voči obsahu — v druhom rozložení, keď je menu v hlavnom pruhu, tú istú
   úlohu plní práve border-bottom `.px-header__main`. */
.px-header__navbar {
	--px-navbar-bg: var(--pc-paper);
	--px-navbar-fg: var(--pc-ink);

	border-bottom: 1px solid rgb(var(--pc-line));
	background: rgb(var(--px-navbar-bg));
	color: rgb(var(--px-navbar-fg));
}

/* Farebný pruh (`pxt_header_navbar_tone`). Text je biely, takže hover
   a aktívna položka nemôžu stmavnúť na accent-deep ako na bielom — spätnú
   väzbu dáva jemné stmavenie podkladu a podčiarknutie v farbe textu.
   Fokus sa prepína na bielu cez token, mega panel pod pruhom si vracia
   tmavý text (inak by zdedil biely). */
.px-header__navbar--primary,
.px-header__navbar--ink {
	--px-navbar-fg: var(--pc-paper);
	--pc-focus: var(--pc-paper);

	border-bottom-color: transparent;
}

.px-header__navbar--primary { --px-navbar-bg: var(--pc-accent); }
.px-header__navbar--ink { --px-navbar-bg: var(--pc-ink); }

.px-header__navbar--primary .px-header__menu > li > a,
.px-header__navbar--ink .px-header__menu > li > a {
	transition: background-color 0.15s;
}

.px-header__navbar--primary .px-header__menu > li:hover > a,
.px-header__navbar--primary .px-header__menu > li:focus-within > a,
.px-header__navbar--primary .px-header__menu > li.current-menu-item > a,
.px-header__navbar--primary .px-header__menu > li.current-menu-ancestor > a,
.px-header__navbar--ink .px-header__menu > li:hover > a,
.px-header__navbar--ink .px-header__menu > li:focus-within > a,
.px-header__navbar--ink .px-header__menu > li.current-menu-item > a,
.px-header__navbar--ink .px-header__menu > li.current-menu-ancestor > a {
	color: inherit;
	background: rgb(0 0 0 / 0.16);
}

.px-header__navbar--primary .px-header__menu > li > a::after,
.px-header__navbar--ink .px-header__menu > li > a::after {
	background: currentColor;
}

.px-header__navbar--primary .px-header__menu > li > a > .px-menu-icon,
.px-header__navbar--ink .px-header__menu > li > a > .px-menu-icon {
	color: inherit;
}

.px-header__navbar--primary .px-mega,
.px-header__navbar--ink .px-mega {
	--pc-focus: var(--pc-accent-deep);

	color: rgb(var(--pc-ink));
}

/* Prstenec dovnútra: pruh je presne taký vysoký ako položky a vonkajší
   by orezal kontajner. Farbu dáva token — na farebnom pruhu biela. */
.px-header__navbar .px-header__menu > li > a:focus-visible {
	outline: 2px solid rgb(var(--pc-focus));
	outline-offset: -2px;
}

/* Akcentová linka panela by na akcentovom pruhu splynula */
.px-header__navbar--primary .px-mega {
	border-top-color: rgb(var(--pc-line));
}

@media (max-width: 1023.98px) {
	.px-header__navbar { display: none; }
}

.px-header__nav--bar {
	justify-content: flex-start;
}

.px-header__nav--bar .px-header__menu {
	gap: var(--pc-space-1);
	flex-wrap: wrap;
}

/* Položky v pruhu sú vzdušnejšie než v stiesnenom hlavnom riadku. */
.px-header__nav--bar .px-header__menu > li > a {
	padding-block: 0.85rem;
}