/* Cesta de Micelium — sobre el HTML nativo de WooCommerce, sin plantillas propias.
   Todo cuelga de body.woocommerce-cart: fuera de la cesta no pinta nada. */

body.woocommerce-cart {
	--mc-azul:      #024b94;   /* el del boton Reservar de la cabecera */
	--mc-azul-osc:  #01366a;
	--mc-azul-sup:  #f2f7fc;
	--mc-cielo:     #3ba7dd;   /* la gota clara del logotipo */
	--mc-tinta:     #1b2733;
	--mc-gris:      #697586;
	--mc-linea:     #e4eaf1;
	--mc-verde:     #1a7f52;
	--mc-radio:     14px;
	--mc-sombra:    0 1px 2px rgba(27,39,51,.05), 0 8px 24px -12px rgba(27,39,51,.18);
	--mc-titular:   "Poppins", "Ubuntu", system-ui, sans-serif;
	--mc-texto:     "Ubuntu", system-ui, -apple-system, sans-serif;
}

/* ─────────────────────────────────────────────── Armazon de la pagina */

body.woocommerce-cart .woocommerce {
	font-family: var(--mc-texto);
	color: var(--mc-tinta);
}

/* Los enlaces del tema salen rojo oscuro; aqui mandan los azules de la marca. */
body.woocommerce-cart .woocommerce a:not(.button):not(.checkout-button) {
	color: var(--mc-azul);
	text-decoration: none;
}
body.woocommerce-cart .woocommerce a:not(.button):not(.checkout-button):hover {
	color: var(--mc-azul-osc);
	text-decoration: underline;
}

/* Dos columnas en escritorio: la lista manda, el resumen acompana y se queda
   pegado al hacer scroll, que es donde esta el boton de pagar. */
@media (min-width: 981px) {
	body.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 2.15fr) minmax(300px, 1fr);
		align-items: start;
		gap: 32px;
	}
	body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}
	/* WooCommerce mete el resumen Y las ventas cruzadas dentro del mismo
	   `.cart-collaterals`. Con `display:contents` esa caja desaparece y sus
	   hijos entran en la rejilla por separado: el resumen a la derecha y
	   "puede que te interese" debajo de la lista, que es su sitio. */
	body.woocommerce-cart .woocommerce > .cart-collaterals {
		display: contents;
	}
	body.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
		grid-column: 1;
		grid-row: 2;
	}
	body.woocommerce-cart .cart-collaterals > .cross-sells {
		grid-column: 1;
		grid-row: 3;
		width: 100%;
		margin: 8px 0 0;
		float: none;
	}
	body.woocommerce-cart .cart-collaterals > .cart_totals {
		grid-column: 2;
		grid-row: 2 / span 2;
		align-self: start;
		position: sticky;
		top: 110px;   /* la cabecera es fija; sin esto el resumen queda debajo */
		width: 100%;
		float: none;
		margin: 0;
	}
}

/* ──────────────────────────────────────────── Lista de la cesta */

body.woocommerce-cart table.shop_table.cart {
	width: 100%;
	max-width: 100%;
	border: 0;
	border-radius: var(--mc-radio);
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	box-shadow: var(--mc-sombra);
	overflow: hidden;
	margin: 0 0 24px;
}

body.woocommerce-cart table.shop_table.cart thead th {
	background: var(--mc-azul-sup);
	border: 0;
	padding: 14px 16px;
	font-family: var(--mc-titular);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mc-gris);
	white-space: nowrap;
}
body.woocommerce-cart table.shop_table.cart thead th.product-remove { width: 48px; }
body.woocommerce-cart table.shop_table.cart thead th.product-thumbnail { width: 104px; }
body.woocommerce-cart table.shop_table.cart thead th.product-name { width: auto; }
body.woocommerce-cart table.shop_table.cart thead th.product-price,
body.woocommerce-cart table.shop_table.cart thead th.product-subtotal { width: 104px; }
body.woocommerce-cart table.shop_table.cart thead th.product-quantity { width: 108px; }

