/**
 * The savings badge, directly under the price.
 *
 * A filled chip for the number and a quieter line beside it for the shipping
 * note, so the saving reads first and the note supports it rather than competing.
 */
.pearlory-saving {
	/* flex on its own row: it sits inside the price element now, which is inline */
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
}

.pearlory-saving__badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	background: #fdeeec;
	border-radius: 5px;
	color: #b3261e;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.3;
	text-transform: uppercase;
}

.pearlory-saving__note {
	font-size: 12.5px;
	color: #5c5c5c;
	line-height: 1.3;
}

/* --------------------------------------------- the strike on the old price
 *
 * The line sat above the middle of the digits rather than through them.
 *
 * Measured: the del is 24px while the amount span inside it is 20px. A
 * line-through is drawn by the element carrying the decoration, positioned from
 * that element's own font metrics, so a 24px strikeout was being drawn across
 * 20px glyphs. Same cause as the drawer's upsell price earlier in this project.
 *
 * Matching the sizes puts the line where the font intends it, with nothing
 * nudged by hand.
 */
.single-product .product-main .price del .woocommerce-Price-amount,
.single-product .product-main .price del bdi,
.single-product .product-summary .price del .woocommerce-Price-amount,
.single-product .product-summary .price del bdi {
	font-size: inherit;
}


/*
 * Price hierarchy.
 *
 * Measured before this rule: the struck price rendered at 24px and the price the
 * customer actually pays at 20px, so the old price was the larger of the two.
 * Neither reference has a compare-at price on its product page to measure
 * against, since both run cart level promotions rather than per item markdowns,
 * so this follows the ordinary convention instead: the figure being charged is
 * the largest and heaviest thing in the row, and the struck one is smaller,
 * lighter and muted.
 *
 * The inner amount spans have to inherit, or WooCommerce's own sizing reasserts
 * itself on the span inside and the outer value never takes effect. That is also
 * what keeps the strike centred on the digits rather than riding high.
 */
.single-product .product-stacked-info .price del,
.single-product .product-stacked-info .price del .woocommerce-Price-amount,
.single-product .product-stacked-info .price del bdi,
.single-product .product-stacked-info .price del .amount {
	/*
	 * The struck price is half the pitch. At 15px in 42% grey it was too faint to
	 * register, so the drop from 59 to 23 never landed. Bigger and darker: the
	 * customer has to read the old number clearly for the new one to mean
	 * anything.
	 */
	font-size: 18px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.55);
}

.single-product .product-stacked-info .price ins,
.single-product .product-stacked-info .price ins .woocommerce-Price-amount,
.single-product .product-stacked-info .price ins bdi,
.single-product .product-stacked-info .price ins .amount,
.single-product .product-stacked-info .price .woocs_special_price_code,
.single-product .product-stacked-info .price .woocs_special_price_code .woocommerce-Price-amount,
.single-product .product-stacked-info .price .woocs_special_price_code bdi {
	/*
	 * 22px. It was 24px, which dominated, then 17px to match the references,
	 * which buried it. Neither reference is the right guide here: Hey Harper
	 * does not discount, and Atolea makes its sale price stand out with green
	 * and a SALE PRICE label rather than with size. Pearlory leads with 60% off,
	 * so the figure being charged is the offer and has to carry.
	 */
	/* 20px against the struck 18px. Close enough that both read, far enough that
	   the charged figure is still the heavier of the two. */
	font-size: 20px;
	font-weight: 700;
	color: #161616;
	text-decoration: none;
}

/*
 * There is a literal space in WooCommerce's markup between the struck price and
 * the current one, and it renders at the parent's 24px, so any margin added on
 * top of it lands at roughly 15px and reads as two separate facts rather than
 * one price with its former value beside it. The margin is zero and that single
 * space does the work.
 */
.single-product .product-stacked-info .price del {
	margin-right: 0;
}