/* ==========================================================================
   MAVERICK 1997 — Buscador (README §3.12)

   Panel superior de vidrio negro: campo en Oswald blanco sobre línea fina,
   chips de sugerencia, búsquedas recientes y resultados en grilla con foto.

   Los valores salen del prototipo (bloque <sc-if value="{{ searchOpen }}">).

   Prefijo exclusivo: .mvk-bus-*  (buscador). Ninguna otra área usa este
   prefijo, así que no hay forma de pisarse con el header, el carrito ni el
   catálogo, que se escribieron en paralelo.

   ⚠️ Nada de SVG inline ni de data-URI con SVG en este archivo.
   ========================================================================== */

.mvk-bus {
  position: fixed;
  inset: 0;
  /* Encima del header (90/110) y por debajo del carrito (200), igual que en
     el prototipo, donde el buscador va en 115 y el carrito en 118. */
  z-index: 195;
}

.mvk-bus[hidden] { display: none; }

/* --- Velo ---------------------------------------------------------------- */

.mvk-bus-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, .38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0;
  cursor: pointer;
}

.mvk-bus.is-open .mvk-bus-scrim { animation: mvkFade .35s ease both; }
.mvk-bus.is-out  .mvk-bus-scrim { animation: mvkFadeOut .3s ease both; }

/* --- Panel de vidrio ------------------------------------------------------
   La máscara desvanece los últimos 12% del panel: los resultados se van
   diluyendo al llegar al borde inferior en vez de cortarse con una línea. */

.mvk-bus-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;    /* respaldo para navegadores sin unidades dinámicas */
  height: 100svh;
  padding: clamp(22px, 3.4vw, 44px) clamp(16px, 3vw, 40px) clamp(40px, 4vw, 64px);
  overflow: hidden;
  /* 🚨 .52, no el .34 del prototipo.
     El prototipo abría el buscador sobre pantallas oscuras. Acá se abre sobre
     el catálogo BLANCO, y componiendo velo + panel el fondo efectivo quedaba en
     rgb(110): texto blanco a 5.07:1 (al filo) y los rótulos con
     --mvk-text-soft a 1.72:1, o sea ilegibles.
     Con .52 el fondo baja a rgb(84): blanco 7.62:1 y rótulos 4.89:1. Sigue
     siendo vidrio —el desenfoque y la saturación no cambian— pero se lee. */
  background: rgba(12, 11, 11, .52);
  backdrop-filter: blur(30px) saturate(125%);
  -webkit-backdrop-filter: blur(30px) saturate(125%);
  color: var(--mvk-white);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, rgba(0, 0, 0, .6) 95%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 88%, rgba(0, 0, 0, .6) 95%, transparent 100%);
}

.mvk-bus.is-open .mvk-bus-panel { animation: mvkSheet .45s var(--mvk-ease) both; }
.mvk-bus.is-out  .mvk-bus-panel { animation: mvkFadeOut .3s ease both; }

.mvk-bus-inner {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: clamp(16px, 2.2vw, 26px);
  width: 100%;
  min-height: 0;
  max-width: 980px;
  margin: 0 auto;
}

/* --- Campo ---------------------------------------------------------------- */

