/**
 * assets/css/pages-cart.css
 * ---------------------------------------------------------------------------
 * Sistema de diseño "Modern Atelier" — páginas de carrito (carrito.php) y de
 * confirmación de pedido (confirmacion.php).
 *
 * Complementa, no reemplaza, a assets/css/theme.css y assets/css/shop.css:
 * aquí sólo vive lo que esas hojas no cubren (rejilla del carrito, fila de
 * producto responsive, panel de totales y la cabecera de confirmación).
 *
 * INTEGRACIÓN
 * -----------
 * Mientras esta hoja no se enlace desde includes/header.php, carrito.php y
 * confirmacion.php la cargan por su cuenta con un <link> propio. Al moverla al
 * header se pueden eliminar esos dos <link>.
 *
 * REGLA DE COLOR
 * --------------
 * Nunca se escriben valores hexadecimales: todo color sale de las custom
 * properties que genera brand_css_vars().
 */

/* ===========================================================================
   1) CONTRATO DE VISIBILIDAD CON assets/js/cart.js
   ---------------------------------------------------------------------------
   El carrito se renderiza en cliente y el script alterna la clase `hidden`
   sobre estos tres contenedores. Ninguna regla de layout puede ganarle a ese
   alternado, por eso se refuerza con especificidad de id.
   =========================================================================== */

#cart-loading.hidden,
#cart-empty.hidden,
#cart-content.hidden {
	display: none !important;
}

/* ===========================================================================
   2) MARCO DE PÁGINA
   =========================================================================== */

.marandre-cart-page,
.marandre-confirmation-page {
	background: var(--color-background);
	min-height: 60vh;
	padding-bottom: var(--space-20);
}

/* Variante alineada a la izquierda de `.page-header` (que viene centrada). */
.page-header--flush {
	text-align: left;
	padding: var(--space-6) 0 var(--space-8);
}

.page-header--flush p {
	margin-inline: 0;
}

/* ===========================================================================
   3) REJILLA DEL CARRITO
   ---------------------------------------------------------------------------
   shop.css ya apila las columnas por debajo de 1024px con `!important`; aquí
   sólo se define el reparto de escritorio.
   =========================================================================== */

.marandre-cart-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-8);
}

.marandre-cart-items {
	flex: 1 1 480px;
	min-width: 0;
}

.marandre-cart-summary-col {
	flex: 0 0 340px;
	max-width: 100%;
}

.marandre-cart-summary-col .cart-totals {
	position: sticky;
	top: calc(var(--header-height) + var(--space-6));
}

/* ===========================================================================
   4) FILA DE PRODUCTO
   =========================================================================== */

.marandre-cart-items .shop-table {
	table-layout: auto;
}

.marandre-cart-items .shop-table .product-thumbnail {
	width: 104px;
}

.cart-item__image {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: var(--radius-md);
	background: var(--color-surface-low);
}

.cart-item__title {
	display: inline-block;
	font-family: var(--font-display);
	font-size: var(--text-md);
	line-height: 1.3;
	color: var(--color-on-surface);
	transition: color var(--transition);
}

.cart-item__title:hover,
.cart-item__title:focus-visible {
	color: var(--color-primary);
}

.cart-item__note {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-xs);
	color: var(--color-warning);
}

.cart-item__remove {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: var(--space-2);
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-on-surface-faint);
	transition: color var(--transition);
}

.cart-item__remove:hover,
.cart-item__remove:focus-visible {
	color: var(--color-error);
}

.marandre-cart-items .shop-table .product-price {
	font-size: var(--text-sm);
	color: var(--color-on-surface-muted);
	white-space: nowrap;
}

.marandre-cart-items .shop-table .product-subtotal {
	text-align: right;
	font-weight: 700;
	color: var(--color-on-surface);
	white-space: nowrap;
}

/* Etiqueta de la celda: sólo se muestra en la vista apilada (móvil). */
.marandre-cart-items .shop-table td[data-title]::before {
	display: none;
	content: attr(data-title);
	margin-bottom: var(--space-1);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-on-surface-faint);
}

/* ===========================================================================
   5) STEPPER DE CANTIDAD
   ---------------------------------------------------------------------------
   El markup y el comportamiento (+/-) los define assets/js/theme.js; aquí sólo
   se afina el foco y el hover para que sea usable con teclado.
   =========================================================================== */

.marandre-qty .qty-btn {
	line-height: 1;
	border-radius: var(--radius-sm);
	transition: color var(--transition), background var(--transition);
}

.marandre-qty .qty-btn:hover {
	color: var(--color-primary);
}

.marandre-qty .qty-btn:focus-visible,
.marandre-qty input:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: 2px;
}

/* ===========================================================================
   6) PANEL DE TOTALES
   =========================================================================== */

.cart-totals__title {
	margin-bottom: var(--space-5);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	color: var(--color-on-surface);
}

.cart-totals__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-2) 0;
	font-size: var(--text-sm);
	color: var(--color-on-surface-muted);
}

.cart-totals__value {
	color: var(--color-on-surface);
	font-weight: 600;
}

.cart-totals__hint {
	font-size: var(--text-xs);
	color: var(--color-on-surface-faint);
	text-align: right;
}

.cart-totals__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-surface-high);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	color: var(--color-on-surface);
}

.cart-totals .btn-primary {
	width: 100%;
	margin-top: var(--space-6);
}

.cart-totals__secure {
	margin-top: var(--space-4);
	text-align: center;
	font-size: var(--text-xs);
	color: var(--color-on-surface-faint);
}

.cart-back-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-6);
	font-size: var(--text-sm);
	color: var(--color-on-surface-muted);
	transition: color var(--transition);
}

