/* Buscador en prueba: panel conectado visualmente a la lupa del encabezado. */
.product-search[hidden] { display: none; } /* hidden prevalece sobre cualquier regla de presentacion. */
.product-search { position: absolute; top: 92px; right: clamp(16px,4vw,72px); width: min(440px,calc(100vw - 32px)); padding: 24px; border: 1px solid #dbcab4; border-radius: 22px; background: #fffaf3; color: #241d18; box-shadow: 0 24px 70px #17100b40; pointer-events: auto; animation: search-appear .18s ease-out; } /* Flota bajo la lupa sin desplazar el hero. */
.product-search__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #796448; font-size: 10px; letter-spacing: .14em; } /* Encabezado editorial discreto. */
.product-search__top button { border: 0; background: transparent; color: #241d18; width: 36px; height: 36px; font-size: 26px; cursor: pointer; } /* Cierre con superficie tactil propia. */
.product-search label { display: block; margin: 8px 0 16px; font: 27px/1.2 Georgia,serif; } /* Pregunta principal. */
.product-search input { width: 100%; min-width: 0; border: 1px solid #d7c5ae; border-radius: 12px; background: white; color: #241d18; padding: 14px; font: inherit; font-size: 16px; } /* 16px evita zoom de entrada en telefonos. */
.product-search :focus-visible { outline: 2px solid #a57c39; outline-offset: 3px; } /* Foco visible para teclado. */
.product-search__hint,.product-search__status { font-size: 12px; line-height: 1.5; color: #756658; margin: 12px 0; } /* Instrucciones y resultados anunciados. */
.product-search__results { max-height: min(410px,calc(100dvh - 350px)); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 6px; } /* Scroll propio: no alarga ni mueve la pagina. */
.product-search__result { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 13px; text-decoration: none; color: inherit; border: 1px solid transparent; } /* Toda la fila se puede pulsar. */
.product-search__result:hover,.product-search__result:focus-visible { background: #f2e7d8; border-color: #ddc5a3; } /* Resalta la seleccion de raton o teclado. */
.product-search__result img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; background: #f2e9df; border-radius: 10px; } /* Miniatura cuadrada sin recortar la cartera. */
.product-search__result strong { display: block; font: 18px/1.3 Georgia,serif; } /* Nombre del modelo. */
.product-search__result span span { display: block; margin-top: 4px; font-size: 12px; color: #756658; } /* Color y tamano debajo del nombre. */
@keyframes search-appear { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Despliegue breve desde la lupa. */
@media (max-width: 600px) { .product-search { top: 82px; padding: 18px; } .product-search__results { max-height: max(100px,calc(100dvh - 340px)); } } /* Panel compacto con resultados desplazables en movil. */
@media (prefers-reduced-motion: reduce) { .product-search { animation: none; } } /* Respeta la preferencia de reducir movimiento. */

/* Teclado movil: el panel se ajusta al viewport visible, no a toda la pagina. */
@media (max-width: 600px) {
  .product-search { position: fixed; top: var(--search-top,82px); right: 16px; max-height: var(--search-space,calc(100dvh - 94px)); display: flex; flex-direction: column; overflow: hidden; } /* Marco limitado al espacio sobre el teclado. */
  .product-search__top,.product-search label,.product-search input,.product-search__hint,.product-search__status { flex-shrink: 0; } /* El input no desaparece al crecer los resultados. */
  .product-search__results { min-height: 0; max-height: none; flex: 0 1 auto; } /* Solo los resultados se desplazan dentro del espacio restante. */
  .product-search.is-keyboard-open { padding: 12px 16px; border-radius: 16px; animation: none; } /* Prioriza espacio util durante la escritura. */
  .product-search.is-keyboard-open label { font-size: 20px; margin: 2px 0 8px; } /* Mantiene titulo sin consumir altura de resultados. */
  .product-search.is-keyboard-open .product-search__hint { display: none; } /* Ejemplos iniciales se ocultan mientras escribe con teclado. */
  .product-search.is-keyboard-open .product-search__status { margin: 8px 0; } /* Deja al menos una tarjeta visible en pantallas bajas. */
  .product-search.is-keyboard-open .product-search__result { padding: 7px; } /* Filas compactas con tarjeta completa pulsable. */
  .product-search.is-keyboard-open .product-search__result img { width: 48px; height: 48px; flex-basis: 48px; } /* Miniatura legible por encima del teclado. */
}