/*
 * Product listings: /products/ and every category page.
 *
 * Product photography arrives as cut-outs on white, so every image well is
 * --sk-gray-light and the photo is contained rather than cropped. That keeps
 * a grid of very differently shaped products reading as one set.
 */

.catalog-intro {
	padding-block-end: 0;
}

.catalog-intro__description {
	max-inline-size: 72ch;
	color: var(--sk-gray-copy);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.7;

	> :last-child {
		margin-block-end: 0;
	}

	& + .category-cards {
		margin-block-start: clamp(2rem, 4vw, 3rem);
	}
}

/* Category cards */

.category-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
}

.category-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-block-start: 5px solid var(--sk-accent);
	background: var(--sk-gray-light);
	transition: background var(--sk-transition);

	&:hover,
	&:focus-within {
		background: var(--sk-gray-warm);
	}
}

/* Category thumbnails are scene photography rather than cut-outs, so they fill the frame. */
.category-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.category-card__image {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--sk-transition);

	.category-card:hover & {
		transform: scale(1.03);
	}
}

.category-card__body {
	padding: 1.25rem;
}

.category-card__title {
	margin: 0;
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
	line-height: 1.15;
}

.category-card__link {
	color: var(--sk-black);
	text-decoration: none;

	&::after {
		position: absolute;
		inset: 0;
		content: "";
	}

	&:hover,
	&:focus-visible {
		color: var(--sk-accent);
		text-decoration: none;
	}
}

.category-card__count {
	margin: 0.375rem 0 0;
	color: var(--sk-gray);
	font-family: var(--sk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Listing layout */

.catalog__layout {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;

	@media (min-width: 64rem) {
		.catalog--filtered & {
			grid-template-columns: 16rem minmax(0, 1fr);
			gap: clamp(2rem, 3.5vw, 3.5rem);
		}
	}
}

.catalog__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: baseline;
	justify-content: space-between;
	margin-block-end: 1.5rem;
	padding-block-end: 1rem;
	border-block-end: 1px solid color-mix(in srgb, var(--sk-gray) 26%, transparent);
}

.catalog__count {
	margin: 0;
	color: var(--sk-black);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
}

.catalog__clear {
	color: var(--sk-accent);
	font-family: var(--sk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;

	&::before {
		margin-inline-end: 0.375rem;
		content: "\00d7";
	}

	&:hover,
	&:focus-visible {
		color: var(--sk-accent-dark);
		text-decoration: none;
	}
}

.catalog__empty {
	padding: clamp(2rem, 5vw, 4rem);
	background: var(--sk-gray-light);
	text-align: center;

	p {
		color: var(--sk-gray-copy);
		font-size: 1.0625rem;
	}
}

/* Filters */

.catalog-filters {
	border: 2px solid color-mix(in srgb, var(--sk-gray) 28%, transparent);

	@media (min-width: 64rem) {
		position: sticky;
		top: 1.5rem;
		border: 0;

		/* Held open on desktop whatever the toggle says; the summary is only
		   the phone's way in. */
		&::details-content {
			content-visibility: visible;
		}
	}
}

.catalog-filters__toggle {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	padding: 0.875rem 1.125rem;
	color: var(--sk-black);
	font-family: var(--sk-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;

	&::-webkit-details-marker {
		display: none;
	}

	&::after {
		margin-inline-start: auto;
		color: var(--sk-accent);
		font-size: 1.125rem;
		line-height: 1;
		content: "+";
	}

	[open] > &::after {
		content: "\2212";
	}

	@media (min-width: 64rem) {
		display: none;
	}
}

.catalog-filters__badge {
	display: inline-grid;
	place-items: center;
	min-inline-size: 1.375rem;
	block-size: 1.375rem;
	padding-inline: 0.25rem;
	background: var(--sk-accent);
	color: var(--sk-white);
	font-size: 0.6875rem;
	letter-spacing: 0;
}

.catalog-filters__form {
	display: grid;
	gap: 1.75rem;
	padding: 0.25rem 1.125rem 1.25rem;

	@media (min-width: 64rem) {
		padding: 0;
	}
}

.catalog-facet {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.catalog-facet__title {
	display: block;
	inline-size: 100%;
	margin-block-end: 0.75rem;
	padding: 0 0 0.625rem;
	border-block-end: 2px solid var(--sk-accent);
	color: var(--sk-black);
	font-family: var(--sk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.catalog-facet__options {
	display: grid;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
}

.catalog-check {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	padding-block: 0.375rem;
	color: var(--sk-gray-copy);
	font-size: 0.9375rem;
	cursor: pointer;

	&:hover .catalog-check__label {
		color: var(--sk-black);
	}

	&.is-empty {
		opacity: 0.45;
		cursor: default;
	}
}

.catalog-check__input {
	flex: none;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	margin: 0;
	accent-color: var(--sk-accent);
}

.catalog-check__label {
	transition: color var(--sk-transition);

	.catalog-check__input:checked + & {
		color: var(--sk-black);
		font-weight: 700;
	}
}

.catalog-check__count {
	margin-inline-start: auto;
	color: var(--sk-gray);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.catalog-range {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.catalog-range__label {
	display: block;
	margin-block-end: 0.375rem;
	color: var(--sk-gray);
	font-family: var(--sk-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.catalog-range__input {
	inline-size: 100%;
	padding: 0.625rem 0.75rem;
	border: 2px solid color-mix(in srgb, var(--sk-gray) 28%, transparent);
	border-radius: 0;
	background: var(--sk-white);
	color: var(--sk-black);
	font: inherit;
	font-size: 0.9375rem;
	transition: border-color var(--sk-transition);

	&:focus {
		border-color: var(--sk-accent);
		outline: none;
	}
}

.catalog-filters__actions .button {
	justify-content: center;
	inline-size: 100%;
}

/* Product grid */

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
}

.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	block-size: 100%;
}

.product-card__media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--sk-gray-light);

	/* The accent edge, drawn in from the left while the card is live. */
	&::after {
		position: absolute;
		inset-block-end: 0;
		inset-inline: 0;
		block-size: 4px;
		background: var(--sk-accent);
		content: "";
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--sk-transition);
	}

	.product-card:hover &::after,
	.product-card:focus-within &::after {
		transform: scaleX(1);
	}
}

.product-card__image {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;

	/* Drops a white cut-out into the gray well instead of leaving a white box. */
	mix-blend-mode: multiply;
	transition: transform var(--sk-transition);

	.product-card:hover & {
		transform: scale(1.03);
	}
}

.product-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: var(--sk-accent-25);
	color: var(--sk-accent-dark);
	font-family: var(--sk-font-display);
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	overflow-wrap: anywhere;
}

.product-card__body {
	padding-block-start: 0.875rem;
}

.product-card__bands {
	margin: 0 0 0.375rem;
	color: var(--sk-accent);
	font-family: var(--sk-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.product-card__title {
	margin: 0;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	letter-spacing: 0.01em;
	line-height: 1.15;
	text-transform: none;
}

.product-card__link {
	color: var(--sk-black);
	text-decoration: none;
	transition: color var(--sk-transition);

	&::after {
		position: absolute;
		inset: 0;
		content: "";
	}

	&:hover,
	&:focus-visible {
		color: var(--sk-accent);
		text-decoration: none;
	}
}

.product-card__subtitle {
	display: -webkit-box;
	overflow: hidden;
	margin: 0.375rem 0 0;

	/* stylelint-disable-next-line property-no-vendor-prefix -- as in news.css. */
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	color: var(--sk-gray-copy);
	font-size: 0.875rem;
	line-height: 1.5;
}