/* ============================================================
   MARCH — Cart Block CSS
   Targets WooCommerce Cart Block (wp:woocommerce/cart) classes
   ============================================================ */

/* ── Reset: site-main no interfiera con el carrito ───────── */
body.woocommerce-cart .site-main,
body.woocommerce-cart #main,
body.woocommerce-cart #content {
	max-width: none !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* ── Outer Block Wrapper ──────────────────────────────────── */
.wp-block-woocommerce-cart {
	font-family: var(--font-primary) !important;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: clamp(32px, 5vw, 48px) var(--container-px) clamp(64px, 8vw, 120px);
}

/* ── Cart Page Header (Title) ─────────────────────────────── */
/* NOTA: el heading se inyecta FUERA del .wp-block-woocommerce-cart,
   por lo que necesita sus propios valores de padding/max-width */
.march-cart-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;
	/* El header fijo ya se compensa con .march-header-spacer; esto es solo aire */
	padding: clamp(28px, 6vw, 72px) var(--container-px) clamp(14px, 2vw, 20px);
	max-width: var(--container-max);
	margin: 0 auto;
	border-bottom: 2px solid var(--color-black);
	box-sizing: border-box;
}

.march-cart-heading h1 {
	font-family: var(--font-primary);
	font-size: clamp(26px, 5vw, 48px);
	font-weight: var(--fw-black);
	text-transform: uppercase;
	letter-spacing: -0.03em;
	margin: 0;
	line-height: 1;
}

.march-cart-heading a {
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-gray-400);
	text-decoration: none;
	transition: color 0.2s;
	white-space: nowrap;
}

.march-cart-heading a:hover {
	color: var(--color-black);
}

/* ── 2-Column Sidebar Layout ──────────────────────────────── */
.wc-block-components-sidebar-layout {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	padding-top: clamp(20px, 3vw, 40px) !important;
	gap: clamp(32px, 4vw, 72px) !important;
}

.wc-block-components-main {
	flex: 1 1 0% !important;
	min-width: 0 !important;
	width: auto !important;
	padding-right: 0 !important; /* WC añade 4.5% que se suma al gap */
}

.wc-block-components-sidebar,
.wc-block-cart__sidebar {
	flex: 0 0 clamp(300px, 30vw, 380px) !important;
	width: clamp(300px, 30vw, 380px) !important;
	min-width: 0 !important;
	position: sticky !important;
	top: 120px !important;
}

/* Pantallas bajas (laptops 1366×768, etc.): sin sticky para que el botón
   de pago no quede fuera de la vista */
@media (max-height: 760px) {
	.wc-block-components-sidebar,
	.wc-block-cart__sidebar {
		position: static !important;
	}
}

