/* Cart page — Nahl Foods */

.nahl-shop-hero--compact {
	min-height: 220px;
}

.nahl-shop-hero--compact .nahl-shop-hero__content {
	padding-block: 40px 48px;
}

.nahl-cart-page {
	padding-block: 40px 72px;
	background: var(--color-bg-muted);
}

/* Way back out. The breadcrumb above the hero says where you are; this says
   what to do about it, in the place and the weight of a button. */
.nahl-cart-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-family: var(--font-ui);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition);
}

.nahl-cart-back .icon {
	width: 16px;
	height: 16px;
	transition: transform var(--transition);
}

.nahl-cart-back:hover {
	color: var(--color-primary);
}

.nahl-cart-back:hover .icon {
	transform: translateX(-3px);
}

.nahl-cart-back:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

/* Delivery, safety, returns — the three things a cart leaves unanswered, on
   the ground rather than in a card so they read as the shop's terms and not as
   one more panel competing with the summary. */
.nahl-cart-assurance {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 56px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--color-border);
	list-style: none;
}

.nahl-cart-assurance__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.nahl-cart-assurance__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	color: var(--color-honey-deep);
}

.nahl-cart-assurance__icon .icon {
	width: 19px;
	height: 19px;
}

.nahl-cart-assurance__body {
	display: block;
	min-width: 0;
}

.nahl-cart-assurance__title {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--color-primary);
}

.nahl-cart-assurance__text {
	display: block;
	margin-top: 2px;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--color-text-muted);
}

@media (max-width: 700px) {
	.nahl-cart-assurance {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-top: 40px;
	}
}

.nahl-cart {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
	gap: 28px;
	align-items: start;
}

.nahl-cart .woocommerce-cart-form,
.nahl-cart .cart_totals {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 20px;
}

.nahl-cart .shop_table {
	width: 100%;
	border-collapse: collapse;
}

.nahl-cart .shop_table th {
	text-align: left;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	padding: 0 12px 14px;
	border-bottom: 1px solid var(--color-border);
}

.nahl-cart .shop_table td {
	padding: 18px 12px;
	border-bottom: 1px solid var(--color-border);
	vertical-align: middle;
	color: var(--color-primary);
}

.nahl-cart .product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	display: block;
}

.nahl-cart .product-name a {
	font-family: var(--font-display);
	font-weight: var(--fw-display-medium);
	font-size: 20px;
	line-height: 1.2;
}

.nahl-cart .product-name a:hover {
	color: var(--color-accent-deep);
}

.nahl-cart a.remove {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.nahl-cart a.remove .icon {
	width: 14px;
	height: 14px;
}

.nahl-cart a.remove:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.nahl-cart .quantity {
	display: inline-flex;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-bg);
}

.nahl-cart .quantity .qty,
.nahl-cart .quantity input.qty {
	width: 52px;
	height: 42px;
	border: 0;
	text-align: center;
	font: inherit;
	font-weight: 600;
	color: var(--color-primary);
	background: transparent;
}

.nahl-cart td.actions {
	border-bottom: 0;
	padding-top: 20px;
}

.nahl-cart .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.nahl-cart .coupon .input-text {
	flex: 1 1 180px;
	height: var(--btn-min-height);
	padding: 0 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: 13px;
}

.nahl-cart .button,
.nahl-cart-empty .button,
.nahl-cart .checkout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-min-height);
	padding: var(--btn-padding-y) var(--btn-padding-x);
	border: 0;
	border-radius: var(--radius-btn);
	background: var(--color-primary) !important;
	color: var(--color-white) !important;
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight);
	letter-spacing: var(--btn-letter-spacing);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none !important;
}

.nahl-cart button[name="update_cart"] {
	background: transparent !important;
	color: var(--color-primary) !important;
	border: 1px solid var(--color-border) !important;
}

.nahl-cart button[name="update_cart"]:hover {
	border-color: var(--color-primary) !important;
}

