/* ==========================================================================
   SDP — Components: buttons, hero, category tiles, deals, trust, cards
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------- */
.sdp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sdp-3);
	padding: .8rem 1.6rem;
	border: 0;
	cursor: pointer;
	border-radius: var(--sdp-r-pill);
	font-family: var(--sdp-font-head);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}
.sdp-btn svg { inline-size: 1.15rem; block-size: 1.15rem; flex: 0 0 auto; }
.sdp-btn--lg { padding: 1rem 2rem; font-size: 1rem; }
.sdp-btn--sm { padding: .55rem 1.1rem; font-size: .8125rem; }
.sdp-btn--block { inline-size: 100%; }

/* Filled clay buttons inherit .clay-solid + a colour modifier */
.sdp-btn.clay-solid:hover { color: var(--sdp-white); }
.sdp-btn.clay-solid--amber:hover { color: #6A4405; }

/* Ghost clay button — white body, coloured label (the "View All" pill) */
.sdp-btn--ghost {
	background: var(--sdp-white);
	color: var(--sdp-ink);
	box-shadow: var(--sdp-clay-sm);
	transition: transform var(--sdp-dur) var(--sdp-ease-squish), box-shadow var(--sdp-dur) var(--sdp-ease-out);
}
.sdp-btn--ghost:hover,
.sdp-btn--ghost:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--sdp-clay-hover);
	color: var(--sdp-purple-600);
}
.sdp-btn--ghost:active {
	transform: translateY(1px) scale(.985);
	box-shadow: var(--sdp-clay-pressed);
	transition-duration: var(--sdp-dur-fast);
}

/* WhatsApp button: white body with a green clay disc holding the glyph */
.sdp-btn--wa .sdp-btn__disc {
	display: grid;
	place-items: center;
	inline-size: 1.9rem;
	block-size: 1.9rem;
	border-radius: 50%;
	background: linear-gradient(150deg, #4BE58A, var(--sdp-whatsapp) 60%, #12A44C);
	color: var(--sdp-white);
	box-shadow: 3px 4px 8px rgba(37, 211, 102, .38), inset 1px 2px 4px rgba(255, 255, 255, .45);
}
.sdp-btn--wa .sdp-btn__disc svg { inline-size: 1.05rem; block-size: 1.05rem; }

/* --- Eyebrow / kicker ----------------------------------------------------- */
.sdp-eyebrow {
	display: block;
	margin-bottom: var(--sdp-3);
	font-family: var(--sdp-font-head);
	font-size: var(--sdp-text-base);
	font-weight: 500;
	color: var(--sdp-pink-600);
}

.sdp-script { font-family: var(--sdp-font-script); color: var(--sdp-ink); }

/* --- Hero ----------------------------------------------------------------- */
.sdp-hero { position: relative; padding-block: clamp(2rem, 1rem + 4vw, 4rem) 0; }

.sdp-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	grid-template-columns: 1fr 1fr;
	align-items: center;
	/*
	 * Clearance for the promise strip, which is pulled up by a negative
	 * margin. Without it the strip rides over the hero buttons and the art
	 * instead of overlapping empty ground — the "merge" between the two.
	 */
	padding-bottom: clamp(2.5rem, 1rem + 4vw, 4.5rem);
}
@media (max-width: 900px) {
	.sdp-hero__inner { grid-template-columns: 1fr; }
	.sdp-hero__art { order: -1; }
}

.sdp-hero__title { font-size: var(--sdp-text-4xl); margin-bottom: var(--sdp-5); }
.sdp-hero__title em { font-style: normal; color: var(--sdp-pink); }
.sdp-hero__lede { font-size: var(--sdp-text-lg); max-inline-size: 40ch; margin-bottom: var(--sdp-8); }

.sdp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sdp-4); }

