/* ==========================================================================
   EVOX — Página de Carrito
   Re-estiliza el carrito NATIVO de WooCommerce ([woocommerce_cart]) al diseño
   EVOX: items como cards (izquierda) + caja "Resumen de compra" (derecha).
   Todo va scopeado bajo .evox-cart-page (clase que se pone en la Section de
   Bricks que contiene el shortcode) para no afectar checkout ni otras vistas.
   ========================================================================== */

.evox-cart-page {
	font-family: 'Manrope', sans-serif;
}

/* -------- Layout --------
   El layout de 2 columnas (items | resumen) se arma EN BRICKS, dentro del
   template "WooCommerce - Cart" (un Div con flex y los elementos nativos
   Cart Items + Cart Totals). Este CSS no impone layout de página: solo
   estiliza el markup nativo de WooCommerce que esos elementos imprimen. */
.evox-cart-page .woocommerce-notices-wrapper:empty {
	display: none;
}

/* -------- Avisos de WooCommerce (stock, cupones, item eliminado) -------- */
.evox-cart-page .woocommerce-message,
.evox-cart-page .woocommerce-info,
.evox-cart-page .woocommerce-error {
	list-style: none;
	margin: 0 0 8px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
	background: var(--evox-fondo);
	color: var(--evox-tinta);
	border-left: 3px solid var(--evox-verde);
}
.evox-cart-page .woocommerce-error {
	border-left-color: var(--evox-error);
}
.evox-cart-page .woocommerce-message a.restore-item,
.evox-cart-page .woocommerce-message .button,
.evox-cart-page .woocommerce-error .button {
	color: var(--evox-azul);
	font-weight: 600;
	text-decoration: underline;
	background: none;
	border: none;
	padding: 0;
	float: right;
}

/* ==========================================================================
   ITEMS — la tabla nativa se convierte en cards
   ========================================================================== */
.evox-cart-page .woocommerce-cart-form table,
.evox-cart-page .woocommerce-cart-form tbody,
.evox-cart-page .woocommerce-cart-form tr,
.evox-cart-page .woocommerce-cart-form td,
.evox-cart-page .woocommerce-cart-form th {
	display: block;
	border: none;
	padding: 0;
	margin: 0;
	background: none;
	width: 100%;
	text-align: left;
}
.evox-cart-page .woocommerce-cart-form thead {
	display: none;
}
/* Etiquetas responsive "Product:", "Price:", etc. que WooCommerce/Bricks
   pintan en móvil vía ::before con el data-title de la columna. OJO: la
   celda del nombre es un TH (scope="row", cambio de accesibilidad de
   WooCommerce 9+), no un TD — hay que cubrir ambos. Se anula el content
   (el pseudo-elemento ni se genera) con selector reforzado. */
.evox-cart-page .woocommerce-cart-form table tr td::before,
.evox-cart-page .woocommerce-cart-form table tr td::after,
.evox-cart-page .woocommerce-cart-form table tr th::before,
.evox-cart-page .woocommerce-cart-form table tr th::after {
	content: none !important;
	display: none !important;
}

/* Card de cada producto */
.evox-cart-page tr.cart_item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name   remove"
		"thumb price  price"
		"thumb qty    subtotal";
	column-gap: 20px;
	row-gap: 6px;
	padding: 24px 0;
	border-bottom: 1px solid var(--evox-borde);
	align-items: start;
}

.evox-cart-page td.product-thumbnail {
	grid-area: thumb;
}
.evox-cart-page td.product-thumbnail img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.evox-cart-page .cart_item .product-name {
	grid-area: name;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}