.cart-back-link:hover,
.cart-back-link:focus-visible {
	color: var(--color-primary);
}

/* ===========================================================================
   7) ESTADOS (cargando, vacío, verificación de email)
   =========================================================================== */

.cart-state {
	padding: var(--space-16) var(--space-6);
	text-align: center;
	background: var(--color-surface-lowest);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-ambient);
}

.cart-state__icon {
	display: block;
	margin-bottom: var(--space-4);
	font-size: 2.25rem;
	color: var(--color-outline-variant);
}

.cart-state__icon--brand {
	color: var(--color-primary);
}

.cart-state__icon--warning {
	color: var(--color-warning);
}

.cart-state h2 {
	margin-bottom: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	color: var(--color-on-surface);
}

.cart-state p {
	max-width: 46ch;
	margin: 0 auto var(--space-6);
	color: var(--color-on-surface-muted);
	font-size: var(--text-sm);
}

.cart-state__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

.cart-gate {
	max-width: 620px;
	margin-inline: auto;
}

/* ===========================================================================
   8) CONFIRMACIÓN DE PEDIDO
   =========================================================================== */

.confirmation-hero {
	text-align: center;
	padding-top: var(--space-6);
}

.confirmation-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin-bottom: var(--space-5);
	border-radius: 50%;
	background: var(--color-surface-low);
	font-size: var(--text-2xl);
}

.confirmation-hero__icon--success {
	background: var(--color-success-container);
	color: var(--color-success);
}

.confirmation-hero__icon--pending {
	background: var(--color-warning-container);
	color: var(--color-warning);
}

.confirmation-hero__icon--error {
	background: var(--color-error-container);
	color: var(--color-error);
}

.confirmation-hero__icon--unknown {
	background: var(--color-surface-high);
	color: var(--color-on-surface-muted);
}

.confirmation-hero h1 {
	margin-bottom: var(--space-3);
	font-family: var(--font-display);
}

.confirmation-hero__lead {
	max-width: 56ch;
	margin: 0 auto var(--space-5);
	color: var(--color-on-surface-muted);
}

.confirmation-hero__badge {
	margin-bottom: var(--space-4);
}

/* Ficha con el número de pedido. */
.order-ref {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-3) var(--space-8);
	max-width: 520px;
	margin: 0 auto var(--space-10);
	padding: var(--space-6);
	background: var(--color-surface-low);
	border-radius: var(--radius-lg);
}

.order-ref__item {
	text-align: center;
}

.order-ref__label {
	display: block;
	margin-bottom: var(--space-1);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-on-surface-faint);
}

.order-ref__value {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	color: var(--color-on-surface);
}

/* Aviso de coordinación de envío. */
.confirmation-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	max-width: 640px;
	margin: 0 auto var(--space-8);
	padding: var(--space-6);
	text-align: left;
	background: var(--color-surface-low);
	border-radius: var(--radius-lg);
}

.confirmation-notice__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-primary-container);
	color: var(--color-primary);
}

.confirmation-notice h2 {
	margin-bottom: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-md);
	color: var(--color-on-surface);
}

.confirmation-notice p {
	font-size: var(--text-sm);
	color: var(--color-on-surface-muted);
}

.confirmation-notice__estimate {
	display: inline-block;
	margin-top: var(--space-3);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--color-surface-high);
	font-size: var(--text-xs);
	color: var(--color-on-surface-muted);
}

.confirmation-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-10);
}

.confirmation-link-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-on-surface-muted);
	transition: color var(--transition);
}

.confirmation-link-whatsapp:hover,
.confirmation-link-whatsapp:focus-visible {
	color: var(--color-success);
}

/* El stepper de seguimiento vive en shop.css; aquí sólo se acota su ancho. */
.marandre-confirmation-page .order-tracking-stepper {
	max-width: 760px;
	margin-inline: auto;
}

.order-tracking-stepper__caption {
	margin-top: var(--space-6);
	text-align: center;
	font-size: var(--text-xs);
	color: var(--color-on-surface-faint);
}

/* ===========================================================================
   9) RESPONSIVE
   =========================================================================== */

@media (max-width: 767px) {
	/* Cabecera de tabla oculta para lectores visuales, visible para AT. */
	.marandre-cart-items .shop-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.marandre-cart-items .shop-table tr {
		display: grid;
		grid-template-columns: 88px minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--space-2) var(--space-4);
		padding: var(--space-5) 0;
		border-bottom: 1px solid var(--color-surface-high);
	}

	.marandre-cart-items .shop-table td {
		padding: 0;
		border-bottom: none;
	}

	.marandre-cart-items .shop-table .product-thumbnail {
		width: auto;
		grid-column: 1;
		grid-row: 1 / span 3;
		align-self: start;
	}

	.cart-item__image {
		width: 88px;
		height: 88px;
	}

	.marandre-cart-items .shop-table .product-name {
		grid-column: 2 / span 2;
		grid-row: 1;
	}

	.marandre-cart-items .shop-table .product-price {
		grid-column: 2 / span 2;
		grid-row: 2;
	}

	.marandre-cart-items .shop-table .product-quantity {
		grid-column: 2;
		grid-row: 3;
	}

	.marandre-cart-items .shop-table .product-subtotal {
		grid-column: 3;
		grid-row: 3;
	}

	.marandre-cart-items .shop-table .product-price::before,
	.marandre-cart-items .shop-table .product-subtotal::before {
		display: block;
	}

	.order-ref {
		gap: var(--space-4);
	}

	.confirmation-notice {
		flex-direction: column;
	}
}