/* Buscador de pantalla completa (solo móvil) — KRM Fit */ /* En computador este overlay nunca se muestra: la lupa de escritorio sigue siendo el campo pequeño de siempre (widget-lupa-encabezado.html), este overlay es exclusivamente para el toque en celular. */ #krm-buscador-overlay { display: none; } @media (max-width: 767px) { #krm-buscador-overlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; height: 100dvh; background: #fff; z-index: 999999; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; padding: 16px 16px 32px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; } #krm-buscador-overlay.krm-buscador-abierto { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.2s ease, transform 0.2s ease; } /* Evita que la página de fondo se desplace mientras el buscador está abierto (la clase se agrega/quita por JS en ). */ body.krm-buscador-bloquear-scroll { overflow: hidden; } } #krm-buscador-overlay * { box-sizing: border-box; } .krm-buscador-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .krm-buscador-cerrar { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; background: none; border: none; cursor: pointer; padding: 0; color: #1a1a1a; font-size: 16px; border-radius: 50%; transition: background 0.15s ease; } .krm-buscador-cerrar:hover { background: #f3ecf9; } .krm-buscador-header form { flex: 1 1 auto; display: flex; align-items: center; border-radius: 20px; background: #f7f3fa; border: 1px solid #e4d7f0; padding: 0; } .krm-buscador-header input[type="search"] { border: none; outline: none; background: transparent; font-family: 'Montserrat', sans-serif; font-size: 14px; padding: 10px 16px; width: 100%; color: #1a1a1a; } .krm-buscador-header input[type="search"]::placeholder { color: #9a9a9a; } .krm-buscador-titulo { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #8a8a8a; margin: 24px 0 12px; } .krm-buscador-header + .krm-buscador-titulo { margin-top: 4px; } .krm-buscador-terminos { display: flex; flex-wrap: wrap; gap: 8px; } .krm-buscador-termino { display: inline-block; padding: 8px 16px; border-radius: 20px; background: #f7f3fa; border: 1px solid #e4d7f0; color: #1a1a1a; font-family: 'Montserrat', sans-serif; font-size: 13px; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .krm-buscador-termino:hover { background: #f3ecf9; border-color: #cca5f0; color: #1a1a1a; } .krm-buscador-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Reutiliza las mismas clases (product, wp-post-image, woocommerce-loop-product__link, krm-color-swatches, krm-swatch) que ya usa la cuadrícula normal de la tienda, así que los círculos de color de estas tarjetas funcionan automáticamente con assets/swatches.js — no hace falta JS adicional aquí. */ .krm-buscador-grid .krm-buscador-producto { display: flex; flex-direction: column; } .krm-buscador-grid .krm-buscador-producto .woocommerce-loop-product__link { display: block; border-radius: 10px; overflow: hidden; background: #f5f5f5; order: 1; } .krm-buscador-grid .krm-buscador-producto img.wp-post-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; } .krm-buscador-grid .krm-buscador-producto .krm-color-swatches { order: 2; margin-top: 6px; } .krm-buscador-grid .krm-buscador-producto .krm-buscador-producto-info { order: 3; display: block; text-decoration: none; margin-top: 4px; } .krm-buscador-producto-nombre { font-family: 'Montserrat', sans-serif; font-size: 12.5px; line-height: 1.3; color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .krm-buscador-producto-precio { font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600; color: #1a1a1a; margin-top: 2px; } .krm-buscador-producto-precio del { color: #9a9a9a; font-weight: 400; margin-right: 4px; } .krm-buscador-producto-precio ins { text-decoration: none; }