.collection-shell {
	inline-size: min(100%, 72rem);
	margin-inline: auto;
	padding: 2rem 1.25rem 4rem;
	color: var(--theme-text);
}

.collection-hero,
.collection-detail {
	margin-block-end: 1.5rem;
	border: 1px solid var(--theme-line);
	border-block-start: 0.3rem solid var(--theme-accent);
	background: var(--theme-surface);
	padding: clamp(1.3rem, 4vw, 2.2rem);
	box-shadow: var(--theme-shadow);
}

.collection-eyebrow {
	color: var(--theme-accent-dark);
	font-size: .875rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.collection-summary,
.collection-load-zone p {
	color: var(--theme-muted);
}

.collection-grid {
	display: grid;
	gap: 1rem;
}

.collection-grid-one { grid-template-columns: 1fr; }
.collection-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.collection-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.collection-card,
.collection-directory-card,
.collection-empty {
	border: 1px solid var(--theme-line);
	background: var(--theme-surface);
	padding: 1.15rem;
	box-shadow: var(--theme-shadow);
}

.collection-directory-card h2 a {
	color: var(--theme-text);
	text-decoration: none;
}

.collection-directory-card > span {
	color: var(--theme-accent-dark);
	font-weight: 800;
}

.collection-code pre {
	border-color: var(--theme-dark);
	background: var(--theme-dark);
	color: var(--cms-color-text-inverse);
}

.collection-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.7rem;
	border: 1px solid var(--theme-accent-dark);
	background: var(--theme-accent-dark);
	color: var(--cms-color-on-accent);
	padding: 0.55rem 0.9rem;
	font-weight: 750;
	text-decoration: none;
}

.collection-pagination {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-block-start: 1.5rem;
}

@media (max-width: 46rem) {
	.collection-grid-two,
	.collection-grid-three {
		grid-template-columns: 1fr;
	}
}