/* SD Plus — membership styling, namespaced .sd-mem-*.
   Speaks the site's design language: DM Sans / DM Mono, the signature
   red->orange->blue gradient (see cc-raffles tokens), translucent cards
   with 1px borders + 3px gradient top bars, uppercase red CTAs.
   Falls back gracefully if the --ccr-* tokens aren't on the page. */

.sd-mem-page,
.sd-mem-badge,
.sd-mem-signup,
.sd-mem-account,
.sd-mem-brands {
	--sdm-accent: var(--ccr-accent, #d24034);
	--sdm-accent-2: #ff7a45;
	--sdm-blue: #38aee8;
	--sdm-card: rgba(255, 255, 255, 0.03);
	--sdm-border: rgba(255, 255, 255, 0.09);
	--sdm-border-mid: rgba(255, 255, 255, 0.17);
	--sdm-text: rgba(255, 255, 255, 0.87);
	--sdm-dim: rgba(255, 255, 255, 0.45);
	--sdm-grad: linear-gradient(90deg, var(--sdm-accent), var(--sdm-accent-2), var(--sdm-blue));
	--sdm-font: 'DM Sans', inherit, sans-serif;
	--sdm-mono: 'DM Mono', monospace;
	font-family: var(--sdm-font);
}

/* ---------------- CTA buttons -----------------------------------------
   Mirrors the site's CTA button (.ccr-btn — the "Get tickets" button on
   the Raffles page): 135deg accent gradient, 8px radius, 800 weight,
   uppercase, lift + glow on hover. Defined in our own namespace rather
   than borrowing that class, so the raffle plugin's stylesheet isn't a
   dependency of the membership pages. Keep the two in sync by eye. */
.sd-mem-btn {
	display: inline-block;
	text-align: center;
	padding: 0.8em 1.6em;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--sdm-accent, #d24034), var(--sdm-accent-2, #ff7a45));
	color: #fff !important;
	font-family: var(--sdm-font);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sd-mem-btn:hover,
.sd-mem-btn:focus,
.sd-mem-btn:active,
.sd-mem-btn:visited { text-decoration: none !important; }
.sd-mem-btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--ccr-glow, 0 10px 30px rgba(210, 64, 52, 0.45));
}
.sd-mem-btn--ghost {
	background: transparent;
	border: 1px solid var(--sdm-border-mid, rgba(128, 128, 128, 0.5));
	color: inherit !important;
	box-shadow: none;
}
.sd-mem-btn--ghost:hover { border-color: var(--sdm-blue); box-shadow: none; }

/* ---------------- Marketing / join pages ------------------------------ */
.sd-mem-page { max-width: 980px; margin: 0 auto; color: var(--sdm-text); }

/* The hero carries its own title — hide the theme's default page title
   on pages that contain it. */
body:has(.sd-mem-hero) h1.entry-title { display: none; }

