/*
 * WooCommerce van korpe — Caroline Art
 *
 * Učitava se na CELOM sajtu, ne samo na korpi. Pokriva dve stvari koje kupac
 * vidi na strani proizvoda i u prodavnici:
 *
 *   1. obaveštenja („… je dodat u tvoju korpu", „Ne možeš da dodaš još jedan …")
 *   2. polje za količinu sa dugmićima − i +
 *
 * Oba su do 3. septembra 2026. nosila fabrički izgled, van palete.
 *
 * ZAŠTO POSTOJI
 *
 * Zatečeno je bilo WooCommerceovo fabričko: uspeh maslinasto zelen, greška
 * crvena sa plavim dugmetom, a dugme pri pritisku dobija Bootstrapov plavi
 * okvir iz teme. Nijedna od tih boja nije iz palete sajta. Karolinina primedba
 * od 3. septembra 2026.
 *
 * ZAŠTO NE KORISTI PROMENLJIVE
 *
 * Promenljive (`--ca-sljiva` i ostale) žive u `korpa.css`, koji se učitava samo
 * na korpi i naplati. Ovaj list ide svuda, pa boje moraju biti upisane.
 * Vrednosti su iz tabele tokena u CLAUDE.md — ako se paleta menja, menja se i
 * ovde.
 *
 * ODNOS PREMA KORPI
 *
 * Na korpi ista pravila već postoje u `korpa.css`, vezana za `.woocommerce-cart`,
 * pa su tamo specifičnija i pobeđuju. Izgled je isti, tako da se ne vidi šav.
 */

/* ------------------------------------------------------------- sama kutija */

/*
 * RASPORED: red koji ume da se prelomi, ne „float".
 *
 * WooCommerce dugme („Pregled korpe") pušta kao `float: right`, a kutiju oko
 * njega drži nevidljivi `::after` (clearfix). Taj isti `::after` crta i zelenu
 * kvačicu, pa je ovde ugašen — i dugme je počelo da ispada iz kutije čim tekst
 * pređe u dva reda. Karolinina slika sa telefona, 3. septembar.
 *
 * Zato ovde nema floata: kutija je flex red, tekst je prvi, dugme drugo
 * (`order`), a kad nema mesta prelome se jedno ispod drugog. Tekst je
 * bezimeni flex element pa mu red ostaje 0 — dugme se zato gura na kraj.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: 0 0 22px !important;
	padding: 14px 20px !important;
	border: 1px solid #C6BEC4 !important;
	border-top: 1px solid #C6BEC4 !important;
	border-radius: 2px;
	background: #FDECEF !important;
	font-family: "Poppins", sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	color: #42273B !important;
	list-style: none !important;
}

/* Kvačica i uzvičnik dolaze iz WooCommerceovog fonta ikonica. Taj font se na
   svim stranama ne učitava, pa se umeju iscrtati kao prazan kvadratić — a i
   sa fontom su maslinasto zeleni. */
.woocommerce-message::before,
.woocommerce-message::after,
.woocommerce-info::before,
.woocommerce-info::after,
.woocommerce-error::before,
.woocommerce-error::after {
	content: none !important;
	display: none !important;
}

.woocommerce-message p,
.woocommerce-message li,
.woocommerce-info p,
.woocommerce-info li,
.woocommerce-error p,
.woocommerce-error li {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	list-style: none;
}

/* Greška ostaje jedina crvena stvar na strani — zato je i vidljiva. Bela
   podloga, ne roze: crveno slovo na roze podlozi se teže čita. */
.woocommerce-error {
	border-color: #B3261E !important;
	background: #fff !important;
	color: #B3261E !important;
}

/* ---------------------------------------------------- dugme u obaveštenju */

/* „Pregled korpe" i slična dugmad bila su plava, iz teme. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	/* Bez floata — vidi objašnjenje uz kutiju. `order: 2` ga drži iza teksta,
	   koji je bezimeni flex element sa redom 0. */
	float: none !important;
	order: 2;
	flex: 0 0 auto;
	display: inline-block;
	/* `auto` sleva gura dugme uz desnu ivicu kutije — tamo je stajalo i dok je
	   bilo na floatu, pa se na širokom ekranu ništa ne menja. */
	margin: 0 0 0 auto !important;
	padding: 10px 16px !important;
	border: 1px solid #42273B !important;
	border-radius: 2px !important;
	background: transparent !important;
	color: #42273B !important;
	font-family: "Poppins", sans-serif !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 1.69px !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
	background: #42273B !important;
	color: #fff !important;
}

/* Pri pritisku je tema davala Bootstrapov plavi okvir i plavu senku. Miš ne
   dobija ništa, tastatura dobija tih sivi trag — isto kao polja na naplati. */
.woocommerce-message .button:focus,
.woocommerce-info .button:focus,
.woocommerce-error .button:focus {
	background: #42273B !important;
	border-color: #42273B !important;
	color: #fff !important;
	outline: none !important;
	box-shadow: none !important;
}

.woocommerce-message .button:focus-visible,
.woocommerce-info .button:focus-visible,
.woocommerce-error .button:focus-visible {
	outline: 2px solid #776472 !important;
	outline-offset: 2px !important;
}

/* Veza u tekstu poruke (npr. naziv proizvoda). */
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
	color: inherit;
	text-decoration: underline;
}

/* ----------------------------------------------------------------- telefon */

@media (max-width: 600px) {
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		padding: 13px 16px !important;
		font-size: 15px !important;
	}

	/* Dugme ide u svoj red, preko cele širine — pored teksta na uskom ekranu
	   ostaje bez prostora. */
	.woocommerce-message .button,
	.woocommerce-info .button,
	.woocommerce-error .button {
		display: block;
		width: 100%;
		margin: 2px 0 0 !important;
		text-align: center;
	}
}

