/**
 * Búsqueda 2026 — panel de resultados instantáneos del nav (clases mpsb-).
 * Medidas transcritas del mockup: design-2026/templates/home-mobile/HomeMobile.dc.html (44-80)
 * y el SiteNav de design-2026/_ds_bundle.js (panel de 400-420px, fila de 44px, chips de 999px).
 *
 * Tres ubicaciones, un mismo panel:
 *  - .mpsb-panel-flota  escritorio: flotante bajo el input, pegado a su borde derecho.
 *  - .mpsb-panel-barra  fila móvil (<= 900px): a todo el ancho bajo la cabecera pegajosa.
 *  - .mpsb-panel-menu   dentro del menú móvil: en línea, debajo del input.
 *
 * Trampas del tema viejo (Bricks + Automatic.css) que este archivo neutraliza a propósito:
 *  - apila en columna a los hijos de <section> → todo flex declara dirección y alineación;
 *  - a los <button> les mete display/padding/min-width/text-align → los chips declaran todo,
 *    con el selector reforzado .mps-2026 .mpsb-…;
 *  - `*:focus { outline: none !important }` → el foco visible va con :focus-visible e !important;
 *  - wp-components trae `[role="region"] { position: relative }`: el panel no usa ese rol y su
 *    position lleva especificidad de dos clases.
 */

/* ============ Panel (base común) ============ */

.mps-2026 .mpsb-panel {
	--mpsb-g: 16px;        /* gutter lateral (18px en móvil, como el mockup mobile) */
	--mpsb-chip: 30px;     /* alto de los chips (32px en móvil) */
	--mpsb-todos-y: 12px;  /* alto del pie "Ver todos" (13px en móvil) */
	box-sizing: border-box;
	display: flex; flex-direction: column; align-items: stretch;
	margin: 0; padding: 0;
	background: #FFFFFF; color: #111111;
	border: 1px solid #E4E2E0; border-radius: 4px;
	box-shadow: 0 18px 40px rgba(0,0,0,0.18);
	font-family: "Creato Display", Figtree, "Segoe UI", Arial, sans-serif;
	font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: 0;
	text-align: left; text-transform: none;
	overflow: hidden;
}
.mps-2026 .mpsb-panel * { box-sizing: border-box; }
.mps-2026 .mpsb-panel[hidden], .mps-2026 .mpsb-panel [hidden] { display: none !important; }

/* Escritorio: flotante bajo el input (el form es position:relative), alineado a su derecha.
   z-index 200: por encima del mega-panel (120) dentro del contexto de .mpsc-sticky (100), y ese
   contexto entero queda bajo el menú móvil (300). El input crece al enfocarse, pero el borde
   derecho del form no se mueve: el panel no salta. */
