/*
 * WooCommerce: lista proizvoda, kartica, cena, bedž, stranica proizvoda.
 *
 * Jedino mesto za CSS koji gađa WC klase (.wc-block-*, .woocommerce*), da se posle
 * ažuriranja WC-a proverava na jednom mestu (docs/pravila-koda.md §3).
 * Vrednosti dolaze iz theme.json. Mobile-first, breakpointi md 42rem i lg 66rem (Design.md §6.4).
 *
 * Testirano: WC 11.2 (product-collection, product-template,
 * product-price, catalog-sorting, product-results-count, breadcrumbs, product-rating,
 * product-description, store-notices).
 */

/* ---------------------------------------------------------------
 * Lista (po uzoru na lululemon, assets/references/category-page-reference.png):
 * putanja gore, mnogo vazduha, veliki naslov (64px na desktopu) sa brojem proizvoda,
 * mreža preko cele širine 4px (spacing-02) od ivice, plutajuća traka sa prikazom i sortiranjem.
 * --------------------------------------------------------------- */
.kl-lista {
	--kl-ivica: var(--wp--preset--spacing--02);
	padding: var(--wp--preset--spacing--05) var(--kl-ivica) var(--wp--preset--spacing--10);
}

.kl-lista > * {
	margin-block: 0;
}

.kl-lista > :not(.kl-mreza, .kl-lista__alati) {
	padding-inline: calc(var(--wp--style--root--padding-left) - var(--kl-ivica)) calc(var(--wp--style--root--padding-right) - var(--kl-ivica));
}

/* Putanja: crna, kao na referenci, separator "/" */
.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	color: var(--wp--preset--color--black);
}

.wc-block-breadcrumbs a,
.woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

@media (hover: hover) {
	.wc-block-breadcrumbs a:hover,
	.woocommerce-breadcrumb a:hover {
		color: var(--wp--preset--color--grey-600);
	}
}

/* Veliki naslov (token display: 36px mobilni → 64px desktop) + broj proizvoda sitno i sivo */
.kl-lista__naslov {
	margin-block: var(--wp--preset--spacing--09) var(--wp--preset--spacing--06);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--display);
	letter-spacing: var(--wp--custom--letter-spacing--display);
}

.kl-lista__broj {
	margin-inline-start: var(--wp--preset--spacing--02);
	color: var(--wp--preset--color--grey-600);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 400;
	letter-spacing: 0;
}

.kl-lista__opis {
	max-width: calc(var(--wp--style--global--content-size) + 2 * var(--wp--style--root--padding-left));
	margin-block: 0 var(--wp--preset--spacing--06);
	color: var(--wp--preset--color--grey-800);
	font-size: var(--wp--preset--font-size--body-sm);
}

@media (min-width: 66rem) {
	.kl-lista__naslov {
		margin-block: var(--wp--preset--spacing--12) var(--wp--preset--spacing--07);
	}
}

/* Plutajuća traka na dnu ekrana (lululemon "View"): prikaz + sortiranje. Prati listu dok se skroluje. */
.kl-lista__alati {
	position: sticky;
	bottom: var(--wp--preset--spacing--05);
	z-index: 5;
	align-items: center;
	gap: var(--wp--preset--spacing--04);
	width: fit-content;
	max-width: calc(100% - 2 * var(--wp--preset--spacing--05));
	margin: var(--wp--preset--spacing--07) auto 0;
	padding: var(--wp--preset--spacing--02) var(--wp--preset--spacing--02) var(--wp--preset--spacing--02) var(--wp--preset--spacing--05);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
	background: var(--wp--preset--color--white);
}

@media (max-width: 41.99rem) {
	.kl-lista__alati {
		gap: var(--wp--preset--spacing--03);
		padding-inline-start: var(--wp--preset--spacing--02);
	}

	.kl-lista__alati .woocommerce-ordering {
		padding-inline-start: var(--wp--preset--spacing--03);
	}
}

/* Sortiranje se sužava poslednje (dugi naziv dobija "…"), ostalo u traci zadržava širinu. */
.kl-lista__alati > .wc-block-catalog-sorting {
	flex: 0 1 auto;
	min-width: 0;
}

.kl-lista__alati .woocommerce-ordering {
	min-width: 0;
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--04);
	border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
}

.kl-lista__alati .woocommerce-ordering select {
	width: 100%;
	max-width: 100%;
	min-height: 2rem;
	text-overflow: ellipsis;
	padding: 0 var(--wp--preset--spacing--06) 0 0;
	border: 0;
	border-radius: var(--wp--custom--radius);
	background: transparent;
	color: var(--wp--preset--color--black);
	font: inherit;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	cursor: pointer;
}

/* Lista želja (blok lista-zelja): kartica čije je srce isključeno nestaje odmah, bez osvežavanja. */
.kl-lista-zelja .wc-block-product:has(.kl-srce[aria-pressed="false"]) {
	display: none;
}

/* ---------------------------------------------------------------
 * Mreža proizvoda: 2 kolone → 3 (md) → 4 (lg), razmak između kolona 4px (Design.md §5.3, §6.5).
 * Prikaz "veće slike" (blok prikaz-liste, <html data-kl-prikaz="veliko">): 1 → 2 kolone.
 * --------------------------------------------------------------- */
.kl-mreza .wc-block-product-template.is-flex-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--07) var(--wp--preset--spacing--02);
	margin: 0;
	padding: 0;
}

/* WC daje li širinu za flex raspored (.is-flex-container.is-flex-container.columns-N > li), u mreži je auto. */
.kl-mreza .wc-block-product-template.is-flex-container.is-flex-container > li.wc-block-product {
	width: auto;
	margin: 0;
}

@media (min-width: 42rem) {
	.kl-mreza .wc-block-product-template.is-flex-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 66rem) {
	.kl-mreza .wc-block-product-template.is-flex-container {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: var(--wp--preset--spacing--08);
	}
}

