/* COMO Dodaci — rata ispod cijene, oznaka „Dostupno odmah“ i filter */

:root {
	--como-oznaka-bg: #414042;
	--como-oznaka-boja: #fff;
	--como-oznaka-font-kat: 12px;
	--como-oznaka-font-pro: 14px;
}

/* --- Rata ispod cijene --- */

.como-rata {
	margin: 4px 0 18px;
	font-size: 15px;
	line-height: 1.45;
	color: #6d6d6d;
}

.como-rata strong {
	color: #000;
	font-weight: 700;
	white-space: nowrap;
}

/* --- Oznaka „Dostupno odmah“ --- */

.como-oznaka {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: inline-block;
	max-width: calc(100% - 20px);
	padding: 0 .85em;
	border-radius: 0;
	background: var(--como-oznaka-bg);
	color: var(--como-oznaka-boja);
	font-size: var(--como-oznaka-font-kat);
	font-weight: 600;
	line-height: 1.85;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

/*
 * Stranica proizvoda: veća galerija, oznaka prati veličinu oznake „Akcija!“.
 * Gore desno stoji WooCommerce ikona za uvećanje slike, pa oznaka ide lijevo od nje.
 */
.como-oznaka--proizvod {
	top: 30px;
	right: 70px;
	padding: .2em 1em;
	font-size: var(--como-oznaka-font-pro);
	line-height: 1.7;
}

/* Shortcode u tekstu. */
.como-oznaka--inline {
	position: static;
}

/* --- Filter u bočnoj traci --- */

.como-filter-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.como-filter-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}

.como-filter-kvadrat {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 1px solid currentColor;
	opacity: .6;
	transition: opacity .15s ease;
}

.como-filter-link:hover .como-filter-kvadrat,
.como-filter-link.is-active .como-filter-kvadrat {
	opacity: 1;
}

.como-filter-link.is-active .como-filter-kvadrat {
	border-color: var(--como-oznaka-bg);
	background: var(--como-oznaka-bg);
}

.como-filter-link.is-active .como-filter-kvadrat::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 5px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.como-filter-link.is-active .como-filter-tekst {
	font-weight: 600;
}

@media (max-width: 767px) {
	.como-oznaka {
		top: 8px;
		right: 8px;
		font-size: max(8px, calc(var(--como-oznaka-font-kat) - 2px));
	}

	/*
	 * Na mobitelu ikona za uvećanje zauzima gornji desni ugao uske glavne slike,
	 * pa oznaka ide u donji desni ugao. Slika je uska (galerija ima i kolonu
	 * sličica), zato najviše 14 px.
	 */
	.como-oznaka--proizvod {
		top: auto;
		right: 14px;
		bottom: 14px;
		font-size: min(14px, max(8px, calc(var(--como-oznaka-font-pro) - 2px)));
	}

	/* Proizvod s dugmadima „Video“ / „360“ teme (dolje desno) — oznaka ide iznad njih. */
	.woocommerce-product-gallery:has(.product-video-360__btn) .como-oznaka--proizvod {
		bottom: 78px;
	}

	.como-rata {
		font-size: 14px;
	}

	.como-filter-link {
		padding: 6px 0;
	}
}