/* Tablet y menor: una sola columna */
@media (max-width: 1024px) {
	.wc-block-components-sidebar-layout {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.wc-block-components-sidebar,
	.wc-block-cart__sidebar {
		flex: 1 1 auto !important;
		width: 100% !important;
		position: static !important;
	}
}

/* ── Cart Items Table Header ──────────────────────────────── */
.wc-block-cart-items__header {
	border-bottom: 1px solid var(--color-gray-200) !important;
}

.wc-block-cart-items__header th {
	font-family: var(--font-primary) !important;
	font-size: 13px !important;
	font-weight: var(--fw-bold) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.18em !important;
	color: var(--color-gray-400) !important;
	padding: 0 0 16px 0 !important;
	border: none !important;
	background: transparent !important;
}

.wc-block-cart-items__header-total {
	text-align: right !important;
}

/* ── Cart Item Row ────────────────────────────────────────── */
.wc-block-cart-items__row {
	border-bottom: 1px solid var(--color-gray-200) !important;
}

.wc-block-cart-items__row td {
	padding: clamp(20px, 2.5vw, 28px) 0 !important;
	border: none !important;
	vertical-align: middle !important;
	background: transparent !important;
}

/* Thumbnail */
.wc-block-cart-item__image {
	width: 80px !important;
	padding-right: 16px !important;
}

.wc-block-cart-item__image img,
.wc-block-cart-item__image a img {
	width: 72px !important;
	height: 72px !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	background: var(--color-gray-100) !important;
}

/* Product Info Column */
.wc-block-cart-item__product {
	padding-right: 16px !important;
}

/* Product Name */
.wc-block-components-product-name,
.wc-block-cart-item__product .wc-block-components-product-name a {
	font-family: var(--font-primary) !important;
	font-size: clamp(18px, 1.6vw, 24px) !important;
	font-weight: var(--fw-black) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	color: var(--color-black) !important;
	text-decoration: none !important;
	line-height: 1.2 !important;
	overflow-wrap: anywhere !important;
}

.wc-block-cart-item__product .wc-block-components-product-name a:hover {
	text-decoration: underline !important;
}

/* Descripción corta / metadata del producto */
.wc-block-cart-item__product p,
.wc-block-cart-item__product .wc-block-components-product-metadata,
.wc-block-cart-item__product .wc-block-components-product-metadata__description,
.wc-block-cart-item__product > p,
.wc-block-cart-item__product span:not(.wc-block-components-product-name):not([class*="price"]) {
	font-family: var(--font-primary) !important;
	font-size: clamp(14px, 1.1vw, 16px) !important;
	font-weight: var(--fw-regular) !important;
	color: var(--color-gray-400) !important;
	line-height: 1.5 !important;
	margin-top: 6px !important;
}

/* Product Price (below name) */
.wc-block-cart-item__prices .wc-block-components-product-price,
.wc-block-cart-item__prices .wc-block-components-product-price__value {
	font-family: var(--font-primary) !important;
	font-size: clamp(16px, 1.4vw, 20px) !important;
	font-weight: var(--fw-medium) !important;
	color: var(--color-gray-700) !important;
}

.wc-block-cart-item__prices .wc-block-components-product-price .woocommerce-Price-amount {
	font-size: clamp(16px, 1.5vw, 22px) !important;
	font-weight: var(--fw-medium) !important;
}

/* Sale badge */
.wc-block-components-product-badge,
.wp-block-woocommerce-product-sale-badge {
	background: var(--color-black) !important;
	color: var(--color-white) !important;
	font-family: var(--font-primary) !important;
	font-size: 11px !important;
	font-weight: var(--fw-bold) !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	border-radius: 50px !important;
	padding: 4px 8px !important;
}

/* ── Quantity Selector ────────────────────────────────────── */
.wc-block-cart-item__quantity {
	margin-top: 14px !important;
}

.wc-block-components-quantity-selector {
	display: flex !important;
	align-items: center !important;
	border: 1.5px solid var(--color-gray-200) !important;
	width: fit-content !important;
	background: transparent !important;
	border-radius: 50px !important;
}

.wc-block-components-quantity-selector input {
	width: 52px !important;
	height: 44px !important;
	border: none !important;
	text-align: center !important;
	font-family: var(--font-primary) !important;
	font-size: 18px !important;
	font-weight: var(--fw-bold) !important;
	background: transparent !important;
	color: var(--color-black) !important;
	box-shadow: none !important;
	outline: none !important;
}

.wc-block-components-quantity-selector button {
	width: 36px !important;
	height: 44px !important;
	border: none !important;
	background: transparent !important;
	font-size: 20px !important;
	color: var(--color-black) !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	transition: background 0.2s !important;
}

.wc-block-components-quantity-selector button:hover {
	background: var(--color-gray-100) !important;
}

/* Remove link */
.wc-block-cart-item__remove-link {
	font-family: var(--font-primary) !important;
	font-size: 13px !important;
	font-weight: var(--fw-medium) !important;
	color: var(--color-gray-400) !important;
	text-decoration: underline !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	cursor: pointer !important;
	margin-top: 8px !important;
	display: block !important;
	transition: color 0.2s !important;
}

.wc-block-cart-item__remove-link:hover {
	color: var(--color-black) !important;
}

/* Total column */
.wc-block-cart-item__total {
	text-align: right !important;
	white-space: nowrap !important;
}

.wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-cart-item__total .woocommerce-Price-amount {
	font-family: var(--font-primary) !important;
	font-size: clamp(18px, 1.6vw, 24px) !important;
	font-weight: var(--fw-bold) !important;
	color: var(--color-black) !important;
}

/* ── Cart Sidebar / Totals ────────────────────────────────── */
.wc-block-cart__sidebar {
	background: var(--color-gray-100);
	padding: clamp(20px, 2.5vw, 28px) !important;
}

/* WC añade 16px laterales a cupón/paneles en contenedores ≥700px;
   el sidebar ya tiene su propio padding */
.wc-block-components-sidebar .wc-block-components-totals-coupon,
.wc-block-components-sidebar .slot-wrapper .wc-block-components-panel {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.wc-block-cart__totals-title {
	font-family: var(--font-primary) !important;
	font-size: 13px !important;
	font-weight: var(--fw-bold) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.2em !important;
	color: var(--color-gray-400) !important;
	margin: 0 0 16px !important;
	padding-bottom: 14px !important;
	border-bottom: 1px solid var(--color-gray-200) !important;
}

/* Totals Wrapper */
.wc-block-components-totals-wrapper {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* Each total row */
.wc-block-components-totals-item {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	padding: 10px 0 !important;
	border: none !important;
	border-bottom: none !important;
}

.wc-block-components-totals-item__label {
	font-family: var(--font-primary) !important;
	font-size: clamp(15px, 1.3vw, 18px) !important;
	font-weight: var(--fw-medium) !important;
	color: var(--color-gray-700) !important;
}

.wc-block-components-totals-item__value,
.wc-block-components-totals-item .wc-block-components-formatted-money-amount {
	font-family: var(--font-primary) !important;
	font-size: clamp(15px, 1.3vw, 18px) !important;
	font-weight: var(--fw-medium) !important;
	color: var(--color-black) !important;
}

/* Order Total row (Estimated total / Total) */
.wc-block-components-totals-footer-item {
	border-top: 2px solid var(--color-black) !important;
	margin-top: 8px !important;
	padding-top: 16px !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: clamp(20px, 2vw, 24px) !important;
	font-weight: var(--fw-black) !important;
	color: var(--color-black) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: clamp(20px, 2vw, 24px) !important;
	font-weight: var(--fw-black) !important;
	color: var(--color-black) !important;
}

/* ── Coupon Panel ─────────────────────────────────────────── */
.wc-block-components-panel {
	border: none !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
}

.wc-block-components-panel__button {
	font-family: var(--font-primary) !important;
	font-size: 11px !important;
	font-weight: var(--fw-medium) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: var(--color-gray-400) !important;
	background: none !important;
	border: none !important;
	padding: 10px 0 !important;
	cursor: pointer !important;
	width: 100% !important;
	text-align: left !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	border-top: 1px solid var(--color-gray-200) !important;
	border-bottom: 1px solid var(--color-gray-200) !important;
	margin-bottom: 8px !important;
	transition: color 0.2s !important;
}

.wc-block-components-panel__button:hover {
	color: var(--color-black) !important;
}

.wc-block-components-panel__button-icon svg {
	fill: currentColor !important;
}

.wc-block-components-totals-coupon__form {
	display: flex !important;
	gap: 8px !important;
	align-items: stretch !important;
	margin-bottom: 12px !important;
}

.wc-block-components-totals-coupon__input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.wc-block-components-totals-coupon__input input {
	height: 42px !important;
	border: 1.5px solid var(--color-gray-200) !important;
	padding: 0 12px !important;
	font-family: var(--font-primary) !important;
	font-size: 13px !important;
	background: transparent !important;
	border-radius: 50px !important;
	outline: none !important;
	transition: border-color 0.2s !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.wc-block-components-totals-coupon__input input:focus {
	border-color: var(--color-black) !important;
}

.wc-block-components-totals-coupon__button {
	display: flex !important;
	align-items: center !important;
	height: 42px !important;
	padding: 0 16px !important;
	background: transparent !important;
	border: 1.5px solid var(--color-black) !important;
	color: var(--color-black) !important;
	font-family: var(--font-primary) !important;
	font-size: 10px !important;
	font-weight: var(--fw-bold) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	cursor: pointer !important;
	border-radius: 50px !important;
	transition: var(--ease-base) !important;
	white-space: nowrap !important;
}

.wc-block-components-totals-coupon__button:hover {
	background: var(--color-black) !important;
	color: var(--color-white) !important;
}

/* Coupon link (show coupon form toggle) */
.wc-block-components-totals-coupon-link {
	font-family: var(--font-primary) !important;
	font-size: 11px !important;
	font-weight: var(--fw-medium) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: var(--color-gray-400) !important;
	text-decoration: underline !important;
	cursor: pointer !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 10px 0 !important;
	display: inline-block !important;
}

/* ── Checkout Button ──────────────────────────────────────── */
.wc-block-cart__submit-container {
	margin-top: 16px !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wc-block-cart__submit-container a {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 17px 24px !important;
	background: var(--color-black) !important;
	color: var(--color-white) !important;
	font-family: var(--font-primary) !important;
	font-size: 11px !important;
	font-weight: var(--fw-bold) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.16em !important;
	text-align: center !important;
	text-decoration: none !important;
	border: 2px solid var(--color-black) !important;
	border-radius: 50px !important;
	cursor: pointer !important;
	transition: var(--ease-base) !important;
	line-height: 1 !important;
}

.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover,
.wc-block-cart__submit-container a:hover {
	background: transparent !important;
	color: var(--color-black) !important;
}

/* ── Payment Method Icons ─────────────────────────────────── */
.wc-block-cart__payment-options {
	display: none !important;
}

/* ── WC Notices on Cart ───────────────────────────────────── */
.woocommerce-cart .wc-block-components-notice-banner,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info {
	font-family: var(--font-primary) !important;
	font-size: 13px !important;
	background: var(--color-gray-100) !important;
	border: none !important;
	border-left: 3px solid var(--color-black) !important;
	border-radius: 50px !important;
	margin-bottom: 20px !important;
}

/* ── Empty Cart State ─────────────────────────────────────── */
.wp-block-woocommerce-empty-cart-block {
	text-align: center !important;
	padding: clamp(48px, 8vw, 100px) 0 !important;
}

.wc-block-cart__empty-cart__title {
	font-family: var(--font-primary) !important;
	font-size: var(--text-xl) !important;
	font-weight: var(--fw-black) !important;
	text-transform: uppercase !important;
	letter-spacing: -0.02em !important;
	color: var(--color-black) !important;
}

/* Empty cart button (Return to shop) */
.wp-block-woocommerce-empty-cart-block .wc-block-components-button,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
	display: inline-flex !important;
	align-items: center !important;
	padding: 15px 36px !important;
	background: var(--color-black) !important;
	color: var(--color-white) !important;
	font-family: var(--font-primary) !important;
	font-size: 11px !important;
	font-weight: var(--fw-bold) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.15em !important;
	text-decoration: none !important;
	border: 2px solid var(--color-black) !important;
	border-radius: 50px !important;
	transition: var(--ease-base) !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-components-button:hover,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
	background: transparent !important;
	color: var(--color-black) !important;
}

/* ============================================================
   RESPONSIVE
   WooCommerce añade al contenedor del carrito una clase según su
   ancho real (no el del viewport):
     .is-large  > 700px   → tabla clásica
     .is-medium 521–700px → filas en grid
     .is-small  401–520px → filas en grid
     .is-mobile ≤ 400px   → filas en grid (la mayoría de teléfonos)
   ============================================================ */

/* ── Filas compactas (medium / small / mobile) ────────────── */
:is(.is-medium, .is-small, .is-mobile) table.wc-block-cart-items .wc-block-cart-items__header {
	display: none !important;
}

:is(.is-medium, .is-small, .is-mobile) table.wc-block-cart-items .wc-block-cart-items__row {
	display: grid !important;
	grid-template-columns: 72px minmax(0, 1fr) auto !important;
	column-gap: 14px !important;
	row-gap: 0 !important;
	align-items: start !important;
	padding: 20px 0 !important;
}

:is(.is-medium, .is-small, .is-mobile) table.wc-block-cart-items .wc-block-cart-items__row td {
	padding: 0 !important;
}

:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-items__row .wc-block-cart-item__image {
	grid-column: 1 !important;
	grid-row: 1 !important;
	width: auto !important;
	padding: 0 !important;
}

:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__image img,
:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__image a img {
	width: 72px !important;
	height: 72px !important;
}

:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-items__row .wc-block-cart-item__product {
	grid-column: 2 !important;
	grid-row: 1 !important;
	min-width: 0 !important;
	padding: 0 !important;
}

:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-column: 3 !important;
	grid-row: 1 !important;
	text-align: right !important;
}

:is(.is-medium, .is-small, .is-mobile) .wc-block-components-product-name,
:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__product .wc-block-components-product-name a {
	font-size: 17px !important;
}

:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__prices .wc-block-components-product-price,
:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__prices .woocommerce-Price-amount {
	font-size: 15px !important;
}

:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__total .wc-block-components-product-price,
:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__total .woocommerce-Price-amount {
	font-size: 17px !important;
}

/* Cantidad + "Eliminar" en una línea (bajan si no caben) */
:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__quantity {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px 16px !important;
	margin-top: 12px !important;
}

:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__remove-link {
	margin-top: 0 !important;
	font-size: 12px !important;
}

:is(.is-medium, .is-small, .is-mobile) .wc-block-components-quantity-selector input {
	width: 44px !important;
	height: 40px !important;
	font-size: 16px !important;
}

:is(.is-medium, .is-small, .is-mobile) .wc-block-components-quantity-selector button {
	width: 36px !important;
	height: 40px !important;
}

/* ── Teléfonos (≤400px de carrito): el total baja bajo el producto ── */
.is-mobile table.wc-block-cart-items .wc-block-cart-items__row {
	grid-template-columns: 60px minmax(0, 1fr) !important;
	column-gap: 12px !important;
}

.is-mobile .wc-block-cart-item__image img,
.is-mobile .wc-block-cart-item__image a img {
	width: 60px !important;
	height: 60px !important;
}

.is-mobile .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-column: 2 !important;
	grid-row: 2 !important;
	text-align: left !important;
	margin-top: 12px !important;
}

.is-mobile .wc-block-components-product-name,
.is-mobile .wc-block-cart-item__product .wc-block-components-product-name a {
	font-size: 16px !important;
}

/* ── Barra fija "Proceder al pago" en móvil (WC ≤782px) ──── */
@media (max-width: 782px) {
	.wc-block-cart .wc-block-cart__submit-container--sticky {
		margin: 0 !important;
		padding: 12px var(--container-px) calc(12px + env(safe-area-inset-bottom, 0px)) !important;
		background: var(--color-white) !important;
		border-top: 1px solid var(--color-gray-200) !important;
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06) !important;
	}

	/* Subir el botón de WhatsApp para que no tape la barra de pago */
	body.woocommerce-cart:has(.wc-block-cart__submit-container--sticky) .joinchat {
		--bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* ── Ajustes generales en pantallas pequeñas ──────────────── */
@media (max-width: 600px) {
	.march-cart-heading a {
		font-size: 11px;
	}

	/* Las píldoras de 50px recortan los avisos de varias líneas */
	.woocommerce-cart .wc-block-components-notice-banner,
	.woocommerce-cart .woocommerce-message,
	.woocommerce-cart .woocommerce-info {
		border-radius: 12px !important;
	}

	.wc-block-cart__submit-button,
	.wp-block-woocommerce-proceed-to-checkout-block a,
	.wc-block-cart__submit-container a {
		padding: 16px 20px !important;
	}
}