/**
 * JSD Single Deal
 *
 * The reading view of one deal. Same monochrome system as the cards — white
 * ground, hairline borders, black CTA, colour only from the semantic deal-type
 * badge and the retailer dot — but laid out to be read rather than scanned.
 *
 * Two columns on desktop: the product frame on the left, the decision on the
 * right. Everything below the fold is one column, because notes and links are
 * prose.
 *
 * Section padding and the 1280px measure come from section.css; this file only
 * adds what a single deal needs.
 */

.jsd-deal-single {
	--jsd-black: #000000;
	--jsd-near-black: #111111;
	--jsd-dark-gray: #333333;
	--jsd-mid-gray: #767676;
	--jsd-border: #e5e5e5;
	--jsd-hairline: #efefef;
	--jsd-off-white: #fafafa;
	--jsd-white: #ffffff;
	--jsd-faint: #a8a8a8;
	--jsd-fainter: #c4c4c4;
}

.jsd-deal-single *,
.jsd-deal-single *::before,
.jsd-deal-single *::after {
	box-sizing: border-box;
}

/*
 * Kadence gives the content area an 80px vertical margin on singles, which is
 * the theme's answer to a boxed post. This page is full-bleed and the section
 * carries its own padding, so that margin only opens a gap under the site
 * header. Three classes to beat the theme's two-class rule regardless of
 * stylesheet order — the same technique the archive uses.
 */
.jsd-deal-single-area.jsd-deal-single-area.jsd-deal-single-area {
	margin-top: 0;
	margin-bottom: 0;
}

.jsd-section--deal-single {
	padding-top: 28px;
}

/* Breadcrumb ------------------------------------------------------------- */

.jsd-deal-single__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
}

.jsd-deal-single .jsd-deal-single__crumb {
	color: var(--jsd-mid-gray);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.jsd-deal-single .jsd-deal-single__crumb:hover {
	color: var(--jsd-black);
	border-bottom-color: var(--jsd-black);
}

.jsd-deal-single .jsd-deal-single__crumb:focus-visible {
	outline: 2px solid var(--jsd-black);
	outline-offset: 3px;
}

.jsd-deal-single__crumb-sep {
	color: var(--jsd-fainter);
	font-size: 11px;
}

/* Layout ----------------------------------------------------------------- */

.jsd-deal-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 48px;
	align-items: start;
	padding-top: 28px;
	border-top: 1px solid var(--jsd-border);
}

/* Media ------------------------------------------------------------------ */

/*
 * One frame whatever the source dimensions, so a tall box and a wide TV get the
 * same footprint and the right-hand column never jumps between deals.
 */
.jsd-deal-single__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 28px;
	border: 1px solid var(--jsd-border);
	border-radius: 2px;
	background: var(--jsd-off-white);
	overflow: hidden;
}

.jsd-deal-single__media img,
.jsd-deal-single__image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/*
 * No-image fallback. The frame keeps its ratio and ground; the shared
 * JSD-owned component in media-fallback.css fills it, at the same scale
 * relationship the cards use, so this page and the grid are visibly the same
 * system. Nothing here depicts the product, and no retailer asset is used.
 */
.jsd-deal-single__media.has-no-image {
	border-color: var(--jsd-hairline);
}

/* Badges ----------------------------------------------------------------- */

.jsd-deal-single__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.jsd-deal-single .jsd-deal-single__badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border: 1px solid var(--jsd-badge-color, var(--jsd-near-black));
	border-radius: 2px;
	color: var(--jsd-badge-color, var(--jsd-near-black));
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.jsd-deal-single .jsd-deal-single__badge--featured {
	border-color: var(--jsd-near-black);
	background: var(--jsd-near-black);
	color: var(--jsd-white);
}

/* Retailer + title ------------------------------------------------------- */

/*
 * Same treatment as the cards: the store name takes its accent from the custom
 * property JSD_Core_Retailers prints here, and nothing else on the page moves
 * off monochrome. It is an identity accent, not an endorsement — the page says
 * "available from", never "official".
 */
