/*
 * Header, mega meni, mobilni meni, pretraga (Design.md §8.9, §8.10).
 * Vrednosti su tokeni iz theme.json. Breakpointi su upisani brojem jer @media ne prima var():
 * lg = 66rem (Design.md §6.4).
 */

/* ---------- Sticky ---------- */

/*
 * Lepi se ceo deo "header". Traka iznad header-a (ako postoji) odlazi gore pri skrolovanju.
 * Deo se prepoznaje po našem header-u, a ne po tagu <header>: neki WC šabloni (potvrda porudžbine)
 * ubacuju deo "header" bez tagName, pa je omotač <div>.
 */
.wp-site-blocks > .wp-block-template-part:has(> .kl-header) {
	/* Visina WP admin trake (samo za ulogovane). */
	--kl-admin-traka: var(--wp-admin--admin-bar--height, 0px);

	position: sticky;
	top: var(--kl-admin-traka);
	z-index: 100;
}

.wp-site-blocks > .wp-block-template-part:has(> .kl-header):has(> .kl-topbar) {
	top: calc(var(--kl-admin-traka) - var(--wp--custom--header--topbar-height));
}

/*
 * Do 600px WP admin traka nije fiksna, već odlazi sa stranicom, pa header ne ostavlja
 * mesto za nju (inače ostaje prazan pojas iznad header-a). 600px je breakpoint WP-a, ne naš.
 */
@media (max-width: 600px) {
	.wp-site-blocks > .wp-block-template-part:has(> .kl-header) {
		--kl-admin-traka: 0px;
	}
}

/*
 * Telefon i tablet: header se sakriva pri skrolovanju nadole i vraća pri skrolovanju nagore
 * (klasa kl-header-skriven, view.js).
 * - Header je stalno na svom sloju (translateY(0) + will-change), pa browser ne pravi novi sloj
 *   na početku svake animacije. To je pravilo "trzaj" pri nestajanju, posebno na iOS-u.
 * - Pomera se tačno za vidljivi deo: traka je tada već iznad ekrana (sticky top je minus njena
 *   visina), pa bi -100% išlo predaleko i animacija bi delom tekla van ekrana.
 * - Dok je ekran pretrage otvoren, transform je "none": transform bi postao okvir za fiksirani
 *   ekran pretrage (blocks/pretraga). Header se tada ionako vidi.
 */
@media (max-width: 65.99rem) {
	.wp-site-blocks > .wp-block-template-part:has(> .kl-header) {
		transform: translateY(0);
		transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--easing-standard);
		will-change: transform;
	}

	html.kl-header-skriven .wp-site-blocks > .wp-block-template-part:has(> .kl-header) {
		transform: translateY(-100%);
	}

	html.kl-header-skriven .wp-site-blocks > .wp-block-template-part:has(> .kl-header):has(> .kl-topbar) {
		transform: translateY(calc(var(--wp--custom--header--topbar-height) - 100%));
	}

	html.kl-pretraga-otvorena .wp-site-blocks > .wp-block-template-part:has(> .kl-header) {
		transform: none;
		transition: none;
		will-change: auto;
	}
}

@media (max-width: 65.99rem) and (prefers-reduced-motion: reduce) {
	.wp-site-blocks > .wp-block-template-part:has(> .kl-header) {
		transition: none;
	}
}

.wp-site-blocks > .wp-block-template-part:has(> .kl-header) > * {
	margin-block: 0;
}

/* ---------- Traka iznad header-a ---------- */

/* Zlatna traka: crni tekst na zlatnoj (Design.md §4.3), tekst u sredini, X desno. Na desktopu je zaobljena. */
.kl-topbar {
	display: flex;
	position: relative;
	align-items: center;
	height: var(--wp--custom--header--topbar-height);
	padding-inline: var(--wp--custom--header--topbar-height);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: var(--wp--custom--letter-spacing--caption);
}

