/* Sidrena cijena i cjenik: prikaz uz cijenu.
 *
 * Odluka traži da oznaka bude jasno, vidljivo i čitljivo istaknuta uz maloprodajnu
 * cijenu. Zato je izgled neutralan, ali nikad tih: iznos je istaknut, oznaka mirna.
 *
 * Boja je ista kao boja teksta teme, bez prozirnosti, pa oznaka ima isti kontrast
 * kao i okolni tekst, na svijetloj i na tamnoj podlozi i u svakoj temi. Prozirnost
 * se ovdje namjerno ne koristi: obveza je istaknuti, a ne prišapnuti. Razlika u
 * odnosu na cijenu postiže se veličinom, ne blijeđenjem.
 * Tema može sve promijeniti varijablama --scc-velicina, --scc-boja i --scc-crta.
 */
.scc-sidrena,
.scc-jedinica,
.scc-najniza {
	--scc-velicina: max(13px, .58em);
	--scc-boja: currentColor;
	--scc-crta: rgba(0, 0, 0, .16);

	/* inline-block, jer se podcrtavanje poveznice oko kartice proizvoda ne prenosi na inline-block elemente */
	display: inline-block;
	flex-basis: 100%;
	width: 100%;
	box-sizing: border-box;
	margin-top: .35em;
	padding-left: .7em;
	border-left: 2px solid var(--scc-crta);
	font-size: var(--scc-velicina);
	line-height: 1.45;
	font-weight: 400;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	color: var(--scc-boja);
	opacity: 1;
	text-decoration: none;
	white-space: normal;
}

/* Crta uz rub smije biti tiha, jer je ukras, a ne podatak. */
@supports (color: color-mix(in srgb, currentColor 70%, transparent)) {
	.scc-sidrena,
	.scc-jedinica,
	.scc-najniza {
		--scc-crta: color-mix(in srgb, currentColor 28%, transparent);
	}
}

/* Unutar cijene teme često nameću veličinu, boju i debljinu, pa se to mora nadjačati. */
.price .scc-sidrena,
.price .scc-sidrena *,
.price .scc-jedinica,
.price .scc-jedinica *,
.price .scc-najniza,
.price .scc-najniza * {
	font-size: var(--scc-velicina);
	color: var(--scc-boja);
	text-decoration: none;
	font-weight: 400;
}

/* Oznaka se ne blijedi. Kod klijenata čija je cijena obojena, blijeđenje je
 * oznaku gotovo izbrisalo, a riječ je o podatku koji se po propisu mora vidjeti. */
.scc-sidrena__oznaka,
.scc-jedinica__oznaka,
.scc-najniza__oznaka {
	opacity: 1;
}

/* Iznos se ne lomi i drži tabularne znamenke, da brojevi stoje poravnato kad ih
 * ima više jedan ispod drugoga. Namjerno nije podebljan: uz cijenu smije stajati
 * samo jedan iznos koji viče, a to je ona koju kupac plaća. */
.scc-sidrena__iznos,
.scc-jedinica__iznos,
.scc-najniza__iznos {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Kad stoje jedna do druge, čitaju se kao jedan blok, a ne kao dvije odvojene tvrdnje. */
.scc-najniza + .scc-sidrena,
.scc-sidrena + .scc-jedinica,
.scc-najniza + .scc-jedinica {
	margin-top: .15em;
}