/* ==========================================================================
   ZALIHA NA STRANI PROIZVODA

   „1 na zalihama" stoji kod unikata — kod komada kojih ima samo jedan.
   WooCommerce joj daje maslinasto `#958e09`, boju koje na sajtu nema nigde
   drugde. Karolinina primedba, 3. septembar.

   Podatak je sporedan, ne upozorenje, pa ide u mekši tekst iz palete. Kad
   proizvoda nema, ostaje jedina crvena na strani — ista koja se koristi za
   greške.
   ========================================================================== */

.woocommerce div.product p.stock,
.woocommerce div.product .stock {
	font-family: "Poppins", sans-serif !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: #776472 !important;
}

.woocommerce div.product p.stock.out-of-stock,
.woocommerce div.product .stock.out-of-stock {
	color: #B3261E !important;
}

/* ==========================================================================
   KOLIČINA NA STRANI PROIZVODA

   Dugmiće − i + crta dodatak `smntcs-woocommerce-quantity-buttons`, a izgled
   im je davala tema. Mereno 3. septembra: dugmići 60×26,5px, polje sa brojem
   60×44,3px, i dugmići stoje 9px niže od polja — tri kutije različite visine
   u istom redu. Okvir je bio Bootstrapovo sivo #CED4DA sa uglom od 4px, a pri
   pritisku je dolazio plavi okvir sa senkom.

   Ovde sve troje postaje jedna celina iste visine, u paleti, kao količina u
   korpi. Prikazuje se samo kod proizvoda kojih može više — unikati se prodaju
   pojedinačno pa tamo polja i nema.
   ========================================================================== */

/*
 * `:not(.hidden)` je dopisano 5. septembra. Kod unikata WooCommerce ipak
 * ispiše kutiju sa količinom, samo joj doda klasu `hidden`; bez ovog izuzetka
 * `display: inline-flex !important` ju je vraćao na videlo kao praznu kutiju.
 * Dok je bila široke nule niko je nije primetio, ali je ostajala u redu i
 * zauzimala svoj razmak.
 */
.woocommerce div.product form.cart .quantity:not(.hidden) {
	display: inline-flex !important;
	align-items: stretch;
	width: auto !important;
	vertical-align: middle;
}

.woocommerce div.product form.cart .quantity input.minus,
.woocommerce div.product form.cart .quantity input.plus,
.woocommerce div.product form.cart .quantity input.qty {
	height: 44px !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid #C6BEC4 !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: #42273B !important;
	font-family: "Poppins", sans-serif !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	box-shadow: none !important;
}

