/*
 * Strana proizvoda — Caroline Art.
 *
 * Izvor: build/prodavnica/proizvod.css. Ide u
 * wp-content/mu-plugins/caroline-art-prodavnica/proizvod.css, i učitava se samo
 * kad ca_prodavnica_proizvod() vrati true.
 *
 * Mrvice i kartica u „Sličnim komadima" su u `zajedno.css`.
 *
 * Boje i veličine slova su iz tabele u CLAUDE.md. #F7F3F5 je podloga skice i ne
 * sme nigde ovde.
 */

/* ─────────────────────────────────────────── naslov, cena, zaliha */

body.ca-proizvod.woocommerce div.product .product_title {
	margin: 0;
	font-family: "Crimson Text", Georgia, serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.3;
	color: #42273B;
	text-wrap: balance;
}

body.ca-proizvod.woocommerce div.product .summary .price,
body.ca-proizvod.woocommerce div.product .summary .price ins {
	margin: 10px 0 0;
	font-family: "Crimson Text", Georgia, serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.35;
	color: #42273B;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

body.ca-proizvod.woocommerce div.product .summary .price del {
	color: #776472;
	font-size: 17px;
	margin-right: 8px;
}

/*
 * „Jedini komad" umesto „1 na zalihama". Karolinina odluka od 4. septembra:
 * bez broja u zagradi, i samo ovde na strani proizvoda — na kartici u
 * prodavnici ga nema. Takvih komada je 49; sajt ih prepoznaje sam, po tome što
 * im je polje za količinu sakriveno.
 *
 * `!important` je ovde nužan. Jupiter X veličinu i boju ovog
 * reda drži baš tako, pa specifičnost nije dovoljna: proba sa šest klasa nije
 * pomerila ni slovo. Drugo takvo mesto je donja crta harmonike, niže. Sve
 * ostalo u ove tri datoteke dobija bez njega.
 */
body.ca-proizvod.woocommerce div.product .stock {
	margin: 10px 0 0;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 13px !important;
	font-weight: 400;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	line-height: 1.6;
	color: #776472 !important;
}

body.ca-proizvod.woocommerce div.product .stock.ca-p__unikat {
	color: #42273B !important;
}

/*
 * Rasprodat komad: Jupiter X ga sakriva (`.woocommerce div.product
 * .out-of-stock { display: none }`, tri klase), pa se kupac sa Gugla nije
 * imao odakle obavestiti da komada nema. Ovde se red vraća, u istoj kutiji
 * kao „Jedini komad" uz dugme, jer stoji tačno na mestu gde je kod ostalih
 * red za kupovinu. Karolina, 8. septembar 2026: samo „Rasprodato".
 */
body.ca-proizvod.woocommerce div.product .stock.out-of-stock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	margin: 18px 0 0;
	padding: 0 18px;
	border: 1px solid #E4E0E3;
	border-radius: 2px;
	background: #FFFFFF;
	color: #42273B !important;
	line-height: 1.2;
	white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────── opis */

body.ca-proizvod .ca-p__opis {
	margin: 22px 0 0;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #776472;
}

body.ca-proizvod .ca-p__opis p {
	margin: 0 0 12px;
}

body.ca-proizvod .ca-p__opis p:last-child {
	margin-bottom: 0;
}

body.ca-proizvod .ca-p__opis strong {
	color: #42273B;
	font-weight: 500;
}

body.ca-proizvod .ca-p__opis ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.ca-proizvod .ca-p__opis li {
	margin: 0 0 8px;
}

/* ─────────────────────────────────────────────────────── uverenja
 *
 * Tri rečenice koje odgovaraju na ono što kupac pita pred klik: kutija,
 * besplatna dostava i način plaćanja. Nalaz br. 15 — do sada nije pisalo ništa
 * od toga.
 */

.ca-p__uverenja {
	margin: 26px 0 0;
	padding: 20px 22px;
	background: #FDECEF;
	border-radius: 2px;
	text-align: left;
}

.ca-p__uverenja p {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 10px;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #42273B;
}

.ca-p__uverenja p:last-child {
	margin-bottom: 0;
}

/* ────────────────────────────────────────── harmonika i kategorija */

body.ca-proizvod .woocommerce-tabs .card-body,
body.ca-proizvod .woocommerce-tabs .card-body p,
body.ca-proizvod .woocommerce-tabs .card-body li {
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #776472;
}

body.ca-proizvod .woocommerce-tabs .card-title {
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #42273B;
}

body.ca-proizvod .product_meta,
body.ca-proizvod .ca-p__meta {
	margin: 20px 0 0;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #776472;
}

body.ca-proizvod .ca-p__meta a {
	color: #776472;
}

body.ca-proizvod .ca-p__meta a:hover {
	color: #42273B;
}

/* ──────────────────────────────────────────────────── slični komadi
 *
 * Pojas je Svetlo roze, ne siva: #F7F3F5 je boja papira skice i nije boja
 * sajta. Crte iznad nema — po pravilu sa početne, granicu pravi promena
 * pozadine.
 */

body.ca-proizvod.woocommerce .related.products {
	background: #FDECEF;
	margin: 48px 0 0;
	padding: 44px 32px 48px;
	border: 0;
}

body.ca-proizvod.woocommerce .related.products > h2 {
	margin: 0;
	font-family: "Crimson Text", Georgia, serif;
	font-weight: 400;
	font-size: 36px;
	line-height: 1.25;
	color: #42273B;
	text-align: center;
}

body.ca-proizvod.woocommerce .related.products ul.products {
	padding: 28px 0 0;
}

/* ────────────────────────────────────────────── „Jedini komad" uz dugme
 *
 * Kod unikata na mestu količine stoji ovo polje, pa oba slučaja imaju isti
 * raspored: levo uzano polje, desno dugme. Ranije je stajalo kao red iznad, gde
 * se slabo videlo, a dugme je bez para ostajalo čudne dužine.
 *
 * Izgled je namerno isti kao kutija sa količinom: ista visina, isti okvir, ista
 * zaobljenost. Nije dugme i ne klikće se, pa nema ni ruku pri prelasku.
 */
.ca-p__jedini {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 0 18px;
	border: 1px solid #E4E0E3;
	border-radius: 2px;
	background: #FFFFFF;
	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.2;
	white-space: nowrap;
}

/*
 * Stari red iznad dugmeta se gasi samo kod unikata — kod komada kojih ima više
 * od jednog („4 na zalihama") ostaje kako jeste.
 */
body.ca-proizvod.woocommerce div.product .stock.ca-p__unikat {
	display: none;
}

/* ────────────────────────────────────────────────────────── telefon
 *
 * Sve centrirano, isto pravilo kao na početnoj, osim harmonike i spiska
 * materijala. Karolina, 7. septembra: „na stranici proizvoda materijali gde ima
 * bullet pointa i dostava deo" ne treba centrirano. Harmonika stoji unutar
 * `.summary`, pa centriranje nasleđuje od njega; ovde se vraća levo.
 */

@media (max-width: 767px) {
	body.ca-proizvod.woocommerce div.product .summary {
		text-align: center;
	}

	body.ca-proizvod.woocommerce div.product .summary .woocommerce-tabs,
	body.ca-proizvod.woocommerce div.product .summary .ca-p__opis ul {
		text-align: left;
	}

	body.ca-proizvod.woocommerce div.product .product_title {
		font-size: 25px;
	}

	body.ca-proizvod.woocommerce div.product .summary .price,
	body.ca-proizvod.woocommerce div.product .summary .price ins {
		font-size: 20px;
	}

	body.ca-proizvod.woocommerce .related.products {
		padding: 32px 20px 36px;
	}

	body.ca-proizvod.woocommerce .related.products > h2 {
		font-size: 30px;
	}

}

/*
 * Ikonice uz uverenja: tanka linija u boji šljive, poravnate sa prvim redom
 * teksta. Nose značenje samo kao pratnja rečenici, pa su `aria-hidden` —
 * čitaču ekrana bi bile šum.
 */
.ca-p__uverenja svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: #42273B;
}