.sd-mem-hero { padding: 2.5rem 0 2rem; text-align: center; }
.sd-mem-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.4em 1em;
	border: 1px solid var(--sdm-border-mid);
	border-radius: 999px;
	font-family: var(--sdm-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sdm-dim);
}
.sd-mem-chip__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--sdm-grad);
	box-shadow: 0 0 8px var(--sdm-accent-2);
}
.sd-mem-hero__title {
	margin: 0.5em 0 0.25em;
	font-size: clamp(2.4rem, 6vw, 3.6rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
}
.sd-mem-grad {
	background: var(--sdm-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sd-mem-hero__sub {
	max-width: 620px;
	margin: 0 auto 1.6rem;
	font-size: 1.08rem;
	line-height: 1.6;
	color: var(--sdm-dim);
}
.sd-mem-hero__sub strong { color: var(--sdm-text); }
.sd-mem-hero__cta { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.sd-mem-hero__fine { font-size: 0.8rem; color: var(--sdm-dim); }
.sd-mem-price-tag {
	font-family: var(--sdm-mono);
	font-variant-numeric: tabular-nums;
}

/* Perk cards: signature card w/ 3px gradient top bar */
.sd-mem-perks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 16px;
	margin: 2.2rem 0;
}
.sd-mem-perk {
	position: relative;
	overflow: hidden;
	padding: 1.4rem 1.5rem 1.3rem;
	background: var(--sdm-card);
	border: 1px solid var(--sdm-border);
	border-radius: 12px;
	transition: transform 0.18s ease, border-color 0.2s ease;
}
.sd-mem-perk:hover { transform: translateY(-2px); border-color: var(--sdm-border-mid); }
.sd-mem-perk::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--sdm-grad);
}
.sd-mem-perk h3 { margin: 0 0 0.5rem; font-size: 1.02rem; font-weight: 600; color: var(--sdm-text); }
.sd-mem-perk p { margin: 0; font-size: 0.93rem; line-height: 1.55; color: var(--sdm-dim); }

/* Section headings */
.sd-mem-page__h {
	margin: 2.6rem 0 0.4rem;
	font-size: 1.4rem;
	font-weight: 700;
	text-align: center;
}
.sd-mem-page__note { text-align: center; color: var(--sdm-dim); font-size: 0.9rem; margin-bottom: 1.2rem; }

/* How it works: numbered gradient steps */
.sd-mem-steps {
	list-style: none;
	counter-reset: sdm;
	max-width: 560px;
	margin: 1.2rem auto 1.8rem;
	padding: 0;
}
.sd-mem-steps li {
	counter-increment: sdm;
	position: relative;
	padding: 0.45rem 0 0.45rem 3rem;
	line-height: 1.55;
	color: var(--sdm-dim);
}
.sd-mem-steps li::before {
	content: counter(sdm);
	position: absolute;
	left: 0; top: 0.35rem;
	width: 2rem; height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--sdm-card);
	border: 1px solid var(--sdm-border-mid);
	font-family: var(--sdm-mono);
	font-size: 0.85rem;
	color: var(--sdm-text);
}
.sd-mem-cta-final { text-align: center; margin: 2.4rem 0 1rem; }

