/*
 * Namjerno malo stila.
 *
 * Ovo je pravna napomena uz cijenu, ne element dizajna. Nasljeđuje font i
 * boju teme i samo se malo stiša, da ne otima pažnju cijeni iznad sebe, a
 * ostane čitljivo. Trgovac koji hoće drukčije isključi CSS u postavkama.
 *
 * Tema mijenja izgled bez prepisivanja pravila, kroz CSS varijable na bilo
 * kojem roditelju (npr. na :root ili .product):
 *   --klk-cijene-velicina      veličina slova (zadano 0.85em)
 *   --klk-cijene-boja          boja teksta (zadano boja teme)
 *   --klk-cijene-prozirnost    prozirnost (zadano 0.85)
 *   --klk-cijene-razmak        razmak iznad bloka (zadano 0.5em)
 *   --klk-cijene-razmak-ispod  razmak ispod bloka (zadano 0.9em)
 *
 * Margine su logička svojstva (margin-block), pa jezici s desna na lijevo
 * ne trebaju zasebnu datoteku; poravnanje se nasljeđuje od roditelja.
 */
.klk-cijene {
	display: block;
	margin-block: var(--klk-cijene-razmak, 0.5em) var(--klk-cijene-razmak-ispod, 0.9em);
	margin-inline: 0;
	font-size: var(--klk-cijene-velicina, 0.85em);
	line-height: 1.5;
	color: var(--klk-cijene-boja, currentColor);
	opacity: var(--klk-cijene-prozirnost, 0.85);
}

.klk-cijene__red {
	display: block;
}

.klk-cijene__red + .klk-cijene__red {
	margin-block-start: 0.15em;
}

/*
 * Kartica u popisu proizvoda: manje od cijene, bez vlastite boje i bez
 * praznog prostora koji bi kartice u redu razvukao na različite visine više
 * nego što treba. Poravnanje (lijevo, sredina) preuzima od kartice.
 */
.klk-cijene--kartica {
	margin-block: var(--klk-cijene-razmak-kartica, 0.2em) var(--klk-cijene-razmak-ispod-kartica, 0.6em);
	font-size: var(--klk-cijene-velicina-kartica, var(--klk-cijene-velicina, 0.85em));
	line-height: 1.35;
	font-weight: 400;
}

.klk-cijene--kartica .klk-cijene__red + .klk-cijene__red {
	margin-block-start: 0.1em;
}

/*
 * Način "filtar": blok je unutar HTML-a cijene, a cijena je često unutar
 * poveznice kartice ili odlomka <p class="price">. inline-block pune širine
 * ponaša se kao blok, a ne nasljeđuje podcrtavanje poveznice; debljina slova
 * cijene se poništava.
 */
.klk-cijene--u-cijeni {
	display: inline-block;
	inline-size: 100%;
	font-weight: 400;
	text-decoration: none;
	margin-block: 0.25em 0;
}

/*
 * Poveznica na strojno čitljivi cjenik (podnožje, trgovina, košarica ili
 * [klikoteka_cjenik]).
 *
 * Zadano je obična poveznica: ovdje nema boje, podcrtavanja, fonta ni
 * pozadine, pa izgleda točno kao ostale poveznice u temi. "Istaknuto" dodaje
 * samo tanak okvir u boji teksta, bez zaobljenja u kapsulu, sjene ili
 * pomicanja na prelazak mišem.
 */
.klk-cjenik-veza-omot {
	margin-block: 1em;
}

.klk-cjenik-veza-omot > p {
	margin: 0;
}

/* Klasične teme s bočnom trakom: ispod obaju stupaca, ne u jednom od njih. */
.klk-cjenik-veza-omot--iznad {
	clear: both;
}

/* Samo dno stranice je izvan omota teme, pa nema njezin rub; ovo ga zamjenjuje. */
.klk-cjenik-veza-omot--podnozje:not(.has-global-padding) {
	padding-inline: 1.25rem;
}

.klk-cjenik-veza--istaknuto {
	display: inline-block;
	padding: 0.3em 0.75em;
	border: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 3px;
	text-decoration: none;
}

.klk-cjenik-veza--istaknuto:hover,
.klk-cjenik-veza--istaknuto:focus-visible {
	border-color: currentColor;
}