/*
 * Kartice u „Sličnim komadima" moraju jače od mreže u `zajedno.css`.
 * WooCommerce ovde drži širinu pravilom `.woocommerce div.product .related
 * ul.products li.product` — pet klasa i TRI elementa, dok naše opšte pravilo
 * ima pet klasa i dva. Poređenje ide prvo po klasama pa po elementima, i tu
 * naše gubi za jedan element; kartice su zato ostajale široke 32px.
 */
body.ca-proizvod.woocommerce div.product .related.products ul.products li.product.ca-k {
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
}

/*
 * Kupovina: količina i „Dodaj u korpu" u ISTOM redu, kao na skici. Dugme je
 * bilo pušteno u punu širinu ispod, pa je red delovao razvučeno. Ispod ovoga
 * ostaje mesto za „Dodaj u omiljene", koje se pravi posle prodavnice.
 */
body.ca-proizvod.woocommerce div.product form.cart {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin: 26px 0 0;
}

/*
 * WooCommerce ovom obrascu crta stari clearfix, `::before` i `::after` sa
 * `content: " "`. U flex rasporedu to nisu nevidljivi ostaci nego DVE prazne
 * ćelije, svaka sa svojim razmakom od 12px. Ishod: red kupovine je uvučen 12px
 * levo i 12px desno u odnosu na roze polje ispod, pa se dva bloka nisu
 * poklapala. Karolinina primedba, 5. septembra. Clearfix ovde ne služi ničemu,
 * jer se ništa ne plovi.
 */
