.wsc-coupon-list {
	--wsc-columns: 2;
	--wsc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--wsc-card-bg: oklch(98.5% 0.009 180);
	--wsc-border: oklch(88% 0.025 190);
	--wsc-text: oklch(25% 0.025 235);
	--wsc-muted: oklch(48% 0.028 235);
	--wsc-divider: oklch(84% 0.032 190);
	--wsc-success: oklch(61% 0.17 163);
	--wsc-success-strong: oklch(47% 0.15 165);
	--wsc-offer: oklch(66% 0.19 42);
	--wsc-offer-strong: oklch(55% 0.18 37);
	--wsc-standard: oklch(58% 0.12 235);
	--wsc-on-accent: oklch(98.5% 0.006 170);
	display: grid;
	grid-template-columns: repeat(var(--wsc-columns), minmax(0, 1fr));
	gap: 12px;
	font-family: var(--wsc-font-family);
}

.wsc-coupon-list,
.wsc-coupon-list * {
	box-sizing: border-box;
}

.wsc-coupon-card {
	--wsc-accent: var(--wsc-standard);
	--wsc-accent-strong: oklch(46% 0.11 235);
	position: relative;
	display: flex;
	align-items: stretch;
	min-height: 82px;
	overflow: hidden;
	color: var(--wsc-text);
	background: var(--wsc-card-bg);
	border: 1px solid var(--wsc-border);
	border-radius: 8px;
	box-shadow: 0 7px 18px oklch(27% 0.025 230 / 0.08);
}

.wsc-coupon-card--shipping {
	--wsc-accent: var(--wsc-success);
	--wsc-accent-strong: var(--wsc-success-strong);
}

.wsc-coupon-card--discount {
	--wsc-accent: var(--wsc-offer);
	--wsc-accent-strong: var(--wsc-offer-strong);
}

.wsc-coupon-badge {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	width: auto;
	min-width: max-content;
	padding: 8px 7px;
	color: var(--wsc-on-accent);
	background: var(--wsc-accent);
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
}

.wsc-coupon-badge strong {
	display: block;
	font-size: 17px;
	line-height: 0.95;
	letter-spacing: 0;
}

.wsc-coupon-badge__icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-bottom: 2px;
	color: var(--wsc-accent);
	background: var(--wsc-on-accent);
	border-radius: 50%;
	font-size: 18px;
	font-weight: 900;
}

.wsc-coupon-content {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 11px 10px;
}

.wsc-coupon-heading {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.wsc-coupon-title {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	color: var(--wsc-text);
	font-family: var(--wsc-font-family);
	font-size: 14px;
	font-weight: 750;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wsc-coupon-code {
	flex: 0 1 auto;
	max-width: 96px;
	overflow: hidden;
	color: var(--wsc-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.wsc-coupon-description {
	display: -webkit-box;
	margin: 3px 0 0;
	overflow: hidden;
	color: var(--wsc-muted);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.wsc-coupon-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin-top: 6px;
	color: var(--wsc-muted);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
}

.wsc-coupon-status,
.wsc-coupon-countdown,
.wsc-coupon-usage {
	display: inline-flex;
	align-items: center;
	min-height: 17px;
	padding: 2px 5px;
	border-radius: 4px;
	white-space: nowrap;
}

.wsc-coupon-status {
	color: oklch(42% 0.14 163);
	background: oklch(93% 0.04 162);
}

.wsc-coupon-countdown {
	color: oklch(49% 0.16 38);
	background: oklch(94% 0.055 52);
}

.wsc-coupon-usage {
	color: oklch(45% 0.1 238);
	background: oklch(93% 0.03 235);
}

.wsc-coupon-action {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 10px;
	border-left: 1px dashed var(--wsc-divider);
}

.wsc-coupon-action::before,
.wsc-coupon-action::after {
	position: absolute;
	left: -6px;
	width: 11px;
	height: 11px;
	content: "";
	background: oklch(98.5% 0.009 180);
	border: 1px solid var(--wsc-border);
	border-radius: 50%;
}

.wsc-coupon-action::before {
	top: -6px;
}

.wsc-coupon-action::after {
	bottom: -6px;
}

.wsc-coupon-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 58px;
	min-height: 32px;
	margin: 0;
	padding: 7px 10px;
	color: var(--wsc-on-accent);
	background: var(--wsc-accent);
	border: 0;
	border-radius: 6px;
	box-shadow: none;
	cursor: pointer;
	font-family: var(--wsc-font-family);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.wsc-coupon-copy:hover,
.wsc-coupon-copy:focus-visible {
	color: var(--wsc-on-accent);
	background: var(--wsc-accent-strong);
	transform: translateY(-1px);
}

.wsc-coupon-copy:focus-visible {
	outline: 2px solid oklch(78% 0.1 210);
	outline-offset: 2px;
}

.wsc-coupon-card.is-expired {
	opacity: 0.65;
}

.wsc-coupon-card.is-expired .wsc-coupon-copy {
	cursor: not-allowed;
	background: oklch(70% 0.018 235);
	transform: none;
}

.wsc-coupon-empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 14px 16px;
	color: var(--wsc-muted);
	background: var(--wsc-card-bg);
	border: 1px solid var(--wsc-border);
	border-radius: 8px;
	font-family: var(--wsc-font-family);
	font-size: 14px;
	line-height: 1.45;
}

@media (max-width: 767px) {
	.wsc-coupon-list {
		--wsc-columns: 1;
		--wsc-slide-gap: 12px;
		display: flex;
		grid-template-columns: none;
		gap: var(--wsc-slide-gap);
		overflow-x: auto;
		overflow-y: visible;
		padding-bottom: 8px;
		scroll-padding-inline: 0;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-inline: contain;
	}

	.wsc-coupon-list::-webkit-scrollbar {
		display: none;
	}

	.wsc-coupon-list > .wsc-coupon-card {
		flex: 0 0 calc(90% - var(--wsc-slide-gap));
		min-width: 0;
		max-width: calc(90% - var(--wsc-slide-gap));
		scroll-snap-align: start;
	}

	.wsc-coupon-list > .wsc-coupon-card:only-child {
		flex-basis: 100%;
		max-width: 100%;
	}

	.wsc-coupon-list > .wsc-coupon-empty {
		flex: 1 0 100%;
	}
}

@media (max-width: 430px) {
	.wsc-coupon-card {
		flex-wrap: wrap;
	}

	.wsc-coupon-action {
		flex-basis: 100%;
		justify-content: flex-start;
		padding: 8px 10px 10px;
		border-top: 1px dashed var(--wsc-divider);
		border-left: 0;
	}

	.wsc-coupon-action::before,
	.wsc-coupon-action::after {
		display: none;
	}

	.wsc-coupon-copy {
		width: auto;
		min-width: 86px;
	}
}