[data-kl-prikaz="veliko"] .kl-lista .kl-mreza .wc-block-product-template.is-flex-container {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 42rem) {
	[data-kl-prikaz="veliko"] .kl-lista .kl-mreza .wc-block-product-template.is-flex-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Kartica (Design.md §8.6, lululemon): slika 4:5, kružići boja, naziv, cena. Tekst je 12px od ivice slike. */
.kl-mreza .kl-kartica__naziv,
.kl-mreza .kl-kartica__cena,
.kl-mreza .kl-kruzici {
	padding-inline: var(--wp--preset--spacing--04);
}

.kl-mreza .kl-kruzici {
	padding-inline-start: 0;
	margin-inline-start: calc(var(--wp--preset--spacing--04) - (var(--wp--custom--touch-target) - 1.25rem) / 2);
}

.kl-mreza .kl-kartica__naziv {
	display: -webkit-box;
	margin: var(--wp--preset--spacing--04) 0 0;
	overflow: hidden;
	font-weight: 400;
	line-height: var(--wp--custom--line-height--product);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.kl-mreza .kl-kruzici + .kl-kartica__naziv {
	margin-block-start: 0;
}

.kl-mreza .kl-kartica__naziv a {
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

.kl-mreza .kl-kartica__cena {
	margin: var(--wp--preset--spacing--02) 0 0;
	text-align: left;
}

/*
 * Prazna lista (kl_prazna_lista, inc/katalog.php; izgled .kl-prazno u base.css).
 * Bez filtera: naslov liste sa brojem 0 ostaje samo za čitače ekrana, a opis i traka se sakrivaju.
 * Uz filtere: traka i oznake ostaju, naslov poruke je manji.
 */
.kl-lista:has(.kl-prazno--bez-filtera) .kl-lista__naslov {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.kl-lista:has(.kl-prazno--bez-filtera) :is(.kl-lista__opis, .kl-lista__alati) {
	display: none;
}

/* U listi je mreža 4px od ivice ekrana: tekst ostaje na margini stranice, kao putanja i naslov. */
.kl-lista .kl-prazno {
	padding-inline: calc(var(--wp--style--root--padding-left) - var(--kl-ivica, 0px)) calc(var(--wp--style--root--padding-right) - var(--kl-ivica, 0px));
}

.kl-prazno--filteri {
	padding-block-start: var(--wp--preset--spacing--08);
}

.kl-prazno.kl-prazno--filteri .kl-prazno__naslov {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: var(--wp--custom--line-height--h-2);
	letter-spacing: var(--wp--custom--letter-spacing--h-2);
}

/* Paginacija */
.kl-paginacija {
	gap: var(--wp--preset--spacing--03);
	margin-block-start: var(--wp--preset--spacing--09);
	font-size: var(--wp--preset--font-size--body-sm);
}

.kl-paginacija a,
.kl-paginacija .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--touch-target);
	min-height: var(--wp--custom--touch-target);
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

.kl-paginacija .page-numbers.current {
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--black);
}

/*
 * "Izdvajamo iz ponude" na početnoj (patterns/izdvajamo.php): 4 kartice, 2 × 2 do desktopa
 * (umesto 3 kolone liste, da četvrta ne ostane sama u redu), 4 u redu od 66rem kao lista.
 */
@media (min-width: 42rem) and (max-width: 65.99rem) {
	.kl-izdvajamo .kl-mreza .wc-block-product-template.is-flex-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------
 * Traka proizvoda na početnoj (patterns/traka-proizvoda.php, referenca izdvojeni-proizvodi.png):
 * kartice u jednom redu koji se prevlači i izlazi do ivice ekrana (prva kartica na margini
 * stranice), naziv levo i cena desno. Vidljivo: 1,6 kartica na telefonu, 2,6 na tabletu, 4,3 na desktopu.
 * --kl-margina dolazi iz sekcije (pocetna.css). Strelice: inc/pocetna.php + assets/js/klizac.js.
 * --------------------------------------------------------------- */
.kl-traka .kl-mreza .wc-block-product-template.is-flex-container {
	--kl-traka-razmak: var(--wp--preset--spacing--04);

	/*
	 * relative: skriveni tekst cene za čitače ekrana (WC, position: absolute) inače se računa
	 * prema stranici, pa izlazi iz trake i pravi horizontalni skrol cele stranice.
	 * max-width none: WC daje 100%, a traka mora da ide do obe ivice ekrana (negativna margina).
	 */
	position: relative;
	max-width: none;
	grid-template-columns: none;
	grid-auto-columns: calc((100% - var(--kl-traka-razmak)) / 1.6);
	grid-auto-flow: column;
	gap: 0 var(--kl-traka-razmak);
	margin-inline: calc(-1 * var(--kl-margina, 0px));
	padding-inline: var(--kl-margina, 0px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--kl-margina, 0px);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.kl-traka .kl-mreza .wc-block-product-template::-webkit-scrollbar {
	display: none;
}

@media (min-width: 42rem) {
	.kl-traka .kl-mreza .wc-block-product-template.is-flex-container {
		grid-auto-columns: calc((100% - 2 * var(--kl-traka-razmak)) / 2.6);
	}
}

@media (min-width: 66rem) {
	.kl-traka .kl-mreza .wc-block-product-template.is-flex-container {
		grid-auto-columns: calc((100% - 4 * var(--kl-traka-razmak)) / 4.3);
	}
}

/* Kartica: slika preko cele širine, ispod naziv (levo) i cena (desno, akcijska iznad precrtane). */
.kl-traka .kl-mreza .wc-block-product-template.is-flex-container > li.wc-block-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: start;
	column-gap: var(--wp--preset--spacing--04);
	scroll-snap-align: start;
}

.kl-traka .kl-mreza li.wc-block-product > * {
	grid-column: 1 / -1;
}

.kl-traka .kl-mreza li.wc-block-product > .kl-kartica__naziv {
	grid-column: 1;
	padding-inline-end: 0;
}

.kl-traka .kl-mreza li.wc-block-product > .kl-kartica__cena {
	grid-column: 2;
	margin-block-start: var(--wp--preset--spacing--04);
	padding-inline-start: 0;
	text-align: right;
}

/* display: WC posle ovog fajla učitava .wc-block-components-product-price { display: block }. */
.kl-traka .kl-kartica__cena .wc-block-components-product-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* Strelice: samo desktop sa mišem, ispod trake desno. */
.kl-traka__strelice {
	display: none;
}

@media (min-width: 66rem) and (hover: hover) {
	.kl-traka__strelice {
		display: flex;
		justify-content: flex-end;
		gap: var(--wp--preset--spacing--03);
		margin-block-start: var(--wp--preset--spacing--07);
	}
}

.kl-traka__strelica {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--touch-target);
	height: var(--wp--custom--touch-target);
	padding: 0;
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--black);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing), color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

.kl-traka__strelica:hover:not(:disabled) {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

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

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

/* ---------------------------------------------------------------
 * Cena (Design.md §8.5): akcijska crna 500, redovna precrtana grey-600 400, iza akcijske
 * --------------------------------------------------------------- */
.wc-block-components-product-price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--wp--preset--spacing--03);
	color: var(--wp--preset--color--black);
	font-weight: 500;
}

