/*
 * Catalogue: Browse, Raster, Vector, collections and search.
 * Figma: Browse All Assets (2156:788). Wide layout with 40px sides at 1660 (handoff section 3).
 * Below 1280 our interpretation: narrower sidebar, 3 then 2 columns, filters collapse.
 */

.catalogue,
.catalogue-search,
.catalogue-about {
	--catalogue-side: 40px;
}

/* Search bar between the header divider and its own divider (2156:804) */

.catalogue-search {
	padding: 23px var(--catalogue-side);
	border-block: 1px solid var(--line);
}

.catalogue-search__form {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 900px;
	height: 56px;
	margin-inline: auto;
	padding: 0 6px 0 18px;
	border-radius: var(--radius-tile);
	background: var(--cream-2);
	transition: box-shadow var(--ease-hover);
}

.catalogue-search__form:focus-within {
	box-shadow: 0 0 0 2px var(--plum);
}

.catalogue-search__icon {
	flex-shrink: 0;
}

.catalogue-search__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	outline: none;
}

/* Darker than the design's #8b949a for AA contrast on cream, as on Home. */
.catalogue-search__input::-webkit-search-cancel-button {
	appearance: none;
}

.catalogue-search__clear {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: none;
	cursor: pointer;
}

.catalogue-search__clear[hidden] {
	display: none;
}

.catalogue-search__clear:hover {
	background: var(--line);
}

.catalogue-search__input::placeholder {
	color: var(--muted-2);
	opacity: 1;
}

.catalogue-search__button {
	padding: 12px 22px;
	border: 0;
	border-radius: var(--radius-control);
	background: var(--ink);
	color: var(--bg);
	font-family: var(--font-body);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	line-height: normal;
	cursor: pointer;
	transition: background-color var(--ease-hover);
}

.catalogue-search__button:hover {
	background: var(--plum);
}

/* Title, count and sort (2156:820, 2156:823) */

.catalogue__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	padding: 32px var(--catalogue-side) 0;
}

/* Page intro: Raster, Vector, collections, search (2210:1737). Sort sits on its last line. */

.catalogue__head--intro {
	align-items: flex-end;
}

.catalogue__intro {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.catalogue__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	color: var(--muted-2);
	font-size: var(--fs-small);
	line-height: normal;
	list-style: none;
}

.catalogue__crumbs li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.catalogue__crumbs a {
	color: inherit;
	text-decoration: none;
}

.catalogue__crumbs a:hover {
	color: var(--ink);
	text-decoration: underline;
}

.catalogue__crumbs [aria-current] {
	color: var(--ink);
	font-weight: var(--fw-semibold);
}

.catalogue__eyebrow {
	margin: 0;
	color: var(--red);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	line-height: normal;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

.catalogue__text {
	max-width: 780px;
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-body-l);
	line-height: 1.6;
}

.catalogue__title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	min-width: 0;
}

.catalogue__title {
	margin: 0;
	font-size: var(--fs-catalogue-title);
	line-height: normal;
	letter-spacing: -0.015em;
}

.catalogue__count {
	margin: 0;
	color: var(--muted-2);
	font-size: var(--fs-body-l);
}

.sort {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 10px;
}

.sort__label {
	color: var(--muted-2);
	font-size: var(--fs-body-sm);
}

.sort__menu {
	position: relative;
}

.sort__button {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px 9px 14px;
	border: 1px solid var(--border-select);
	border-radius: var(--radius-control);
	color: var(--ink);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	line-height: normal;
	list-style: none;
	cursor: pointer;
	transition: border-color var(--ease-hover);
}

.sort__button::-webkit-details-marker {
	display: none;
}

.sort__button:hover {
	border-color: var(--ink);
}

/* Open: 1.5px plum border (2162:946); the box keeps its size. */
.sort__menu[open] .sort__button {
	border-color: var(--plum);
	box-shadow: inset 0 0 0 0.5px var(--plum);
}

.sort__chevron {
	transition: transform var(--ease-hover);
}

.sort__menu[open] .sort__chevron {
	transform: rotate(180deg);
}

.sort__list {
	position: absolute;
	top: calc(100% + 9px);
	right: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 240px;
	margin: 0;
	padding: 6px;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-tile);
	background: var(--bg);
	box-shadow: var(--shadow-dropdown);
	list-style: none;
}

.sort__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 37px;
	padding: 8px 12px;
	border-radius: var(--radius-control);
	color: var(--body);
	font-size: var(--fs-body-sm);
	text-decoration: none;
}

.sort__item:hover {
	background: var(--hover);
	color: var(--ink);
}

