/**
 * Vlastná hlavička — benab-style (px-shop-theme) dizajn.
 *
 * Samostatné CSS bez build kroku — hlavička sa načítava na každej stránke,
 * aj tam, kde archive.css nie je (Elementor stránky, košík…), preto sú
 * tokeny deklarované priamo na .px-header (rovnaké hodnoty ako .pc-scope
 * v archive.css + farby topbaru z Elementor kitu).
 *
 * Breakpointy podľa Elementoru: mobil < 768, tablet 768–1024, desktop ≥ 1025.
 */

.px-header {
	--pc-paper: 255 255 255;
	--pc-ink: 4 40 23;           /* Text #042817 */
	--pc-accent: 0 122 64;       /* Pneuvosovič zelená #007A40 — min. 4.5:1 s bielou (WCAG 1.4.3) */
	--pc-accent-deep: 0 98 58;   /* #00623A */
	--pc-accent-bright: 0 191 99; /* Pôvodná #00BF63 — len na tmavých plochách (topbar) */
	--pc-soft: 244 246 247;
	--pc-line: 231 243 237;      /* Light #E7F3ED */
	--pc-muted: 84 104 95;
	--pc-sage: 137 171 160;      /* Sekundárny #89ABA0 */
	--pc-topbar-text: 135 152 146; /* Footer Text #879892 */
	--pc-radius-control: 9999px;

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

	position: sticky;
	top: 0;
	z-index: 990;
	font-size: 0.9375rem;
	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: 90rem;
	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 {
	background: rgb(var(--pc-ink));
	color: rgb(var(--pc-topbar-text));
	font-size: 0.8125rem;
}

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

.px-header__contacts {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	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: 1023px) {
	.px-header__tagline { display: none; }
}

.px-header__topnav {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-shrink: 0;
}

.px-header__topmenu {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.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: 1024px) {
	.px-header__topnav nav { display: none; }
}

.px-header__social {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.px-header__social a {
	display: inline-flex;
	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: 767px) {
	.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: 1.5rem;
	height: var(--px-header-main-h);
}

@media (min-width: 1025px) {
	.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: 1025px) {
	.px-header__logo img { height: 3rem; }
}

.px-header__logo-text {
	font-size: 1.25rem;
	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: 1024px) {
	.px-header__nav { display: none; }
}

.px-header__menu {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/* 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;
}

/* 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: 0.5rem 0.75rem;
	font-size: 0.875rem;
	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 */
.px-header__menu .menu-item-has-children > a::before {
	content: '';
	order: 2;
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.1em);
	transition: transform 0.18s ease;
	flex-shrink: 0;
}

/* Otvorený panel otočí šípku nahor. Znamienko posunu je opačné než v
   zavretom stave: translateY beží po otočených osiach, takže pri -135°
   dá rovnaký optický posun ako -0.1em pri 45° a štvorček neposkočí. */
.px-header__menu > li:hover > a::before,
.px-header__menu > li:focus-within > a::before {
	transform: rotate(-135deg) translateY(0.1em);
}

/* ---- 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: 1.75rem 1.75rem 0.5rem;
	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:
		0 0.125rem 0.5rem rgb(var(--pc-ink) / 0.1),
		0 1.5rem 2.5rem -0.5rem rgb(var(--pc-ink) / 0.28);
	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);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 10;
}

.px-header__menu > li:hover > .px-mega,
.px-header__menu > li:focus-within > .px-mega {
	opacity: 1;
	visibility: visible;
	content-visibility: visible;
	transform: translateY(0);
}

/* 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: 1.5rem;
}

/* Kategórie s hrsťou podkategórií by nechali vpravo prázdny pás — stĺpcov
   je toľko, koľko skupín, a tie sa roztiahnu na celú šírku panela.
   `:has()` sa pýta na počet položiek; od šiestej platí voľba podľa šírky
   vyššie. Poradie pravidiel je od najviac k najmenej: pri štyroch skupinách
   platí posledné, ktoré ešte sedí. */
.px-mega > .sub-menu:not(:has(> li:nth-child(6))) { column-count: 5; }
.px-mega > .sub-menu:not(:has(> li:nth-child(5))) { column-count: 4; }
.px-mega > .sub-menu:not(:has(> li:nth-child(4))) { column-count: 3; }
.px-mega > .sub-menu:not(:has(> li:nth-child(3))) { column-count: 2; }
.px-mega > .sub-menu:not(:has(> li:nth-child(2))) { column-count: 1; }

/* 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: 1.25rem;
}

.px-mega > .sub-menu > li > a {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.25rem 0;
	font-size: 0.875rem;
	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: 0.25rem 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: 0.8125rem;
	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 1.25rem;
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-accent));
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	white-space: nowrap;
	transition: background 0.15s;
}

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

/* `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: 1279px) {
	.px-header__main a.px-header__cta { display: none; }
}

.px-header__iconbtn {
	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: #fff;
}

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

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

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

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

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

.px-header__cart {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	height: 2.5rem;
	padding: 0 0.875rem;
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-sunk));
	font-weight: 600;
	font-size: 0.875rem;
	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 0.25rem;
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-accent));
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.125rem;
	text-align: center;
}

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

@media (max-width: 767px) {
	.px-header__cart {
		width: 2.5rem;
		padding: 0;
		justify-content: center;
	}

	.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: 1000;
	opacity: 0;
	transition: opacity 0.2s;
}

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

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

/* ---- 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: 1.25rem 0 1.5rem;
	z-index: 1010;
}

/* 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: 1024px) {
	.px-header__search--inline { display: none; }
}

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

.px-header__search-form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

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

.px-header__search--inline .px-header__search-form:focus-within {
	border-color: rgb(var(--pc-accent));
	box-shadow: 0 0 0 3px rgb(var(--pc-accent) / 0.15);
}

.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: 1.125rem;
	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-accent));
	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: 0.9375rem;
}

.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 1.5rem;
	border: 0;
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-accent));
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	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: 0.8125rem;
}

.px-header__search-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	font-size: 0.8125rem;
	color: rgb(var(--pc-muted));
}

.px-header .px-header__search-links a {
	padding: 0.3rem 0.75rem;
	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));
}

/* Live výsledky (plnené z REST pixeler/v1/search cez header.js) */
.px-header__search-results {
	margin-top: 0.75rem;
	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: 0.5rem;
	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: 1010;
}

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

.px-header__search-heading {
	margin: 0;
	padding: 0.5rem 0.5rem 0.25rem;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgb(var(--pc-muted));
}

.px-header__search-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.5rem;
	border-radius: var(--pc-radius-sm);
	transition: background 0.15s;
}

.px-header__search-row:hover {
	background: rgb(var(--pc-ink) / 0.05);
}

/* Šípkami sa dá ponukou prechádzať (header.js) — fokus musí byť vidieť. */
.px-header__search-row:focus-visible {
	outline: 2px solid rgb(var(--pc-accent));
	outline-offset: -2px;
	background: rgb(var(--pc-ink) / 0.05);
}

.px-header__search-row img,
.px-header__search-row .px-header__search-caticon {
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border-radius: var(--pc-radius-sm);
	object-fit: cover;
	background: rgb(var(--pc-soft));
}

.px-header__search-caticon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(var(--pc-accent) / 0.1);
	color: rgb(var(--pc-accent-deep));
}