/* The arched clay panel holding the nursery illustration */
.sdp-hero__art { position: relative; min-block-size: clamp(20rem, 34vw, 28rem); }
.sdp-hero__panel {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	padding: var(--sdp-6);
	border-radius: var(--sdp-r-2xl);
	background: linear-gradient(160deg, #E9E5FD 0%, #D9D2FA 48%, #C9C0F6 100%);
	box-shadow: var(--sdp-clay-lg);
	overflow: hidden;
}
.sdp-hero__panel svg { inline-size: 100%; block-size: auto; }

.sdp-hero__blob--1 { inline-size: 22rem; block-size: 22rem; inset-block-start: -4rem; inset-inline-end: -6rem; background: rgba(255, 122, 174, .30); }
.sdp-hero__blob--2 { inline-size: 17rem; block-size: 17rem; inset-block-end: -5rem; inset-inline-start: -7rem; background: rgba(255, 184, 77, .28); animation-delay: -6s; }
.sdp-hero__blob--3 { inline-size: 13rem; block-size: 13rem; inset-block-end: 2rem;  inset-inline-end: 30%;  background: rgba(34, 193, 161, .22); animation-delay: -11s; }

/* --- Feature strip (Quality / Best Prices / Delivery / Caring) ------------- */
.sdp-features {
	position: relative;
	z-index: 2;
	/* Overlaps the clearance added to .sdp-hero__inner above, never the content. */
	margin-top: clamp(-3.5rem, -2vw, -1.5rem);
	margin-bottom: var(--sdp-2);
	padding: var(--sdp-6) clamp(var(--sdp-5), 3vw, var(--sdp-10));
	border-radius: var(--sdp-r-xl);
	background: var(--sdp-white);
	box-shadow: var(--sdp-clay-lg);
}
.sdp-features__grid {
	display: grid;
	gap: var(--sdp-5);
	grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}
.sdp-feature { display: flex; align-items: center; gap: var(--sdp-4); }
.sdp-feature__title {
	display: block;
	margin: 0;
	font-family: var(--sdp-font-head);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--sdp-ink);
	line-height: 1.3;
}
.sdp-feature__sub { display: block; margin: 0; font-size: var(--sdp-text-sm); color: var(--sdp-ink-faint); }

/* --- Category tiles ------------------------------------------------------- */
.sdp-cats { --min: 10.5rem; }
.sdp-cat {
	display: grid;
	justify-items: center;
	gap: var(--sdp-4);
	padding: var(--sdp-6) var(--sdp-4);
	text-align: center;
	text-decoration: none;
	background: var(--sdp-white);
}
.sdp-cat__name {
	font-family: var(--sdp-font-head);
	font-size: 1rem;
	font-weight: 600;
	color: var(--sdp-ink);
}
.sdp-cat__count { font-size: var(--sdp-text-sm); color: var(--sdp-ink-faint); margin-top: -.35rem; }

/* --- Deal banner ---------------------------------------------------------- */
.sdp-deal {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	align-items: center;
	gap: var(--sdp-6);
	padding: clamp(var(--sdp-6), 3vw, var(--sdp-10));
	border-radius: var(--sdp-r-2xl);
	background: linear-gradient(135deg, #7FD8C6 0%, var(--sdp-teal) 42%, #16A98B 100%);
	box-shadow: var(--sdp-clay-lg);
	overflow: hidden;
	--sdp-clay-tint: 34, 193, 161;
}
@media (max-width: 820px) { .sdp-deal { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

.sdp-deal__eyebrow {
	font-family: var(--sdp-font-head);
	font-weight: 500;
	color: rgba(255, 255, 255, .88);
	margin-bottom: var(--sdp-2);
}
.sdp-deal__title { color: var(--sdp-white); font-size: var(--sdp-text-3xl); margin-bottom: var(--sdp-6); }
.sdp-deal__art { position: relative; display: grid; place-items: center; }
.sdp-deal__art svg { inline-size: min(100%, 22rem); block-size: auto; }

/* The rosette "upto 25% OFF" badge */
.sdp-deal__badge {
	position: absolute;
	inset-block-start: clamp(1rem, 3vw, 2.5rem);
	inset-inline-end: clamp(1rem, 3vw, 2.5rem);
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: clamp(5rem, 9vw, 6.75rem);
	block-size: clamp(5rem, 9vw, 6.75rem);
	padding: var(--sdp-2);
	text-align: center;
	color: var(--sdp-white);
	background: linear-gradient(150deg, #8073F0, var(--sdp-purple) 55%, var(--sdp-purple-700));
	border-radius: 42% 58% 55% 45% / 52% 46% 54% 48%;
	box-shadow: 6px 9px 18px rgba(59, 48, 114, .34), inset 3px 4px 8px rgba(255, 255, 255, .32), inset -4px -5px 10px rgba(0, 0, 0, .16);
	animation: sdp-float 7s ease-in-out infinite;
}
.sdp-deal__badge span { display: block; font-family: var(--sdp-font-head); font-size: .68rem; font-weight: 500; line-height: 1.1; }
.sdp-deal__badge strong { display: block; font-family: var(--sdp-font-head); font-size: 1.5rem; font-weight: 700; line-height: 1; }

/* --- Trust cards ---------------------------------------------------------- */
.sdp-trust { --min: 15rem; }
.sdp-trustcard {
	display: flex;
	align-items: center;
	gap: var(--sdp-4);
	padding: var(--sdp-6);
	border-radius: var(--sdp-r-xl);
}
.sdp-trustcard p { margin: 0; font-family: var(--sdp-font-head); font-size: 1rem; color: var(--sdp-ink); line-height: 1.4; }
.sdp-trustcard p strong { display: block; font-weight: 700; }
.sdp-trustcard__icon { inline-size: 3.75rem; block-size: 3.75rem; flex: 0 0 auto; }

/* --- Values row (Love / Safety / Quality / Trust / Care) ------------------ */
.sdp-values { --min: 11rem; text-align: center; }
.sdp-value { display: grid; justify-items: center; gap: var(--sdp-3); padding: var(--sdp-5) var(--sdp-3); }
.sdp-value__name {
	font-family: var(--sdp-font-head);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sdp-ink);
}
.sdp-value__desc { font-size: var(--sdp-text-sm); color: var(--sdp-ink-faint); max-inline-size: 18ch; margin: 0; }

/* --- Generic content card (blog, page teaser) ---------------------------- */
.sdp-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--sdp-white);
}
.sdp-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sdp-purple-050); }
.sdp-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--sdp-dur-slow) var(--sdp-ease-out); }
.sdp-card:hover .sdp-card__media img { transform: scale(1.05); }
.sdp-card__body { padding: var(--sdp-5) var(--sdp-6) var(--sdp-6); display: grid; gap: var(--sdp-2); }
.sdp-card__title { font-size: var(--sdp-text-lg); margin: 0; }
.sdp-card__title a { color: inherit; text-decoration: none; }
.sdp-card__meta { font-size: var(--sdp-text-sm); color: var(--sdp-ink-faint); }

