/**
 * RF search: full-screen white overlay (<dialog id="rf-search">), one large
 * input, live product results below. Monochrome, no boxes.
 */

.rf-search {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow-y: auto;
	background: var(--color-background);
	color: var(--color-text);
	opacity: 0;
	transition: opacity var(--duration-standard) var(--ease-standard);
}

.rf-search::backdrop {
	background: transparent;
}

.rf-search.is-open {
	opacity: 1;
}

.rf-search__panel {
	position: relative;
	min-height: 100%;
	translate: 0 -0.75rem;
	transition: translate var(--duration-drawer) var(--ease-drawer);
}

.rf-search.is-open .rf-search__panel {
	translate: 0 0;
}

.rf-search__inner {
	max-width: var(--layout-wide);
	margin-inline: auto;
	padding: calc(var(--header-height) + var(--space-l)) var(--gutter) var(--space-2xl);
}

.rf-search__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	column-gap: var(--space-m);
	border-bottom: 1px solid var(--color-text);
}

/* The rule under the field is the focus indicator for the large input. */
.rf-search__form:focus-within {
	box-shadow: 0 1px 0 0 var(--color-text);
}

.rf-search__label {
	grid-column: 1 / -1;
	margin-bottom: var(--space-2xs);
	color: var(--color-text-secondary);
	font-size: var(--type-caption-size);
	letter-spacing: var(--type-caption-tracking);
}

.rf-search__input {
	width: 100%;
	min-height: 3.5rem;
	padding: var(--space-2xs) 0;
	border: 0;
	background: transparent;
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--type-heading-size-lg);
	font-weight: var(--weight-light);
	letter-spacing: var(--type-heading-tracking);
	text-transform: var(--type-heading-case);
	appearance: none;
}

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

.rf-search__input:focus-visible {
	outline: none;
}

.rf-search__input::-webkit-search-cancel-button {
	appearance: none;
}

.rf-search__submit {
	min-height: 2.75rem;
	margin-bottom: var(--space-2xs);
	font-size: var(--type-nav-size);
	letter-spacing: var(--type-nav-tracking);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.45em;
}

.rf-search__close {
	position: absolute;
	top: 0;
	right: var(--gutter);
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	height: var(--header-height);
	min-width: 2.75rem;
	font-size: var(--type-nav-size);
	letter-spacing: var(--type-nav-tracking);
}

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

.rf-search__results:not(:empty) {
	margin-top: var(--space-l);
}

.rf-search__status {
	margin-bottom: var(--space-s);
	color: var(--color-text-secondary);
	font-size: var(--type-caption-size);
	letter-spacing: var(--type-caption-tracking);
}

.rf-search__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-grid-y) var(--space-grid-x);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.rf-search__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.rf-search__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.rf-search__all {
	margin-top: var(--space-m);
}