/* =====================================================================
   NEOPLANET Core - Carrito
   Solo se carga en la pagina del carrito (is_cart).
   Reorganiza el marcado nativo de WooCommerce: no hay plantillas propias.
   ===================================================================== */

body.woocommerce-cart {
	--np-c-texto:  #2d1a3e;
	--np-c-marca:  #342345;
	--np-c-suave:  #8a7f96;
	--np-c-lila:   #f6f3fb;
	--np-c-borde:  #e6dff0;
	--np-c-linea:  #f0ebf5;
	--np-radio:    12px;
	--np-sticky:   140px; /* altura de marquee + cabecera fija */
}


/* ---------------------------------------------------------------
   Rejilla general: lista a la izquierda, resumen a la derecha.
   Solo si hay productos (el carrito vacio no se toca).
   --------------------------------------------------------------- */

body.woocommerce-cart .woocommerce:has(.woocommerce-cart-form) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	column-gap: 32px;
	align-items: start;
}

body.woocommerce-cart .woocommerce:has(.woocommerce-cart-form) > * {
	grid-column: 1 / -1;
	min-width: 0;
}

body.woocommerce-cart .woocommerce:has(.woocommerce-cart-form) > .woocommerce-cart-form {
	grid-column: 1;
	margin: 0;
}

/* margin-top = alto del titulo "Tu carrito" (30px) + su margen (14px):
   asi la tarjeta del resumen arranca a la misma altura que la lista. */
body.woocommerce-cart .woocommerce:has(.woocommerce-cart-form) > .cart-collaterals {
	grid-column: 2;
	position: sticky;
	top: var(--np-sticky);
	width: auto !important;
	float: none !important;
	margin: 44px 0 0 !important;
	padding: 0 !important;
}

body.woocommerce-cart .np-cart-titulo {
	font-size: 22px;
	font-weight: 600;
	line-height: 30px;
	color: var(--np-c-marca);
	margin: 0 0 14px !important;
	padding: 0;
}

.np-cart-titulo span {
	font-size: 15px;
	font-weight: 400;
	color: var(--np-c-suave);
}


/* ---------------------------------------------------------------
   Lista de productos: la tabla pasa a ser una tarjeta
   --------------------------------------------------------------- */

body.woocommerce-cart table.shop_table.cart {
	display: block;
	width: 100%;
	margin: 0;
	border: 1px solid var(--np-c-borde);
	border-radius: var(--np-radio);
	border-collapse: separate;
	background: #fff;
	overflow: hidden;
}

body.woocommerce-cart table.shop_table.cart thead {
	display: none;
}

body.woocommerce-cart table.shop_table.cart tbody {
	display: block;
}

body.woocommerce-cart table.shop_table.cart td,
body.woocommerce-cart table.shop_table.cart th {
	display: block;
	padding: 0;
	border: 0 !important;
	background: none !important;
	text-align: left !important;
	color: var(--np-c-texto);
}

/* Etiquetas "Producto:", "Precio:"... de la tabla responsive */
body.woocommerce-cart table.shop_table.cart td::before {
	display: none !important;
	content: none !important;
}


/* ---------- Fila de producto ---------- */

body.woocommerce-cart table.shop_table.cart tr.cart_item {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name  subtotal"
		"thumb price ."
		"thumb qty   remove";
	column-gap: 18px;
	row-gap: 4px;
	align-items: start;
	padding: 18px;
	border-bottom: 1px solid var(--np-c-linea);
}

body.woocommerce-cart table.shop_table.cart tr.cart_item:last-of-type {
	border-bottom: 0;
}

/* La miniatura se fuerza al ancho de su columna: el tema y el modulo de
   imagenes le dan un ancho propio y se montaba sobre el texto. */
body.woocommerce-cart table.shop_table.cart td.product-thumbnail {
	grid-area: thumb;
	display: block !important;
	width: 88px !important;
	min-width: 0 !important;
	max-width: 88px !important;
	overflow: hidden;
	border-radius: 10px;
}

body.woocommerce-cart table.shop_table.cart td.product-thumbnail > a,
body.woocommerce-cart table.shop_table.cart td.product-thumbnail > picture {
	position: relative;
	display: block !important;
	width: 88px !important;
	height: 88px !important;
	overflow: hidden;
	border-radius: 10px;
	background: var(--np-c-lila);
}

body.woocommerce-cart table.shop_table.cart td.product-thumbnail picture {
	display: contents;
}

/* contain: la foto se ve completa aunque el archivo no sea exactamente
   cuadrado o el tema le aplique otro tamano. */
body.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	max-height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: contain !important;
	object-position: center !important;
	transform: none !important;
	border-radius: 10px;
}

/* WooCommerce imprime un   suelto tras el enlace del nombre: con el
   enlace en bloque ese espacio genera una linea vacia entre el nombre y
   las variaciones. Con font-size 0 en la celda desaparece, y cada hijo
   recupera su propio tamano. */
body.woocommerce-cart table.shop_table.cart td.product-name {
	grid-area: name;
	font-size: 0 !important;
	line-height: 0 !important;
}