.wc-block-components-product-price ins {
	order: -1;
	background: none;
	text-decoration: none;
}

.wc-block-components-product-price del {
	color: var(--wp--preset--color--grey-600);
	font-weight: 400;
	opacity: 1;
}

/* ---------------------------------------------------------------
 * Stranica proizvoda (po uzoru na lululemon: product-page.png, product-page-phone.png)
 * Desktop (od 66rem): galerija levo od ivice, panel desno ~30rem (sticky). Redom: putanja (samo
 * kategorije), naslov + srce, cena, boje, veličine, model, tabela veličina, linija, Dodaj u korpu,
 * dostava/pouzeće, harmonike. Ispod: sekcija "o proizvodu" (blok o-proizvodu) i "Slični proizvodi".
 * Telefon: galerija preko cele širine, pa boje IZNAD naslova (kao na referenci), pa naslov, cena,
 * veličine... Blok izbor-varijante tada dobija display: contents, pa se njegovi delovi ređaju sa
 * naslovom (order). Razmaci unutar izbora su u blocks/izbor-varijante/style.css.
 * --------------------------------------------------------------- */
.kl-proizvod {
	padding-block-end: var(--wp--preset--spacing--10);
}

/* Galerija počinje odmah ispod header-a. WC obmotava šablon proizvoda u div.woocommerce.product,
   a WP mu daje blockGap kao razmak od header-a. */
.wp-site-blocks > .woocommerce.product:has(> .kl-proizvod) {
	margin-block-start: 0;
}

.kl-proizvod > * {
	margin-block: 0;
}

.kl-proizvod__glavno {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.kl-proizvod__info {
	padding: var(--wp--preset--spacing--06) var(--wp--style--root--padding-left) 0 var(--wp--style--root--padding-right);
}

.kl-proizvod__info > * {
	margin-block: 0;
}

.kl-proizvod__info > .kl-proizvod__naslov {
	margin-block-start: var(--wp--preset--spacing--08);
}

.kl-proizvod__info > .wp-block-woocommerce-product-rating,
.kl-proizvod__info > .kl-izbor {
	margin-block-start: var(--wp--preset--spacing--03);
}

.kl-proizvod__info > .kl-harmonike {
	margin-block-start: var(--wp--preset--spacing--08);
}

/* Naslov levo, srce desno u visini prvog reda (referenca) */
.kl-proizvod__naslov {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--05);
}

.kl-proizvod__naslov > * {
	margin: 0;
}

/* WP od ključa "h2" u theme.json pravi promenljivu --…--h-2 (sa crticom). */
.kl-proizvod__naziv {
	font-weight: 400;
	line-height: var(--wp--custom--line-height--h-2);
	letter-spacing: var(--wp--custom--letter-spacing--h-2);
}

.kl-proizvod__naslov .kl-proizvod__srce {
	flex: none;
	margin-block-start: calc((1em * var(--wp--custom--line-height--h-2) - var(--wp--custom--touch-target)) / 2);
	margin-inline-end: calc(-1 * (var(--wp--custom--touch-target) - 1.5rem) / 2);
	font-size: var(--wp--preset--font-size--pdp-title);
}

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

/* Harmonika (Design.md §8.12): naslov h5, red 3rem, + / −, linije grey-200 */
.kl-harmonike {
	border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
}

.kl-harmonika {
	margin: 0;
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
}

.kl-harmonika > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--wp--custom--button--height);
	font-size: var(--wp--preset--font-size--h-5);
	font-weight: 500;
	list-style: none;
	cursor: pointer;
}

.kl-harmonika > summary::-webkit-details-marker {
	display: none;
}

.kl-harmonika > summary::after {
	content: "+";
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 400;
}

.kl-harmonika[open] > summary::after {
	content: "−";
}

.kl-harmonika > :not(summary) {
	margin-block: 0 var(--wp--preset--spacing--05);
	font-size: var(--wp--preset--font-size--body-sm);
}

.kl-harmonika .wp-block-woocommerce-product-description > * {
	margin-block: 0 var(--wp--preset--spacing--04);
}

.kl-harmonika h3 {
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
}

/* "Slični proizvodi": naslov kao sekcije početne (token naslov-sekcije, 400, pocetna.css), margine 16/32px */
.kl-proizvod__slicni {
	margin-block-start: var(--wp--preset--spacing--10);
	padding-inline: var(--wp--preset--spacing--02);
}

