/* ─────────────────────────────────────────────────────────────────────────────
 * Deals — a marketplace destination, not a long-form page.
 *
 * The dedicated template removes the article-width constraint. This sheet then
 * follows the same wide canvas, type hierarchy and product grid as /browse.
 * Exclusive codes receive the brand signal; creator-run sales stay neutral so
 * Squarespell never appears to claim somebody else's promotion.
 * ───────────────────────────────────────────────────────────────────────── */

.sq-deals-main,
.sq-deals-main > .wp-block-post-content,
.sq-deals-main .sgp-deals {
	max-inline-size: none !important;
}

.sq-deals-main {
	padding: 0 0 var(--wp--preset--spacing--90) !important;
}

.sq-deals-main > .wp-block-post-content {
	padding: 0 !important;
}

.sgp-deals {
	--deals-page-pad: max(var(--wp--preset--spacing--60), calc((100vw - var(--sq-max)) / 2));
	inline-size: 100%;
	margin: 0;
	color: var(--sq-ink);
}

/* ── Marketplace hero ───────────────────────────────────────────────────── */

.sgp-deals__hero {
	padding: var(--wp--preset--spacing--50) var(--deals-page-pad) var(--wp--preset--spacing--70);
	border-block-end: 1px solid var(--sq-line);
	background: var(--sq-soft);
}

.sgp-deals__breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-t-eyebrow);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sq-muted);
}

.sgp-deals__breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.sgp-deals__breadcrumb a:hover { color: var(--sq-ink); }

.sgp-deals__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 32rem);
	gap: var(--wp--preset--spacing--80);
	align-items: end;
	padding-block-start: var(--wp--preset--spacing--60);
}

.sgp-deals__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-semibold);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sq-signal-ink);
}

.sgp-deals__title {
	max-inline-size: 14ch;
	margin: 0 !important;
	font-family: var(--sq-font-sans) !important;
	font-size: var(--sq-t-h1) !important;
	font-weight: var(--sq-w-semibold) !important;
	line-height: var(--sq-lh-h1) !important;
	letter-spacing: var(--sq-ls-h1) !important;
	text-wrap: balance;
}

.sgp-deals__promise > p {
	margin: 0;
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-body);
	color: var(--sq-muted);
}

.sgp-deals__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: var(--wp--preset--spacing--50) 0 0;
	border-block-start: 1px solid var(--sq-line);
}

.sgp-deals__stats div {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--wp--preset--spacing--20);
}

.sgp-deals__stats dt {
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-semibold);
	color: var(--sq-muted);
}

.sgp-deals__stats dd {
	margin: 0;
	font-family: var(--sq-font-sans);
	font-size: var(--sq-t-h2);
	font-weight: var(--sq-w-semibold);
	line-height: var(--sq-lh-h1);
}

/* ── Offer directory ────────────────────────────────────────────────────── */

.sgp-deals__directory,
.sgp-deals__list,
.sgp-deals__note,
.sgp-deals__empty {
	inline-size: min(calc(100% - (2 * var(--wp--preset--spacing--60))), var(--sq-max));
	margin-inline: auto;
}

.sgp-deals__directory {
	padding-block: var(--wp--preset--spacing--70);
}

.sgp-deals__directory-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--50);
}

.sgp-deals__directory-head .sgp-deals__eyebrow {
	margin-block-end: var(--wp--preset--spacing--20);
}

.sgp-deals__directory-head h2 {
	margin: 0 !important;
	font-size: var(--sq-t-h2) !important;
	letter-spacing: var(--sq-ls-h1) !important;
}

.sgp-deals__directory-head > p {
	margin: 0;
	font-size: var(--sq-t-p3);
	color: var(--sq-muted);
}

.sgp-deals__jumps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
}

.sgp-deals__jumps a {
	display: flex;
	min-block-size: var(--wp--preset--spacing--80);
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--40);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--sq-sheet);
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	text-decoration: none;
	transition: border-color var(--wp--custom--transition--fast), transform var(--wp--custom--transition--fast);
}

.sgp-deals__jumps a:hover {
	border-color: var(--sq-ink);
	transform: translateY(-1px);
}

.sgp-deals__jumps strong {
	flex: none;
	font-size: var(--sq-t-eyebrow);
	color: var(--sq-signal-ink);
}

/* ── Offer sections ─────────────────────────────────────────────────────── */

.sgp-deals__list {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.sgp-deal {
	scroll-margin-block-start: var(--wp--preset--spacing--40);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-sheet);
	overflow: clip;
}

.sgp-deal__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
	padding: var(--wp--preset--spacing--60);
}

.sgp-deal__kind {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-soft);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-semibold);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sq-muted);
}

.sgp-deal--code .sgp-deal__kind {
	background: var(--wp--preset--color--brand-soft);
	color: var(--sq-signal-ink);
}

.sgp-deal__kind-icon {
	inline-size: var(--wp--preset--spacing--40);
	block-size: var(--wp--preset--spacing--40);
	stroke: currentColor;
}