.jsd-deal-single .jsd-deal-single__retailer {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
	color: var(--jsd-retailer-label, var(--jsd-mid-gray));
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.jsd-deal-single .jsd-deal-single__retailer-dot {
	width: 7px;
	height: 7px;
}

.jsd-deal-single .jsd-deal-single__title {
	margin: 0;
	color: var(--jsd-black);
	font-size: clamp(1.625rem, 3.2vw, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* Pricing ---------------------------------------------------------------- */

.jsd-deal-single__pricing {
	margin: 24px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--jsd-hairline);
}

.jsd-deal-single .jsd-deal-single__price {
	margin: 0;
	color: var(--jsd-black);
	font-size: clamp(2rem, 4.4vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.jsd-deal-single .jsd-deal-single__price-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	margin: 12px 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.jsd-deal-single__was {
	color: var(--jsd-mid-gray);
}

.jsd-deal-single__was s {
	text-decoration-thickness: 1px;
}

.jsd-deal-single__savings {
	color: var(--jsd-near-black);
	font-weight: 700;
}

.jsd-deal-single .jsd-deal-single__no-reference {
	margin: 12px 0 0;
	color: var(--jsd-mid-gray);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* Actions ---------------------------------------------------------------- */

.jsd-deal-single__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 26px 0 0;
}

.jsd-deal-single .jsd-deal-single__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 40px;
	border: 1px solid var(--jsd-black);
	border-radius: 2px;
	background: var(--jsd-black);
	color: var(--jsd-white);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.jsd-deal-single a.jsd-deal-single__cta:hover {
	border-color: var(--jsd-dark-gray);
	background: var(--jsd-dark-gray);
	color: var(--jsd-white);
}

.jsd-deal-single a.jsd-deal-single__cta:focus-visible {
	outline: 2px solid var(--jsd-black);
	outline-offset: 3px;
}

.jsd-deal-single .jsd-deal-single__cta--disabled {
	border-color: var(--jsd-border);
	background: var(--jsd-white);
	color: var(--jsd-mid-gray);
	cursor: default;
}

.jsd-deal-single .jsd-deal-single__expiry {
	margin: 0;
	color: var(--jsd-mid-gray);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Disclaimer ------------------------------------------------------------- */

.jsd-deal-single .jsd-deal-single__disclaimer {
	max-width: 62ch;
	margin: 20px 0 0;
	color: var(--jsd-mid-gray);
	font-size: 0.8125rem;
	line-height: 1.65;
}

.jsd-deal-single__listed {
	color: var(--jsd-faint);
}

/* Editorial note --------------------------------------------------------- */

.jsd-deal-single__note {
	margin: 56px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--jsd-border);
}

.jsd-deal-single .jsd-deal-single__note-heading,
.jsd-deal-single .jsd-deal-single__terms-heading {
	margin: 0;
	color: var(--jsd-black);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.jsd-deal-single .jsd-deal-single__note-body {
	max-width: 68ch;
	margin: 16px 0 0;
	color: var(--jsd-dark-gray);
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* Related archives ------------------------------------------------------- */

.jsd-deal-single__terms {
	margin: 40px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--jsd-hairline);
}

.jsd-deal-single .jsd-deal-single__terms-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.jsd-deal-single .jsd-deal-single__terms-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jsd-deal-single .jsd-deal-single__term-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--jsd-border);
	border-radius: 2px;
	color: var(--jsd-near-black);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.jsd-deal-single .jsd-deal-single__term-link:hover {
	border-color: var(--jsd-near-black);
	color: var(--jsd-black);
}

.jsd-deal-single .jsd-deal-single__term-link:focus-visible {
	outline: 2px solid var(--jsd-black);
	outline-offset: 2px;
}

.jsd-deal-single__term-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: 0 0 auto;
}

/* Disclosure ------------------------------------------------------------- */

.jsd-deal-single__disclosure {
	margin: 40px 0 0;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 900px) {
	.jsd-deal-single__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* The frame stops being a column and becomes a lead image. */
	.jsd-deal-single__media {
		aspect-ratio: 16 / 10;
		padding: 20px;
	}
}

@media (max-width: 782px) {
	.jsd-section--deal-single {
		padding-top: 20px;
	}

	.jsd-deal-single .jsd-deal-single__cta {
		width: 100%;
		padding: 0 24px;
	}

	.jsd-deal-single__note {
		margin-top: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jsd-deal-single .jsd-deal-single__cta,
	.jsd-deal-single .jsd-deal-single__term-link {
		transition: none;
	}
}