/* Slični proizvodi: 8 (dva reda na desktopu, četiri na telefonu), a sa 3 kolone 6, da redovi budu puni. */
@media (min-width: 42rem) and (max-width: 65.999rem) {
	.kl-proizvod__slicni li.wc-block-product:nth-child(n + 7) {
		display: none;
	}
}

.kl-proizvod__slicni > h2 {
	margin-block: 0 var(--wp--preset--spacing--06);
	padding-inline: calc(var(--wp--preset--spacing--05) - var(--wp--preset--spacing--02));
	font-weight: 400;
	line-height: var(--wp--custom--line-height--display);
	letter-spacing: var(--wp--custom--letter-spacing--display);
	text-wrap: balance;
}

/* Telefon i tablet: boje iznad naslova (product-page-phone.png), putanja se ne prikazuje. */
@media (max-width: 65.999rem) {
	.kl-proizvod__info {
		display: flex;
		flex-direction: column;
	}

	.kl-proizvod__info > .kl-izbor {
		display: contents;
	}

	.kl-proizvod__info > *,
	.kl-proizvod__info > .kl-izbor > * {
		order: 10;
	}

	.kl-proizvod__info > .wp-block-woocommerce-store-notices {
		order: 0;
	}

	.kl-proizvod__info > .wp-block-woocommerce-breadcrumbs {
		display: none;
	}

	.kl-proizvod__info > .kl-izbor > .kl-izbor__grupa--boje {
		order: 1;
		margin-block-start: 0;
	}

	.kl-proizvod__info > .kl-proizvod__naslov {
		order: 2;
		margin-block-start: var(--wp--preset--spacing--06);
	}

	.kl-proizvod__info > .wp-block-woocommerce-product-rating {
		order: 3;
	}

	.kl-proizvod__info > .kl-izbor > .kl-izbor__cena {
		order: 4;
		margin-block-start: var(--wp--preset--spacing--03);
	}

	.kl-proizvod__info > .kl-izbor > .kl-izbor__grupa--velicine {
		order: 5;
	}

	/* Naslov na vrhu panela (set, model bez boja): bez razmaka iznad */
	.kl-proizvod__info:not(:has(.kl-izbor__grupa--boje)) > .kl-proizvod__naslov {
		margin-block-start: 0;
	}

}

@media (min-width: 66rem) {
	/* Galerija od leve ivice i odmah ispod header-a, panel desno ~30rem (referenca: ~480px) */
	.kl-proizvod__glavno {
		grid-template-columns: minmax(0, 1fr) minmax(24rem, 30rem);
		align-items: start;
	}

	.kl-proizvod__info {
		position: sticky;
		/* Ispod plutajućeg header-a (razmak iznad njega + header) */
		top: calc(var(--wp--custom--header--float-gap) + var(--wp--custom--header--height-desktop));
		padding: var(--wp--preset--spacing--08) var(--wp--preset--spacing--07) var(--wp--preset--spacing--07);
	}

	.kl-proizvod__slicni {
		margin-block-start: var(--wp--preset--spacing--12);
	}

	.kl-proizvod__slicni > h2 {
		margin-block-end: var(--wp--preset--spacing--09);
		padding-inline: calc(var(--wp--preset--spacing--07) - var(--wp--preset--spacing--02));
	}
}

/* ---------------------------------------------------------------
 * Moj nalog (inc/nalog.php, šablon "nalog", Design.md §8.20, referenca account-dashboard.png):
 * tabovi na vrhu, pregled (kartica sa fotografijom + "Lični podaci"), WC forme i tabele.
 * WC opšti stilovi se na nalogu ne učitavaju (inc/nalog.php), pa je ovde sve što WC sadržaj treba.
 * Prijava je blok klaralinee/prijava (svoj CSS); ovde su samo WC delovi.
 * --------------------------------------------------------------- */
.kl-nalog-strana > .wp-block-post-content > * {
	margin-block: 0;
}

.kl-nalog {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--06) var(--wp--style--root--padding-right) var(--wp--preset--spacing--11) var(--wp--style--root--padding-left);
}

.kl-nalog--uzak {
	max-width: 29rem;
	padding: var(--wp--preset--spacing--09) var(--wp--preset--spacing--05) var(--wp--preset--spacing--11);
}

.kl-nalog .screen-reader-text,
.kl-nalog .woocommerce-orders-table__header-order-actions .nobr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.kl-nalog .woocommerce {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--07);
}

/* WC omotač obaveštenja je prazan (samo razmak), pa :empty ne važi */
.kl-nalog .woocommerce-notices-wrapper:not(:has(*)) {
	display: none;
}

.kl-nalog p {
	margin: 0 0 var(--wp--preset--spacing--05);
}

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

/* Tabovi (WC meni naloga): red koji se na telefonu prevlači, aktivni podvučen */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	gap: var(--wp--preset--spacing--06);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
	display: none;
}

.woocommerce-MyAccount-navigation li {
	flex: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--touch-target);
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--body);
	text-decoration: none;
	text-decoration-thickness: var(--wp--custom--border--hairline);
	text-underline-offset: 0.45em;
	white-space: nowrap;
}

.woocommerce-MyAccount-navigation .is-active a {
	text-decoration-line: underline;
}

@media (hover: hover) {
	.woocommerce-MyAccount-navigation a:hover {
		text-decoration-line: underline;
	}
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-inline-start: auto;
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--wp--preset--color--grey-600);
}