.mvk-bus-form {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.mvk-bus-form-icon {
  display: grid;
  flex: none;
  place-items: center;
  color: rgba(255, 255, 255, .6);
}

.mvk-bus-field {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;   /* reset: iOS le pone esquinas a los type="search" */
  outline: none;
  background: transparent;
  color: var(--mvk-white);
  font-family: var(--mvk-display);
  font-weight: 500;
  font-size: clamp(17px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
}

.mvk-bus-field::placeholder {
  color: rgba(255, 255, 255, .38);
  opacity: 1;   /* Firefox lo baja a .54 por su cuenta */
}

/* El foco se ve en la línea de abajo, que es donde el prototipo lo pone. */
.mvk-bus-form:focus-within { border-bottom-color: var(--mvk-white); }

.mvk-bus-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
  transition: color .25s ease, transform .3s var(--mvk-ease);
}

.mvk-bus-close:hover,
.mvk-bus-close:focus-visible {
  color: var(--mvk-white);
  transform: rotate(90deg);
}

/* --- Búsquedas recientes -------------------------------------------------- */

.mvk-bus-recent {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mvk-bus-recent[hidden] { display: none; }

.mvk-bus-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Rótulo: 9px es el piso de la escala del tema. El prototipo tenía 8.5px, que
   queda fuera del rango de rótulos (9–11px) y no se distingue a simple vista.
   El color es el token de rótulo SOBRE OSCURO. */
.mvk-bus-recent-label {
  font: 500 9px/1 var(--mvk-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  /* Blanco al 72% y no --mvk-text-soft: ese token da 6.5:1 sobre el negro
     de marca, pero sobre este vidrio queda en 1.72:1. Acá da 4.89:1. */
  color: rgba(255, 255, 255, .72);
}

.mvk-bus-clear {
  padding: 0;
  border: 0;
  background: transparent;
  /* Blanco al 72% y no --mvk-text-soft: ese token da 6.5:1 sobre el negro
     de marca, pero sobre este vidrio queda en 1.72:1. Acá da 4.89:1. */
  color: rgba(255, 255, 255, .72);
  font: 400 10.5px/1 var(--mvk-sans);
  letter-spacing: .1em;
  cursor: pointer;
  transition: color .3s ease;
}

.mvk-bus-clear:hover,
.mvk-bus-clear:focus-visible { color: var(--mvk-white); }

/* --- Chips ---------------------------------------------------------------- */

.mvk-bus-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mvk-bus-chips--center { justify-content: center; }

/* Chip de sugerencia: mayúsculas con tracking ancho, se invierte al pasar. */
.mvk-bus-chip {
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, .26);
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font: 500 10.5px/1 var(--mvk-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}

.mvk-bus-chip:hover,
.mvk-bus-chip:focus-visible {
  border-color: var(--mvk-white);
  background: var(--mvk-white);
  color: var(--mvk-black);
}

/* Chip de búsqueda reciente: relleno tenue y minúsculas, no compite con los
   de sugerencia. */
.mvk-bus-chip--recent {
  padding: 9px 14px;
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .86);
  font: 400 12px/1 var(--mvk-sans);
  letter-spacing: 0;
  text-transform: none;
}

.mvk-bus-chip--recent:hover,
.mvk-bus-chip--recent:focus-visible {
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .12);
  color: var(--mvk-white);
}

/* --- Resultados ------------------------------------------------------------ */

.mvk-bus-results {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  min-height: 0;
  padding-bottom: clamp(20px, 3vw, 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  align-content: start;
}

.mvk-bus-results[hidden] { display: none; }

.mvk-bus-hit {
  /* 🚨 Los hijos de un grid traen min-width:auto: sin esto, un nombre largo
     estira la columna y aparece scroll horizontal. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mvk-white);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mvk-bus-hit:hover { color: var(--mvk-white); }

.mvk-bus-hit-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  transition: border-color .35s ease, box-shadow .35s ease;
}

.mvk-bus-hit:hover .mvk-bus-hit-media,
.mvk-bus-hit:focus-visible .mvk-bus-hit-media {
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}

/* 🚨 La clase va DUPLICADA a propósito.
   .woocommerce img { height:auto } pesa (0,1,1) y le gana a una sola clase:
   dentro de una plantilla de WooCommerce la foto perdía el alto y la grilla
   se desarmaba. Con la clase repetida esta regla pesa (0,2,0) y gana. */
.mvk-bus-hit-img.mvk-bus-hit-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 14%;
  transition: transform 1.4s cubic-bezier(.22, 1, .28, 1);
}

.mvk-bus-hit:hover .mvk-bus-hit-img.mvk-bus-hit-img { transform: scale(1.06); }

.mvk-bus-hit-cat {
  position: absolute;
  inset-inline-start: 10px;
  inset-block-end: 10px;
  z-index: 2;
  font: 500 9px/1 var(--mvk-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Blanco al 72% y no --mvk-text-soft: ese token da 6.5:1 sobre el negro
     de marca, pero sobre este vidrio queda en 1.72:1. Acá da 4.89:1. */
  color: rgba(255, 255, 255, .72);
}

.mvk-bus-hit-name {
  font: 500 12.5px/1.3 var(--mvk-sans);
  color: rgba(255, 255, 255, .9);
}

.mvk-bus-hit-price {
  font: 600 13px/1 var(--mvk-sans);
  color: var(--mvk-white);
}

/* --- Sin resultados -------------------------------------------------------- */

.mvk-bus-empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-height: 0;
  padding: clamp(26px, 5vw, 54px) 0;
  overflow-y: auto;
  text-align: center;
  animation: mvkFade .4s ease both;
}

.mvk-bus-empty[hidden] { display: none; }

.mvk-bus-empty-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: rgba(255, 255, 255, .5);
}

.mvk-bus-empty-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.mvk-bus-empty-title {
  margin: 0;
  font-family: var(--mvk-display);
  font-weight: 600;
  font-size: clamp(19px, 2.4vw, 30px);
  line-height: var(--mvk-title-lh);
  letter-spacing: var(--mvk-title-ls);
  text-transform: uppercase;
}

.mvk-bus-empty-text {
  max-width: 38ch;
  margin: 0;
  font: 300 13.5px/1.6 var(--mvk-sans);
  /* Blanco al 72% y no --mvk-text-soft: ese token da 6.5:1 sobre el negro
     de marca, pero sobre este vidrio queda en 1.72:1. Acá da 4.89:1. */
  color: rgba(255, 255, 255, .72);
  text-wrap: pretty;
}

.mvk-bus-all {
  display: inline-flex;
  align-items: center;
  height: 48px;
  margin-top: 4px;
  padding: 0 26px;
  border: 1px solid rgba(255, 255, 255, .4);
  background: transparent;
  color: var(--mvk-white);
  font: 600 10.5px/1 var(--mvk-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.mvk-bus-all:hover,
.mvk-bus-all:focus-visible {
  border-color: var(--mvk-white);
  background: var(--mvk-white);
  color: var(--mvk-black);
}

/* --- Mientras el servidor contesta ----------------------------------------
   Solo una atenuación: nada desaparece, no hay estado por defecto invisible. */

.mvk-bus.is-busy .mvk-bus-results { opacity: .55; transition: opacity .2s ease; }

/* --- Cuando el servidor NO contesta ---------------------------------------
   Este es el mismo <p data-mvk-bus-live> que anuncia "3 resultados", que el
   resto del tiempo vive recortado con .screen-reader-text. Cuando la consulta
   falla, search.js le saca ese recorte y le pone esta clase: el nodo NUNCA se
   crea ni se destruye, que es lo que permite que la región viva suene.

   Va apoyado abajo de la línea del campo a propósito: pegado al final de
   .mvk-bus-inner caía en el 12% inferior del panel, que la máscara de
   .mvk-bus-panel desvanece — un mensaje de error medio borrado.

   Sin acento: la regla 2 reserva --mvk-red para el importe de la cuota. Lo que
   marca el error es el filete y el texto. Blanco pleno sobre este vidrio da
   7.62:1 (ver la nota de .mvk-bus-panel). */
.mvk-bus-fallo {
  display: block;
  flex: none;
  margin: 0;
  padding: 14px 16px;
  border-inline-start: 2px solid var(--mvk-white);
  background: rgba(255, 255, 255, .08);
  color: var(--mvk-white);
  font: 500 11px/1.5 var(--mvk-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* --- Foco visible ---------------------------------------------------------- */

.mvk-bus-chip:focus-visible,
.mvk-bus-all:focus-visible,
.mvk-bus-clear:focus-visible,
.mvk-bus-close:focus-visible,
.mvk-bus-hit:focus-visible {
  outline: 2px solid var(--mvk-white);
  outline-offset: 3px;
}

/* --- Celular --------------------------------------------------------------- */

@media (max-width: 760px) {
  .mvk-bus-results {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
  }

  .mvk-bus-form { gap: 10px; }

  /* El teclado virtual se come media pantalla: el panel se acorta con el
     viewport dinámico para que los resultados sigan alcanzándose. */
  .mvk-bus-panel { height: 100dvh; }
}