/* --- Badges / chips ------------------------------------------------------- */
.sdp-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sdp-2);
	padding: .3rem .8rem;
	border-radius: var(--sdp-r-pill);
	font-family: var(--sdp-font-head);
	font-size: var(--sdp-text-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sdp-white);
	background: var(--sdp-pink);
	box-shadow: 3px 4px 9px rgba(255, 122, 174, .38), inset 1px 2px 4px rgba(255, 255, 255, .35);
}
.sdp-badge--teal   { background: var(--sdp-teal);   box-shadow: 3px 4px 9px rgba(34, 193, 161, .38), inset 1px 2px 4px rgba(255, 255, 255, .35); }
.sdp-badge--amber  { background: var(--sdp-amber);  color: #6A4405; box-shadow: 3px 4px 9px rgba(255, 184, 77, .40), inset 1px 2px 4px rgba(255, 255, 255, .45); }
.sdp-badge--purple { background: var(--sdp-purple); box-shadow: 3px 4px 9px rgba(109, 96, 231, .38), inset 1px 2px 4px rgba(255, 255, 255, .35); }

/* --- Page hero (inner pages) --------------------------------------------- */
.sdp-pagehero {
	position: relative;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	text-align: center;
}
.sdp-pagehero__title { margin-bottom: var(--sdp-3); }
.sdp-breadcrumb {
	font-size: var(--sdp-text-sm);
	color: var(--sdp-ink-faint);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sdp-2);
}
.sdp-breadcrumb a { color: var(--sdp-ink-soft); text-decoration: none; }
.sdp-breadcrumb a:hover { color: var(--sdp-purple-600); }