/* Telefon: desna ivica bledi, da se vidi da se red prevlači */
@media (max-width: 41.99rem) {
	.woocommerce-MyAccount-navigation ul {
		padding-inline-end: var(--wp--preset--spacing--07);
		-webkit-mask-image: linear-gradient(to left, transparent, #000 var(--wp--preset--spacing--07));
		mask-image: linear-gradient(to left, transparent, #000 var(--wp--preset--spacing--07));
	}
}

@media (min-width: 66rem) {
	.kl-nalog:not(.kl-nalog--uzak) {
		padding-top: var(--wp--preset--spacing--07);
	}

	.woocommerce-MyAccount-navigation ul {
		gap: var(--wp--preset--spacing--07);
	}

	.woocommerce-MyAccount-navigation a {
		font-size: var(--wp--preset--font-size--pdp-price);
	}
}

/* Naslov stranice naloga (osim pregleda) i link nazad */
.kl-nalog__zaglavlje {
	margin-bottom: var(--wp--preset--spacing--07);
}

.kl-nalog__nazad {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--02);
	min-height: var(--wp--custom--touch-target);
	margin-bottom: var(--wp--preset--spacing--02);
	color: var(--wp--preset--color--grey-600);
	font-size: var(--wp--preset--font-size--body-sm);
	text-decoration: none;
}

.kl-nalog .kl-nalog__nazad {
	color: var(--wp--preset--color--grey-600);
}

.kl-nalog__nazad .kl-ikona {
	width: var(--wp--custom--icon--size);
	height: var(--wp--custom--icon--size);
	margin-inline-start: calc(var(--wp--preset--spacing--02) * -1);
}

@media (hover: hover) {
	.kl-nalog .kl-nalog__nazad:hover {
		color: var(--wp--preset--color--black);
	}
}

.kl-nalog__zaglavlje + * {
	margin-top: 0;
}

.kl-nalog__naslov {
	margin: 0 0 var(--wp--preset--spacing--07);
	font-size: var(--wp--preset--font-size--h-1);
	line-height: var(--wp--custom--line-height--h-1);
	letter-spacing: var(--wp--custom--letter-spacing--h-1);
}

.kl-nalog__zaglavlje .kl-nalog__naslov {
	margin: 0;
}

.woocommerce-MyAccount-content {
	min-width: 0;
}

.kl-nalog h2,
.kl-nalog h3,
.kl-nalog legend {
	margin: var(--wp--preset--spacing--07) 0 var(--wp--preset--spacing--05);
	padding: 0;
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--h-4);
}

/* ---- Pregled: kartica sa fotografijom ---- */
.kl-nalog-pregled {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.kl-nalog-kartica {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 1;
	overflow: hidden;
	isolation: isolate;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.kl-nalog-kartica__slika {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

/* Isti prelaz kao hero i promo (cover.css): tekst je čitljiv i na svetloj fotografiji */
.kl-nalog-kartica:not(.kl-nalog-kartica--bez-slike)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, var(--wp--custom--overlay), transparent 45%),
		linear-gradient(to top, var(--wp--custom--overlay), transparent 75%);
}

.kl-nalog-kartica__tekst {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--02);
	padding: var(--wp--preset--spacing--06);
}

.kl-nalog .kl-nalog-kartica__naslov {
	margin: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--display);
	letter-spacing: var(--wp--custom--letter-spacing--display);
}

.kl-nalog .kl-nalog-kartica__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--03);
	min-height: var(--wp--custom--touch-target);
	color: inherit;
	font-size: var(--wp--preset--font-size--h-3);
	line-height: var(--wp--custom--line-height--h-3);
	text-decoration: none;
	text-decoration-thickness: var(--wp--custom--border--hairline);
	text-underline-offset: 0.2em;
}

.kl-nalog-kartica__link .kl-ikona {
	width: 1em;
	height: 1em;
	transition: transform var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

@media (hover: hover) {
	.kl-nalog .kl-nalog-kartica__link:hover {
		text-decoration-line: underline;
	}

	.kl-nalog-kartica__link:hover .kl-ikona {
		transform: translateX(0.25em);
	}
}

/* Na tamnoj fotografiji crni okvir fokusa se ne vidi: ovde je beo (izuzetak od §8.2) */
.kl-nalog-kartica__link:focus-visible {
	outline-color: var(--wp--preset--color--white);
}

@media (min-width: 42rem) {
	.kl-nalog-kartica {
		aspect-ratio: 16 / 9;
	}

	.kl-nalog-kartica__tekst {
		padding: var(--wp--preset--spacing--08);
	}
}

@media (min-width: 66rem) {
	.kl-nalog-pregled {
		gap: var(--wp--preset--spacing--11);
	}

	.kl-nalog-kartica {
		aspect-ratio: auto;
		height: clamp(22rem, 32vw, 30rem);
	}
}

/* ---- Pregled: Lični podaci (Profil · Adresa za dostavu · Plaćanje) ---- */
.kl-nalog .kl-nalog-podaci__naslov {
	margin: 0 0 var(--wp--preset--spacing--08);
	font-size: var(--wp--preset--font-size--naslov-sekcije);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--display);
	letter-spacing: var(--wp--custom--letter-spacing--display);
}

.kl-nalog-podaci__kolone {
	display: grid;
	gap: var(--wp--preset--spacing--07);
}

.kl-nalog-podatak {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--04);
	padding-bottom: var(--wp--preset--spacing--06);
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
}

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

.kl-nalog .kl-nalog-podatak__tekst {
	margin: 0;
	font-style: normal;
	overflow-wrap: anywhere;
}

.kl-nalog-podatak__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--touch-target);
	margin-top: auto;
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--border--hairline);
	text-underline-offset: 0.2em;
}

@media (hover: hover) {
	.kl-nalog-podatak__link:hover {
		text-decoration: none;
	}
}

@media (min-width: 42rem) {
	.kl-nalog-podaci__kolone {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--08);
	}

	.kl-nalog .kl-nalog-podaci__naslov {
		margin-bottom: var(--wp--preset--spacing--09);
	}
}