.sort__item[aria-current] {
	background: var(--hover);
	color: var(--ink);
	font-weight: var(--fw-semibold);
}

/* Sidebar + results (2156:1087, 2156:1250) */

.catalogue__body {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 40px;
	padding: 28px var(--catalogue-side) 0;
}

.catalogue__body.is-filters-hidden {
	grid-template-columns: minmax(0, 1fr);
}

.catalogue__body.is-filters-hidden .filters {
	display: none;
}

/* Filters */

.filters__header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.filters__title {
	margin: 0;
	font-size: var(--fs-h5-sm);
	line-height: normal;
	letter-spacing: 0;
}

.filters__badge {
	padding: 1px 7px;
	border-radius: var(--radius-pill);
	background: var(--plum);
	color: var(--bg);
	font-size: var(--fs-small-sm);
	font-weight: var(--fw-semibold);
	line-height: normal;
}

.filters__form {
	margin: 0;
}

.filter-group {
	border-bottom: 1px solid var(--line);
}

.filter-group__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0;
	color: var(--ink);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: normal;
	list-style: none;
	cursor: pointer;
}

.filter-group__header::-webkit-details-marker {
	display: none;
}

.filter-group[open] > .filter-group__header {
	padding-bottom: 14px;
}

.filter-group__chevron {
	transition: transform var(--ease-hover);
}

.filter-group[open] .filter-group__chevron {
	transform: rotate(180deg);
}

.filter-group__options {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	margin: 0;
	padding: 0 0 20px;
	border: 0;
}

.filter-group:has(.filter-group__more:not([hidden])) .filter-group__options {
	padding-bottom: 14px;
}

.filter-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--body);
	font-size: var(--fs-body-sm);
	line-height: normal;
	cursor: pointer;
}

.filter-option--child {
	padding-left: 28px;
}

.js .filter-option--more {
	display: none;
}

.js .filter-group.is-expanded .filter-option--more {
	display: flex;
}

/* The native checkbox stays focusable and clickable under the drawn box. */
.filter-option__input,
.filter-tile__input {
	position: absolute;
	width: 18px;
	height: 18px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.filter-option__box {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--checkbox-border);
	border-radius: 5px;
	background: var(--bg) center / 12px no-repeat;
	transition: background-color var(--ease-hover), border-color var(--ease-hover);
}

.filter-option:hover .filter-option__box {
	border-color: var(--ink);
}

.filter-option__input:checked + .filter-option__box {
	border-color: var(--ink);
	background-color: var(--ink);
	background-image: url("../icons/checkbox-check.svg");
}

.filter-option__input:focus-visible + .filter-option__box {
	outline: 2px solid var(--plum);
	outline-offset: 2px;
}

.filter-option__name {
	flex: 1;
	min-width: 0;
	transition: color var(--ease-hover);
}

.filter-option:hover .filter-option__name,
.filter-option__input:checked ~ .filter-option__name {
	color: var(--ink);
}

.filter-option__input:checked ~ .filter-option__name {
	font-weight: var(--fw-semibold);
}

.filter-option:has(:disabled) {
	opacity: 0.45;
	cursor: default;
}

.filter-option__count {
	color: var(--muted-2);
	font-size: var(--fs-small);
}

.filter-group__more {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--plum);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: normal;
	cursor: pointer;
}

.filter-group__more img {
	transition: transform var(--ease-hover);
}

.filter-group__more[aria-expanded="true"] img {
	transform: rotate(180deg);
}

/* Orientation tiles (2156:1167) */

.filter-group__options--tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.filter-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 70px;
	border-radius: var(--radius-tile-sm);
	background: var(--cream-2);
	color: var(--muted);
	cursor: pointer;
	transition: background-color var(--ease-hover), box-shadow var(--ease-hover), color var(--ease-hover);
}

.filter-tile__input {
	inset: 0;
	width: 100%;
	height: 100%;
}

.filter-tile:hover {
	color: var(--ink);
}

.filter-tile:has(:disabled) {
	opacity: 0.45;
	cursor: default;
}

.filter-tile:has(:disabled) .filter-tile__input {
	cursor: default;
}

/* Not designed: the selected tile gets a plum outline and tint. */
.filter-tile:has(:checked) {
	background: var(--plum-tint-chip);
	box-shadow: inset 0 0 0 1.5px var(--plum);
	color: var(--plum);
}

.filter-tile:has(:focus-visible) {
	outline: 2px solid var(--plum);
	outline-offset: 2px;
}

