/* Sharwinn - Checkout en un Paso: cart page (/carrito) restyle.
   Same visual language as the checkout (assets/css/checkout.css) -
   Plus Jakarta Sans, rounded white cards, the accent color, orange for
   discounts, green for the trust panel - but the theme's own header,
   footer and navigation are left untouched: unlike checkout, the cart
   is still a step where a shopper may want to keep browsing. */

body.woocommerce-cart {
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
/* Safety net: if anything on the page (ours, the theme's, or another
   plugin's) ends up wider than the screen, this stops it from pushing
   the whole page into a sideways scroll and cutting content off the
   edge - the only things meant to scroll sideways are the item table
   and the carousels, which opt back in further down. The bottom
   padding leaves room for .sw-mobile-checkout-bar (the fixed "Total /
   Continuar compra" bar, further down this file) so it doesn't sit on
   top of the last product or carousel. */
@media ( max-width: 640px ) {
	body.woocommerce-cart { overflow-x: hidden; max-width: 100vw; padding-bottom: 88px; }
}
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart_totals,
body.woocommerce-cart h1.page-title,
body.woocommerce-cart .cross-sells {
	font-family: inherit;
}

/* Two-column layout: item table + totals side by side. The suggested-
   product carousels (.sw-cart-carousel) render on woocommerce_after_cart,
   outside .woocommerce, so they naturally stack full-width below this
   row on their own - no need to dissolve .cart-collaterals for them. */
body.woocommerce-cart .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 28px;
	max-width: 1040px;
	margin: 0 auto;
}
body.woocommerce-cart .woocommerce-cart-form {
	flex: 1 1 560px;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	order: 1;
}
/* Replaces the theme's own "Carro" page title (class-sw-cart-page.php
   render_cart_heading(), fired inside the items card via
   woocommerce_before_cart_table - the theme's h1.page-title, if any,
   is left alone and simply sits above this). */
body.woocommerce-cart .sw-cart-heading {
	font-size: 22px;
	font-weight: 800;
	color: #18181b;
	margin: 0 0 16px;
}
body.woocommerce-cart .cart_totals {
	flex: 0 0 360px;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	order: 2;
}

@media ( max-width: 780px ) {
	body.woocommerce-cart .woocommerce { gap: 20px; padding: 0 16px; overflow-x: hidden; }
	/* flex-shrink was 0 in the two-column rule above (so the totals
	   card wouldn't get squeezed next to the item table on desktop) -
	   stacked full-width on a phone, that same flex-shrink:0 let long,
	   unbreakable content (a shipping method's price/name) force this
	   card wider than the screen and push the whole page into a
	   horizontal scroll. flex:1 1 100% makes it shrink like a normal
	   block again. */
	body.woocommerce-cart .woocommerce-cart-form,
	body.woocommerce-cart .cart_totals { flex: 1 1 100%; }
}

/* Cart items card */
body.woocommerce-cart .woocommerce-cart-form {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .04 ), 0 16px 32px -16px rgba( 0, 0, 0, .14 );
	padding: 20px 22px;
}
body.woocommerce-cart table.cart {
	width: 100%;
	border-collapse: collapse;
}
body.woocommerce-cart table.cart thead th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #a1a1aa;
	text-align: left;
	padding: 0 0 10px;
	border-bottom: 1px solid #f0f0f0;
}
body.woocommerce-cart table.cart thead th.product-remove,
body.woocommerce-cart table.cart thead th.product-thumbnail { visibility: hidden; }
body.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td {
	padding: 16px 8px;
	border-bottom: 1px solid #f6f6f7;
	font-size: 14px;
	color: #3f3f46;
	vertical-align: middle;
}
body.woocommerce-cart table.cart td.product-thumbnail img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid #f0f0f0;
}
/* Product name: no SKU line, just the name - overflow-wrap:anywhere
   lets the browser's table layout treat it as breakable, so a long
   name wraps onto its own lines instead of stretching the column and
   pushing the price/quantity columns off to the side. */
body.woocommerce-cart table.cart td.product-name a {
	display: inline-block;
	max-width: 100%;
	font-weight: 700;
	color: #18181b;
	text-decoration: none;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}