.nahl-cart .button:hover,
.nahl-cart .checkout-button:hover,
.nahl-cart-empty .button:hover {
	background: var(--color-primary-hover) !important;
}

.nahl-cart .cart_totals h2 {
	font-size: var(--fs-xl);
	font-weight: var(--fw-display-medium);
	margin-bottom: 16px;
}

.nahl-cart .cart_totals .shop_table th,
.nahl-cart .cart_totals .shop_table td {
	padding: 12px 0;
	font-size: 14px;
}

.nahl-cart .cart_totals .shop_table th {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	color: var(--color-text-muted);
	border: 0;
}

.nahl-cart .cart_totals .shop_table td {
	text-align: right;
	border: 0;
	font-weight: 600;
}

.nahl-cart .cart_totals .order-total th,
.nahl-cart .cart_totals .order-total td {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-primary);
	border-top: 1px solid var(--color-border);
	padding-top: 16px;
}

.nahl-cart .wc-proceed-to-checkout {
	margin-top: 20px;
}

.nahl-cart .checkout-button {
	width: 100%;
}

.nahl-cart .cart-collaterals .cross-sells {
	grid-column: 1 / -1;
	margin-top: 8px;
}

.nahl-cart-empty {
	text-align: center;
	padding: 48px 24px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.nahl-cart-empty__title {
	font-family: var(--font-heading);
	font-size: 28px;
	margin-bottom: 8px;
}

.nahl-cart-empty__text {
	color: var(--color-text-muted);
	margin-bottom: 24px;
}

.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info {
	width: min(100% - 48px, var(--page-width));
	margin: 16px auto 0;
}

.woocommerce-cart .woocommerce-message {
	padding: 14px 18px;
	border-radius: var(--radius-md);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	color: var(--color-primary);
}

@media (max-width: 900px) {
	.nahl-cart {
		grid-template-columns: 1fr;
	}

	.nahl-cart .shop_table thead {
		display: none;
	}

	.nahl-cart .shop_table tr.cart_item {
		display: grid;
		grid-template-columns: 72px 1fr auto;
		gap: 8px 12px;
		padding: 16px 0;
		border-bottom: 1px solid var(--color-border);
	}

	.nahl-cart .shop_table td {
		padding: 0;
		border: 0;
	}

	.nahl-cart .product-remove {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}

	.nahl-cart .product-thumbnail {
		grid-column: 1;
		grid-row: 1 / span 3;
	}

	.nahl-cart .product-name {
		grid-column: 2;
		grid-row: 1;
	}

	.nahl-cart .product-price,
	.nahl-cart .product-subtotal {
		grid-column: 2;
	}

	.nahl-cart .product-quantity {
		grid-column: 2;
	}

	.nahl-cart td.actions {
		display: block;
	}
}

/* ==========================================================================
   WooCommerce Cart BLOCK
   The cart page renders the Cart block (wp-block-woocommerce-cart), not the
   classic shortcode table above, so none of the .shop_table rules reach it.
   Everything below re-dresses the block in the homepage language: ivory card
   surfaces on the muted ground, cream-framed thumbnails, Cormorant product
   names, Manrope micro-caps for labels, honey for the sale mark.

   Scoping is deliberately .woocommerce-cart .wp-block-woocommerce-cart (two
   classes) so every rule outranks WooCommerce own single/double-class
   selectors whichever stylesheet the browser sees last.
   Breakpoints use @container to stay in lockstep with WooCommerce, which makes
   .wp-block-woocommerce-cart an inline-size container and stacks it at 700px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout

   The block nests three things two levels deep:

     filled-cart-block            (flex row, WooCommerce's sidebar layout)
       cart-items-block           ─ 65% column
         cart-line-items-block    ─ the line-item table
         product-collection       ─ "You may be interested in…" cross-sells
       cart-totals-block          ─ 35% column: summary + checkout button

   Left alone that puts the cross-sell carousel *above* the order summary in
   reading order and inside the same card as the line items, so the shopper
   scrolls past three product photos to reach the checkout button while a
   column of empty ground sits beside them.

   display:contents on cart-items-block promotes its two children into the
   sidebar flex row, and `order` then reads: items, summary, cross-sells. The
   summary comes back up beside the line items where it belongs, and the
   cross-sells span the full width underneath both.
   -------------------------------------------------------------------------- */

.woocommerce-cart .wp-block-woocommerce-cart {
	width: 100%;
	margin-inline: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-filled-cart-block {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 32px;
	margin: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-items-block {
	display: contents;
}

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-line-items-block {
	order: 1;
	flex: 1 1 0;
	/* Without this a wide line-item row sets the flex base and pushes the
	   summary onto its own line. */
	min-width: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar {
	order: 2;
	flex: 0 0 358px;
	width: 358px;
	max-width: 100%;
	padding-left: 0;
	margin: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-product-collection {
	order: 3;
	flex: 1 0 100%;
	width: 100%;
	margin-top: 64px;
}

/* A store with nothing to cross-sell renders the block empty; without this it
   would still push 64px of air under the cart. */
.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-product-collection:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   Line-items panel — the card surface
   -------------------------------------------------------------------------- */

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-line-items-block {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: clamp(16px, 2.2vw, 28px);
}

/* A head for the items card, so it opens the same way the summary beside it
   does instead of starting cold on a product row. The label is a translated
   string that PHP hands over as --nahl-items-title (see nahlfoods_assets); the
   cart block re-renders itself client-side, which would wipe any markup the
   theme injected, but it cannot touch a pseudo-element on its own wrapper. */
.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-line-items-block::before {
	content: var(--nahl-items-title, "");
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: var(--fw-display-medium);
	line-height: 1.2;
	color: var(--color-primary);
	padding-bottom: 16px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items {
	width: 100%;
	border-spacing: 0;
	border-bottom: 0;
	margin: 0;
}

/* The header row labelled the thumbnail "Product" and the copy beside it
   "Details", which is the kind of caption that only makes sense to whoever
   built the table. Each row now carries its own price, quantity and total in
   plain sight, so the labels are noise and the card opens on content. */
/* The header cells collapse to nothing but stay in the table, so the row is
   gone from the page and still there for a screen reader reading the grid.
   Taking the whole <tr> out of flow instead would leave its columns behind in
   the width algorithm — the 1px header row would keep sizing the table and the
   line totals would stop reaching the card's right edge. */
.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header th {
	height: 0;
	padding: 0;
	border: 0;
	line-height: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header th > * {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row td {
	border: 0;
	border-top: 1px solid var(--color-border);
	padding: 24px 0;
	vertical-align: top;
	background: none;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row:first-child td {
	border-top: 0;
	padding-top: 4px;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row:last-child td {
	padding-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Thumbnail — the framed square from .product-card__media: cream ground, hair
   border, image radius on the frame so the photo corners are clipped by it.
   -------------------------------------------------------------------------- */

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__image {
	width: 112px;
	padding-right: 20px;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__image a {
	display: block;
	overflow: hidden;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-image);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 0;
	margin: 0;
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row:hover .wc-block-cart-item__image a {
		border-color: var(--color-honey);
		}
}

/* --------------------------------------------------------------------------
   Product copy — name, unit price, options, then the controls. One column,
   read top to bottom. The previous layout pinned the quantity stepper to the
   right edge of the cell, which left it stranded mid-row with nothing either
   side of it once the summary moved back into its own column.
   -------------------------------------------------------------------------- */

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items a.wc-block-components-product-name {
	font-family: var(--font-heading);
	font-size: clamp(20px, 1.6vw, 24px);
	font-weight: var(--fw-display-medium);
	line-height: 1.2;
	color: var(--color-primary);
	text-decoration: none;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items a.wc-block-components-product-name:hover {
	color: var(--color-accent-deep);
}

/* Unit price. The row's own total is the number that matters, so this one
   stays quiet — it is here to answer "each" not to be read first. */
.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__prices {
	font-family: var(--font-ui);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	gap: 8px;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-components-product-price__regular {
	color: var(--color-text-light);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__prices .wc-block-components-product-price__value {
	font-weight: 600;
	color: var(--color-text-muted);
	text-decoration: none;
	background: none;
}

/* Terracotta only for the discounted unit price — it is the one number on the
   row doing persuasion, so it gets the accent and nothing else does. */
.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-components-product-price__value.is-discounted {
	color: var(--color-accent-deep);
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-components-product-metadata {
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--color-text-light);
	max-width: 46ch;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-components-product-metadata p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Quantity + remove
   -------------------------------------------------------------------------- */

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector {
	width: 116px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-btn);
	overflow: hidden;
	transition: border-color var(--transition);
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector:focus-within {
	border-color: var(--color-primary);
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	height: 40px;
	padding: 0;
	font-family: var(--font-ui);
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--color-primary);
	background: transparent;
	border: 0;
	box-shadow: none;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	width: 34px;
	min-width: 34px;
	padding: 0;
	font-size: 17px;
	line-height: 1;
	color: var(--color-primary);
	background: transparent;
	border: 0;
	box-shadow: none;
	opacity: 1;
	transition: background-color var(--transition), color var(--transition);
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background: var(--color-bg-muted);
	box-shadow: none;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	color: var(--color-text-light);
	opacity: 0.45;
}

/* Ghost circle next to the stepper. It sits on ivory, where the standard hair
   border all but vanishes, so it borrows the muted ground instead and only
   commits to terracotta on hover — destructive, but not shouting about it. */
.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__quantity button.wc-block-cart-item__remove-link {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	flex: 0 0 auto;
	font-size: 0;
	color: var(--color-text-muted);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 50%;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__quantity button.wc-block-cart-item__remove-link svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__quantity button.wc-block-cart-item__remove-link:hover {
	color: var(--color-white);
	background: var(--color-accent);
	border-color: var(--color-accent);
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__quantity button.wc-block-cart-item__remove-link:active {
	transform: scale(0.94);
}

/* --------------------------------------------------------------------------
   Row total + sale badge — top-aligned with the product name, so the eye can
   run down the right edge and read the line totals as a column.
   -------------------------------------------------------------------------- */

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__total {
	width: 132px;
	text-align: right;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__total .wc-block-components-product-price__value {
	font-family: var(--font-ui);
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-primary);
}

.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-components-sale-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	font-family: var(--font-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--color-primary);
	background: var(--color-honey);
	border: 0;
	border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Order summary — the card beside the items, pinned while they scroll so the
   total and the checkout button are never more than a glance away.
   -------------------------------------------------------------------------- */

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar {
	padding: clamp(20px, 2vw, 26px);
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	position: sticky;
	top: calc(var(--header-height) + 24px);
}

/* Woo pads every totals row 16px in from the sidebar edge, which on a card
   that already has its own padding reads as a stray indent. */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-panel,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-coupon,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-item {
	padding-left: 0;
	padding-right: 0;
}

/* WooCommerce ships the coupon second, straight under the title, where an
   empty input outweighs every figure in the card. Everything else is already
   in the right sequence, so only two things move: the coupon drops past the
   figures, and the grand total is pinned behind it.

   Only these two carry an `order`. Leaving every other child at the default 0
   means the summary keeps WooCommerce's own sequence whatever inner blocks a
   given install has — including the newer builds that group the figures under
   a single cart-order-summary-totals-block. */
.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
	display: flex;
	flex-direction: column;
}

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	order: 1;
}

/* The grand total is not an inner block — the order summary renders it itself,
   so it is matched by what it contains rather than by a block class. */
.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-footer-item,
.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block > *:has(> .wc-block-components-totals-footer-item) {
	order: 2;
}

/* WooCommerce drops the summary title once the sidebar stacks, which leaves
   the card opening on a bare "Subtotal" row. It is the card's only heading —
   it stays. */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__totals-title {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: var(--fw-display-medium);
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-primary);
	margin: 0;
	padding: 0;
}

/* WooCommerce rules off every row from the next, so a five-line summary draws
   five lines — including one above the card's own title. The figures are a
   single short list and read as one; the only divisions worth drawing are the
   one before the promo field and the one before the grand total.

   Older builds drew the same line with ::after rather than border-top, so both
   are cleared. */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-wrapper {
	border-top: 0;
	padding: 5px 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-wrapper::after {
	display: none;
}

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block {
	padding-bottom: 10px;
}

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	margin-top: 14px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-item {
	font-family: var(--font-ui);
	font-size: var(--fs-sm);
	padding: 2px 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-item__label {
	color: var(--color-text-muted);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-item__value {
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--color-primary);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-item__description {
	color: var(--color-text-light);
	font-size: var(--fs-xs);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-discount .wc-block-components-totals-item__value {
	color: var(--color-accent-deep);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-footer-item {
	margin-top: 14px;
	padding-top: 18px;
	border-top: 1px solid var(--color-border);
}

/* A shade under the card title, so the summary has one heading and the total
   reads as its conclusion rather than as a second title. */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: var(--fw-display-medium);
	color: var(--color-primary);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--font-ui);
	font-size: 26px;
	font-weight: var(--fw-bold);
	letter-spacing: 0;
	color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Coupon — always open, never an accordion.

   theme.js clicks the panel toggle open and holds it there, then marks the
   cart .nahl-coupon-open. The toggle is only hidden once that class lands, so
   if the script is blocked or errors the stock accordion is still operable
   instead of leaving an unreachable field.

   The toggle carried the "Add coupons" label, so the section leans on the
   input's own "Enter code" label plus the Apply button to explain itself.
   -------------------------------------------------------------------------- */

.woocommerce-cart .wp-block-woocommerce-cart.nahl-coupon-open .wc-block-components-totals-coupon .wc-block-components-panel__button {
	display: none;
}

/* Panel padding assumed a header above it that is no longer there. */
.woocommerce-cart .wp-block-woocommerce-cart.nahl-coupon-open .wc-block-components-totals-coupon .wc-block-components-panel__content {
	margin-top: 0;
	padding-top: 0;
}

/* Any other panel on the page — shipping calculator and friends — keeps its
   toggle, so it still needs the type treatment the coupon one had. */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-panel__button {
	font-family: var(--font-ui);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-primary);
	padding: 4px 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__form {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-text-input input[type="text"] {
	height: var(--btn-min-height);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	font-family: var(--font-ui);
	color: var(--color-text);
}

/* Secondary to the checkout button — outlined, not another solid forest slab,
   so the card has exactly one primary action. */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__button {
	flex: 0 0 auto;
	min-height: var(--btn-min-height);
	padding: var(--btn-padding-y) 18px;
	background: transparent !important;
	color: var(--color-primary) !important;
	border: 1px solid var(--color-border) !important;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__button:hover:not(:disabled) {
	background: transparent !important;
	border-color: var(--color-primary) !important;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__button:disabled {
	opacity: 0.5;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-chip {
	background: var(--color-bg-muted);
	border-color: var(--color-border);
	color: var(--color-primary);
}

/* Checkout button — the one full-bleed control in the card. */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__submit,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__submit-container {
	padding: 0;
	margin-top: 20px;
}

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

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-accepted-payment-methods-block {
	margin-top: 16px;
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Cross-sells — a full-width band under both columns, dressed as the product
   grid the shop and homepage use: square framed photo, centred name, price,
   forest button. WooCommerce's product-collection markup is not the theme's
   .product-card markup, so the language is rebuilt here rather than shared.
   -------------------------------------------------------------------------- */

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-product-collection > h2,
.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-product-collection > .wp-block-heading {
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: var(--fw-display);
	line-height: var(--lh-tight);
	color: var(--color-primary);
	text-align: center;
	margin: 0 0 28px;
}

/* WooCommerce sizes its columns with minmax(max(150px, calc(33.333% - .833em)))
   where .833em is derived from its own 1.25em gap — change the gap and the
   track maths stops adding up to three. Stating the tracks outright keeps the
   gap free to match the rest of the page. */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 24px;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template > li {
	display: flex;
	flex-direction: column;
	min-width: 0;
	text-align: center;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template > li > * {
	margin-block: 0;
}

/* The image block is the only child that must not stretch to the text width
   rules below — it is the frame. */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template .wc-block-components-product-image {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	margin: 0 0 16px;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-image);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template .wc-block-components-product-image a,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template .wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template > li:hover .wc-block-components-product-image {
		border-color: var(--color-honey);
		box-shadow: 0 10px 24px rgba(24, 58, 42, 0.1);
	}
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template .wc-block-components-product-sale-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	margin: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template .wp-block-post-title {
	font-family: var(--font-display);
	font-size: var(--fs-product);
	font-weight: var(--fw-display-medium);
	letter-spacing: var(--ls-display);
	line-height: var(--lh-tight);
	color: var(--color-primary);
	margin: 0 0 6px;
	/* One line only, so price and button stay level across the row. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template .wp-block-post-title a:hover {
	color: var(--color-accent-deep);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template .wp-block-woocommerce-product-price {
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	color: var(--color-primary);
	/* Pushes the button to the bottom of every card whatever the name wraps
	   to, so the row of buttons reads as one line. */
	margin: 0 0 14px;
	margin-top: auto;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template .wp-block-woocommerce-product-price del {
	font-size: 13px;
	font-weight: 400;
	color: var(--color-text-light);
	text-decoration: line-through;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template .wp-block-woocommerce-product-price ins {
	text-decoration: none;
	background: none;
	color: var(--color-accent-deep);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template .wp-block-woocommerce-product-button .wp-block-button__link,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template .wp-block-woocommerce-product-button a.add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: var(--btn-min-height);
	padding: var(--btn-padding-y) var(--btn-padding-x);
	border: 0;
	border-radius: var(--radius-btn);
	background: var(--color-primary) !important;
	color: var(--color-white) !important;
	font-family: var(--font-ui);
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight);
	letter-spacing: var(--btn-letter-spacing);
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none !important;
	transition: background var(--transition), opacity var(--transition);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template .wp-block-woocommerce-product-button .wp-block-button__link:hover {
	background: var(--color-primary-hover) !important;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template .wp-block-woocommerce-product-button .added_to_cart {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Stacked layout. WooCommerce turns .wp-block-woocommerce-cart into an
   inline-size container and folds its own sidebar at 700px, so these track it
   rather than a viewport breakpoint.
   -------------------------------------------------------------------------- */

/* The two columns stack well before WooCommerce's own 699px fold. A 358px
   summary leaves the line items barely 320px at that point — narrower than the
   summary beside them — so the split is given up while the items column can
   still hold a thumbnail, a name and a price on one line. */
@container (max-width: 899px) {
	.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-filled-cart-block {
		gap: 24px 0;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-line-items-block {
		flex: 1 1 100%;
	}

	/* Full width, and no longer pinned: a sticky card taller than the viewport
	   just refuses to scroll. */
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar {
		flex: 1 1 100%;
		width: 100%;
		max-width: none;
		position: static;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-product-collection {
		margin-top: 40px;
	}
}

@container (max-width: 699px) {
	.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-line-items-block {
		padding: 16px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}

	/* Half the width, so the single line that keeps a wide grid level would cut
	   most names mid-word. Two lines, clamped, keeps them readable and still
	   keeps the buttons in step. */
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-product-template .wp-block-post-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
	}

	.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__image {
		width: 92px;
		padding-right: 16px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__total {
		width: auto;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__form {
		flex-wrap: wrap;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-coupon__button {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Empty cart + notices
   -------------------------------------------------------------------------- */

/* The empty cart carries a "New in store" grid under the message, so a boxed
   panel around the lot squeezed four products into a 640px card. It reads as a
   page section instead: the message centred on the ground, the grid at full
   width below it. */
.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block {
	width: 100%;
	padding: clamp(16px, 3vw, 32px) 0 0;
	text-align: center;
}

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block h2 {
	font-family: var(--font-heading);
	color: var(--color-primary);
}

/* WooCommerce leaves this at font-size:inherit, so the one sentence that
   explains the page came out smaller than the heading beneath it. */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__empty-cart__title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-display);
	line-height: var(--lh-tight);
	margin: 0 0 8px;
}

/* The icon is a masked SVG that takes its colour from the title. Gold on its
   own keeps it decorative — at 5em in forest green it was the loudest thing on
   a page whose message is "nothing here yet". */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	/* WooCommerce sizes this by height alone and lets the width run to the full
	   line, which only holds its shape at the height WooCommerce picked. Both
	   axes are stated here, and the mask told to fit them. */
	width: 68px;
	height: 68px;
	margin: 0 auto 20px;
	background-color: var(--color-honey);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-separator {
	width: min(100%, 420px);
	margin: 36px auto;
	border: 0;
	border-top: 1px solid var(--color-border);
	opacity: 1;
}

.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-separator + h2 {
	font-size: var(--fs-xl);
	font-weight: var(--fw-display-medium);
	margin: 0 0 28px;
}

/* The legacy product grid the empty cart ships with — different markup again
   from the cross-sells, same language. */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__product-link {
	display: block;
	text-decoration: none;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__product-image {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	margin: 0 0 16px;
	padding: 0;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-image);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__product:hover .wc-block-grid__product-image {
		border-color: var(--color-honey);
		box-shadow: 0 10px 24px rgba(24, 58, 42, 0.1);
	}
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__product-title {
	font-family: var(--font-display);
	font-size: var(--fs-product);
	font-weight: var(--fw-display-medium);
	letter-spacing: var(--ls-display);
	line-height: var(--lh-tight);
	color: var(--color-primary);
	margin: 0 0 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__product-price {
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	color: var(--color-primary);
	margin: 0 0 14px;
	margin-top: auto;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__product-price del {
	font-size: 13px;
	font-weight: 400;
	color: var(--color-text-light);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__product-price ins {
	text-decoration: none;
	background: none;
	color: var(--color-accent-deep);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__product-add-to-cart a.add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: var(--btn-min-height);
	padding: var(--btn-padding-y) var(--btn-padding-x);
	border: 0;
	border-radius: var(--radius-btn);
	background: var(--color-primary) !important;
	color: var(--color-white) !important;
	font-family: var(--font-ui);
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight);
	letter-spacing: var(--btn-letter-spacing);
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none !important;
	transition: background var(--transition), opacity var(--transition);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background: var(--color-primary-hover) !important;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__product-add-to-cart .added_to_cart {
	display: none !important;
}

@media (max-width: 900px) {
	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}

	.woocommerce-cart .wp-block-woocommerce-cart .wc-block-grid__product-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
	}
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-notice-banner {
	border-radius: var(--radius-md);
	font-family: var(--font-ui);
	font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   Focus + motion
   -------------------------------------------------------------------------- */

.woocommerce-cart .wp-block-woocommerce-cart a:focus-visible,
.woocommerce-cart .wp-block-woocommerce-cart button:focus-visible,
.woocommerce-cart .wp-block-woocommerce-cart input:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-cart .wp-block-woocommerce-cart * {
		transition: none !important;
	}

	.woocommerce-cart .wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-item__quantity button.wc-block-cart-item__remove-link:active {
		transform: none;
	}
}