/* =========================================================
   BUSCADOR — UX/UI del live search (panel de resultados AJAX)
   ---------------------------------------------------------
   Capa de marca + rediseno moderno del buscador del header
   (display form/dropdown). Selectores verificados contra el
   tema padre WoodMart 8.5.1 (templates dropdown/full-screen,
   class-search-form.php, js/global/ajaxSearch.js) y contra el
   DOM renderizado.

   Estructura real del panel:
     .wd-search-results.wd-dropdown-results > .wd-scroll-content
       .wd-search-requests        (populares: title + ul>li>a -> chips)
       .wd-search-area            (extra content, HTML block opcional)
       .wd-search-suggestions
         .wd-suggestions-group.wd-type-product
           .wd-suggestion
             .wd-suggestion-thumb > img
             .wd-suggestion-content
               .wd-entities-title (strong = match)
               p.price .amount
               .wd-suggestion-sku   (si show_sku_on_ajax)
             a.wd-fill              (link que cubre la card)
         a.wd-all-results

   Tokens: variables.css (--color-brand-*, --font-heading Oswald,
   --font-body Roboto). Encolado site-wide a prioridad 10010
   (gana en empates con el smart-CSS inline del padre).
   ========================================================= */

/* ============== 1. FORM / INPUT (header) ============== */
.wd-header-search .searchform input.s,
.searchform.wd-display-form input.s,
.searchform.wd-display-dropdown input.s {
	font-family: var(--font-body);
}

.wd-header-search .searchform input.s:focus,
.searchform input.s:focus {
	border-color: var(--color-brand-primary);
	box-shadow: 0 0 0 3px rgba(56, 98, 122, 0.15);
}

.searchform input.s::placeholder {
	color: var(--color-text-muted);
	font-family: var(--font-body);
}

/* Icono lupa (style-4: el ico vive en el boton submit) */
.searchform.wd-style-4 .searchsubmit,
.searchform.wd-style-4 .searchsubmit:before,
.searchform.wd-style-4 .searchsubmit:after {
	color: var(--color-brand-primary);
}

.wd-clear-search:hover {
	color: var(--color-brand-primary);
}

/* ============== 2. PANEL (dropdown / superficie) ============== */
/* Superficie elevada moderna: radius generoso, sombra suave en capas,
   borde hairline. No tocamos top/transform/transition de apertura. */
.wd-search-results.wd-dropdown-results {
	border-radius: 14px;
	border: 1px solid var(--color-border);
	box-shadow:
		0 4px 12px rgba(15, 32, 43, 0.06),
		0 16px 40px rgba(15, 32, 43, 0.12);
	overflow: hidden;
	background-color: #fff;
}

/* Entrada sutil del panel (fade + leve subida). Respeta reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
	.wd-search-results.wd-dropdown-results.wd-opened {
		animation: naccato-search-in 0.18s ease-out both;
	}
	@keyframes naccato-search-in {
		from { opacity: 0; transform: translateY(-6px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

/* Scroll interno: padding consistente + scrollbar fino. */
.wd-search-results .wd-scroll-content {
	padding: 6px;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}
.wd-search-results .wd-scroll-content::-webkit-scrollbar {
	width: 8px;
}
.wd-search-results .wd-scroll-content::-webkit-scrollbar-thumb {
	background-color: var(--color-border);
	border-radius: 999px;
	border: 2px solid #fff;
}

/* ============== 3. TITULOS DE SECCION ============== */
.wd-search-title.title,
.suggestion-divider-title.title {
	font-family: var(--font-heading);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.72rem;
	font-weight: 600;
	padding: 12px 10px 6px;
}