body.woocommerce-cart table.cart td.product-name a:hover { color: var( --sw-accent, #111827 ); }
/* Sale price in the item row: struck-through regular price + active
   price + a small "-X%" badge, only added when the product is on sale
   (class-sw-cart-page.php filter_item_price()). */
body.woocommerce-cart .sw-cart-price {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}
body.woocommerce-cart .sw-cart-price del {
	font-size: 12px;
	font-weight: 600;
	color: #a1a1aa;
	text-decoration: line-through;
}
body.woocommerce-cart .sw-cart-price ins {
	font-size: 14px;
	font-weight: 700;
	color: #18181b;
	text-decoration: none;
}
body.woocommerce-cart .sw-cart-discount-badge {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 800;
	color: #fff;
	background: #FF6A00;
	border-radius: 6px;
	padding: 2px 6px;
	white-space: nowrap;
}
body.woocommerce-cart table.cart td.product-price,
body.woocommerce-cart table.cart td.product-subtotal { font-weight: 600; color: #18181b; white-space: nowrap; }
body.woocommerce-cart table.cart td.product-remove { text-align: center; }
body.woocommerce-cart table.cart td.product-remove a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #f4f4f5 !important;
	color: #71717a !important;
	font-size: 16px;
	line-height: 1 !important;
}
body.woocommerce-cart table.cart td.product-remove a.remove:hover {
	background: #fee2e2 !important;
	color: #dc2626 !important;
}

/* Tags junto al nombre del producto (class-sw-cart-page.php
   append_item_tags()): "Envío hoy" en todos los productos, más una de
   "Últimas unidades" / "Nuevo ingreso" / "Precio remate" rotando por
   producto - ver el comentario en PHP. Visibles en las 3 pantallas
   (teléfono, tablet y PC), no solo en la tarjeta de teléfono. */
body.woocommerce-cart .sw-cart-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 4px 0 0;
}
body.woocommerce-cart .sw-cart-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 6px;
	white-space: nowrap;
}
/* "Etiqueta fija" (WooCommerce → Ajustes → Checkout Sharwinn), siempre
   verde. Las "etiquetas variables" son texto libre configurado ahí
   mismo, así que en vez de un color por texto (no podemos saber qué
   vas a escribir), rotan entre 5 colores según su posición en la
   lista - agregar/editar líneas ahí no requiere tocar este CSS. */
