/*
 * Zajedničko za prodavnicu i stranu proizvoda — Caroline Art.
 *
 * Izvor: build/prodavnica/zajedno.css. Ide u
 * wp-content/mu-plugins/caroline-art-prodavnica/zajedno.css, i učitava se na
 * spisku (prodavnica, kategorije, oznake) i na strani proizvoda.
 *
 * Ovde su mrvice i kartica proizvoda — jedina dva elementa koja se pojavljuju
 * na obe vrste strana. Kartica je u „Sličnim komadima" ista kao u prodavnici,
 * pa se stil ne sme prepisivati u dva fajla; kad bi se prepisivao, jedna izmena
 * bi se pamtila na jednom mestu a zaboravljala na drugom.
 *
 * Boje i veličine slova su iz tabele u CLAUDE.md. #F7F3F5 je podloga skice i ne
 * sme nigde ovde.
 *
 * O SELEKTORIMA. Prefiks `body.ca-nova.woocommerce` nije ukras. Jupiter X i
 * WooCommerce drže širinu, marginu, veličinu dugmeta i poravnanje na telefonu
 * pravilima iz svojih datoteka, koje pregledač ne da da se pročitaju iz
 * skripte, i koja nabrajaju četiri klase. Naša moraju da nabroje pet da bi
 * dobila. Nigde nije upotrebljen `!important` — provereno je da je dovoljna
 * specifičnost.
 */

/* ─────────────────────────────────────────────────────────── mrvice
 *
 * Tanka crta ispod, u boji „Linija". Jedina je na strani; služi da se mrvice
 * odvoje od slike, jer su bile prelepljene za nju. Karolinina odluka od 4.
 * septembra — prvo je probano samo razmakom, pa je crta bila jasnija.
 *
 * Iznad mrvica nema svoje podloge. Prostor do zaglavlja daje tema: 24px na
 * `.jupiterx-main-content`, isto na svakoj strani sajta. Ranije je tu stajalo
 * još 18px našeg razmaka, pa je vrh delovao prazno.
 */

.ca-mrvice {
	margin: 0 0 24px;
	border-bottom: 1px solid #E4E0E3;
	padding: 0 0 14px;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #776472;
}

.ca-mrvice a {
	color: #776472;
	text-decoration: none;
}

.ca-mrvice a:hover,
.ca-mrvice a:focus-visible {
	color: #42273B;
	text-decoration: underline;
}

.ca-mrvice__tacka {
	color: #D3A2B0;
	padding: 0 6px;
}

.ca-mrvice__tu {
	color: #42273B;
}

/* ────────────────────────────────────────────────── mreža proizvoda
 *
 * Zatečeno je bilo `display: block` sa `float: left`, pa su kartice u istom
 * redu bile 481, 482 i 502px visoke i dugmad nisu stajala u liniji. Mreža to
 * rešava sama: sve ćelije u redu su iste visine, a dugme se lepi za dno
 * kartice preko `margin-top: auto`.
 */

body.ca-nova.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px 28px;
	padding: 36px 0 40px;
	margin: 0;
	list-style: none;
}

body.ca-nova.woocommerce ul.products::before,
body.ca-nova.woocommerce ul.products::after {
	content: none;
}

/* ───────────────────────────────────────────────────────── kartica */

body.ca-nova.woocommerce ul.products li.product.ca-k {
	display: flex;
	flex-direction: column;
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

/*
 * Jupiter X unutar kartice otvara `div.jupiterx-product-container` i u njega
 * smešta sve. Kartica je flex kolona, ali joj je onda jedino dete taj omotač,
 * pa `margin-top: auto` na dugmetu nema šta da gura i dugmad ispadaju iz linije
 * (izmereno: četiri različita položaja u istom redu). Omotač zato nasleđuje
 * isti raspored. Pravilo hvata i svaki drugi tuđi omotač, a ne dira naše
 * `ca-k__` blokove.
 */
body.ca-nova.woocommerce ul.products li.product.ca-k > div:not([class*="ca-k__"]) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

.ca-k__slika {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 2px;
	background: #FDECEF;
}

.ca-k__slika a {
	display: block;
	height: 100%;
}

.ca-k__slika img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	/* Uvećanje ka sredini, gde Karolina uvek stavlja privezak, da komad na
	   kartici bude krupniji bez kropovanja fotografija. 1,30 je njen izbor od
	   15. septembra 2026, probano u pregledaču sa 1,35 i 1,30. Isto važi za
	   Ravenove kartice na početnoj i vodičima (`_dodatni-css.php`). */
	transform: scale(1.3);
	transform-origin: 50% 50%;
}

