/*
 * Omiljeni komadi — Caroline Art.
 *
 * Ide na ceo sajt, ne samo na WooCommerce strane: srce stoji i u karuselu na
 * početnoj. Isto pravilo kao kod brze korpe.
 *
 * Boje i slova su iz globala, a brojevi su prepisani iz skice odobrene 4.
 * septembra 2026 (`build/skica-omiljeni.html`).
 */

/* ─────────────────────────────────────── srce na kartici */

/*
 * Bela kružna podloga je namerna: fotografije su i svetle i tamne, pa samo
 * srce bez podloge nestane na svetloj. Ugao gore desno je u kartici već
 * ostavljen praznim (kuka `ca_kartica_ugao`), pa se ništa ne pomera.
 */
.ca-k__slika .ca-srce {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 4px rgba(66, 39, 59, 0.14);
	color: var(--e-global-color-primary, #42273B);
	cursor: pointer;
	transition: transform 0.16s ease, color 0.16s ease;
}

/*
 * Ista stvar u karuselu na početnoj, gde karticu crta Jupiter X i našeg
 * `.ca-k__slika` nema. Srce tamo dopisuje `srce.js`, u omotač slike.
 *
 * `position: relative` je ovde potrebno jer je omotač zatečeno `static`. Druga
 * fotografija se time ne pomera: njen okvir je `.jupiterx-wc-loop-product-image`
 * unutra, koji je i sam pozicioniran.
 */
.jupiterx-wc-loop-product-image-wrapper {
	position: relative;
}

.jupiterx-wc-loop-product-image-wrapper > .ca-srce {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 4px rgba(66, 39, 59, 0.14);
	color: var(--e-global-color-primary, #42273B);
	cursor: pointer;
	transition: transform 0.16s ease, color 0.16s ease;
}

.ca-srce svg {
	display: block;
	width: 18px;
	height: 18px;
}

.ca-srce:hover {
	transform: scale(1.08);
	color: var(--e-global-color-secondary, #D3A2B0);
}

/* Sačuvano: srce se popuni i pređe u roze tamniju. */
.ca-srce[aria-pressed="true"] {
	color: var(--e-global-color-secondary, #D3A2B0);
}

.ca-srce[aria-pressed="true"] svg {
	fill: currentColor;
}

.ca-srce:focus-visible {
	outline: 2px solid var(--e-global-color-text, #776472);
	outline-offset: 2px;
}

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

	.ca-srce:hover {
		transform: none;
	}
}

/* ─────────────────────────── dugme na strani proizvoda */

/*
 * Okvir umesto pune boje: tiše je od „Dodaj u korpu", koje je puna šljiva.
 * Puna širina, jer stoji samo u svom redu ispod reda kupovine.
 *
 * Selektor je vezan za `body.ca-proizvod` namerno. Tema ume da pobedi pravilo
 * sa jednom klasom — dogodilo se tri puta u ovom poslu (vidi „CSS zamke iz
 * teme" u STANJE.md).
 */
body.ca-proizvod .ca-p__omiljeni {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	height: auto;
	margin: 12px 0 0;
	padding: 13px 20px;
	border: 1px solid var(--e-global-color-primary, #42273B);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--e-global-color-primary, #42273B);
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 1.69px;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease;
}

body.ca-proizvod .ca-p__omiljeni:hover {
	transform: none;
	background: var(--e-global-color-3ee2923d, #FDECEF);
	color: var(--e-global-color-primary, #42273B);
}

/*
 * Sačuvano: srce se popuni, ali dugme ostaje u šljivi. Roze tamnija je ovde
 * preslaba na belom, a natpis „U omiljenima" ionako kaže šta je stanje.
 */
body.ca-proizvod .ca-p__omiljeni[aria-pressed="true"] {
	color: var(--e-global-color-primary, #42273B);
}

/* Na telefonu je srce manje i bliže uglu, kao na skici. */
@media (max-width: 767px) {
	.ca-k__slika .ca-srce,
	.jupiterx-wc-loop-product-image-wrapper > .ca-srce {
		top: 7px;
		right: 7px;
		width: 30px;
		height: 30px;
	}

	.ca-srce svg {
		width: 16px;
		height: 16px;
	}
}

/* ─────────────────────────────────────── strana „Omiljeno" */

.ca-omiljeno {
	max-width: 760px;
	margin: 0 auto;
}

.ca-omiljeno__naslov {
	margin: 0 0 6px;
	font-family: "Crimson Text", Georgia, serif;
	font-size: 36px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--e-global-color-primary, #42273B);
}

@media (max-width: 767px) {
	.ca-omiljeno__naslov {
		font-size: 27px;
		text-align: center;
	}
}

.ca-omiljeno__glava {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--e-global-color-e510fa7, #E4E0E3);
}

.ca-omiljeno__koliko {
	color: var(--e-global-color-text, #776472);
	font-family: Poppins, sans-serif;
	font-size: 15px;
}

.ca-omiljeno__spisak {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ca-omiljeno__red {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--e-global-color-e510fa7, #E4E0E3);
}

.ca-omiljeno .ca-omiljeno__slika img {
	display: block;
	width: 78px;
	height: 78px;
	object-fit: cover;
}

.ca-omiljeno__podaci {
	flex: 1 1 auto;
	min-width: 0;
}

.ca-omiljeno__naziv {
	margin: 0 0 4px;
	font-family: "Crimson Text", Georgia, serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.4;
}

.ca-omiljeno__naziv a {
	color: var(--e-global-color-primary, #42273B);
	text-decoration: none;
}

.ca-omiljeno__cena {
	margin: 0;
	color: var(--e-global-color-text, #776472);
	font-family: Poppins, sans-serif;
	font-size: 15px;
}

/* Prodat komad ostaje na spisku, samo utihne. */
.ca-omiljeno__red--prodato .ca-omiljeno__slika img {
	filter: grayscale(0.7);
	opacity: 0.7;
}

.ca-omiljeno__red--prodato .ca-omiljeno__naziv a {
	color: var(--e-global-color-text, #776472);
}

.ca-omiljeno__prodato {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 8px;
	border: 1px solid #B3261E;
	color: #B3261E;
	font-family: Poppins, sans-serif;
	font-size: 13px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.ca-omiljeno__radnje {
	display: flex;
	align-items: center;
	gap: 12px;
}

/*
 * „Pogledaj korpu" koji WooCommerce sam dopiše iza dugmeta posle dodavanja.
 * Ista stvar kao na strani proizvoda (`proizvod.css`): u flex redu uzme svoj
 * deo i skupi dugme. Tamo je vezu gasila tema, ovde je „Omiljeno" obična
 * strana pa nema ko. Suvišna je: brza korpa se otvori sama i u njoj već stoji
 * „Pogledaj korpu".
 */
.ca-omiljeno .added_to_cart {
	display: none;
}

/*
 * Dugmad na spisku. `.ca-omiljeno__u-korpu` nosi i WooCommerceove klase
 * (`button add_to_cart_button`), pa mora da nadjača i njih — otud puna
 * deklaracija, ne samo boja.
 */
.ca-omiljeno .ca-omiljeno__u-korpu,
.ca-omiljeno .ca-omiljeno__slicno,
.ca-omiljeno .ca-omiljeno__dugme {
	display: inline-block;
	margin: 0;
	padding: 11px 18px;
	border: 1px solid var(--e-global-color-primary, #42273B);
	border-radius: 0;
	background: transparent;
	color: var(--e-global-color-primary, #42273B);
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 1.69px;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.ca-omiljeno .ca-omiljeno__u-korpu:hover,
.ca-omiljeno .ca-omiljeno__slicno:hover {
	background: var(--e-global-color-3ee2923d, #FDECEF);
	color: var(--e-global-color-primary, #42273B);
}

/*
 * Jedino dugme na praznoj strani je i jedini poziv, pa je puna šljiva.
 *
 * Prefiks `.ca-omiljeno` NIJE ukras: bez njega `.elementor-kit-3 a` daje vezi
 * boju šljive, pa je dugme bilo šljiva na šljivi — prazna kutija bez natpisa.
 * Izmereno 5. septembra 2026. Ista zamka kao kod kantice i sličice iznad.
 */
.ca-omiljeno .ca-omiljeno__dugme {
	background: var(--e-global-color-primary, #42273B);
	color: #FFFFFF;
}

.ca-omiljeno .ca-omiljeno__dugme:hover {
	background: var(--e-global-color-accent, #5C3A53);
	color: #FFFFFF;
}

/*
 * Kantica i sličica su vezane za `.ca-omiljeno` namerno, ne stoje same.
 * Tema tuče oba: `.elementor-kit-3 button` daje dugmetu punu šljivu i belu
 * ikonicu, a `.jupiterx-post img` postavlja `height: auto`, pa je sličica bila
 * 78×104 umesto 78×78. Oba su iste težine kao pravilo sa jednom klasom, a
 * učitavaju se kasnije. Izmereno 5. septembra 2026.
 */
.ca-omiljeno .ca-omiljeno__ukloni {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--e-global-color-text, #776472);
	cursor: pointer;
}

.ca-omiljeno .ca-omiljeno__ukloni:hover {
	color: var(--e-global-color-primary, #42273B);
}

/* ── prazna strana ── */

.ca-omiljeno__prazno {
	padding: 44px 20px 52px;
	text-align: center;
}

.ca-omiljeno__srce-veliko {
	color: var(--e-global-color-secondary, #D3A2B0);
}

.ca-omiljeno__prazno h2 {
	margin: 14px 0 8px;
	font-family: "Crimson Text", Georgia, serif;
	font-size: 28px;
	font-weight: 400;
}

.ca-omiljeno__prazno p {
	margin: 0 auto 22px;
	max-width: 420px;
	color: var(--e-global-color-text, #776472);
	font-family: Poppins, sans-serif;
	font-size: 17px;
	line-height: 1.7;
}

.ca-omiljeno__cekaj,
.ca-omiljeno__greska {
	padding: 30px 0;
	color: var(--e-global-color-text, #776472);
	font-family: Poppins, sans-serif;
	font-size: 15px;
	text-align: center;
}

/*
 * Telefon: sličica i podaci gore, radnje u svom redu ispod. Sve centrirano bi
 * ovde bilo pogrešno — red je spisak, ne sekcija; poravnanje iz odluke od 1.
 * septembra važi za sekcije početne.
 */
@media (max-width: 767px) {
	.ca-omiljeno__red {
		flex-wrap: wrap;
		gap: 12px;
	}

	.ca-omiljeno__radnje {
		flex: 1 0 100%;
		justify-content: flex-end;
	}

	.ca-omiljeno__slika img {
		width: 64px;
		height: 64px;
	}
}

/* ────────────────────────── stavka „Omiljeno" u fioci menija */

/*
 * Na desktopu srce stoji u zaglavlju, pa je stavka suvišna. Granica 1024px je
 * ista na kojoj Raven prelazi na fioku.
 */
@media (min-width: 1025px) {
	.ca-meni-omiljeno {
		display: none !important;
	}
}

/*
 * Linija iznad odvaja kupčevu listu od stranica sajta: to nije još jedna
 * stranica u nizu, nego njegova lista. Odluka od 4. septembra 2026.
 */
@media (max-width: 1024px) {
	.ca-meni-omiljeno {
		margin-top: 10px;
		border-top: 1px solid var(--e-global-color-e510fa7, #E4E0E3);
		padding-top: 10px;
	}
}

.ca-omiljeni-broj {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	margin-left: 8px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--e-global-color-secondary, #D3A2B0);
	color: #FFFFFF;
	font-family: Poppins, sans-serif;
	font-size: 13px;
	line-height: 1;
}

/* ─────────────────────────────── srce u zaglavlju na desktopu */

/*
 * Vidi se SAMO kad je dodatak uključen. Sama veza stoji u šablonu zaglavlja, pa
 * je dobija i kupac kome su omiljeni isključeni; `_dodatni-css.php` je zato
 * krije svima, a ovde se pokazuje pod klasom sa <body>.
 */
.ca-omiljeni-radi .ca-zaglavlje-omiljeni {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--e-global-color-primary, #42273B);
	line-height: 1;
}

.ca-omiljeni-radi .ca-zaglavlje-omiljeni:hover {
	color: var(--e-global-color-secondary, #D3A2B0);
}

/*
 * Broj stoji u uglu ikonice, kao kod korpice, ne pored nje: pored bi razmakao
 * ceo niz lupa, srce, kesica čim se prvi komad sačuva.
 */
.ca-omiljeni-radi .ca-zaglavlje-omiljeni .ca-omiljeni-broj {
	position: absolute;
	top: -7px;
	right: -10px;
	margin: 0;
}

/* Na telefonu zaglavlje ostaje netaknuto. */
@media (max-width: 1024px) {
	.ca-omiljeni-radi .ca-zaglavlje-omiljeni {
		display: none;
	}
}

/* ───────────────────── srce na slici: mirno, pod mišem, po kliku

   Karolinina primedba, 5. septembra 2026: „pre nego što klikneš na srce krug i
   srce je belo, kad samo pređeš iznad i krug i srce se menja u šljivu sa belim
   okvirom srca, a kad klikneš krug ostaje šljiva a srce belo."

   Uzrok nije naš CSS nego temin: `.elementor-kit-3 button:hover, button:focus`
   daje dugmetu punu podlogu i bela slova, i to sa težinom 0-2-1 — jačom od
   našeg pravila za mirno stanje. Zato krug pod mišem postane šljiva, a posle
   klika i OSTANE takav: dugme zadrži fokus.

   Ova pravila su zato vezana za tri klase (0-3-0), da tuku i temu. Odnose se
   samo na srce NA SLICI; dugme „Dodaj u omiljene" na strani proizvoda ima svoj
   izgled, sa okvirom i providnom podlogom, i ovde se ne dira.

   Kako treba: krug je uvek beo, srce je šljiva dok nije sačuvano i roze kad
   jeste. Ništa drugo se ne menja. */
.ca-omiljeni-radi .ca-k__slika .ca-srce,
.ca-omiljeni-radi .ca-k__slika .ca-srce:hover,
.ca-omiljeni-radi .ca-k__slika .ca-srce:focus,
.ca-omiljeni-radi .ca-k__slika .ca-srce:active,
.ca-omiljeni-radi .jupiterx-wc-loop-product-image-wrapper > .ca-srce,
.ca-omiljeni-radi .jupiterx-wc-loop-product-image-wrapper > .ca-srce:hover,
.ca-omiljeni-radi .jupiterx-wc-loop-product-image-wrapper > .ca-srce:focus,
.ca-omiljeni-radi .jupiterx-wc-loop-product-image-wrapper > .ca-srce:active {
	border: 0;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 4px rgba(66, 39, 59, 0.14);
	color: var(--e-global-color-primary, #42273B);
}

/* Pod mišem se menja SAMO srce, ne krug. */
.ca-omiljeni-radi .ca-k__slika .ca-srce:hover,
.ca-omiljeni-radi .jupiterx-wc-loop-product-image-wrapper > .ca-srce:hover {
	color: var(--e-global-color-secondary, #D3A2B0);
}

/* Sačuvano: srce roze i popunjeno, u svakom stanju. */
.ca-omiljeni-radi .ca-k__slika .ca-srce[aria-pressed="true"],
.ca-omiljeni-radi .ca-k__slika .ca-srce[aria-pressed="true"]:hover,
.ca-omiljeni-radi .ca-k__slika .ca-srce[aria-pressed="true"]:focus,
.ca-omiljeni-radi .jupiterx-wc-loop-product-image-wrapper > .ca-srce[aria-pressed="true"],
.ca-omiljeni-radi .jupiterx-wc-loop-product-image-wrapper > .ca-srce[aria-pressed="true"]:hover,
.ca-omiljeni-radi .jupiterx-wc-loop-product-image-wrapper > .ca-srce[aria-pressed="true"]:focus {
	color: var(--e-global-color-secondary, #D3A2B0);
}

/* Okvir za tastaturu ostaje, ali samo za tastaturu: `:focus-visible` se ne pali
   na klik mišem, pa posle klika nema prstena oko kruga. */
.ca-omiljeni-radi .ca-srce:focus {
	outline: none;
}

.ca-omiljeni-radi .ca-srce:focus-visible {
	outline: 2px solid var(--e-global-color-text, #776472);
	outline-offset: 2px;
}

/* ───────── dugme „Dodaj u omiljene": menja se samo srce i natpis

   Karolinina primedba, 5. septembra 2026: „na strani proizvoda ne sme da se
   menja dugme u šljivu boju, samo srce i tekst. Dugme treba da je belo sa belim
   srcem, kad se klikne dugme belo i srce roze i tekst se menja u ,U omiljenima'
   u istoj boji."

   Isti uzrok kao kod srca na kartici: `.elementor-kit-3 button:hover, :focus`
   daje dugmetu punu podlogu, i to sa težinom jačom od pravila sa dve klase. Pod
   mišem je zato dugme postajalo šljiva, a posle klika i ostajalo takvo, jer
   zadrži fokus.

   Podloga je bela u SVA četiri stanja. Menjaju se samo boja srca i natpis. */
.ca-omiljeni-radi body.ca-proizvod .ca-p__omiljeni,
body.ca-proizvod.ca-omiljeni-radi .ca-p__omiljeni,
body.ca-proizvod.ca-omiljeni-radi .ca-p__omiljeni:hover,
body.ca-proizvod.ca-omiljeni-radi .ca-p__omiljeni:focus,
body.ca-proizvod.ca-omiljeni-radi .ca-p__omiljeni:active {
	border: 1px solid var(--e-global-color-primary, #42273B);
	background: #FFFFFF;
	box-shadow: none;
	color: var(--e-global-color-primary, #42273B);
}

/* Pod mišem se javi samo srce i natpis, kao i na kartici. */
body.ca-proizvod.ca-omiljeni-radi .ca-p__omiljeni:hover {
	color: var(--e-global-color-secondary, #D3A2B0);
}

/* Sačuvano: srce roze i popunjeno, natpis „U omiljenima" u istoj boji.
   Okvir i podloga se ne diraju. */
body.ca-proizvod.ca-omiljeni-radi .ca-p__omiljeni[aria-pressed="true"],
body.ca-proizvod.ca-omiljeni-radi .ca-p__omiljeni[aria-pressed="true"]:hover,
body.ca-proizvod.ca-omiljeni-radi .ca-p__omiljeni[aria-pressed="true"]:focus {
	color: var(--e-global-color-secondary, #D3A2B0);
}

body.ca-proizvod.ca-omiljeni-radi .ca-p__omiljeni:focus {
	outline: none;
}

body.ca-proizvod.ca-omiljeni-radi .ca-p__omiljeni:focus-visible {
	outline: 2px solid var(--e-global-color-text, #776472);
	outline-offset: 2px;
}

/* ═════ Karolinine primedbe sa drugog pregleda, 5. septembra 2026 ═════ */

/* 1 · Broj uz srce u zaglavlju: isto kao kod korpice.

   Bio je roze krug u uglu ikonice, po ugledu na brojače iz drugih prodavnica.
   Karolinina primedba: „ikonica u zaglavlju nije u skladu sa korpom, ovako je broj
   prevelik na srcu, ni ne vidi se srce od broja."

   Korpica broj ispisuje kao OBIČAN TEKST pored ikonice: `.raven-shopping-cart-
   count`, 14px, šljiva, bez podloge i bez pozicioniranja. Srce sada radi isto,
   pa dve ikonice stoje u istom jeziku.

   Broj u FIOCI MENIJA ostaje krug — tamo stoji uz naziv „Omiljeno", ne uz
   ikonicu, i Karolina je za njega rekla da je u redu. */
.ca-omiljeni-radi .ca-zaglavlje-omiljeni {
	gap: 6px;
}

.ca-omiljeni-radi .ca-zaglavlje-omiljeni .ca-omiljeni-broj {
	position: static;
	top: auto;
	right: auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	/* Boju NE postavlja: nasleđuje je od veze, pa pod mišem pređe u roze
	   zajedno sa srcem. Zakucana šljiva je ostajala dok srce menja boju —
	   Karolinina primedba, 6. septembra 2026. */
	color: inherit;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	line-height: 1;
}

/* 2 · Naziv proizvoda na strani „Omiljeno".

   Tema je davala svoj `h3` (22px, na telefonu i više), pa se naziv na telefonu
   prelamao u tri reda i red se raspadao. Prefiks `.ca-omiljeno` je tu da bi
   pravilo uopšte imalo dejstva.

   19px je korak „Naslov — proizvod" iz skale, isti onaj kojim se nazivi
   ispisuju na karticama u prodavnici. Na telefonu 17px, jer red ima i sličicu
   i dugmad pored sebe. */
.ca-omiljeno .ca-omiljeno__naziv,
.ca-omiljeno .ca-omiljeno__naziv a {
	font-family: "Crimson Text", Georgia, serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.35;
}

@media (max-width: 767px) {
	.ca-omiljeno .ca-omiljeno__naziv,
	.ca-omiljeno .ca-omiljeno__naziv a {
		font-size: 17px;
	}
}

/* 3 · Bez treperenja boje pri kliku.

   Karolinina primedba: „da se klikne na srce, na milisekund srce bude šljiva i
   onda je roze." Nije bilo namerno: `transition` je stajao i na boji, pa je
   srce pri svakoj promeni prelazilo iz šljive u roze preko međuboja. Prelaz
   ostaje samo na uvećanju pod mišem, gde ima smisla. */
.ca-omiljeni-radi .ca-srce {
	transition: transform 0.16s ease;
}

/* 4 · Srce u zaglavlju je PUNO, kao kesica pored njega.

   Karolinina primedba: „samo puno srce kao korpa." Kesica je glyph iz fonta i
   puna je, pa je srce kao tanka kontura pored nje izgledalo kao da nije iz
   istog kompleta.

   Srca NA KARTICAMA ostaju kontura dok komad nije sačuvan — tamo prazno srce
   nosi značenje („nije sačuvano"), a u zaglavlju je srce samo oznaka za spisak. */
.ca-omiljeni-radi .ca-zaglavlje-omiljeni svg {
	fill: currentColor;
	stroke: none;
}

/* 5 · Srce u zaglavlju u istoj visini kao korpica.

   Karolinina primedba: „srce nije u istoj visini kao korpa, a ni broj pored
   srca." Izmereno: sredina korpice i pretrage je na 107,7px, a srca na 103,3 —
   4,4px više.

   Uzrok: Elementorov omotač HTML widgeta je `display: block`, pa naša veza
   (`inline-flex`, visoka 20px) sedi uz njegov vrh umesto po sredini. Widget
   korpe unutra ima svoj flex omotač, pa se centrira sam. */
.ca-omiljeni-radi .elementor-element-cah0211 > .elementor-widget-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
}

/* 6 · Telefon, strana „Omiljeno": dugme i kantica idu uz sliku.

   Karolinina primedba: „na mobilu na strani omiljeni dugme korpa i kantica
   treba da budu u visini slike a ne ispod naslova." Do sada su na telefonu
   padali u svoj red ispod celog reda.

   Red ostaje u jednoj liniji: sličica levo, naziv i cena po sredini, dugmad
   desno uz sam vrh — u visini sličice. Dugme dobija uži pojas da sve troje
   stane u 390px, ali slova i razmak ostaju iz sistema (13px, 1,69). */
@media (max-width: 767px) {
	.ca-omiljeno__red {
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 10px;
	}

	.ca-omiljeno__radnje {
		flex: 0 0 auto;
		align-items: center;
		gap: 8px;
	}

	.ca-omiljeno .ca-omiljeno__u-korpu,
	.ca-omiljeno .ca-omiljeno__slicno {
		padding: 9px 11px;
	}

	.ca-omiljeno__podaci {
		flex: 1 1 auto;
	}
}

/* 7 · Telefon: „U korpu" je samo natpis, bez okvira.

   Karolinina primedba: „na mobilu dugme korpa prevelika, gde je duže ime slika
   se skuplja, stavi samo tekst u korpu bez ovolikog okvira."

   Okvir i pojas oko natpisa uzimali su oko 40px širine reda. Kad je naziv duži,
   red je to nadoknađivao jedinim delom koji je smeo da se skupi — sličicom, pa
   su slike bile različite širine iz reda u red.

   Zato: na telefonu natpis stoji sam, bez okvira i bez pojasa, a sličica dobija
   `flex: 0 0 auto` i više se ne skuplja ni pod kojim nazivom. Na desktopu okvir
   ostaje, tamo ima mesta. */
@media (max-width: 767px) {
	.ca-omiljeno .ca-omiljeno__u-korpu,
	.ca-omiljeno .ca-omiljeno__slicno {
		border: 0;
		padding: 0;
		background: none;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.ca-omiljeno .ca-omiljeno__u-korpu:hover,
	.ca-omiljeno .ca-omiljeno__slicno:hover {
		background: none;
		color: var(--e-global-color-secondary, #D3A2B0);
	}

	.ca-omiljeno__slika {
		flex: 0 0 auto;
	}

	.ca-omiljeno__radnje {
		gap: 12px;
	}
}

/* 8 · „U korpi" — tiha oznaka umesto dugmeta.

   Komad se sa spiska ne sklanja sam kad se doda u korpu: omiljeni su kupčev
   spisak, korpa je nešto drugo, i sklanja ga on kad hoće. Ali red ne sme da
   izgleda isto pre i posle dodavanja, pa dugme ustupi mesto oznaci. Nije veza i
   ne klikće se. */
.ca-omiljeno .ca-omiljeno__u-korpi {
	display: inline-block;
	padding: 11px 0;
	color: var(--e-global-color-text, #776472);
	font-family: Poppins, sans-serif;
	font-size: 13px;
	letter-spacing: 1.69px;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.ca-omiljeno .ca-omiljeno__u-korpi {
		padding: 0;
	}
}

/* 9 · Kantica pod mišem: bez podloge.

   Karolinina primedba: „kantica na hover ima šljiva box na sebi." Isti uzrok
   kao kod srca i kod dugmeta na strani proizvoda — `.elementor-kit-3
   button:hover` je jači od pravila sa dve klase, pa je kantici davao punu
   podlogu. Ovde su navedena i mirna i sva ostala stanja, da se ne vraća po
   treći put. */
.ca-omiljeno .ca-omiljeno__ukloni,
.ca-omiljeno .ca-omiljeno__ukloni:hover,
.ca-omiljeno .ca-omiljeno__ukloni:focus,
.ca-omiljeno .ca-omiljeno__ukloni:active {
	border: 0;
	background: none;
	box-shadow: none;
}

.ca-omiljeno .ca-omiljeno__ukloni:hover,
.ca-omiljeno .ca-omiljeno__ukloni:focus {
	color: var(--e-global-color-primary, #42273B);
}

.ca-omiljeno .ca-omiljeno__ukloni:focus {
	outline: none;
}

.ca-omiljeno .ca-omiljeno__ukloni:focus-visible {
	outline: 2px solid var(--e-global-color-text, #776472);
	outline-offset: 2px;
}

/* 10 · Dugmad sa okvirom pod mišem: podloga se ne menja.

   Karolinino pitanje: „roze hover je i na dugmetu korpa u omiljenima na
   desktopu, namerno ili opet greška." Bilo je namerno — svetlo roze je iz
   palete — ali pogrešno, jer se kosi sa pravilom koje je istog dana postavila
   za dugme „Dodaj u omiljene": dugme sa okvirom ostaje belo, menja se samo
   natpis.

   Otud isto i ovde: podloga miruje, pod mišem se javi samo natpis i okvir.

   Puno dugme na praznoj strani se ne dira — ono je primarni poziv i ponaša se
   kao ostala puna dugmad na sajtu. */
.ca-omiljeno .ca-omiljeno__u-korpu:hover,
.ca-omiljeno .ca-omiljeno__u-korpu:focus,
.ca-omiljeno .ca-omiljeno__slicno:hover,
.ca-omiljeno .ca-omiljeno__slicno:focus {
	background: transparent;
	border-color: var(--e-global-color-secondary, #D3A2B0);
	color: var(--e-global-color-secondary, #D3A2B0);
}

/* Na telefonu ta dugmad nemaju okvir, pa se menja samo boja natpisa. */
@media (max-width: 767px) {
	.ca-omiljeno .ca-omiljeno__u-korpu:hover,
	.ca-omiljeno .ca-omiljeno__u-korpu:focus,
	.ca-omiljeno .ca-omiljeno__slicno:hover,
	.ca-omiljeno .ca-omiljeno__slicno:focus {
		border-color: transparent;
	}
}