/**
 * Cart page. Items column sits at the reading-start side in both
 * directions (matches the reference in RTL, and the common LTR
 * convention too) since it's simply column 1 in DOM order — no `order`
 * override needed, unlike the shop sidebar.
 */

.cart-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: var(--space-7);
	align-items: start;
}

/* ---- Item list ---- */
.cart-items-list { display: flex; flex-direction: column; }

.cart-items-list__header {
	display: none;
}

.cart-item {
	display: grid;
	grid-template-columns: 72px 1fr auto auto auto auto;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-5);
	border-block-end: 1px solid var(--color-border);
}
.cart-item:first-child { padding-block-start: 0; }

.cart-item__image {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface);
	flex-shrink: 0;
}
.cart-item__image img { width: 100%; height: 100%; object-fit: contain; }

.cart-item__title {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
}
.cart-item__title a { color: var(--color-text); }
.cart-item__title a:hover { color: var(--color-accent-strong); }

.cart-item__info .woocommerce-Price-amount { font-weight: var(--font-weight-medium); }

/* Variation meta (WooCommerce's own <dl> from wc_get_formatted_cart_item_data) */
.cart-item__info dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	margin-block-start: var(--space-1);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}
.cart-item__info dl.variation dt { font-weight: var(--font-weight-medium); }
.cart-item__info dl.variation dt::after { content: ":"; }
.cart-item__info dl.variation dd { margin: 0; }
.cart-item__info dl.variation p:last-child { margin: 0; }
.backorder_notification { font-size: var(--text-xs); color: var(--color-warning); margin-block-start: var(--space-1); }

.cart-item__label {
	display: none;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-inline-end: var(--space-2);
}

.cart-item__price { font-size: var(--text-sm); white-space: nowrap; }
.cart-item__price--mobile { display: none; margin-block-start: var(--space-2); }

.cart-item__quantity .quantity { margin: 0; }

.cart-item__subtotal {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
	color: var(--color-accent-strong);
	white-space: nowrap;
}

.cart-item__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
}
.cart-item__remove svg { width: 16px; height: 16px; }
.cart-item__remove:hover { background: var(--color-error-tint); color: var(--color-error); }

/* ---- Actions row (continue shopping / update cart) ---- */
.cart-layout__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-block-start: var(--space-6);
	flex-wrap: wrap;
}
.cart-continue-shopping {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
	color: var(--color-text);
}
.cart-continue-shopping:hover { color: var(--color-accent-strong); }
.cart-continue-shopping svg { width: 16px; height: 16px; transform: rotate(180deg); }
html[dir="rtl"] .cart-continue-shopping svg { transform: none; }

/* ---- Totals card ---- */
.cart-collaterals { position: sticky; top: calc(84px + var(--space-5)); }
.cart_totals {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}
.cart_totals h2 { font-size: var(--text-lg); margin-block-end: var(--space-5); }

.cart_totals table.shop_table {
	width: 100%;
	border-collapse: collapse;
}
.cart_totals table.shop_table tr { border-block-end: 1px solid var(--color-border); }
.cart_totals table.shop_table tr:last-child { border-block-end: none; }
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding-block: var(--space-3);
	text-align: start;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-regular);
	vertical-align: top;
}
.cart_totals table.shop_table td { text-align: end; }
.cart_totals tr.order-total th,
.cart_totals tr.order-total td {
	font-size: var(--text-lg);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	border-block-start: 1px solid var(--color-border);
	padding-block-start: var(--space-4);
}
.cart_totals tr.order-total td { color: var(--color-accent-strong); }
.cart_totals tr.cart-discount td { color: var(--color-success); }

/* Coupon disclosure (relocated via woocommerce_cart_totals_before_order_total) */
.cart-coupon-row td { padding-block: var(--space-3); }
.cart-coupon .coupon {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.cart-coupon .coupon input[type="text"] {
	flex: 1;
	min-width: 140px;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
}
.woocommerce-remove-coupon {
	font-size: var(--text-xs);
	color: var(--color-error);
	text-decoration: underline;
	margin-inline-start: var(--space-2);
}

/* Shipping methods */
.woocommerce-shipping-methods { list-style: none; padding: 0; margin: 0 0 var(--space-2); }
.woocommerce-shipping-methods li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.woocommerce-shipping-destination { font-size: var(--text-xs); color: var(--color-text-muted); }
.shipping-calculator-form { margin-block-start: var(--space-3); }
.shipping-calculator-button { font-size: var(--text-xs); color: var(--color-text-muted); text-decoration: underline; }

/* Checkout CTA */
.wc-proceed-to-checkout { margin-block-start: var(--space-5); }
.checkout-button.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-md);
	background: var(--color-accent);
	color: var(--color-text-on-accent);
	font-size: var(--text-base);
	font-weight: var(--font-weight-bold);
	text-align: center;
}
.checkout-button.button:hover { background: var(--color-accent-strong); }

/* Cross-sells (shown above totals when items are removed/on some carts) */
.cart-collaterals .cross-sells { margin-block-end: var(--space-6); }
.cart-collaterals .cross-sells > h2 { font-size: var(--text-md); margin-block-end: var(--space-4); }
.cart-collaterals .cross-sells ul.products { grid-template-columns: 1fr; gap: var(--space-4); }

/* ---- Empty cart ---- */
.cart-empty {
	text-align: center;
	padding: var(--space-8) var(--space-5);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
}
.cart-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-background);
	color: var(--color-text-muted);
	margin-block-end: var(--space-4);
}
.cart-empty__icon svg { width: 30px; height: 30px; }
.cart-empty h2 { margin-block-end: var(--space-2); }
.cart-empty p { color: var(--color-text-muted); margin-block-end: var(--space-5); }

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 991px) {
	.cart-layout { grid-template-columns: 1fr; }
	.cart-collaterals { position: static; }
}

@media (max-width: 576px) {
	/* Flexbox + wrap rather than grid-template-areas: the remove button and
	   image are direct children, but quantity/subtotal need to align under
	   the info column while the mobile price lives *inside* .cart-item__info
	   — grid-area can't target a grandchild, so flex-wrap sidesteps that. */
	.cart-item {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--space-3);
		position: relative;
		padding-inline-end: var(--space-7);
	}
	.cart-item__image { width: 56px; height: 56px; }
	.cart-item__info { flex: 1; min-width: 0; }
	.cart-item__price--desktop { display: none; }
	.cart-item__price--mobile { display: block; }
	.cart-item__remove {
		position: absolute;
		top: var(--space-5);
		inset-inline-end: 0;
	}
	.cart-item__quantity,
	.cart-item__subtotal {
		flex-basis: 100%;
		margin-inline-start: calc(56px + var(--space-3));
		width: calc(100% - 56px - var(--space-3));
	}
	.cart-item__subtotal { margin-block-start: var(--space-2); font-size: var(--text-md); }
	.cart-item__label { display: inline; }

	.cart-layout__actions { flex-direction: column; align-items: stretch; }
	.cart-layout__actions .btn { width: 100%; }
	.cart-continue-shopping { justify-content: center; order: 2; }
}