/**
 * Cart — WooCommerce Cart block.
 *
 * Line items sit in a bordered panel on the left; the order summary is a
 * sticky cream panel on the right, matching the PLP sidebar's weight. See the
 * header of wc-blocks.css for what this file will and will not override.
 */

.wc-page--cart .wp-block-woocommerce-cart {
	margin: 0;
}

/*
 * WooCommerce switches this layout to one column at its own breakpoint, and
 * the JS reads those classes — so the columns are sized here but the
 * stacking is left to WooCommerce.
 */
.wc-page--cart .wc-block-cart__main {
	padding-right: var(--wc-page-gap);
}

.wc-page--cart .wc-block-cart__sidebar {
	position: sticky;
	top: 24px;
	align-self: start;
}

/* ---------------------------------------------------------- line items --- */

.wc-page--cart .wc-block-cart-items {
	margin: 0;
	background: var(--color-white);
	border: 1px solid var(--color-border-card);
	border-radius: var(--wc-panel-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.wc-page--cart .wc-block-cart-items__header {
	background: var(--color-bg-cream-2);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-heading);
	border-bottom: 0;
}

.wc-page--cart .wc-block-cart-items__header th {
	padding: 16px 18px;
	border: 0;
}

.wc-page--cart .wc-block-cart-items__row td {
	padding: var(--wc-row-pad-y) 18px;
	border-top: 1px solid var(--wc-row-border);
}

.wc-page--cart .wc-block-cart-items__row:first-child td {
	border-top: 0;
}

.wc-page--cart .wc-block-cart-item__image img {
	width: var(--wc-thumb-size);
	height: auto;
	border-radius: var(--radius-category-card);
	background: var(--color-bg-product-image);
}

.wc-page--cart .wc-block-cart-item__total {
	font-weight: 600;
	color: var(--color-heading);
}

/* Quantity stepper — border and colour only; the stepper's own JS owns its
   button sizing and the input's width. */
.wc-page--cart .wc-block-components-quantity-selector {
	border: 1px solid var(--wc-field-border);
	border-radius: var(--wc-field-radius);
	background: var(--color-white);
}

.wc-page--cart .wc-block-components-quantity-selector__button {
	color: var(--color-heading);
	background: transparent;
}

.wc-page--cart .wc-block-components-quantity-selector__button:hover {
	color: var(--color-accent);
}

.wc-page--cart .wc-block-components-quantity-selector__input {
	font-family: var(--font-body);
	color: var(--color-heading);
}

/* ------------------------------------------------------------- summary --- */

.wc-page--cart .wc-block-cart__totals-title {
	display: block;
	margin: 0 0 4px;
	padding: 0;
	font-size: 20px;
	line-height: 30px;
	text-align: left;
}

.wc-page--cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
	padding: var(--wc-panel-pad-tight);
	background: var(--color-bg-card-inner);
	border: 1px solid var(--color-border-card);
	border-radius: var(--wc-panel-radius);
	box-sizing: border-box;
}

.wc-page--cart .wc-block-cart__submit-container {
	padding: 16px 0 0;
}

.wc-page--cart .wc-block-cart__submit-button {
	width: 100%;
}

/* Payment-method logos under the checkout button. */
.wc-page--cart .wc-block-cart__payment-options {
	margin-top: 12px;
}

/* --------------------------------------------------------------- empty --- */

.wc-page--cart .wp-block-woocommerce-empty-cart-block {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--wc-panel-pad) var(--wc-panel-pad) 40px;
	text-align: center;
	background: var(--color-white);
	border: 1px solid var(--color-border-card);
	border-radius: var(--wc-panel-radius);
	box-sizing: border-box;
}

.wc-page--cart .wc-block-cart__empty-cart__title {
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: 400;
	line-height: 36px;
	color: var(--color-heading);
}

/*
 * The empty-cart block ships a "New in store" product grid. It stays (removing
 * it would be a functionality change) but is toned down so it reads as a
 * suggestion rather than as the point of the page.
 */
.wc-page--cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-product-name);
}

/* --------------------------------------------------------- cross-sells --- */

/* "You may be interested in…" — match the Featured Products section heading. */
.wc-page--cart .wp-block-woocommerce-product-collection .wp-block-heading {
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: 400;
	line-height: 36px;
	letter-spacing: -0.01em;
	color: var(--color-heading);
}

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 1024px) {
	.wc-page--cart .wc-block-cart__main {
		padding-right: 0;
	}

	.wc-page--cart .wc-block-cart__sidebar {
		position: static;
		margin-top: var(--wc-panel-gap);
	}
}

@media (max-width: 782px) {
	.wc-page--cart .wc-block-cart-items__row td {
		padding: 16px 12px;
	}

	.wc-page--cart .wc-block-cart-item__image img {
		width: 64px;
	}
}