/**
 * OpenLabs — Cart page layout (`[woocommerce_cart]`, body.woocommerce-cart).
 *
 * Owns the STRUCTURE and ARRANGEMENT of the cart surface: the desktop
 * two-column split (items left, sticky summary card right), the item-table
 * row layout, the coupon / update-cart action bar, the responsive stacked
 * mobile table, and the empty-cart state.
 *
 * The shared base (woocommerce.css, enqueued BEFORE this file) already brands
 * buttons, notices, form fields, the table border/radius, monospace violet
 * prices, the `.qty` stepper and the remove button. This file does NOT
 * re-style those — it only positions and spaces things. Enqueued after
 * woocommerce.css, so equal-specificity rules here win the layout.
 *
 * All rules are scoped under `.woocommerce-cart` so nothing leaks.
 */

/* ----------------------- Page width & rhythm ----------------------- */
/* The cart lives inside `.prose-page` (760px). Widen it to the site
   container so the two-column layout has room, and give it breathing room. */
.woocommerce-cart .prose-page {
	max-width: var(--container);
}
.woocommerce-cart .route-content {
	padding-block: 2.5rem 4rem;
}
.woocommerce-cart .prose-page__head {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 1.75rem;
}
.woocommerce-cart .prose-page__title {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
}

/* The WC notices stack above the layout, full width. */
.woocommerce-cart .woocommerce-notices-wrapper {
	display: grid;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

/* --------------------------- Two-column grid ----------------------- */
/* Below 62em: single column (summary stacks under the items).
   The `.woocommerce` wrapper holds: notices, the cart form, then the
   `.cart-collaterals` summary. We promote the form + collaterals onto a
   shared grid at the wide breakpoint. */
.woocommerce-cart .woocommerce {
	display: block;
}

@media (min-width: 62em) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		grid-template-rows: auto auto;
		column-gap: 2rem;
		row-gap: 0;
		align-items: start;
	}
	/* Notices span the full width across the top of the grid. */
	.woocommerce-cart .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	.woocommerce-cart .woocommerce-cart-form {
		grid-column: 1;
		grid-row: 2;
		min-width: 0;
	}
	.woocommerce-cart .cart-collaterals {
		grid-column: 2;
		grid-row: 2;
		min-width: 0;
	}
}

/* ----------------------------- Items card -------------------------- */
.woocommerce-cart .woocommerce-cart-form {
	margin: 0;
	/* reset.css caps EVERY <form> at 400px on desktop; opt this one out so it
	   fills its grid column (otherwise the table + coupon row collapse to 400px). */
	max-width: none;
	width: 100%;
}
/* The table base (border/radius/shadow/bg) comes from woocommerce.css.
   Here we just guarantee it fills its column and rows are roomy. */
.woocommerce-cart table.cart {
	width: 100%;
	margin: 0;
}
.woocommerce-cart table.cart thead th {
	text-align: left;
	white-space: nowrap;
}
.woocommerce-cart table.cart thead th.product-price,
.woocommerce-cart table.cart thead th.product-subtotal {
	text-align: right;
}
.woocommerce-cart table.cart thead th.product-quantity {
	text-align: center;
}

/* Cell layout: comfortable, vertically centred. */
.woocommerce-cart table.cart td {
	vertical-align: middle;
}
.woocommerce-cart table.cart td.product-remove {
	width: 2.75rem;
	padding-right: 0.4rem;
	text-align: center;
}
/* Remove control: clean icon-only Lucide "x" (no circle/box), mask-based so it
   inherits a brand color and turns red on hover. Matches the mini-cart's X.
   wc-cart.css now fully owns this control (base rule was dropped). */
.woocommerce-cart td.product-remove a.remove {
	display: inline-flex;
	width: 18px;
	height: 18px;
	font-size: 0;            /* hide the "×" glyph */
	color: transparent;
	border: 0;
	background: none;        /* no box */
	box-shadow: none;
	border-radius: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	background-color: var(--muted-2);   /* icon color — set AFTER `background:none` */
	transition: background-color .15s ease;
}
.woocommerce-cart td.product-remove a.remove:hover {
	background-color: #d23b6f;
	color: transparent;
}
.woocommerce-cart table.cart td.product-thumbnail {
	width: 80px;
	padding-right: 0.4rem;
}
.woocommerce-cart table.cart td.product-thumbnail a {
	display: block;
}
.woocommerce-cart table.cart td.product-thumbnail img {
	display: block;
	width: 64px;
	height: 64px;
}
.woocommerce-cart table.cart td.product-name {
	line-height: 1.4;
}
.woocommerce-cart table.cart td.product-name a {
	font-size: 1rem;
}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
	text-align: right;
	white-space: nowrap;
}
.woocommerce-cart table.cart td.product-quantity {
	text-align: center;
}
.woocommerce-cart table.cart td.product-quantity .quantity {
	display: inline-flex;
	justify-content: center;
}