.sgp-deal__name {
	margin: 0 !important;
	font-size: var(--sq-t-h3) !important;
	line-height: var(--sq-lh-h1) !important;
	letter-spacing: var(--sq-ls-h1) !important;
}

.sgp-deal__name a {
	color: inherit;
	text-decoration: none;
}

.sgp-deal__name a:hover {
	text-decoration: underline;
	text-decoration-thickness: .06em;
	text-underline-offset: .14em;
}

.sgp-deal__offer {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--40) 0 0;
}

.sgp-deal__offer strong {
	font-family: var(--sq-font-sans);
	font-size: var(--sq-t-h1);
	font-weight: var(--sq-w-bold);
	line-height: var(--sq-lh-h1);
	letter-spacing: var(--sq-ls-h1);
}

.sgp-deal--code .sgp-deal__offer strong { color: var(--sq-signal-ink); }

.sgp-deal__offer span {
	font-size: var(--sq-t-h4);
	font-weight: var(--sq-w-semibold);
}

.sgp-deal__scope {
	max-inline-size: 58ch;
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-body);
	color: var(--sq-muted);
}

.sgp-deal__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: var(--wp--preset--spacing--40) 0 0;
	border-block-start: 1px solid var(--sq-line);
	list-style: none;
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-semibold);
	color: var(--sq-muted);
}

.sgp-deal__facts li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.sgp-deal__facts li::before {
	content: "";
	inline-size: var(--wp--preset--spacing--20);
	block-size: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--sq-muted);
}

/* ── Redemption panel ───────────────────────────────────────────────────── */

.sgp-deal__act {
	display: flex;
	min-block-size: 100%;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-soft);
}

.sgp-deal--code .sgp-deal__act {
	background: var(--sq-ink);
	color: var(--sq-paper);
}

.sgp-deal__act-label {
	margin: 0;
	font-family: var(--sq-font-mono);
	font-size: var(--sq-t-p3);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
	color: color-mix(in srgb, currentColor 72%, transparent);
}

.sgp-deal__code-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--20);
}

.sgp-deal__code {
	display: flex;
	min-inline-size: 0;
	min-block-size: var(--wp--preset--spacing--80);
	align-items: center;
	padding-inline: var(--wp--preset--spacing--40);
	border: 1px dashed color-mix(in srgb, currentColor 38%, transparent);
	border-radius: var(--wp--custom--radius--md);
	background: color-mix(in srgb, currentColor 8%, transparent);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-semibold);
	letter-spacing: var(--sq-ls-body);
	overflow-wrap: anywhere;
}

.sgp-deal__copy {
	display: inline-flex;
	min-block-size: var(--wp--preset--spacing--80);
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--preset--spacing--40);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	background: var(--sq-signal);
	color: var(--wp--preset--color--on-signal);
	font-family: inherit;
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-bold);
	cursor: pointer;
}

.sgp-deal__copy:hover { background: var(--sq-signal-ink); }

.sgp-deal__copy.is-done {
	background: var(--sq-good);
	color: var(--wp--preset--color--on-signal);
}

.sgp-deal__copy:focus-visible {
	outline: 2px solid var(--sq-signal);
	outline-offset: 3px;
}

.sgp-deal__copy-icon {
	inline-size: var(--wp--preset--spacing--40);
	block-size: var(--wp--preset--spacing--40);
	stroke: currentColor;
}

.sgp-deal__maths {
	margin: 0;
	font-size: var(--sq-t-p3);
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, currentColor 72%, transparent);
}

.sgp-deal__no-code {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
}

.sgp-deal__no-code-icon {
	inline-size: var(--wp--preset--spacing--60);
	block-size: var(--wp--preset--spacing--60);
	flex: none;
	stroke: var(--sq-good);
}

.sgp-deal__no-code strong,
.sgp-deal__no-code span { display: block; }

.sgp-deal__no-code strong {
	margin-block-end: var(--wp--preset--spacing--20);
	font-size: var(--sq-t-p2);
}

.sgp-deal__no-code span {
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-supporting);
	color: var(--sq-muted);
}

/* ── Product preview ────────────────────────────────────────────────────── */

.sgp-deal__products {
	padding: var(--wp--preset--spacing--60);
	border-block-start: 1px solid var(--sq-line);
	background: color-mix(in srgb, var(--sq-soft) 55%, transparent);
}

.sgp-deal__products-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--40);
}

.sgp-deal__products-head h3 {
	margin: 0 !important;
	font-family: var(--sq-font-sans) !important;
	font-size: var(--sq-t-p2) !important;
	font-weight: var(--sq-w-bold) !important;
	letter-spacing: 0 !important;
}

.sgp-deal__products-head p {
	margin: 0;
	font-size: var(--sq-t-p3);
	color: var(--sq-muted);
}

.sgp-deal__grid.sgp-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) !important;
}