body.woocommerce-cart .sw-tag-fixed { color: #166534; background: #dcfce7; }
body.woocommerce-cart .sw-tag-color-1 { color: #9a3412; background: #ffedd5; }
body.woocommerce-cart .sw-tag-color-2 { color: #1d4ed8; background: #dbeafe; }
body.woocommerce-cart .sw-tag-color-3 { color: #fff; background: #FF6A00; }
body.woocommerce-cart .sw-tag-color-4 { color: #6d28d9; background: #ede9fe; }
body.woocommerce-cart .sw-tag-color-5 { color: #be123c; background: #ffe4e6; }

/* Phone layout: bajo 640px cada producto pasa de ser una fila de
   tabla a ser su propia tarjeta - miniatura a la izquierda, nombre +
   tags + precio + cantidad apilados a la derecha, "quitar" fijo en
   la esquina superior derecha - para acercarse a la referencia que
   pidió la tienda (el carrito de Falabella). El subtotal por línea se
   quita de la tarjeta (igual que en esa referencia); el total ya se
   ve en la barra fija de abajo (.sw-mobile-checkout-bar).

   Dos intentos anteriores de esto mismo se rompieron contra el tema
   de esta tienda (Kadence), que le pone su propio CSS "responsive" a
   esta misma tabla (<table class="shop_table cart">): una etiqueta
   flotante a la izquierda + el valor a la derecha, generada con
   ::before a partir del atributo data-title de cada <td>, peleándose
   con cualquier layout puesto encima. Esta vez el ::before se anula
   primero que cualquier otra cosa, y cada regla que compite con ese
   CSS lleva !important. */
@media ( max-width: 640px ) {
	body.woocommerce-cart .woocommerce-cart-form { padding: 16px 14px; box-sizing: border-box; overflow-x: hidden; }
	body.woocommerce-cart .sw-cart-heading { font-size: 19px; }

	body.woocommerce-cart table.cart,
	body.woocommerce-cart table.cart tbody { display: block !important; width: 100% !important; }
	body.woocommerce-cart table.cart thead { display: none !important; }
	body.woocommerce-cart table.cart td::before,
	body.woocommerce-cart table.cart td::after { content: none !important; }
	body.woocommerce-cart table.cart td { float: none !important; text-align: left !important; }

	/* La fila de cada producto se vuelve la tarjeta - position:relative
	   es lo que permite fijar "quitar" en la esquina (más abajo). Las
	   demás filas (la de cupón/actualizar carrito) se quedan como
	   bloque simple, sin la tarjeta. */
	body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item {
		display: grid !important;
		grid-template-columns: 72px 1fr;
		grid-template-areas: "thumb name" "thumb price" "thumb qty";
		column-gap: 12px;
		row-gap: 6px;
		position: relative;
		background: #fff;
		border: 1.5px solid #f0f0f0;
		border-radius: 14px;
		padding: 14px;
		margin-bottom: 12px;
		box-sizing: border-box;
	}
	body.woocommerce-cart table.cart tr:not( .woocommerce-cart-form__cart-item ) { display: block !important; }
	body.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td {
		display: block !important;
		padding: 0 !important;
		border-bottom: none !important;
		font-size: 13px;
	}
	body.woocommerce-cart table.cart td.product-thumbnail { grid-area: thumb; }
	body.woocommerce-cart table.cart td.product-thumbnail img { width: 72px; height: 72px; }
	body.woocommerce-cart table.cart td.product-name { grid-area: name; }
	body.woocommerce-cart table.cart td.product-name a {
		font-size: 13.5px;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
	}
	body.woocommerce-cart table.cart td.product-price {
		grid-area: price;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
	}
	body.woocommerce-cart table.cart td.product-price .sw-cart-price { justify-content: flex-start; }
	body.woocommerce-cart table.cart td.product-quantity { grid-area: qty; }
	body.woocommerce-cart table.cart td.product-subtotal { display: none !important; }
	body.woocommerce-cart table.cart td.product-remove { position: absolute; top: 10px; right: 10px; }
	body.woocommerce-cart table.cart td.product-remove a.remove { width: 24px; height: 24px; font-size: 14px; }

	/* Coupon field full-width above its button; "Actualizar carrito"
	   full-width below the table, easier to tap than a small button. */
	body.woocommerce-cart .coupon input#coupon_code { flex: 1 1 100%; width: auto; }
	body.woocommerce-cart .coupon button[name="apply_coupon"] { flex: 1 1 100%; }
	body.woocommerce-cart table.cart button[name="update_cart"] { width: 100%; }
}

@media ( max-width: 400px ) {
	body.woocommerce-cart .cart_totals { padding: 16px; }
}

/* Quantity stepper (−/qty/+), built by assets/js/cart.js around
   WooCommerce's own <input class="qty">, which keeps its original
   name/min/max/step attributes untouched. Dark circular buttons with
   the number sitting free between them, matching the reference. */
body.woocommerce-cart .quantity {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: none;
	width: fit-content;
}
body.woocommerce-cart .quantity input.qty {
	width: 22px;
	border: none !important;
	background: transparent !important;
	text-align: center;
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	color: #18181b;
	padding: 0 !important;
	-moz-appearance: textfield;
}
body.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button,
body.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
body.woocommerce-cart .sw-qty-btn {
	border: none;
	background: #18181b;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 50%;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
body.woocommerce-cart .sw-qty-btn:hover { background: var( --sw-accent, #111827 ); }

/* Actions row: coupon field + "Actualizar carrito" */
body.woocommerce-cart table.cart tr td.actions { padding-top: 18px; border-bottom: none; }
body.woocommerce-cart .coupon {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
body.woocommerce-cart .coupon label { display: none; }
body.woocommerce-cart .coupon input#coupon_code {
	border: 1.5px solid #e4e4e7 !important;
	border-radius: 10px !important;
	padding: 12px 13px !important;
	font-family: inherit;
	font-size: 14px;
	line-height: normal !important;
	box-sizing: border-box;
	width: 200px;
	max-width: 100%;
	box-shadow: none !important;
}
/* display:inline-flex + line-height:normal on both buttons: this
   shop's theme (Kadence) sets its own line-height/padding on buttons
   that was leaving the label text sitting off-center vertically
   instead of centered in the button's box. */
body.woocommerce-cart .coupon button[name="apply_coupon"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 12px 18px !important;
	background: #e4e4e7 !important;
	color: #18181b !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: normal !important;
	box-sizing: border-box;
	box-shadow: none !important;
}
body.woocommerce-cart table.cart button[name="update_cart"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1.5px solid #e4e4e7 !important;
	border-radius: 10px !important;
	padding: 11px 18px !important;
	background: #fff !important;
	color: #3f3f46 !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: normal !important;
	box-sizing: border-box;
	box-shadow: none !important;
}

/* Cart totals card */
body.woocommerce-cart .cart_totals {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .04 ), 0 16px 32px -16px rgba( 0, 0, 0, .14 );
	padding: 24px 22px;
	box-sizing: border-box;
}
/* WooCommerce's own heading + totals table (subtotal/discount/order
   total rows) are replaced by .sw-cart-summary below, so they're
   hidden here rather than removed - the shipping-method row/list and
   any tax rows stay untouched and visible, same "hide with CSS, keep
   the real functional markup working" pattern used on checkout.
   !important because this shop's theme (Kadence) styles that same
   heading and those same rows, and without it the theme's rule can
   win the tie and make WooCommerce's own "Cart totals" heading (shown
   translated, e.g. "Resumen del carrito") reappear above ours.

   The shipping-method row/list used to stay visible here (it's part
   of this same table.shop_table) - now hidden along with the rest:
   shipping is chosen at Checkout, not in the cart, so nothing about
   it belongs on this page any more. */
body.woocommerce-cart .cart_totals > h2 { display: none !important; }
body.woocommerce-cart .cart_totals table.shop_table { display: none !important; }
body.woocommerce-cart .cart_totals table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 14px;
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
	padding: 9px 0;
	font-size: 13.5px;
	color: #3f3f46;
	border: none;
	font-weight: 600;
	text-align: right;
}
body.woocommerce-cart .cart_totals table.shop_table th { text-align: left; }

/* "Resumen de la orden" card (class-sw-cart-page.php render_order_summary()) */
body.woocommerce-cart .sw-cart-summary { margin-bottom: 16px; }
body.woocommerce-cart .sw-cart-summary h2 {
	font-size: 16px;
	font-weight: 800;
	color: #18181b;
	margin: 0 0 14px;
}
body.woocommerce-cart .sw-cart-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	font-size: 13.5px;
	font-weight: 600;
	color: #3f3f46;
}
body.woocommerce-cart .sw-cart-summary-discount { color: #FF6A00; font-weight: 700; }
body.woocommerce-cart .sw-cart-summary-coupon-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0 8px 12px;
	font-size: 12px;
	font-weight: 600;
	color: #FF6A00;
}
body.woocommerce-cart .sw-cart-summary-coupon-row .woocommerce-remove-coupon {
	margin-left: 8px;
	color: #a1a1aa;
	font-size: 11px;
	text-decoration: underline;
}
body.woocommerce-cart .sw-cart-summary-total {
	border-top: 1.5px solid #18181b;
	margin-top: 6px;
	padding-top: 14px;
	font-size: 17px;
	font-weight: 800;
	color: #18181b;
}
/* La lista de métodos de envío (ul#shipping_method) que antes se
   estilaba aquí ya no se muestra en el carrito - vive dentro de
   table.shop_table, oculta más arriba - así que ese CSS se quitó.
   Las clases sw-ship-icon/sw-ship-badge/sw-ship-note las sigue usando
   el Checkout (mismo texto de envío, otro contexto) - su estilo para
   esa página vive en checkout.css, no aquí. */

/* "Proceder al pago" button */
body.woocommerce-cart .wc-proceed-to-checkout { margin-bottom: 4px; }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	background: var( --sw-accent, #111827 ) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 12px !important;
	padding: 16px !important;
	font-family: inherit !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

/* Barra fija "Total / Continuar compra" en teléfono
   (class-sw-cart-page.php render_mobile_checkout_bar()), estilo
   Falabella: reemplaza a toda la tarjeta "Resumen de la orden" en
   ese tamaño de pantalla (se oculta abajo) para que el cliente no
   tenga que bajar hasta el final para pagar. En tablet/PC no se
   pidió este cambio, así que ahí se queda la tarjeta de siempre y
   esta barra permanece oculta. */
body.woocommerce-cart .sw-mobile-checkout-bar { display: none; }
@media ( max-width: 640px ) {
	body.woocommerce-cart .cart_totals { display: none !important; }
	body.woocommerce-cart .sw-mobile-checkout-bar {
		display: flex;
		flex-direction: column;
		gap: 8px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		background: #fff;
		box-shadow: 0 -4px 16px rgba( 0, 0, 0, .1 );
		padding: 10px 16px calc( 10px + env( safe-area-inset-bottom, 0px ) );
		box-sizing: border-box;
	}
	body.woocommerce-cart .sw-mobile-checkout-bar-totals { display: flex; flex-direction: column; gap: 2px; }
	body.woocommerce-cart .sw-mobile-checkout-bar-row {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		font-size: 12.5px;
		font-weight: 600;
		color: #71717a;
	}
	body.woocommerce-cart .sw-mobile-checkout-bar-discount {
		font-size: 16px;
		font-weight: 800;
		color: #18181b;
	}
	body.woocommerce-cart .sw-mobile-checkout-bar-btn {
		display: block;
		width: 100%;
		text-align: center;
		background: var( --sw-accent, #111827 ) !important;
		color: #fff !important;
		border: none !important;
		border-radius: 12px !important;
		padding: 14px !important;
		font-family: inherit !important;
		font-size: 15px !important;
		font-weight: 700 !important;
		text-decoration: none !important;
		box-sizing: border-box;
	}
}

/* Suggested-product carousels (class-sw-cart-page.php
   render_suggested_products()), fired on woocommerce_after_cart - full
   width, stacked below the items/summary row. WooCommerce's own
   default cross-sells block is unhooked in PHP (same data, would
   otherwise show twice), so .cross-sells never renders here.

   Sizing is deliberately NOT one base rule with small mobile
   "patches" layered on top - each of the three device tiers below
   (PC / Tablet / Teléfono, in their own non-overlapping @media
   blocks further down) sets its own card width, gaps, and font sizes
   in full, so nothing is inherited across tiers and a fix on one
   screen size can't quietly change another. Shape/color/behaviour
   that doesn't depend on screen size (radius, borders, colors,
   scroll-snap) stays here, shared by all three. */
body.woocommerce-cart .sw-cart-carousel {
	max-width: 1040px;
	width: 100%;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .04 ), 0 16px 32px -16px rgba( 0, 0, 0, .14 );
	box-sizing: border-box;
	/* Salvavidas: pase lo que pase adentro (una tarjeta con un tamaño
	   mal calculado, una imagen muy grande, etc.), esta caja nunca debe
	   poder empujar el ancho de toda la página - se recorta aquí, no
	   se "estira" hacia afuera. */
	overflow: hidden;
}
body.woocommerce-cart .sw-cart-carousel h2 {
	font-weight: 800;
	color: #18181b;
}
body.woocommerce-cart .sw-carousel-wrap {
	display: flex;
	align-items: center;
}
body.woocommerce-cart .sw-carousel-arrow {
	flex: none;
	border-radius: 50%;
	border: 1.5px solid #e4e4e7;
	background: #fff;
	color: #3f3f46;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
body.woocommerce-cart .sw-carousel-arrow:hover { background: #f4f4f5; }
body.woocommerce-cart .sw-carousel-track {
	flex: 1 1 auto;
	/* min-width:0 es necesario aquí: sin esto, un carrusel flex puede
	   negarse a encogerse por debajo del ancho que "quieren" sus
	   tarjetas sin recortar, y esa resistencia se transmite hacia
	   afuera (la caja del carrusel, y hasta la página) en vez de
	   quedarse contenida con scroll horizontal interno. */
	min-width: 0;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	padding: 2px;
}
body.woocommerce-cart .sw-carousel-track::-webkit-scrollbar { height: 6px; }
body.woocommerce-cart .sw-carousel-track::-webkit-scrollbar-thumb { background: #e4e4e7; border-radius: 6px; }
body.woocommerce-cart .sw-carousel-card {
	min-width: 0;
	box-sizing: border-box;
	scroll-snap-align: start;
	border: 1.5px solid #f0f0f0;
	border-radius: 14px;
	text-align: left;
}
body.woocommerce-cart .sw-carousel-card-link { display: block; text-decoration: none; }
body.woocommerce-cart .sw-carousel-card-img {
	position: relative;
	display: block;
	margin-bottom: 8px;
}
body.woocommerce-cart .sw-carousel-card-img img {
	border-radius: 10px;
	width: 100%;
	height: auto;
	display: block;
}
body.woocommerce-cart .sw-carousel-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	font-weight: 800;
	color: #fff;
	background: #FF6A00;
	border-radius: 6px;
	padding: 2px 6px;
}
body.woocommerce-cart .sw-carousel-card-name {
	display: block;
	font-weight: 700;
	color: #18181b;
	margin: 0 0 4px;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
}
body.woocommerce-cart .sw-carousel-card-price {
	display: block;
	font-weight: 700;
	color: var( --sw-accent, #111827 );
}
body.woocommerce-cart .sw-carousel-card-price del {
	color: #a1a1aa;
	font-weight: 600;
	text-decoration: line-through;
	margin-right: 4px;
}
body.woocommerce-cart .sw-carousel-card-price ins { text-decoration: none; }
/* !important throughout: this shop's theme (Kadence) styles its own
   buttons/links with flex layout and left-aligned text by default,
   which was overriding our centering and leaving "Ver producto"
   looking off-center inside the card. */
body.woocommerce-cart .sw-carousel-card-btn {
	display: block !important;
	text-align: center !important;
	justify-content: center !important;
	border: 1.5px solid #e4e4e7;
	border-radius: 8px;
	background: #fff;
	color: #18181b;
	font-family: inherit;
	font-weight: 700;
	text-decoration: none;
	width: 100%;
	box-sizing: border-box;
}
body.woocommerce-cart .sw-carousel-card-btn:hover { background: #f4f4f5; }

/* PC - screens 993px and wider. */
@media ( min-width: 993px ) {
	body.woocommerce-cart .sw-cart-carousel { margin: 28px auto 0; padding: 22px; }
	body.woocommerce-cart .sw-cart-carousel h2 { font-size: 16px; margin: 0 0 16px; }
	body.woocommerce-cart .sw-carousel-wrap { gap: 8px; }
	body.woocommerce-cart .sw-carousel-arrow { width: 32px; height: 32px; font-size: 18px; }
	body.woocommerce-cart .sw-carousel-track { gap: 14px; }
	/* 150px es solo un respaldo para el primer instante, antes de que
	   cargue cart.js. En cuanto carga, JS mide el ancho real disponible
	   y fija el ancho exacto de cada tarjeta en píxeles (ver cart.js,
	   sizeCarousels) para que quepan exactamente 6 en PC - un cálculo
	   en JS es más confiable aquí que un calc() en CSS, que algunos
	   plugins de caché/optimización pueden corromper al minificar. */
	body.woocommerce-cart .sw-carousel-card { flex: 0 0 150px; padding: 12px; }
	body.woocommerce-cart .sw-carousel-badge { font-size: 10.5px; }
	body.woocommerce-cart .sw-carousel-card-name,
	body.woocommerce-cart .sw-carousel-card-price { font-size: 12.5px; }
	body.woocommerce-cart .sw-carousel-card-btn { font-size: 12px; padding: 7px !important; margin-top: 8px; }
}

/* Tablet - 641px to 992px. */
@media ( min-width: 641px ) and ( max-width: 992px ) {
	body.woocommerce-cart .sw-cart-carousel { margin: 24px auto 0; padding: 20px; }
	body.woocommerce-cart .sw-cart-carousel h2 { font-size: 15px; margin: 0 0 14px; }
	body.woocommerce-cart .sw-carousel-wrap { gap: 8px; }
	body.woocommerce-cart .sw-carousel-arrow { width: 30px; height: 30px; font-size: 17px; }
	body.woocommerce-cart .sw-carousel-track { gap: 12px; }
	/* 138px = respaldo inicial; JS ajusta el ancho exacto para que
	   quepan 4 tarjetas en tablet (ver cart.js, sizeCarousels). */
	body.woocommerce-cart .sw-carousel-card { flex: 0 0 138px; padding: 11px; }
	body.woocommerce-cart .sw-carousel-badge { font-size: 10px; }
	body.woocommerce-cart .sw-carousel-card-name,
	body.woocommerce-cart .sw-carousel-card-price { font-size: 12px; }
	body.woocommerce-cart .sw-carousel-card-btn { font-size: 11.5px; padding: 7px !important; margin-top: 7px; }
}

/* Teléfono - up to 640px. Los carruseles se ocultan por completo en
   este tamaño de pantalla: el ancho de tarjeta seguía sin verse bien
   en teléfono real pese a los dos intentos anteriores, y la tienda
   pidió directamente no mostrarlos ahí en vez de seguir ajustando -
   en tablet y PC siguen igual que antes. */
@media ( max-width: 640px ) {
	body.woocommerce-cart .sw-cart-carousel { display: none !important; }
}