/*
 * Cart page (woocommerce/cart/cart.php, cart-totals.php, cart-empty.php; page.php's
 * .sl-wc-page / .sl-wc-page-header wrapper).
 *
 * The item table (`table.shop_table.cart.woocommerce-cart-form__contents`) keeps its
 * table/tr/td markup and column classes (WooCommerce's cart.js and the remove-link data
 * attributes look for them) but is redrawn here as stacked rows: the header row is visually
 * hidden, each `tr.woocommerce-cart-form__cart-item` becomes a flex row with a 96px thumbnail,
 * name/SKU/variation column, then price/quantity/subtotal/remove — wrapping onto a second
 * line below the thumbnail+name on narrow screens instead of the browser's default table
 * layout. Literal values (no @apply) for the same tree-shaking reason as the rest of this
 * section — see the comment at the top of it.
 */
.woocommerce-cart-form__contents {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}
/* WooCommerce's own woocommerce-smallscreen.css used to redraw table.shop_table_responsive
	 at <=768px (its own thead/tr/td display rules, `table.cart .product-thumbnail{display:none}`,
	 a `content: attr(data-title)` label before every cell) with a selector that out-specified the
	 class+class selectors below once its extra tr/td type selectors were counted — fix round 1's
	 `woocommerce_enqueue_styles` filter (inc/woocommerce.php) dequeues that stylesheet entirely,
	 so none of the rules below need `!important` any more. */
.woocommerce-cart-form__contents thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}
.woocommerce-cart-form__contents tbody {
	display: block;
	width: 100%;
}
.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item {
	display: flex;
	padding-inline: 1.25rem;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1.25rem;
	row-gap: 0.75rem;
	width: 100%;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--sl-border);
}
.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td {
	display: block;
	padding: 0;
	border: 0;
	font-size: 0.875rem;
	text-align: left;
}
.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td::before {
	content: none;
}
.woocommerce-cart-form__contents td.product-thumbnail {
	display: block;
}
.woocommerce-cart-form__contents td.product-thumbnail {
	order: 1;
	flex: 0 0 96px;
	width: 96px;
}
.woocommerce-cart-form__contents td.product-thumbnail a,
.woocommerce-cart-form__contents td.product-thumbnail img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--sl-r-img-lg);
	background-color: var(--sl-off-white);
}
.woocommerce-cart-form__contents td.product-name {
	order: 2;
	flex: 1 1 220px;
	min-width: 180px;
	color: var(--sl-black);
	font-weight: 600;
}
.woocommerce-cart-form__contents td.product-name a {
	color: var(--sl-black);
	text-decoration: none;
}
.woocommerce-cart-form__contents td.product-name a:hover {
	color: var(--sl-accent);
}
.sl-cart-item-sku {
	margin-top: 0.25rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--sl-gray-500);
}
.woocommerce-cart-form__contents .wc-item-meta {
	margin: 0.375rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.75rem;
	color: var(--sl-gray-500);
}
.woocommerce-cart-form__contents .wc-item-meta .wc-item-meta-label {
	font-weight: 600;
	color: var(--sl-gray-700);
}
.woocommerce-cart-form__contents td.product-price {
	order: 3;
	flex: 0 0 auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	color: var(--sl-gray-700);
}
.woocommerce-cart-form__contents td.product-quantity {
	order: 4;
	flex: 0 0 auto;
}
.woocommerce-cart-form__contents td.product-subtotal {
	order: 5;
	flex: 0 0 auto;
	margin-left: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-weight: 700;
	color: var(--sl-black);
	text-align: right;
}
.woocommerce-cart-form__contents td.product-remove {
	order: 6;
	flex: 0 0 auto;
}
.woocommerce-cart-form__contents td.product-remove > a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 9999px;
	background-color: var(--sl-off-white) !important; /* WooCommerce forces its red with !important */
	color: var(--sl-gray-500) !important;
	font-size: 1.125rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.woocommerce-cart-form__contents td.product-remove > a.remove:hover {
	background-color: var(--sl-red-50) !important;
	color: var(--sl-red-700) !important;
}
@media (max-width: 639px) {
	/* One compact card per item: thumbnail on the left; name, unit price (when more than one),
	   then quantity and line total on the right. The remove button sits in the top corner. */
	.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item {
		position: relative;
		display: grid;
		grid-template-columns: 5rem minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name  name"
			"thumb price price"
			"thumb qty   sub";
		align-items: center;
		column-gap: 0.875rem;
		row-gap: 0.5rem;
		padding: 1rem;
	}
	.woocommerce-cart-form__contents td.product-remove {
		position: absolute;
		top: 0.75rem;
		right: 0.75rem;
		z-index: 1;
	}
	.woocommerce-cart-form__contents td.product-thumbnail { grid-area: thumb; width: 5rem; align-self: start; }
	.woocommerce-cart-form__contents td.product-thumbnail a,
	.woocommerce-cart-form__contents td.product-thumbnail img { width: 5rem; height: 5rem; }
	.woocommerce-cart-form__contents td.product-name { grid-area: name; min-width: 0; padding-right: 2rem; align-self: start; }
	.woocommerce-cart-form__contents td.product-price { grid-area: price; margin: 0; font-size: 0.8125rem; color: var(--sl-gray-500); }
	.woocommerce-cart-form__contents td.product-quantity { grid-area: qty; }
	.woocommerce-cart-form__contents td.product-subtotal { grid-area: sub; margin: 0; text-align: right; }
	/* A slimmer stepper so it and the line total share a row down to 360px screens. */
	.woocommerce-cart-form__contents .sl-qty-stepper .qty { width: 2.25rem; padding-inline: 0; }
}