.px-header__search-rowinfo {
	flex: 1;
	min-width: 0;
}

.px-header__search-rowname {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.px-header__search-rowsub {
	display: block;
	font-size: 0.75rem;
	color: rgb(var(--pc-muted));
	margin-top: 0.125rem;
}

.px-header__search-rowsub del {
	margin-right: 0.35rem;
}

.px-header__search-rowsub ins {
	text-decoration: none;
	font-weight: 600;
	color: rgb(var(--pc-ink));
}

/* Nedostupný výsledok — nájsť sa dá, ale nesmie vyzerať ako ponuka */
.px-header__search-row.is-unavailable img {
	opacity: 0.5;
}

.px-header__search-row.is-unavailable .px-header__search-rowname,
.px-header__search-row.is-unavailable .px-header__search-rowsub {
	color: rgb(var(--pc-muted));
}

.px-header__search-flag {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.05rem 0.35rem;
	border-radius: var(--pc-radius-xs);
	background: rgb(var(--pc-soft));
	color: rgb(var(--pc-secondary));
	font-size: 0.6875rem;
	font-weight: 600;
	white-space: nowrap;
}

.px-header__search-empty {
	margin: 0;
	padding: 0.625rem 0.5rem;
	font-size: 0.875rem;
	color: rgb(var(--pc-muted));
}

.px-header .px-header__search-all {
	display: block;
	margin-top: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgb(var(--pc-line));
	text-align: center;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgb(var(--pc-accent-deep));
}

.px-header .px-header__search-all:hover {
	text-decoration: underline;
}

/* ---- Drawer + minicart (pravé panely) ---- */

.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: 1020;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.25s ease;
	box-shadow: -8px 0 32px rgb(var(--pc-ink) / 0.15);
}