/* --- Pagination ----------------------------------------------------------- */
.sdp-pagination { display: flex; justify-content: center; margin-top: var(--sdp-10); }
.sdp-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-inline-size: 2.6rem;
	block-size: 2.6rem;
	margin: 0 .2rem;
	padding-inline: .6rem;
	border-radius: var(--sdp-r-pill);
	background: var(--sdp-white);
	box-shadow: var(--sdp-clay-sm);
	font-family: var(--sdp-font-head);
	font-weight: 600;
	color: var(--sdp-ink);
	text-decoration: none;
	transition: transform var(--sdp-dur) var(--sdp-ease-squish);
}
.sdp-pagination .page-numbers:hover,
.sdp-pagination .page-numbers:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--sdp-clay-hover);
}
.sdp-pagination .page-numbers:active {
	transform: translateY(1px) scale(.96);
	box-shadow: var(--sdp-clay-pressed);
}
.sdp-pagination .page-numbers.current {
	background: linear-gradient(150deg, #8073F0, var(--sdp-purple) 60%, var(--sdp-purple-700));
	color: var(--sdp-white);
	box-shadow: var(--sdp-clay-fill);
}

/* --- Newsletter / CTA band ------------------------------------------------ */
.sdp-cta {
	display: grid;
	gap: var(--sdp-6);
	align-items: center;
	grid-template-columns: 1.2fr 1fr;
	padding: clamp(var(--sdp-6), 3vw, var(--sdp-10));
	border-radius: var(--sdp-r-2xl);
	background: linear-gradient(140deg, var(--sdp-cream) 0%, #FFE9D6 100%);
	box-shadow: var(--sdp-clay-lg);
	--sdp-clay-tint: 255, 184, 77;
}
@media (max-width: 820px) { .sdp-cta { grid-template-columns: 1fr; } }
.sdp-cta form { display: flex; flex-wrap: wrap; gap: var(--sdp-3); }
.sdp-cta input[type="email"] { flex: 1 1 14rem; }

/* --- Reveal on scroll -----------------------------------------------------
   Scoped to .sdp-js, which a one-line inline script adds to <html>. If that
   script never runs — JS disabled, a parse error — the selector never matches
   and every element stays visible instead of the page rendering blank.
   -------------------------------------------------------------------------- */
.sdp-js [data-sdp-reveal] {
	opacity: 0;
	/* 8px, not 18px: a long rise on a full-width block reads as a jolt. */
	transform: translateY(8px);
	/* Plain ease-out. The overshoot curve belongs on small controls, where
	   it feels springy; on a hero-sized block it reads as a bounce. */
	transition:
		opacity var(--sdp-dur-slow) var(--sdp-ease-out),
		transform var(--sdp-dur-slow) var(--sdp-ease-out);
	will-change: opacity, transform;
}
.sdp-js [data-sdp-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.sdp-js [data-sdp-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Cross-page fade -------------------------------------------------------
   Opt into same-origin view transitions. Browsers without support ignore the
   at-rule entirely, so there is nothing to fall back to.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: sdp-fade-out 140ms var(--sdp-ease-out) both; }
::view-transition-new(root) { animation: sdp-fade-in 220ms var(--sdp-ease-out) both; }

@keyframes sdp-fade-out { to   { opacity: 0; } }
@keyframes sdp-fade-in  { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) { animation: none; }
}

/* --- Hero depth parallax ---------------------------------------------------
   JS writes --sdp-shift (pixels of scroll past the hero). Each layer moves by
   a different fraction of it, so the blobs trail the panel and the scene gains
   depth. Transform only — no layout, no paint.
   -------------------------------------------------------------------------- */
.sdp-hero__blob--1 { transform: translate3d(0, calc(var(--sdp-shift, 0px) * 0.16), 0); }
.sdp-hero__blob--2 { transform: translate3d(0, calc(var(--sdp-shift, 0px) * 0.10), 0); }
.sdp-hero__blob--3 { transform: translate3d(0, calc(var(--sdp-shift, 0px) * 0.22), 0); }

.sdp-js .sdp-hero__panel {
	transform: translate3d(0, calc(var(--sdp-shift, 0px) * -0.05), 0);
	transition: none;
}

/* The idle bob lives on an inner wrapper. Panel, floater and entrance each
   want `transform`, and a keyframe loop on the panel would silently beat the
   parallax rule above — three elements, three jobs. */
.sdp-hero__floater { inline-size: 100%; }

@media (prefers-reduced-motion: reduce) {
	.sdp-hero__blob--1,
	.sdp-hero__blob--2,
	.sdp-hero__blob--3,
	.sdp-js .sdp-hero__panel { transform: none; }
}

/* ==========================================================================
   Hero entrance — the first 900ms
   Pure CSS, so it starts painting with the document rather than waiting on a
   script. Every step uses fill-mode `both` (or `backwards` where a static
   transform must resume afterwards), so the resting state is always correct.
   ========================================================================== */

@keyframes sdp-enter-up    { from { opacity: 0; transform: translateY(14px); } }
@keyframes sdp-enter-drop  { from { opacity: 0; transform: translateY(-14px); } }
@keyframes sdp-enter-pop   { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes sdp-enter-panel { from { opacity: 0; transform: scale(.96); } }
@keyframes sdp-enter-bloom { from { opacity: 0; transform: scale(.8); } }

.sdp-is-home .sdp-header__bar { animation: sdp-enter-drop .55s var(--sdp-ease-out) both; }

.sdp-hero__copy .sdp-eyebrow { animation: sdp-enter-up .50s var(--sdp-ease-out) .10s both; }
.sdp-hero__title             { animation: sdp-enter-up .60s var(--sdp-ease-out) .18s both; }
.sdp-hero__lede              { animation: sdp-enter-up .55s var(--sdp-ease-out) .30s both; }

/* The pink half of the headline lands last — it is the line that sells. */
.sdp-hero__title em {
	display: inline-block;
	animation: sdp-enter-up .60s var(--sdp-ease-out) .38s both;
}

.sdp-hero__actions > * { animation: sdp-enter-pop .50s var(--sdp-ease-squish) both; }
.sdp-hero__actions > *:nth-child(1) { animation-delay: .44s; }
.sdp-hero__actions > *:nth-child(2) { animation-delay: .54s; }

/* `backwards`, not `both`: once this finishes the panel must fall back to the
   parallax transform declared above. */
.sdp-hero__panel { animation: sdp-enter-panel .80s var(--sdp-ease-out) .22s backwards; }

.sdp-hero__art .clay-blob { animation: sdp-enter-bloom .90s var(--sdp-ease-out) backwards; }
.sdp-hero__art .sdp-hero__blob--1 { animation-delay: .30s; }
.sdp-hero__art .sdp-hero__blob--2 { animation-delay: .42s; }
.sdp-hero__art .sdp-hero__blob--3 { animation-delay: .54s; }

.sdp-features { animation: sdp-enter-up .60s var(--sdp-ease-out) .64s both; }

/* ==========================================================================
   Living hero scene — ambient motion inside the SVG
   ========================================================================== */

.sdp-art__moon,
.sdp-art__star,
.sdp-art__teddy,
.sdp-art__ring {
	transform-box: fill-box;
	transform-origin: center;
}

/* One-shot: the rings drop onto the spindle, bottom ring first. */
.sdp-art__ring {
	animation: sdp-ring-drop .70s var(--sdp-ease-squish) both;
	animation-delay: calc(.60s + (var(--sdp-ring, 1) * .085s));
}
@keyframes sdp-ring-drop {
	from { opacity: 0; transform: translateY(-16px) scaleX(.82); }
}

@keyframes sdp-moon-glow {
	0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 220, 147, .30)); }
	50%      { filter: drop-shadow(0 0 11px rgba(255, 220, 147, .65)); }
}
@keyframes sdp-star-twinkle {
	0%, 100% { opacity: .45; transform: scale(.85); }
	50%      { opacity: 1;   transform: scale(1.12); }
}
@keyframes sdp-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.018); }
}