.filter-tile__shape {
	border: 1.6px solid var(--body);
	border-radius: 3px;
}

.filter-tile:has(:checked) .filter-tile__shape {
	border-color: var(--plum);
}

.filter-tile__shape--landscape {
	width: 26px;
	height: 17px;
}

.filter-tile__shape--portrait {
	width: 16px;
	height: 24px;
}

.filter-tile__shape--square {
	width: 20px;
	height: 20px;
}

.filter-tile__shape--panorama {
	width: 30px;
	height: 12px;
}

.filter-tile__name {
	font-size: var(--fs-tiny);
	font-weight: var(--fw-semibold);
	line-height: normal;
}

.filters__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 20px;
}

.js .filters__apply {
	display: none;
}

/* Sort by in the filters: bottom sheet only (head.php has the menu elsewhere). */
.filter-group--sort {
	display: none;
}

.filter-option__box--radio {
	border-radius: 50%;
}

.filter-option__input:checked + .filter-option__box--radio {
	background: var(--bg);
	box-shadow: inset 0 0 0 3.5px var(--bg), inset 0 0 0 10px var(--ink);
}

.filters__close {
	display: flex;
	margin: -8px -8px -8px auto;
	padding: 8px;
	border: 0;
	border-radius: var(--radius-control);
	background: none;
	cursor: pointer;
}

.filters__close:hover {
	background: var(--hover);
}

.filters__close[hidden] {
	display: none;
}

/* Mobile filters (below 1024px, catalogue.js; not designed): a floating Show filters button
   and a bottom sheet that covers most of the screen, not all of it. */

.filters-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
	padding: 0 var(--gutter) calc(16px + env(safe-area-inset-bottom));
	pointer-events: none;
	transition: transform var(--ease-hover), opacity var(--ease-hover);
}

.filters-bar[hidden] {
	display: none;
}

.filters-bar.is-away {
	opacity: 0;
	transform: translateY(100%);
	visibility: hidden;
}

.filters-bar__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--ink);
	box-shadow: var(--shadow-float);
	color: var(--bg);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: normal;
	pointer-events: auto;
	cursor: pointer;
}

.filters-bar__button:hover {
	background: var(--ink-2);
}

.filters-bar__button:focus-visible {
	outline: 2px solid var(--plum);
	outline-offset: 3px;
}

.filters-bar__badge {
	padding: 1px 8px;
	border-radius: var(--radius-pill);
	background: var(--bg);
	color: var(--ink);
	font-size: var(--fs-small-sm);
}

.catalogue.is-sheet-mode .sort,
.catalogue.is-sheet-mode .catalogue__toolbar:not(:has(.applied-filters)) {
	display: none;
}

.filters-sheet {
	inset: auto 0 0;
	width: 100%;
	max-width: none;
	max-height: 85dvh;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-panel) var(--radius-panel) 0 0;
	background: var(--bg);
	box-shadow: var(--shadow-dropdown);
	overscroll-behavior: contain;
}

.filters-sheet:focus {
	outline: none;
}

/* Slides up when it opens and slowly back down when it closes (catalogue.js). */
.filters-sheet[open] {
	animation: filters-sheet-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.filters-sheet.is-closing {
	animation: filters-sheet-out 0.45s cubic-bezier(0.55, 0, 0.75, 0.3) forwards;
}

.filters-sheet::backdrop {
	background: var(--ink-55);
	animation: filters-backdrop-in 0.35s ease-out;
}

.filters-sheet.is-closing::backdrop {
	animation: filters-backdrop-out 0.45s ease-in forwards;
}

@keyframes filters-sheet-in {
	from {
		transform: translateY(100%);
	}
}

@keyframes filters-sheet-out {
	to {
		transform: translateY(100%);
	}
}

@keyframes filters-backdrop-in {
	from {
		opacity: 0;
	}
}

@keyframes filters-backdrop-out {
	to {
		opacity: 0;
	}
}

/* The page behind does not scroll while the sheet is open. */
html:has(.filters-sheet[open]) {
	overflow: hidden;
}

.filters.is-sheet .filters__header {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 20px var(--gutter) 16px;
	background: var(--bg);
}

.filters.is-sheet .filters__form {
	padding: 0 var(--gutter);
}

.filters.is-sheet .filter-group--sort {
	display: block;
}

.filters.is-sheet .filters__actions {
	position: sticky;
	bottom: 0;
	justify-content: space-between;
	margin: 0 calc(var(--gutter) * -1);
	padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--line);
	background: var(--bg);
}

.filters.is-sheet .filters__apply {
	display: inline-flex;
	flex: 1;
	justify-content: center;
	min-height: 48px;
}