/* --------------------- Coupon / Update-cart bar -------------------- */
.woocommerce-cart table.cart td.actions {
	/* Keep this colspan="6" cell a REAL table-cell so it spans the full table
	   width. `display:flex` here drops it out of table layout and shrink-wraps
	   the cell to ~140px (which collapsed the coupon row). Instead the coupon
	   group floats left and Update-cart floats right; ::after clears them. */
	padding: 1.1rem;
	background: var(--mist);
	border-top: 1px solid var(--line);
}
.woocommerce-cart table.cart td.actions::after {
	content: '';
	display: block;
	clear: both;
}
/* Coupon group: input + apply button, left-aligned. The .coupon flex base
   comes from woocommerce.css; we cap the input width so it doesn't sprawl. */
.woocommerce-cart table.cart td.actions .coupon {
	float: left;
	max-width: 70%;
	min-width: 0;
	flex-wrap: wrap;
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
	flex: 1 1 12rem;
	max-width: 16rem;
	min-width: 0;
	margin: 0;
}
.woocommerce-cart table.cart td.actions .coupon .button {
	flex: 0 0 auto;
}
/* "Update cart" sits to the far right. */
.woocommerce-cart table.cart td.actions button[name='update_cart'] {
	float: right;
}

/* --------------------------- Summary card -------------------------- */
.woocommerce-cart .cart-collaterals {
	width: 100%;
	margin-top: 1.5rem;
}
.woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 1.5rem;
}
@media (min-width: 62em) {
	.woocommerce-cart .cart-collaterals {
		margin-top: 0;
	}
	/* Sticky summary follows the shopper as the items list scrolls. */
	.woocommerce-cart .cart-collaterals .cart_totals {
		position: sticky;
		top: 1.5rem;
	}
}

.woocommerce-cart .cart_totals h2 {
	margin-top: 0;
}

/* Totals rows: label left, monospace violet amount right. The card itself
   supplies the frame, so strip the inner table chrome from the base. */
.woocommerce-cart .cart_totals table.shop_table {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	overflow: visible;
	width: 100%;
	margin: 0;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	padding: 0.7rem 0;
	border: 0;
	border-top: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}
/* First row needs no top divider. */
.woocommerce-cart .cart_totals table.shop_table tr:first-child th,
.woocommerce-cart .cart_totals table.shop_table tr:first-child td {
	border-top: 0;
	padding-top: 0;
}
.woocommerce-cart .cart_totals table.shop_table th {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--muted);
	white-space: nowrap;
}
.woocommerce-cart .cart_totals table.shop_table td {
	text-align: right;
	color: var(--ink-2);
}

/* Order total: emphasised, with a stronger divider above. */
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
	border-top: 2px solid var(--line-2);
	padding-top: 0.9rem;
}
.woocommerce-cart .cart_totals tr.order-total th {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink);
}
.woocommerce-cart .cart_totals tr.order-total td .amount {
	font-size: 1.15rem;
}

/* Shipping row: methods list + destination + calculator read as plain text.
   Stack the cell content in a left-aligned column so the destination line and
   the "Change address" link sit cleanly under the method (overriding the
   generic right-aligned totals cell). */
.woocommerce-cart .cart_totals .shipping td {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	color: var(--muted);
	font-size: 0.92rem;
	text-align: left;
}
.woocommerce-cart .cart_totals ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}
.woocommerce-cart .cart_totals ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.woocommerce-cart .cart_totals ul#shipping_method label {
	margin: 0;
	color: var(--ink-2);
	font-weight: 500;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
	margin: 0;
	color: var(--muted);
}
/* The calculator <form> wraps the toggle + (hidden) form; keep it from adding
   stray width/spacing so the flex-column gap stays consistent. */
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator {
	margin: 0;
	width: 100%;
}
/* Shipping-calculator toggle: a plain violet text-link, flush-left, no indent
   or baseline offset (column gap handles the spacing above it). */
