/**
 * Mr. Mate — Mini-carrito (dropdown del header) — versión liviana del
 * mismo sistema visual del carrito premium (ver mrmate-carrito-premium.css).
 *
 * A diferencia de ese archivo, ESTE se carga en TODO el sitio (el drawer
 * de Shoptimizer — shoptimizer_header_cart_drawer(), en el theme padre —
 * vive en el header de cada página, no solo en /carrito/). Por eso acá
 * NO se toca markup ni se agregan overrides de template: solo se
 * reestilan con CSS las clases que YA imprimen WooCommerce core
 * (cart/mini-cart.php, sin sobreescribir) y Shoptimizer (theme padre),
 * y el archivo se mantiene chico a propósito.
 *
 * Misma paleta que el carrito completo (#111 / #f6f6f6 / #ddd) para que
 * abrir el mini-carrito y llegar a /carrito/ se sienta como el mismo
 * sistema, no dos diseños distintos.
 */

/* -- Encabezado del drawer -- */
.shoptimizer-mini-cart-wrap .cart-drawer-heading {
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #111;
}

/* -- Cada línea de producto: más aire, separación más clara -- */
.shoptimizer-mini-cart-wrap ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
	padding-top: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid #eee;
}

.shoptimizer-mini-cart-wrap ul.woocommerce-mini-cart img {
	border-radius: 8px;
	background-color: #f6f6f6;
}

.shoptimizer-mini-cart-wrap ul.woocommerce-mini-cart a.remove {
	color: #888;
}

.shoptimizer-mini-cart-wrap ul.woocommerce-mini-cart a.remove:hover {
	color: #c0392b;
}

/* -- Cantidad del mini-carrito (shoptimizer-custom-quantity-mini-cart_*,
 * ver mini-cart.php del theme padre): mismos radios/colores que el
 * stepper del carrito completo, en un tamaño más chico acorde al
 * dropdown. -- */
.shoptimizer-mini-cart-wrap .shoptimizer-custom-quantity-mini-cart {
	border: 1px solid #111;
	border-radius: 999px;
	overflow: hidden;
}

.shoptimizer-mini-cart-wrap .shoptimizer-custom-quantity-mini-cart_button {
	background-color: #fff;
	color: #111;
}

.shoptimizer-mini-cart-wrap .shoptimizer-custom-quantity-mini-cart_button:hover {
	background-color: #111;
	color: #fff;
}

/* -- Subtotal -- */
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__total.total {
	font-weight: 700;
	color: #111;
	border-top: 1px solid #eee;
	padding-top: 14px;
}

/* -- Botones "Ver carrito" / "Finalizar compra": el de compra queda
 * negro sólido, igual que el botón grande del carrito completo — la
 * misma jerarquía visual (una sola acción principal, negra) en todas
 * las escalas del sitio. -- */
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons.buttons {
	display: flex;
	gap: 10px;
}

.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons.buttons a.button {
	flex: 1 1 0;
	border-radius: 999px;
	text-align: center;
	font-weight: 600;
}

.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons.buttons a.button.checkout {
	background-color: #111;
	color: #fff;
}

.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons.buttons a.button.checkout:hover {
	background-color: #000;
}

/* FIX (14/07): en mobile, el widget flotante de WhatsApp (plugin Chaty,
 * fixed bottom-right, fuera de este theme) queda con un z-index más alto
 * que el drawer del mini-carrito y tapa visualmente el botón "Ver
 * carrito"/"Finalizar compra" cuando el drawer está abierto — no se puede
 * bajar el z-index de Chaty desde acá (es otro plugin), así que en vez de
 * pelear esa guerra se le da margen abajo a los botones para que queden
 * arriba de la zona donde flota esa burbuja. */
@media (max-width: 768px) {
	.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons.buttons {
		margin-bottom: 74px;
	}
}