/* ==========================================================================
   Kamala — buscador general. (La clase es .site-search: WordPress pone
   "search" en <body> en la página de resultados y chocaría.)
   Medidas del boceto a 1440 px: lo escrito a 80 px sobre una línea, aspa a la
   derecha y cinco resultados por fila con fotos grandes. Dos por fila en móvil.
   ========================================================================== */

.site-search {
	position: fixed;
	inset: var(--header-h) 0 0;
	z-index: 90;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--paper);
	opacity: 0;
	transition: opacity 0.25s var(--ease);
}

.site-search[hidden] {
	display: none;
}

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

/* En la página de resultados forma parte de la página, no flota. */
.site-search.is-page {
	position: static;
	min-height: 70svh;
	overflow: visible;
}

.site-search__inner {
	padding-block: clamp(22px, 3.7vw, 53px) clamp(48px, 6vw, 96px);
}

.site-search__label {
	display: block;
	font-size: clamp(0.625rem, 0.56rem + 0.25vw, 0.75rem);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
}

.site-search__row {
	display: flex;
	align-items: center;
	gap: 16px;
	border-bottom: 1px solid var(--muted);
}

.site-search__input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: clamp(2.375rem, 1.2rem + 4.9vw, 5rem);
	font-weight: 200;
	letter-spacing: 0.01em;
	line-height: 1.3;
	text-transform: uppercase;
	caret-color: var(--ink);
	appearance: none;
}

.site-search__input:focus {
	outline: 0;
}

.site-search__input::-webkit-search-cancel-button,
.site-search__input::-webkit-search-decoration {
	appearance: none;
}

.site-search__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--tap);
	height: var(--tap);
	margin-right: -10px;
}

.site-search__close .icon {
	width: 28px;
	height: 28px;
}

.site-search__meta {
	display: flex;
	justify-content: space-between;
	gap: 4px 24px;
	min-height: 1.4em;
	margin: clamp(14px, 2.2vw, 32px) 0 clamp(8px, 1.3vw, 18px);
	font-size: clamp(0.625rem, 0.56rem + 0.25vw, 0.75rem);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
}

.site-search__meta p {
	margin: 0;
}

.site-search__results {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Tarjeta de resultado: un modelo con sus colores, como en el catálogo.
   De arriba abajo: la foto, el nombre y los datos, y los colores. Cada parte
   tiene su sitio, así las miniaturas nunca pisan la foto. */
.search-tile {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--surface);
}

.search-tile__media {
	position: relative;
	display: block;
	flex: none;
	aspect-ratio: 10 / 8;
	overflow: hidden;
}

/* Las gafas al mismo tamaño que en el catálogo (aviso de Andrés, 14/10): cada
   foto lleva las medidas de su gafa (.fit-photo, base.css), al 80 % del
   ancho y centrada. Antes la foto se recortaba igual para todas y unas gafas
   salían enormes y otras pequeñas. */
.search-tile__media .search-tile__img.fit-photo {
	transition: transform 0.6s var(--ease);
}

/* Fotos por color para deslizar: solo en móvil (más abajo). */
.search-tile__slides,
.search-tile__dots {
	display: none;
}

/* Misma técnica que el catálogo: la foto se funde con el gris de la tarjeta. */
.site-search .search-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* la foto es vertical con aire arriba y abajo: se recorta ese aire */
	filter: brightness(1.02);
	mix-blend-mode: multiply;
	transition: transform 0.6s var(--ease);
}

.search-tile:hover .search-tile__media img {
	transform: scale(1.03);
}

/* Colores: tres huecos del mismo tamaño, sobre el gris de la tarjeta. */
.search-tile__variants {
	order: 2;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, clamp(44px, 4.6vw, 66px)));
	gap: 8px;
	margin-top: auto;
	padding: 0 clamp(10px, 1.2vw, 17px) clamp(12px, 1.4vw, 18px);
}

.search-tile__variant,
.search-tile__more {
	display: block;
	min-width: 0;
	aspect-ratio: 100 / 76;
	border: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
	transition: background-color 0.25s var(--ease);
}

.site-search .search-tile__variant img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(1.02);
	mix-blend-mode: multiply;
}

/* El color elegido, sobre una ficha blanca, como en el catálogo. */
.search-tile__variant.is-active,
.search-tile__variant:hover {
	background: var(--paper);
}

.search-tile__more:hover {
	background: rgba(16, 24, 32, 0.1);
}

.search-tile__more {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(16, 24, 32, 0.05);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.search-tile__info {
	order: 1;
	display: flex;
	flex-direction: column;
	padding: 4px clamp(10px, 1.2vw, 17px) 12px;
	text-decoration: none;
}

/* La misma letra que las tarjetas del catálogo: nombre a 13 px, el resto a
   11 y 12 px, fino y en gris. */
.search-tile__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.search-tile__name,
.search-tile__count,
.search-tile__meta {
	text-transform: uppercase;
}

.search-tile__name {
	overflow: hidden;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.search-tile__count,
.search-tile__meta {
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.search-tile__count {
	flex: none;
}

.search-tile__meta {
	margin-top: 4px;
}

.search-tile__price {
	margin-top: 6px;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.search-tile__price[hidden] {
	display: none;
}

.site-search__empty {
	margin: 24px 0 0;
	color: var(--muted);
}

.search-open {
	overflow: hidden;
}

@media (max-width: 1099px) {
	.site-search__results {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 899px) {
	.site-search__meta {
		flex-direction: column;
	}

	.site-search__results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 5px;
	}

	.search-tile__variants {
		grid-template-columns: repeat(3, minmax(0, 46px));
		gap: 6px;
	}

	/* Como el catálogo en móvil: nombre, colores y precio; los colores se
	   pasan deslizando la foto, con un punto por color. */
	.search-tile__meta,
	.search-tile.has-slides .search-tile__variants,
	.search-tile.has-slides .search-tile__media > .search-tile__img {
		display: none;
	}

	.search-tile__count {
		font-size: 0.5625rem;
	}

	.search-tile__name {
		font-size: 0.75rem;
	}

	.search-tile.has-slides .search-tile__slides {
		position: absolute;
		inset: 0;
		display: flex;
		overflow-x: auto;
		overflow-y: hidden; /* solo de lado (ver catalog.css) */
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.search-tile__slides::-webkit-scrollbar {
		display: none;
	}

	/* Gris en cada foto, como en el catálogo (Safari, ver catalog.css). */
	.search-tile__slide {
		position: relative;
		flex: 0 0 100%;
		overflow: hidden;
		background: var(--surface);
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.site-search .search-tile__slide img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: brightness(1.02);
		mix-blend-mode: multiply;
	}

	.search-tile.has-slides .search-tile__dots {
		position: absolute;
		right: 0;
		bottom: 8px;
		left: 0;
		display: flex;
		justify-content: center;
		gap: 5px;
		pointer-events: none;
	}

	.search-tile__dots i {
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: rgba(16, 24, 32, 0.22);
	}

	.search-tile__dots i.is-on {
		background: var(--ink);
	}
}

/* Con el buscador abierto, la cabecera va siempre blanca (también en portada). */
html.search-open .site-header.is-overlay {
	border-bottom-color: var(--line) !important;
	background: var(--paper) !important;
	color: var(--ink) !important;
	mix-blend-mode: normal !important;
}