/**
 * Component: unavailable panel and substitutes
 *
 * A sold-out coin page is a high-traffic destination in this catalogue, not
 * an error state. The panel replaces the disabled add-to-cart with something
 * that moves the customer on: what happened, then what they can buy instead.
 *
 * Styled as a recessed block rather than a warning. Nothing has gone wrong -
 * a mint allocation sold out, which is normal and expected.
 */

.tcs-unavailable {
	background: var(--tcs-paper-sunk);
	border: var(--tcs-border);
	border-radius: var(--tcs-radius);
	padding: var(--tcs-space-md);
	margin-block: var(--tcs-space-md);
	max-width: var(--tcs-measure);
}

/* A metal-free state marker: a rule in the state's own colour. */
.tcs-unavailable {
	border-inline-start: 3px solid var(--tcs-state-soldout);
}

.tcs-unavailable--comingsoon {
	border-inline-start-color: var(--tcs-state-comingsoon);
}

.tcs-unavailable__lead {
	font-size: var(--tcs-text-base);
	font-weight: var(--tcs-weight-medium);
	color: var(--tcs-ink);
	margin: 0;
}

.tcs-unavailable__note {
	font-size: var(--tcs-text-xs);
	color: var(--tcs-ink-muted);
	margin: var(--tcs-space-2xs) 0 0;
}

.tcs-unavailable__browse {
	margin: var(--tcs-space-sm) 0 0;
	font-size: var(--tcs-text-sm);
}

.tcs-unavailable__browse a {
	font-weight: var(--tcs-weight-medium);
}

/* ---------------------------------------------------------------------- */
/* Notification capture slot                                               */
/* ---------------------------------------------------------------------- */

/*
 * Container for a registered back-in-stock provider's form. Renders only when
 * a provider exists - there is deliberately no placeholder styling for an
 * absent one, because an absent form must look absent.
 */
.tcs-notify {
	margin-block-start: var(--tcs-space-sm);
	padding-block-start: var(--tcs-space-sm);
	border-block-start: var(--tcs-border-faint);
}

.tcs-notify form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tcs-space-2xs);
}

.tcs-notify input[type="email"] {
	flex: 1;
	min-width: 12rem;
}

/* ---------------------------------------------------------------------- */
/* Substitutes                                                             */
/* ---------------------------------------------------------------------- */

.tcs-substitutes {
	margin-block-start: var(--tcs-section-gap);
}

.tcs-substitutes__intro {
	font-size: var(--tcs-text-sm);
	color: var(--tcs-ink-muted);
	margin: 0;
	max-width: none;
}

/* Substitutes run one row of four regardless of buying context. */
.tcs-substitutes .tcs-product-grid {
	--tcs-grid-columns: 4;
}

@media (max-width: 900px) {
	.tcs-substitutes .tcs-product-grid {
		--tcs-grid-columns: 2;
	}
}