/* Las dos primeras columnas no necesitan rotulo: se entienden solas. */
body.woocommerce-cart table.shop_table.cart thead th.product-remove,
body.woocommerce-cart table.shop_table.cart thead th.product-thumbnail { font-size: 0; }

body.woocommerce-cart table.shop_table.cart tbody td {
	border: 0;
	border-top: 1px solid var(--mc-linea);
	padding: 20px 16px;
	vertical-align: middle;
	background: #fff;
}
body.woocommerce-cart table.shop_table.cart tbody tr:first-child td { border-top: 0; }

body.woocommerce-cart td.product-thumbnail img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--mc-linea);
	display: block;
}

body.woocommerce-cart td.product-name > a {
	font-family: var(--mc-titular);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mc-tinta) !important;
	display: inline-block;
	margin-bottom: 6px;
}
body.woocommerce-cart td.product-name > a:hover { color: var(--mc-azul) !important; }

/* Los atributos de la reserva (tipo, dias, fecha) en pares etiqueta/valor:
   antes salian como parrafos sueltos y no se sabia que era cada cosa. */
body.woocommerce-cart td.product-name dl.variation {
	/* WooCommerce la sirve como `display:table` desde su hoja: hace falta
	   forzarlo para que los pares etiqueta/valor caigan en dos columnas. */
	display: grid !important;
	grid-template-columns: auto 1fr;
	gap: 2px 8px;
	margin: 6px 0 0;
	font-size: .85rem;
	line-height: 1.45;
}
body.woocommerce-cart td.product-name dl.variation dt {
	margin: 0;
	font-weight: 600;
	color: var(--mc-gris);
}
body.woocommerce-cart td.product-name dl.variation dd { margin: 0; color: var(--mc-tinta); }
body.woocommerce-cart td.product-name dl.variation dd p { margin: 0; }

body.woocommerce-cart td.product-name .prad-show-more-btn {
	margin-top: 6px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--mc-azul);
	cursor: pointer;
}
body.woocommerce-cart td.product-name .prad-show-more-btn:hover { text-decoration: underline; }

body.woocommerce-cart td.product-price,
body.woocommerce-cart td.product-subtotal {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
body.woocommerce-cart td.product-price .amount { color: var(--mc-azul); font-weight: 400; }
body.woocommerce-cart td.product-subtotal .amount { color: var(--mc-azul); font-weight: 700; }

body.woocommerce-cart td.product-quantity .quantity input.qty {
	width: 68px;
	height: 42px;
	padding: 0 6px;
	text-align: center;
	font-size: 1rem;
	color: var(--mc-tinta);
	border: 1px solid var(--mc-linea);
	border-radius: 8px;
	background: #fff;
}
body.woocommerce-cart td.product-quantity .quantity input.qty:focus {
	outline: 2px solid var(--mc-cielo);
	outline-offset: 1px;
	border-color: var(--mc-cielo);
}

/* La equis de quitar: circulo discreto que solo se pone rojo al apuntarlo. */
body.woocommerce-cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 20px;
	line-height: 1;
	color: var(--mc-gris) !important;
	background: var(--mc-azul-sup);
	border-radius: 50%;
	transition: background .15s, color .15s;
}
body.woocommerce-cart td.product-remove a.remove:hover {
	background: #fde8e8;
	color: #b42318 !important;
}

/* ─────────────────────────────────────────── Cupon y actualizar */