.filters__clear {
	color: var(--muted-2);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
}

.filters__clear:hover {
	color: var(--ink);
}

/* Toolbar: applied filters and Hide filters (2156:1233, 2156:912) */

.catalogue__toolbar {
	display: flex;
	align-items: center;
	gap: 12px 16px;
	min-height: 31px;
	margin: 2px 0 20px;
}

.applied-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.applied-filter {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px 7px 12px;
	border-radius: var(--radius-pill);
	background: var(--plum-tint-chip);
	color: var(--plum);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: normal;
	text-decoration: none;
}

.applied-filter:hover {
	background: var(--plum-tint);
}

.applied-filters__clear {
	color: var(--muted-2);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
}

.applied-filters__clear:hover {
	color: var(--ink);
}

.filters-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: normal;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--ease-hover);
}

.filters-toggle:hover {
	color: var(--plum);
}

.filters-toggle[hidden] {
	display: none;
}

/* Masonry grid (2156:1250). Without JS: CSS columns. With JS: grid rows sized from each
   item's ratio (catalogue.js), so appended pages never reshuffle earlier cards. */

.asset-grid {
	--grid-columns: 4;
	--grid-gap: 16px;
	margin: 0;
	padding: 0;
	columns: var(--grid-columns);
	column-gap: var(--grid-gap);
	list-style: none;
}

.asset-grid__item {
	margin-bottom: var(--grid-gap);
	break-inside: avoid;
}

.asset-grid.is-masonry {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
	grid-auto-rows: 1px;
	column-gap: var(--grid-gap);
	columns: auto;
}

.asset-grid.is-masonry .asset-grid__item {
	margin-bottom: 0;
}

.catalogue__body.is-filters-hidden .asset-grid {
	--grid-columns: 5;
}

/* No results (2211:1906) */

.no-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 64px 40px;
	border-radius: var(--radius-banner);
	background: var(--cream);
	text-align: center;
}

.no-results__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin-bottom: 20px;
	border-radius: var(--radius-pill);
	background: var(--bg);
}

.no-results__eyebrow {
	margin: 0;
	color: var(--red);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	line-height: normal;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

.no-results__title {
	margin: 0;
	font-size: var(--fs-section-sm);
	line-height: normal;
	letter-spacing: -0.015em;
}

.no-results__text {
	max-width: 520px;
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-intro);
	line-height: 1.6;
}

.no-results__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	padding-top: 8px;
}

.no-results__actions .button {
	padding: 14px 22px;
}

.no-results__actions .button--outline {
	padding: 13px 21px;
}

.no-results__suggest-title {
	margin: 28px 0 0;
	color: var(--muted-2);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	line-height: normal;
}


/* Load more (2156:998) */

.load-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 32px;
}

.load-more__status {
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-body-sm);
}

.load-more__progress {
	position: relative;
	overflow: hidden;
	width: 240px;
	height: 4px;
	border-radius: 2px;
	background: var(--border);
}

.load-more__progress span {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 2px;
	background: var(--plum);
	transition: width 0.3s ease;
}

.load-more__button {
	padding: 15px 27px;
}

.load-more__button[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

/* About the collection (2212:1665), full-bleed */

.catalogue-about {
	display: flex;
	align-items: center;
	gap: 64px;
	margin-top: 96px;
	padding: 112px var(--catalogue-side);
	background: var(--cream);
}

.catalogue-about__copy {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	align-items: flex-start;
	gap: 20px;
	width: 460px;
}

.catalogue-about__eyebrow {
	margin: 0;
	color: var(--red);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	line-height: normal;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

.catalogue-about__title {
	margin: 0;
	font-size: var(--fs-section-md);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.catalogue-about__text {
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-intro);
	line-height: 1.65;
}

.catalogue-about__highlights {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 8px 0 0;
	color: var(--ink);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: normal;
	list-style: none;
}

.catalogue-about__highlights li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.catalogue-about__check {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--radius-pill);
	background: var(--plum-tint);
}

.catalogue-about__link,
.catalogue-about__all {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--plum);
	font-weight: var(--fw-semibold);
	line-height: normal;
	text-decoration: none;
}

.catalogue-about__link {
	padding-top: 12px;
	font-size: var(--fs-body);
}

.catalogue-about__all {
	gap: 6px;
	font-size: var(--fs-body-sm);
}

.catalogue-about__link img,
.catalogue-about__all img {
	transition: transform var(--ease-hover);
}

.catalogue-about__link:hover img,
.catalogue-about__all:hover img {
	transform: translateX(3px);
}

