/*
 * Prodavnica i kategorije — Caroline Art.
 *
 * Izvor: build/prodavnica/spisak.css. Ide u
 * wp-content/mu-plugins/caroline-art-prodavnica/spisak.css, i učitava se samo
 * kad ca_prodavnica_spisak() vrati true.
 *
 * Ovde je samo ono što postoji na spisku: zaglavlje sa uvodnom rečenicom, traka
 * alata i „Učitaj još". Mrvice i kartica su u `zajedno.css`, jer ih deli i
 * strana proizvoda.
 *
 * Boje i veličine slova su iz tabele u CLAUDE.md. #F7F3F5 je podloga skice i ne
 * sme nigde ovde.
 */

/* ────────────────────────────────────────────────── zaglavlje spiska
 *
 * Naslov i uvodna rečenica dele pojas u Svetlo roze. Do sada su kategorije bile
 * prazne odmah ispod naslova.
 */

.ca-spisak .woocommerce-products-header {
	background: #FDECEF;
	padding: 40px 32px 44px;
	margin: 0;
	text-align: center;
}

/*
 * Specifičnost, ne ukras. Jupiter X ovaj naslov drži pravilom
 * `body.woocommerce .woocommerce-products-header .woocommerce-products-header__title.page-title`
 * u kom stoji 28px i težina 300, a težine 300 u sistemu nema. To pravilo nabraja
 * ČETIRI klase; poređenje ide prvo po broju klasa, pa `html body` ne pomaže —
 * `html` i `body` su elementi i broje se tek posle. Zato i naše mora da nabroji
 * pet klasa. Bez `!important`.
 *
 * Isto pravilo obara i Elementorov global za `h1` (`.elementor-kit-3 h1`), pa
 * naslov prodavnice nikad nije ni bio na skali.
 */
body.ca-spisak.woocommerce .woocommerce-products-header .woocommerce-products-header__title.page-title,
body.ca-spisak.woocommerce .woocommerce-products-header .woocommerce-products-header__title,
body.ca-spisak.woocommerce .woocommerce-products-header .page-title {
	margin: 0;
	font-family: "Crimson Text", Georgia, serif;
	font-weight: 400;
	font-size: 36px;
	line-height: 1.25;
	color: #42273B;
	text-wrap: balance;
}

.ca-spisak__uvod {
	max-width: 60ch;
	margin: 14px auto 0;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: #776472;
}


/* Uvod u roze okviru na 15 px („Tekst – kartica"), računar i telefon:
 * iznad četiri dugmeta i filtera je gusto, a na telefonu uvodi od 20-ak reči
 * idu u 5 redova (Karolina, 2. oktobra 2026: „jel ovi tekstovi mogu biti malo
 * manji"). 14 ne, to je „Sitno", za natpise. Polja za unos ostaju 16 (iOS).
 * Pušteno svima 2. oktobra 2026, na njeno „da, pusti svima". */
.ca-spisak__uvod.ca-spisak__uvod {
	font-size: 15px;
	line-height: 1.6;
}

/* ─────────────────────────────────────────── kategorije u uvodu
 *
 * Četiri dugmeta ispod uvodnog teksta, na sredini (Karolinin izbor „B",
 * 28. septembra 2026). Token „Dugme": Poppins 13px, velika slova, razmak
 * 1.69px. Obris šljiva na belom; pri prelasku i za tekuću kategoriju puna
 * šljiva sa belim slovima. Selektor sa `body.ca-spisak` i `a`, da nadjača
 * temina pravila za veze i njihov hover (vidi zamke iz teme).
 */
body.ca-spisak .ca-spisak__kategorije {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 28px 0 0;
}

