/* Capa de búsqueda de la tienda (Kadevia). Todo bajo .srch-* para no chocar con la plantilla.
 * Todo el aspecto sale de estas variables. capa.js las pisa al arrancar con las de la tienda (letra,
 * color principal, color del texto y redondeo) o con las del panel, en <style id="srch-tema">. */
.srch-root {
	--srch-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
	--srch-font-t: inherit;
	--srch-ink: #0f172a;
	--srch-text: #334155;
	--srch-muted: #64748b;
	--srch-faint: #94a3b8;
	--srch-line: #e6eaf3;
	--srch-line2: #eef1f7;
	--srch-input: #dfe3ec;
	--srch-bg: #fff;
	--srch-soft: #f8fafc;
	--srch-hover: #f1f4f9;
	--srch-ph: #e8edf5;
	--srch-red: #b42318;
	--srch-surface: #fff;
	--srch-strong: #cbd5e1;
	--srch-track: #e2e8f0;
	--srch-accent: #0f172a;
	--srch-accent-ink: #fff;
	--srch-accent-hover: #1e293b;
	--srch-accent-ring: rgba(15,23,42,.25);
	--srch-link: #0e7490;
	--srch-link-hover: #155e75;
	--srch-shadow: rgba(15,23,42,.14);
	--srch-shadow2: rgba(15,23,42,.06);
	--srch-ins-agotado-bg: rgba(15,23,42,.78);
	--srch-ins-agotado-ink: #fff;
	--srch-ins-patro-bg: #ebedf0;
	--srch-ins-patro-ink: #1e293b;
	--srch-stars: #f5a623;
	/* Tamaño de cada estrella de las opiniones */
	--srch-star: 14px;
	/* Para destacar (casillas marcadas, contadores, color elegido): el principal si el panel no dice otro */
	--srch-destacar: var(--srch-accent);
	--srch-destacar-ink: var(--srch-accent-ink);
	/* Redondeo de los filtros (píldoras, buscadores y cajas de precio): aparte del de los botones, que el
	   aspecto automático copia de la tienda (Maquillalia, rectos) */
	--srch-r-fil: 999px;
	/* Esquinas de la tarjeta de producto (el marco que sale al pasar el ratón) */
	--srch-r-card: 4px;
	--srch-stars-off: #e2e8f0;
	--srch-ins-oferta-bg: var(--srch-red);
	--srch-ins-oferta-ink: #fff;
	--srch-ins-etiq-bg: var(--srch-ink);
	--srch-ins-etiq-ink: #fff;
	--srch-r-btn: 8px;
	--srch-r: 12px;
	--srch-r-sm: 10px;
	--srch-r-pill: 999px;
	--srch-z: 2147483000;
	font-family: var(--srch-font);
	font-size: 14px;
	line-height: 1.4;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: var(--srch-ink);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}