/* Ambient loops are desktop-only. They run forever, and a permanent repaint
   is exactly the wrong thing to hand a mid-range Android. */
@media (min-width: 768px) {
	.sdp-art__moon  { animation: sdp-moon-glow 6s ease-in-out infinite; }
	.sdp-art__teddy { transform-origin: 50% 100%; animation: sdp-breathe 4.6s ease-in-out infinite; }

	.sdp-art__star  { animation: sdp-star-twinkle 4s ease-in-out infinite; }
	.sdp-art__star--1 { animation-delay: -.4s; animation-duration: 3.6s; }
	.sdp-art__star--2 { animation-delay: -1.9s; animation-duration: 4.8s; }
	.sdp-art__star--3 { animation-delay: -1.1s; animation-duration: 4.2s; }
	.sdp-art__star--4 { animation-delay: -2.6s; animation-duration: 5.4s; }
	.sdp-art__star--5 { animation-delay: -3.2s; animation-duration: 4.4s; }
}

/* Phones get a shorter, simpler arrival — same choreography, less waiting. */
@media (max-width: 767px) {
	.sdp-is-home .sdp-header__bar,
	.sdp-hero__copy .sdp-eyebrow,
	.sdp-hero__title,
	.sdp-hero__title em,
	.sdp-hero__lede,
	.sdp-hero__actions > *,
	.sdp-hero__panel,
	.sdp-features { animation-duration: .42s; }

	.sdp-hero__title em            { animation-delay: .26s; }
	.sdp-hero__lede                { animation-delay: .20s; }
	.sdp-hero__actions > *:nth-child(1) { animation-delay: .28s; }
	.sdp-hero__actions > *:nth-child(2) { animation-delay: .34s; }
	.sdp-hero__panel               { animation-delay: .14s; }
	.sdp-features                  { animation-delay: .40s; }

	.sdp-hero__art .clay-blob { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sdp-is-home .sdp-header__bar,
	.sdp-hero__copy .sdp-eyebrow,
	.sdp-hero__title,
	.sdp-hero__title em,
	.sdp-hero__lede,
	.sdp-hero__actions > *,
	.sdp-hero__panel,
	.sdp-features,
	.sdp-hero__art .clay-blob,
	.sdp-art__moon,
	.sdp-art__star,
	.sdp-art__teddy,
	.sdp-art__ring { animation: none; }
}

/* --- Search form ---------------------------------------------------------- */
.sdp-searchform {
	display: flex;
	gap: var(--sdp-3);
	align-items: center;
	inline-size: 100%;
}
.sdp-searchform input[type="search"] { flex: 1 1 auto; }
.sdp-searchform .sdp-btn { flex: 0 0 auto; padding-inline: 1.1rem; }

/* --- Empty states (404, no results) --------------------------------------- */
.sdp-empty {
	display: grid;
	justify-items: center;
	gap: var(--sdp-5);
	padding: clamp(var(--sdp-8), 5vw, var(--sdp-16)) var(--sdp-6);
	text-align: center;
	background: var(--sdp-white);
}
.sdp-empty h1, .sdp-empty h2 { margin: 0; }
.sdp-empty p { max-inline-size: 46ch; margin: 0; }
.sdp-empty .sdp-searchform { max-inline-size: 30rem; }

/* --- Long-form content ----------------------------------------------------- */
.sdp-prose {
	padding: clamp(var(--sdp-6), 3vw, var(--sdp-10));
	background: var(--sdp-white);
}
.sdp-prose > *:first-child { margin-top: 0; }
.sdp-prose > *:last-child  { margin-bottom: 0; }
.sdp-prose h2 { margin-top: var(--sdp-10); font-size: var(--sdp-text-2xl); }
.sdp-prose h3 { margin-top: var(--sdp-8); font-size: var(--sdp-text-xl); }
.sdp-prose__hero { margin: 0 0 var(--sdp-8); }
.sdp-prose__hero img { border-radius: var(--sdp-r-xl); box-shadow: var(--sdp-clay-md); }
.sdp-prose img { border-radius: var(--sdp-r-lg); }

.sdp-pagehero__intro { max-inline-size: 60ch; margin: 0 auto var(--sdp-4); }

/* --- Post navigation ------------------------------------------------------ */
.sdp-postnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sdp-4);
	margin-top: var(--sdp-8);
}
.sdp-postnav a {
	display: inline-block;
	padding: var(--sdp-3) var(--sdp-5);
	border-radius: var(--sdp-r-pill);
	background: var(--sdp-white);
	box-shadow: var(--sdp-clay-sm);
	font-family: var(--sdp-font-head);
	font-weight: 600;
	font-size: var(--sdp-text-sm);
	color: var(--sdp-ink);
	text-decoration: none;
	transition: transform var(--sdp-dur) var(--sdp-ease-squish);
}
.sdp-postnav a:hover { transform: translateY(-3px); }

/* --- Comments -------------------------------------------------------------- */
.sdp-comments {
	margin-top: var(--sdp-10);
	padding: clamp(var(--sdp-6), 3vw, var(--sdp-10));
	background: var(--sdp-white);
}
.sdp-comments__title { font-size: var(--sdp-text-xl); }
.sdp-comments__list { list-style: none; margin: 0 0 var(--sdp-8); padding: 0; }
.sdp-comments__list ol { list-style: none; padding-inline-start: var(--sdp-6); }
.sdp-comments__list .comment-body {
	padding: var(--sdp-5);
	margin-bottom: var(--sdp-4);
	border-radius: var(--sdp-r-lg);
	background: var(--sdp-surface-alt);
	box-shadow: var(--sdp-clay-sm);
}
.sdp-comments__list .avatar { border-radius: 50%; box-shadow: var(--sdp-clay-sm); }
.comment-form { display: grid; gap: var(--sdp-4); }
.comment-form .form-submit { margin: 0; }