.evox-cart-page .cart_item .product-name a {
	color: var(--evox-tinta);
	text-decoration: none;
	transition: color 0.2s ease;
}
.evox-cart-page .cart_item .product-name a:hover {
	color: var(--evox-verde);
}
/* Atributos de la variación (COLOR: Negro, etc.) */
.evox-cart-page .cart_item .product-name dl.variation {
	display: block;
	margin: 6px 0 0;
	font-weight: 400;
}
.evox-cart-page .cart_item .product-name dl.variation dt,
.evox-cart-page .cart_item .product-name dl.variation dd {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 11.5px;
	line-height: 1.6;
	border: none;
	float: none;
}
.evox-cart-page .cart_item .product-name dl.variation dt {
	color: var(--evox-tinta);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.evox-cart-page .cart_item .product-name dl.variation dd {
	color: var(--evox-cuerpo);
}
.evox-cart-page .cart_item .product-name dl.variation dd::after {
	content: '';
	display: block; /* un atributo por línea, como en el offcanvas */
}
.evox-cart-page .cart_item .product-name dl.variation dd p {
	display: inline;
	margin: 0;
}

/* Precio unitario — con oferta: precio vigente primero, regular tachado después
   (el filtro woocommerce_cart_item_price del plugin imprime <del> + <ins>;
   aquí solo se invierte el orden visual con flex) */
.evox-cart-page td.product-price {
	grid-area: price;
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 13px;
	color: var(--evox-cuerpo);
}
.evox-cart-page td.product-price ins {
	order: 1;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--evox-tinta);
}
.evox-cart-page td.product-price del {
	order: 2;
	font-size: 12px;
	color: var(--evox-suave);
	text-decoration: line-through;
}

/* Subtotal de la línea */
.evox-cart-page td.product-subtotal {
	grid-area: subtotal;
	align-self: end;
	justify-self: end;
	font-size: 15px;
	font-weight: 700;
	color: var(--evox-tinta);
}

/* Quitar (×) — pisa el circulito rojo del CSS core de WooCommerce */
.evox-cart-page td.product-remove {
	grid-area: remove;
	justify-self: end;
	width: auto;
}
.evox-cart-page td.product-remove a.remove {
	display: block;
	width: 24px;
	height: 24px;
	line-height: 22px;
	text-align: center;
	font-size: 20px;
	font-weight: 400;
	border-radius: 50%;
	color: var(--evox-suave) !important;
	background: transparent !important;
	text-decoration: none;
	transition: color 0.2s ease;
}
.evox-cart-page td.product-remove a.remove:hover {
	color: var(--evox-error) !important;
	background: transparent !important;
}

/* -------- Stepper de cantidad (los botones ± los inyecta cart-page.js) ---- */
.evox-cart-page td.product-quantity {
	grid-area: qty;
	align-self: end;
}
.evox-cart-page .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--evox-borde-fuerte);
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}
/* Bricks agrega sus PROPIOS botones ± al input de cantidad, pero esos solo
   cambian el número sin disparar la actualización del carrito. Se ocultan y
   quedan únicamente los del plugin (.evox-qty-btn), que sí auto-actualizan
   y respetan el tope de stock. Selector genérico a propósito: elimina
   cualquier control ajeno dentro de .quantity sin depender de sus clases. */
.evox-cart-page .quantity > *:not(input.qty):not(.evox-qty-btn):not(label):not(:has(input.qty)) {
	display: none !important;
}
.evox-cart-page .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
.evox-cart-page .quantity input.qty {
	width: 36px;
	border: none;
	background: #fff;
	text-align: center;
	font-family: inherit;
	font-size: 13px;
	color: var(--evox-tinta);
	padding: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}
.evox-cart-page .quantity input.qty::-webkit-outer-spin-button,
.evox-cart-page .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.evox-cart-page .quantity input.qty:focus {
	outline: none;
}
.evox-cart-page .evox-qty-btn {
	width: 30px;
	height: 30px;
	background: #fff;
	border: none;
	font-size: 14px;
	cursor: pointer;
	color: var(--evox-tinta);
	transition: background 0.15s ease;
	text-align: center;
	line-height: 1;
}
.evox-cart-page .evox-qty-btn:hover {
	background: var(--evox-fondo);
}
.evox-cart-page .evox-qty-btn:disabled {
	color: var(--evox-borde-fuerte);
	cursor: not-allowed;
	background: #fff;
}

/* -------- Fila de acciones nativa (cupón + botón Update) --------
   Oculta: el update lo dispara el JS automáticamente y los descuentos del
   proyecto son por precio de oferta, no por cupones. Si algún día usas
   cupones, elimina esta regla y se vuelve a mostrar el campo nativo. */
.evox-cart-page .woocommerce-cart-form td.actions {
	display: none;
}

/* ==========================================================================
   RESUMEN DE COMPRA (.cart_totals)
   ========================================================================== */
.evox-cart-page .cart_totals {
	width: 100%;
	background: var(--evox-fondo);
	border-radius: 12px;
	padding: 28px;
}
.evox-cart-page .cart_totals h2 {
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--evox-tinta);
	margin: 0 0 20px;
}