.srch-root *, .srch-root *::before, .srch-root *::after { box-sizing: border-box; }
.srch-root[hidden], .srch-root [hidden] { display: none !important; }
.srch-root button, .srch-root input, .srch-root select {
	font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; margin: 0;
	min-height: 0; min-width: 0; max-width: none; box-shadow: none; float: none; width: auto; height: auto;
}
.srch-root button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; border-radius: 0; line-height: inherit; }
.srch-root a { color: inherit; text-decoration: none; }
.srch-root mark { background: none; color: inherit; font-weight: 700; padding: 0; }
.srch-root img { max-width: 100%; border: 0; }
.srch-root p { margin: 0; }
.srch-root :focus-visible { outline: 2px solid var(--srch-ink); outline-offset: 2px; }
.srch-ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.srch-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.srch-th { display: block; font-size: 11.5px; color: var(--srch-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 4px; }
.srch-n { font-variant-numeric: tabular-nums; color: var(--srch-faint); font-size: 12px; }
html.srch-lock, html.srch-lock body { overflow: hidden !important; }

/* Botones */
.srch-root .srch-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: var(--srch-r-btn); font-size: 13px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.srch-root .srch-dark { background: var(--srch-accent); color: var(--srch-accent-ink); border-color: var(--srch-accent); }
.srch-root .srch-dark:hover { background: var(--srch-accent-hover); }
.srch-root .srch-sec { background: var(--srch-surface); color: var(--srch-text); border-color: var(--srch-input); }
.srch-root .srch-sec:hover { background: var(--srch-hover); }
.srch-root .srch-link { color: var(--srch-link); font-size: 12.5px; font-weight: 600; padding: 4px 0; }
.srch-root .srch-link:hover { color: var(--srch-link-hover); }
.srch-root .srch-ib { width: 38px; height: 38px; border-radius: var(--srch-r-btn); display: inline-flex; align-items: center; justify-content: center; color: var(--srch-ink); flex: none; }
.srch-root .srch-ib:hover { background: var(--srch-hover); }


/* Tarjeta de producto */
.srch-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; height: 100%; padding: 10px; border: 1px solid transparent; border-radius: var(--srch-r-card); position: relative; transition: border-color .12s; }
.srch-img { display: block; position: relative; aspect-ratio: 1 / 1; border-radius: var(--srch-r-sm); background: var(--srch-surface); border: 1px solid var(--srch-line2); overflow: hidden; margin-bottom: 2px; }
.srch-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 2%; }
.srch-img.srch-noimg { background: var(--srch-ph); border-color: var(--srch-ph); display: flex; align-items: center; justify-content: center; padding: 10px; }
.srch-img.srch-noimg::after { content: attr(data-ph); color: var(--srch-faint); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
.srch-brand { font-size: 11.5px; color: var(--srch-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-name { font-size: 13px; line-height: 1.35; font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.srch-price { font-size: 16.5px; line-height: 1.2; font-variant-numeric: tabular-nums; margin-top: 2px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 7px; }
.srch-price b { font-weight: 800; letter-spacing: -.01em; color: var(--srch-ink); }
.srch-price s { color: var(--srch-faint); font-weight: 500; font-size: 13px; }
.srch-oferta .srch-price b { color: var(--srch-red); }
.srch-uds { color: var(--srch-muted); font-size: 13px; font-weight: 600; margin-right: -3px; }
.srch-antes { color: var(--srch-faint); font-size: 12px; margin-right: -3px; }
.srch-pvr { color: var(--srch-faint); font-size: 12px; font-weight: 500; }
.srch-pvr s { font-size: 13px; }
.srch-presu { font-size: 14px; font-weight: 700; color: var(--srch-ink); }
/* Opiniones: cinco estrellas SVG (una máscara repetida) pintadas con un degradado que corta en la media
   (--v: 4,5 → 90 %), la nota con un decimal y cuántas opiniones, discreto */
.srch-stars { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1; color: var(--srch-muted); font-variant-numeric: tabular-nums; }
.srch-stars-i { display: inline-block; flex: none; width: calc((var(--srch-star) + 2px) * 5); height: var(--srch-star); background: linear-gradient(90deg, var(--srch-stars) var(--v, 0%), var(--srch-stars-off) var(--v, 0%)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.3l2.7 5.5 6 .9-4.35 4.25 1.03 6L10 15.1l-5.38 2.85 1.03-6L1.3 7.7l6-.9z'/%3E%3C/svg%3E") repeat-x 0 0 / calc(var(--srch-star) + 2px) var(--srch-star); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.3l2.7 5.5 6 .9-4.35 4.25 1.03 6L10 15.1l-5.38 2.85 1.03-6L1.3 7.7l6-.9z'/%3E%3C/svg%3E") repeat-x 0 0 / calc(var(--srch-star) + 2px) var(--srch-star); }
.srch-stars-v { font-weight: 600; color: var(--srch-ink); }
.srch-stars-n { color: var(--srch-faint); margin-left: -2px; }
/* El tono que nombra la búsqueda («Tono: Nº 0-11 Mezcla Argenta»): una línea pequeña bajo el nombre */
.srch-var { font-size: 12px; line-height: 1.3; color: var(--srch-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.srch-var b { font-weight: 600; color: var(--srch-ink); }
.srch-var-mu { display: inline-block; width: 16px; height: 16px; margin-right: 5px; vertical-align: -4px; border-radius: 50%; background: var(--srch-soft) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.srch-out { font-size: 12px; font-weight: 600; color: var(--srch-red); }
/* Agotado: foto apagada y en gris, una franja «Sin stock» abajo y el texto en segundo plano */
.srch-agotado .srch-img img { opacity: .42; filter: grayscale(1); }
.srch-agotado .srch-name, .srch-agotado .srch-brand { color: var(--srch-muted); }
.srch-agotado .srch-price b { color: var(--srch-muted); font-weight: 700; }
.srch-agotado .srch-stars { opacity: .6; }
.srch-ins { position: absolute; top: 6px; z-index: 1; padding: 4px 7px; border-radius: min(var(--srch-r-btn), 6px); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; pointer-events: none; }
.srch-ins-agotado { top: auto; bottom: 8px; left: 50%; transform: translateX(-50%); padding: 6px 10px; background: var(--srch-ins-agotado-bg); color: var(--srch-ins-agotado-ink); letter-spacing: .02em; }
.srch-ins-patro { left: 6px; background: var(--srch-ins-patro-bg); color: var(--srch-ins-patro-ink); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; padding: 5px 7px; }
.srch-ins-oferta { right: 6px; background: var(--srch-ins-oferta-bg); color: var(--srch-ins-oferta-ink); }
.srch-ins-etiq { left: 6px; background: var(--srch-ins-etiq-bg); color: var(--srch-ins-etiq-ink); }
.srch-ins-patro ~ .srch-ins-etiq { top: 30px; }
.srch-ins-etiq-img { padding: 0; background: none; border-radius: 0; }
.srch-ins-etiq-img img { display: block; width: auto; height: auto; max-width: 110px; max-height: 26px; }
/* Al pasar el ratón, un marco fino alrededor de toda la tarjeta (como Doofinder), sin subrayar el nombre */
.srch-card:hover, .srch-card:focus-visible { border-color: var(--srch-ink); }
/* Estrellas y precio al pie: en una fila de tarjetas quedan a la misma altura aunque los nombres ocupen
   distinto; sin opiniones, el hueco de las estrellas se guarda */
.srch-pie { display: flex; flex-direction: column; gap: 5px; margin-top: auto; padding-top: 2px; }
.srch-pie:not(:has(.srch-stars))::before { content: ""; height: 14px; }
/* Botón de compra (Escaparate → «Botón de compra en la tarjeta») */
.srch-root .srch-comprar { display: flex; align-items: center; justify-content: center; width: 100%; height: 38px; margin-top: 6px; padding: 0 10px; border-radius: var(--srch-r-btn); background: var(--srch-accent); color: var(--srch-accent-ink); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s; }
.srch-root .srch-comprar:hover { background: var(--srch-accent-hover); }
.srch-root .srch-comprar.srch-comprando { opacity: .6; cursor: progress; }
.srch-root .srch-comprar.srch-anadido { background: #15803d; color: #fff; }
/* Tarjeta con molde propio cuya raíz no es un enlace: la capa navega al pinchar */
.srch-root .srch-card[data-href] { cursor: pointer; }

/* ---------- Desplegable de escritorio ---------- */
.srch-dd { position: fixed; z-index: var(--srch-z); display: flex; background: var(--srch-surface); border: 1px solid var(--srch-line); border-radius: calc(var(--srch-r) + 4px); box-shadow: 0 24px 48px var(--srch-shadow), 0 4px 12px var(--srch-shadow2); overflow: hidden; }
.srch-dd-in { display: grid; grid-template-columns: 230px minmax(0, 1fr); width: 100%; min-height: 0; }
.srch-dd-in.srch-solo { grid-template-columns: minmax(0, 1fr); }
.srch-dd-side { padding: 20px 22px; border-right: 1px solid var(--srch-line2); background: var(--srch-soft); display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.srch-grp { display: flex; flex-direction: column; gap: 2px; }
.srch-root .srch-s { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 8px; margin: 0 -8px; border-radius: var(--srch-r-btn); font-size: 13.5px; color: var(--srch-ink); }
.srch-s .srch-ico { color: var(--srch-faint); }
.srch-s-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-s-t b { font-weight: 700; }
.srch-root .srch-s[aria-selected="true"], .srch-root .srch-s:hover { background: var(--srch-line2); }
.srch-dd-main { padding: 20px 24px 16px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-width: 0; }
.srch-dd-head { font-size: 14px; font-weight: 700; }
.srch-ampliada { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--srch-muted); }
.srch-dd-head .srch-para { font-weight: 700; }
.srch-dd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.srch-dd .srch-card { padding: 8px; }
.srch-dd .srch-card[aria-selected="true"] { border-color: var(--srch-ink); box-shadow: inset 0 0 0 1px var(--srch-ink); }
.srch-dd-vacio { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; font-size: 13.5px; color: var(--srch-muted); }
.srch-dd-vacio b { color: var(--srch-ink); font-size: 14px; }
.srch-dd-vacio .srch-v-ico { display: none; }
.srch-root .srch-dd-vacio .srch-v-t { font-size: 14px; }
.srch-dd-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 12px; border-top: 1px solid var(--srch-line2); margin-top: auto; }
.srch-root .srch-all { height: 30px; padding: 0 11px; font-size: 12.5px; }
.srch-root .srch-all[aria-selected="true"] { box-shadow: 0 0 0 2px var(--srch-surface), 0 0 0 4px var(--srch-accent); }

/* Antes de escribir: recientes (con «Borrar»), populares y productos más populares */
.srch-ini-recientes .srch-th { white-space: nowrap; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.srch-root .srch-recientes-x { font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: normal; padding: 0; color: var(--srch-muted); }
.srch-root .srch-recientes-x:hover { color: var(--srch-ink); text-decoration: underline; }
.srch-dd-ini { gap: 18px; }
.srch-sug .srch-grp + .srch-grp { margin-top: 14px; }
.srch-ini { display: flex; flex-direction: column; gap: 8px; }
.srch-ini[hidden] { display: none; }
/* Sin texto, en el ordenador: búsquedas a la izquierda y productos populares a la derecha (no debajo) */
@media (min-width: 768px) {
	.srch-inicio .srch-main { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 32px; align-items: start; }
	.srch-inicio .srch-main > :not(.srch-sug):not(.srch-ini) { display: none; }
	.srch-inicio .srch-sug { grid-column: 1; grid-row: 1; }
	.srch-inicio .srch-ini { grid-column: 2; grid-row: 1; }
	.srch-inicio .srch-ini .srch-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* «¿Quisiste decir x?» */
.srch-root .srch-quisiste { font-size: 14px; color: var(--srch-text); }
.srch-root .srch-quisiste[data-rq] span { color: var(--srch-text); white-space: normal; }
.srch-root .srch-quisiste b { color: var(--srch-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.srch-dd .srch-quisiste { align-self: flex-start; }

/* Búsqueda con página propia («Ir a Secadores →») */
.srch-root .srch-redir { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: var(--srch-r-sm); background: var(--srch-hover); border: 1px solid var(--srch-line); color: var(--srch-ink); font-size: 14px; font-weight: 700; }
.srch-root .srch-redir:hover, .srch-root .srch-redir[aria-selected="true"] { background: var(--srch-line2); border-color: var(--srch-accent); }
.srch-sug .srch-redir { margin-bottom: 6px; }

/* Banner de la búsqueda (imagen, con la del móvil por <picture>, o texto) */
.srch-root .srch-banner { display: block; border-radius: 10px; overflow: hidden; color: var(--srch-ink); text-decoration: none; flex: none; }
.srch-root a.srch-banner:hover { opacity: .94; }
.srch-banner picture, .srch-banner img { display: block; width: 100%; height: auto; max-height: 240px; object-fit: contain; object-position: center; }
.srch-root .srch-banner-texto { padding: 12px 16px; background: var(--srch-hover); border: 1px solid var(--srch-line); font-size: 14px; line-height: 1.45; }
.srch-root a.srch-banner-texto:hover { border-color: var(--srch-ink); opacity: 1; }
.srch-ban[hidden] { display: none; }
/* Búsqueda guiada (MEILISEARCH_CAPA_GUIADA): botones de categoría y marca encima de los resultados */
.srch-guia[hidden] { display: none; }
/* Búsqueda guiada: recuadro con «¿Necesitas ayuda? Filtra por …», las tarjetas en carrusel y la × */
.srch-guia-box { position: relative; display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 12px 20px; padding: 18px 44px 18px 24px; border: 1px solid var(--srch-line); border-radius: var(--srch-r); background: var(--srch-surface); }
.srch-guia-cab { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.srch-root .srch-guia-t { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--srch-ink); }
.srch-root .srch-guia-s { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--srch-text); }
.srch-guia-s b { color: var(--srch-ink); font-weight: 700; }
.srch-root .srch-guia-omitir { align-self: flex-start; margin-top: 8px; padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 500; color: var(--srch-destacar); cursor: pointer; }
.srch-root .srch-guia-omitir:hover { text-decoration: underline; }
.srch-guia-car { display: flex; align-items: center; gap: 6px; min-width: 0; }
.srch-guia-pista { flex: 1; min-width: 0; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: 2px; }
.srch-guia-pista::-webkit-scrollbar { display: none; }
.srch-root .srch-guia-b { flex: none; scroll-snap-align: start; display: flex; align-items: center; gap: 12px; height: 72px; min-width: 140px; max-width: 260px; padding: 0 18px 0 6px; border: 1px solid var(--srch-line); border-radius: var(--srch-r-sm); background: var(--srch-surface); color: var(--srch-ink); font-size: 14px; font-weight: 500; text-align: left; overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.srch-root .srch-guia-b.srch-guia-sin { padding-left: 18px; justify-content: center; }
.srch-root .srch-guia-b:hover { border-color: var(--srch-ink); box-shadow: 0 2px 8px var(--srch-shadow2); }
.srch-guia-img { flex: none; width: 54px; height: 62px; display: flex; align-items: center; justify-content: center; }
.srch-guia-img img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.srch-guia-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-root .srch-guia-flecha { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--srch-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.srch-root .srch-guia-flecha:hover:not(:disabled) { background: var(--srch-hover); }
.srch-root .srch-guia-flecha:disabled { opacity: .25; cursor: default; }
.srch-guia-cabe .srch-guia-flecha { display: none; }
.srch-root .srch-guia-cerrar { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--srch-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.srch-root .srch-guia-cerrar:hover { background: var(--srch-hover); color: var(--srch-ink); }
@media (max-width: 767px) { .srch-banner picture, .srch-banner img { max-height: 160px; } }

/* ---------- Página de resultados ---------- */
.srch-pg { position: fixed; inset: 0; z-index: var(--srch-z); background: var(--srch-bg); display: flex; flex-direction: column; overflow: hidden; }
.srch-progreso { position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--srch-accent); z-index: 3; opacity: 0; }
.srch-cargando .srch-progreso { opacity: 1; animation: srch-carga 1.2s ease-out infinite; }
@keyframes srch-carga { from { width: 0; } to { width: 90%; } }
.srch-cargando .srch-grid { opacity: .55; transition: opacity .15s .1s; }
.srch-top { background: var(--srch-surface); border-bottom: 1px solid var(--srch-line); flex: none; }
.srch-top-in { display: flex; align-items: center; gap: 12px; max-width: 2048px; margin: 0 auto; padding: 15px 24px; }
.srch-root .srch-back { display: none; }
.srch-box { flex: 1; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 18px; border: 1.5px solid var(--srch-accent); border-radius: min(var(--srch-r-pill), 23px); background: var(--srch-surface); margin: 0; min-width: 0; }
.srch-lupa { color: var(--srch-ink); display: flex; }
.srch-root .srch-q { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; height: 40px; padding: 0; -webkit-appearance: none; appearance: none; border-radius: 0; }
.srch-root .srch-q::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.srch-root .srch-q::placeholder { color: var(--srch-faint); opacity: 1; }
/* Borrar el texto: círculo gris con un aspa blanca dentro de la caja (como el campo de búsqueda de iOS); solo con
   texto. Cerrar va fuera y en palabra («Cerrar ✕»): así no hay dos aspas iguales. Zona de toque de 32 px. */
.srch-root .srch-borrar { flex: none; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--srch-surface); }
.srch-root .srch-borrar[hidden] { display: none; }
.srch-root .srch-subir { position: absolute; right: 24px; bottom: 24px; z-index: 6; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--srch-line); border-radius: 50%; background: var(--srch-surface); color: var(--srch-ink); box-shadow: 0 6px 18px var(--srch-shadow); cursor: pointer; transition: background .15s, transform .15s; }
.srch-root .srch-subir:hover { background: var(--srch-hover); transform: translateY(-2px); }
.srch-root .srch-subir[hidden], .srch-integ .srch-subir { display: none; }
.srch-borrar-c { width: 20px; height: 20px; border-radius: 50%; background: var(--srch-faint); display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.srch-borrar-c .srch-ico { stroke-width: 2.6; }
.srch-root .srch-borrar:hover .srch-borrar-c { background: var(--srch-muted); }
.srch-root .srch-cerrar { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--srch-r-btn); font-size: 14px; font-weight: 500; color: var(--srch-ink); }
.srch-root .srch-cerrar .srch-ico { width: 14px; height: 14px; }
.srch-root .srch-cerrar:hover { background: var(--srch-hover); }
/* Logo de la tienda a la izquierda de la caja (MEILISEARCH_CAPA_LOGO): solo en la pantalla completa del ordenador */
.srch-logo { flex: none; display: flex; align-items: center; height: 46px; max-width: 200px; margin-right: 8px; }
.srch-logo img { display: block; max-height: 36px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.srch-flot .srch-logo, .srch-integ .srch-logo { display: none; }
/* Pantalla completa en el ordenador: el logo ocupa lo que la columna de filtros (340 px menos su margen) y la caja
   empieza donde los resultados; la caja, más baja y con tope de ancho («Cerrar» se queda a la derecha) */
@media (min-width: 768px) {
	.srch-pg:not(.srch-flot):not(.srch-integ) .srch-logo { width: 312px; max-width: none; height: auto; margin-right: 48px; }
	.srch-pg:not(.srch-flot):not(.srch-integ) .srch-logo img { width: 100%; max-height: 72px; object-position: left center; }
	.srch-pg:not(.srch-flot):not(.srch-integ) .srch-box { height: 42px; max-width: 880px; }
	.srch-pg:not(.srch-flot):not(.srch-integ) .srch-box .srch-voz { width: 34px; height: 34px; }
	.srch-pg:not(.srch-flot):not(.srch-integ) .srch-cerrar { margin-left: auto; }
}
/* Búsqueda por voz: en la caja propia y, de hermano, sobre el borde derecho de la caja de la tienda (capa.js la coloca) */
.srch-root .srch-voz, .srch-root.srch-voz-caja { width: 32px; height: 32px; border-radius: min(var(--srch-r-pill), 16px); color: var(--srch-muted); position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.srch-root.srch-voz-caja { position: absolute; z-index: 3; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 1; min-width: 0; min-height: 0; box-shadow: none; }
.srch-root .srch-voz:hover, .srch-root.srch-voz-caja:hover { color: var(--srch-ink); background: var(--srch-hover); }
.srch-root .srch-voz.srch-voz-on, .srch-root.srch-voz-caja.srch-voz-on { color: var(--srch-accent-ink); background: var(--srch-accent); }
.srch-root .srch-voz-on::after, .srch-root.srch-voz-on::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--srch-accent-ring); animation: srch-voz 1.2s ease-out infinite; pointer-events: none; }
.srch-root .srch-voz.srch-voz-err, .srch-root.srch-voz-caja.srch-voz-err { color: var(--srch-red); }
/* En la caja propia, el micrófono se ve: icono de 21 px, toque de 40 y color del texto */
.srch-root .srch-box .srch-voz { width: 40px; height: 40px; border-radius: min(var(--srch-r-pill), 20px); }
.srch-root .srch-box .srch-voz:not(.srch-voz-on):not(.srch-voz-err) { color: var(--srch-ink); }
.srch-root .srch-box .srch-voz .srch-ico { width: 21px; height: 21px; }
@keyframes srch-voz { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.srch-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 16px 10px; }
.srch-chips::-webkit-scrollbar { display: none; }
.srch-root .srch-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: min(var(--srch-r-pill), 20px); border: 1px solid var(--srch-input); background: var(--srch-surface); font-size: 12.5px; color: var(--srch-text); white-space: nowrap; flex: none; }
.srch-root .srch-chip .srch-ico { width: 12px; height: 12px; }
.srch-root .srch-chip.srch-dark { background: var(--srch-accent); color: var(--srch-accent-ink); border-color: var(--srch-accent); }
.srch-root .srch-chip.srch-dark .srch-ico { width: 14px; height: 14px; }
.srch-root .srch-chip.srch-on { border-color: var(--srch-accent); color: var(--srch-ink); font-weight: 600; }
.srch-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: min(var(--srch-r-pill), 9px); background: var(--srch-accent-ink); color: var(--srch-accent); font-size: 11px; font-weight: 700; }

.srch-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.srch-body { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; align-items: start; width: 100%; padding: 24px max(24px, calc((100% - 2000px) / 2)) 40px; }
.srch-sin-fil .srch-body { grid-template-columns: minmax(0, 1fr); }
.srch-sin-fil .srch-side { display: none; }
.srch-side { position: sticky; top: 0; background: var(--srch-surface); padding: 4px 28px 20px 0; border-right: 1px solid var(--srch-line2); align-self: stretch; }
/* La columna llega hasta abajo (la línea), y lo que se queda fijo al bajar son los filtros */
@media (min-width: 768px) { .srch-side > .srch-fils { position: sticky; top: 0; } .srch-integ .srch-side > .srch-fils { top: 16px; } }
/* La columna de filtros, del alto de lo que se ve (--srch-body-h lo pone capa.js): con la rueda encima se mueve ella y,
   al llegar al final, la página. Sin esto, lo de abajo (Precio) no se alcanzaba hasta el final de los resultados */
@media (min-width: 768px) { .srch-pg:not(.srch-integ) .srch-side > .srch-fils { max-height: calc(var(--srch-body-h, 100vh) - 64px); overflow-y: auto; scrollbar-width: thin; margin-right: -14px; padding-right: 14px; } }
.srch-side-head, .srch-side-foot { display: none; }
.srch-fils { display: flex; flex-direction: column; gap: 0; }
/* «2 filtros puestos · Quitar todos» */
.srch-puestos { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; font-size: 13px; color: var(--srch-muted); }
.srch-root .srch-puestos-x { font-size: 13px; font-weight: 600; color: var(--srch-ink); text-decoration: underline; text-underline-offset: 3px; }
/* «En stock» y «En oferta»: dos píldoras en una fila */
.srch-pls { display: flex; gap: 8px; padding-bottom: 20px; }
.srch-root .srch-pl { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; padding: 0 14px; border-radius: var(--srch-r-fil); border: 1px solid var(--srch-input); background: var(--srch-surface); color: var(--srch-ink); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background .15s, border-color .15s; }
.srch-root .srch-pl:hover { border-color: var(--srch-strong); }
.srch-root .srch-pl[aria-checked="true"] { background: var(--srch-ink); border-color: var(--srch-ink); color: var(--srch-surface); font-weight: 600; }
.srch-pl-t { overflow: hidden; text-overflow: ellipsis; }
.srch-pl-n { font-size: 12px; font-weight: 500; color: var(--srch-faint); font-variant-numeric: tabular-nums; }
.srch-pl[aria-checked="true"] .srch-pl-n { color: inherit; opacity: .7; }
.srch-pl-ok { width: 20px; height: 20px; border-radius: 50%; background: var(--srch-destacar); color: var(--srch-destacar-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.srch-pl-ok .srch-ico { width: 11px; height: 11px; stroke-width: 3; }
/* Cada filtro: cabecera plegable con cuántos hay puestos */
.srch-fil { display: flex; flex-direction: column; padding: 20px 0; border-top: 1px solid var(--srch-line2); }
.srch-fils > .srch-fil:first-child { border-top: 0; padding-top: 0; }
.srch-root .srch-fh { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--srch-ink); text-align: left; }
.srch-fh-t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.srch-fh-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--srch-destacar); color: var(--srch-destacar-ink); font-size: 11.5px; font-weight: 600; }
.srch-fh .srch-ico { color: var(--srch-muted); transition: transform .15s; }
.srch-cerr .srch-fh { padding-bottom: 0; }
.srch-cerr .srch-fh .srch-ico { transform: rotate(-90deg); }
.srch-cerr .srch-fil-in { display: none; }
.srch-fil-in { display: flex; flex-direction: column; gap: 6px; }
/* El buscador dentro de un filtro largo (marcas, categorías…) */
.srch-fb { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; margin-bottom: 6px; border: 1px solid transparent; border-radius: var(--srch-r-fil); background: var(--srch-soft); color: var(--srch-faint); cursor: text; }
.srch-fb:focus-within { background: var(--srch-surface); border-color: var(--srch-ink); }
.srch-root .srch-fb input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font-size: 13.5px; color: var(--srch-ink); }
.srch-fb input::placeholder { color: var(--srch-faint); }
.srch-fb-0 { font-size: 13px; color: var(--srch-faint); padding: 4px 0; }
/* Sin scroll propio: una caja con overflow (aunque no desborde) se quedaba la rueda y no movía la página */
.srch-opts { display: flex; flex-direction: column; margin: 0 -10px; padding: 0 10px; }
.srch-root .srch-opt { display: flex; align-items: center; gap: 12px; min-height: 38px; font-size: 14px; padding: 2px 10px; margin: 0 -10px; border-radius: 10px; color: var(--srch-ink); }
.srch-root .srch-opt:hover { background: var(--srch-hover); }
.srch-root .srch-opt[aria-checked="true"] { font-weight: 600; background: color-mix(in srgb, var(--srch-destacar) 8%, transparent); }
.srch-opt-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-root .srch-opt .srch-n { font-size: 12px; font-weight: 500; color: var(--srch-muted); background: var(--srch-soft); border-radius: 999px; padding: 2px 8px; }
.srch-cb { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--srch-strong); background: var(--srch-surface); flex: none; position: relative; }
.srch-opt[aria-checked="true"] .srch-cb { background: var(--srch-destacar); border-color: var(--srch-destacar); }
.srch-opt[aria-checked="true"] .srch-cb::after { content: ""; position: absolute; left: 5.5px; top: 2.5px; width: 5px; height: 9px; border: solid var(--srch-destacar-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.srch-opt:hover .srch-cb { border-color: var(--srch-destacar); }
/* Muestra de un valor en la lista de filtros (foto del valor o su color, MEILISEARCH_MUESTRAS_ATRIBUTOS): hace
   de casilla. Lo mínimo: el tamaño, la rejilla o la marca de elegido de cada tienda van en su search.css */
.srch-opt-mu { width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--srch-soft) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.srch-opt-mu.srch-mu-sin { background: var(--srch-surface); box-shadow: inset 0 0 0 1.5px var(--srch-strong); }
.srch-opt[aria-checked="true"] .srch-opt-mu { box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 2px var(--srch-surface), 0 0 0 4px var(--srch-destacar); }
/* Muestras de color */
.srch-mues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 4px; }
.srch-root .srch-mu { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 2px 0; text-align: center; }
.srch-mu-c { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); transition: box-shadow .15s; }
.srch-mu-c.srch-mu-sin { background: conic-gradient(#f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7, #f43f5e); }
.srch-mu:hover .srch-mu-c { box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 2px var(--srch-surface), 0 0 0 3px var(--srch-strong); }
.srch-mu[aria-checked="true"] .srch-mu-c { box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 2px var(--srch-surface), 0 0 0 4px var(--srch-destacar); }
.srch-mu-t { font-size: 12px; line-height: 1.2; color: var(--srch-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-mu[aria-checked="true"] .srch-mu-t { font-weight: 600; }
.srch-mu-n { font-size: 11px; color: var(--srch-faint); margin-top: -3px; font-variant-numeric: tabular-nums; }
/* Precio: deslizador y «Desde / Hasta» */
.srch-pr { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.srch-pr-g { color: var(--srch-faint); }
.srch-pr-c { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; border: 1px solid var(--srch-input); border-radius: var(--srch-r-fil); background: var(--srch-surface); cursor: text; }
.srch-pr-c:focus-within { border-color: var(--srch-ink); }
.srch-pr-e { font-size: 11.5px; color: var(--srch-muted); margin-right: auto; }
.srch-root .srch-pr-c input { width: 3.2em; min-width: 0; border: 0; outline: 0; padding: 0; background: none; text-align: right; font-size: 14px; font-weight: 600; color: var(--srch-ink); font-variant-numeric: tabular-nums; }
.srch-pr-s { font-size: 14px; font-weight: 600; color: var(--srch-ink); }
.srch-root .srch-vermas { align-self: flex-start; margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--srch-ink); text-decoration: underline; text-underline-offset: 3px; }
.srch-root .srch-limpiar.srch-link { align-self: flex-start; color: var(--srch-red); }
.srch-root .srch-swr { display: flex; align-items: center; gap: 10px; font-size: 13px; min-height: 32px; }
.srch-sw { width: 36px; height: 21px; border-radius: min(var(--srch-r-pill), 11px); background: var(--srch-strong); position: relative; flex: none; transition: background .15s; }
.srch-sw i { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: min(var(--srch-r-pill), 50%); background: var(--srch-surface); box-shadow: 0 1px 2px var(--srch-shadow); transition: left .15s; }
.srch-swr[aria-checked="true"] .srch-sw { background: var(--srch-accent); }
.srch-swr[aria-checked="true"] .srch-sw i { left: 17px; }

/* Precio: dos deslizadores superpuestos */
.srch-rango { position: relative; height: 24px; margin: 2px 11px 0; }
.srch-rango::before, .srch-rango::after { content: ""; position: absolute; top: 10px; height: 4px; border-radius: 4px; }
.srch-rango::before { left: 0; right: 0; background: var(--srch-track); }
.srch-rango::after { left: var(--a); right: calc(100% - var(--b)); background: var(--srch-ink); }
.srch-root .srch-rango input { position: absolute; left: -11px; top: 0; width: calc(100% + 22px); height: 24px; margin: 0; padding: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; z-index: 1; outline: none; }
.srch-rango input::-webkit-slider-runnable-track { background: none; height: 24px; }
.srch-rango input::-moz-range-track { background: none; }
.srch-rango input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--srch-surface); border: 2px solid var(--srch-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); cursor: pointer; }
.srch-rango input::-moz-range-thumb { pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--srch-surface); border: 2px solid var(--srch-ink); box-sizing: border-box; box-shadow: 0 1px 3px rgba(0,0,0,.12); cursor: pointer; }
.srch-rango input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--srch-accent-ring); }

/* Los resultados van directamente sobre el fondo blanco (como Doofinder): sin caja ni marco */
.srch-main { background: transparent; border: 0; border-radius: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.srch-sug { display: flex; flex-direction: column; }
.srch-sug:empty { display: none; }
.srch-root .srch-row { display: flex; align-items: center; gap: 10px; min-height: 38px; font-size: 14px; color: var(--srch-ink); border-radius: var(--srch-r-btn); padding: 0 8px; margin: 0 -8px; text-align: left; }
.srch-root .srch-row:hover { background: var(--srch-hover); }
.srch-row .srch-ico { color: var(--srch-faint); }
.srch-row[data-rq] span { color: var(--srch-muted); }
.srch-row-cat { display: none !important; }
.srch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.srch-cnt { font-size: 14px; font-weight: 700; }
.srch-orden { position: relative; display: inline-flex; align-items: center; }
.srch-orden::after { content: ""; position: absolute; right: 2px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border: solid var(--srch-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.srch-root .srch-orden select { -webkit-appearance: none; appearance: none; border: 0; background: transparent; font-size: 12.5px; color: var(--srch-muted); padding: 6px 16px 6px 4px; cursor: pointer; outline-offset: 0; height: auto; }
/* Columnas anchas: la foto manda (Doofinder: tarjeta de 240 px y foto de 192) */
.srch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 8px; }
.srch-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 16px 32px; color: var(--srch-muted); font-size: 13.5px; }
.srch-alt { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; }
.srch-alt[hidden] { display: none; }
.srch-dd-vacio + .srch-alt-t { margin-top: 6px; }
.srch-v-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--srch-hover); color: var(--srch-faint); display: flex; align-items: center; justify-content: center; }
.srch-v-ico .srch-ico { width: 22px; height: 22px; }
.srch-root .srch-v-t { color: var(--srch-ink); font-size: 16px; font-weight: 700; }
.srch-v-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.srch-mas { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 0 12px; font-size: 13px; color: var(--srch-muted); font-variant-numeric: tabular-nums; }
.srch-mas-bar { display: block; width: 240px; max-width: 70%; height: 3px; border-radius: 3px; background: var(--srch-track); overflow: hidden; }
.srch-mas-bar i { display: block; height: 100%; width: 0; background: var(--srch-accent); border-radius: inherit; transition: width .3s; }
/* «Cargar más»: botón secundario (blanco con borde fino), no depende de que el color principal sea claro u oscuro */
.srch-root .srch-cargar { height: 46px; min-width: 240px; padding: 0 32px; margin-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--srch-ink); border-color: var(--srch-strong); }
.srch-root .srch-cargar:hover { background: var(--srch-surface); border-color: var(--srch-ink); }

/* ---------- Flotante (bajo la caja de la tienda) e integrada (dentro de un contenedor de la tienda) ---------- */
.srch-root .srch-x { display: none; }
.srch-sin-caja .srch-top-in { display: none; }
.srch-sin-caja .srch-top { border-bottom: 0; background: transparent; }
.srch-pg.srch-flot, .srch-pg.srch-integ { background: var(--srch-surface); }
.srch-sin-caja .srch-x { display: inline-flex; position: absolute; z-index: 3; top: 8px; right: 8px; width: 34px; height: 34px; color: var(--srch-muted); }
.srch-pg.srch-flot { inset: auto; height: auto; border: 1px solid var(--srch-line); border-radius: calc(var(--srch-r) + 4px); box-shadow: 0 24px 48px var(--srch-shadow), 0 4px 12px var(--srch-shadow2); }
/* 300 px y píldoras a su medida: «En stock 1.070» y «En oferta 27» caben enteras (con 220 se cortaban) */
.srch-flot .srch-body { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; padding: 20px 24px 24px; }
.srch-flot .srch-pls { gap: 6px; flex-wrap: wrap; } /* si aun así no caben, la segunda baja de fila */
.srch-root.srch-flot .srch-pl { flex: 1 1 auto; padding: 0 10px; gap: 6px; }
.srch-flot.srch-sin-fil .srch-body { grid-template-columns: minmax(0, 1fr); }
.srch-flot .srch-side { border: 0; border-radius: 0; padding: 0; background: transparent; }
.srch-flot .srch-main { border: 0; border-radius: 0; padding: 0; }
.srch-flot .srch-head { padding-right: 40px; }
.srch-flot.srch-sin-fil .srch-main, .srch-flot.srch-sin-q .srch-main { padding-right: 40px; }
.srch-flot .srch-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 6px; }
.srch-pg.srch-integ { position: relative; inset: auto; z-index: 1; display: block; overflow: visible; background: transparent; min-height: 60vh; width: var(--srch-vw, 100%); max-width: none; margin-left: var(--srch-izq, 0px); }
.srch-integ .srch-body { overflow: visible; }
.srch-integ.srch-sin-caja .srch-body { padding-top: 52px; }
.srch-integ .srch-side { top: 16px; }
.srch-integ.srch-sin-caja .srch-x { top: 10px; right: max(24px, calc((100% - 2000px) / 2)); }

/* ---------- Carruseles de recomendaciones (en la página, con la letra de la tienda) ---------- */
.srch-root.srch-rec { display: block; position: relative; margin: 36px 0; clear: both; font-family: inherit; width: auto; max-width: 100%; }
.srch-rec-espera { min-height: 1px; }
.srch-root.srch-rec.srch-rec-suelto { max-width: 1240px; margin-left: auto; margin-right: auto; padding: 0 16px; }
.srch-rec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.srch-root .srch-rec-t { margin: 0; padding: 0; font-family: var(--srch-font-t); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-transform: none; color: var(--srch-ink); border: 0; background: none; }
.srch-rec-nav { display: flex; gap: 8px; flex: none; }
.srch-root .srch-rec-btn { width: 38px; height: 38px; border-radius: min(var(--srch-r-pill), 50%); border: 1px solid var(--srch-input); background: var(--srch-surface); display: inline-flex; align-items: center; justify-content: center; color: var(--srch-ink); }
.srch-root .srch-rec-btn .srch-ico { width: 18px; height: 18px; }
.srch-root .srch-rec-btn:hover:not(:disabled) { background: var(--srch-hover); border-color: var(--srch-accent); }
.srch-root .srch-rec-btn:disabled { opacity: .35; cursor: default; }
.srch-rec-sin-nav .srch-rec-nav { display: none; }
.srch-rec-pista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 18px) / 5); gap: 18px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: 4px 0 8px; margin: -4px 0 0; }
.srch-rec-pista::-webkit-scrollbar { display: none; }
.srch-rec-item { scroll-snap-align: start; min-width: 0; display: flex; }
.srch-rec-item .srch-card { flex: 1; }
@media (max-width: 1100px) { .srch-rec-pista { grid-auto-columns: calc((100% - 3 * 18px) / 4); } }

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
	.srch-pg { background: var(--srch-surface); }
	.srch-top-in { padding: 14px 16px 10px; gap: 10px; }
	.srch-root .srch-back { display: inline-flex; }
	.srch-root .srch-cerrar, .srch-logo { display: none; }
	.srch-guia-box { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 40px 14px 14px; }
	.srch-guia-cab { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
	.srch-root .srch-guia-omitir { margin: 0 0 0 auto; }
	.srch-guia-car { margin-right: -26px; }
	.srch-root .srch-guia-flecha { display: none; }
	.srch-root .srch-guia-b { height: 60px; min-width: 120px; font-size: 13.5px; gap: 8px; }
	.srch-guia-img { width: 44px; height: 52px; }
	.srch-box { height: 44px; border-radius: min(var(--srch-r-pill), 22px); padding: 0 6px 0 12px; }
	.srch-root .srch-q { font-size: 16px; }
	.srch-body, .srch-sin-fil .srch-body { display: block; padding: 14px 16px 32px; }
	.srch-main { border: 0; border-radius: 0; padding: 0; gap: 14px; }
	.srch-row-cat { display: flex !important; }
	.srch-cnt .srch-para { display: none; }
	.srch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 4px; }
	.srch-card { padding: 8px; }
	.srch-side { display: none; position: fixed; left: 0; right: 0; bottom: 0; top: 54px; z-index: 4; border: 0; border-radius: 24px 24px 0 0; padding: 0; flex-direction: column; box-shadow: 0 0 0 100vmax rgba(8,6,7,.45); }
	.srch-hoja .srch-side { display: flex; }
	.srch-side-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 22px 10px 12px 20px; border-bottom: 1px solid var(--srch-line2); font-size: 18px; }
	.srch-side-head::before { content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--srch-strong); }
	.srch-side-head .srch-ib { width: 44px; height: 44px; }
	.srch-fils { flex: 1; overflow-y: auto; padding: 18px 20px; }
	.srch-root .srch-opt { min-height: 40px; font-size: 14px; }
	.srch-opts { max-height: none; overflow: visible; }
	.srch-root .srch-fb input, .srch-root .srch-pr-c input { font-size: 16px; }
	.srch-side-foot { display: flex; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--srch-line2); }
	.srch-root .srch-quitar { height: 50px; padding: 0 22px; border-radius: 999px; font-size: 15px; }
	.srch-root .srch-ver { flex: 1; height: 50px; font-size: 15px; border-radius: 999px; }
	/* Carruseles: dos y un trozo del siguiente, deslizando con el dedo */
	.srch-root.srch-rec { margin: 28px 0; }
	.srch-rec-pista { grid-auto-columns: 42%; gap: 14px; }
	.srch-rec-nav { display: none; }
	.srch-root .srch-rec-t { font-size: 18px; }
	/* Desplegable en el móvil (si se elige): una columna y dos productos por fila */
	.srch-dd-in { grid-template-columns: minmax(0, 1fr); }
	.srch-dd-side { border-right: 0; border-bottom: 1px solid var(--srch-line2); padding: 14px 16px; }
	.srch-dd-main { padding: 14px 16px 12px; }
	.srch-dd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	/* Flotante e integrada en el móvil: como la pantalla completa, con los chips arriba */
	.srch-flot .srch-body, .srch-integ .srch-body { padding: 14px 16px 24px; }
	.srch-sin-caja .srch-body, .srch-integ.srch-sin-caja .srch-body { padding-top: 46px; }
	.srch-sin-caja .srch-top:has(.srch-chips:not([hidden])) + .srch-body { padding-top: 10px; }
	.srch-sin-caja .srch-chips { padding: 10px 8px 6px 16px; margin-right: 44px; }
	.srch-sin-caja .srch-x, .srch-integ.srch-sin-caja .srch-x { top: 8px; right: 8px; }
	.srch-flot .srch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.srch-flot .srch-head, .srch-flot.srch-sin-fil .srch-main, .srch-flot.srch-sin-q .srch-main { padding-right: 0; }
}
@media (min-width: 768px) {
	.srch-chips { display: none !important; }
	/* Con solo las filas de categoría (son del móvil), la caja de sugerencias no ocupa ni su hueco */
	.srch-sug:not(:has(> :not(.srch-row-cat))) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.srch-root *, .srch-root *::after, .srch-root.srch-voz-caja::after { transition: none !important; animation: none !important; }
}