body.woocommerce-cart td.actions {
	padding: 18px 16px;
	background: var(--mc-azul-sup);
	border-top: 1px solid var(--mc-linea);
	/* Aqui NO vale `display:flex`. Esta celda lleva colspan="6" y en cuanto
	   deja de ser table-cell el navegador la saca del reparto de columnas:
	   se le inventa una columna propia de ~430px, la tabla crece hasta 877px
	   y se sale de su columna del grid, pisando el resumen. */
	display: table-cell;
	vertical-align: middle;
	text-align: left !important;
}
body.woocommerce-cart td.actions .coupon {
	display: flex;
	float: left;
	width: min(430px, 100%);
	gap: 8px;
	margin: 0;
}
body.woocommerce-cart td.actions button[name="update_cart"] { float: right; }
/* El campo salia con 80px de ancho y no cabia ni "Codigo de cupon". */
body.woocommerce-cart td.actions .coupon input#coupon_code {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--mc-linea);
	border-radius: 8px;
	background: #fff;
	font-size: .95rem;
	color: var(--mc-tinta);
}
body.woocommerce-cart td.actions .coupon input#coupon_code:focus {
	outline: 2px solid var(--mc-cielo);
	outline-offset: 1px;
	border-color: var(--mc-cielo);
}

/* ──────────────────────────────────────────────────── Botones */

body.woocommerce-cart .woocommerce .button,
body.woocommerce-cart .woocommerce a.button,
body.woocommerce-cart .woocommerce button.button,
body.woocommerce-cart .woocommerce input.button {
	height: 44px;
	padding: 0 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mc-titular);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1;
	border: 1px solid var(--mc-azul);
	border-radius: 8px;
	background: transparent;
	color: var(--mc-azul);
	text-decoration: none;
	text-shadow: none;
	transition: background .15s, color .15s, border-color .15s;
	/* El CSS del Personalizador le mete a todo submit `line-height:0`,
	   `width:100%` y `margin-top:25px`. Aqui se devuelve a su sitio. */
	line-height: 1 !important;
	width: auto !important;
	margin-top: 0;
}
body.woocommerce-cart .woocommerce .button:hover {
	background: var(--mc-azul);
	color: #fff;
}
body.woocommerce-cart .woocommerce .button[disabled],
body.woocommerce-cart .woocommerce .button:disabled {
	border-color: var(--mc-linea);
	background: #f4f6f9;
	color: #9aa4b2;
	cursor: not-allowed;
	opacity: 1;
	box-shadow: none;
}
body.woocommerce-cart .woocommerce .button[disabled]:hover { background: #f4f6f9; color: #9aa4b2; }

/* Aplicar cupon salia azul con la letra marron: ilegible. */
body.woocommerce-cart td.actions .coupon button[name="apply_coupon"] {
	flex: 0 0 auto;
	background: var(--mc-azul);
	border-color: var(--mc-azul);
	color: #fff;
	white-space: nowrap;
}
body.woocommerce-cart td.actions .coupon button[name="apply_coupon"]:hover {
	background: var(--mc-azul-osc);
	border-color: var(--mc-azul-osc);
	color: #fff;
}

/* El de pagar salia MORADO, que es el color de fabrica de WooCommerce. */
body.woocommerce-cart .woocommerce .checkout-button,
body.woocommerce-cart .woocommerce a.checkout-button.button.alt,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	height: 54px;
	margin: 18px 0 0;
	padding: 0 20px;
	font-size: 1.05rem;
	background: var(--mc-azul);
	border-color: var(--mc-azul);
	color: #fff;
	border-radius: 10px;
	box-shadow: 0 6px 18px -8px rgba(2,75,148,.7);
	width: 100% !important;
}
body.woocommerce-cart .woocommerce .checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--mc-azul-osc);
	border-color: var(--mc-azul-osc);
	color: #fff;
}

/* ────────────────────────────────────────── Resumen del pedido */

body.woocommerce-cart .cart_totals {
	background: #fff;
	border: 1px solid var(--mc-linea);
	border-radius: var(--mc-radio);
	box-shadow: var(--mc-sombra);
	padding: 22px;
}
body.woocommerce-cart .cart_totals > h2 {
	font-family: var(--mc-titular);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--mc-tinta);
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--mc-linea);
	text-transform: none;
}