body.ca-proizvod.woocommerce div.product form.cart::before,
body.ca-proizvod.woocommerce div.product form.cart::after {
	content: none;
}

/*
 * Kutija sa količinom i polje „Jedini komad" moraju biti ISTE širine, da red
 * izgleda isto kod unikata i kod komada kojih ima više. Zatečeno je bilo 150
 * prema 146, što se na oko vidi kao neporavnato.
 */
body.ca-proizvod.woocommerce div.product form.cart .quantity,
body.ca-proizvod.woocommerce div.product form.cart .ca-p__jedini {
	flex: 0 0 150px;
	width: 150px;
	margin: 0;
	float: none;
}

/*
 * Kod unikata WooCommerce ipak ispiše kutiju sa količinom, samo joj doda klasu
 * `hidden` i ostavi je prazne širine. Dok je bila široka 0 nije smetala; čim je
 * gornje pravilo svima dalo 150px, ta prazna kutija je odgurala dugme za 162px
 * udesno. Zato se kod unikata gasi u celosti.
 */
body.ca-proizvod.woocommerce div.product form.cart .quantity.hidden {
	display: none;
}

/*
 * „Pogledaj korpu" koji WooCommerce sam dopiše posle dodavanja.
 *
 * Od 5. septembra se sa ove strane dodaje bez osvežavanja, pa WooCommerce iza
 * dugmeta ubaci vezu `a.added_to_cart` — kao da je dugme sa kartice. U redu
 * kupovine, koji je flex, ta veza uzme 74px, dugme se skupi sa 384 na 298 i
 * natpis mu pređe u drugi red. Izmereno: visina skoči sa 45,6 na 66,3px.
 *
 * Gasi se jer je suvišna: brza korpa se otvori sama i u njoj već stoji dugme
 * „Pogledaj korpu". U spisku proizvoda istu vezu gasi sama tema.
 */
body.ca-proizvod.woocommerce div.product form.cart .added_to_cart {
	display: none;
}

body.ca-proizvod.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	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;
}

body.ca-proizvod.woocommerce div.product form.cart .single_add_to_cart_button:hover,
body.ca-proizvod.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible {
	background: #5C3A53;
	border-color: #5C3A53;
}

