/*! Top List Company 2.0.0 Page Styles 2.0.0: archive.css */
.p-collection-hero {
position: relative;
isolation: isolate;
display: flex;
min-height: clamp(560px, calc(100svh - var(--tlc-header-height)), 760px);
align-items: center;
padding: clamp(3rem, 7svh, 5.5rem) 24px;
overflow: hidden;
color: #fff;
}
.p-collection-hero__image,
.p-collection-hero__overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.p-collection-hero__image {
z-index: -2;
object-fit: cover;
object-position: center;
}
.p-collection-hero__overlay {
z-index: -1;
background: linear-gradient(90deg, rgba(5, 15, 22, 0.88), rgba(8, 24, 34, 0.58) 56%, rgba(5, 15, 22, 0.78));
}
.p-collection-hero__inner {
display: grid;
width: min(var(--tlc-layout-shell), 100%);
margin-inline: auto;
grid-template-columns: 450px minmax(0, 1fr);
align-items: center;
gap: clamp(2rem, 4vw, 3.25rem);
}
.p-collection-hero__panel {
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.42);
border-radius: var(--tlc-radius-2xl);
background: var(--tlc-color-surface);
box-shadow: var(--tlc-shadow-elevated);
color: var(--tlc-color-text);
}
.p-collection-hero__brand {
padding: 1.6rem 2rem 1.4rem;
background: var(--tlc-color-navy);
text-align: center;
}
.p-collection-hero__logo {
display: block;
width: min(100%, 360px);
height: auto;
margin: 1.15rem auto 0;
}
.p-collection-hero__panel-body {
padding: 1.75rem 2rem 2rem;
}
.p-collection-hero__panel-label {
margin: 0 0 0.75rem;
color: var(--tlc-color-blue-dark);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.p-collection-hero__panel-text {
margin: 0;
color: var(--tlc-color-muted);
}
.p-collection-hero__panel-body .c-stat {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--tlc-color-border);
}
.p-collection-hero__panel-action {
width: 100%;
margin-top: 1rem;
}
.p-collection-hero__content {
min-width: 0;
text-align: center;
}
.p-collection-hero__content h1 {
max-width: 850px;
margin: 0 auto;
color: #fff;
font-size: clamp(2.75rem, 5.4vw, 5.25rem);
line-height: 1.02;
letter-spacing: -0.04em;
}
.p-collection-hero__content > p {
max-width: 760px;
margin: 1.5rem auto 0;
color: rgba(255, 255, 255, 0.9);
font-size: clamp(1.05rem, 1.7vw, 1.3rem);
}
.p-collection-hero__actions {
display: grid;
max-width: 500px;
margin: 2.1rem auto 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--tlc-space-md);
}
.p-collection-hero__actions .c-button {
width: 100%;
font-weight: 500;
}
.p-archive-page {
padding-block: clamp(2rem, 5vw, 4.5rem);
}
.p-archive-page__breadcrumbs {
margin-bottom: var(--tlc-space-xl);
}
.p-archive-page__intro {
margin-bottom: clamp(2rem, 5vw, 3rem);
padding: clamp(1.35rem, 3vw, 2.25rem);
border: 1px solid var(--tlc-color-border);
border-radius: var(--tlc-radius-large);
background: var(--tlc-color-surface);
}
.p-archive-page__heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--tlc-space-xl);
margin-bottom: var(--tlc-space-xl);
}
.p-archive-page__heading .c-section-heading {
margin: 0;
}
.p-archive-page__collection {
min-width: 0;
}
.p-collection-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
min-width: 0;
}
.p-collection-grid__item {
min-width: 0;
height: 100%;
}
.p-collection-grid__item > .c-card {
height: 100%;
}
.p-archive-page__related {
padding-block: clamp(2rem, 5vw, 4.5rem);
border-top: 1px solid var(--tlc-color-border);
}
.c-view-switcher {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem;
border: 1px solid var(--tlc-color-border);
border-radius: var(--tlc-radius-large);
background: var(--tlc-color-surface);
}
.c-view-switcher__label {
padding-inline: 0.7rem;
color: var(--tlc-color-muted);
font-size: 0.8rem;
font-weight: 600;
}
.c-view-switcher__button {
position: relative;
min-height: 42px;
padding: 0.55rem 0.9rem;
border: 0;
border-radius: var(--tlc-radius-medium);
background: transparent;
color: var(--tlc-color-muted);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
}
.c-view-switcher__button::after {
position: absolute;
right: 0.75rem;
bottom: 0.25rem;
left: 0.75rem;
height: 2px;
border-radius: 999px;
background: transparent;
content: "";
}
.c-view-switcher__button:hover,
.c-view-switcher__button:focus-visible,
.c-view-switcher__button.is-active {
background: var(--tlc-color-control-hover-background);
color: var(--tlc-color-text);
}
.c-view-switcher__button.is-active::after {
background: var(--tlc-color-gold);
}
.c-collection-navigation {
display: grid;
justify-items: center;
gap: 0.75rem;
margin-top: clamp(2rem, 5vw, 4rem);
}
.c-collection-navigation__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
}
.c-collection-navigation__more {
display: none;
min-width: 220px;
}
.c-collection-navigation__status {
margin: 0;
color: var(--tlc-color-muted);
font-size: 0.875rem;
text-align: center;
}
.c-collection-navigation__more[aria-disabled="true"] {
pointer-events: none;
opacity: 0.62;
}
.c-collection-navigation__fallback .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.45rem;
}
.c-collection-navigation__fallback .page-numbers {
display: inline-flex;
min-width: 42px;
min-height: 42px;
align-items: center;
justify-content: center;
padding: 0.5rem 0.7rem;
border: 1px solid var(--tlc-color-control-border);
border-radius: var(--tlc-radius-medium);
background: var(--tlc-color-control-background);
color: var(--tlc-color-control-text);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
}
.c-collection-navigation__fallback .page-numbers:hover,
.c-collection-navigation__fallback .page-numbers:focus-visible,
.c-collection-navigation__fallback .page-numbers.current {
border-color: var(--tlc-color-control-hover-border);
background: var(--tlc-color-control-hover-background);
color: var(--tlc-color-control-hover-text);
}
[data-collection-root][aria-busy="true"],
[data-collection-root][aria-busy="true"] [data-collection-grid] {
opacity: 0.68;
transition: opacity var(--tlc-motion-fast) var(--tlc-motion-easing);
}
[data-collection-root][data-collection-ready="true"] .c-collection-navigation__more {
display: inline-flex;
}
[data-collection-root][data-collection-ready="true"] .c-collection-navigation__fallback {
display: none;
}
@media (max-width: 1024px) {
.p-collection-hero__inner {
grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
}
.p-collection-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 820px) {
.p-collection-hero {
min-height: 0;
padding: 3rem 18px 3.5rem;
}
.p-collection-hero__inner {
grid-template-columns: 1fr;
}
.p-collection-hero__content {
grid-row: 1;
}
.p-collection-hero__panel {
grid-row: 2;
width: min(520px, 100%);
margin-inline: auto;
}
.p-collection-hero__actions {
justify-content: center;
margin-inline: auto;
}
.p-archive-page__heading {
align-items: center;
text-align: center;
}
.p-archive-page__heading .c-section-heading {
text-align: center;
}
.c-view-switcher {
display: none;
}
}
@media (max-width: 680px) {
.p-collection-grid {
grid-template-columns: 1fr;
}
.p-collection-hero__content h1 {
font-size: clamp(2.1rem, 11vw, 3rem);
}
.p-collection-hero__brand,
.p-collection-hero__panel-body {
padding-inline: 1.4rem;
}
.p-collection-hero__actions {
grid-template-columns: 1fr;
}
.p-collection-hero__actions .c-button {
width: 100%;
}
}