body.woocommerce-cart .cart_totals table.shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin: 0;
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
	border: 0;
	padding: 10px 0;
	background: transparent;
	vertical-align: baseline;
}
body.woocommerce-cart .cart_totals table.shop_table th {
	width: auto;
	font-family: var(--mc-texto);
	font-size: .95rem;
	font-weight: 400;
	color: var(--mc-gris);
	text-align: left;
	padding-right: 12px;
}
body.woocommerce-cart .cart_totals table.shop_table td {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--mc-tinta);
}
body.woocommerce-cart .cart_totals tr.fee th,
body.woocommerce-cart .cart_totals tr.fee td { color: var(--mc-verde); font-weight: 600; }
body.woocommerce-cart .cart_totals tr.fee th { line-height: 1.4; }
body.woocommerce-cart .cart_totals tr.fee th img.emoji { width: 1em; height: 1em; vertical-align: -.15em; }

body.woocommerce-cart .cart_totals tr.order-total th,
body.woocommerce-cart .cart_totals tr.order-total td {
	border-top: 1px solid var(--mc-linea);
	padding-top: 16px;
	font-family: var(--mc-titular);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--mc-tinta);
}
body.woocommerce-cart .cart_totals tr.order-total td strong { font-weight: 700; }

/* Stripe deja siempre esta fila con un div vacio dentro: colapsa a cero y
   solo ocupa sitio el dia que de verdad traiga un mensaje de pago aplazado. */
/* Stripe deja siempre esta fila con un div vacio dentro. Va con !important
   porque el Personalizador fuerza `display:inline-flex` en todas las filas. */
body.woocommerce-cart .cart_totals tr.wc-stripe-bnpl-cart-message td { padding: 0; border: 0; }
body.woocommerce-cart .cart_totals #wc-stripe-bnpl-cart-msg:empty { display: none; }
body.woocommerce-cart .cart_totals table.shop_table tr:has(#wc-stripe-bnpl-cart-msg:empty) { display: none !important; }

/* El Total cierra la lista: la raya de debajo sobra (la pinta WooCommerce). */
body.woocommerce-cart .cart_totals table.shop_table tr.order-total,
body.woocommerce-cart .cart_totals table.shop_table tr:last-child { border-bottom: 0 !important; }

body.woocommerce-cart .wc-proceed-to-checkout { padding: 0; }
body.woocommerce-cart .wc-stripe-cart-checkout-container { margin-top: 14px; }

/* ────────────────────────────────────────────── Cesta vacia */

body.woocommerce-cart .cart-empty.woocommerce-info {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--mc-azul-sup);
	border: 1px solid var(--mc-linea);
	border-top: 3px solid var(--mc-azul);
	border-radius: var(--mc-radio);
	padding: 22px;
	font-size: 1.02rem;
	color: var(--mc-tinta);
}
body.woocommerce-cart .return-to-shop { margin-top: 16px; }
body.woocommerce-cart .return-to-shop .button {
	background: var(--mc-azul);
	border-color: var(--mc-azul);
	color: #fff;
}

/* ─────────────────────────────── Movil y tableta (hasta 980px) */

/* ─────────────────────────────────── Puede que tambien te interese */

body.woocommerce-cart .cross-sells { margin-bottom: 32px; }
body.woocommerce-cart .cross-sells > h2 {
	margin: 0 0 16px;
	text-transform: none;   /* el tema lo pone en mayusculas; asi casa con "Totales del carrito" */
	font-family: var(--mc-titular);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--mc-tinta);
}
body.woocommerce-cart .cross-sells ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* El tema reparte estos productos con float y anchos en %: aqui manda la
   rejilla, asi que hay que desarmar lo otro. */