body.woocommerce-cart table.shop_table.cart td.product-name > * {
	font-size: 13px;
	line-height: 1.45;
	margin-top: 0 !important;
}

body.woocommerce-cart table.shop_table.cart td.product-name > *:empty:not(br) {
	display: none !important;
}

body.woocommerce-cart table.shop_table.cart td.product-name > a {
	color: var(--np-c-texto);
	text-decoration: none;
	font-weight: 500;
}

body.woocommerce-cart table.shop_table.cart td.product-name > a:hover {
	color: var(--np-c-marca);
	text-decoration: underline;
}

/* Variaciones y datos extra: una linea por atributo, etiqueta y valor
   alineados. Admite 2 o mas variaciones y el campo de personalizacion. */
body.woocommerce-cart table.shop_table.cart td.product-name dl.variation {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 6px;
	row-gap: 2px;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	font-size: 13px;
	line-height: 1.45;
}

/* WooCommerce y el tema meten saltos y margenes entre el nombre y los datos */
body.woocommerce-cart table.shop_table.cart td.product-name > br {
	display: none;
}

body.woocommerce-cart table.shop_table.cart td.product-name > a {
	display: block;
	margin: 0 !important;
	font-size: 15px;
	line-height: 1.35;
}

body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt,
body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd {
	float: none;
	clear: none;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.45 !important;
}

body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt {
	font-weight: 400;
	color: var(--np-c-suave);
}

body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd {
	color: var(--np-c-texto);
}

body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd p {
	margin: 0 !important;
	padding: 0 !important;
}

/* Avisos dentro del nombre (stock, pedidos pendientes) */
body.woocommerce-cart table.shop_table.cart td.product-name .backorder_notification,
body.woocommerce-cart table.shop_table.cart td.product-name .stock {
	font-size: 12px;
	margin: 4px 0 0;
}

body.woocommerce-cart table.shop_table.cart td.product-price {
	grid-area: price;
	font-size: 13px;
	color: var(--np-c-suave);
}

body.woocommerce-cart table.shop_table.cart td.product-price::after {
	content: " / ud.";
}

body.woocommerce-cart table.shop_table.cart td.product-subtotal {
	grid-area: subtotal;
	text-align: right !important;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}

body.woocommerce-cart table.shop_table.cart td.product-quantity {
	grid-area: qty;
	align-self: end;
	margin-top: 4px;
}

body.woocommerce-cart table.shop_table.cart td.product-remove {
	grid-area: remove;
	align-self: center;
	justify-self: end;
	width: auto;
}


/* ---------- Eliminar ---------- */

body.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	height: auto;
	padding: 4px 0;
	border-radius: 0;
	background: none !important;
	color: var(--np-c-suave) !important;
	font-size: 0;
	line-height: 1;
	text-decoration: none;
}

body.woocommerce-cart table.shop_table.cart td.product-remove a.remove::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12"/><path d="M9 7V4h6v3"/></svg>') center / contain no-repeat;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12"/><path d="M9 7V4h6v3"/></svg>') center / contain no-repeat;
}

body.woocommerce-cart table.shop_table.cart td.product-remove a.remove::after {
	content: "Eliminar";
	font-size: 13px;
}

body.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover {
	color: #c0264a !important;
}


/* ---------- Selector de cantidad -/+ ---------- */

body.woocommerce-cart .woocommerce-cart-form .quantity {
	display: inline-flex;
	align-items: center;
	height: 38px;
	margin: 0;
	border: 1px solid var(--np-c-borde);
	border-radius: 999px;
	background: var(--np-c-lila);
	overflow: hidden;
}

body.woocommerce-cart .woocommerce-cart-form .quantity input.qty {
	width: 40px;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
	font-size: 15px;
	color: var(--np-c-texto);
	-moz-appearance: textfield;
	appearance: textfield;
}

body.woocommerce-cart .woocommerce-cart-form .quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .woocommerce-cart-form .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.woocommerce-cart .woocommerce-cart-form .quantity button.np-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--np-c-marca);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

body.woocommerce-cart .woocommerce-cart-form .quantity button.np-qty-btn:hover {
	background: var(--np-c-borde);
}

body.woocommerce-cart .woocommerce-cart-form .quantity button.np-qty-btn:focus-visible {
	outline: 2px solid var(--np-c-marca);
	outline-offset: -2px;
}


/* ---------------------------------------------------------------
   Fila de acciones
   El cupon no se ofrece en el carrito (solo en el checkout).
   La fila se mantiene porque contiene "Actualizar carrito", que la
   actualizacion automatica necesita, pero no ocupa espacio.
   --------------------------------------------------------------- */

body.woocommerce-cart table.shop_table.cart tr:has(> td.actions),
body.woocommerce-cart table.shop_table.cart td.actions {
	display: block;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden;
}

body.woocommerce-cart table.shop_table.cart td.actions .coupon {
	display: none !important;
}