/* ---------------- Brand list ([sd_member_brands]) --------------------- */
.sd-mem-brands { text-align: center; }
.sd-mem-brands__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.sd-mem-brands__item {
	padding: 0.45em 1em;
	background: var(--sdm-card);
	border: 1px solid var(--sdm-border);
	border-radius: 999px;
	font-size: 0.86rem;
	color: var(--sdm-text);
	white-space: nowrap;
}
.sd-mem-brands__item--more { display: none; }
.sd-mem-brands--open .sd-mem-brands__item--more { display: inline-block; }
.sd-mem-brands__toggle {
	background: transparent;
	border: 1px solid var(--sdm-border-mid);
	border-radius: 4px;
	color: var(--sdm-dim);
	font-family: var(--sdm-font);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.7rem 1.4rem;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.sd-mem-brands__toggle:hover { border-color: var(--sdm-blue); color: var(--sdm-text); }

/* ---------------- Product-page badge ---------------------------------- */
.sd-mem-badge {
	position: relative;
	overflow: hidden;
	margin: 10px 0 6px;
	padding: 10px 14px 10px 17px;
	background: var(--sdm-card);
	border: 1px solid var(--sdm-border);
	border-radius: 8px;
	font-size: 0.95em;
	line-height: 1.45;
}
.sd-mem-badge::before {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 3px;
	background: var(--sdm-grad);
}
.sd-mem-badge__tag {
	display: inline-block;
	margin-right: 0.5em;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: var(--sdm-grad);
	color: #fff;
	font-family: var(--sdm-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	vertical-align: 1px;
}
.sd-mem-badge__price {
	font-family: var(--sdm-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--sdm-blue);
}
.sd-mem-badge__note { color: var(--sdm-dim); font-size: 0.85em; }

/* ---------------- "SD Plus Eligible" public teaser -------------------- */
/* Same pill geometry as the theme's .sd-pp__chip ("ONLINE INVENTORY") so it
   reads as part of the same tag family — in SD Plus colors, and clickable. */
.sd-mem-eligible {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	align-self: flex-start;
	padding: 3px 8px;
	border: 1px solid rgba(255, 122, 69, 0.45);
	border-radius: 99px;
	background: rgba(255, 122, 69, 0.06);
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
/* Typography is pinned in px, and marked important, for two reasons: the
   shop and product templates render at different root font sizes (rem would
   size this pill inconsistently against the chip beside it), and a theme
   rule applies negative tracking to <a> elements. These values mirror the
   theme's own .bcm-loop-prefix / .sd-pp__chip so the tags read as a set. */
.sd-mem-eligible,
a.sd-mem-eligible {
	font-family: 'DM Mono', monospace !important;
	font-size: 10px !important;
	line-height: 1.3 !important;
	letter-spacing: 0.13em !important;
}
/* Cancels the trailing letter-space, which otherwise pushes the text
   visually left of centre inside the pill. */
.sd-mem-eligible > :last-child { margin-right: -0.13em; }
.sd-mem-eligible:hover {
	border-color: rgba(255, 122, 69, 0.9);
	background: rgba(255, 122, 69, 0.14);
	transform: translateY(-1px);
}
.sd-mem-eligible__mark { color: #ff7a45; font-weight: 700; }
.sd-mem-eligible__text { color: rgba(255, 255, 255, 0.55); }
.sd-mem-eligible--block { display: inline-flex; margin-top: 8px; }
/* Product page: the inventory chip and the SD Plus pill share one tag row
   (wraps on narrow screens). The chip runs taller there than on tiles, so
   the pill takes a little extra vertical padding to match it. */
.sd-mem-tagrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.sd-mem-tagrow .sd-mem-eligible { margin-top: 0; padding-top: 4px; padding-bottom: 4px; }
/* On tiles the chip sits under the inventory tag, on its own line. */
.sd-mem-eligible--tile { display: flex; width: fit-content; margin: 5px 0 2px; }

/* On products SD Plus already discounts, the theme's manual
   "Looking for a better price? Email us!" pitch is superseded. */
body.sd-mem-eligible-product .sd-pp__blurb { display: none !important; }

/* ---------------- Archive tile price line ----------------------------- */
.sd-mem-tile {
	display: flex;
	align-items: center;
	gap: 0.45em;
	margin-top: 4px;
	font-size: 0.88em;
}
.sd-mem-tile__tag {
	padding: 2px 7px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ccr-accent, #d24034), #ff7a45, #38aee8);
	color: #fff;
	text-transform: uppercase;
	white-space: nowrap;
	/* px + important for the same reasons as .sd-mem-eligible above. */
	font-family: 'DM Mono', monospace !important;
	font-size: 9.5px !important;
	line-height: 1.3 !important;
	letter-spacing: 0.09em !important;
}
.sd-mem-tile__price {
	font-family: 'DM Mono', monospace;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: #38aee8;
}

/* ---------------- Cart/checkout savings row --------------------------- */
.sd-mem-savings th,
.sd-mem-savings td { color: #38aee8; font-weight: 600; }

/* ---------------- Signup form ----------------------------------------- */
.sd-mem-signup { max-width: 480px; margin: 0 auto; }
.sd-mem-signup__form {
	position: relative;
	overflow: hidden;
	padding: 1.5rem 1.6rem 1.6rem;
	background: var(--sdm-card);
	border: 1px solid var(--sdm-border);
	border-radius: 12px;
}
.sd-mem-signup__form::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--sdm-grad);
}
.sd-mem-signup__price { margin: 0 0 1.1rem; color: var(--sdm-dim); }
.sd-mem-signup__price strong { color: var(--sdm-text); font-family: var(--sdm-mono); }
.sd-mem-field { margin-bottom: 0.85rem; }
.sd-mem-field label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sdm-dim);
}
.sd-mem-field input {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--sdm-border-mid);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.25);
	color: var(--sdm-text);
	font-family: var(--sdm-mono);
	font-size: 1em;
	transition: border-color 0.2s ease;
}
.sd-mem-field input:focus { outline: none; border-color: var(--sdm-blue); }
.sd-mem-field--half { display: inline-block; width: calc(50% - 6px); }
.sd-mem-field--half + .sd-mem-field--half { margin-left: 8px; }
.sd-mem-field--quarter { display: inline-block; width: calc(25% - 8px); }
.sd-mem-field--half + .sd-mem-field--quarter,
.sd-mem-field--quarter + .sd-mem-field--quarter { margin-left: 8px; }
.sd-mem-consent {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin: 0.9rem 0 0.3rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--sdm-dim);
	cursor: pointer;
}
.sd-mem-consent input { margin-top: 0.2rem; accent-color: var(--sdm-accent); }
.sd-mem-consent strong { color: var(--sdm-text); }
.sd-mem-consent a { color: var(--sdm-blue); }