.kl-topbar__tekst {
	flex: 1;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	line-height: 1;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kl-topbar a {
	color: inherit;
	text-decoration: underline;
}

.kl-topbar__zatvori {
	display: grid;
	position: absolute;
	top: 0;
	right: var(--wp--preset--spacing--02);
	place-items: center;
	width: var(--wp--custom--header--topbar-height);
	height: var(--wp--custom--header--topbar-height);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.kl-topbar__zatvori .kl-ikona {
	width: 1rem;
	height: 1rem;
}

.kl-topbar__zatvori:focus-visible {
	outline-color: var(--wp--preset--color--black);
}

/* Zatvorena traka: nema je, a visina se nigde više ne računa (sticky header, galerija proizvoda) */
html[data-kl-traka="zatvorena"] .kl-topbar {
	display: none;
}

html[data-kl-traka="zatvorena"] body {
	--wp--custom--header--topbar-height: 0px;
}

/* ---------- Header ---------- */

.kl-header {
	/* Ikonica je manja od touch zone (2.75rem), pa je vidljiva ivica ikonice uvučena za ovoliko. */
	--kl-uvlaka-ikonice: calc((var(--wp--custom--touch-target) - var(--wp--custom--icon--size)) / 2);
	--kl-margina: var(--wp--preset--spacing--05);
	--kl-visina: var(--wp--custom--header--height-mobile);

	position: relative;
	background: var(--wp--preset--color--white);
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
}

.kl-header__traka {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: var(--kl-visina);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--kl-margina);
}

.kl-header__levo {
	display: flex;
	align-items: center;
	height: 100%;
	margin-inline-start: calc(var(--kl-uvlaka-ikonice) * -1);
}

.kl-header__desno {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-inline-end: calc(var(--kl-uvlaka-ikonice) * -1);
}

/* Samo na desktopu. Specifičnost je veća od .kl-ikonica i .kl-jezici, koje postavljaju display. */
.kl-header .kl-header__samo-desktop,
.kl-header .kl-header__jezici,
.kl-header .kl-nav {
	display: none;
}

/* Dugme sa ikonicom: touch zona 2.75rem (Design.md §6.3) */
.kl-ikonica {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--wp--custom--touch-target);
	height: var(--wp--custom--touch-target);
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--black);
	cursor: pointer;
}

.kl-ikonica .kl-ikona {
	width: var(--wp--custom--icon--size);
	height: var(--wp--custom--icon--size);
}

/* Logo (tekstualni dok ne stigne SVG) */
.kl-logo {
	display: inline-flex;
	align-items: center;
	justify-self: center;
	min-height: var(--wp--custom--touch-target);
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--logo);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.kl-logo__slika {
	width: auto;
	height: 1.5rem;
}

/* Broj stavki u korpi */
.kl-korpa-dugme__broj,
.kl-ikonica__broj {
	position: absolute;
	top: var(--wp--preset--spacing--03);
	right: var(--wp--preset--spacing--01);
	min-width: 1rem;
	height: 1rem;
	padding-inline: var(--wp--preset--spacing--01);
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--badge);
	font-weight: 500;
	line-height: 1rem;
	text-align: center;
}

/* Prekidač jezika SR / EN */
.kl-jezici {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--nav-sub);
	font-weight: 500;
}

.kl-jezici li {
	display: flex;
	align-items: center;
}

.kl-jezici li + li::before {
	content: "/";
	color: var(--wp--preset--color--grey-400);
}

.kl-jezici__jezik {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--touch-target);
	padding-inline: var(--wp--preset--spacing--02);
	color: var(--wp--preset--color--grey-600);
	text-decoration: none;
}

.kl-jezici__jezik.is-aktivan {
	color: var(--wp--preset--color--black);
}

a.kl-jezici__jezik:hover {
	color: var(--wp--preset--color--black);
}

/* ---------- Desktop (lg) ---------- */