@media (min-width: 66rem) {
	.kl-nalog-podaci__kolone {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--10);
	}
}

/* ---- Forme (Profil, Adresa, lozinka): labela iznad polja, polje 3rem, okvir grey-500, fokus crn 2px ---- */
.kl-nalog .woocommerce-MyAccount-content > form,
.kl-nalog .woocommerce-EditAccountForm {
	max-width: 36rem;
}

.kl-nalog .woocommerce-MyAccount-content > form > h2:first-child {
	display: none;
}

.kl-nalog .form-row {
	margin: 0 0 var(--wp--preset--spacing--05);
	padding: 0;
}

.kl-nalog .form-row label,
.kl-nalog .woocommerce-form-row label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--03);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--body-sm);
}

.kl-nalog .form-row label.checkbox,
.kl-nalog .woocommerce-form-row label.checkbox {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--03);
	font-weight: 400;
}

.kl-nalog .required {
	color: inherit;
	text-decoration: none;
}

.kl-nalog .optional {
	color: var(--wp--preset--color--grey-600);
	font-weight: 400;
}

.kl-nalog .woocommerce-input-wrapper {
	display: block;
}

.kl-nalog .input-text,
.kl-nalog select,
.kl-nalog textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--wp--custom--field--height);
	margin: 0;
	padding: var(--wp--preset--spacing--04) var(--wp--preset--spacing--05);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-500);
	border-radius: 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	font: inherit;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.kl-nalog .input-text:focus,
.kl-nalog select:focus,
.kl-nalog textarea: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-nalog .woocommerce-invalid .input-text,
.kl-nalog .input-text[aria-invalid="true"] {
	border-color: var(--wp--preset--color--error);
}

.kl-nalog .form-row em,
.kl-nalog .woocommerce-form-row em,
.kl-nalog .woocommerce-password-hint {
	display: block;
	margin-top: var(--wp--preset--spacing--03);
	color: var(--wp--preset--color--grey-600);
	font-size: var(--wp--preset--font-size--body-sm);
	font-style: normal;
	line-height: var(--wp--custom--line-height--body-sm);
}

/* Jedina država je Srbija: red sa izborom države se ne prikazuje (vrednost se i dalje šalje).
   !important: WC skripta address-i18n red ponovo prikazuje inline stilom. */
.kl-nalog #billing_country_field,
.kl-nalog #shipping_country_field {
	display: none !important;
}

/* Prikaži lozinku (WC dodaje dugme u polje i klasu display-password kad je lozinka vidljiva) */
.kl-nalog .password-input {
	display: block;
	position: relative;
}

.kl-nalog .password-input .input-text {
	padding-right: var(--wp--custom--touch-target);
}

.kl-nalog .show-password-input {
	position: absolute;
	top: 50%;
	right: 0;
	display: 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--grey-600);
	transform: translateY(-50%);
	cursor: pointer;
}

.kl-nalog .show-password-input::before {
	content: "";
	width: var(--wp--custom--icon--size);
	height: var(--wp--custom--icon--size);
	background: currentColor;
	/* Lucide "eye" */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%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 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Lucide "eye-off" */
.kl-nalog .show-password-input.display-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.73 5.08A10.43 10.43 0 0 1 12 5c4.36 0 8.07 2.78 9.94 6.65a1 1 0 0 1 0 .7 10.8 10.8 0 0 1-1.44 2.49'/%3E%3Cpath d='M14.08 14.16a3 3 0 0 1-4.24-4.24'/%3E%3Cpath d='M17.48 17.5A10.75 10.75 0 0 1 2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 4.45-5.14'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.73 5.08A10.43 10.43 0 0 1 12 5c4.36 0 8.07 2.78 9.94 6.65a1 1 0 0 1 0 .7 10.8 10.8 0 0 1-1.44 2.49'/%3E%3Cpath d='M14.08 14.16a3 3 0 0 1-4.24-4.24'/%3E%3Cpath d='M17.48 17.5A10.75 10.75 0 0 1 2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 4.45-5.14'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}

@media (hover: hover) {
	.kl-nalog .show-password-input:hover {
		color: var(--wp--preset--color--black);
	}
}

/* Jačina nove lozinke (WC skripta) */
.kl-nalog .woocommerce-password-strength {
	margin-top: var(--wp--preset--spacing--03);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
}

.kl-nalog .woocommerce-password-strength.short,
.kl-nalog .woocommerce-password-strength.bad {
	color: var(--wp--preset--color--error);
}

.kl-nalog .woocommerce-password-strength.good,
.kl-nalog .woocommerce-password-strength.strong {
	color: var(--wp--preset--color--success);
}

/* Promena lozinke: odvojena linijom */
.kl-nalog fieldset {
	margin: var(--wp--preset--spacing--08) 0 0;
	padding: var(--wp--preset--spacing--07) 0 0;
	border: 0;
	border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
}

.kl-nalog fieldset > legend {
	float: left;
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--05);
}

.kl-nalog fieldset > legend + * {
	clear: both;
}

/* Ime i prezime jedno pored drugog od md */
@media (min-width: 42rem) {
	.kl-nalog .woocommerce-EditAccountForm,
	.kl-nalog .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--05);
	}

	.kl-nalog .woocommerce-EditAccountForm > *,
	.kl-nalog .woocommerce-address-fields__field-wrapper > * {
		grid-column: 1 / -1;
	}

	.kl-nalog .woocommerce-EditAccountForm > .form-row-first,
	.kl-nalog .woocommerce-address-fields__field-wrapper > .form-row-first {
		grid-column: 1;
	}

	.kl-nalog .woocommerce-EditAccountForm > .form-row-last,
	.kl-nalog .woocommerce-address-fields__field-wrapper > .form-row-last {
		grid-column: 2;
	}
}

.kl-nalog .clear {
	display: none;
}

