/*
 * Osnova: reset, focus, slike, pokret.
 * Vrednosti dolaze iz theme.json (var(--wp--preset--*) i var(--wp--custom--*)).
 * Ovde se ne pišu hex vrednosti ni proizvoljni razmaci (Design.md).
 */

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

/* Atribut hidden uvek sakriva, i kad komponenta ima svoj display. */
[hidden] {
	display: none !important;
}

/* Dok je otvoren modalni <dialog> (meni, pretraga, korpa), stranica ispod se ne skroluje. */
html:has(dialog[open]:modal) {
	overflow: hidden;
}

/* Bočna margina stranice: spacing-05 na mobilnom, spacing-07 od lg (Design.md §5.3). */
@media (min-width: 66rem) {
	body {
		--wp--style--root--padding-left: var(--wp--preset--spacing--07);
		--wp--style--root--padding-right: var(--wp--preset--spacing--07);
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
}

img,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Uglovi 0px svuda (Design.md §7.2) */
img,
button,
input,
select,
textarea,
.wp-element-button {
	border-radius: var(--wp--custom--radius);
}

/* Linkovi u tekstu (Design.md §8.2) */
a {
	text-underline-offset: 0.2em;
}

/* Focus-visible: crni okvir 2px, razmak 2px. Nikad zlatni, nikad uklonjen. */
:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--black);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Dugmad: visina 3rem (Design.md §8.1) */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--button--height);
	transition: background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing),
		color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

/* Stil "Svetlo" za blok Dugme (inc/pocetna.php): belo dugme na tamnoj slici ili videu */
.wp-block-button.is-style-svetlo .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.wp-block-button.is-style-svetlo .wp-block-button__link:hover {
	background: var(--wp--preset--color--grey-100);
	color: var(--wp--preset--color--black);
}

/* Dugmad kao klase, za linkove i dugmad van blokova (Design.md §8.1) */
.kl-dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--button--height);
	padding: 0 var(--wp--preset--spacing--06);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--black);
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-size: var(--wp--preset--font-size--button);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--button);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing),
		border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing),
		color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

.kl-dugme:hover {
	border-color: var(--wp--preset--color--grey-800);
	background: var(--wp--preset--color--grey-800);
}

.kl-dugme--sekundarno {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.kl-dugme--sekundarno:hover {
	border-color: var(--wp--preset--color--black);
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.kl-dugme:disabled,
.kl-dugme[aria-disabled="true"] {
	border-color: var(--wp--preset--color--grey-100);
	background: var(--wp--preset--color--grey-100);
	color: var(--wp--preset--color--grey-600);
	cursor: default;
}

/* Tekstualno dugme: crni tekst, podvučen */
.kl-tekst-dugme {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--touch-target);
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--black);
	font: inherit;
	font-size: var(--wp--preset--font-size--body-sm);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.kl-tekst-dugme:hover {
	text-decoration: none;
}

.kl-tekst-dugme:disabled {
	color: var(--wp--preset--color--grey-600);
	cursor: default;
}

/* Inline poruka: leva linija 2px + ikonica + tekst (Design.md §8.14) */
.kl-poruka {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--03);
	padding: var(--wp--preset--spacing--04) var(--wp--preset--spacing--05);
	border-left: var(--wp--custom--focus--width) solid var(--wp--preset--color--black);
	background: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
}

.kl-poruka p {
	margin: 0;
}

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

.kl-poruka--greska {
	border-left-color: var(--wp--preset--color--error);
}

.kl-poruka--greska .kl-ikona {
	color: var(--wp--preset--color--error);
}

.kl-poruka--uspeh {
	border-left-color: var(--wp--preset--color--success);
}

.kl-poruka--uspeh .kl-ikona {
	color: var(--wp--preset--color--success);
}

/* Količina − N + (mini-korpa i stranica korpe) */
.kl-kolicina {
	display: inline-flex;
	align-items: center;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-500);
}

.kl-kolicina__dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	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-kolicina__dugme .kl-ikona {
	width: 1rem;
	height: 1rem;
}

.kl-kolicina__dugme:disabled {
	color: var(--wp--preset--color--grey-400);
	cursor: default;
}

.kl-kolicina__broj {
	min-width: var(--wp--preset--spacing--06);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	text-align: center;
}

/* Spinner (učitavanje) */
.kl-spinner {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border: var(--wp--custom--border--hairline) solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: kl-okret 0.8s linear infinite;
}

@keyframes kl-okret {
	to {
		transform: rotate(360deg);
	}
}

/* Polje forme (Design.md §8.3) */
.kl-polje {
	width: 100%;
	height: var(--wp--custom--field--height);
	padding: var(--wp--preset--spacing--04) var(--wp--preset--spacing--05);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-500);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	appearance: none;
}