body.woocommerce-cart .woocommerce-cart-form :is(button, input)[name="update_cart"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.np-seguir {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-size: 14px;
	color: var(--np-c-suave);
	text-decoration: none;
}

.np-seguir:hover {
	color: var(--np-c-marca);
}


/* ---------------------------------------------------------------
   Resumen
   Neve y WooCommerce dan padding a th/td y alto a las filas de la
   tabla de totales; aqui se resetea todo para controlar el ritmo.
   --------------------------------------------------------------- */

body.woocommerce-cart .cart-collaterals .cart_totals {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 24px !important;
	border: 1px solid var(--np-c-borde);
	border-radius: var(--np-radio);
	background: #fff;
}

body.woocommerce-cart .cart-collaterals .cart_totals > h2 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--np-c-marca);
	margin: 0 0 16px !important;
	padding: 0 !important;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tbody {
	display: block !important;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px 12px;
	height: auto !important;
	margin: 0 !important;
	padding: 10px 0 !important;
	border: 0 !important;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th,
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
	display: block !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 15px;
	line-height: 1.4 !important;
	color: var(--np-c-texto);
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th {
	font-weight: 400 !important;
	color: var(--np-c-suave);
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
	flex: 1 1 auto;
	text-align: right !important;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td::before {
	display: none !important;
	content: none !important;
}

body.woocommerce-cart .cart-collaterals .cart_totals tr.order-total {
	margin-top: 6px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--np-c-linea) !important;
}

body.woocommerce-cart .cart-collaterals .cart_totals tr.order-total th {
	font-size: 16px;
	font-weight: 600 !important;
	color: var(--np-c-texto);
}

body.woocommerce-cart .cart-collaterals .cart_totals tr.order-total td strong {
	display: block;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--np-c-marca);
}

body.woocommerce-cart .cart-collaterals .cart_totals tr.order-total td small {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--np-c-suave);
}

body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout {
	display: block !important;
	margin: 0 !important;
	padding: 18px 0 0 !important;
}

body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 17px 20px !important;
	border-radius: 999px !important;
	background: var(--np-c-marca) !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover {
	background: #4a3360 !important;
}

/* ---------------------------------------------------------------
   Barra de pago fija (movil)
   --------------------------------------------------------------- */

.np-cart-barra {
	display: none;
}


/* ---------------------------------------------------------------
   Tablet y movil
   --------------------------------------------------------------- */

@media (max-width: 960px) {

	body.woocommerce-cart .woocommerce:has(.woocommerce-cart-form) {
		grid-template-columns: minmax(0, 1fr);
	}

	body.woocommerce-cart .woocommerce:has(.woocommerce-cart-form) > .cart-collaterals {
		grid-column: 1;
		position: static;
		margin: 24px 0 0 !important;
	}
}

@media (max-width: 767px) {

	.np-cart-titulo {
		font-size: 19px;
	}

	body.woocommerce-cart table.shop_table.cart tr.cart_item {
		grid-template-columns: 72px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name remove"
			"thumb qty  subtotal";
		column-gap: 12px;
		row-gap: 10px;
		padding: 14px;
	}

	body.woocommerce-cart table.shop_table.cart td.product-thumbnail {
		width: 72px !important;
		max-width: 72px !important;
	}

	body.woocommerce-cart table.shop_table.cart td.product-thumbnail > a,
	body.woocommerce-cart table.shop_table.cart td.product-thumbnail > picture {
		width: 72px !important;
		height: 72px !important;
	}

	body.woocommerce-cart table.shop_table.cart td.product-name > a {
		font-size: 14px;
	}

	body.woocommerce-cart table.shop_table.cart td.product-price {
		display: none !important;
	}

	body.woocommerce-cart table.shop_table.cart td.product-subtotal {
		align-self: center;
	}

	body.woocommerce-cart table.shop_table.cart td.product-remove {
		align-self: start;
	}

	/* En movil solo el icono, con area de toque de 32px */
	body.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
		justify-content: center;
		width: 32px;
		height: 32px;
		margin: -6px -6px 0 0;
		padding: 0;
	}

	body.woocommerce-cart table.shop_table.cart td.product-remove a.remove::after {
		content: none;
	}

	body.woocommerce-cart .cart-collaterals .cart_totals {
		padding: 20px !important;
	}

	.np-cart-barra {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid var(--np-c-borde);
		transform: translateY(100%);
		visibility: hidden;
		transition: transform .25s ease, visibility 0s linear .25s;
	}

	.np-cart-barra.es-visible {
		transform: none;
		visibility: visible;
		transition: transform .25s ease, visibility 0s;
	}

	.np-cart-barra__total {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
	}

	.np-cart-barra__total span {
		font-size: 12px;
		color: var(--np-c-suave);
	}

	.np-cart-barra__total strong {
		font-size: 18px;
		font-weight: 700;
		color: var(--np-c-marca);
		white-space: nowrap;
	}

	.np-cart-barra__btn {
		flex: 1 1 auto;
		display: block;
		padding: 13px 16px;
		border-radius: 999px;
		background: var(--np-c-marca);
		color: #fff !important;
		font-size: 15px;
		font-weight: 600;
		text-align: center;
		text-decoration: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.np-cart-barra,
	.np-cart-barra.es-visible {
		transition: none;
	}
}