.kl-nalog .woocommerce-EditAccountForm > p:has(> .button),
.kl-nalog .woocommerce-address-fields > p:has(> .button) {
	margin: var(--wp--preset--spacing--06) 0 0;
}

/* ---- Dugmad: primarno crno, sekundarno sa okvirom (Design.md §8.1) ---- */
.kl-nalog .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--button--height);
	margin: 0;
	padding: 0 var(--wp--preset--spacing--06);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--black);
	border-radius: 0;
	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-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

@media (hover: hover) {
	.kl-nalog .button:hover {
		border-color: var(--wp--preset--color--grey-800);
		background: var(--wp--preset--color--grey-800);
		color: var(--wp--preset--color--white);
	}
}

.kl-nalog .woocommerce-orders-table .button,
.kl-nalog .woocommerce-pagination .button,
.kl-nalog .order-again .button,
.kl-nalog .wc-block-components-notice-banner .button {
	border-color: var(--wp--preset--color--black);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

@media (hover: hover) {
	.kl-nalog .woocommerce-orders-table .button:hover,
	.kl-nalog .woocommerce-pagination .button:hover,
	.kl-nalog .order-again .button:hover,
	.kl-nalog .wc-block-components-notice-banner .button:hover {
		border-color: var(--wp--preset--color--black);
		background: var(--wp--preset--color--black);
		color: var(--wp--preset--color--white);
	}
}

.kl-nalog--uzak .button {
	width: 100%;
}

/* ---- Porudžbine: tabela sa linijama, na telefonu kartica po porudžbini ---- */
.kl-nalog table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--body);
}

.kl-nalog table.shop_table th,
.kl-nalog table.shop_table td {
	padding: var(--wp--preset--spacing--05) var(--wp--preset--spacing--05) var(--wp--preset--spacing--05) 0;
	border: 0;
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
	text-align: left;
	vertical-align: middle;
}

.kl-nalog table.shop_table th:last-child,
.kl-nalog table.shop_table td:last-child {
	padding-right: 0;
}

.kl-nalog table.shop_table thead th {
	padding-top: 0;
	padding-bottom: var(--wp--preset--spacing--03);
	color: var(--wp--preset--color--grey-600);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 400;
}

.kl-nalog .woocommerce-orders-table__cell-order-number a {
	font-weight: 500;
	text-decoration: none;
}

@media (hover: hover) {
	.kl-nalog .woocommerce-orders-table__cell-order-number a:hover {
		text-decoration: underline;
	}
}

.kl-nalog .woocommerce-orders-table__cell-order-actions {
	text-align: right;
}

.kl-nalog .woocommerce-orders-table .button {
	min-height: var(--wp--custom--touch-target);
	padding-inline: var(--wp--preset--spacing--05);
	font-size: var(--wp--preset--font-size--body-sm);
}

@media (min-width: 42rem) {
	.kl-nalog table.shop_table td.woocommerce-orders-table__cell-order-actions {
		text-align: right;
	}
}

@media (max-width: 41.99rem) {
	.kl-nalog table.woocommerce-orders-table,
	.kl-nalog table.woocommerce-orders-table tbody {
		display: block;
	}

	.kl-nalog table.woocommerce-orders-table thead {
		display: none;
	}

	.kl-nalog table.woocommerce-orders-table tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"broj status"
			"datum ukupno"
			"akcija akcija";
		gap: var(--wp--preset--spacing--02) var(--wp--preset--spacing--05);
		padding: var(--wp--preset--spacing--05) 0;
		border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
	}

	.kl-nalog table.woocommerce-orders-table th,
	.kl-nalog table.woocommerce-orders-table td {
		display: block;
		padding: 0;
		border: 0;
	}

	.kl-nalog .woocommerce-orders-table__cell-order-number {
		grid-area: broj;
	}

	.kl-nalog .woocommerce-orders-table__cell-order-status {
		grid-area: status;
		text-align: right;
	}

	.kl-nalog .woocommerce-orders-table__cell-order-date {
		grid-area: datum;
		color: var(--wp--preset--color--grey-600);
		font-size: var(--wp--preset--font-size--body-sm);
	}

	.kl-nalog .woocommerce-orders-table__cell-order-total {
		grid-area: ukupno;
		color: var(--wp--preset--color--grey-600);
		font-size: var(--wp--preset--font-size--body-sm);
		text-align: right;
	}

	.kl-nalog .woocommerce-orders-table__cell-order-actions {
		grid-area: akcija;
		margin-top: var(--wp--preset--spacing--03);
	}

	.kl-nalog .woocommerce-orders-table .button {
		width: 100%;
	}
}

.kl-nalog .woocommerce-pagination {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--05);
	margin-top: var(--wp--preset--spacing--06);
}

/* ---- Porudžbina (view-order): status, proizvodi sa sličicom, zbir, adresa ---- */
.kl-nalog mark {
	background: none;
	color: inherit;
	font-weight: 500;
}

.kl-nalog .woocommerce-order-details,
.kl-nalog .woocommerce-customer-details,
.kl-nalog .woocommerce-OrderUpdates {
	max-width: 48rem;
}

.kl-nalog .woocommerce-order-details__title {
	margin-top: var(--wp--preset--spacing--08);
}

/* Sličica levo (float; ćelija tabele je obuhvata), naziv, količina i opcije desno od nje */
.kl-nalog .order_details td.product-name {
	vertical-align: top;
}

.kl-nalog .order_details .kl-stavka__slika {
	float: left;
	margin-inline-end: var(--wp--preset--spacing--05);
	width: 4rem;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	background: var(--wp--preset--color--grey-100);
}

.kl-nalog .order_details td.product-name a {
	text-decoration: none;
}

@media (hover: hover) {
	.kl-nalog .order_details td.product-name a:hover {
		text-decoration: underline;
	}
}

