/* Cart page (image16): "Tu Carrito" header, 2-column layout with product
 * cards (stepper, badges, remove), order summary sidebar with shipping bar,
 * trust badges, and cross-sells section (image17). */

/* ── Cart header ─────────────────────────────────────────────────────────── */

.listiko-cart-header {
	text-align: center;
	margin-bottom: var(--listiko-space-5);
}

.listiko-cart-header__title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--listiko-color-text);
	margin: 0;
}

.listiko-cart-header__title em {
	color: var(--listiko-color-accent);
	font-style: italic;
}

.listiko-cart-header__count {
	margin: var(--listiko-space-1) 0 0;
	color: var(--listiko-color-text-muted);
	font-size: 0.875rem;
}

/* ── 2-column layout ─────────────────────────────────────────────────────── */

.listiko-cart-layout {
	display: grid;
	gap: var(--listiko-space-5);
}

@media (min-width: 768px) {
	.listiko-cart-layout {
		grid-template-columns: 1fr 340px;
	}
}

/* ── Products column ─────────────────────────────────────────────────────── */

.listiko-cart-products__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--listiko-space-3);
}

.listiko-cart-products__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--listiko-color-text);
	margin: 0;
}

.listiko-cart-products__empty {
	display: inline-flex;
	align-items: center;
	gap: var(--listiko-space-1);
	font-size: 0.8125rem;
	color: var(--listiko-color-text-muted);
	text-decoration: none;
	cursor: pointer;
}

.listiko-cart-products__empty .icon {
	width: 0.875rem;
	height: 0.875rem;
}

.listiko-cart-products__empty:hover {
	color: var(--listiko-color-accent);
}

/* ── Cart item cards ─────────────────────────────────────────────────────── */

.listiko-cart-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--listiko-space-3);
}

.listiko-cart-item {
	display: grid;
	grid-template-columns: 4.5rem 1fr auto auto auto;
	gap: var(--listiko-space-3);
	align-items: center;
	padding: var(--listiko-space-3);
	border: 1px solid var(--listiko-color-border);
	border-radius: var(--listiko-radius-md);
	background-color: var(--listiko-color-surface);
}

@media (max-width: 767px) {
	.listiko-cart-item {
		grid-template-columns: 3.5rem 1fr auto;
		grid-template-rows: auto auto;
	}

	.listiko-cart-item__qty {
		grid-column: 1 / 3;
		grid-row: 2;
	}

	.listiko-cart-item__subtotal {
		grid-column: 3;
		grid-row: 1 / 3;
	}

	.listiko-cart-item__remove {
		position: absolute;
		top: var(--listiko-space-2);
		right: var(--listiko-space-2);
	}

	.listiko-cart-item {
		position: relative;
	}
}

.listiko-cart-item__thumb {
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--listiko-radius-sm);
}

.listiko-cart-item__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.listiko-cart-item__info {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.listiko-cart-item__name {
	font-weight: 600;
	font-size: 0.9375rem;
}

.listiko-cart-item__name a {
	color: var(--listiko-color-text);
	text-decoration: none;
}

.listiko-cart-item__meta {
	font-size: 0.75rem;
	color: var(--listiko-color-text-muted);
}

.listiko-cart-item__badges {
	display: flex;
	gap: var(--listiko-space-1);
	flex-wrap: wrap;
	margin-top: var(--listiko-space-1);
}

.listiko-cart-item__badge {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border-radius: var(--listiko-radius-pill);
	background-color: var(--listiko-color-accent);
	color: var(--listiko-color-accent-contrast);
	font-size: 0.625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* ── Stepper ─────────────────────────────────────────────────────────────── */

.listiko-cart-item__qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--listiko-color-border);
	border-radius: var(--listiko-radius-sm);
	overflow: hidden;
}

.listiko-cart-item__step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: none;
	background: none;
	color: var(--listiko-color-text);
	font-size: 1rem;
	cursor: pointer;
}

.listiko-cart-item__step:hover {
	background-color: var(--listiko-color-border);
}

.listiko-cart-item__qty .qty {
	width: 2rem;
	height: 2rem;
	border: none;
	border-left: 1px solid var(--listiko-color-border);
	border-right: 1px solid var(--listiko-color-border);
	background: none;
	color: var(--listiko-color-text);
	text-align: center;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: inherit;
	-moz-appearance: textfield;
}

.listiko-cart-item__qty .qty::-webkit-inner-spin-button,
.listiko-cart-item__qty .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ── Subtotal & remove ───────────────────────────────────────────────────── */

.listiko-cart-item__subtotal {
	text-align: right;
	font-weight: 700;
	font-size: 0.9375rem;
	white-space: nowrap;
}

.listiko-cart-item__unit-price {
	display: block;
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--listiko-color-text-muted);
}