.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;
}

.px-header__drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgb(var(--pc-line));
	flex-shrink: 0;
}

.px-header__drawer-title {
	font-size: 1.0625rem;
	font-weight: 700;
}

.px-header__drawer-body {
	overflow-y: auto;
	padding: 0.75rem 1.25rem 2rem;
	flex: 1;
}

/* Menu v draweri */
.px-header__drawer-menu > li {
	border-bottom: 1px solid rgb(var(--pc-line));
}

.px-header__drawer-menu > li:last-child {
	border-bottom: 0;
}

.px-header__drawer-menu a {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 0;
	font-weight: 500;
}

/* Ikony kategórií v draweri — menšie než v mega paneli */
.px-header__drawer-menu .px-menu-icon {
	width: 2rem;
	height: 2rem;
}

.px-header__drawer-menu .px-menu-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Miesto pre absolútne polohovaný subtoggle, aby neprekryl dlhý názov */
.px-header__drawer-menu .menu-item-has-children > a {
	padding-right: 2.5rem;
}

.px-header__drawer-menu .menu-item-has-children {
	position: relative;
}

/* JS tlačidlo na roztvorenie podmenu */
.px-header__subtoggle {
	position: absolute;
	top: 0.3rem;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 50%;
	background: rgb(var(--pc-soft));
	color: rgb(var(--pc-muted));
	cursor: pointer;
	transition: transform 0.2s, background 0.15s;
}

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

.menu-item-has-children.is-open > .px-header__subtoggle {
	transform: rotate(180deg);
	background: rgb(var(--pc-line));
}

.px-header__drawer-menu .sub-menu {
	display: none;
	padding-left: 0.875rem;
	border-left: 2px solid rgb(var(--pc-line));
	margin-bottom: 0.5rem;
}

.px-header__drawer-menu .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

.px-header__drawer-menu .sub-menu a {
	padding: 0.5rem 0;
	font-weight: 400;
	font-size: 0.875rem;
	color: rgb(var(--pc-muted));
}

.px-header__drawer-menu .sub-menu a:hover {
	color: rgb(var(--pc-accent-deep));
}

.px-header__drawer-cta {
	display: flex;
	justify-content: center;
	margin: 1.25rem 0;
}

.px-header__drawer-menu--secondary a {
	font-weight: 400;
	font-size: 0.875rem;
	color: rgb(var(--pc-muted));
	padding: 0.5rem 0;
}

.px-header__drawer-menu--secondary > li {
	border-bottom: 0;
}

.px-header__drawer-meta {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgb(var(--pc-line));
	display: grid;
	gap: 0.625rem;
}

.px-header__drawer-meta a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9375rem;
}

.px-header__drawer-meta .px-header-icon {
	width: 1rem;
	height: 1rem;
	color: rgb(var(--pc-accent));
}