/* Brand chips get the same interactive feel as the eligible pill. */
.sd-mem-brands__item { transition: border-color 0.2s ease, transform 0.15s ease; }
.sd-mem-brands__item:hover { border-color: var(--sdm-border-mid); transform: translateY(-1px); }

/* Small screens: the card/address row must not squeeze into slivers. */
@media (max-width: 560px) {
	.sd-mem-field--half,
	.sd-mem-field--quarter { display: block; width: 100%; margin-left: 0 !important; }
	.sd-mem-hero { padding-top: 1.5rem; }
	.sd-mem-page__h { margin-top: 2rem; }
	.sd-mem-badge { font-size: 0.9em; }
}
.sd-mem-signup__submit { width: 100%; margin-top: 0.4rem; }
.sd-mem-signup__submit:disabled { opacity: 0.55; cursor: default; transform: none; }
.sd-mem-signup__error {
	margin-top: 0.8rem;
	padding: 0.7rem 0.9rem;
	border-radius: 6px;
	background: rgba(210, 64, 52, 0.12);
	border: 1px solid rgba(210, 64, 52, 0.5);
	font-size: 0.92rem;
}
.sd-mem-signup__state { text-align: center; padding: 1.2rem 0; color: var(--sdm-dim); }
.sd-mem-signup__success {
	position: relative;
	overflow: hidden;
	padding: 1.5rem 1.6rem;
	background: var(--sdm-card);
	border: 1px solid var(--sdm-border);
	border-radius: 12px;
	text-align: center;
}
.sd-mem-signup__success::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--sdm-grad);
}