.listiko-cart-item__remove .remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--listiko-color-text-muted);
	font-size: 1.125rem;
	text-decoration: none;
}

.listiko-cart-item__remove .remove:hover {
	color: var(--listiko-color-accent);
}

/* ── Cart actions (coupon + update) ──────────────────────────────────────── */

.listiko-cart-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--listiko-space-3);
	align-items: center;
	margin-top: var(--listiko-space-4);
}

.listiko-cart-coupon {
	display: flex;
	flex: 1 1 auto;
	gap: var(--listiko-space-2);
}

.listiko-cart-coupon .input-text {
	flex: 1 1 auto;
	padding: var(--listiko-space-2) var(--listiko-space-3);
	border: 1px solid var(--listiko-color-border);
	border-radius: var(--listiko-radius-md);
	background-color: var(--listiko-color-surface);
	color: var(--listiko-color-text);
	font-family: inherit;
	font-size: 0.875rem;
}

.listiko-cart-coupon .input-text::placeholder {
	color: var(--listiko-color-text-muted);
}

.listiko-cart-coupon .button {
	padding: var(--listiko-space-2) var(--listiko-space-4);
	border: none;
	border-radius: var(--listiko-radius-pill);
	background-color: var(--listiko-color-accent);
	color: var(--listiko-color-accent-contrast);
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}

.listiko-cart-update {
	display: none;
}

/* ── Order summary sidebar ───────────────────────────────────────────────── */

.listiko-cart-summary {
	padding: var(--listiko-space-4);
	border: 1px solid var(--listiko-color-border);
	border-radius: var(--listiko-radius-md);
	background-color: var(--listiko-color-surface);
	position: sticky;
	top: var(--listiko-space-3);
}

.listiko-cart-summary__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--listiko-color-text);
	margin: 0 0 var(--listiko-space-3);
	font-style: italic;
}

