.wso-offer {
		margin: 24px 14px;
		/* The mobile badge is smaller than the desktop one. Everything that
		   depends on it (the overlap below, the ٪ glyph, the icon) follows
		   automatically because they are all calc()'d from this. */
		--wso-badge-size: 84px;
	}

	.wso-offer__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		background: linear-gradient(180deg, var(--wso-mobile-bg) 0%, var(--wso-mobile-bg-2) 100%);
		color: var(--wso-mobile-text);
		border-radius: 0 0 28px 28px;
		/* Top padding and the decorative curve MUST be the same height or
		   the badge lands halfway off the arc. One variable, one truth. */
		padding: var(--wso-curve-h, 46px) 22px 30px;
		box-shadow: 0 16px 36px rgba(10, 40, 100, 0.28);
		border: none;
		gap: 16px;
	}

	.wso-offer__inner::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: var(--wso-curve-h, 46px);
		background: var(--wso-mobile-bg);
		border-radius: 0 0 50% 50% / 0 0 100% 100%;
		z-index: 0;
	}

	.wso-offer__badge-col,
	.wso-offer__media-col,
	.wso-offer__info-col {
		order: initial;
		flex: none;
		width: 100%;
		z-index: 1;
		text-align: center;
	}

	/* Badge overlaps the curved top edge.
	   -70px was hand-tuned for an 84px badge. The Elementor "badge size"
	   control is responsive, so the moment anyone changed the size the
	   badge either floated away from the card or sank into it. Deriving
	   the pull-up from the size keeps the two locked together. */
	.wso-offer__badge-col {
		margin-top: calc(-1 * (var(--wso-badge-size, 84px) / 2 + var(--wso-badge-overlap, 28px)));
		align-items: center;
	}
	.wso-offer__badge {
		/* width/height now come from --wso-badge-size (set above). */
		box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18),
		            0 8px 22px rgba(0, 0, 0, 0.25);
	}
	.wso-offer__badge-text {
		color: #fff;
		font-size: 16px;
		max-width: 240px;
	}

	.wso-offer__timer {
		justify-content: center;
	}

	.wso-offer__media-col {
		order: 2;
	}
	.wso-offer__logo {
		filter: brightness(0) invert(1);
		align-self: center;
	}
	.wso-offer__slider.swiper {
		max-width: 260px;
	}
	.wso-offer__nav {
		background: rgba(255, 255, 255, 0.85);
	}

	.wso-offer__info-col {
		align-items: center;
		gap: 10px;
	}
	.wso-offer__title {
		color: #fff;
		font-size: 18px;
	}
	.wso-offer__specs {
		color: rgba(255, 255, 255, 0.85);
	}
	.wso-offer__price-row {
		justify-content: center;
		background: #ffffff;
		border-radius: 14px;
		padding: 12px 16px;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
	}
	.wso-offer__discount-badge {
		background: #fff2ea;
	}
	.wso-offer__price-regular {
		color: #8a8a8a;
	}
	.wso-offer__price-sale {
		color: var(--wso-price-color);
		text-shadow: none;
	}
	.wso-offer__cta {
		width: 100%;
	}