/* ==========================================================================
   Buscador AJAX: Categorías + grupos de atributo (Marcas, Ingrediente,
   Colección, Preocupación, Textura, Tipo de piel) agrupados en columnas
   dentro de .wd-attr-row / .wd-attr-column (generados por buscador-ajax.js).
   "Productos" se queda fuera de este bloque, apilado debajo, sin cambios.
   ========================================================================== */

/* Espaciado interno de cada sugerencia (entradas de Categorías/Atributos)
   dentro del buscador full-screen. */
.wd-search-full-screen .wd-suggestion {
	padding: 5px !important;
}

/* Texto de cada sugerencia: peso/color normal por defecto, y más
   marcado (negrita + más oscuro) en la parte que WoodMart resalta en
   <strong> por coincidir con lo escrito. */
.wd-suggestion .wd-entities-title {
	font-weight: 400 !important;
	color: var(--color-gray-500) !important;
}

.wd-suggestion .wd-entities-title strong {
	font-weight: 600 !important;
	color: var(--color-gray-700) !important;
}

/* --- Desktop (por defecto): una sola fila, grupo centrado, columnas
   ajustadas a su contenido (no expandidas a rellenar todo el ancho) --- */
.wd-search-suggestions .wd-attr-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-bottom: 20px;
	width: 100%;
}

.wd-search-suggestions .wd-attr-column {
	flex: 0 1 auto;
	min-width: 140px;
	max-width: 240px;
	text-align: center !important;
}

.wd-search-suggestions .wd-attr-column .wd-search-title.title {
	width: 100%;
	/* Tipografía de marca para los títulos de Categorías/Atributos
	   (MARCAS, INGREDIENTE, COLECCIÓN...), en minúsculas en vez del
	   mayúsculas por defecto del tema. Si "Goodly Regular" no está
	   registrada tal cual con ese nombre en el sitio (@font-face o
	   fuente del sistema), esto no se aplicará — comprobar el nombre
	   exacto que use el resto de la web para esa fuente. */
	font-family: "Goodly Regular", serif;
	font-size: 1.5rem;
	text-transform: lowercase;
	text-align: center !important;
	display: block;
}

/* Regla más genérica (sin scope a .wd-attr-column), pedida aparte: sirve
   de refuerzo para cualquier .wd-search-title.title del buscador que no
   quede cubierto por la regla más específica de arriba. */
.wd-search-title.title {
	font-family: 'Goodly Regular' !important;
	text-transform: lowercase !important;
	font-size: 1.5rem !important;
}

.wd-search-suggestions .wd-attr-column .wd-suggestions-group {
	width: 100%;
	text-align: center !important;
}

.wd-search-suggestions .wd-attr-column .wd-suggestion {
	display: block;
	width: 100%;
	text-align: center !important;
}

.wd-search-suggestions .wd-attr-column .wd-suggestion-content {
	width: 100%;
	text-align: center !important;
}

.wd-search-suggestions .wd-attr-column .wd-entities-title {
	display: block;
	width: 100%;
	justify-content: center;
	text-align: center !important;
}

/* --- Tablet: columnas de ancho acotado (no 1fr, que siempre rellena
   el 100% y anula el centrado); auto-fit + justify-content sí centra
   el grupo cuando hay menos columnas de las que caben en la fila --- */
@media (max-width: 1024px) {
	.wd-search-suggestions .wd-attr-row {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(140px, 240px));
		justify-content: center;
		gap: 16px;
	}

	.wd-search-suggestions .wd-attr-column {
		max-width: none;
	}
}

/* --- Móvil: con 2 grupos o menos, se reparten en grid (caben cómodos,
   como en tablet). Con 3 o más, en vez de apilarse en varias filas de
   cuadrícula (obliga a bajar mucho con el pulgar), se muestran en una
   sola fila con scroll horizontal — se detecta con :has() sin
   necesitar JS adicional, contando si existe una 3ª columna. --- */