.listiko-cart-summary__totals {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.listiko-cart-summary__totals th,
.listiko-cart-summary__totals td {
	padding: var(--listiko-space-2) 0;
	text-align: left;
	color: var(--listiko-color-text);
	font-weight: 400;
}

.listiko-cart-summary__totals th small {
	font-weight: 400;
	color: var(--listiko-color-text-muted);
}

.listiko-cart-summary__totals td {
	text-align: right;
}

.listiko-cart-summary__total-row th,
.listiko-cart-summary__total-row td {
	padding-top: var(--listiko-space-3);
	border-top: 1px solid var(--listiko-color-border);
	font-size: 1.25rem;
	font-weight: 700;
}

.listiko-cart-summary__free {
	display: inline-flex;
	align-items: center;
	gap: var(--listiko-space-1);
	color: var(--listiko-color-accent);
	font-weight: 700;
}

.listiko-cart-summary__truck {
	width: 1rem;
	height: 1rem;
}

/* ── Shipping bar ────────────────────────────────────────────────────────── */

.listiko-cart-summary__shipping-bar {
	margin-top: var(--listiko-space-3);
	padding: var(--listiko-space-3);
	border: 1px solid var(--listiko-color-border);
	border-radius: var(--listiko-radius-sm);
	background-color: var(--listiko-color-bg);
}

.listiko-cart-summary__shipping-text {
	margin: 0 0 var(--listiko-space-2);
	font-size: 0.8125rem;
	color: var(--listiko-color-text);
}

.listiko-cart-summary__shipping-text strong {
	color: var(--listiko-color-accent);
}

.listiko-cart-summary__progress {
	overflow: hidden;
	height: 0.375rem;
	border-radius: var(--listiko-radius-pill);
	background-color: var(--listiko-color-border);
}

.listiko-cart-summary__progress-bar {
	display: block;
	height: 100%;
	border-radius: var(--listiko-radius-pill);
	background-color: var(--listiko-color-accent);
	transition: width var(--listiko-transition-fast);
}

/* ── Free shipping reached: celebratory stars ────────────────────────────── */

.listiko-cart-summary__shipping-bar--free {
	position: relative;
	overflow: hidden;
	border-color: var(--listiko-color-accent);
	background-color: color-mix(in srgb, var(--listiko-color-accent) 12%, var(--listiko-color-bg));
	animation: listiko-shipping-pop 0.4s ease-out both;
}

.listiko-cart-summary__shipping-bar--free .listiko-cart-summary__shipping-text {
	position: relative;
	z-index: 1;
	font-weight: 600;
	color: var(--listiko-color-accent);
}

/* Star field overlay (purely decorative). */
.listiko-cart-stars {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.listiko-cart-stars__star {
	position: absolute;
	width: 0.75rem;
	height: 0.75rem;
	background-color: var(--listiko-color-accent);
	clip-path: polygon(
		50% 0%,
		61% 35%,
		98% 35%,
		68% 57%,
		79% 91%,
		50% 70%,
		21% 91%,
		32% 57%,
		2% 35%,
		39% 35%
	);
	opacity: 0;
	transform: scale(0) rotate(0deg);
	animation: listiko-star-twinkle 1.6s ease-in-out infinite;
}

/* Scatter the stars across the bar with varied size, position and timing. */
.listiko-cart-stars__star:nth-child(1)  { top: 12%; left: 6%;   width: 0.625rem; height: 0.625rem; animation-delay: 0s;    }
.listiko-cart-stars__star:nth-child(2)  { top: 60%; left: 16%;  width: 0.5rem;   height: 0.5rem;   animation-delay: 0.2s;  }
.listiko-cart-stars__star:nth-child(3)  { top: 22%; left: 30%;  width: 0.875rem; height: 0.875rem; animation-delay: 0.45s; }
.listiko-cart-stars__star:nth-child(4)  { top: 70%; left: 44%;  width: 0.5rem;   height: 0.5rem;   animation-delay: 0.65s; }
.listiko-cart-stars__star:nth-child(5)  { top: 14%; left: 58%;  width: 0.625rem; height: 0.625rem; animation-delay: 0.3s;  }
.listiko-cart-stars__star:nth-child(6)  { top: 64%; left: 72%;  width: 0.75rem;  height: 0.75rem;  animation-delay: 0.55s; }
.listiko-cart-stars__star:nth-child(7)  { top: 26%; left: 84%;  width: 0.5rem;   height: 0.5rem;   animation-delay: 0.15s; }
.listiko-cart-stars__star:nth-child(8)  { top: 72%; left: 92%;  width: 0.625rem; height: 0.625rem; animation-delay: 0.4s;  }

@keyframes listiko-star-twinkle {
	0%, 100% {
		opacity: 0;
		transform: scale(0) rotate(-45deg);
	}
	40% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
	70% {
		opacity: 0.6;
		transform: scale(0.85) rotate(20deg);
	}
}

@keyframes listiko-shipping-pop {
	0%   { transform: scale(0.96); }
	60%  { transform: scale(1.02); }
	100% { transform: scale(1); }
}

/* Respect users who prefer reduced motion: show the success state without
   animating the stars or the bar. */
@media (prefers-reduced-motion: reduce) {
	.listiko-cart-summary__shipping-bar--free {
		animation: none;
	}

	.listiko-cart-stars__star {
		opacity: 0.9;
		transform: scale(1) rotate(0deg);
		animation: none;
	}
}

/* ── Checkout button ─────────────────────────────────────────────────────── */

.listiko-cart-summary__checkout {
	margin-top: var(--listiko-space-4);
}

.listiko-cart-summary__checkout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--listiko-space-2);
	width: 100%;
	padding: var(--listiko-space-3);
	border: none;
	border-radius: var(--listiko-radius-pill);
	background-color: var(--listiko-color-accent);
	color: var(--listiko-color-accent-contrast);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.listiko-cart-summary__checkout-btn:hover {
	opacity: 0.9;
	color: var(--listiko-color-accent-contrast);
}

/* ── Trust badges ────────────────────────────────────────────────────────── */

.listiko-cart-summary__trust {
	display: flex;
	justify-content: center;
	gap: var(--listiko-space-4);
	margin-top: var(--listiko-space-3);
}

.listiko-cart-summary__trust-item {
	display: flex;
	align-items: center;
	gap: var(--listiko-space-1);
	margin: 0;
	font-size: 0.75rem;
	color: var(--listiko-color-text-muted);
}

.listiko-cart-summary__trust-item .icon {
	width: 0.875rem;
	height: 0.875rem;
	color: var(--listiko-color-accent);
}

/* ── Mobile: checkout button after cart header ──────────────────────────── */

.cart-mobile-checkout {
	margin-top: var(--listiko-space-3);
}

.cart-mobile-checkout__button {
	display: block;
	width: 100%;
	padding: var(--listiko-space-3);
	border: none;
	border-radius: var(--listiko-radius-pill);
	background-color: var(--listiko-color-accent);
	color: var(--listiko-color-accent-contrast);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

@media (min-width: 768px) {
	.cart-mobile-checkout {
		display: none;
	}
}

/* ── Hide WC's default cart-collaterals (we build our own summary) ──────── */

.cart-collaterals {
	display: none;
}

/* ── Cross-sells (image17) ───────────────────────────────────────────────── */

.cart-cross-sells {
	padding-block: var(--listiko-space-5);
	border-top: 1px solid var(--listiko-color-border);
	margin-top: var(--listiko-space-5);
}

.cart-cross-sells__title {
	margin-bottom: var(--listiko-space-3);
	text-align: center;
}

.cart-cross-sells__highlight {
	color: var(--listiko-color-accent);
	font-style: italic;
}

.cart-cross-sells__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--listiko-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.cart-cross-sells__list {
		grid-template-columns: repeat(4, 1fr);
	}
}