.kl-polje:focus {
	border-color: var(--wp--preset--color--black);
	outline: var(--wp--custom--border--hairline) solid var(--wp--preset--color--black);
	outline-offset: calc(var(--wp--custom--border--hairline) * -2);
}

.kl-polje::placeholder {
	color: var(--wp--preset--color--grey-600);
}

.kl-labela {
	display: block;
	margin-bottom: var(--wp--preset--spacing--03);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
}

/* Srce za listu želja (inc/lista-zelja.php): prazno → puno (Design.md §8.6), touch zona 2.75rem */
.kl-srce {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	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-srce .kl-ikona {
	width: 1.25rem;
	height: 1.25rem;
	transition: fill var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

.kl-srce.is-u-listi .kl-ikona {
	fill: currentColor;
}

/*
 * Fioka zdesna (<dialog class="kl-fioka">): tabela veličina, kasnije i drugi paneli.
 * Isti pokret kao mini-korpa (Design.md §8.15): ulazi zdesna, zatamnjenje iza. Telefon: ceo ekran,
 * od 42rem panel 32rem. Sadržaj: .kl-fioka__panel > .kl-fioka__vrh (naslov + ×) + .kl-fioka__sadrzaj.
 * dialog.kl-fioka: jače od WP-ovog razmaka flow rasporeda, koji se učitava posle.
 */
dialog.kl-fioka {
	position: fixed;
	inset: 0 0 0 auto;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0 0 0 auto;
	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-fioka[open] {
	transform: none;
}

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

.kl-fioka::backdrop {
	background: var(--wp--custom--overlay);
	opacity: 0;
	transition:
		opacity var(--wp--custom--motion--base) linear,
		overlay var(--wp--custom--motion--base) allow-discrete,
		display var(--wp--custom--motion--base) allow-discrete;
}

.kl-fioka[open]::backdrop {
	opacity: 1;
}

@starting-style {
	.kl-fioka[open]::backdrop {
		opacity: 0;
	}
}

@media (min-width: 42rem) {
	dialog.kl-fioka {
		width: 32rem;
	}
}

.kl-fioka__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.kl-fioka__vrh {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	min-height: var(--wp--custom--header--height-desktop);
	padding-inline: var(--wp--preset--spacing--06) calc(var(--wp--preset--spacing--06) - (var(--wp--custom--touch-target) - var(--wp--custom--icon--size)) / 2);
}

.kl-fioka__naslov {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--h-3);
	letter-spacing: var(--wp--custom--letter-spacing--h-2);
}

.kl-fioka__sadrzaj {
	flex: 1;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--05) var(--wp--preset--spacing--06) var(--wp--preset--spacing--07);
	overscroll-behavior: contain;
}

/* Tekst samo za čitače ekrana */
.kl-sr {
	position: absolute !important;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Polja forme: uvek 1rem, inače iOS zumira (Design.md §3.3) */
input,
select,
textarea {
	font: inherit;
	font-size: var(--wp--preset--font-size--body);
}

/*
 * Smanjen pokret: gasi tranzicije i animacije. Komponente sa fade-om
 * (overlay, druga slika na kartici) vraćaju samo opacity tranziciju.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/*
 * Prazno stanje: 404, prazna pretraga, prazna kategorija, filteri bez rezultata (Design.md §9).
 * Kao prijava (referenca sign-in.png): uska kolona u sredini, naslov, rečenica, crno dugme preko
 * cele širine i tekstualni linkovi ispod. HTML: patterns/404.php i kl_prazna_lista() (inc/katalog.php).
 */
.kl-prazno {
	width: 100%;
	max-width: 29rem;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--09) var(--wp--preset--spacing--05) var(--wp--preset--spacing--11);
}

@media (min-width: 66rem) {
	.kl-prazno {
		padding-block: var(--wp--preset--spacing--12) var(--wp--preset--spacing--13);
	}
}

.kl-prazno .kl-prazno__naslov {
	margin: 0 0 var(--wp--preset--spacing--04);
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--h-1);
	letter-spacing: var(--wp--custom--letter-spacing--h-1);
}

.kl-prazno .kl-prazno__tekst {
	margin: 0 0 var(--wp--preset--spacing--07);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--grey-600);
}

.kl-prazno .kl-prazno__dugme,
.kl-prazno .wp-block-button,
.kl-prazno .wp-block-button__link {
	width: 100%;
}

.kl-prazno .kl-prazno__linkovi {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--03) var(--wp--preset--spacing--06);
	margin: var(--wp--preset--spacing--06) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--body);
}

.kl-prazno .kl-prazno__linkovi a {
	color: var(--wp--preset--color--black);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.kl-prazno .kl-prazno__linkovi a:hover {
	text-decoration: none;
}