.sgp-deal__more {
	margin: 0;
	padding: 0 var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
	background: color-mix(in srgb, var(--sq-soft) 55%, transparent);
}

.sgp-deal__more a {
	display: inline-flex;
	min-block-size: var(--wp--preset--spacing--70);
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: var(--sq-ink);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-bold);
	text-underline-offset: .2em;
}

.sgp-deal__more-icon {
	inline-size: var(--wp--preset--spacing--40);
	block-size: var(--wp--preset--spacing--40);
	stroke: currentColor;
}

/* ── Disclosure and empty state ─────────────────────────────────────────── */

.sgp-deals__note,
.sgp-deals__empty {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--sq-line);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sq-soft);
}

.sgp-deals__note-icon,
.sgp-deals__empty-icon {
	inline-size: var(--wp--preset--spacing--60);
	block-size: var(--wp--preset--spacing--60);
	stroke: var(--sq-muted);
}

.sgp-deals__note h2,
.sgp-deals__empty h2 {
	margin: 0 0 var(--wp--preset--spacing--20) !important;
	font-family: var(--sq-font-sans) !important;
	font-size: var(--sq-t-p2) !important;
	font-weight: var(--sq-w-bold) !important;
	letter-spacing: 0 !important;
}

.sgp-deals__note p,
.sgp-deals__empty p {
	max-inline-size: var(--sq-measure);
	margin: 0;
	font-size: var(--sq-t-p2);
	line-height: var(--sq-lh-body);
	color: var(--sq-muted);
}

/* ── Responsive behaviour ───────────────────────────────────────────────── */

@media (max-width: 900px) {
	.sgp-deals__intro,
	.sgp-deal__head {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}

	.sgp-deals__title { max-inline-size: 18ch; }

	.sgp-deal__grid.sgp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.sgp-deals {
		--deals-page-pad: var(--wp--preset--spacing--50);
	}

	.sgp-deals__hero { padding-block-start: var(--wp--preset--spacing--40); }

	.sgp-deals__intro {
		gap: var(--wp--preset--spacing--50);
		padding-block-start: var(--wp--preset--spacing--50);
	}

	/* The H1 clamp already steps down to 2.5rem on a narrow viewport; forcing the H2
	   role here flattened the page's only heading against its section headings. */

	.sgp-deals__directory,
	.sgp-deals__list,
	.sgp-deals__note,
	.sgp-deals__empty {
		/*
		 * Same box-model trap as the jump rail above: this asks for the viewport less a gutter
		 * each side, then adds 24px of padding and a 1px border OUTSIDE it, so the panel came
		 * out 2px wider than the screen and the document kept a sliver of sideways scroll even
		 * after the rail was fixed. Scoped to this breakpoint — the desktop rule sizes against
		 * a different token and is left exactly as it renders today.
		 */
		box-sizing: border-box;
		inline-size: calc(100% - (2 * var(--wp--preset--spacing--50)));
	}

	.sgp-deals__directory-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.sgp-deals__jumps {
		display: flex;
		/*
		 * The bleed arithmetic was right and the box model was not.
		 *
		 * `inline-size` here resolves to exactly the viewport — the section's own width plus
		 * the 24px gutter it sits inside, twice — and the negative margins put the rail's left
		 * edge at 0. But nothing in this theme sets `border-box`, so the 24px of padding on
		 * each side was added OUTSIDE that width: the rail measured 438px inside a 390px
		 * viewport and the whole document scrolled sideways by 48px at every mobile size.
		 *
		 * With the padding counted in, the rail is exactly as wide as the screen, the chips
		 * still start hard against the left edge, and the scrolling stays where it belongs —
		 * inside the rail, which is what `overflow-x: auto` below is for.
		 */
		box-sizing: border-box;
		inline-size: calc(100% + (2 * var(--wp--preset--spacing--50)));
		margin-inline: calc(-1 * var(--wp--preset--spacing--50));
		padding-inline: var(--wp--preset--spacing--50);
		/*
		 * Room for a focus ring, taken back out of the flow.
		 *
		 * Scrolling on one axis makes the other axis scroll too, so this box clips vertically
		 * even though nothing overflows it — and a chip's 2px outline at 2px offset was being
		 * sliced off top and bottom. The padding gives the ring its 4px; the equal negative
		 * margin means the rail still occupies exactly the height it did before.
		 */
		padding-block: 4px;
		margin-block: -4px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.sgp-deals__jumps::-webkit-scrollbar { display: none; }

	.sgp-deals__jumps a {
		min-inline-size: min(17rem, 82vw);
	}

	.sgp-deal__head,
	.sgp-deal__products {
		padding: var(--wp--preset--spacing--50);
	}

	.sgp-deal__grid.sgp-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.sgp-deal__more {
		padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	}

	.sgp-deal__code-row { grid-template-columns: minmax(0, 1fr); }

	.sgp-deal__copy { inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.sgp-deals__jumps a { transition: none; }
	.sgp-deals__jumps a:hover { transform: none; }
}