/* Kloofs Sale Offer (single home page) */
.kso {
	--kso-badge-w: 180px;
	--kso-badge-x: 150px;
	--kso-frame: 8px;
	--kso-badge-r: 14px;
	--kso-pull: 0px;
	--kso-was-bg: #F47A1F;
	--kso-was: #2a1300;
	--kso-save: #fff;
	--kso-now-bg: #D7A75E;
	--kso-now: #fff;
	--kso-now-w: 88%;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: calc(var(--kso-pull) * -1);
	font-family: "Montserrat", sans-serif;
	position: relative;
	z-index: 2;
}
.kso *, .kso *::before, .kso *::after { box-sizing: border-box; }

.kso-badge-wrap {
	margin-left: var(--kso-badge-x);
	width: var(--kso-badge-w);
	line-height: 0;
}
.kso-badge-wrap--frame {
	background: var(--kso-was-bg);
	padding: var(--kso-frame) var(--kso-frame) 0;
	border-radius: calc(var(--kso-badge-r) + var(--kso-frame)) calc(var(--kso-badge-r) + var(--kso-frame)) 0 0;
	margin-bottom: -1px; /* no hairline gap above the bar */
}
.kso-badge {
	border-radius: var(--kso-badge-r);
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
	transform-origin: 50% 100%;
}
.kso--wobble .kso-badge { animation: kso-wobble 4s ease-in-out infinite; }
@keyframes kso-wobble {
	0%, 80%, 100% { transform: rotate(0); }
	84% { transform: rotate(-4deg) scale(1.03); }
	88% { transform: rotate(3deg) scale(1.03); }
	92% { transform: rotate(-2deg); }
	96% { transform: rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) { .kso--wobble .kso-badge { animation: none; } }

.kso-badge--text {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1.25 / 1;
	padding: 10px;
	border-radius: 18px 18px 0 0;
	border: 6px solid var(--kso-was-bg);
	border-bottom: 0;
	background: #000;
	color: #fff;
	font-family: "Impact", "Anton", "Arial Black", sans-serif;
	font-weight: 900;
	font-size: calc(var(--kso-badge-w) * .19);
	line-height: .9;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-align: center;
	line-height: 0.95;
}

.kso-badge-wrap--frame .kso-badge--text { border: 0; border-radius: var(--kso-badge-r); }
.kso-badge-wrap--frame + .kso-was-bar { position: relative; }

.kso-was-bar {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	padding: 8px 16px;
	background: var(--kso-was-bg);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}
.kso-was { color: var(--kso-was); }
.kso-was s { text-decoration-thickness: 2px; }
.kso-save { color: var(--kso-save); text-transform: uppercase; }

.kso-now-bar {
	width: var(--kso-now-w);
	margin-top: 10px;
	padding: 12px 16px;
	background: var(--kso-now-bg);
	color: var(--kso-now);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
}
.kso--fade .kso-now-bar {
	background: linear-gradient(90deg, var(--kso-now-bg) 0%, var(--kso-now-bg) 55%, rgba(255,255,255,0) 100%);
}
/* Fallback when the colour is a hex var (gradient to transparent of same hue looks cleaner) */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
	.kso--fade .kso-now-bar {
		background: linear-gradient(90deg, var(--kso-now-bg) 0%, var(--kso-now-bg) 55%, color-mix(in srgb, var(--kso-now-bg) 0%, transparent) 100%);
	}
}

.kso-note {
	padding: 14px 16px;
	border: 1px dashed #c9c9c9;
	background: #fafafa;
	color: #555;
	font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 767px) {
	.kso-was-bar { font-size: 17px; padding: 7px 12px; }
	.kso-now-bar { font-size: 24px; width: 100%; }
}

/* Inside the orange frame the badge pulses rather than tilts, so it stays joined to the bar */
.kso--wobble .kso-badge-wrap--frame .kso-badge { animation-name: kso-pulse; transform-origin: 50% 50%; }
@keyframes kso-pulse {
	0%, 80%, 100% { transform: scale(1); }
	86% { transform: scale(1.05); }
	92% { transform: scale(.98); }
}