body.ca-spisak .ca-spisak__kategorije a.ca-spisak__kategorija {
	display: inline-block;
	padding: 13px 26px;
	border: 1px solid #42273B;
	background: #FFFFFF;
	color: #42273B;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 1.69px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

body.ca-spisak .ca-spisak__kategorije a.ca-spisak__kategorija:hover,
body.ca-spisak .ca-spisak__kategorije a.ca-spisak__kategorija:focus-visible,
body.ca-spisak .ca-spisak__kategorije a.ca-spisak__kategorija--tu {
	background: #42273B;
	color: #FFFFFF;
	text-decoration: none;
}

/* ────────────────────────────────────────────────────────── filteri
 *
 * NA RAČUNARU: četiri dugmeta u redu, levo u traci alata, u istoj visini kao
 * poređanje desno: Izdvoji (Na akciji, Unikati), Oblik, Boja, Motiv. Svako
 * otvara samo svoj kratak prozor. Karolina, 7. septembra: „ovako se skrola
 * previše dole" — do tada je jedno dugme „Izdvoji" otvaralo prozor sa svih
 * četrdesetak stavki i klizanjem. Spiskovi po atributu idu u dva stupca, pa
 * Boja sa 14 stavki stane u sedam redova umesto u prozor koji klizi.
 *
 * NA TELEFONU ostaje jedno dugme „Izdvoji" preko cele širine, koje otvara
 * jedan prozor sa svim grupama; četiri dugmeta u red tamo ne stanu. Isti HTML
 * radi oba: dugme grupe (`.ca-filteri__dugme`) je na računaru okidač prozora, a
 * na telefonu naslov grupe bez klika, i spisak grupe je tamo uvek otvoren.
 *
 * ZAŠTO `.ca-js`. Prozor mora da bude sklopljen od prve iscrtane slike, ali ne
 * sme da bude sklopljen kod kupca kod koga skripta ne proradi — tada bi filteri
 * nestali bez traga. Prvo je klasu dodavao `filteri.js`, koji stoji u podnožju,
 * pa se prozor na trenutak video otvoren i onda skakao na svoje mesto.
 * Karolinina primedba, 5. septembra.
 *
 * Sada klasu `ca-js` dodaje **mali ugrađen deo skripte u zaglavlju**, pre nego
 * što se bilo šta iscrta. Ako skripta ne radi uopšte, klase nema i spiskovi
 * ostaju otvoreni ispod dugmadi — namera je ista, samo bez treptaja.
 */

.ca-filteri {
	position: relative;
}

/*
 * Dugme „Izdvoji" (telefon) i dugme grupe (računar): isti izgled, ista visina,
 * okvir i slova kao poređanje. Selektor sa `body.ca-spisak.woocommerce` jer
 * tema svako `button` u prodavnici boji po svome.
 */
body.ca-spisak.woocommerce .ca-filteri__otvori,
body.ca-spisak.woocommerce .ca-filteri__dugme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 9px 14px;
	border: 1px solid #E4E0E3;
	border-radius: 2px;
	background: #FFFFFF;
	color: #42273B;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	line-height: normal;
	cursor: pointer;
}

/*
 * Ista visina kao poređanje, na pikselu. Samo isti razmak i ista slova nisu
 * dovoljni: `select` ima `line-height: normal`, pa je dugme sa proredom 1,6
 * ispadalo 2px više.
 */
body.ca-spisak.woocommerce .ca-filteri__otvori,
body.ca-spisak.woocommerce .ca-filteri__dugme,
.ca-spisak .ca-alatke .woocommerce-ordering select {
	min-height: 42px;
}

/* Strelica nadole, ista kao u poređanju. Okreće se kad je prozor otvoren. */
body.ca-spisak.woocommerce .ca-filteri__otvori::after,
body.ca-spisak.woocommerce .ca-filteri__dugme::after {
	content: "";
	width: 10px;
	height: 6px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%2342273B' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .18s ease;
}

.ca-filteri--otvoren .ca-filteri__otvori::after,
.ca-filteri__grupa--otvorena .ca-filteri__dugme::after {
	transform: rotate(180deg);
}

body.ca-spisak.woocommerce .ca-filteri__otvori:hover,
body.ca-spisak.woocommerce .ca-filteri__otvori:focus-visible,
body.ca-spisak.woocommerce .ca-filteri__dugme:hover,
body.ca-spisak.woocommerce .ca-filteri__dugme:focus-visible {
	border-color: #D3A2B0;
	background: #FFFFFF;
	color: #42273B;
}

/* Kad je bar jedan filter uključen, dugme to nosi na sebi i zatvoreno. */
body.ca-spisak.woocommerce .ca-filteri__otvori--ukljucen,
body.ca-spisak.woocommerce .ca-filteri__dugme--ukljucen {
	border-color: #42273B;
}

.ca-filteri__znak {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: #42273B;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 1;
}

/* ───────────────────────────────────────── prozor, grupe i stavke */

.ca-filteri__panel,
.ca-filteri__grupa,
.ca-filteri__spisak {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/*
 * Stavka je veza, ne polje za štikliranje, jer mora da ima svoju adresu. Kvadrat
 * levo je zato nacrtan, `::before` na samoj vezi.
 */
body.ca-spisak.woocommerce .ca-filteri__stavka {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 2px;
	color: #42273B;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	text-decoration: none;
}

body.ca-spisak.woocommerce .ca-filteri__stavka::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 1px solid #C6BEC4;
	border-radius: 2px;
	background: #FFFFFF;
}