.mps-2026 .mpsb-panel-flota {
	position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 200;
	width: 420px; max-width: calc(100vw - 32px);
	max-height: calc(100vh - 140px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}

/* Fila móvil: a todo el ancho, colgado de .mpsc-sticky (position:sticky también es bloque
   contenedor). El JS le baja el max-height cuando el teclado en pantalla deja menos sitio. */
.mps-2026 .mpsb-panel-barra {
	--mpsb-g: 18px; --mpsb-chip: 32px; --mpsb-todos-y: 13px;
	position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
	width: auto; max-width: none;
	max-height: 62vh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
	border: 0; border-bottom: 1px solid #E4E2E0; border-radius: 0;
}

/* Dentro del menú móvil: en línea. El form de arriba lleva margin-bottom 18px; se le roba parte
   para quedar a 8px del input y se devuelve abajo, así la pista "Tocá una sección…" no se mueve. */
.mps-2026 .mpsb-panel-menu {
	--mpsb-g: 18px; --mpsb-chip: 32px; --mpsb-todos-y: 13px;
	position: static; flex: none; width: auto; max-width: none;
	margin: -10px 0 18px; border: 0; border-radius: 4px; box-shadow: none;
}

.mps-2026 .mpsb-panel-flota, .mps-2026 .mpsb-panel-barra { animation: mpsb-entra .16s ease both; }
@keyframes mpsb-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============ (a) Búsquedas frecuentes ============ */

.mps-2026 .mpsb-rotulo {
	display: block; margin: 0; padding: 14px var(--mpsb-g) 0;
	font-size: 10.5px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.1em; color: #8A8782;
}

.mps-2026 .mpsb-lista { display: flex; flex-direction: column; align-items: stretch; margin: 0; padding: 0; min-width: 0; }
.mps-2026 .mpsb-lista-chips { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px var(--mpsb-g) 0; }

/* Chip = botón. El tema viejo le mete display:block, padding, min-width y text-align: se declara todo. */
.mps-2026 .mpsb-chip {
	-webkit-appearance: none; appearance: none;
	display: inline-flex; flex-direction: row; align-items: center; justify-content: center; flex: 0 0 auto;
	width: auto; height: var(--mpsb-chip); min-width: 0; min-height: 0; max-width: 100%; margin: 0; padding: 0 12px;
	background: #FFFFFF; border: 1px solid #E4E2E0; border-radius: 999px; box-shadow: none;
	color: #111111; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0;
	text-align: center; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.mps-2026 .mpsb-chip:hover { background: #FFFFFF; border-color: #111111; color: #111111; }
.mps-2026 .mpsb-chip.mpsb-activa { background: #0B0B0B; border-color: #0B0B0B; color: #FFFFFF; }

.mps-2026 .mpsb-nota {
	display: block; margin: 0; padding: 10px var(--mpsb-g) 16px;
	font-size: 11.5px; font-weight: 400; line-height: 1.5; color: #8A8782;
}
.mps-2026 .mpsb-sin-chips .mpsb-nota { padding-top: 14px; }

/* ============ Cargando ============ */

.mps-2026 .mpsb-cargando {
	display: block; margin: 0; padding: 14px var(--mpsb-g);
	font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: 0.02em; color: #8A8782;
	animation: mpsb-pulso 1.1s ease-in-out infinite alternate;
}
@keyframes mpsb-pulso { from { opacity: 0.55; } to { opacity: 1; } }

/* ============ (b) Resultados ============ */

/* Fila = enlace: miniatura 44px · nombre + subtítulo · precio rojo. */
.mps-2026 .mpsb-res {
	display: flex; flex-direction: row; align-items: center; gap: 12px;
	margin: 0; padding: 10px var(--mpsb-g); min-width: 0;
	background: #FFFFFF; border: 0; border-bottom: 1px solid #F5F4F2;
	color: #111111; text-decoration: none; cursor: pointer;
	transition: background-color .12s ease;
}
.mps-2026 .mpsb-res:hover, .mps-2026 .mpsb-res.mpsb-activa { background: #F5F4F2; color: #111111; }
/* La opción resaltada con teclado lleva además el filo rojo del diseño (mismo gesto que el mega-menú). */
.mps-2026 .mpsb-res.mpsb-activa { box-shadow: inset 3px 0 0 #C73D2C; }

.mps-2026 .mpsb-res-img {
	display: flex; flex-direction: row; align-items: center; justify-content: center; flex: none;
	width: 44px; height: 44px; background: #F5F4F2; border-radius: 4px; overflow: hidden;
	transition: background-color .12s ease;
}
/* Sobre el gris de la fila resaltada la caja pasa a blanco para no desaparecer. */
.mps-2026 .mpsb-res:hover .mpsb-res-img, .mps-2026 .mpsb-res.mpsb-activa .mpsb-res-img { background: #FFFFFF; }
/* El tema viejo pone max-width:100% y height:auto a toda <img>: se fija la medida. multiply funde
   el fondo blanco de las fotos de producto con la caja gris (las del mockup eran recortes). */
.mps-2026 .mpsb-res-img img {
	display: block; width: 38px; height: 38px; max-width: none; max-height: none; margin: 0; padding: 0;
	object-fit: contain; border: 0; border-radius: 0; box-shadow: none; mix-blend-mode: multiply;
}

.mps-2026 .mpsb-res-txt { display: flex; flex-direction: column; align-items: stretch; gap: 3px; flex: 1 1 auto; min-width: 0; }
.mps-2026 .mpsb-res-nombre {
	display: block; font-size: 12.5px; font-weight: 700; line-height: 1.25;
	text-transform: uppercase; letter-spacing: -0.01em; color: #111111; overflow-wrap: anywhere;
}
.mps-2026 .mpsb-res-sub { display: block; font-size: 11px; font-weight: 600; line-height: 1.35; color: #8A8782; overflow-wrap: anywhere; }
.mps-2026 .mpsb-res-via { color: #C73D2C; font-size: inherit; font-weight: inherit; }
.mps-2026 .mpsb-res-precio { flex: none; font-size: 13px; font-weight: 700; line-height: 1.2; color: #C73D2C; white-space: nowrap; }

.mps-2026 .mpsb-res-agotado .mpsb-res-img img { filter: grayscale(1); opacity: 0.5; }
.mps-2026 .mpsb-res-agotado .mpsb-res-precio { color: #8A8782; }

/* Pie "Ver todos los resultados →" (última opción de la lista). */
.mps-2026 .mpsb-todos {
	display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
	margin: 0; padding: var(--mpsb-todos-y) var(--mpsb-g); min-width: 0;
	background: #F5F4F2; border: 0;
	color: #111111; font-size: 11.5px; font-weight: 700; line-height: 1.3;
	text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; cursor: pointer;
	transition: color .15s ease;
}
.mps-2026 .mpsb-todos:hover, .mps-2026 .mpsb-todos.mpsb-activa { background: #F5F4F2; color: #C73D2C; }
.mps-2026 .mpsb-todos.mpsb-activa { box-shadow: inset 3px 0 0 #C73D2C; }
.mps-2026 .mpsb-todos span { font-size: inherit; font-weight: inherit; }
.mps-2026 .mpsb-todos em { font-style: normal; color: #C73D2C; }

/* ============ (c) Sin resultados ============ */

.mps-2026 .mpsb-vacio { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding: 16px var(--mpsb-g); }
.mps-2026 .mpsb-vacio-titulo { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: #111111; overflow-wrap: anywhere; }
.mps-2026 .mpsb-vacio-txt { display: block; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: #8A8782; }
.mps-2026 .mpsb-vacio-txt a { color: #C73D2C; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.mps-2026 .mpsb-vacio-txt a:hover { color: #B23425; }

/* ============ Accesibilidad ============ */

/* Solo para lectores de pantalla: "3 resultados. Usá las flechas…" */
.mps-2026 .mpsb-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Foco visible pese al `*:focus { outline: none !important }` del sitio. Offset negativo en las
   filas: el panel recorta lo que sobresale. */
.mps-2026 .mpsb-chip:focus-visible { outline: 2px solid #C73D2C !important; outline-offset: 2px; }
.mps-2026 .mpsb-res:focus-visible, .mps-2026 .mpsb-todos:focus-visible { outline: 2px solid #C73D2C !important; outline-offset: -2px; }
.mps-2026 .mpsb-vacio-txt a:focus-visible { outline: 2px solid #C73D2C !important; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.mps-2026 .mpsb-panel, .mps-2026 .mpsb-panel-flota, .mps-2026 .mpsb-panel-barra { animation: none; }
	.mps-2026 .mpsb-cargando { animation: none; }
	.mps-2026 .mpsb-chip, .mps-2026 .mpsb-res, .mps-2026 .mpsb-res-img, .mps-2026 .mpsb-todos { transition: none; }
}