.catalogue-about__collections {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.catalogue-about__collections-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.catalogue-about__collections-title {
	margin: 0;
	font-size: var(--fs-h5);
	line-height: normal;
	letter-spacing: var(--ls-h5);
}

.catalogue-about__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Collection tile (2212:1700) */

.collection-tile {
	position: relative;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 250 / 420;
	padding: 20px 20px 22px;
	border-radius: var(--radius-card-lg);
	background: var(--line-2);
	color: var(--bg);
	text-decoration: none;
	isolation: isolate;
}

.collection-tile__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.collection-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gradient-collection-tile);
}

.collection-tile__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.collection-tile__count {
	padding: 5px 10px;
	border-radius: var(--radius-pill);
	background: var(--white-92);
	color: var(--ink);
	font-size: var(--fs-small-sm);
	font-weight: var(--fw-semibold);
	line-height: normal;
	white-space: nowrap;
}

.collection-tile__arrow {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-pill);
	background: var(--bg);
}

.collection-tile__arrow img {
	transition: transform var(--ease-hover);
}

.collection-tile__title {
	font-family: var(--font-heading);
	font-size: var(--fs-h5);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-h5);
	letter-spacing: var(--ls-h5);
}

.collection-tile:hover .collection-tile__image {
	transform: scale(1.03);
}

.collection-tile:hover .collection-tile__arrow img {
	transform: translate(2px, -2px);
}

/* Responsive */

@media (max-width: 1439px) {
	.catalogue-about {
		flex-direction: column;
		align-items: stretch;
		gap: 48px;
	}

	.catalogue-about__copy {
		width: auto;
		max-width: 640px;
	}
}

@media (max-width: 1279px) {
	.catalogue__body {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 32px;
	}

	.asset-grid {
		--grid-columns: 3;
	}

	.catalogue__body.is-filters-hidden .asset-grid {
		--grid-columns: 4;
	}
}

/* Without the bottom sheet (no JS) the filters stack above the grid. */
@media (max-width: 1023px) {
	.catalogue__body {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.catalogue__results {
		display: contents;
	}

	.catalogue__toolbar {
		order: -1;
		flex-wrap: wrap;
		margin-top: 0;
	}

	.filters-toggle {
		order: -1;
		margin-left: 0;
	}

	.filters {
		margin-bottom: 24px;
	}

	.asset-grid,
	.catalogue__body.is-filters-hidden .asset-grid {
		--grid-columns: 3;
	}

	.catalogue-about__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.collection-tile {
		aspect-ratio: 4 / 5;
	}
}

@media (max-width: 767px) {
	.catalogue,
	.catalogue-search,
	.catalogue-about {
		--catalogue-side: var(--gutter);
	}

	.catalogue-search {
		padding-block: 15px;
	}

	.catalogue-search__form {
		height: 52px;
		padding-left: 14px;
	}

	.catalogue-search__button {
		padding: 11px 16px;
	}

	.catalogue__head {
		flex-direction: column;
		align-items: flex-start;
		padding-top: 24px;
	}

	.catalogue__body {
		padding-top: 20px;
	}

	.asset-grid,
	.catalogue__body.is-filters-hidden .asset-grid {
		--grid-columns: 2;
		--grid-gap: 12px;
	}

	.load-more__progress {
		width: 200px;
	}

	.no-results {
		padding: 40px 20px;
	}

	.no-results__icon {
		width: 64px;
		height: 64px;
		margin-bottom: 8px;
	}

	.catalogue-about {
		margin-top: 48px;
		padding-block: 64px;
	}

	.catalogue-about__title {
		line-height: var(--lh-section);
		letter-spacing: var(--ls-section-md);
	}

	.catalogue-about__text {
		font-size: var(--fs-intro);
		line-height: var(--lh-intro);
	}

	.catalogue-about__collections-head {
		flex-wrap: wrap;
	}

	.catalogue-about__grid {
		gap: 12px;
	}

	.collection-tile {
		padding: 14px 14px 16px;
	}

	.collection-tile__title {
		font-size: var(--fs-body-l);
	}
}

@media (prefers-reduced-motion: reduce) {
	.filters-sheet[open],
	.filters-sheet::backdrop {
		animation: none;
	}

	.filters-bar,
	.sort__chevron,
	.filter-group__chevron,
	.filter-group__more img,
	.load-more__progress span,
	.collection-tile__image,
	.collection-tile__arrow img,
	.catalogue-about__link img,
	.catalogue-about__all img {
		transition: none;
	}
}