/* 2.1.2 shared collection hero treatment. */
.p-collection-hero__logo {
	width: min(100%, 290px);
	height: 86px;
	object-fit: contain;
	object-position: center;
}
.p-collection-hero__actions .c-button--surface {
	border-color: #fff;
	background: #fff;
	color: var(--tlc-color-navy);
}
.p-collection-hero__actions .c-button--surface:hover,
.p-collection-hero__actions .c-button--surface:focus-visible {
	border-color: #e8edf0;
	background: #e8edf0;
	color: var(--tlc-color-navy);
}
.p-collection-hero__actions .c-button--success {
	border-color: #0a9f35;
	background: #0a9f35;
	color: #fff;
}
@media (max-width: 680px) {
	.p-collection-hero__actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.p-collection-hero__logo {
		height: 74px;
	}
}
@media (max-width: 430px) {
	.p-collection-hero__actions {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 820px) {
	/* Collection landing pages use the same compact mobile hero as the front page. */
	.p-collection-hero__panel {
		display: none;
	}
}

/* 2.1.13 - archive headings keep the explanatory copy aligned without squeezing the title. */
.p-archive-page__heading .c-section-heading {
	width: 100%;
	flex: 1 1 auto;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
}
.p-archive-page__heading .c-section-heading p {
	max-width: 340px;
	justify-self: end;
	text-align: right;
	text-wrap: balance;
}
@media (max-width: 1020px) and (min-width: 821px) {
	.p-archive-page__heading .c-section-heading {
		grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
		gap: 1rem;
	}
	.p-archive-page__heading .c-section-heading p { max-width: 260px; }
}
@media (max-width: 820px) {
	.p-archive-page__heading .c-section-heading {
		grid-template-columns: 1fr;
		gap: .55rem;
		text-align: center;
	}
	.p-archive-page__heading .c-section-heading p {
		max-width: min(100%, 42rem);
		justify-self: center;
		text-align: center;
	}
}