/**
 * Celsyn 360 Liquid — Research Access (gateway, application, signup,
 * sign-in, pending) + the approved-member research catalog.
 * Opaque surfaces throughout, consistent with the rest of the content-page
 * layer — glass stays reserved for floating controls.
 */

.celsyn-h2 { font-size: var( --text-2xl ); margin: 0 0 var( --space-4 ); }

/* ---------- Status panels (pending / declined) ------------------------- */
.rmem-status {
	margin: var( --space-6 ) auto 0;
	max-width: 44ch;
	padding: var( --space-4 ) var( --space-5 );
	border-radius: var( --radius-md );
	text-align: center;
}
.rmem-status--pending { background: rgb( 185 120 10 / 0.14 ); color: var( --celsyn-paper ); }
.rmem-status--declined { background: rgb( 217 76 56 / 0.16 ); color: var( --celsyn-paper ); }
.rmem-status__label { font-weight: 600; text-transform: uppercase; font-size: var( --text-xs ); letter-spacing: 0.06em; margin: 0 0 var( --space-2 ); }
.rmem-status p { margin: 0 0 var( --space-2 ); }

.rmem-hero__cta {
	margin-top: var( --space-6 );
	display: flex;
	gap: var( --space-4 );
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

/* ---------- Value-prop grid + steps (membership landing) --------------- */
.rmem-why__grid {
	list-style: none;
	margin: var( --space-6 ) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --space-5 );
}
@media ( max-width: 760px ) { .rmem-why__grid { grid-template-columns: 1fr; } }
.rmem-why__item {
	background: var( --env-surface );
	border: 1px solid var( --env-line );
	border-radius: var( --radius-md );
	padding: var( --space-5 );
}
.rmem-why__h { font-weight: 600; margin: 0 0 var( --space-2 ); }
.rmem-why__item p:last-child { color: var( --env-text-muted ); margin: 0; font-size: var( --text-sm ); }

.rmem-steps {
	list-style: none;
	margin: var( --space-6 ) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --space-5 );
	counter-reset: none;
}
@media ( max-width: 760px ) { .rmem-steps { grid-template-columns: 1fr; } }
.rmem-steps__n { font-size: var( --text-xs ); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var( --env-accent ); margin: 0 0 var( --space-2 ); }
.rmem-steps__h { font-weight: 600; margin: 0 0 var( --space-2 ); }
.rmem-steps li p:last-child { color: var( --env-text-muted ); font-size: var( --text-sm ); margin: 0; }

/* ---------- Approved-member catalog: search + grid + cards -------------- */
.rp-search {
	position: relative;
	margin: 0 0 var( --space-6 );
	max-width: 420px;
}
.rp-search__input {
	width: 100%;
	height: var( --control-h-md );
	padding: 0 var( --space-4 );
	border: 1px solid var( --env-line-strong );
	border-radius: var( --radius-pill );
	background: var( --env-surface );
	color: var( --env-text );
	font-family: var( --font-body );
	font-size: var( --text-sm );
}
.rp-search__input:focus { outline: none; border-color: var( --env-accent ); }
.rp-search__clear {
	position: absolute;
	right: var( --space-2 );
	top: 50%;
	transform: translateY( -50% );
	border: none;
	background: transparent;
	color: var( --env-text-muted );
	font-size: var( --text-xs );
	cursor: pointer;
}
.rp-collection__empty { text-align: center; color: var( --env-text-muted ); padding: var( --space-6 ) 0; }

.rp-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --space-6 );
}
@media ( max-width: 900px ) { .rp-grid { grid-template-columns: repeat( 2, 1fr ); } }
@media ( max-width: 560px ) { .rp-grid { grid-template-columns: 1fr; } }

/* Purpose-built card, not a generic WooCommerce tile: larger image stage,
   a strength "tag" instead of plain text, price given its own visual
   weight, a real Research-Use badge, and qty+Add-to-Cart unified into one
   compact buy bar. */
.rp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var( --env-surface );
	border: 1px solid var( --env-line );
	border-radius: var( --radius-lg );
	padding: var( --space-6 ) var( --space-5 ) var( --space-5 );
	box-shadow: 0 1px 2px rgb( 11 13 18 / 0.03 );
	transition: transform var( --dur-mid ) var( --ease-glass ),
	            box-shadow var( --dur-mid ) var( --ease-glass ),
	            border-color var( --dur-mid ) var( --ease-glass );
}
.rp-card:hover {
	transform: translateY( -6px );
	box-shadow: var( --glass-shadow-sm );
	border-color: var( --env-line-strong );
}
/* Sold Out — price and card stay fully visible (native WooCommerce stock
   status, see celsyn_research_card_html()); only the image dims slightly
   and a ribbon badge marks it, same corner every time regardless of card
   content length. */
