/**
 * Sonder-/Aktionspreis-Anzeige (includes/sale-display.php).
 *
 * Terracotta (#C97955, Design-System §3) als Aktionsfarbe: auffällig und
 * warm statt Signalrot — „verkaufswirksam, aber markenkonform". Dunklere
 * Abstufung #A85F3E für Text auf hellem Grund (Kontrast ≥ 4,5:1).
 */

/* ---------------------------------------------------------------------
 * 1) Bild-Overlay-Badge (ersetzt Woos .onsale — Kacheln UND Produktseite)
 * ------------------------------------------------------------------ */
.woocommerce span.onsale.zwcl-sale-flash {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 9;
	display: inline-flex;
	align-items: baseline;
	gap: .45em;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: .42em .85em;
	background: #C97955;
	color: #fff;
	border-radius: 8px;
	line-height: 1.2;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(30, 37, 45, .18);
	transform: rotate(-2deg);
}

.zwcl-sale-flash__percent {
	font-size: 1.05em;
	white-space: nowrap;
}

/* Auf der Produktseite etwas größer — das Overlay ist Teil der Kaufentscheidung. */
.single-product div.product span.onsale.zwcl-sale-flash {
	top: 16px;
	left: 16px;
	font-size: .95rem;
	padding: .5em 1em;
}

/* ---------------------------------------------------------------------
 * 2) Preisblock: Aktionspreis betonen, Streichpreis zurücknehmen
 * ------------------------------------------------------------------ */
.single-product div.product p.price del {
	opacity: .55;
	font-size: .72em;
	text-decoration-thickness: 2px;
}

.single-product div.product p.price ins {
	color: #A85F3E;
	text-decoration: none;
	font-weight: 700;
}

/* ---------------------------------------------------------------------
 * 3) Ersparnis-Zeile unter dem Preis
 * ------------------------------------------------------------------ */
.zwcl-sale-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em;
	margin: .35em 0 .2em;
	font-size: .95rem;
}

.zwcl-sale-summary__badge {
	background: #C97955;
	color: #fff;
	border-radius: 6px;
	padding: .18em .6em;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.zwcl-sale-summary__save {
	color: #A85F3E;
	font-weight: 600;
}

.zwcl-sale-summary__until {
	color: #64717A;
	font-size: .88em;
}