@media (min-width: 66rem) {
	.kl-header {
		--kl-margina: var(--wp--preset--spacing--07);
		--kl-visina: var(--wp--custom--header--height-desktop);
	}

	.kl-header .kl-header__hamburger,
	.kl-header .kl-header__samo-mobilni {
		display: none;
	}

	.kl-header__levo {
		margin-inline-start: calc(var(--wp--preset--spacing--04) * -1);
	}

	.kl-header .kl-nav,
	.kl-header .kl-header__samo-desktop {
		display: flex;
	}

	.kl-header .kl-header__jezici {
		display: flex;
		margin-inline-end: var(--wp--preset--spacing--03);
	}

	.kl-nav {
		height: 100%;
	}

	.kl-nav__lista {
		display: flex;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Stavka nije pozicionirana: panel se meri od celog header-a (puna širina). */
	.kl-nav__stavka {
		display: flex;
	}

	.kl-nav__link {
		display: flex;
		position: relative;
		align-items: center;
		height: var(--kl-visina);
		padding: 0 var(--wp--preset--spacing--04);
		color: var(--wp--preset--color--black);
		font-size: var(--wp--preset--font-size--nav);
		font-weight: 500;
		line-height: var(--wp--custom--line-height--tight);
		letter-spacing: var(--wp--custom--letter-spacing--button);
		text-decoration: none;
		white-space: nowrap;
	}

	/* Podvučena stavka kao u referenci: otvoren panel, prelaz mišem ili trenutna stranica. */
	.kl-nav__link::after {
		position: absolute;
		top: calc(50% + 0.85em);
		right: var(--wp--preset--spacing--04);
		left: var(--wp--preset--spacing--04);
		height: 0.0625rem;
		background: currentColor;
		content: "";
		transform: scaleX(0);
		transition: transform var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
	}

	.kl-nav__stavka:hover > .kl-nav__link::after,
	.kl-nav__link.is-otvoren::after,
	.kl-nav__link.is-aktivna::after {
		transform: none;
	}

	/* Strelica za tastaturu: nevidljiva dok ne dobije fokus (u referenci nema strelica). */
	.kl-nav__strelica {
		display: flex;
		position: absolute;
		align-items: center;
		width: 1px;
		height: 1px;
		overflow: hidden;
		padding: 0;
		border: 0;
		background: none;
		color: var(--wp--preset--color--black);
		clip-path: inset(50%);
		cursor: pointer;
	}

	.kl-nav__strelica:focus-visible {
		position: static;
		width: auto;
		height: var(--kl-visina);
		margin-inline-start: calc(var(--wp--preset--spacing--03) * -1);
		padding-inline-end: var(--wp--preset--spacing--03);
		clip-path: none;
	}

	.kl-nav__strelica .kl-ikona {
		width: 0.875rem;
		height: 0.875rem;
	}

	.kl-nav__strelica[aria-expanded="true"] .kl-ikona {
		transform: rotate(180deg);
	}
}

/*
 * Uzak desktop (66–78rem, npr. tablet položeno, laptop 1024–1240px): šest stavki menija ne staje
 * levo od logoa u sredini, pa se do 78rem koristi ☰ i meni kao na telefonu. Ostatak header-a je desktop.
 */
@media (min-width: 66rem) and (max-width: 77.99rem) {
	.kl-header .kl-header__hamburger {
		display: inline-flex;
	}

	.kl-header .kl-nav {
		display: none;
	}
}

/* ---------- Mega meni (desktop) ---------- */

.kl-mega {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 1;
	overflow-y: auto;
	max-height: calc(100vh - var(--kl-visina));
	background: var(--wp--preset--color--white);
	border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
}

.kl-mega__unutra {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--09);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--07) var(--kl-margina) var(--wp--preset--spacing--08);
}

/*
 * Panel po referenci navbar-desktop.png (lululemon, 23.10.): kolone po liniji (Ski, Fitness & Yoga,
 * Ski outlet). Naslov kolone 18px sivi, kategorije 14px crne. Desno slike linija (4:5).
 */
.kl-mega__kolone {
	display: flex;
	flex-wrap: wrap;
	align-content: start;
	gap: var(--wp--preset--spacing--07) var(--wp--preset--spacing--09);
}

.kl-mega__kolona {
	min-width: 10rem;
}

.kl-mega__naslov {
	margin: 0 0 var(--wp--preset--spacing--05);
	font-size: var(--wp--preset--font-size--nav-naslov);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--tight);
}