/*
 * Znak sniženja: roze tamnija sa tekstom u šljivi. Zeleni „Akcija!" iz teme
 * (`#28A745`) bio je jedina zelena boja na sajtu, pa se gasi.
 */
.ca-k__znak {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 5px 11px;
	border-radius: 2px;
	background: #D3A2B0;
	color: #42273B;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	line-height: 1;
}

body.ca-nova .onsale,
body.ca-nova .jupiterx-product-badges {
	display: none;
}

body.ca-nova.woocommerce ul.products li.product .ca-k__naziv {
	margin: 16px 0 0;
	font-family: "Crimson Text", Georgia, serif;
	font-weight: 400;
	font-size: 19px;
	line-height: 1.4;
	text-wrap: balance;
}

.ca-k__naziv a {
	color: #42273B;
	text-decoration: none;
}

.ca-k__naziv a:hover,
.ca-k__naziv a:focus-visible {
	color: #5C3A53;
	text-decoration: underline;
}

body.ca-nova.woocommerce ul.products li.product .ca-k__cena {
	margin: 2px 0 0;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #42273B;
	font-variant-numeric: tabular-nums;
}

.ca-k__cena del {
	color: #776472;
	margin-right: 8px;
}

.ca-k__cena ins {
	text-decoration: none;
	background: none;
	color: #42273B;
}

/* Otud dugmad u liniji i kad se naziv prelomi u dva reda. */
.ca-k__dugme {
	margin-top: auto;
	padding-top: 16px;
}

body.ca-nova.woocommerce ul.products li.product .button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 13px 18px;
	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;
}

body.ca-nova.woocommerce ul.products li.product .button:hover,
body.ca-nova.woocommerce ul.products li.product .button:focus-visible {
	background: #5C3A53;
	border-color: #5C3A53;
	color: #FFFFFF;
}

@media (max-width: 1024px) {
	body.ca-nova.woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.ca-mrvice {
		padding: 0 0 12px;
		margin-bottom: 18px;
		font-size: 13px;
		text-align: center;
	}

	body.ca-nova.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 16px;
		padding: 24px 0 28px;
	}

	body.ca-nova.woocommerce ul.products li.product .button {
		padding: 11px 8px;
		font-size: 12px;
		letter-spacing: 1.4px;
	}

	/*
	 * Znak sniženja manji, da ne udari u srce. Karolina, 7. septembra, sa
	 * telefona: „sniženo i srce se preklapaju kad piše sniženo." Izmereno: znak
	 * je 86px širok, srce 30px sa 7px od ivice; na telefonu od 360px kartica u
	 * dva stupca ima 131px, pa se dodiruju, a na 398px ostaje 10px razmaka.
	 * Sa 11px i užim razmakom znak je oko 69px, pa i na 320px (kartica 132px)
	 * ostane 16px do srca. Gornja ivica 12px da mu sredina bude u visini
	 * sredine srca (7 + 15 = 22).
	 */
	.ca-k__znak {
		top: 12px;
		left: 8px;
		padding: 4px 8px;
		font-size: 11px;
		letter-spacing: 1.2px;
	}

	/*
	 * Na telefonu Jupiter X vraća sadržaj kartice na levo, u svom
	 * `woocommerce-smallscreen.css`. To je tačno nalaz br. 7 sa spiska:
	 * prodavnica je bila levo poravnata, a na početnoj je dogovoreno da je na
	 * telefonu SVE centrirano.
	 */
	body.ca-nova.woocommerce ul.products li.product.ca-k,
	body.ca-nova.woocommerce ul.products li.product .ca-k__naziv,
	body.ca-nova.woocommerce ul.products li.product .ca-k__cena {
		text-align: center;
	}
}