body.woocommerce-cart .cross-sells ul.products li.product {
	display: flex;
	flex-direction: column;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--mc-linea);
	border-radius: var(--mc-radio);
	box-shadow: var(--mc-sombra);
}
body.woocommerce-cart .cross-sells ul.products::before,
body.woocommerce-cart .cross-sells ul.products::after,
body.woocommerce-cart .cross-sells ul.products li.product::before,
body.woocommerce-cart .cross-sells ul.products li.product::after { content: none; display: none; }
body.woocommerce-cart .cross-sells ul.products li.product img {
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	border-radius: 10px;
	margin: 0 0 10px;
}
body.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--mc-titular);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mc-tinta);
}
body.woocommerce-cart .cross-sells ul.products li.product .price {
	margin: 0 0 12px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--mc-azul);
}
body.woocommerce-cart .cross-sells ul.products li.product .price del { color: var(--mc-gris); font-weight: 400; }
/* El boton se pega abajo para que todas las tarjetas cierren a la misma altura. */
body.woocommerce-cart .cross-sells ul.products li.product a.button {
	margin-top: auto !important;
	display: block;
	width: 100% !important;
	padding: 11px 14px !important;
	background: #fff !important;
	border: 1px solid var(--mc-azul) !important;
	border-radius: 10px;
	font-family: var(--mc-titular);
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.2 !important;
	color: var(--mc-azul) !important;
	text-align: center;
	text-decoration: none;
	transition: background .15s, color .15s;
}
body.woocommerce-cart .cross-sells ul.products li.product a.button:hover {
	background: var(--mc-azul) !important;
	color: #fff !important;
}
body.woocommerce-cart .cross-sells ul.products li.product a.added_to_cart {
	display: block;
	margin-top: 8px;
	font-size: .82rem;
	font-weight: 600;
	text-align: center;
}