.kl-mega__naslov a {
	color: var(--wp--preset--color--grey-600);
	text-decoration: none;
	transition: color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

.kl-mega__lista {
	display: grid;
	gap: var(--wp--preset--spacing--04);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kl-mega__link {
	display: inline-block;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--nav);
	line-height: var(--wp--custom--line-height--tight);
	text-decoration: none;
	transition: color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

.kl-mega__naslov a:hover {
	color: var(--wp--preset--color--black);
}

.kl-mega__link:hover {
	color: var(--wp--preset--color--grey-600);
}

.kl-mega__slike {
	display: flex;
	flex: none;
	gap: var(--wp--preset--spacing--05);
}

.kl-mega__slika {
	display: grid;
	gap: var(--wp--preset--spacing--03);
	align-content: start;
	width: 13rem;
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

.kl-mega__potpis {
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.25em;
	transition: text-decoration-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

.kl-mega__slika:hover .kl-mega__potpis {
	text-decoration-color: currentColor;
}

/*
 * Zatamnjenje ispod mega menija. Skriveno ima visinu 0 (posle fade-out-a),
 * da ne produžava stranicu za skrolovanje.
 */
.kl-header__overlay {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	height: 0;
	background: var(--wp--custom--overlay);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--wp--custom--motion--base) linear,
		visibility 0s linear var(--wp--custom--motion--base),
		height 0s linear var(--wp--custom--motion--base);
}

.kl-header__overlay.is-vidljiv {
	height: 100vh;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/*
 * ---------- Plutajući header (samo desktop) ----------
 * Po referenci navbar-idea.png (Danilo, 16.10.): zlatna traka i header su zaobljene "kartice"
 * odmaknute od ivica ekrana. Pri skrolovanju traka odlazi, a header ostaje sa razmakom iznad,
 * pa sadržaj prolazi ispod i oko njega. Mobilni ostaje kakav je bio.
 */

@media (min-width: 66rem) {
	/*
	 * Deo header-a koji odlazi pri skrolovanju (traka + razmak iznad nje).
	 * Koristi ga i galerija proizvoda (visina ekrana ispod header-a).
	 */
	body {
		--kl-header-vrh: calc(var(--wp--custom--header--topbar-height) + var(--wp--custom--header--float-gap));
	}

	html[data-kl-traka="zatvorena"] body {
		--kl-header-vrh: 0px;
	}

	/* flow-root: razmaci iznad trake i header-a ostaju unutar dela koji se lepi */
	.wp-site-blocks > .wp-block-template-part:has(> .kl-header) {
		display: flow-root;
		padding-inline: var(--wp--preset--spacing--05);
	}

	.wp-site-blocks > .wp-block-template-part:has(> .kl-header),
	.wp-site-blocks > .wp-block-template-part:has(> .kl-header):has(> .kl-topbar) {
		top: calc(var(--kl-admin-traka) - var(--kl-header-vrh));
	}

	.wp-site-blocks > .wp-block-template-part:has(> .kl-header) > .kl-topbar,
	.wp-site-blocks > .wp-block-template-part:has(> .kl-header) > .kl-header {
		margin-block-start: var(--wp--custom--header--float-gap);
	}

	/* Traka kao kartica (boja i raspored su isti kao na telefonu) */
	.kl-topbar {
		border-radius: var(--wp--custom--header--topbar-radius);
	}

	/* Header kao kartica: bela, zaobljena, tanka linija umesto senke (Design.md §9) */
	.kl-header {
		--kl-margina: var(--wp--preset--spacing--06);

		border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
		border-radius: var(--wp--custom--header--float-radius);
	}

	/*
	 * Mega meni: ista kartica ispod header-a, iste širine. Spoljni deo je providan i premošćuje
	 * razmak, da miš ne izađe iz stavke menija dok prelazi do panela.
	 */
	.kl-mega {
		overflow: visible;
		max-height: none;
		padding-block-start: var(--wp--custom--header--float-gap);
		background: none;
		border: 0;
	}

	.kl-mega__unutra {
		overflow-y: auto;
		max-width: none;
		max-height: calc(100vh - var(--kl-admin-traka) - var(--kl-header-vrh) - var(--kl-visina) - 3 * var(--wp--custom--header--float-gap));
		background: var(--wp--preset--color--white);
		border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
		border-radius: var(--wp--custom--header--float-radius);
	}

	/* Zatamnjenje preko cele stranice (i oko kartica), ali ispod trake, header-a i panela */
	.kl-header__overlay {
		position: fixed;
		top: 0;
		z-index: -1;
	}
}

/* Slika 4:5 (linija, kategorija). Dok se učitava ili dok je nema: grey-50 (Design.md §7.1). */
.kl-slika-4x5 {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--grey-50);
}

.kl-slika-4x5 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Mobilni meni ---------- */

.kl-mmeni {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	transform: translateX(-100%);
	transition:
		transform var(--wp--custom--motion--base) var(--wp--custom--motion--easing),
		overlay var(--wp--custom--motion--base) allow-discrete,
		display var(--wp--custom--motion--base) allow-discrete;
}

.kl-mmeni[open] {
	display: flex;
	flex-direction: column;
	transform: none;
}

@starting-style {
	.kl-mmeni[open] {
		transform: translateX(-100%);
	}
}

.kl-mmeni::backdrop {
	background: transparent;
}

/*
 * Po referenci phone-navbar-reference.png (lululemon, 23.10.): beo ekran, logo levo i × u sivom krugu,
 * glavne stavke velikim tankim slovima bez linija i strelica, ispod manje sive, na dnu jezik.
 */
.kl-mmeni__vrh {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--05);
	min-height: calc(var(--wp--custom--touch-target) + var(--wp--preset--spacing--06));
	padding-inline: var(--wp--preset--spacing--05) var(--wp--preset--spacing--04);
}

/* Logo u meniju je isti kao u header-u (.kl-logo). */

/* U podnivou umesto logoa: "‹ Žene" (vraća jedan nivo nazad). */
.kl-mmeni__nazad {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--02);
	min-height: var(--wp--custom--touch-target);
	margin-inline-start: calc(var(--wp--preset--spacing--02) * -1);
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--black);
	font: inherit;
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 500;
	cursor: pointer;
}