@media (max-width: 600px) {
	.wd-search-suggestions .wd-attr-row {
		/* Hasta 230px por columna (antes 160): con 160, nombres largos
		   como "Poros dilatados / Puntos negros" se partían en cuatro
		   líneas. Esto vale para 1 sola columna (o 3+, que usa su propio
		   modo de scroll más abajo) — el caso de EXACTAMENTE 2 columnas
		   tiene su propia regla justo debajo, porque con auto-fit y un
		   máximo de 230px, dos columnas (460px) no caben en el ancho de
		   una pantalla de móvil normal y acababan apilándose una debajo
		   de la otra en vez de repartirse la fila. */
		grid-template-columns: repeat(auto-fit, minmax(140px, 230px));
		gap: 12px;
		margin-bottom: 12px;
	}

	/* Exactamente 2 columnas: reparto real al 50% cada una, en la misma
	   fila — nunca apiladas. "1fr 1fr" en vez de un ancho fijo es lo que
	   lo garantiza: cada columna ocupa la mitad del espacio disponible
	   sea cual sea el ancho de pantalla, así que siempre caben las dos
	   juntas. Se detecta con :has() igual que el caso de 3+, sin
	   necesitar JS adicional. */
	.wd-search-suggestions .wd-attr-row:has(.wd-attr-column:nth-child(2)):not(:has(.wd-attr-column:nth-child(3))) {
		grid-template-columns: 1fr 1fr;
	}

	.wd-search-suggestions .wd-attr-column {
		min-width: 0;
	}

	.wd-search-suggestions .wd-attr-column .wd-search-title.title,
	.wd-search-suggestions .wd-attr-row .wd-attr-column .wd-search-title,
	.wd-search-suggestions .wd-attr-row-wrap .wd-attr-column .wd-search-title {
		font-size: 1.2rem !important;
		margin-bottom: 8px !important;
		line-height: 1.2 !important;
	}

	.wd-search-suggestions .wd-attr-column .wd-entities-title {
		font-size: 13px;
	}

	/* 3+ grupos: fila única con scroll horizontal, en vez de grid.
	   El contenedor exterior (.wd-attr-row-wrap, creado por
	   buscador-ajax.js) es quien lleva el degradado del borde derecho:
	   tiene que estar FUERA del elemento que hace scroll, porque un
	   pseudo-elemento dentro de un contenedor con overflow se
	   desplazaría junto al contenido en vez de quedarse fijo al borde.

	   El !important de padding/gap no es capricho: sin él, el CSS del
	   propio WoodMart gana en especificidad y estas dos propiedades no
	   llegan a aplicarse (es el mismo motivo por el que el resto de
	   reglas de este archivo ya lo llevan). */
	.wd-search-suggestions .wd-attr-row:has(.wd-attr-column:nth-child(3)) {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		/* NADA de scroll-snap-type aquí: al pintarse la fila, el
		   navegador "encajaba" el scroll al punto de anclaje más
		   cercano, y ese salto inicial dejaba la primera columna
		   ("categorías") medio fuera de la pantalla, cortada por la
		   izquierda — no era falta de padding, era que la fila no
		   arrancaba en la posición 0. */
		justify-content: flex-start !important;
		/* Padding lateral: sin esto la primera columna ("categorías")
		   queda pegada al borde de la pantalla, sin el mismo aire que
		   el resto del buscador. */
		padding: 0 16px 6px !important;
		/* Separación entre columnas: con títulos largos como
		   "preocupación" y "tipo de piel", 12px los dejaba visualmente
		   pegados el uno al otro. */
		gap: 22px !important;
	}

	.wd-search-suggestions .wd-attr-row:has(.wd-attr-column:nth-child(3)) .wd-attr-column {
		flex: 0 0 auto !important;
		/* 190px en vez de 130: con 130 los nombres largos ("Poros
		   dilatados", "Puntos negros") partían en 3-4 líneas. Como la
		   fila tiene scroll horizontal, ensanchar no rompe nada — solo
		   hay que deslizar un poco más para ver el resto de columnas. */
		width: 190px !important;
	}

	/* Espaciadores al principio y al final de la fila con scroll.
	   Por qué no basta con el padding: en contenedores con overflow-x,
	   varios navegadores móviles ignoran el padding-right al calcular el
	   ancho desplazable (el último elemento acaba pegado al borde), y el
	   padding-left puede quedar "por debajo" del contenido al desplazar.
	   Un elemento vacío de ancho fijo a cada lado sí se respeta siempre,
	   porque forma parte del contenido de la fila. */
	.wd-search-suggestions .wd-attr-row:has(.wd-attr-column:nth-child(3))::before,
	.wd-search-suggestions .wd-attr-row:has(.wd-attr-column:nth-child(3))::after {
		content: '';
		flex: 0 0 4px;
	}
}

/* --- Móvil muy estrecho: 1 columna apilada, PERO solo cuando hay 2
   grupos o menos — si hay 3+ (modo scroll de arriba), el scroll
   horizontal sigue aplicándose también aquí, no se apila. --- */
@media (max-width: 380px) {
	.wd-search-suggestions .wd-attr-row:not(:has(.wd-attr-column:nth-child(3))) {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Degradado de "hay más contenido, desliza" en la fila con scroll.
   ==========================================================================
   Va en un envoltorio (.wd-attr-row-wrap) que NO hace scroll, con la
   fila desplazable dentro: si el pseudo-elemento estuviera dentro del
   propio contenedor con overflow, se desplazaría junto al contenido en
   lugar de quedarse fijo pegado al borde derecho.

   La clase .wd-has-overflow-right la pone y quita buscador-ajax.js
   según la posición real del scroll: aparece mientras quede contenido a
   la derecha y desaparece al llegar al final del todo. CSS por sí solo
   no puede saber eso.
   ========================================================================== */
.wd-attr-row-wrap {
	position: relative;
}

.wd-attr-row-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 48px;
	pointer-events: none; /* Nunca bloquea el arrastre ni los clics. */
	background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 0.95 ) 65%, #fff );
	opacity: 0;
	transition: opacity .18s ease;
}

.wd-attr-row-wrap.wd-has-overflow-right::after {
	opacity: 1;
}