.woocommerce-cart .shipping-calculator-button {
	display: inline-block;
	margin: 0;
	padding: 0;
	color: var(--violet-600);
	font-weight: 600;
	text-decoration: none;
}
.woocommerce-cart .shipping-calculator-button:hover {
	text-decoration: underline;
}
.woocommerce-cart .shipping-calculator-form {
	margin-top: 0.75rem;
}
.woocommerce-cart .shipping-calculator-form .button {
	width: 100%;
}

/* Proceed to checkout: full-width gradient primary (button base from
   woocommerce.css), sitting flush under the totals. */
.woocommerce-cart .wc-proceed-to-checkout {
	margin-top: 1.25rem;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: flex;
	width: 100%;
	padding-block: 1rem;
	font-size: 1rem;
}

/* ---------------------- Responsive stacked table ------------------- */
/* Below 48em the `.shop_table_responsive` collapses: each row becomes a card
   and each cell a label/value line using its `data-title`. */
@media (max-width: 48em) {
	.woocommerce-cart table.cart thead {
		display: none;
	}
	.woocommerce-cart table.cart,
	.woocommerce-cart table.cart tbody {
		display: block;
		width: 100%;
	}
	.woocommerce-cart table.cart tr.cart_item {
		display: grid;
		grid-template-columns: 64px 1fr auto;
		grid-template-areas:
			'thumb name    remove'
			'thumb details details';
		align-items: center;
		gap: 0.4rem 0.9rem;
		padding: 1.1rem;
		border-top: 1px solid var(--line);
	}
	.woocommerce-cart table.cart tr.cart_item:first-child {
		border-top: 0;
	}
	.woocommerce-cart table.cart tr.cart_item td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		border: 0;
		width: auto;
	}
	/* Place the thumbnail / name / remove into the top band. */
	.woocommerce-cart table.cart td.product-thumbnail {
		grid-area: thumb;
		width: 64px;
	}
	.woocommerce-cart table.cart td.product-name {
		grid-area: name;
		justify-content: flex-start;
	}
	.woocommerce-cart table.cart td.product-remove {
		grid-area: remove;
		width: auto;
		justify-content: flex-end;
	}
	/* Price / quantity / subtotal stack as labelled rows below. */
	.woocommerce-cart table.cart td.product-price,
	.woocommerce-cart table.cart td.product-quantity,
	.woocommerce-cart table.cart td.product-subtotal {
		grid-column: 1 / -1;
		padding: 0.5rem 0 0;
		border-top: 1px solid var(--line);
		margin-top: 0.5rem;
		text-align: right;
		white-space: normal;
	}
	.woocommerce-cart table.cart td.product-price {
		grid-area: details;
	}
	/* The data-title becomes the left-hand label for each stacked cell. */
	.woocommerce-cart table.cart td.product-price::before,
	.woocommerce-cart table.cart td.product-quantity::before,
	.woocommerce-cart table.cart td.product-subtotal::before {
		content: attr(data-title);
		font-family: 'Inter', system-ui, sans-serif;
		font-weight: 600;
		font-size: 0.8rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--muted);
	}
	/* Hide labels on the cells already shown in the top band. */
	.woocommerce-cart table.cart td.product-name::before,
	.woocommerce-cart table.cart td.product-thumbnail::before {
		content: none;
	}
	.woocommerce-cart table.cart td.product-quantity .quantity {
		justify-content: flex-end;
	}
	/* Actions row stacks under the items. */
	.woocommerce-cart table.cart td.actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.woocommerce-cart table.cart td.actions .coupon {
		width: 100%;
	}
	.woocommerce-cart table.cart td.actions .coupon .input-text {
		max-width: none;
	}
	.woocommerce-cart table.cart td.actions button[name='update_cart'] {
		margin-left: 0;
		width: 100%;
	}
}

/* ----------------------------- Empty cart -------------------------- */
.woocommerce-cart .cart-empty {
	text-align: center;
	margin: 1rem auto 1.5rem;
	max-width: 32rem;
	border-left: 0;
	font-size: 1.05rem;
	color: var(--ink-2);
}
.woocommerce-cart .woocommerce-info ~ p.return-to-shop,
.woocommerce-cart .return-to-shop {
	text-align: center;
	margin: 0 auto 2rem;
}
.woocommerce-cart .return-to-shop .button {
	display: inline-flex;
}