/*
 * search.css: el diseño propio de tupeluqueriaonline para el buscador (kadevia/addon-meilisearch).
 *
 * Se carga DESPUÉS de los estilos del addon y del aspecto automático: lo de aquí gana. Solo lleva lo que
 * cambia respecto a la base (includes/vendor/kadevia/addon-meilisearch/tema-base/search/search.css).
 * Que se parezca a la tienda: Montserrat, el verde de la ficha (#a3d357, el que usaba Doofinder),
 * precios negros en negrita y la marca en mayúsculas pequeñas.
 */
.srch-root {
	--srch-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--srch-font-t: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--srch-ink: #1a1a1a;
	--srch-text: #3a3a3a;
	--srch-muted: #6b6b6b;
	--srch-faint: #9a9a9a;
	/* El verde de la tienda: la caja de búsqueda, la barra de «Cargar más» y el botón del móvil. Encima,
	   texto oscuro (en blanco no se lee) */
	--srch-accent: #a3d357;
	--srch-accent-ink: #1f2d0a;
	--srch-accent-hover: #96c74a;
	--srch-accent-ring: rgba(163,211,87,.35);
	--srch-link: #5c8a1e;
	--srch-link-hover: #46691a;
	/* Casillas marcadas y contadores en negro: el verde con la marca blanca no se lee */
	--srch-destacar: #1a1a1a;
	--srch-destacar-ink: #fff;
	--srch-stars: #f5a623;
	/* Estrellas de las opiniones un poco más grandes que las de fábrica (14 px) */
	--srch-star: 16px;
	/* Rectos como los botones de la tienda */
	--srch-r-btn: 4px;
	--srch-r-sm: 4px;
	--srch-r-card: 4px;
}

/* Marca en mayúsculas pequeñas, como en los listados de la tienda */
.srch-root .srch-brand { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--srch-muted); }
.srch-root .srch-name { font-weight: 500; color: var(--srch-ink); }
/* Precio negro y en negrita */
.srch-root .srch-price b { font-weight: 700; color: #000; }
.srch-root .srch-oferta .srch-price b { color: var(--srch-red); }

/* Filtros «Tonos» y «Color» con la foto del tono o su color (MEILISEARCH_MUESTRAS_ATRIBUTOS): bolitas como las
   de la ficha, más grandes que la casilla para que se distinga el tono, y una marca negra al elegirlo */
.srch-root .srch-opts-mu .srch-opt { min-height: 46px; gap: 14px; }
.srch-root .srch-opts-mu .srch-opt-mu { width: 32px; height: 32px; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: box-shadow .15s; }
.srch-root .srch-opts-mu .srch-opt-mu.srch-mu-sin { box-shadow: inset 0 0 0 1.5px var(--srch-strong); }
.srch-root .srch-opts-mu .srch-opt:hover .srch-opt-mu { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px var(--srch-surface), 0 0 0 3px var(--srch-strong); }
.srch-root .srch-opts-mu .srch-opt[aria-checked="true"] .srch-opt-mu { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px var(--srch-surface), 0 0 0 4px var(--srch-destacar); }
.srch-root .srch-opts-mu .srch-opt[aria-checked="true"] .srch-opt-mu::before { content: ""; position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--srch-destacar); box-shadow: 0 0 0 2px var(--srch-surface); }
.srch-root .srch-opts-mu .srch-opt[aria-checked="true"] .srch-opt-mu::after { content: ""; position: absolute; right: 1px; bottom: 0; width: 4px; height: 7px; border: solid var(--srch-destacar-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* La bolita del tono en la tarjeta, algo mayor */
.srch-root .srch-var-mu { width: 18px; height: 18px; vertical-align: -5px; }

/* El precio como en los listados: «Antes» y «PVR» en gris delante del tachado, y el pack («6 uds:») */
.srch-root .srch-stars { font-size: 13px; }
.srch-root .srch-antes, .srch-root .srch-pvr { font-size: 12px; color: var(--srch-muted); }
.srch-root .srch-pvr s, .srch-root .srch-price s { color: var(--srch-muted); }
.srch-root .srch-uds { color: var(--srch-ink); font-weight: 600; }

/* ---- Tarjeta como los listados de la tienda (tarjeta.html) ---- */
.srch-root .tpo-card { text-align: center; align-items: center; border: 0; box-shadow: none; background: transparent; }
.srch-root .tpo-card:hover { box-shadow: none; border: 0; }
/* La foto, sin recuadro: ni borde, ni fondo, ni esquinas */
.srch-root .tpo-card .srch-img { align-self: stretch; width: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.srch-root .tpo-card .srch-img img { mix-blend-mode: multiply; }
.srch-root .tpo-card .srch-name { font-size: 14px; line-height: 1.35; font-weight: 500; color: #111; text-align: center; }
.srch-root .tpo-card .srch-var { justify-content: center; text-align: center; }
.srch-root .tpo-card .srch-pie { flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.srch-root .tpo-card .srch-stars { justify-content: center; }
.srch-root .tpo-precio { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.1; }
.srch-root .tpo-antes { font-size: 12px; color: #8a8a8a; font-weight: 400; }
.srch-root .tpo-antes s { color: #8a8a8a; }
.srch-root .tpo-actual { font-size: 26px; font-weight: 400; color: #111; letter-spacing: -.01em; }
.srch-root .srch-presu .tpo-actual { font-size: 15px; font-weight: 600; }

/* ---- Listas largas de filtros (Tonos, Color): sin la barra de desplazamiento gorda de la tienda ---- */
.srch-root .srch-opts { scrollbar-width: none; }
.srch-root .srch-opts::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---- Banners por búsqueda: las imágenes de Doofinder son de 768×418; que se vean a su tamaño ---- */
.srch-root .srch-banner picture, .srch-root .srch-banner img { max-height: 420px; }
@media (max-width: 767px) { .srch-root .srch-banner picture, .srch-root .srch-banner img { max-height: none; width: 100%; } }