.evox-cart-page .cart_totals table,
.evox-cart-page .cart_totals tbody {
	display: block;
	width: 100%;
	border: none;
	margin: 0;
	background: none;
}
.evox-cart-page .cart_totals tr {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 8px 0;
	border: none;
}
.evox-cart-page .cart_totals th,
.evox-cart-page .cart_totals td {
	display: block;
	border: none;
	padding: 0;
	background: none;
	width: auto;
}
.evox-cart-page .cart_totals table tr th::before,
.evox-cart-page .cart_totals table tr td::before {
	content: none !important;
	display: none !important;
}
.evox-cart-page .cart_totals th {
	font-size: 14px;
	font-weight: 500;
	color: var(--evox-cuerpo);
	text-align: left;
}
.evox-cart-page .cart_totals td {
	font-size: 14px;
	font-weight: 600;
	color: var(--evox-tinta);
	text-align: right;
}

/* Fila Descuentos (inyectada por mini-cart.php) — en verde, igual que el offcanvas */
.evox-cart-page .cart_totals tr.evox-discount-row th,
.evox-cart-page .cart_totals tr.evox-discount-row td,
.evox-cart-page .cart_totals tr.cart-discount th,
.evox-cart-page .cart_totals tr.cart-discount td {
	color: var(--evox-verde);
}

/* Fila Envío: "Se sumará en el checkout" + link Consultar envío */
.evox-cart-page .cart_totals tr.evox-shipping-note td {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
.evox-cart-page .evox-shipping-note__text {
	font-size: 13px;
	font-weight: 500;
	color: var(--evox-cuerpo);
}
.evox-cart-page .evox-cart-ship-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--evox-verde);
	text-decoration: underline;
	transition: color 0.2s ease;
}
.evox-cart-page .evox-cart-ship-link:hover {
	color: var(--evox-verde-hover);
}

/* Total */
.evox-cart-page .cart_totals tr.order-total {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--evox-borde);
}
.evox-cart-page .cart_totals tr.order-total th,
.evox-cart-page .cart_totals tr.order-total td {
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--evox-tinta);
}
.evox-cart-page .cart_totals tr.order-total td small {
	font-size: 11px;
	font-weight: 400;
	color: var(--evox-cuerpo);
	display: block;
}

/* Botón Finalizar Compra + Seguir comprando */
.evox-cart-page .wc-proceed-to-checkout {
	margin-top: 20px;
	padding: 0;
}
.evox-cart-page .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--evox-azul);
	color: #fff;
	padding: 14px;
	border-radius: 8px;
	font-family: 'Manrope', sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 12px;
	transition: background 0.2s ease;
}
.evox-cart-page .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--evox-azul-hover);
	color: #fff;
}
.evox-cart-page .evox-cart-continue {
	display: block;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--evox-cuerpo);
	text-decoration: underline;
	transition: color 0.2s ease;
}
.evox-cart-page .evox-cart-continue:hover {
	color: var(--evox-azul);
}

/* ==========================================================================
   CARRITO VACÍO — solo FALLBACK
   Si existe el template Bricks "WooCommerce - Empty Cart", ese diseño manda
   y estas reglas no aplican. Se dejan por si el template no está presente.
   ========================================================================== */
.evox-cart-page .wc-empty-cart-message,
.evox-cart-page p.cart-empty {
	text-align: center;
	font-size: 16px;
	color: var(--evox-cuerpo);
	background: none;
	border: none;
	padding: 48px 0 8px;
	margin: 0;
}
.evox-cart-page p.return-to-shop {
	text-align: center;
	padding-bottom: 48px;
}
.evox-cart-page p.return-to-shop a.button {
	display: inline-block;
	background: var(--evox-azul);
	color: #fff;
	padding: 13px 28px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: background 0.2s ease;
}
.evox-cart-page p.return-to-shop a.button:hover {
	background: var(--evox-azul-hover);
}

/* Overlay de "procesando" que pone WooCommerce mientras actualiza (blockUI) */
.evox-cart-page .blockUI.blockOverlay {
	border-radius: 12px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 600px) {
	.evox-cart-page tr.cart_item {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name   remove"
			"thumb price  price"
			"qty   qty    subtotal";
		column-gap: 14px;
		padding: 20px 0;
	}
	.evox-cart-page td.product-thumbnail img {
		width: 72px;
		height: 72px;
	}
	.evox-cart-page td.product-quantity {
		margin-top: 8px;
	}
	.evox-cart-page .cart_totals {
		padding: 20px;
	}
}