.section-best-deals {
	width: 100%;
	max-width: var(--container--width);
	margin-right: auto;
	margin-left: auto;
	container: best-deals / inline-size;
}

.best-deals-header {
	display: grid;
	margin-bottom: calc(var(--layout--padding) + var(--spacing-3));
	align-items: flex-start;
	column-gap: var(--spacing-4);
	grid-template-columns: minmax(0, 1fr) auto;
}

.best-deals-header .section-title {
	display: flex;
	width: 100%;
	min-width: 0;
	margin: 0;
	color: var(--color-secondary);
	font-weight: var(--font-medium);
	white-space: nowrap;
}

.best-deals-description {
	grid-column: 1 / -1;
	max-width: 54ch;
	margin: var(--spacing-1) 0 0;
	color: var(--color-secondary);
	font-size: var(--font-small);
	line-height: 1.5;
}

.best-deals-status {
	display: inline-flex;
	margin-left: auto;
	margin-right: calc(var(--layout--offset) * -1);
	padding: 2px 0;
	align-items: center;
	flex: 0 0 auto;
	gap: .375rem;
	color: var(--color-secondary);
	font-size: .62rem;
	line-height: 1.35;
	white-space: nowrap;
}

.best-deals-status i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #39a96b;
	box-shadow: 0 0 0 3px color-mix(in srgb, #39a96b, transparent 82%);
}

.best-deals-grid {
	display: grid;
	gap: var(--spacing-4);
	margin-right: calc(var(--layout--offset) * -1);
	margin-left: calc(var(--layout--offset) * -1);
	grid-auto-rows: 1fr;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.deal-card {
	display: grid;
	min-width: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-3);
	background: var(--color-background);
	grid-template-columns: clamp(3.75rem, 6vw, 4.5rem) minmax(0, 1fr);
	overflow: hidden;
	transition: transform .3s cubic-bezier(.4,0,.2,2);
	will-change: transform;
}

.deal-card:is(:hover, :focus-within) {
	transform: scale(1.01);
}

.deal-card:active {
	transform: scale(.99);
	transition-duration: .12s;
}

.deal-card-media {
	position: relative;
	display: grid;
	height: 100%;
	min-height: clamp(6.5rem, 10vw, 7.5rem);
	background: var(--color-background-100);
	overflow: hidden;
	place-items: center;
}

.deal-card-media img {
	width: 70%;
	height: 70%;
	object-fit: contain;
	filter: drop-shadow(0 .7rem .8rem rgb(0 0 0 / 10%));
	transform: scale(1.25);
	transform-origin: center;
	transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.deal-card:is(:hover, :focus-within, :active) .deal-card-media img {
	transform: scale(1.25);
}

.deal-badge,
.deal-discount {
	display: inline-flex;
	min-height: 1.25rem;
	margin-bottom: var(--spacing-2);
	padding: 2px var(--spacing-2);
	border-radius: 999px;
	align-self: flex-end;
	align-items: center;
	flex: 0 0 auto;
	font-size: .5rem;
	font-weight: var(--font-semibold);
	line-height: 1.25;
}

.deal-badge {
	display: grid;
	width: 1.25rem;
	height: 1.25rem;
	padding: 0;
	background: #a66f00;
	color: #fff;
	font-size: .65rem;
	line-height: 1;
	place-items: center;
	text-align: center;
}

.deal-discount {
	background: var(--ghost-accent-color);
	color: #fff;
}

.deal-card-body {
	display: flex;
	height: 100%;
	min-width: 0;
	padding: clamp(var(--spacing-3), 1.2vw, var(--spacing-4));
	flex-direction: column;
}

.section-best-deals .deal-card-body > h3 {
	color: var(--color-contrast);
	font-size: .7rem !important;
	font-weight: var(--font-semibold);
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.deal-price-row {
	display: flex;
	margin-top: auto;
	padding-top: var(--spacing-3);
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--spacing-3);
	flex-wrap: wrap;
}

.deal-price-row > div {
	display: flex;
	flex-direction: column;
}

.deal-old-price {
	color: var(--color-secondary);
	font-size: .48rem;
	text-decoration: line-through;
}

.deal-price-row strong {
	color: var(--color-contrast);
	font-size: .68rem;
	font-weight: var(--font-semibold);
	letter-spacing: -.035em;
}

.deal-saving {
	color: #24794f;
	font-size: .5rem;
	font-weight: var(--font-medium);
	white-space: nowrap;
}

.deal-action {
	display: flex;
	min-height: 1.65rem;
	margin-top: var(--spacing-3);
	padding: var(--spacing-1) var(--spacing-2);
	border-radius: var(--radius-2);
	background: var(--ghost-accent-color);
	align-items: center;
	justify-content: center;
	gap: var(--spacing-4);
	color: var(--color-accent-foreground);
	font-size: .67rem;
	font-weight: var(--font-medium);
	transition: opacity .2s ease;
}

.deal-action:hover { opacity: .82; }

.deal-action svg {
	width: .8rem;
	height: .8rem;
}

.deal-action-disabled {
	background: var(--color-background-200);
	color: var(--color-secondary);
}

.best-deals-note {
	margin-top: var(--spacing-4);
	color: var(--color-secondary);
	font-size: .67rem;
	line-height: 1.45;
}

.dark .deal-badge { background: #a66f00; color: #fff; }
.dark .deal-saving { color: #76d9a5; }

@media (width <= 767px) {
	.best-deals-header { gap: var(--spacing-2); }
	.best-deals-status { padding-top: 1px; padding-bottom: 1px; }
	.best-deals-status i { width: 3px; height: 3px; box-shadow: 0 0 0 2px color-mix(in srgb, #39a96b, transparent 82%); }
}

@media (width <= 600px) {
	.best-deals-grid { grid-template-columns: 1fr; }
	.deal-card { grid-template-columns: clamp(5rem, 22vw, 6.5rem) minmax(0, 1fr); }
	.deal-card-media { min-height: 7.5rem; }
	.deal-card-media img { width: 70%; height: 70%; }
	.deal-card-body { padding: var(--spacing-4); }
	.deal-price-row {
		align-items: flex-end;
		gap: var(--spacing-2) var(--spacing-4);
	}
	.deal-saving { white-space: normal; }
}

@media (width <= 360px) {
	.best-deals-header { gap: var(--spacing-1); }
	.best-deals-status i { width: 2px; height: 2px; }
	.deal-card { grid-template-columns: 4.75rem minmax(0, 1fr); }
	.deal-card-media { min-height: 7rem; }
	.deal-card-body { padding: var(--spacing-3); }
	.deal-price-row { align-items: flex-start; flex-direction: column; gap: var(--spacing-1); }
	.deal-action { padding-right: var(--spacing-2); padding-left: var(--spacing-2); }
}

@media (prefers-reduced-motion: reduce) {
	.deal-card,
	.deal-card-media img { transition: none; }
}