/* ---------------- Account endpoint ------------------------------------ */
.sd-mem-account .sd-mem-table {
	width: 100%;
	margin: 0 0 1.25em;
	border-collapse: separate;
	border-spacing: 0 0.45rem;
}
.sd-mem-account .sd-mem-table th,
.sd-mem-account .sd-mem-table td {
	padding: 0.65rem 0.9rem;
	text-align: left;
	background: var(--sdm-card);
	border-top: 1px solid var(--sdm-border);
	border-bottom: 1px solid var(--sdm-border);
}
.sd-mem-account .sd-mem-table th:first-child,
.sd-mem-account .sd-mem-table td:first-child { border-left: 1px solid var(--sdm-border); border-radius: 8px 0 0 8px; }
.sd-mem-account .sd-mem-table th:last-child,
.sd-mem-account .sd-mem-table td:last-child { border-right: 1px solid var(--sdm-border); border-radius: 0 8px 8px 0; }
.sd-mem-account .sd-mem-table thead th { background: transparent; border: 0; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sdm-dim); }
.sd-mem-account .sd-mem-table td { font-family: var(--sdm-mono); font-variant-numeric: tabular-nums; }
.sd-mem-account .sd-mem-table th { font-family: var(--sdm-font); font-weight: 500; color: var(--sdm-dim); }
.sd-mem-status { font-weight: 700; font-family: var(--sdm-mono); }
.sd-mem-status--active { color: #3fce7c; }
.sd-mem-status--past_due { color: var(--sdm-accent-2); }
.sd-mem-status--lapsed,
.sd-mem-status--cancelled { color: var(--sdm-dim); }
.sd-mem-note { color: var(--sdm-dim); font-size: 0.92em; }
.sd-mem-cancel { margin: 0.5em 0 1.5em; }

/* =====================================================================
   Marketing page — headline treatment calibrated to the Raffles page:
   blue tracked kicker, oversized two-tone all-caps headline, bold mono
   figures. These rules come last so they win over the softer hero styles
   defined earlier in this file.
   ===================================================================== */

.sd-mem-kicker {
	display: block;
	margin-bottom: 0.9rem;
	color: var(--sdm-blue);
	font-family: var(--sdm-font);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.sd-mem-hero { padding: 2.75rem 0 2.25rem; }
.sd-mem-hero__title {
	margin: 0 0 1rem;
	font-size: clamp(2.5rem, 7vw, 4.25rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}
.sd-mem-accent { color: var(--sdm-accent); }
.sd-mem-hero__sub {
	max-width: 640px;
	margin: 0 auto 1.75rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--sdm-dim);
}
.sd-mem-hero__cta { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.sd-mem-hero__fine { font-size: 0.82rem; color: var(--sdm-dim); }

/* Stats strip — figures styled like the raffle countdowns. */
.sd-mem-stats {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin: 2.5rem 0 3rem;
	padding: 1.4rem 1rem;
	border-top: 1px solid var(--sdm-border);
	border-bottom: 1px solid var(--sdm-border);
}
.sd-mem-stat { text-align: center; }
.sd-mem-stat__n {
	display: block;
	font-family: var(--sdm-mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(1.6rem, 3.6vw, 2.1rem);
	font-weight: 700;
	color: var(--sdm-blue);
	line-height: 1.1;
}
.sd-mem-stat__l {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sdm-dim);
}

/* Section headings */
.sd-mem-page__h {
	margin: 3rem 0 0.5rem;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-align: center;
}

/* "Pays for itself" strip */
.sd-mem-payback {
	position: relative;
	overflow: hidden;
	margin: 0 0 0.5rem;
	padding: 1.15rem 1.4rem;
	background: var(--sdm-card);
	border: 1px solid var(--sdm-border);
	border-radius: 12px;
	text-align: center;
}
.sd-mem-payback::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--sdm-grad);
}
.sd-mem-payback p { margin: 0; color: var(--sdm-dim); line-height: 1.6; }
.sd-mem-payback strong { color: var(--sdm-text); }

/* "Look for this tag" callout */
.sd-mem-lookfor {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	margin: 1.75rem 0 0;
	text-align: center;
}
.sd-mem-lookfor__lead { margin: 0; color: var(--sdm-text); font-weight: 600; }
.sd-mem-lookfor__note { margin: 0; max-width: 520px; color: var(--sdm-dim); font-size: 0.92rem; line-height: 1.55; }
.sd-mem-eligible--demo { cursor: default; }

/* FAQ — native <details>, no JS */
.sd-mem-faq { max-width: 720px; margin: 1.25rem auto 0; }
.sd-mem-faq details {
	border: 1px solid var(--sdm-border);
	border-radius: 10px;
	background: var(--sdm-card);
	margin-bottom: 8px;
	overflow: hidden;
}
.sd-mem-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 0.9rem 2.4rem 0.9rem 1.1rem;
	position: relative;
	font-weight: 600;
	color: var(--sdm-text);
}
.sd-mem-faq summary::-webkit-details-marker { display: none; }
.sd-mem-faq summary::after {
	content: "+";
	position: absolute;
	right: 1.1rem; top: 50%;
	transform: translateY(-50%);
	font-family: var(--sdm-mono);
	color: var(--sdm-blue);
	font-size: 1.1rem;
	line-height: 1;
	transition: transform 0.2s ease;
}
.sd-mem-faq details[open] summary::after { content: "\2212"; }
.sd-mem-faq summary:hover { color: #fff; }
.sd-mem-faq p {
	margin: 0;
	padding: 0 1.1rem 1rem;
	color: var(--sdm-dim);
	line-height: 1.6;
	font-size: 0.95rem;
}
.sd-mem-faq a { color: var(--sdm-blue); }

/* Final CTA block */
.sd-mem-cta-final { text-align: center; margin: 2.75rem 0 1rem; }
.sd-mem-cta-final .sd-mem-page__note { margin-top: 0.9rem; }

/* Join page state cards */
.sd-mem-statecard {
	position: relative;
	overflow: hidden;
	max-width: 460px;
	margin: 0 auto;
	padding: 1.6rem 1.5rem;
	background: var(--sdm-card);
	border: 1px solid var(--sdm-border);
	border-radius: 12px;
	text-align: center;
}
.sd-mem-statecard::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--sdm-grad);
}
.sd-mem-statecard h3 { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 700; color: var(--sdm-text); }
.sd-mem-statecard p { margin: 0 0 1.1rem; color: var(--sdm-dim); line-height: 1.55; }
.sd-mem-statecard__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }

