/*
 * Buscador de Maquillalia: la tarjeta como las de los listados de la tienda (theme/web/html/partial/_product.php).
 * Lo carga el addon del buscador detrás de su CSS; aquí solo va lo que cambia respecto al de fábrica.
 * Base comentada con todas las variables: includes/vendor/kadevia/addon-meilisearch/tema-base/search/search.css
 */
.srch-root {
	--srch-ink: #080607;
	/* Las estrellas y lo marcado van en el «Color para destacar» del panel (Escaparate → Aspecto: #b957c5) */
	--srch-stars-off: #d9d9d9;
	/* Insignia de descuento en el morado de la tienda (--secondary-color) */
	--srch-ins-oferta-bg: #b957c5;
	--srch-ins-oferta-ink: #fafafa;
	--srch-ins-agotado-bg: rgba(50,51,52,.85);
	--srch-ins-agotado-ink: #fff;
	--srch-ins-patro-bg: #e5e6e6;
	--srch-ins-patro-ink: #323334;
}

/* Tarjeta: foto sin marco, la marca encima y el nombre sin ella (la capa la quita del principio), precio grande */
.srch-img { border: 0; border-radius: 0; }
.srch-brand { font-size: 13px; font-weight: 600; color: #080607; letter-spacing: .01em; margin-top: 4px; }
.srch-name { font-size: 15px; line-height: 22px; font-weight: 500; color: #080607; }
.srch-name mark { font-weight: 700; }
.srch-stars { gap: 6px; font-size: 14px; color: #000; font-weight: 500; }
.srch-stars-i { font-size: 14px; letter-spacing: 1px; }
.srch-price { font-size: 22px; margin-top: 4px; }
.srch-price b { font-weight: 700; color: #080607; }
.srch-oferta .srch-price b { color: #080607; }
.srch-price s { font-size: 15px; }
.srch-ins { border-radius: 0; font-size: 12px; font-weight: 500; padding: 5px 8px; }
.srch-ins-patro { font-size: 10px; font-weight: 600; }
/* Las etiquetas de promoción («3x2»), con sus colores; las de imagen, sin caja */
.srch-ins-etiq { font-weight: 600; }
.srch-ins-etiq-img { padding: 0; }
.srch-ins-patro ~ .srch-ins-etiq { top: 32px; }

@media (max-width: 767px) {
	.srch-brand { font-size: 12px; }
	.srch-name { font-size: 13px; line-height: 18px; }
	.srch-stars, .srch-stars-i { font-size: 12px; }
	.srch-price { font-size: 18px; }
}

/*
 * Botón «Comprar» como el de los listados (style.css: .products-list__item-buy y .products-list__sponsored-price):
 * negro, en mayúsculas, recto, con «IVA Incl.» debajo a la derecha. En el ordenador sale al pasar por la tarjeta;
 * en el móvil, siempre. La animación (spinner → ✓ en rosa → vuelve) la hace search.js.
 */
.srch-root .srch-comprar { height: 33px; margin-top: 8px; padding: 0 10px; border-radius: 0; background: var(--primary-color, #080607); color: #fff; font-family: var(--default-fonts, "Work Sans", Arial, sans-serif); font-size: 18px; font-weight: 600; text-transform: uppercase; transition: opacity .35s ease-out, background-color .2s ease; }
.srch-root .srch-comprar:hover, .srch-root .srch-comprar.srch-anadido { background: var(--primary-color, #080607); color: #fff; }
.srch-root .srch-comprar.srch-comprando { opacity: 1; cursor: progress; }
.srch-root .srch-comprar.srch-ok { background: var(--terciary-color, #dc79cc); }
.srch-root .srch-comprar i { font-size: 20px; }
.srch-iva { display: block; margin-top: 6px; text-align: right; font-size: 10px; line-height: 12px; font-weight: 600; color: #080607; transition: opacity .25s ease-out; }
.srch-iva::after { content: "IVA Incl."; }
:lang(en) .srch-iva::after { content: "Tax Incl."; }
:lang(fr) .srch-iva::after { content: "TVA Incl."; }
:lang(de) .srch-iva::after { content: "Tax Inb."; }

@media (min-width: 992px) {
	.srch-root .srch-card .srch-comprar, .srch-root .srch-card .srch-iva { opacity: 0; }
	.srch-root .srch-card:hover .srch-comprar, .srch-root .srch-card:hover .srch-iva,
	.srch-root .srch-card:focus-within .srch-comprar, .srch-root .srch-card:focus-within .srch-iva,
	.srch-root .srch-card .srch-comprar.srch-comprando, .srch-root .srch-card .srch-comprar.srch-anadido { opacity: 1; }
}

@media (max-width: 529.98px) {
	.srch-root .srch-comprar { height: 26px; font-size: 14px; }
	.srch-root .srch-comprar i { font-size: 16px; }
}

/* El desplegable del ordenador, algo más ancho que la página de la tienda (su contenedor mide 1310 px) */
.srch-root { --srch-flot-w: 1400px; }