/*
 * Druga fotografija na prelazak mišem — nalaz br. 20.
 *
 * Stoji preko prve, providna dok se ne pređe mišem. Na dodir se ne prikazuje i
 * ne učitava se uzalud: telefon nema prelazak mišem, pa bi bila samo potrošeni
 * podaci.
 */
.ca-k__druga {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .55s ease;
	pointer-events: none;
}

.ca-k__druga img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

.ca-k:hover .ca-k__druga,
.ca-k:focus-within .ca-k__druga {
	opacity: 1;
}

@media (hover: none) {
	.ca-k__druga {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ca-k__druga {
		transition: none;
	}
}

/*
 * Pismo naziva mora i na samu vezu, ne samo na `h3`.
 *
 * Naziv stoji unutar `<a>`, a Jupiter X sve veze vuče na Poppins pravilom iz
 * datoteke koju pregledač ne da da se pročita iz skripte. Ishod: `h3` je bio
 * uredno Crimson, a slova su se iscrtavala u Poppinsu — Karolina je to
 * primetila odmah, 4. septembra. Isto važi svuda gde naslov ima vezu.
 */
body.ca-nova.woocommerce ul.products li.product .ca-k__naziv a {
	font-family: "Crimson Text", Georgia, serif;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: #42273B;
	text-decoration: none;
}
/*
 * DUGME NA KARTICI NEMA IKONICU — samo natpis.
 *
 * Karolinina odluka, 5. septembar: „u prodavnici i kategorijama je samo natpis
 * dodaj, i to je ok". Korpica ostaje samo na strani proizvoda, gde je dugme
 * široko i ima mesta.
 *
 * Ovde je 4. septembra bila upisana i korpica, ali se nikad nije videla: tema
 * drži `display: none` na tom pseudoelementu, jer dugme nosi njenu klasu
 * `jupiterx-icon-shopping-cart-6`. Merenje kroz `background` to nije uhvatilo —
 * pravilo se lepo pročita, a kutija se ne iscrtava. Nauk: kod pseudoelementa se
 * proverava `display`, ne samo ono što se u njega upisuje.
 */
body.ca-nova.woocommerce ul.products li.product .button.add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
 * WooCommerceova kvačica IZA natpisa (`a.button.added::after`, sa razmakom od
 * 0,53em) se gasi. Na kartici od 160px na telefonu gurala je natpis u drugi red
 * i dugme je raslo — Karolinina primedba od 5. septembra.
 *
 * Potvrdu daje natpis: „Dodaj u korpu" → „Dodato" na 2,5 sekunde, iz
 * `kartica.js`. Širina se ne menja jer je dugme u punoj širini kartice.
 *
 * Selektor nabraja pet klasa, njihov dve, pa `!important` nije potreban.
 *
 * GASI SE SAMO KVAČICA, NE I TOČKIĆ. Do 10. septembra 2026. ovde je stajalo
 * `.add_to_cart_button::after`, bez `.added` — a WooCommerce kroz taj isti
 * pseudoelement crta i točkić dok traje dodavanje (`.loading::after`,
 * `content: ""`, kružić sa `animation: spin`). Pravilo je, dakle, gasilo oba,
 * pa je u prodavnici jedino što se videlo bilo bledjenje dugmeta. Karolina:
 * „u prodavnici nema točkić samo se dugme pobeli."
 *
 * Izmereno pre izmene: u stanju `loading` `::after` je imao `animationName:
 * spin`, ali `content: none` — kutija je postojala, sadržaja nije bilo. Nauk je
 * isti kao kod korpice iznad: kod pseudoelementa se gleda i `content`, ne samo
 * da li se pravilo primenilo.
 *
 * OD ISTOG DANA POPODNE točkić na karticama crta naša skripta (`kartica.js`,
 * klasa `ca-veza--radi`), pa je WooCommerceov ovde samo rezerva: ako skripta
 * zakaže, kupac i dalje vidi njegov. Vidi `korpa/sajt.css`.
 */
body.ca-nova.woocommerce ul.products li.product .button.add_to_cart_button.added::after {
	content: none;
}