/* ==========================================================================
   cart.css — Carrito (estilado sobre markup nativo de WooCommerce)
   ========================================================================== */

.woocommerce-cart .esp-main { padding-block: var(--esp-space-6) var(--esp-space-9); }
.woocommerce-cart h1 { font-size: var(--esp-fs-800); margin-bottom: var(--esp-space-5); }

/* Botones genéricos Woo → estilo del theme */
.woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-space-2);
	font-family: var(--esp-font-body); font-weight: 700; text-transform: uppercase; letter-spacing: var(--esp-tracking-caps);
	font-size: var(--esp-fs-300); padding: 0.85rem 1.4rem; border-radius: var(--esp-radius-pill);
	background: var(--esp-surface-3); color: var(--esp-crema); border: 1px solid var(--esp-border-strong); cursor: pointer;
	transition: background var(--esp-dur-fast) var(--esp-ease), transform var(--esp-dur-fast) var(--esp-ease);
}
.woocommerce .button:hover { transform: translateY(-2px); }
.woocommerce .button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .checkout-button {
	background: var(--esp-rojo) !important; color: #fff !important; border-color: var(--esp-rojo); box-shadow: var(--esp-glow-rojo);
}
.woocommerce .button.alt:hover { background: var(--esp-rojo-dark) !important; }

/* Tabla del carrito */
.woocommerce-cart table.shop_table {
	width: 100%; border-collapse: collapse; background: var(--esp-surface);
	border: 1px solid var(--esp-border); border-radius: var(--esp-radius-lg); overflow: hidden;
}
.woocommerce-cart table.shop_table th {
	text-align: left; padding: var(--esp-space-4); font-family: var(--esp-font-display);
	text-transform: uppercase; letter-spacing: var(--esp-tracking-caps); font-size: var(--esp-fs-300);
	color: var(--esp-text-muted); border-bottom: 1px solid var(--esp-border);
}
.woocommerce-cart table.shop_table td { padding: var(--esp-space-4); border-bottom: 1px solid var(--esp-border); vertical-align: middle; }
.woocommerce-cart .product-thumbnail img { width: 64px; border-radius: var(--esp-radius-sm); }
.woocommerce-cart .product-name a { font-weight: 600; color: var(--esp-crema); }
.woocommerce-cart .product-name a:hover { color: var(--esp-dorado); }
.woocommerce-cart .product-remove a {
	display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
	border-radius: 50%; background: var(--esp-surface-3); color: var(--esp-text-muted); font-size: 1.1rem; line-height: 1;
}
.woocommerce-cart .product-remove a:hover { background: var(--esp-rojo); color: #fff; }
.woocommerce-cart .product-subtotal { color: var(--esp-dorado); font-weight: 700; }

.actions { padding: var(--esp-space-4); display: flex; justify-content: space-between; gap: var(--esp-space-3); flex-wrap: wrap; align-items: center; }
.coupon { display: flex; gap: var(--esp-space-2); }
.coupon input { width: auto; min-width: 180px; }

/* Inputs OSCUROS (cupón, cantidad) — vencen el blanco default */
.woocommerce-cart .coupon input.input-text,
.woocommerce-cart input.input-text,
.woocommerce-cart .quantity input.qty,
.woocommerce-cart input[type="number"],
.woocommerce-cart input[type="text"] {
	background: var(--esp-surface-3) !important; color: var(--color-cream) !important;
	border: 1px solid var(--esp-border) !important; border-radius: var(--esp-radius-sm) !important; box-shadow: none !important;
	padding: 0.7rem 0.85rem; min-height: 46px; font: inherit;
}
.woocommerce-cart input.input-text::placeholder { color: var(--esp-text-dim); }
.woocommerce-cart .coupon input:focus, .woocommerce-cart .quantity input.qty:focus { outline: 2px solid var(--color-gold) !important; border-color: var(--color-gold) !important; }
.woocommerce-cart .quantity input.qty { width: 84px; text-align: center; }

/* Botones del carrito — vencer el gris default de WooCommerce */
.woocommerce-cart .button, .woocommerce-cart button.button, .woocommerce-cart input.button, .woocommerce-cart a.button {
	background: var(--esp-surface-3) !important; background-color: var(--esp-surface-3) !important; color: var(--color-cream) !important; border: 1px solid var(--esp-border-strong) !important;
}
.woocommerce-cart .button.alt, .woocommerce-cart input.button.alt, .woocommerce-cart .checkout-button, .woocommerce-cart .esp-cart__continue:hover {
	background: var(--color-red) !important; background-color: var(--color-red) !important; color: #fff !important; border-color: var(--color-red) !important;
}
.woocommerce-cart .esp-cart__continue { background: transparent !important; background-color: transparent !important; }

/* Cart totals */
.cart_totals { background: var(--esp-surface); border: 1px solid var(--esp-border); border-radius: var(--esp-radius-lg); padding: var(--esp-space-5); margin-top: var(--esp-space-5); }
.cart_totals h2 { font-size: var(--esp-fs-600); margin-bottom: var(--esp-space-4); }
.cart_totals table { width: 100%; }
.cart_totals th, .cart_totals td { padding: var(--esp-space-3) 0; border-bottom: 1px solid var(--esp-border); text-align: left; }
.cart_totals .order-total .amount { color: var(--esp-dorado); font-size: var(--esp-fs-600); font-weight: 700; }
.wc-proceed-to-checkout { margin-top: var(--esp-space-4); }
.wc-proceed-to-checkout .checkout-button { width: 100%; }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: color-mix(in srgb, var(--esp-dorado) 7%, var(--esp-surface)); border: 1px solid var(--esp-border-strong);
	border-radius: var(--esp-radius); padding: var(--esp-space-4); color: var(--esp-text); list-style: none; margin-bottom: var(--esp-space-5);
}
.woocommerce-error { background: color-mix(in srgb, var(--esp-rojo) 10%, var(--esp-surface)); }
.woocommerce-message { background: color-mix(in srgb, var(--esp-verde) 10%, var(--esp-surface)); }

@media (max-width: 600px) {
	.woocommerce-cart table.shop_table thead { display: none; }
	.woocommerce-cart table.shop_table tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-space-2); padding: var(--esp-space-3); border-bottom: 1px solid var(--esp-border); }
	.woocommerce-cart table.shop_table td { border: 0; padding: var(--esp-space-1) 0; }
	.woocommerce-cart .product-remove { grid-column: 2; justify-self: end; }
	.actions { flex-direction: column; }
	.coupon { width: 100%; }
	.coupon input { flex: 1; min-width: 0; }
}