/* ========================================
   Price
   ----------------------------------------
   The one place that styles a product price and the rows that follow it, on
   product cards and on the product page. Loaded next to the WooCommerce fork
   and next to the front page's slice, so neither of them carries these rules.

   Inside .price, every piece is a sibling flex item:
     .amount / del / ins          WooCommerce's own price
     .price-from                  "od" + amount, variable products (theme)
       __label
     .df-unit-price               unit price row (df-pricing)
       __quantity, __rate
     .sidrena-cijena              anchor price row (df-sidrena-cijena)
       __prefix, __amount
   The rows take a full line each and the order is set here, not by markup,
   so moving a row is a change to its order value alone.
======================================== */

.woocommerce ul.products li.product .price,
.entry-summary .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-2);
	line-height: var(--leading-slim);
}

.woocommerce ul.products li.product .price del,
.entry-summary .price del {
	order: 1;
	color: var(--color-text-subtle);
}

.woocommerce ul.products li.product .price ins,
.entry-summary .price ins {
	background: none;
	text-decoration: none;
}

.price-from__label {
	font-size: var(--text-meta);
	color: var(--color-text-muted);
}

/* ----------------------------------------
   Rows under the price
---------------------------------------- */

.df-unit-price,
.sidrena-cijena {
	display: block;
	font-size: var(--text-meta);
	font-weight: var(--font-normal);
	line-height: var(--leading-short);
	letter-spacing: normal;
	color: var(--color-text-muted);
}

.price > .df-unit-price,
.price > .sidrena-cijena {
	flex-basis: 100%;
}

.price > .df-unit-price {
	order: 10;
}

.price > .sidrena-cijena {
	order: 20;
}

/* ----------------------------------------
   Product page
---------------------------------------- */

.entry-summary .price {
	margin-top: var(--space-8);
	margin-bottom: var(--space-4);
}

/* Replaced by the chosen variation's own price in the variation box. */
.product-type-variable .entry-summary p.price {
	display: none;
}

/* Child combinator on purpose: the rows carry WooCommerce amounts too, and
   they must not pick up the headline size. */
.entry-summary .price > .amount,
.entry-summary .price > ins .amount {
	font-size: var(--heading-l);
	font-weight: var(--font-bold);
	letter-spacing: 0.05em;
}

.entry-summary .price > del .amount {
	font-size: var(--text-body-l);
	font-weight: var(--font-medium);
}