@media (max-width: 560px) {
	.sd-mem-stats { gap: 1.5rem; }
	.sd-mem-hero { padding-top: 1.75rem; }
}

/* The pill's own align-self would pin it left inside the centered
   callout column. */
.sd-mem-lookfor .sd-mem-eligible { align-self: center; }

/* =====================================================================
   Tile badges as image overlays.
   Anything added to a tile's normal flow makes eligible tiles taller than
   the rest and breaks the grid; the theme already floats its sale badge
   over the image, so we use the free bottom-left corner and cost zero
   height. Solid dark fill because product photos are on white.
   ===================================================================== */
/* line-height: 0 removes the inline-image descender strut — without it the
   link box runs ~6px taller than the image and "bottom: 0" lands below the
   image edge instead of in its corner. */
/* Positioning context = the element that paints the white picture area.
   Nothing else changes about it (a layout change here would alter the
   height of badged tiles only, and the grid would go uneven again). */
.sd-mem-imgframe { position: relative !important; }
/* Fallback frame is the image's own link, whose inline strut must be
   collapsed or the badge sits a few px above the corner. */
.sd-mem-imgframe--tight { display: block; line-height: 0 !important; }
/* Every layout property is pinned here (and marked important) because the
   badge sits inside the tile's image link, where the theme's own link rules
   would otherwise stretch it to full width and flatten the flex layout. */
.sd-mem-overlay {
	position: absolute !important;
	/* The image's true bottom-left corner. */
	left: 0 !important;
	bottom: 0 !important;
	right: auto !important;
	top: auto !important;
	z-index: 4;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4em !important;
	width: auto !important;
	max-width: calc(100% - 6px);
	margin: 0 !important;
	padding: 3px 9px !important;
	line-height: 1.3 !important;
	/* Pinned so it never inherits the zeroed line-height/size of its wrapper
	   or the template's oversized root em. */
	font-size: 13px !important;
	white-space: nowrap;
	background: rgba(12, 17, 26, 0.94) !important;
	border-radius: 999px !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(2px);
}
.sd-mem-overlay.sd-mem-tile {
	display: flex;
	align-items: center;
	gap: 0.4em;
	padding: 3px 9px;
	border: 1px solid rgba(56, 174, 232, 0.7);
}
.sd-mem-overlay.sd-mem-eligible {
	border-color: rgba(255, 122, 69, 0.85);
	align-self: auto;
}
.sd-mem-overlay .sd-mem-tile__price { color: var(--sdm-blue, #38aee8); }

/* Figures inside buttons: the mono face renders optically smaller than the
   button's DM Sans and doesn't carry its 800 weight, which made the price
   look shrunken. Inside a button, match the button's own face and size the
   price UP — it's the number we most want read. */
.sd-mem-btn .sd-mem-price-tag {
	font-family: inherit;
	font-weight: inherit;
	font-size: 1.15em;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}