body.ca-spisak.woocommerce .ca-filteri__stavka:hover,
body.ca-spisak.woocommerce .ca-filteri__stavka:focus-visible {
	background: #FDECEF;
	color: #42273B;
	text-decoration: none;
}

body.ca-spisak.woocommerce .ca-filteri__stavka--ukljucena::before {
	border-color: #42273B;
	background: #42273B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4l2.4 2.4 4.6-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/*
 * Dok nova strana stiže (klasa `ca-filteri--ceka`, iz `filteri.js`): kliknuta
 * stavka već nosi kvačicu i točkić, ostale su prigušene i ne primaju klik.
 */
.ca-filteri--ceka .ca-filteri__panel {
	pointer-events: none;
	cursor: progress;
}

.ca-filteri--ceka .ca-filteri__stavka:not([aria-busy="true"]),
.ca-filteri--ceka .ca-filteri__ponisti:not([aria-busy="true"]) {
	opacity: .55;
}

body.ca-spisak.woocommerce .ca-filteri__stavka[aria-busy="true"]::after,
body.ca-spisak.woocommerce .ca-filteri__ponisti[aria-busy="true"]::after {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-left: auto;
	border: 2px solid #E4E0E3;
	border-top-color: #42273B;
	border-radius: 50%;
	animation: ca-filteri-vrti .7s linear infinite;
}

body.ca-spisak.woocommerce .ca-filteri__ponisti[aria-busy="true"]::after {
	display: inline-block;
	vertical-align: middle;
	margin-left: 8px;
}

@keyframes ca-filteri-vrti {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	body.ca-spisak.woocommerce .ca-filteri__stavka[aria-busy="true"]::after,
	body.ca-spisak.woocommerce .ca-filteri__ponisti[aria-busy="true"]::after {
		animation: none;
	}
}

body.ca-spisak.woocommerce .ca-filteri__ponisti {
	margin-top: 4px;
	padding: 9px 10px;
	border-top: 1px solid #E4E0E3;
	color: #776472;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	text-decoration: underline;
}

body.ca-spisak.woocommerce .ca-filteri__ponisti:hover,
body.ca-spisak.woocommerce .ca-filteri__ponisti:focus-visible {
	color: #42273B;
}

/* ──────────────────────────────────────────── računar: četiri dugmeta */

@media (min-width: 768px) {
	body.ca-spisak.woocommerce .ca-filteri__otvori {
		display: none;
	}

	.ca-filteri__panel {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
	}

	.ca-filteri__grupa {
		position: relative;
	}

	/* Prozor jedne grupe, ispod njenog dugmeta. */
	.ca-js .ca-filteri__spisak {
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		z-index: 30;
		display: none;
		min-width: 220px;
		max-height: min(70vh, 460px);
		overflow-y: auto;
		padding: 8px;
		border: 1px solid #E4E0E3;
		border-radius: 2px;
		background: #FFFFFF;
		box-shadow: 0 6px 20px rgba(66, 39, 59, .12);
	}

	.ca-js .ca-filteri__grupa--otvorena .ca-filteri__spisak {
		display: flex;
	}

	/*
	 * Oblik, boja i motiv u dva stupca: 11, 14 i 12 stavki daju najviše sedam
	 * redova, oko 300px, pa nijedan prozor ne klizi. Najduža stavka
	 * („Šestougaonik") stane u 160px sa kvadratom i razmakom.
	 */
	.ca-filteri__grupa--atribut .ca-filteri__spisak {
		min-width: 360px;
	}

	.ca-filteri__grupa--atribut .ca-filteri__spisak,
	.ca-js .ca-filteri__grupa--atribut.ca-filteri__grupa--otvorena .ca-filteri__spisak {
		display: grid;
		grid-template-columns: repeat(2, minmax(160px, 1fr));
		gap: 2px 6px;
	}

	.ca-js .ca-filteri__grupa--atribut:not(.ca-filteri__grupa--otvorena) .ca-filteri__spisak {
		display: none;
	}

	/* „Poništi" stoji u istom redu, iza dugmadi, kao obična podvučena veza. */
	body.ca-spisak.woocommerce .ca-filteri__ponisti {
		margin: 0;
		padding: 9px 4px;
		border-top: 0;
	}
}

/* ───────────────────────────────────────── telefon: jedan prozor */

@media (max-width: 767px) {
	/*
	 * Na telefonu je traka alata kolona, pa filter i poređanje idu jedno ispod
	 * drugog, oba punom širinom. Prozor se otvara preko cele širine reda, ne u
	 * 220px sa leve strane, jer bi tako visio na sredini ekrana.
	 */
	.ca-filteri {
		display: block;
	}

	/*
	 * Ovde se NE centrira, iako je na telefonu sve ostalo centrirano. Ispod
	 * dugmeta stoji poređanje, a to je pravi `select` i njegov natpis je uvek uz
	 * levu ivicu. Centriran natpis iznad levog davao je dva reda koja se ne
	 * poklapaju. Karolinina primedba, 5. septembra: „da budu na istom mestu."
	 *
	 * Strelica ide skroz desno, isto kao kod poređanja. `margin-left: auto`, a ne
	 * `justify-content: space-between`, jer kad je filter uključen između natpisa
	 * i strelice stoji i kružić sa brojem — razmak bi ga odgurao na sredinu.
	 */
	body.ca-spisak.woocommerce .ca-filteri__otvori {
		display: flex;
		justify-content: flex-start;
		width: 100%;
	}

	body.ca-spisak.woocommerce .ca-filteri__otvori::after {
		margin-left: auto;
	}

	/*
	 * Jedan prozor sa svim grupama. Niži nego što je bio na računaru: sa 460px
	 * mu je dno padalo 81px ispod ivice ekrana, pa se poslednja grupa nije
	 * videla dok se strana ne pomeri.
	 */
	.ca-js .ca-filteri__panel {
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		right: 0;
		z-index: 30;
		display: none;
		max-height: min(55vh, 340px);
		overflow-y: auto;
		padding: 8px;
		border: 1px solid #E4E0E3;
		border-radius: 2px;
		background: #FFFFFF;
		box-shadow: 0 6px 20px rgba(66, 39, 59, .12);
	}

	.ca-js .ca-filteri--otvoren .ca-filteri__panel {
		display: flex;
	}

	.ca-filteri__grupa {
		margin-top: 6px;
		padding-top: 6px;
		border-top: 1px solid #E4E0E3;
	}

	.ca-filteri__grupa--izdvoji {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	/* Dugme grupe je ovde naslov grupe: bez klika, bez okvira, bez strelice. */
	body.ca-spisak.woocommerce .ca-filteri__dugme {
		pointer-events: none;
		min-height: 0;
		margin: 0 0 2px;
		padding: 2px 10px 4px;
		border: 0;
		background: transparent;
		color: #776472;
		font-size: 13px;
		line-height: 1.6;
		letter-spacing: 1.6px;
		text-transform: uppercase;
	}

	body.ca-spisak.woocommerce .ca-filteri__dugme::after,
	body.ca-spisak.woocommerce .ca-filteri__dugme .ca-filteri__znak,
	body.ca-spisak.woocommerce .ca-filteri__grupa--izdvoji .ca-filteri__dugme {
		display: none;
	}
}

/* ──────────────────────────────────────────────────── prazan spisak */

.ca-prazno {
	padding: 60px 20px 72px;
	text-align: center;
}

.ca-prazno p {
	margin: 0 0 20px;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: #776472;
}

body.ca-spisak.woocommerce .ca-prazno__dugme {
	display: inline-block;
	padding: 13px 26px;
	border: 1px solid #42273B;
	border-radius: 2px;
	background: #42273B;
	color: #FFFFFF;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 1.69px;
	text-transform: uppercase;
	line-height: 1.2;
	text-decoration: none;
}

body.ca-spisak.woocommerce .ca-prazno__dugme:hover,
body.ca-spisak.woocommerce .ca-prazno__dugme:focus-visible {
	border-color: #5C3A53;
	background: #5C3A53;
	color: #FFFFFF;
}

/* ────────────────────────────────────────────────────── traka alata
 *
 * Klasa je `ca-alatke`, ne `ca-traka`. Prvo je bila `ca-traka`, a to je ime već
 * nosi pojas sa porukama u zaglavlju (`build/_zaglavlje.php`), koji stoji na
 * svakoj strani sajta. Pravilo `.ca-spisak .ca-traka` hvatalo je i njega, pa je
 * pojas u zaglavlju na prodavnici i kategorijama dobijao naš razmak od 22px i
 * crtu ispod. Nađeno 5. septembra, dok je pravljen red sa filterima.
 */

.ca-spisak .ca-alatke {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	border-bottom: 1px solid #E4E0E3;
}

.ca-spisak .ca-alatke .woocommerce-ordering {
	margin: 0;
	float: none;
}

.ca-spisak .ca-alatke .woocommerce-ordering select {
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #42273B;
	background: #FFFFFF;
	border: 1px solid #E4E0E3;
	border-radius: 2px;
	padding: 9px 14px;
}

/*
 * Fokus na poređanju. Jupiter X svakom `select:focus` u prodavnici daje plav
 * okvir (#80bdff) i plavu senku od 0,2rem, bootstrapovsko podrazumevano.
 * Karolina, 7. septembra: „u prodavnici kad se klikne na desni filter, okolo je
 * plava boja." Izmereno: pravilo `.woocommerce form select:focus` iz teme.
 * Umesto plavog: okvir Roze tamnija, isto što dobija dugme „Izdvoji" levo.
 */
.ca-spisak .ca-alatke .woocommerce-ordering select:focus {
	border-color: #D3A2B0;
	box-shadow: none;
	outline: 0;
}

/* ─────────────────────────────────────────────────── „Učitaj još"
 *
 * Brojevi strana se sakrivaju, ne brišu: Gugl i dalje prolazi kroz sve četiri
 * strane, a ako skripta zakaže vraća ih na videlo klasom `ca-pag--vidljiva`.
 */

body.ca-spisak .woocommerce-pagination {
	display: none;
}

body.ca-spisak .woocommerce-pagination.ca-pag--vidljiva {
	display: block;
}

.ca-jos {
	padding: 8px 0 48px;
	text-align: center;
}

.ca-jos__broj {
	margin: 0 0 16px;
	min-height: 22px;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #776472;
}

/*
 * Reč „Učitavam…" ostaje u kodu za čitače ekrana, ali se ne vidi — od 10.
 * septembra 2026 na njenom mestu stoji točkić (`.ca-tockic`, Dodatni CSS).
 * `clip-path` je današnji način da se sadržaj skloni sa ekrana a ostane u
 * pristupačnom stablu; sam `display: none` bi ga sklonio i čitaču.
 */
.ca-jos__citac {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

body.ca-spisak.woocommerce .ca-jos__dugme {
	display: inline-block;
	width: auto;
	min-width: 230px;
	margin: 0;
	padding: 13px 26px;
	border: 1px solid #42273B;
	border-radius: 2px;
	background: #42273B;
	color: #FFFFFF;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 1.69px;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
}

body.ca-spisak.woocommerce .ca-jos__dugme:hover,
body.ca-spisak.woocommerce .ca-jos__dugme:focus-visible {
	background: #5C3A53;
	border-color: #5C3A53;
}

/*
 * Dok traje učitavanje dugme mora da zadrži TAČNO istu veličinu. Tema menja
 * podlogu dugmeta kad je onemogućeno, pa je visina padala sa 43px na 29px i
 * dugme je poskakivalo pod prstom. Zato se ovde ponavlja i razmak i veličina
 * slova, ne samo boja.
 */
body.ca-spisak.woocommerce .ca-jos__dugme[disabled] {
	background: #776472;
	border-color: #776472;
	cursor: default;
	padding: 13px 26px;
	font-size: 13px;
	line-height: 1.2;
}

@media (max-width: 767px) {
	.ca-spisak .woocommerce-products-header {
		padding: 30px 20px 32px;
	}

	body.ca-spisak.woocommerce .woocommerce-products-header .woocommerce-products-header__title.page-title,
	body.ca-spisak.woocommerce .woocommerce-products-header .woocommerce-products-header__title,
	body.ca-spisak.woocommerce .woocommerce-products-header .page-title {
		font-size: 30px;
	}

	.ca-spisak__uvod {
		margin-top: 12px;
		font-size: 16px;
	}

	/* Telefon: po dve u dva reda, dugme preko pola sirine i vise, da se lako
	   pogodi prstom (Karolina, 28. septembra 2026: cetiri u redu su premale). */
	body.ca-spisak .ca-spisak__kategorije {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin-top: 22px;
	}

	body.ca-spisak .ca-spisak__kategorije a.ca-spisak__kategorija {
		padding: 16px 10px;
		text-align: center;
	}

	/* Filteri na telefonu: vidi odeljak „filteri" gore, blok „telefon". */

	.ca-prazno {
		padding: 44px 16px 52px;
	}

	.ca-prazno p {
		font-size: 16px;
	}

	.ca-spisak .ca-alatke {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 18px 0;
		text-align: center;
	}

	.ca-spisak .ca-alatke .woocommerce-ordering select {
		width: 100%;
	}

	body.ca-spisak.woocommerce .ca-jos__dugme {
		width: 100%;
		min-width: 0;
	}
}