/* ============== 4. BUSQUEDAS POPULARES (chips) ============== */
.wd-search-requests {
	padding: 0 4px 6px;
}
.wd-search-requests ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 6px;
}
.wd-search-requests ul li { margin: 0; }
.wd-search-requests ul li a {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	background-color: var(--color-brand-pale);
	color: var(--color-brand-dark);
	font-family: var(--font-body);
	font-size: 0.85rem;
	line-height: 1.5;
	transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.wd-search-requests ul li a:hover {
	background-color: var(--color-brand-primary);
	color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
	.wd-search-requests ul li a:hover { transform: translateY(-1px); }
}

/* ============== 5. EXTRA CONTENT (HTML block opcional) ============== */
.wd-search-results .wd-search-area {
	margin: 4px 6px 8px;
}

/* ============== 6. RESULTADOS (suggestions) ============== */
/* Una sola columna (lista), sin importar el ancho: simple y legible. */
.wd-suggestions-group {
	grid-template-columns: 1fr;
	gap: 2px;
}

/* Card de resultado: fila clickable con hover suave, sin lineas duras. */
.wd-suggestion {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-bottom: 0;
	border-radius: 10px;
	transition: background-color 0.16s ease;
}
.wd-suggestion:hover {
	background-color: var(--color-brand-pale);
}
.wd-suggestion + .wd-suggestion { border-top: 0; }

/* Thumbnail: cuadro consistente con fondo neutro (las fotos del catalogo
   GBP son dispares y muchas son placeholder). object-fit contain para que
   ni se recorte ni se deforme. */
.wd-suggestion-thumb {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	max-width: 40px;   /* gana sobre WoodMart dropdown (.wd-dropdown-results ... max-width:45/65px) */
	border-radius: 8px;
	background-color: var(--color-bg-body);
	border: 1px solid var(--color-border);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wd-suggestion-thumb img {
	width: 100%;
	height: 100%;
	max-height: 100%;   /* corta las fotos verticales (ej. 123x500) que rompian el alto */
	object-fit: contain;
	border-radius: 0;
	padding: 4px;
}

/* Contenido: titulo + precio. */
.wd-suggestion-content {
	flex: 1 1 auto;
	min-width: 0;
	--wd-mb: 4px;
}
.wd-suggestion .wd-entities-title {
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--color-text-primary);
	line-height: 1.35;
	/* 2 lineas maximo, con ellipsis. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Match resaltado: marcador sutil + color de marca (sin el underline duro). */
.wd-suggestion .wd-entities-title strong {
	font-weight: 700;
	color: var(--color-brand-primary);
	text-decoration: none;
	background: linear-gradient(transparent 65%, rgba(56, 98, 122, 0.16) 0);
}

/* Precio: cifras tabulares, color de marca, peso para jerarquia. */
.wd-suggestion .price,
.wd-suggestion .price .amount {
	color: var(--color-brand-dark);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}
.wd-suggestion .price del { opacity: 0.5; font-weight: 400; }
.wd-suggestion .price ins { text-decoration: none; }

/* SKU (visible al activar show_sku_on_ajax): secundario, monospace-ish. */
.wd-suggestion-sku {
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: 0.74rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

/* Categorias como resultado (.wd-type-categories): fila tipo "ir a". */
.wd-suggestions-group.wd-type-categories .wd-suggestion {
	padding: 8px 10px;
}
.wd-suggestions-group.wd-type-categories .wd-suggestion-thumb {
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
}
.wd-suggestions-group.wd-type-categories .wd-entities-title {
	font-weight: 600;
	color: var(--color-brand-dark);
}

/* ============== 7. "VER TODOS LOS RESULTADOS" ============== */
/* Boton ancho de cierre del panel, con flecha. Sobrescribe los !important
   del padre. Pegado abajo dentro del scroll. */
.wd-all-results {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 6px;
	padding: 0;
	border: 0 !important;
	border-radius: 10px;
	background-color: var(--color-brand-pale) !important;
	color: var(--color-brand-primary) !important;
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 46px;
	text-transform: uppercase;
	transition: background-color 0.16s ease, color 0.16s ease;
}
.wd-all-results:hover {
	background-color: var(--color-brand-primary) !important;
	color: #fff !important;
}
.wd-all-results::after {
	content: "";
	width: 1.05em;
	height: 1.05em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.16s ease;
}
@media (prefers-reduced-motion: no-preference) {
	.wd-all-results:hover::after { transform: translateX(3px); }
}

/* ============== 8. LOADING ============== */
/* Overlay sutil mientras carga; spinner en color de marca. */
.wd-search-loader {
	background-color: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(1px);
}
.wd-search-loader:after {
	border: 2px solid rgba(56, 98, 122, 0.2);
	border-left-color: var(--color-brand-primary);
}

/* ============== 9. ESTADO VACIO ============== */
/* Centrado, con icono de lupa y mensaje (texto ya traducido por UX-020). */
.wd-not-found {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 32px 20px;
	text-align: center;
}
.wd-not-found::before {
	content: "";
	width: 40px;
	height: 40px;
	background-color: var(--color-border-strong);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wd-not-found .wd-not-found-msg {
	color: var(--color-text-secondary);
	font-family: var(--font-body);
	font-size: 0.95rem;
}

/* ============== 10. RESPONSIVE (<=576px) ============== */
@media (max-width: 576px) {
	.wd-search-requests ul { gap: var(--space-xs); }
	.wd-search-requests ul li a { padding: 4px 11px; font-size: 0.8rem; }
	.wd-suggestion-thumb { width: 46px; height: 46px; }
	.wd-suggestion .wd-entities-title { font-size: 0.88rem; }
}

/* ============== 11. BUSCADOR STICKY EN MOBILE (CAM-002) ============== */
/* Objetivo: que la barra de busqueda del header quede fija arriba al
   hacer scroll en mobile, para tenerla siempre a mano en el catalogo.

   Selector confirmado contra staging: el form vive en .wd-search-form
   (variante mobile .wd-header-search-form-mobile) dentro de la fila inferior
   del header (.whb-header-bottom). No tocamos desktop (la barra ya vive en el
   header sticky del tema). */
@media (max-width: 1024px) {
	.wd-search-form.wd-header-search-form-mobile,
	.whb-header-bottom .wd-search-form {
		position: sticky;
		top: 0;
		z-index: 120; /* sobre el contenido, bajo el panel de resultados */
		background-color: #fff;
		padding-block: 8px;
		box-shadow: 0 2px 8px rgba(15, 32, 43, 0.06);
	}
}