/* ==========================================================================
   HEADER  —  Figma node 1:1450 („menu top", stavy Default + Variant2)

   Miery z Figmy (plátno 1920, obsah 260 → 1660):
     lišta         94px, pozadie #f4f4f4
     logo          263 × 50
     navigácia     Inter 16px, „PRODUKTY" Bold uppercase
     ikony         heart 25 · search 23.4 · košík 27.5 · účet 24.6
     mega menu     pozadie #e6f7ff, 5 stĺpcov × 3 riadky, medzera ~8px
   ========================================================================== */

/* ==========================================================================
   LEPIACA HLAVIČKA

   Lepí sa `.pc-header`, nie obal časti šablóny: ten má v base.css
   `display: contents`, takže sám žiadny rám nemá (a `position` na ňom
   nič nerobí — presne preto hlavička najprv nedržala).

   Oznamovací pás stojí PRED hlavičkou, mimo nej, takže sa odroluje
   preč a na obrazovke ostane len lišta s logom a menu.
   ========================================================================== */

.pc-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--pc-mist);
}

/* Prihlásený používateľ má nad stránkou lištu WordPressu. */
.admin-bar .pc-header {
	top: 32px;
}

@media (max-width: 782px) {
	/* Pod 782px lišta WordPressu neostáva navrchu — netreba ju obchádzať. */
	.admin-bar .pc-header {
		top: 0;
	}
}

.pc-header__bar {
	background: var(--pc-mist);
}

.pc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-24);
	min-height: var(--pc-header-height);
}

/* ---- Logo ------------------------------------------------------------- */

.pc-logo {
	display: flex;
	align-items: center;
	gap: 19px; /* Figma: značka končí na 47.5, slovo začína na 66.9 */
	flex: 0 0 auto;
}

.pc-logo__mark {
	display: block;
	width: 47px;
	height: 50px;
}

.pc-logo__word {
	display: block;
	width: 196px;
	height: 38px;
}

.pc-logo svg {
	width: 100%;
	height: 100%;
}

/* ---- Navigácia -------------------------------------------------------- */

.pc-header__nav {
	margin-inline-start: auto;
}

.pc-header__list {
	display: flex;
	align-items: center;
	gap: 38px; /* Figma: rozostup medzi položkami ~38.8px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-header__link {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-8);
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--pc-font);
	font-size: var(--pc-fs-small);
	font-weight: var(--pc-weight-regular);
	line-height: 19px;
	color: var(--pc-black);
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--pc-duration) var(--pc-ease);
}

.pc-header__link:hover,
.pc-header__link:focus-visible {
	color: var(--pc-blue);
	text-decoration: none;
}

.pc-header__link--trigger {
	font-weight: var(--pc-weight-bold);
	text-transform: uppercase;
}

/*
 * Chevron: zdrojové SVG je zvislé (8.34 × 15.17). Figma ho otáča o −90°,
 * takže vo výsledku je široké 15.17 a vysoké 8.34 a smeruje nadol.
 *
 * Box je zámerne štvorcový (15 × 15), nie 15 × 9. Rotácia je len
 * `transform` — v rozložení má SVG stále 9 × 15 a v nižšom boxe sa
 * nemá kam zvisle vycentrovať: prehliadač ho zarovná k hornej hrane
 * a šípka potom sedí o 3px nižšie než text. V štvorcovom boxe sa
 * vycentruje presne a `align-items: center` na odkaze ju zarovná
 * na stred riadka.
 */
.pc-header__chevron {
	display: grid;
	place-items: center;
	width: 15px;
	height: 15px;
}

.pc-header__chevron svg {
	width: 9px;
	height: 15px;
	transform: rotate(-90deg);
	transition: transform var(--pc-duration) var(--pc-ease);
}

[aria-expanded='true'] .pc-header__chevron svg {
	transform: rotate(90deg);
}

.pc-header__ext {
	/* Ikona z Figmy smeruje doľava dolu — von z webu sa ukazuje doprava hore. */
	transform: rotate(180deg);
	display: block;
	width: 11px;
	height: 11px;
}

.pc-header__ext svg {
	width: 100%;
	height: 100%;
}

/* ---- Ikony vpravo ----------------------------------------------------- */

.pc-header__actions {
	display: flex;
	align-items: center;
	/* Ikony majú 44px touch target, ktorý sám tvorí odstup — vlastný gap
	   by ich rozostup zdvojnásobil. */
	gap: 0;
	flex: 0 0 auto;
	margin-inline-start: 72px; /* Figma: medzera navigácia → ikony */
}

.pc-header__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; /* prístupný touch target, ikona vnútri má svoju veľkosť */
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: opacity var(--pc-duration) var(--pc-ease);
}

.pc-header__icon:hover,
.pc-header__icon:focus-visible {
	opacity: 0.7;
}

/* Veľkosti presne podľa Figmy — každá ikona má vlastný rozmer. */
.pc-header__icon svg {
	width: 25px;
	height: 23px;
}

.pc-header__icon--account svg {
	width: 25px;
	height: 25px;
}

/* ---- Košík s počítadlom ----------------------------------------------- */

.pc-header__cart {
	position: relative;
}

.pc-header__cart svg {
	width: 28px;
	height: 25px;
}

.pc-header__cart-count {
	position: absolute;
	/* Figma: krúžok 13.5px, pravý horný roh nad ikonou */
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 14px;
	height: 14px;
	padding-inline: 3px;
	border-radius: 999px;
	background: var(--pc-black);
	font-size: 8px;
	font-weight: var(--pc-weight-bold);
	line-height: 1;
	color: var(--pc-white);
}