.px-header__drawer-social {
	margin-top: 1.25rem;
	color: rgb(var(--pc-muted));
}

.px-header__drawer-social .px-header-icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* ---- Mini-košík (benab štruktúra: zoznam scrolluje, footer drží dole) ---- */

.px-header__minicart-body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.px-header__minicart-body .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

/* Dvojité zanorenie: `.px-header` kvôli resetu `.px-header ul` vyššie
   a `.px-header__minicart` kvôli `.woocommerce ul.cart_list { padding: 0 }`
   z woocommerce.css. Trieda `.woocommerce` je na `body` len na WooCommerce
   stránkach, takže s jednou našou triedou mal mini-košík odsadenie na úvodke
   a na detaile či archíve nie. */
.px-header .px-header__minicart .px-minicart__list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 1rem 1.25rem;
	margin: 0;
	list-style: none;
}

/* Zoznam nesie WC triedy `cart_list product_list_widget`, takže naň sadajú
   štýly widgetu z woocommerce.css — selektor `.woocommerce ul.cart_list li …`
   má vyššiu špecificitu než jedna naša trieda a prebil by nám položku aj
   obrázok (`width: 32px; float: right`). Preto sú tieto pravidlá zanorené;
   zanorenie je tu kvôli špecificite, nie kvôli štruktúre. */
.px-header__minicart .px-minicart__list .px-minicart__item {
	position: relative;
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.625rem 1.5rem 0.625rem 0;
	border-bottom: 1px solid rgb(var(--pc-line));
	font-size: 0.875rem;
}

/* WC do položky pridáva clearfix pseudo-elementy — vo flexboxe by z nich boli
   dve prázdne položky navyše a `gap` by okolo nich urobil diery. */
.px-header__minicart .px-minicart__list .px-minicart__item::before,
.px-header__minicart .px-minicart__list .px-minicart__item::after {
	content: none;
}

.px-minicart__item:last-child {
	border-bottom: 0;
}

.px-minicart__thumb {
	display: block;
	width: 4rem;
	height: 4rem;
	flex-shrink: 0;
	background: rgb(var(--pc-soft));
	border: 1px solid rgb(var(--pc-line));
	border-radius: var(--pc-radius-sm);
	overflow: hidden;
}

.px-header__minicart .px-minicart__list .px-minicart__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0;
	float: none;
}

.px-minicart__info {
	flex: 1;
	min-width: 0;
}

.px-minicart__name {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Rovnaký dôvod zanorenia — WC odkazu v zozname nastavuje
   `display: block; font-weight: 700`. Blok by tu navyše zhodil orezanie na dva
   riadky: `.px-minicart__name` je `-webkit-box` a `-webkit-line-clamp` počíta
   riadky vlastného obsahu, nie blokového potomka. */
.px-header__minicart .px-minicart__list .px-minicart__name a {
	color: rgb(var(--pc-ink));
	display: inline;
	font-weight: inherit;
}

/* Krížik je tiež odkaz v zozname, takže dedí to isté `font-weight: 700`. */
.px-header__minicart .px-minicart__list a.remove {
	font-weight: 400;
}

.px-minicart__name a:hover {
	text-decoration: underline;
}

.px-minicart__qty {
	font-size: 0.75rem;
	color: rgb(var(--pc-muted));
	margin-top: 0.25rem;
}

.px-header__minicart a.remove {
	position: absolute;
	top: 0.625rem;
	right: 0;
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1.375rem;
	text-align: center;
	border-radius: 50%;
	background: rgb(var(--pc-soft));
	color: rgb(var(--pc-muted)) !important;
	font-size: 1rem;
	text-decoration: none;
}

.px-header__minicart a.remove:hover {
	background: #dc2626;
	color: #fff !important;
}

.px-minicart__footer {
	flex-shrink: 0;
	padding: 1rem 1.25rem;
	border-top: 1px solid rgb(var(--pc-line));
	background: rgb(var(--pc-paper));
}

.px-minicart__totals {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
}

.px-minicart__total-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.375rem;
	color: rgb(var(--pc-muted));
}