/* The actions row (coupon + "Update cart") is the table's last <tr>, kept as a plain block
	 row instead of the flex item layout above. woocommerce-layout.css's `table.cart td.actions
	 {text-align:right}` / `.coupon{float:left}` and woocommerce-smallscreen.css's mobile
	 equivalents (`float:none`, 48%-width coupon children) both needed `!important` here to win;
	 fix round 1 dequeues both stylesheets, so none of that needs `!important` any more. */
.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) {
	display: block;
	width: 100%;
}
.woocommerce-cart-form__contents tr .actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--sl-off-white);
	text-align: left;
}
.woocommerce-cart-form__contents tr .actions > .button[name="update_cart"] { margin-left: auto; }
.woocommerce-cart-form__contents .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	float: none;
}
.woocommerce-cart-form__contents .coupon .input-text {
	width: 14rem;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 0.875rem;
	background: var(--sl-white);
	border: 1px solid var(--sl-border-strong);
	border-radius: var(--sl-r-field);
	font-size: 0.875rem;
}
/* "Apply coupon" (primary) and "Update cart" (secondary; disabled until WC's cart.js sees a
	 change) get their look from the button system — see assets/css/buttons.css. */
.woocommerce-cart-form__contents tr .actions .button {
	width: auto;
}

/* Cart totals card (woocommerce/cart/cart-totals.php): totals table rows in mono, no border
	 chrome of its own (the card already draws one). woocommerce-smallscreen.css's forced
	 `text-align:right!important` on every table.shop_table_responsive td, and
	 woocommerce-layout.css's `.cart-collaterals .cart_totals{float:right;width:48%}` (the card
	 used to be squeezed to 48% width inside its own grid column — fix round 1's headline bug)
	 are both gone now that those two stylesheets are dequeued. */
.cart_totals table.shop_table {
	border: 0;
	border-radius: 0;
}
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--sl-gray-100);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.8125rem;
	color: var(--sl-gray-700);
	text-align: right;
}
.cart_totals table.shop_table th {
	text-align: left;
	font-weight: 500;
	color: var(--sl-gray-500);
}
.cart-collaterals .cart_totals {
	width: 100%;
	text-align: left;
}
.cart_totals table.shop_table tr.order-total th,
.cart_totals table.shop_table tr.order-total td {
	border-bottom: 0;
	padding-top: 0.875rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--sl-black);
}
.cart_totals table.shop_table tr.order-total .woocommerce-Price-amount {
	font-weight: 700;
}
/* Proceed to checkout: full width; accent look from the button system. */
.wc-proceed-to-checkout .checkout-button {
	display: flex;
	width: 100%;
}

/* Cart collaterals column (woocommerce/cart/cart.php): sticks under the sticky site header
	 while scrolling a tall item list. */
@media (min-width: 1024px) {
	.sl-cart-collaterals-sticky {
		position: sticky;
		top: calc(var(--sl-header-h, 81px) + 1rem);
	}
}

/* Cross-sells (cart/cross-sells.php, not overridden — rendered by inc/woocommerce.php's move
	 of woocommerce_cross_sell_display() to woocommerce_after_cart so it isn't squeezed into the
	 totals sidebar). Same section-title treatment as .related.products above. */