.kl-nalog .order_details .product-quantity {
	color: var(--wp--preset--color--grey-600);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 400;
}

.kl-nalog .order_details .wc-item-meta {
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--grey-600);
	font-size: var(--wp--preset--font-size--body-sm);
	list-style: none;
}

.kl-nalog .order_details .wc-item-meta p {
	display: inline;
	margin: 0;
}

.kl-nalog .order_details .product-total,
.kl-nalog .order_details tfoot td {
	text-align: right;
	vertical-align: top;
	white-space: nowrap;
}

.kl-nalog .order_details tfoot th,
.kl-nalog .order_details tfoot td {
	padding-block: var(--wp--preset--spacing--03);
	border-bottom: 0;
	font-weight: 400;
}

.kl-nalog .order_details tfoot tr:first-child > * {
	padding-top: var(--wp--preset--spacing--05);
}

.kl-nalog .order_details .shipped_via {
	display: none;
}

.kl-nalog .order-again {
	margin: var(--wp--preset--spacing--06) 0 0;
}

.kl-nalog .woocommerce-customer-details {
	margin-top: var(--wp--preset--spacing--09);
}

/* Porudžbina ima jednu adresu (ista za račun i dostavu): prikazuje se samo jednom */
.kl-nalog .woocommerce-column--shipping-address {
	display: none;
}

.kl-nalog address {
	margin: 0;
	font-style: normal;
	line-height: var(--wp--custom--line-height--body);
}

.kl-nalog address p {
	margin: 0;
}

.kl-nalog .woocommerce-OrderUpdates {
	margin: 0 0 var(--wp--preset--spacing--07);
	padding: 0;
	list-style: none;
}

.kl-nalog .woocommerce-OrderUpdate {
	padding: var(--wp--preset--spacing--04) 0;
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
}

.kl-nalog .woocommerce-OrderUpdate-meta {
	margin: 0;
	color: var(--wp--preset--color--grey-600);
	font-size: var(--wp--preset--font-size--body-sm);
}

/* ---- Adresa (lista): jedna adresa sa linijom ispod ---- */
.kl-nalog .woocommerce-Addresses {
	display: grid;
	gap: var(--wp--preset--spacing--07);
	max-width: 36rem;
}

.kl-nalog .woocommerce-Address {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--04);
	padding-bottom: var(--wp--preset--spacing--06);
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
}

.kl-nalog .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--02) var(--wp--preset--spacing--05);
}

.kl-nalog .woocommerce-Address-title h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--h-3);
}

.kl-nalog .woocommerce-Address-title .edit {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.kl-nalog .col2-set::before,
.kl-nalog .col2-set::after {
	display: none;
}

/* ---- Obaveštenja unutar naloga ---- */
.kl-nalog .woocommerce-info,
.kl-nalog .woocommerce-message,
.kl-nalog .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--04);
	margin: 0 0 var(--wp--preset--spacing--05);
	padding: var(--wp--preset--spacing--04) var(--wp--preset--spacing--05);
	border-left: var(--wp--custom--focus--width) solid var(--wp--preset--color--black);
	list-style: none;
	font-size: var(--wp--preset--font-size--body-sm);
}

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

.kl-nalog .woocommerce-message {
	border-left-color: var(--wp--preset--color--success);
}

/* Dugme u obaveštenju (WC: "Potvrdi mejl adresu", "Pogledaj prodavnicu") ide posle teksta */
.kl-nalog .wc-block-components-notice-banner__content:has(> .button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--04);
}

/* Link u obaveštenju ("Potvrdi mejl adresu", "Pogledaj prodavnicu"): tekstualni link posle teksta (§8.2).
   wc-blocks.css mu daje boju, pozadinu i padding sa !important, pa ostaje link, a ne dugme. */
.kl-nalog .wc-block-components-notice-banner > .wc-block-components-notice-banner__content > .wc-forward {
	float: none;
	order: 2;
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--touch-target);
	margin: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	text-underline-offset: 0.2em;
	text-underline-position: auto;
	white-space: nowrap;
	opacity: 1;
}

/* WC obaveštenja (blok markup) na nalogu i prijavi: leva linija 2px + ikonica + tekst (Design.md §8.14) */
.kl-nalog .wc-block-components-notice-banner,
.kl-prijava .wc-block-components-notice-banner {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--03);
	margin: 0 0 var(--wp--preset--spacing--05);
	padding: var(--wp--preset--spacing--04) var(--wp--preset--spacing--05);
	border: 0;
	border-left: var(--wp--custom--focus--width) solid var(--wp--preset--color--black);
	border-radius: 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
}

.kl-nalog .wc-block-components-notice-banner > svg,
.kl-prijava .wc-block-components-notice-banner > svg {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	padding: 0;
	border-radius: 0;
	background: none;
	fill: currentColor;
}

.kl-nalog .wc-block-components-notice-banner.is-error,
.kl-prijava .wc-block-components-notice-banner.is-error {
	border-left-color: var(--wp--preset--color--error);
}

.kl-nalog .wc-block-components-notice-banner.is-error > svg,
.kl-prijava .wc-block-components-notice-banner.is-error > svg {
	color: var(--wp--preset--color--error);
}

.kl-nalog .wc-block-components-notice-banner.is-success,
.kl-prijava .wc-block-components-notice-banner.is-success {
	border-left-color: var(--wp--preset--color--success);
}

.kl-nalog .wc-block-components-notice-banner.is-success > svg,
.kl-prijava .wc-block-components-notice-banner.is-success > svg {
	color: var(--wp--preset--color--success);
}

.kl-nalog .wc-block-components-notice-banner:focus,
.kl-prijava .wc-block-components-notice-banner:focus {
	outline: none;
}

.kl-nalog .wc-block-components-notice-banner__content,
.kl-prijava .wc-block-components-notice-banner__content {
	flex: 1;
	align-self: center;
}