.px-minicart__total-row--grand {
	margin: 0;
	color: rgb(var(--pc-ink));
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Čiara oddeľuje súčet od rozpisu nad ním. Pri vypnutých daniach je súčet
   jediný riadok a oddelenie od zoznamu už drží rámik footera. */
.px-minicart__total-row--grand:not(:first-child) {
	padding-top: 0.5rem;
	border-top: 1px solid rgb(var(--pc-line));
}

.px-minicart__total-row--grand .woocommerce-Price-amount {
	font-weight: 700;
}

.px-minicart__buttons {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}

/* Triedy tlačidiel si WooCommerce mení podľa verzie (button / wc-forward /
   wp-element-button), preto štýlujeme každý odkaz vo footeri mini-košíka.

   `.px-header` v selektore je kvôli špecificite, nie kvôli zanoreniu:
   `woocommerce.css` má `.woocommerce a.button` (0,2,1), čo prebije aj
   `.px-minicart__buttons a` (0,1,1), aj `.px-minicart__buttons .button`
   (0,2,0). Trieda `woocommerce` sedí na `<body>` na produkte a v archívoch
   (nie na úvodke ani v košíku — tam WooCommerce dáva len `woocommerce-page`),
   takže mini-košík mal šedé WC tlačidlá práve tam, kde sa najviac používa.
   Prefix zdvihne váhu nad Woo; rovnako musia byť zdvihnuté aj :hover
   a .checkout nižšie, inak by ich prebil tento základ. */
.px-header .px-minicart__buttons a,
.px-header .px-minicart__buttons .button {
	display: flex;
	justify-content: center;
	padding: 0.7rem 1.25rem;
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-accent));
	color: #fff;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: background 0.15s;
}

.px-header .px-minicart__buttons a:hover,
.px-header .px-minicart__buttons .button:hover {
	background: rgb(var(--pc-accent-deep));
	color: #fff;
}

.px-header .px-minicart__buttons a.checkout,
.px-header .px-minicart__buttons .button.checkout {
	background: rgb(var(--pc-ink));
}

.px-header .px-minicart__buttons a.checkout:hover,
.px-header .px-minicart__buttons .button.checkout:hover {
	background: rgb(var(--pc-accent-deep));
}

.px-minicart__empty {
	margin: 2rem 0;
	text-align: center;
	color: rgb(var(--pc-muted));
}

/* Odkaz „Zobraziť košík", ktorý WC pridáva po AJAX pridaní — namiesto neho
   otvárame mini-košík.

   `body.woocommerce` je tu opäť kvôli špecificite: Woo má
   `.woocommerce a.added_to_cart { display: inline-block }` (0,2,1), takže
   samotné `a.added_to_cart` (0,1,1) neplatilo a odkaz sa na produkte
   a v archívoch po pridaní do košíka aj tak zobrazil. */
a.added_to_cart,
body.woocommerce a.added_to_cart {
	display: none;
}

/* Spinner počas AJAX pridávania do košíka (header.js pridáva .loading) */
.single_add_to_cart_button.loading,
.add_to_cart_button.loading {
	color: transparent !important;
	pointer-events: none;
	position: relative;
}

.single_add_to_cart_button.loading::after,
.add_to_cart_button.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 1rem;
	margin: -0.5rem 0 0 -0.5rem;
	border-radius: var(--pc-radius-pill);
	border: 2px solid rgb(255 255 255 / 0.5);
	border-top-color: #fff;
	animation: px-header-spin 0.6s linear infinite;
}

@keyframes px-header-spin {
	to { transform: rotate(360deg); }
}

/* Zámok scrollovania pri otvorenom paneli */
body.px-header-lock {
	overflow: hidden;
}

/* ---- 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 {
	border-bottom: 1px solid rgb(var(--pc-line));
	background: rgb(var(--pc-paper));
}

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

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

.px-header__nav--bar .px-header__menu {
	gap: 0.25rem;
	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;
}