/* Kvadratni dugmići, sa uglom samo na spoljnim ivicama — kao jedno polje. */
.woocommerce div.product form.cart .quantity input.minus,
.woocommerce div.product form.cart .quantity input.plus {
	width: 44px !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce div.product form.cart .quantity input.minus {
	border-radius: 2px 0 0 2px !important;
}

.woocommerce div.product form.cart .quantity input.plus {
	border-radius: 0 2px 2px 0 !important;
}

/* Broj u sredini: bez dvostruke crte prema dugmićima. */
.woocommerce div.product form.cart .quantity input.qty {
	width: 62px !important;
	border-left: 0 !important;
	border-right: 0 !important;
	text-align: center;
}

.woocommerce div.product form.cart .quantity input.minus:hover,
.woocommerce div.product form.cart .quantity input.plus:hover {
	background: #FDECEF !important;
}

/* Pri pritisku je tema davala plavi okvir (#80bdff) i plavu senku. Miš sada ne
   dobija ništa, tastatura dobija tih sivi trag — isto kao u korpi. */
.woocommerce div.product form.cart .quantity input:focus {
	border-color: #C6BEC4 !important;
	outline: none !important;
	box-shadow: none !important;
}

.woocommerce div.product form.cart .quantity input:focus-visible {
	outline: 2px solid #776472 !important;
	outline-offset: 1px !important;
}

/* ==========================================================================
   BRZA KORPA — panel koji iskliza sa desne strane

   Uključena 4. septembra 2026. Panel je Jupiter X-ov, pa dolazi sa njegovim
   fabričkim izgledom: dugmad crna `#232323`, slova 16px, bez razmaka —
   nijedno nije iz palete. Ovde dobijaju isti izgled kao dugmad na korpi:
   gornje („Pogledaj korpu") sa okvirom, donje („Nastavi na plaćanje") puno.

   Boje su upisane, ne preko promenljivih — ovaj list ide na ceo sajt, a
   promenljive žive u `korpa.css`. Vidi objašnjenje na vrhu datoteke.
   ========================================================================== */

/* Sačuvana širina panela je 400px, bez pravila za telefon — na ekranu od
   390px bio bi širi od samog ekrana.

   Pojas koji ostaje sa strane bio je 92vw, pa je na telefonu od 394px iza
   panela virilo 31px strane. Karolina, 5. septembra: „može da bude još šire
   malo, recimo šta se sad vidi od stranice iza da bude upola manje." Otud 96vw
   ispod 768px: viri 16px, taman da se vidi da strana postoji.

   Na tom pojasu se od istog dana više NE zatvara tapkanjem (vidi skript u
   `_mu-korpa.php`), pa mu i ne treba širina za prst. */
.jupiterx-cart-quick-view {
	max-width: 92vw !important;
	/*
	 * Panel je fabrički na sloju 11000, ali kolona sa menijem u zaglavlju ima
	 * upisano 12000 — pa je na telefonu ikonica hamburgera ostajala iscrtana
	 * PREKO otvorenog panela, u njegovom gornjem levom uglu. Karolinina slika,
	 * 4. septembar. Panel ide jedan sloj iznad menija.
	 */
	z-index: 12001 !important;
}

.jupiterx-cart-quick-view .woocommerce-mini-cart__buttons a.button,
.jupiterx-cart-quick-view .woocommerce-mini-cart__buttons a.button:visited {
	display: block;
	width: 100%;
	margin: 0 0 10px !important;
	padding: 13px 16px !important;
	border: 1px solid #42273B !important;
	border-radius: 2px !important;
	background: #fff !important;
	color: #42273B !important;
	font-family: "Poppins", sans-serif !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 1.69px !important;
	/* Fabrički je stajalo `capitalize`, pa je isti natpis na jednom mestu
	   izlazio kao „Pregled Korpe", a na drugom kao „Pregled korpe". */
	text-transform: uppercase !important;
	text-align: center;
	text-decoration: none !important;
	box-shadow: none !important;
}

.jupiterx-cart-quick-view .woocommerce-mini-cart__buttons a.button.checkout,
.jupiterx-cart-quick-view .woocommerce-mini-cart__buttons a.button.checkout:visited {
	margin-bottom: 0 !important;
	background: #42273B !important;
	color: #fff !important;
}

.jupiterx-cart-quick-view .woocommerce-mini-cart__buttons a.button:hover {
	background: #42273B !important;
	color: #fff !important;
}

.jupiterx-cart-quick-view .woocommerce-mini-cart__buttons a.button.checkout:hover {
	background: #5C3A53 !important;
	border-color: #5C3A53 !important;
}

.jupiterx-cart-quick-view .woocommerce-mini-cart__buttons a.button:focus {
	outline: none !important;
	box-shadow: none !important;
}

.jupiterx-cart-quick-view .woocommerce-mini-cart__buttons a.button:focus-visible {
	outline: 2px solid #776472 !important;
	outline-offset: 2px !important;
}

/* Redosled i težina, izmena od 5. septembra 2026.

   Karolina: „Nastavi na plaćanje treba da bude gore gde je sad Pogledaj korpu, a
   Pogledaj korpu da umesto dugmeta bude samo podvučen tekst ispod, u nekoj
   svetlijoj boji da ne privlači pažnju, samo da bude tamo kao opcija."

   Dva dugmeta iste težine su tražila od kupca da bira; sada je jedan potez
   glavni, a drugi tiha mogućnost. Redosled se menja u CSS-u (`order`), ne u
   predlošku: WooCommerce ih ispisuje kukom, pa bi menjanje redosleda u kodu
   značilo i preuzimanje te kuke. */

.jupiterx-cart-quick-view .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* „Nastavi na plaćanje" je jedini glavni potez u panelu, pa nosi i težinu
   glavnog dugmeta. Karolina, 5. septembar: „malo deblje, recimo kao na stranici
   proizvoda dodaj u korpu." Otud isti prored (1.2) i viši razmak: mereno, dugme
   na strani proizvoda je 45,6px, a ovo je bilo 41. */
.jupiterx-cart-quick-view .woocommerce-mini-cart__buttons a.button.checkout {
	order: -1;
	padding: 14px 16px !important;
	line-height: 1.2 !important;
}

/* „Pogledaj korpu": običan podvučen tekst u boji „Mekši tekst". */
.jupiterx-cart-quick-view .woocommerce-mini-cart__buttons a.button:not(.checkout),
.jupiterx-cart-quick-view .woocommerce-mini-cart__buttons a.button:not(.checkout):visited {
	display: block;
	width: auto;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: #776472 !important;
	font-size: 14px !important;
	letter-spacing: normal !important;
	line-height: 1.6 !important;
	text-transform: none !important;
	text-decoration: underline !important;
}

.jupiterx-cart-quick-view .woocommerce-mini-cart__buttons a.button:not(.checkout):hover,
.jupiterx-cart-quick-view .woocommerce-mini-cart__buttons a.button:not(.checkout):focus-visible {
	background: none !important;
	color: #42273B !important;
	text-decoration: underline !important;
}

/* Međuiznos i cena pored njega na telefonu.

   Mereno 4. septembra: i red sa međuiznosom i traka „Još X do besplatne
   dostave" bili su isto, 14px Poppins — ista porodica, ista visina slova.
   Karolina ih je ipak videla kao sitnije, pa idu jedan korak naviše. */
@media (max-width: 767px) {
	.jupiterx-cart-quick-view .woocommerce-mini-cart__total,
	.jupiterx-cart-quick-view .woocommerce-mini-cart__total strong,
	.jupiterx-cart-quick-view .woocommerce-mini-cart__total span,
	.jupiterx-cart-quick-view .woocommerce-mini-cart__total .woocommerce-Price-amount {
		font-size: 15px !important;
	}
}

/* „×" uz naziv proizvoda u brzoj korpi.

   Red sa nazivom je flex sa `align-items: baseline`, pa se kod dugačkog
   naziva, kad se prelomi u dva reda, „×" poravnavao sa **prvim** redom i
   izgledao kao da stoji usred rečenice („Spomenar minđuše × srca").
   Sa `flex-start` ostaje gore desno, uvek na istom mestu. */
.jupiterx-cart-quick-view .woocommerce-mini-cart-item-content-heading {
	align-items: flex-start !important;
	gap: 12px;
}

.jupiterx-cart-quick-view .woocommerce-mini-cart-item-content-heading > a.remove {
	flex: 0 0 auto;
	margin-top: 3px;
}

/* Bez ovoga dugačak naziv ume da izgura „×" iz reda. */
.jupiterx-cart-quick-view .woocommerce-mini-cart-item-link {
	min-width: 0;
}

/* Kantica umesto „×" uz proizvod.

   Uz svaki proizvod je stajao „×", isti znak kao onaj kojim se zatvara ceo
   panel — i to tačno ispod njega, pa se lako pobrka šta se briše, komad ili
   cela korpa. Karolinina primedba, 4. septembar. Kantica kaže „ovo briše
   komad" bez ijedne reči.

   Znak crta Jupiter X kao pozadinsku sličicu na `::before`, pa se menja
   zamenom te sličice — SVG je upisan u samo pravilo, bez dodatne datoteke.
   Boja mora da stoji u sličici (`%23776472` je `#776472`), jer se pozadinska
   sličica ne boji preko `color`. */
.jupiterx-cart-quick-view .woocommerce-mini-cart-item-content-heading > a.remove {
	width: 16px !important;
	height: 16px !important;
	font-size: 0 !important;
	text-decoration: none !important;
}

.jupiterx-cart-quick-view .woocommerce-mini-cart-item-content-heading > a.remove::before {
	width: 16px !important;
	height: 16px !important;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23776472' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M2.6 4.1h10.8'/><path d='M6.4 4.1V2.9c0-.5.4-.9.9-.9h1.4c.5 0 .9.4.9.9v1.2'/><path d='M12.1 4.1l-.5 8.5c0 .8-.7 1.4-1.5 1.4H5.9c-.8 0-1.5-.6-1.5-1.4l-.5-8.5'/><path d='M6.6 6.8v4.3'/><path d='M9.4 6.8v4.3'/></svg>") !important;
	background-size: 16px 16px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

.jupiterx-cart-quick-view .woocommerce-mini-cart-item-content-heading > a.remove:hover::before {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2342273B' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M2.6 4.1h10.8'/><path d='M6.4 4.1V2.9c0-.5.4-.9.9-.9h1.4c.5 0 .9.4.9.9v1.2'/><path d='M12.1 4.1l-.5 8.5c0 .8-.7 1.4-1.5 1.4H5.9c-.8 0-1.5-.6-1.5-1.4l-.5-8.5'/><path d='M6.6 6.8v4.3'/><path d='M9.4 6.8v4.3'/></svg>") !important;
}

/* Znak za zatvaranje panela bio je svetlosivi #adadad — jedva se video na
   beloj podlozi. Prvo je 4. septembra prebačen u mekši tekst, a 5. septembra
   Karolina je tražila da bude „malkice veće i u tamno šljiva boji", i na
   računaru i na telefonu.

   Mereno pre izmene: crtež 13 x 13px. Prvo je svuda postao 18px, pa je Karolina
   istog dana rekla: „na mobilu je ok, na desktopu može biti malo manji ipak."
   Otud dva koraka: 18px na telefonu, gde se gađa prstom, i 16px od 768px naviše,
   gde se gađa mišem. Pod mišem ide u „Šljiva svetlija", jer je mirno stanje već
   šljiva. */
.jupiterx-cart-quick-view .jupiterx-raven-mini-cart-close svg {
	width: 18px !important;
	height: 18px !important;
}

@media (min-width: 768px) {
	.jupiterx-cart-quick-view .jupiterx-raven-mini-cart-close svg {
		width: 16px !important;
		height: 16px !important;
	}
}

.jupiterx-cart-quick-view .jupiterx-raven-mini-cart-close svg,
.jupiterx-cart-quick-view .jupiterx-raven-mini-cart-close path {
	fill: #42273B !important;
}

.jupiterx-cart-quick-view .jupiterx-raven-mini-cart-close:hover svg,
.jupiterx-cart-quick-view .jupiterx-raven-mini-cart-close:hover path {
	fill: #5C3A53 !important;
}

/* Pod mišem je dugme za zatvaranje dobijalo punu šljivu kao podlogu, a znak je
   tada takođe šljiva — pa je nestajao. Podloga se gasi u svim stanjima; boju
   menja samo sam znak. Karolinina primedba, 4. septembar. */
.jupiterx-cart-quick-view .jupiterx-raven-mini-cart-close,
.jupiterx-cart-quick-view .jupiterx-raven-mini-cart-close:hover,
.jupiterx-cart-quick-view .jupiterx-raven-mini-cart-close:focus,
.jupiterx-cart-quick-view .jupiterx-raven-mini-cart-close:active {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.jupiterx-cart-quick-view .jupiterx-raven-mini-cart-close:focus-visible {
	outline: 2px solid #776472 !important;
	outline-offset: 2px !important;
}

/* Površina za dodir oko znaka za zatvaranje, 44×44px na telefonu — Apple HIG i
   WCAG 2.2, isto pravilo kao za korpu i meni u zaglavlju.

   Zašto baš ovde, 9. septembra 2026: na telefonu se panel brze korpe zatvara
   SAMO ovim znakom (dodir po pojasu sa strane namerno ne radi ništa, odluka od
   5. septembra), a znak je bio 18×18px u samom uglu ekrana. To je jedini izlaz
   iz panela, na meti upola manjoj od vrha prsta (~40px).

   Meta se širi paddingom, a negativna margina iste veličine vraća znak tačno
   gde je bio: izmereno pre i posle, znak se ne pomeri ni za piksel (18×18 na
   istom mestu, dugme 18→44). Zaglavlje panela ima `overflow: visible`, pa se
   meta ne seče, i cela staje unutar panela.

   `content-box` je nužan: sa nasleđenim `border-box` padding bi jeo prostor
   znaka umesto da ga dodaje spolja.

   SELEKTOR MORA DA NABROJI TRI KLASE. Raven drži `padding: 0 !important` na
   `.elementor-widget-raven-shopping-cart .jupiterx-raven-mini-cart-close` —
   dve klase, isto koliko je imalo prvo naše pravilo. Pri istoj specifičnosti i
   `!important` na obe strane pobeđuje onaj koji se učita kasnije, a Ravenov
   `frontend.min.css` ide posle ovog fajla. Ishod prvog pokušaja, izmeren na
   živom: margina je prošla, padding nije, pa se znak POMERIO 13px ka ivici
   umesto da dobije prostor oko sebe. Zato je dodat i `.jupiterx-mini-cart-header`.

   Na računaru se ne dira — tamo se gađa mišem, a znak je namerno manji (16px). */
@media (max-width: 767px) {
	.jupiterx-cart-quick-view .jupiterx-mini-cart-header .jupiterx-raven-mini-cart-close {
		box-sizing: content-box !important;
		padding: 13px !important;
		margin: -13px !important;
	}
}

/* Obaveštenje u kojem je dugme UNUTAR pasusa.

   WooCommerce ispisuje poruku na dva načina: negde je dugme direktno dete
   kutije, a na strani proizvoda stoji unutar `<p>` zajedno sa tekstom. U tom
   drugom slučaju dugme uopšte nije član flex reda, pa `margin-left: auto`
   nema na šta da se primeni — mereno 4. septembra, `margin-left` je bio 0 —
   i dugme ostaje zalepljeno odmah iza teksta.

   Zato i sam pasus postaje flex red. Pravila za dugme se ne menjaju: čim mu
   roditelj postane flex, `auto` sleva ga odgura na desnu ivicu. */
.woocommerce-message > p,
.woocommerce-info > p,
.woocommerce-error > p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	flex: 1 1 100%;
}

/* Listanje stranica u prodavnici.

   Brojevi stranica su pri pritisku dobijali Bootstrapov plavi obruč — pravilo
   `.woocommerce nav.woocommerce-pagination ul .page-numbers:focus` iz teme
   nosi `box-shadow: rgba(0,123,255,.25) 0 0 0 .2rem`. Ista boja koja je već
   sklonjena sa dugmadi i polja za količinu, samo na drugom mestu.

   Pravilo je isto kao svuda: miš ne dobija ništa, tastatura dobija tih sivi
   trag, da se i dalje vidi gde se stiglo tabulatorom. */
.woocommerce nav.woocommerce-pagination ul .page-numbers:focus,
.woocommerce nav.woocommerce-pagination ul .page-numbers:active,
.woocommerce-pagination .page-numbers:focus,
.woocommerce-pagination .page-numbers:active {
	outline: none !important;
	box-shadow: none !important;
}

.woocommerce nav.woocommerce-pagination ul .page-numbers:focus-visible,
.woocommerce-pagination .page-numbers:focus-visible {
	outline: 2px solid #776472 !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

/* ==========================================================================
   ZAGLAVLJE: ŠTA SE DEŠAVA KAD SE PREĐE MIŠEM

   Korpica, broj pored nje, lupa i meni sada reaguju isto. Boja je uvek
   `var(--e-global-color-secondary)` — to je Elementorov global **Roze tamnija
   #D3A2B0**. Prvo je probana „Šljiva svetlija" `#5C3A53`, korak koji tabela
   tokena vodi kao boju za prelazak mišem — ali ona i osnovna „Šljiva"
   `#42273B` su dva tako bliska tona da se promena jedva primeti (Karolinina
   primedba, 4. septembar). Roze tamnija je već hover boja podmenija i menija
   na telefonu, pa se ništa novo ne uvodi. Ne upisuje se broj, nego global, pa
   sledeća izmena palete stigne i ovde sama.

   Zatečeno je bilo `#B95070` na ikonici korpe — boja koja u paleti nema svoje
   mesto, ostatak od pre njenog sređivanja. Ispravljena je i u samom widgetu
   (post 30648, element cah0210), tako da sada pokazuje na isti global.
   Karolinina primedba, 4. septembar.
   ========================================================================== */

/* Broj pored korpice nije menjao boju: Jupiter X hover vezuje za samu ikonicu
   (`.raven-shopping-cart-icon:hover`), pa se menjala samo ona. Okidač je sada
   cela veza, a menjaju se oba. */
.elementor-widget-raven-shopping-cart .raven-shopping-cart:hover .raven-shopping-cart-icon,
.elementor-widget-raven-shopping-cart .raven-shopping-cart:hover .raven-shopping-cart-count {
	color: var(--e-global-color-secondary) !important;
}

/* Lupa: dodatak Advanced Woo Search svom dugmetu daje sivu podlogu pod mišem
   (`#ededed`) — u zaglavlju je to izgledalo kao siva kutija oko lupe. Podloga
   se gasi u svim stanjima, lupa samo menja boju. Važi samo u zaglavlju; AWS
   na drugim mestima nije diran. */
.jupiterx-header .aws-search-form .aws-search-btn,
.jupiterx-header .aws-search-form .aws-search-btn:hover,
.jupiterx-header .aws-search-form .aws-search-btn:active,
.jupiterx-header .aws-search-form .aws-form-btn,
.jupiterx-header .aws-search-form .aws-form-btn:hover,
.jupiterx-header .aws-search-form .aws-form-btn:active {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.jupiterx-header .aws-search-form .aws-search-btn:hover .aws-search-btn_icon,
.jupiterx-header .aws-search-form .aws-search-btn:hover .aws-search-btn_icon svg {
	color: var(--e-global-color-secondary) !important;
	fill: currentColor !important;
}

/* Meni: boju pod mišem i na tekućoj strani već daje sam widget, i to preko
   globala „Šljiva svetlija" — tu se ništa ne dira. Jedino što je smetalo je
   **podvlačenje**, koje dolazi iz opšteg pravila `a:hover` u temi i u meniju
   izgleda kao greška. */
.jupiterx-header .raven-nav-menu .raven-menu-item:hover,
.jupiterx-header .raven-nav-menu .raven-submenu-item:hover,
.jupiterx-header .raven-nav-menu .raven-menu-item:focus {
	text-decoration: none !important;
}

/* Traka sa porukama na vrhu zaglavlja (šljiva, element `cah0100`).

   Dve sitnice koje su je činile da izgleda kao polje za unos:

   1. Kursor je nad njom postajao „I" — znak za tekst koji se kuca. Traka nije
      ni veza ni polje, samo obaveštenje, pa nosi običnu strelicu.
   2. Prevlačenjem se tekst plavo označavao, kao da se odatle nešto prepisuje.

   Karolinina primedba, 4. septembar. Važi samo za tu traku; ostatak sajta se
   normalno označava i kopira. */
.jupiterx-header .elementor-element-cah0100,
.jupiterx-header .elementor-element-cah0100 * {
	cursor: default;
	-webkit-user-select: none;
	user-select: none;
}

/* Količina uz komad u brzoj korpi, 5. septembar 2026.

   Cena i dugmad − broj + stoje u istom redu dok staju, a kad ne staju, dugmad
   same padnu u sledeći: oba su umetnuta (`inline`), pa prelom radi pregledač.
   Zato nema medij upita za telefon — ista pravila drže i uzak i širok panel.

   Dugmad su prava `<button>`, pa ih tema hvata svojim pravilima za dugmad
   (podloga, okvir, senka, visina). Otud `!important` na svemu što se poništava;
   bez toga dugme dobije punu šljiva podlogu i visinu od 45px, kao „Nastavi na
   plaćanje" ispod. */

.jupiterx-cart-quick-view .woocommerce-mini-cart-item .quantity {
	display: inline-block;
	margin-right: 12px;
	vertical-align: middle;
}

.jupiterx-cart-quick-view .ca-kol {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	/* Sadržaj stavke je uspravni flex, pa se umetnuti element pretvara u član
	   reda i razvuče preko cele širine. Otud align-self i flex. */
	align-self: flex-start;
	flex: 0 0 auto;
	width: auto;
	margin-top: 6px;
	border: 1px solid #E4E0E3;
	border-radius: 2px;
	overflow: hidden;
	line-height: 1;
}

.jupiterx-cart-quick-view .ca-kol__dugme {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 30px !important;
	min-width: 0 !important;
	height: 28px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	font-family: "Poppins", sans-serif;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #42273B !important;
	cursor: pointer;
}

.jupiterx-cart-quick-view .ca-kol__dugme:hover {
	background: #FDECEF !important;
	color: #42273B !important;
}

.jupiterx-cart-quick-view .ca-kol__dugme:disabled,
.jupiterx-cart-quick-view .ca-kol__dugme:disabled:hover {
	background: transparent !important;
	color: #776472 !important;
	opacity: .4;
	cursor: default;
}

.jupiterx-cart-quick-view .ca-kol__broj {
	min-width: 30px;
	padding: 0 2px;
	border-left: 1px solid #E4E0E3;
	border-right: 1px solid #E4E0E3;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	line-height: 28px;
	text-align: center;
	color: #42273B;
}

/* Dok se čeka odgovor servera, dugmad ne primaju nove klikove. Kratko je, pa
   nema vrtećeg znaka — samo blago posivi da se vidi da nešto radi. */
/* Dok se količina menja, na mestu broja se vrti točkić.
 *
 * Do 10. septembra 2026 ovde je stajalo samo `opacity: .5` na celom okviru.
 * Karolinina primedba tog dana: „u side korpi kad menjaš količinu, ni tamo nema
 * animacije da se vidi da nešto radi… blago se samo plus i minus posvetli."
 *
 * Providnost je zato skinuta sa okvira i spuštena na sama dugmad. Da je ostala
 * na okviru, izbledeo bi i točkić, jer providnost roditelja povlači sve u
 * njemu — ista zamka kao kod koprene u roze sažetku korpe, istog dana.
 *
 * Točkić je 14px, a ne 22px kao u prodavnici i na blogu: okvir količine je
 * visok 28px, pa bi veći dodirivao ivice. Obrtaj `ca-tockic-vrti` je u Dodatnom
 * CSS-u, isti za ceo sajt. */
.jupiterx-cart-quick-view .ca-kol--radi {
	position: relative;
	pointer-events: none;
}

.jupiterx-cart-quick-view .ca-kol--radi .ca-kol__dugme {
	opacity: .35;
}

.jupiterx-cart-quick-view .ca-kol--radi .ca-kol__broj {
	visibility: hidden;
}

.jupiterx-cart-quick-view .ca-kol--radi::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 2px solid rgba(66,39,59,.2);
	border-top-color: #42273B;
	border-radius: 50%;
	animation: ca-tockic-vrti .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.jupiterx-cart-quick-view .ca-kol--radi::after { animation: none; }
}

/* Na telefonu su dugmad veća nego na računaru, da se pogađaju prstom:
   34 x 32 umesto 30 x 28, znak 16px umesto 15.

   Karolina je 5. septembra tražila veća („na mobilu može plus minus dugme da
   bude malo veće ako može i stane"), pa je proba bila 38 x 36 — i to joj je
   bilo previše („malkice manje"). Ovo je korak između. */
@media (max-width: 767px) {
	.jupiterx-cart-quick-view .ca-kol__dugme {
		width: 34px !important;
		height: 32px !important;
		font-size: 16px !important;
	}

	.jupiterx-cart-quick-view .ca-kol__broj {
		min-width: 34px;
		line-height: 32px;
		font-size: 14px;
	}
}

/* Zaglavlje brze korpe je bilo previsoko, 5. septembar 2026.

   Karolina: „tamo gore gde piše Korpa, iznad i ispod je kao da je malo veliko
   prazno mesto, to može da se smanji malo?" Jupiter X mu daje 25px ispune gore
   i dole, pa je traka izlazila 80px visoka, skoro kao dve stavke u korpi.

   Koliko manje: „ne previše, recimo kao gde piše međuiznos." Taj red ima 15px
   ispune gore i dole, pa je i zaglavlje dobilo isto. Prored natpisa se ne dira,
   da oba reda stoje po istom ritmu. Ispuna sa strane ostaje 30px, jer drži
   liniju sa sličicama proizvoda ispod.

   Mereno: zaglavlje 80px pre, 59px posle; red „Međuiznos" je 61px (dve tanke
   crte razlike). */
.jupiterx-cart-quick-view .jupiterx-mini-cart-header {
	padding-top: 15px !important;
	padding-bottom: 15px !important;
}

/* Znak za zatvaranje je stajao više od reči „Korpa", 5. septembar 2026.

   Karolinina primedba: „x dugme nije na istoj visini kao reč korpa, kao da je
   više." I jeste bilo, za 3,7px — a ne zbog poravnanja u redu: zaglavlje je
   flex sa `align-items: center`, pa su OBE kutije bile tačno na sredini (29,4px
   od vrha).

   Uzrok je bio unutar dugmeta. Crtež je 16px, a kutija dugmeta 24px, jer je
   `svg` umetnut element pa ispod njega stoji prostor za donji produžetak slova.
   Crtež je zato sedeo uz vrh svoje kutije. Sa `display: block` na crtežu kutija
   se skuplja na njegovih 16px i sredina se poklopi. */
.jupiterx-cart-quick-view .jupiterx-raven-mini-cart-close {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.jupiterx-cart-quick-view .jupiterx-raven-mini-cart-close svg {
	display: block;
}

/* Panel je na telefonu širi, 5. septembar 2026. Vidi napomenu uz osnovno
   pravilo sa 92vw. */
@media (max-width: 767px) {
	.jupiterx-cart-quick-view {
		max-width: 96vw !important;
	}
}

/* Dugme „na vrh strane" se sklanja dok je brza korpa otvorena, 5. septembar
   2026.

   Karolina: „na desktopu up to top dugme ulazi u side korpu kad je otvorena, a
   na sredini ili dole na stranici si negde." Ugao je `position: fixed` sa
   slojem 990, a panel ima 12001 — ali to ne pomaže, jer panel taj broj nosi
   UNUTAR sloja zaglavlja. Sa uglom se poredi zaglavlje, ne panel.

   Zato se ne dira nijedan sloj: dugme se jednostavno skloni dok je panel
   otvoren, jer tada nikome i ne treba. Klasu na telo kači skript iz
   `_mu-korpa.php`, isti onaj koji zaključava pozadinu. */
body.ca-korpa-otvorena .jupiterx-corner-buttons {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, visibility .2s ease;
}

/* NAMERNO NEMA PRAVILA ZA BOJU KORPICE U PRAZNOJ KORPI.

   Glyph uz „Nema proizvoda u korpi" dolazi iz teme siv (`#6C757D`), boja koja u
   paleti nema svoje mesto. Ista korpica je u zaglavlju šljiva, a na dugmetu
   strane proizvoda bela.

   Predloženo je 5. septembra 2026. da se i ona prebaci u šljivu, radi
   doslednosti. Karolina je odbila: „nek tamo ostane siva, da je kao prazna."
   Bleđi ton je poruka, ne nemar — korpa je prazna, pa i ikonica stoji utišano.

   Zapisano ovde jer je ovo prvo mesto na koje bi neko posegao da to „ispravi".
   Ne ispravljati. */

/* ZNAK DA JE KLIK PRIMLJEN NA DUGMADIMA BRZE KORPE, 10. septembar 2026.

   Karolina: „kod side korpe kad klikneš na pogledaj korpu, ni tamo nema
   animacije koja bi pokazala da je u toku nešto"… „nema ni jedan"… „kažem da
   bi oba trebala."

   Tačno, i izmereno: pri kliku se na dugmetu ne menja nijedna klasa, ni
   `::before`, ni `::after`. Obe su obične veze, pa kupac do dolaska nove strane
   nema nikakav odgovor. Na ovom serveru to traje nekoliko sekundi, pa klik
   deluje kao da nije primljen i kupac pritisne opet.

   NATPIS SE NE KRIJE BOJOM. Prvi pokušaj je bio `color: transparent !important`
   na samoj vezi. Izmereno: iz istog pravila su `pointer-events` i `position`
   prošli, a `color` nije — nešto iz teme ga tuče kasnijim `!important`-om iste
   težine. Umesto trke u specifičnosti, skripta natpis obmota u
   `span.ca-veza__natpis`, pa se krije on. Tu klasu nema nijedan tuđi list, pa
   nema ni šta da je nadjača.

   Točkić ostaje vidljiv jer je dete veze, a ne tog omotača.

   Točkić je isti onaj sa celog sajta (`.ca-tockic` u Dodatnom CSS-u), samo
   manji — 14px, koliko staje i u tekstualnu vezu „Pogledaj korpu", koja je
   visoka 22px.

   ISTO VAŽI I ZA STRANU KORPE. Karolina, istog dana: „i u korpi strani kad se
   klikne na nastavi na plaćanje bi trebalo, jer sad se samo promeni u malo
   svetliju šljivu." To svetlije je bio samo prelazak mišem, koji na dodir i ne
   postoji. To dugme je `a.checkout-button` u `.wc-proceed-to-checkout`, 310×58,
   ista puna šljiva sa belim slovima, pa ide u isti sklop i dobija beli točkić. */
.woocommerce-mini-cart__buttons a.button.ca-veza--radi,
.wc-proceed-to-checkout a.checkout-button.ca-veza--radi {
	pointer-events: none;
	position: relative;
}

.woocommerce-mini-cart__buttons a.button.ca-veza--radi .ca-veza__natpis,
.wc-proceed-to-checkout a.checkout-button.ca-veza--radi .ca-veza__natpis {
	visibility: hidden;
}

.woocommerce-mini-cart__buttons a.button.ca-veza--radi .ca-tockic,
.wc-proceed-to-checkout a.checkout-button.ca-veza--radi .ca-tockic {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
}

/* Na punom šljiva dugmetu („Nastavi na plaćanje", i u panelu i na strani korpe)
   šljiva točkić se ne vidi. */
.woocommerce-mini-cart__buttons a.button.checkout.ca-veza--radi .ca-tockic,
.wc-proceed-to-checkout a.checkout-button.ca-veza--radi .ca-tockic {
	border-color: rgba(255, 255, 255, .38);
	border-top-color: #FFFFFF;
}

/* ISTI TOČKIĆ I NA DUGMADIMA „DODAJ U KORPU", 10. septembar 2026.

   Karolina: „na početnoj kod omiljenih ima točkić… u prodavnici nema točkić
   samo se dugme pobeli, a na strani poklona točkić siđe ispod teksta dodaj u
   korpu na mobilu. Jel može ovo sve da bude isto?"

   Zašto ne WooCommerceovim točkićem i šta je izmereno: vidi dugačak komentar u
   `caroline-art-prodavnica/kartica.js`. Ukratko: njegov točkić stoji IZA
   natpisa i na uskoj kartici mu fali 1px, pa prelomi natpis u drugi red i dugme
   naraste sa 38 na 56px.

   Ovde je isti sklop kao na dugmadima korpe iznad: natpis se sakrije u
   sopstvenom omotaču (klasu koju nijedan tuđi list ne poznaje), a točkić stane
   apsolutno na sredinu. Širina i visina dugmeta ostaju iste na svakoj širini
   ekrana.

   Sve kartice su puna šljiva sa belim slovima (izmereno i u prodavnici i na
   poklonima), pa je točkić beo. */
a.button.add_to_cart_button.ca-veza--radi,
button.add_to_cart_button.ca-veza--radi {
	position: relative;
	pointer-events: none;
}

a.button.add_to_cart_button.ca-veza--radi .ca-veza__natpis,
button.add_to_cart_button.ca-veza--radi .ca-veza__natpis {
	visibility: hidden;
}

a.button.add_to_cart_button.ca-veza--radi .ca-tockic,
button.add_to_cart_button.ca-veza--radi .ca-tockic {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-color: rgba(255, 255, 255, .38);
	border-top-color: #FFFFFF;
}

/* WooCommerceov sopstveni točkić se gasi dok stoji naš, da ih ne bude dva. */
a.button.add_to_cart_button.ca-veza--radi::after,
button.add_to_cart_button.ca-veza--radi::after {
	content: none !important;
}

/* BOČNA KORPA SE NE POKAZUJE NA STRANI KORPE, 10. septembar 2026.

   Karolina: „za korpu sklonit sa checkout strane side korpu, a i sa korpe bih
   sklonila, svakako si u korpi."

   Tačno, i time nestaje cela porodica grešaka koje smo tog dana lovili: sve su
   nastale zato što ista brojka stoji na dva mesta na istom ekranu, pa je jedno
   moralo da javlja drugom.

   Na naplati korpica OSTAJE, ali kao obična veza na stranu korpe (vidi
   `_mu-korpa.php`) — na telefonu je ona jedini put nazad, jer je veza „Nazad u
   korpu" tamo namerno sakrivena (Karolinina odluka od 5. septembra: „svakako ima
   gore desno ako želi da pogleda").

   SKRIVA SE STILOM, NE BRIŠE IZ STRANE. Unutar widgeta stoje mete koje
   WooCommerce osvežava (`div.widget_shopping_cart_content`, brojač). Da se
   widget ukloni iz HTML-a, zamena fragmenata bi promašila i brojka bi počela da
   laže.

   Strana potvrde ne nosi oznaku `woocommerce-cart`, pa je ovo ne dotiče. */
/* ISPRAVKA ISTOG VEČERA: korpica se ipak NE SKRIVA.

   Karolina, pošto je videla stranu: „zbog toga pitam, malo je čudno… ili da bude
   i na korpi i na checkout pa da vodi na korpu, ili ni na jednom."

   Tačno. Zaglavlje je stalni deo sajta i kupac ga čita kao „uvek je tu"; kad
   nestane baš na dve strane, to je ono što deluje pokvareno. Uz to korpica nosi
   broj komada, korisnu potvrdu baš dok se plaća, a na naplati je na telefonu
   jedini put nazad.

   Zato je svuda vidljiva, a na korpi i na naplati vodi na stranu korpe umesto da
   otvara panel (vidi `_mu-korpa.php`). Klik na korpicu dok si već u korpi vraća
   istu stranu — to gotovo niko ne radi, a točkić pokazuje da je klik primljen.

   Pravilo koje je ovde stajalo i skrivalo widget na strani korpe je uklonjeno.
   Panela na te dve strane i dalje nema. */

/* TOČKIĆ NA KORPICI DOK SE OTVARA STRANA KORPE, 10. septembar 2026.

   Na naplati korpica nije više prekidač za panel nego veza na stranu korpe, pa
   posle klika sledi učitavanje strane. Karolina: „na mobilnom može se staviti
   neki indikator da se dešava nešto kad na naplata strani klikne na korpicu?
   jer sad nema ništa." Tačno, i bila je to jedina tačka na sajtu gde klik ne
   daje odgovor, pošto su sva dugmad tog dana dobila točkić.

   ZAŠTO SE NIŠTA NE OBMOTAVA. Kod dugmadi se natpis skriva u sopstveni omotač.
   Ovde to ne sme: `span.raven-shopping-cart-count` je meta koju WooCommerce
   zamenjuje pri svakoj promeni korpe, pa bi omotač nestao pri prvom osvežavanju.
   Zato se oba deteta samo sakriju sa `visibility`, čime zadrže svoju širinu, a
   točkić stane preko njih. Veza ostaje 44×44.

   Točkić je podrazumevani, šljiva: korpica stoji na beloj podlozi zaglavlja. */
.raven-shopping-cart.ca-korpica--radi {
	position: relative;
	pointer-events: none;
}

.raven-shopping-cart.ca-korpica--radi .raven-shopping-cart-icon,
.raven-shopping-cart.ca-korpica--radi .raven-shopping-cart-count {
	visibility: hidden;
}

.raven-shopping-cart.ca-korpica--radi .ca-tockic {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
}