/* ---- Hamburger (len mobil) -------------------------------------------- */

.pc-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.pc-header__burger-line {
	display: block;
	width: 24px;
	height: 2px;
	margin-inline: auto;
	background: var(--pc-black);
	transition: transform var(--pc-duration) var(--pc-ease), opacity var(--pc-duration) var(--pc-ease);
}

[aria-expanded='true'] > .pc-header__burger-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

[aria-expanded='true'] > .pc-header__burger-line:nth-child(2) {
	opacity: 0;
}

[aria-expanded='true'] > .pc-header__burger-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---- Vyhľadávanie ----------------------------------------------------- */

/* Panel len vytvára plochu; samotný formulár je zdieľaný komponent
   .pc-search-form (assets/css/components.css). */
.pc-search {
	padding-block: var(--pc-space-24);
	background: var(--pc-mist);
	border-top: 1px solid var(--pc-border);
}

/* ---- Mega menu -------------------------------------------------------- */

.pc-mega {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	padding-block: var(--pc-space-24);
	background: var(--pc-sky);
}

.pc-mega__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px; /* Figma: rozostup dlaždíc ~7–8px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-mega__cell {
	display: flex;
}

.pc-mega .pc-tile {
	--pc-tile-height: 72px;
	--pc-tile-label: var(--pc-fs-small);
	width: 100%;
}

/* ---- Mobilné menu ----------------------------------------------------- */

.pc-mobile-menu {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	/*
	 * Na celú výšku pod lištou — na tablete bolo menu kratšie než
	 * obrazovka a pod ním presvitala stránka.
	 */
	height: calc(100dvh - var(--pc-menu-top, 64px));
	max-height: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--pc-space-24) var(--pc-gutter) var(--pc-space-48);
	background: var(--pc-white);
	border-top: 1px solid var(--pc-border);
}

.pc-mobile-menu__list,
.pc-mobile-menu__categories {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-mobile-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-8);
	width: 100%;
	min-height: 52px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--pc-border);
	background: none;
	font-family: var(--pc-font);
	font-size: var(--pc-fs-lead);
	font-weight: var(--pc-weight-bold);
	color: var(--pc-black);
	text-align: start;
	cursor: pointer;
}

.pc-mobile-menu__categories {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	padding-block: var(--pc-space-16);
}

.pc-mobile-menu__categories .pc-tile {
	--pc-tile-height: 60px;
	--pc-tile-icon: 28px;
	--pc-tile-label: var(--pc-fs-micro);
	background: var(--pc-sky);
}

/* Výška lišty nad menu (64px, na telefóne 56px) + panel administrátora. */
.admin-bar .pc-mobile-menu {
	--pc-menu-top: calc(64px + 32px);
}

@media (max-width: 782px) {
	.admin-bar .pc-mobile-menu {
		--pc-menu-top: calc(64px + 46px);
	}
}

@media (max-width: 480px) {
	.pc-mobile-menu {
		--pc-menu-top: 56px;
	}

	.admin-bar .pc-mobile-menu {
		--pc-menu-top: calc(56px + 46px);
	}
}

/* Zamkni scroll stránky, keď je otvorené mobilné menu. */
body.pc-menu-open {
	overflow: hidden;
}

/* ==========================================================================
   RESPONZIVITA

   Figma má navrhnutý iba desktop (1920). Breakpointy sú odvodené podľa
   miesta, ktoré obsah reálne potrebuje:
     ≤ 1200px  navigácia sa už nezmestí vedľa loga a ikon → hamburger
     ≤ 600px   mega menu do 2 stĺpcov, menšie logo
   ========================================================================== */

@media (max-width: 1200px) {
	.pc-header__nav,
	.pc-header__icon--muted {
		display: none;
	}

	/*
	 * Vyhľadávanie na mobile ostáva — je to najrýchlejšia cesta
	 * k produktu a do riadku sa zmestí. Skryté sú len obľúbené.
	 */
	.pc-header__icon--search {
		display: grid;
	}

	.pc-header__burger {
		display: flex;
	}

	.pc-header__actions {
		margin-inline-start: 0;
	}

	.pc-mega {
		display: none;
	}
}

@media (min-width: 1201px) {
	.pc-mobile-menu {
		display: none;
	}
}

@media (max-width: 600px) {
	.pc-logo__mark {
		width: 36px;
		height: 38px;
	}

	.pc-logo__word {
		width: 150px;
		height: 29px;
	}

	.pc-logo {
		gap: var(--pc-space-12);
	}

	.pc-mobile-menu__categories {
		grid-template-columns: 1fr;
	}
}

/*
 * Úzke telefóny (iPhone 15 Pro má 393px). Logo v predošlej veľkosti
 * (36 + 12 + 150 = 198px) spolu so štyrmi 44px ikonami a odsadením
 * kontajnera potrebuje 406px — riadok pretiekol a ikony sa orezali.
 * Zmenšuje sa logo, nie ikony: tie sú dotykové ciele.
 */
@media (max-width: 1200px) {
	/*
	 * Lišta z Figmy má 94px — to je miera pre plátno 1920. Na telefóne
	 * z nej ostane pás cez pol obrazovky ešte skôr, než sa dá k obsahu.
	 */
	.pc-header__inner {
		min-height: 64px;
	}
}

@media (max-width: 480px) {
	.pc-header__inner {
		gap: var(--pc-space-8);
		min-height: 56px;
	}

	.pc-logo {
		gap: var(--pc-space-8);
	}

	.pc-logo__mark {
		width: 28px;
		height: 30px;
	}

	.pc-logo__word {
		width: 116px;
		height: 22px;
	}

	.pc-header__icon {
		width: 40px;
	}
}