@media (max-width: 767px) {
	body.ca-proizvod.woocommerce div.product form.cart {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * U koloni je glavna osa uspravna, pa se `flex-basis: 150px` iz osnovnog
	 * pravila čita kao VISINA i polje postane kvadrat 150 x 150. Zato se ovde
	 * osnova vraća na `auto`, a 150px ostaje samo kao širina.
	 */
	body.ca-proizvod.woocommerce div.product form.cart .quantity,
	body.ca-proizvod.woocommerce div.product form.cart .ca-p__jedini {
		flex: 0 0 auto;
		align-self: center;
		height: 46px;
	}
}

/*
 * Donja crta harmonike.
 *
 * Jupiter X svakoj traci crta samo GORNJU crtu (`.card { border-top }`), a
 * donju nijednoj. Kutija je zato uvek otvorena na dnu; najviše se vidi kod
 * proizvoda bez poetskog opisa, gde postoji samo jedan odeljak („Dostava") pa
 * ostane visiti jedna crta. Karolinina primedba, 4. septembra — i to je stajalo
 * i na starom izgledu, nije nastalo sa ovim šablonom.
 *
 * Traži i `!important` i dugačak selektor: tema donju crtu gasi kao
 * `border-bottom-style: none`, pa kraće pravilo sa `!important` ne pomera ništa.
 * Ovo je drugo i poslednje takvo mesto u ovom poslu.
 */
body.ca-proizvod.woocommerce div.product .woocommerce-tabs.accordion .card:last-child {
	border-bottom: 1px solid #E4E0E3 !important;
}

/*
 * Korpica na dugmetu „Dodaj u korpu".
 *
 * Od 5. septembra 2026. to je Jupiter X glyph `\ea0f` iz fonta `jupiterx`, ISTI
 * crtež koji stoji u zaglavlju i uz „Nema proizvoda u korpi" u brzoj korpi.
 * Karolinino traženje: korpica se pojavljuje na više mesta i svuda treba da
 * bude ista.
 *
 * Do tada je ovde stajao naš tanki SVG (linija 1,5). Prvo je dogovoreno da
 * tanka ide svuda, pa je Karolina po viđenom presudila drugačije: „bolje se
 * vidi, tanka se jedva vidi." Puna je ostala.
 *
 * Kartice u prodavnici se NE diraju — tamo je dugme namerno bez ikonice,
 * njena odluka istog dana, i tema ih drži skrivenima. Vidi `zajedno.css`.
 */
body.ca-proizvod.woocommerce div.product form.cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

body.ca-proizvod.woocommerce div.product form.cart .single_add_to_cart_button::before {
	content: "\ea0f";
	font-family: jupiterx;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	/* Vidi isti komentar u `zajedno.css`: tema drži `display: none` na ovom
	   pseudoelementu, pa bez ovog reda korpice nema. */
	display: inline-block;
	flex: 0 0 auto;
	color: #FFFFFF;
}

/*
 * Komad u više boja (promenljiv proizvod), od 18. septembra 2026.
 *
 * WooCommerce obrazac za kupovinu tada nije jedan red nego tri dela: tabela sa
 * spiskom boja, blok koji se pojavi kad se boja izabere (rečenica o boji,
 * zaliha), pa red sa količinom i dugmetom. Pravilo `form.cart { display: flex }`
 * gore bi ta tri dela poređalo jedan pored drugog, pa se ovde obrazac vraća u
 * kolonu, a red kupovine (`.woocommerce-variation-add-to-cart`) dobija isti
 * raspored kakav inače ima ceo obrazac: količina 150px levo, dugme desno.
 * Pravila za `.quantity` i za dugme već važe, jer su i dalje unutar `form.cart`.
 */
body.ca-proizvod.woocommerce div.product form.cart.variations_form {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

body.ca-proizvod.woocommerce div.product form.cart.variations_form table.variations {
	width: 100%;
	margin: 0;
	border: 0;
}

body.ca-proizvod.woocommerce div.product form.cart.variations_form table.variations th,
body.ca-proizvod.woocommerce div.product form.cart.variations_form table.variations td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

/* Naziv spiska: UI token (Poppins 13, velika slova, razmak 1,6), šljiva. */
body.ca-proizvod.woocommerce div.product form.cart.variations_form table.variations th label {
	display: block;
	margin: 0 0 8px;
	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.6;
	color: #42273B;
}

/* Sam spisak: iste mere kao kutija sa količinom (46px), okvir „Linija". */
body.ca-proizvod.woocommerce div.product form.cart.variations_form table.variations select {
	width: 100%;
	max-width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 40px 0 14px;
	border: 1px solid #E4E0E3;
	border-radius: 2px;
	background-color: #FFFFFF;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #42273B;
}

body.ca-proizvod.woocommerce div.product form.cart.variations_form table.variations select:focus-visible {
	outline: 2px solid #D3A2B0;
	outline-offset: 1px;
}

/* Blok posle izbora boje: rečenica o boji u „Mekši tekst", zaliha ispod. */
body.ca-proizvod.woocommerce div.product form.cart.variations_form .single_variation_wrap {
	display: block;
	width: 100%;
}

body.ca-proizvod.woocommerce div.product form.cart.variations_form .woocommerce-variation.single_variation {
	margin: 14px 0 0;
}

body.ca-proizvod.woocommerce div.product form.cart.variations_form .woocommerce-variation-description p {
	margin: 0;
	font-family: Poppins, system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #776472;
}

body.ca-proizvod.woocommerce div.product form.cart.variations_form .woocommerce-variation-availability .stock {
	margin: 8px 0 0;
}

/* Red kupovine: isti kao `form.cart` kod prostog proizvoda. */
body.ca-proizvod.woocommerce div.product form.cart.variations_form .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin: 18px 0 0;
}

@media (max-width: 767px) {
	body.ca-proizvod.woocommerce div.product form.cart.variations_form .woocommerce-variation-add-to-cart {
		flex-direction: column;
		align-items: stretch;
	}
}