@media (max-width: 980px) {

	/* El contenedor de Elementor mete 100px arriba: en un movil es media pantalla. */
	body.woocommerce-cart .elementor-element > .e-con-inner { padding-top: 32px; }

	body.woocommerce-cart table.shop_table.cart { box-shadow: none; background: transparent; overflow: visible; }
	body.woocommerce-cart table.shop_table.cart thead { display: none; }
	body.woocommerce-cart table.shop_table.cart tbody { display: block; }

	/* Cada linea pasa a ser una ficha: foto a la izquierda, datos a la derecha. */
	body.woocommerce-cart table.shop_table.cart tbody tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr);
		grid-template-areas:
			"foto nombre"
			"foto precio"
			"cant subtotal";
		gap: 4px 14px;
		align-items: start;
		margin: 0 0 14px;
		padding: 16px 46px 16px 16px;
		background: #fff;
		border: 1px solid var(--mc-linea);
		border-radius: var(--mc-radio);
		box-shadow: var(--mc-sombra);
		/* El Personalizador tiene `.woocommerce table.shop_table tr{display:inline-flex !important}`
		   por debajo de 575px, que es lo que rompia la cesta en el movil. */
		display: grid !important;
	}
	body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td {
		display: block;
		width: auto;
		border: 0;
		padding: 0;
		/* WooCommerce fuerza `text-align:right !important` en pantalla pequena. */
		text-align: left !important;
	}

	/* WooCommerce rotula cada celda con su data-title y lo saca flotando a la
	   izquierda; aqui el rotulo va encima, pequeno y en gris. */
	body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td::before {
		float: none;
		display: block;
		width: auto;
		margin: 0 0 2px;
		font-family: var(--mc-titular);
		font-size: .7rem;
		font-weight: 600;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: var(--mc-gris);
		content: attr(data-title);
	}
	body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name::before { display: none; }

	body.woocommerce-cart td.product-thumbnail {
		grid-area: foto;
		display: block !important;   /* WooCommerce lo esconde en pantalla pequena */
	}
	body.woocommerce-cart td.product-thumbnail img { width: 84px; height: 84px; }

	body.woocommerce-cart td.product-name     { grid-area: nombre; }
	body.woocommerce-cart td.product-price    { grid-area: precio; margin-top: 8px; }
	body.woocommerce-cart td.product-quantity { grid-area: cant; margin-top: 12px; }
	body.woocommerce-cart td.product-subtotal { grid-area: subtotal; margin-top: 12px; }
	body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-subtotal,
	body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-subtotal::before {
		text-align: right !important;
	}
	body.woocommerce-cart td.product-subtotal { align-self: center; }
	body.woocommerce-cart td.product-quantity { align-self: center; }

	body.woocommerce-cart td.product-remove {
		position: absolute;
		top: 12px;
		right: 12px;
		grid-area: unset;
	}
	body.woocommerce-cart td.product-remove::before { display: none; }

	/* La fila de acciones tambien es una ficha, no una celda de tabla. */
	body.woocommerce-cart table.shop_table.cart tbody tr:not(.cart_item) { display: block !important; }
	body.woocommerce-cart td.actions {
		display: block;
		border: 1px solid var(--mc-linea);
		border-radius: var(--mc-radio);
		background: #fff;
		padding: 16px;
	}
	body.woocommerce-cart td.actions::before { display: none; }
	/* En movil todo va apilado: los flotantes de escritorio estorban. */
	body.woocommerce-cart td.actions .coupon { display: block; float: none; width: auto; }
	body.woocommerce-cart td.actions button[name="update_cart"] { float: none; }
	body.woocommerce-cart td.actions .coupon input#coupon_code,
	body.woocommerce-cart td.actions .coupon button[name="apply_coupon"],
	body.woocommerce-cart td.actions button[name="update_cart"] {
		display: flex;
		width: 100% !important;
		margin: 0 0 10px;
	}
	body.woocommerce-cart td.actions button[name="update_cart"] { margin-bottom: 0; }

	body.woocommerce-cart .cart-collaterals,
	body.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; }
	/* En movil WooCommerce pone las ventas cruzadas ANTES del resumen y empuja
	   el boton de pagar fuera de pantalla: se reordenan sin tocar el HTML. */
	body.woocommerce-cart .cart-collaterals { display: flex; flex-direction: column; }
	body.woocommerce-cart .cart-collaterals > .cart_totals { order: 1; }
	body.woocommerce-cart .cart-collaterals > .cross-sells { order: 2; margin-top: 24px; }
	body.woocommerce-cart .cart_totals { margin-top: 8px; }

	/* Los importes se montaban unos encima de otros: etiqueta y cifra en dos
	   columnas de verdad, no en el apilado de WooCommerce. */
	body.woocommerce-cart .cart_totals table.shop_table,
	body.woocommerce-cart .cart_totals table.shop_table tbody { display: block; }
	body.woocommerce-cart .cart_totals table.shop_table tr {
		display: flex !important;   /* el Personalizador pone inline-flex */
		justify-content: space-between;
		align-items: baseline;
		gap: 14px;
		width: 100%;
	}
	body.woocommerce-cart .cart_totals table.shop_table th,
	body.woocommerce-cart .cart_totals table.shop_table td {
		display: block;
		width: auto;
		text-align: right !important;
	}
	body.woocommerce-cart .cart_totals table.shop_table th {
		flex: 1 1 auto;
		min-width: 0;
		text-align: left !important;
	}
	body.woocommerce-cart .cart_totals table.shop_table td { flex: 0 0 auto; }
	/* En movil WooCommerce repite el rotulo dentro de la celda del importe. */
	body.woocommerce-cart .cart_totals table.shop_table td::before { display: none !important; }

	/* Con las filas en flex cada celda pinta su propio borde y el hueco del
	   `gap` se queda sin linea: el separador pasa a la fila entera. */
	body.woocommerce-cart .cart_totals table.shop_table th,
	body.woocommerce-cart .cart_totals table.shop_table td { border: 0 !important; }
	body.woocommerce-cart .cart_totals table.shop_table tr { border-bottom: 1px solid var(--mc-linea); }
	body.woocommerce-cart .cart_totals table.shop_table tr.order-total,
	body.woocommerce-cart .cart_totals table.shop_table tr:last-child { border-bottom: 0 !important; }
	body.woocommerce-cart .cart_totals tr.wc-stripe-bnpl-cart-message:empty { display: none; }
}

@media (max-width: 400px) {
	body.woocommerce-cart table.shop_table.cart tbody tr.cart_item {
		grid-template-columns: 64px minmax(0, 1fr);
		padding-right: 42px;
	}
	body.woocommerce-cart td.product-thumbnail img { width: 64px; height: 64px; }
}