.rp-card--sold-out .rp-card__media img { opacity: 0.55; mix-blend-mode: normal; }
.rp-card__stock-badge {
	position: absolute;
	top: var( --space-6 );
	left: var( --space-5 );
	z-index: 1;
	margin: 0;
	padding: 0.3em 0.7em;
	border-radius: var( --radius-pill );
	background: var( --celsyn-ink );
	color: var( --celsyn-paper );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.rp-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	background:
		radial-gradient( 120% 100% at 50% 0%, rgb( var( --celsyn-blue-rgb ) / 0.05 ), transparent 60% ),
		var( --env-surface-2 );
	border-radius: var( --radius-md );
	overflow: hidden;
	margin-bottom: var( --space-5 );
	padding: var( --space-4 );
}
.rp-card__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform var( --dur-slow ) var( --ease-glass ); }
.rp-card:hover .rp-card__media img { transform: scale( 1.04 ); }
.rp-card__name { font-family: var( --font-display ); font-size: var( --text-lg ); font-weight: 600; margin: 0 0 var( --space-2 ); line-height: 1.2; }
.rp-card__name a { text-decoration: none; color: var( --env-text ); }
.rp-card__strength {
	display: inline-block;
	font-size: var( --text-xs );
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var( --env-accent );
	background: rgb( var( --celsyn-blue-rgb ) / 0.08 );
	padding: 3px var( --space-3 );
	border-radius: var( --radius-pill );
	margin: 0 0 var( --space-3 );
}
.rp-card__price {
	font-family: var( --font-display );
	font-size: var( --text-xl );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	margin: 0 0 var( --space-3 );
}
.rp-card__flag {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --env-text-muted );
	border: 1px solid var( --env-line );
	border-radius: var( --radius-pill );
	padding: 3px var( --space-3 );
	margin: 0 0 var( --space-5 );
	align-self: flex-start;
}
/* Compact Bundle & Save hint — a single subtle line, never competing with
   name/strength/price/Research-Use-Only above it. */
.rp-card__promo {
	font-size: 0.6875rem;
	font-weight: 600;
	color: var( --env-accent );
	margin: calc( -1 * var( --space-3 ) ) 0 var( --space-3 );
}
.rp-card__flag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var( --celsyn-amber ); flex-shrink: 0; }

.rp-card__buy, .rp-support__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --space-3 );
	margin-top: auto;
}
.rp-qty {
	display: inline-flex;
	align-items: center;
	height: var( --control-h-sm );
	border: 1px solid var( --env-line-strong );
	border-radius: var( --radius-pill );
	flex-shrink: 0;
}
.rp-qty__btn { width: 32px; height: 100%; border: none; background: transparent; cursor: pointer; font-size: var( --text-md ); color: var( --env-text ); transition: color var( --dur-fast ) var( --ease-standard ); }
.rp-qty__btn:hover { color: var( --env-accent ); }
.rp-qty__input { width: 32px; height: 100%; border: none; background: transparent; text-align: center; font-family: var( --font-body ); font-size: var( --text-sm ); font-weight: 600; color: var( --env-text ); }
.rp-card__add { flex: 1; min-width: 118px; }
.rp-card__add.is-loading { opacity: 0.6; }
.rp-card__feedback { flex-basis: 100%; font-size: var( --text-xs ); font-weight: 600; color: var( --celsyn-success ); min-height: 0; opacity: 0; transition: opacity var( --dur-fast ) var( --ease-standard ); }
.rp-card__feedback.is-shown { opacity: 1; min-height: 1em; }

/* ---------- BAC Water support split ------------------------------------- */
.rp-support__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --space-7 );
	align-items: center;
}
@media ( max-width: 760px ) { .rp-support__split { grid-template-columns: 1fr; } }
.rp-support__meta { display: flex; gap: var( --space-6 ); margin: var( --space-4 ) 0; }
.rp-support__meta dt { font-size: var( --text-xs ); color: var( --env-text-muted ); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 2px; }
.rp-support__meta dd { margin: 0; font-weight: 600; }
.rp-support__media { background: var( --env-surface-2 ); border-radius: var( --radius-lg ); overflow: hidden; }
.rp-support__media img { width: 100%; display: block; mix-blend-mode: multiply; }