/**
 * RF collection page: title + description, collection navigation, toolbar,
 * 4-column (desktop) / 2-column (mobile) grid of the shared product cards,
 * load more, and the Filter & sort drawer.
 */

.rf-collection {
	padding-bottom: var(--space-section-tight);
}

/* ---------------------------------------------------------------- Header */
.rf-collection__header {
	max-width: var(--layout-wide);
	margin-inline: auto;
	padding: var(--space-m) var(--gutter) var(--space-xs);
}

.rf-collection__title {
	font-size: 0.8125rem;
	font-weight: var(--weight-regular);
	letter-spacing: 0.06em;
	line-height: 1.3;
}

/* Title and Filter & sort on one line, with a thin divider below. */
.rf-collection__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2xs) var(--space-m);
	max-width: var(--layout-wide);
	margin: 0 auto var(--space-2xs);
	padding: var(--space-3xs) var(--gutter);
	border-bottom: 1px solid var(--color-hairline);
}

.rf-collection__bar .rf-collection__header {
	max-width: none;
	margin: 0;
	padding: 0;
}

.rf-collection__bar .rf-collection__title {
	margin: 0;
}

.rf-collection__bar .rf-toolbar {
	justify-content: flex-end;
	max-width: none;
	margin: 0 0 0 auto;
	padding: 0;
	border-bottom: 0;
}

/* ---------------------------------------------------------------- Toolbar */
.rf-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs) var(--space-m);
	max-width: var(--layout-wide);
	margin-inline: auto;
	padding: 0 var(--gutter);
	border-bottom: 1px solid var(--color-hairline);
	margin-bottom: var(--space-2xs);
	font-size: var(--type-nav-size);
	letter-spacing: var(--type-nav-tracking);
}

.rf-toolbar__count {
	color: var(--color-text-secondary);
}

.rf-toolbar__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rf-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: 2rem;
	padding: 0 var(--space-xs);
	border: 1px solid var(--color-text);
}

.rf-chip:hover {
	background: var(--color-text);
	color: var(--color-background);
	text-decoration: none;
}

.rf-chip__x {
	position: relative;
	width: 0.5rem;
	height: 0.5rem;
}

.rf-chip__x::before,
.rf-chip__x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	rotate: 45deg;
}

.rf-chip__x::after {
	rotate: -45deg;
}

.rf-toolbar__clear {
	text-decoration-line: underline;
	text-underline-offset: 0.3em;
}

.rf-toolbar__filter {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	min-height: 2.75rem;
	margin-inline-start: auto;
	text-transform: uppercase;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.45em;
}

.rf-toolbar__filter:hover {
	text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------- Grid */
.rf-collection__grid {
	--grid-cols: 2;
	--grid-cols-md: 4;
	--grid-cols-lg: 4;
	margin: 0;
	padding: 0 var(--space-grid-x);
	list-style: none;
}

.rf-collection__grid .rf-card__body {
	padding-inline: var(--space-2xs);
}

.rf-collection__grid .rf-card__price {
	color: #000000;
}

/* Mobile: each card's images swipe sideways inside the card (native
   scroll-snap; vertical page scrolling and tapping the card are unaffected).
   Desktop keeps the static first image (and the hover image). */
.rf-collection__grid .rf-card__slides {
	display: none;
}

@media (max-width: 899px) {
	.rf-collection__grid .rf-card.has-slides .rf-card__img {
		display: none;
	}

	.rf-collection__grid .rf-card__slides {
		position: absolute;
		inset: 0;
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.rf-collection__grid .rf-card__slides::-webkit-scrollbar {
		display: none;
	}

	.rf-collection__grid .rf-card__slide {
		flex: 0 0 100%;
		width: 100%;
		height: 100%;
		object-fit: cover;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}

.rf-collection__empty {
	display: grid;
	justify-items: center;
	gap: var(--space-s);
	padding: var(--space-2xl) var(--gutter);
	text-align: center;
}

/* ------------------------------------------------------------ Pagination */
.rf-pager {
	display: grid;
	justify-items: center;
	gap: var(--space-m);
	margin-top: var(--space-xl);
	padding-inline: var(--gutter);
}

.rf-pager__more {
	min-width: 12rem;
}

.rf-pager__more[aria-busy="true"] {
	opacity: 0.5;
}

.rf-pager__pages ul {
	display: flex;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rf-pager__pages a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	font-size: var(--type-nav-size);
}

.rf-pager__pages a[aria-current="page"] {
	text-decoration-line: underline;
	text-underline-offset: 0.35em;
}

/* With JavaScript, "Load more" replaces the page links. */
.rf-js .rf-pager__pages {
	display: none;
}

/* --------------------------------------------------- Filter & sort drawer */
.rf-filters {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(100%, var(--drawer-width));
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	background: var(--color-background);
	color: var(--color-text);
	translate: 100% 0;
	transition: translate var(--duration-drawer) var(--ease-drawer);
}

.rf-filters[open] {
	display: flex;
	flex-direction: column;
}

.rf-filters.is-open {
	translate: 0 0;
}

.rf-filters::backdrop {
	background: var(--color-overlay);
}

.rf-filters__inner {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.rf-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-height);
	padding-inline: var(--gutter);
	border-bottom: 1px solid var(--color-hairline);
}

.rf-filters__title {
	font-size: var(--type-heading-size-sm);
	font-weight: var(--weight-regular);
}

.rf-filters__close {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 2.75rem;
	min-height: 2.75rem;
	font-size: var(--type-nav-size);
}

.rf-filters__close:hover {
	text-decoration-line: underline;
	text-underline-offset: 0.45em;
}

.rf-filters__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 var(--gutter);
}

.rf-filters__group {
	padding-block: var(--space-m);
	border-bottom: 1px solid var(--color-hairline);
}

.rf-filters__legend {
	margin-bottom: var(--space-xs);
	font-size: var(--type-caption-size);
	font-weight: var(--weight-regular);
	letter-spacing: 0.08em;
}

.rf-filters__options {
	display: grid;
	gap: var(--space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rf-filters__options--grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-2xs);
}

.rf-filters__option {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: 2.75rem;
	font-size: var(--type-body-size);
	color: inherit;
}

.rf-filters__option:hover {
	text-decoration: none;
}

/* Box/circle indicators; filled when selected (aria-current). */
.rf-filters__option--radio::before,
.rf-filters__option--checkbox::before {
	content: "";
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	border: 1px solid var(--color-text);
	box-shadow: inset 0 0 0 2px var(--color-background);
	transition: background-color var(--duration-fast) var(--ease-standard);
}

.rf-filters__option--radio::before {
	border-radius: 50%;
}

.rf-filters__option[aria-current="true"]::before {
	background: var(--color-text);
}

.rf-filters__options--grid .rf-filters__option {
	justify-content: center;
	border: 1px solid var(--color-hairline);
}

.rf-filters__options--grid .rf-filters__option::before {
	display: none;
}

.rf-filters__options--grid .rf-filters__option[aria-current="true"] {
	border-color: var(--color-text);
	background: var(--color-text);
	color: var(--color-background);
}

.rf-filters__option.is-disabled {
	color: var(--color-text-secondary);
	opacity: 0.5;
	cursor: default;
}

.rf-filters__count {
	color: var(--color-text-secondary);
	font-size: var(--type-caption-size);
}

.rf-filters__options--grid [aria-current="true"] .rf-filters__count {
	color: inherit;
}

.rf-filters__foot {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--space-2xs);
	padding: var(--space-s) var(--gutter) calc(var(--space-s) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--color-hairline);
}