.cross-sells {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--sl-border);
}
.cross-sells > h2 {
	font-family: "Space Grotesk", sans-serif;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--sl-black);
	margin: 0 0 1.5rem;
}

/* Cart-empty state (woocommerce/cart/cart-empty.php): the core "cart is currently empty"
	 notice is unhooked (inc/woocommerce.php), but any other info notice printed through
	 woocommerce_cart_is_empty renders inside .sl-cart-empty above the Continue shopping button;
	 keep it narrow and centered like the rest of the empty state instead of a full-width banner. */
.sl-cart-empty .woocommerce-info {
	max-width: 28rem;
	text-align: center;
}

/* Cart page layout: items (8 cols) + totals (4 cols). */
.sl-cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}
@media (min-width: 1024px) {
	.sl-cart-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.sl-cart-layout__main { grid-column: span 8 / span 8; }
	.sl-cart-layout__aside { grid-column: span 4 / span 4; }
}

/* Empty cart page (woocommerce/cart/cart-empty.php). */
.sl-cart-empty--page {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 5rem 1rem;
	text-align: center;
}
.sl-cart-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin-bottom: 1.5rem;
	border-radius: var(--sl-radius-full);
	background: var(--sl-off-white);
	color: var(--sl-gray-400);
}
.sl-icon.sl-cart-empty__svg { width: 1.75rem; height: 1.75rem; }
.sl-cart-empty__title {
	margin-bottom: .5rem;
	color: var(--sl-black);
	font-family: var(--sl-font-display);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
}
.sl-cart-empty__text {
	max-width: 24rem;
	margin-bottom: 2rem;
	color: var(--sl-gray-500);
	font-size: .875rem;
	line-height: 1.25rem;
}
.sl-cart-empty .return-to-shop { margin: 0; }

/* The item list is one framed card: rows inside, the coupon / update row as its footer. */
.woocommerce-cart-form {
	overflow: hidden;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-r-card);
	background: var(--sl-white);
}
.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item:last-of-type { border-bottom: 0; }
.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) { border-top: 1px solid var(--sl-border); }

/* Free-delivery progress in the summary card (Customizer → Shop → Cart). */
.sl-free-ship { margin-bottom: 1.25rem; padding: 0.875rem 1rem; border-radius: var(--sl-r-small); background: var(--sl-off-white); }
.sl-free-ship__text { margin: 0 0 0.5rem; color: var(--sl-gray-700); font-size: 0.8125rem; line-height: 1.4; }
.sl-free-ship__text .woocommerce-Price-amount { color: var(--sl-black); font-weight: 700; }
.sl-free-ship__bar { display: block; height: 6px; overflow: hidden; border-radius: var(--sl-r-pill); background: var(--sl-border); }
.sl-free-ship__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--sl-accent); transition: width 0.5s var(--sl-ease-apple); }
.sl-free-ship.is-done .sl-free-ship__bar > span { background: var(--sl-emerald-700); }
.sl-free-ship.is-done .sl-free-ship__text { color: var(--sl-emerald-700); font-weight: 600; }

/* Beats WooCommerce's `table.shop_table` margin/border, which left a strip under the coupon row. */
.woocommerce-cart-form table.shop_table.woocommerce-cart-form__contents { margin: 0; border: 0; }

/* Even gutters inside the item card: rows and the coupon / update footer all use 1.5rem.
   The footer's padding is set on the cell with the table prefix, because WooCommerce's
   `table.cart td.actions` rule (12px) otherwise wins. */
.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item { padding-inline: 1.5rem; }
.woocommerce-cart-form table.woocommerce-cart-form__contents td.actions {
	padding: 1.25rem 1.5rem;
	gap: 0.75rem 1rem;
}
.woocommerce-cart-form table.woocommerce-cart-form__contents td.actions .coupon { flex: 1 1 18rem; }
.woocommerce-cart-form table.woocommerce-cart-form__contents td.actions .coupon .input-text { flex: 1 1 8rem; width: auto; min-width: 0; }

/* One piece: the unit price equals the line total, so it is shown once (at the right). */
.woocommerce-cart-form__contents td.product-price.is-single { display: none; }
/* Quantity changes update the cart by themselves (assets/js/cart.js); the button is only a fallback. */
html.sl-js .woocommerce-cart-form .actions button[name="update_cart"] { display: none !important; }