/* Product price redesign - layout only (store-profile feature "price_redesign").
   Loaded on a product page only when the store profile has the feature AND
   Settings -> Buy Now -> Product Page -> "Redesign the product price" is on.

   Layout:   Rs 399.00   Rs 499.00  |  [ 20% OFF ]  |  inc. GST

   This file sets structure only. Font size / weight / colour of each part, and
   the badge background, come from the settings screen as inline CSS written by
   Woo_Dash_Buy_Now_Product_Price (a blank setting writes nothing, so the theme's
   value stands).

   Spacing: nothing here sets margin, padding or line-height on the price block,
   so the space above and below it is the theme's. */

body.wd-price-redesign .entry-summary .price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3em .6em;
}
/* Variable products: the Variation Settings price script (class-vs-price.php)
   wraps the price in <span class="wdvs-price-inner"> whenever a variation is
   picked or the page loads, and scales that wrapper for its price-change
   animation. Left as a plain inline box it would be the row's only flex item and
   everything inside it (dividers, badge, "inc. GST") would flow inline. So the
   wrapper itself becomes the row (same flex layout as .price above) - it stays a
   real box, so the scale animation keeps working. */
body.wd-price-redesign .entry-summary .price .wdvs-price-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3em .6em;
	transform-origin: left center;
}

/* Sale price + struck regular price (Blocksy's .sale-price group) */
body.wd-price-redesign .entry-summary .price .sale-price {
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: .5em;
}
/* The amount spans inside take what the <ins> / <del> / price element is given. */
body.wd-price-redesign .entry-summary .price ins .woocommerce-Price-amount,
body.wd-price-redesign .entry-summary .price ins bdi,
body.wd-price-redesign .entry-summary .price ins .woocommerce-Price-currencySymbol,
body.wd-price-redesign .entry-summary .price del .woocommerce-Price-amount,
body.wd-price-redesign .entry-summary .price del bdi,
body.wd-price-redesign .entry-summary .price del .woocommerce-Price-currencySymbol,
body.wd-price-redesign .entry-summary .price > .woocommerce-Price-amount bdi,
body.wd-price-redesign .entry-summary .price > .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}
body.wd-price-redesign .entry-summary .price ins {
	text-decoration: none;
}

/* Thin divider, 80% of the row's height. The element itself stretches to the
   full row height (a flex item, so its height is known); the visible line is a
   pseudo-element inset 10% top and bottom, i.e. 80% tall and centred. Colour
   comes from --wd-price-divider (set from the settings screen). */
body.wd-price-redesign .entry-summary .price .wd-price-sep {
	position: relative;
	flex: none;
	align-self: stretch;
	width: 1.5px;
	min-height: 1.4em;
	background: none;
}
body.wd-price-redesign .entry-summary .price .wd-price-sep::before {
	content: "";
	position: absolute;
	inset: 10% 0;
	background: var(--wd-price-divider, #d9dedc);
}

/* "20% OFF" badge: padding, radius and line-height are in em of the badge's own
   font size, so it scales when the size setting changes. */
body.wd-price-redesign .entry-summary .price .wd-price-off {
	display: inline-flex;
	align-items: center;
}
body.wd-price-redesign .entry-summary .price .wd-price-off-pill {
	display: inline-block;
	padding: .55em .95em;
	border-radius: .7em;
	background: #ffe6c4;
	color: #c8241c;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .01em;
	line-height: 1;
	white-space: nowrap;
}

/* "inc. GST" */
body.wd-price-redesign .entry-summary .price .woocommerce-price-suffix {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: #6b7280;
}

@media (max-width: 689.98px) {
	body.wd-price-redesign .entry-summary .price .wd-price-off-pill,
	body.wd-price-redesign .entry-summary .price .woocommerce-price-suffix { font-size: 12px; }
}