.kl-mmeni__logo[hidden],
.kl-mmeni__nazad[hidden] {
	display: none;
}

.kl-mmeni__nazad .kl-ikona {
	width: 1.5rem;
	height: 1.5rem;
}

.kl-mmeni__zatvori {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: var(--wp--custom--touch-target);
	height: var(--wp--custom--touch-target);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--grey-100);
	color: var(--wp--preset--color--black);
	cursor: pointer;
}

.kl-mmeni__zatvori .kl-ikona {
	width: 1.25rem;
	height: 1.25rem;
}

.kl-mmeni__nivoi {
	position: relative;
	flex: 1;
	overflow: hidden;
}

.kl-mmeni__nivo {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--wp--preset--spacing--03) var(--wp--preset--spacing--05) var(--wp--preset--spacing--08);
	background: var(--wp--preset--color--white);
}

/* Podnivo ulazi zdesna (250ms) i prekriva prethodni. */
.kl-mmeni__nivo:not(.kl-mmeni__nivo--koren) {
	transform: translateX(100%);
	visibility: hidden;
	transition:
		transform var(--wp--custom--motion--base) var(--wp--custom--motion--easing),
		visibility 0s linear var(--wp--custom--motion--base);
}

.kl-mmeni__nivo.is-otvoren {
	transform: none;
	visibility: visible;
	transition:
		transform var(--wp--custom--motion--base) var(--wp--custom--motion--easing),
		visibility 0s;
}

/* Glavne stavke: velika tanka slova (h2), bez linija i strelica */
.kl-mmeni__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kl-mmeni__stavka {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var(--wp--custom--touch-target);
	padding: var(--wp--preset--spacing--02) 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--black);
	font: inherit;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--h-2, 1.2);
	letter-spacing: -0.01em;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

/* Hover samo uz miš: na telefonu bi posle dodira ostao "zalepljen". */
@media (hover: hover) {
	.kl-mmeni__stavka:hover {
		color: var(--wp--preset--color--grey-600);
	}

	.kl-mmeni__sporedno a:hover,
	.kl-mmeni__sporedno button:hover {
		color: var(--wp--preset--color--black);
	}
}

/* Sporedne stavke: manja siva slova (Prijava, Lista želja, Dostava i povrat, Kontakt) */
.kl-mmeni__sporedno {
	margin: var(--wp--preset--spacing--08) 0 0;
	padding: 0;
	list-style: none;
}

.kl-mmeni__sporedno a,
.kl-mmeni__sporedno button {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var(--wp--custom--touch-target);
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--grey-600);
	font: inherit;
	font-size: var(--wp--preset--font-size--h-4);
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

/* Jezik na dnu ("US (USD) Change Location" u referenci) */
.kl-mmeni__jezici {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--04);
	margin: var(--wp--preset--spacing--07) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--body);
}

.kl-mmeni__jezici .kl-ikona {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

.kl-mmeni__jezici .is-aktivan {
	font-weight: 500;
}

.kl-mmeni__jezici a,
.kl-mmeni__jezici .is-neaktivan {
	color: var(--wp--preset--color--grey-600);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Nivo Kontakt: mejl, telefon, Instagram */
.kl-mmeni__kontakt {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--h-4);
}

.kl-mmeni__kontakt a {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--04);
	min-height: calc(var(--wp--custom--touch-target) + var(--wp--preset--spacing--03));
	color: var(--wp--preset--color--black);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.kl-mmeni__kontakt .kl-ikona {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

/* ---------- Pretraga: polje u header-u (desktop) ili red ispod njega (mobilni). Polje i panel: blocks/pretraga ---------- */

/* Visina reda ostaje i dok je ekran pretrage otvoren (polje je tada fiksirano), da stranica ne skoči. */
.kl-header__pretraga-red {
	min-height: calc(var(--wp--preset--spacing--08) + var(--wp--preset--spacing--03));
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: 0 var(--kl-margina) var(--wp--preset--spacing--03);
}

@media (min-width: 66rem) {
	.kl-header__pretraga-red {
		display: none;
	}

	.kl-header .kl-pretraga {
		width: 16rem;
		margin-inline: var(--wp--preset--spacing--03);
	}
}