/**
 * checkout.css — Della Boutique
 *
 * Cart, checkout, order-received and my-account. WooCommerce renders these
 * through the theme's page.php, so the first job is to let them out of the
 * narrow article measure that a normal page wants.
 *
 * Loaded on is_cart() / is_checkout() / is_account_page().
 */

/* =========================================================================
   1. Page shell
   ========================================================================= */

.woocommerce-cart .della-container--narrow,
.woocommerce-checkout .della-container--narrow,
.woocommerce-account .della-container--narrow {
	max-inline-size: var(--della-container);
}

.woocommerce-cart .della-page__head,
.woocommerce-checkout .della-page__head,
.woocommerce-account .della-page__head {
	margin-block-end: 26px;
}

/* These screens are forms, not prose — undo the editorial defaults. */
.woocommerce-cart .della-prose,
.woocommerce-checkout .della-prose,
.woocommerce-account .della-prose {
	line-height: 1.6;
}

.woocommerce-cart .della-prose > * + *,
.woocommerce-checkout .della-prose > * + *,
.woocommerce-account .della-prose > * + * {
	margin-block-start: 0;
}

/*
 * Woo's UI lists are not prose lists. The notices are excluded by name: the
 * error notice IS a <ul>, and this reset was zeroing the inline padding that
 * keeps its <li> text off the accent bar (that padding lives with the notice
 * skin in shop.css).
 */
.woocommerce-cart .della-prose ul:not(.woocommerce-error):not(.woocommerce-info):not(.woocommerce-message),
.woocommerce-checkout .della-prose ul:not(.woocommerce-error):not(.woocommerce-info):not(.woocommerce-message),
.woocommerce-account .della-prose ul:not(.woocommerce-error):not(.woocommerce-info):not(.woocommerce-message) {
	list-style: none;
	padding-inline-start: 0;
}

.woocommerce-cart .della-prose a,
.woocommerce-checkout .della-prose a,
.woocommerce-account .della-prose a {
	text-decoration: none;
}

/* =========================================================================
   2. Shared form fields
   ========================================================================= */

.form-row {
	display: block;
	margin-block-end: 16px;
	min-inline-size: 0;
}

.form-row label {
	display: block;
	margin-block-end: 6px;
	font-size: var(--della-fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
	color: var(--della-heading);
}

.form-row label.checkbox,
.form-row .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--della-fs-sm);
	font-weight: 400;
	color: var(--della-text);
	cursor: pointer;
}

.form-row abbr.required,
.required {
	color: var(--della-sale);
	text-decoration: none;
	border: 0;
}

.form-row .input-text,
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper textarea {
	inline-size: 100%;
}

.form-row.woocommerce-invalid .input-text,
.form-row.woocommerce-invalid .select2-selection {
	border-color: var(--della-sale);
}

.form-row.woocommerce-validated .input-text {
	border-color: var(--della-new);
}

.woocommerce-input-wrapper {
	display: block;
	inline-size: 100%;
}

/* WooCommerce ships these as floats; a grid is calmer and mirrors for free. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 16px;
}

@media (min-width: 600px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-address-fields__field-wrapper {
		grid-template-columns: 1fr 1fr;
	}

	.form-row-first,
	.form-row-last {
		grid-column: span 1;
	}

	.form-row-wide,
	.form-row.notes {
		grid-column: 1 / -1;
	}
}

.form-row-first,
.form-row-last,
.form-row-wide {
	float: none;
	inline-size: auto;
}

/* =========================================================================
   3. Responsive shop tables
   Below 768px each row becomes a card and the header cells are replaced by
   the data-title labels WooCommerce already emits.
   ========================================================================= */

table.shop_table {
	inline-size: 100%;
	margin-block-end: 24px;
	border: var(--della-line);
	border-radius: var(--della-radius);
	border-collapse: collapse;
	font-size: var(--della-fs-sm);
}

table.shop_table th,
table.shop_table td {
	padding: 14px 16px;
	text-align: start;
	vertical-align: middle;
	border-block-end: var(--della-line);
}

table.shop_table thead th {
	font-family: var(--della-font-body);
	font-size: var(--della-fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
	color: var(--della-heading);
	background: var(--della-surface);
	white-space: nowrap;
}

table.shop_table tbody tr:last-child td {
	border-block-end: 0;
}

table.shop_table .amount,
table.shop_table .woocommerce-Price-amount {
	color: var(--della-heading);
	font-weight: 500;
	white-space: nowrap;
}

@media (max-width: 767px) {
	table.shop_table_responsive thead {
		display: none;
	}

	table.shop_table_responsive,
	table.shop_table_responsive tbody,
	table.shop_table_responsive tr,
	table.shop_table_responsive td {
		display: block;
		inline-size: 100%;
	}

	table.shop_table_responsive tr {
		border-block-end: var(--della-line);
		padding-block: 6px;
	}

	table.shop_table_responsive tr:last-child {
		border-block-end: 0;
	}

	table.shop_table_responsive td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		border: 0;
		padding: 7px 16px;
		text-align: end;
	}

	table.shop_table_responsive td::before {
		content: attr(data-title) ": ";
		flex: none;
		font-size: var(--della-fs-xs);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: var(--della-tracking);
		color: var(--della-muted);
		text-align: start;
	}

	table.shop_table_responsive td.product-remove::before,
	table.shop_table_responsive td.product-thumbnail::before,
	table.shop_table_responsive td.actions::before {
		content: none;
	}
}

/* =========================================================================
   4. Cart page
   ========================================================================= */

.woocommerce-cart-form {
	margin-block-end: 30px;
}

.woocommerce-cart-form__contents .product-remove {
	inline-size: 46px;
	text-align: center;
}

.woocommerce-cart-form__contents .product-thumbnail {
	inline-size: 90px;
}

.woocommerce-cart-form__contents .product-thumbnail img {
	inline-size: 76px;
	aspect-ratio: var(--della-product-aspect);
	object-fit: cover;
	background: var(--della-surface);
	border-radius: var(--della-radius-sm);
}

.woocommerce-cart-form__contents .product-name a {
	font-weight: 600;
	color: var(--della-heading);
	font-size: var(--della-fs-sm);
}

.woocommerce-cart-form__contents .product-name a:hover {
	color: var(--della-accent-alt);
}

.woocommerce-cart-form__contents .variation {
	margin: 4px 0 0;
	font-size: var(--della-fs-xs);
	color: var(--della-muted);
}

.woocommerce-cart-form__contents .variation dt,
.woocommerce-cart-form__contents .variation dd {
	display: inline;
	margin: 0;
}

.woocommerce-cart-form__contents .variation dd + dt::before {
	content: " · ";
}

a.remove {
	display: inline-grid;
	place-items: center;
	inline-size: 26px;
	block-size: 26px;
	border-radius: 50%;
	background: var(--della-surface);
	color: var(--della-muted);
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--della-dur-fast) var(--della-ease),
		color var(--della-dur-fast) var(--della-ease);
}

a.remove:hover {
	background: var(--della-sale);
	color: var(--della-sale-contrast);
}

.product-quantity .quantity {
	display: inline-flex;
	align-items: center;
	border: var(--della-line);
	border-radius: var(--della-radius);
	block-size: 42px;
	overflow: hidden;
}

.product-quantity .qty {
	inline-size: 56px;
	block-size: 100%;
	min-block-size: 0;
	border: 0;
	border-radius: 0;
	padding: 0;
	text-align: center;
	background: transparent;
}

.product-quantity .qty:focus {
	box-shadow: none;
}

td.actions {
	background: var(--della-surface);
}

td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

td.actions .coupon label {
	display: none;
}

td.actions .coupon .input-text {
	inline-size: min(230px, 100%);
	min-block-size: 44px;
}

td.actions > .button[name="update_cart"] {
	float: inline-end;
	margin-block-start: 10px;
}

@media (min-width: 768px) {
	td.actions > .button[name="update_cart"] {
		margin-block-start: 0;
	}
}

/* --- Totals ------------------------------------------------------------- */

.cart-collaterals {
	display: grid;
	gap: var(--della-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 992px) {
	.cart-collaterals {
		grid-template-columns: 1fr minmax(320px, 400px);
		align-items: start;
	}

	.cart-collaterals .cross-sells {
		grid-column: 1;
	}

	.cart-collaterals .cart_totals {
		grid-column: 2;
	}
}

.cart_totals {
	background: var(--della-surface);
	border-radius: var(--della-radius);
	padding: clamp(20px, 4vw, 30px);
}

.cart_totals h2 {
	font-family: var(--della-font-body);
	font-size: var(--della-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking-wide);
	margin-block-end: 16px;
}

.cart_totals table.shop_table {
	border: 0;
	background: transparent;
	margin-block-end: 18px;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding: 11px 0;
	border-block-end: var(--della-line);
	background: transparent;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--della-fs-sm);
}

.cart_totals table.shop_table th {
	font-weight: 500;
	color: var(--della-muted);
	inline-size: 45%;
}

.cart_totals table.shop_table td {
	text-align: end;
}

.cart_totals tr.order-total th,
.cart_totals tr.order-total td {
	border-block-end: 0;
	font-size: var(--della-fs-md);
	color: var(--della-heading);
	font-weight: 600;
	padding-block-start: 15px;
}

.cart_totals .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 7px;
	text-align: start;
}

.cart_totals .woocommerce-shipping-destination {
	font-size: var(--della-fs-xs);
	color: var(--della-muted);
	margin-block-start: 8px;
}

.shipping-calculator-button {
	font-size: var(--della-fs-xs);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	color: var(--della-muted);
}

.wc-proceed-to-checkout {
	display: grid;
	gap: 10px;
}

.wc-proceed-to-checkout .checkout-button {
	inline-size: 100%;
	min-block-size: 52px;
}

.cross-sells > h2 {
	font-size: var(--della-fs-lg);
	margin-block-end: 20px;
}

/* The empty-cart state is laid out in section 17. */

/* =========================================================================
   5. Checkout
   ========================================================================= */

.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-info {
	margin-block-end: 20px;
}

.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-block-end: 26px;
	padding: 18px 20px;
	background: var(--della-surface);
	border-radius: var(--della-radius);
}

.checkout_coupon .form-row {
	margin: 0;
	flex: 1 1 200px;
}

.checkout_coupon .form-row-last {
	flex: 0 0 auto;
}

form.checkout {
	display: grid;
	gap: clamp(30px, 5vw, 56px);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 992px) {
	form.checkout {
		grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr);
		/*
		 * "Your order" and the panel under it are two rows of one object, so the
		 * column gutter must not open between them.
		 *
		 * The rows are typed too. #customer_details spans both, and when the
		 * billing form is taller than heading + panel the grid hands that slack
		 * to whichever tracks are intrinsically sized — which quietly inflated
		 * the heading's row and left a ~115px hole beneath it. max-content pins
		 * row 1 to the heading, and the flexible second track absorbs the slack
		 * instead.
		 */
		grid-template-rows: max-content 1fr;
		row-gap: 0;
	}

	form.checkout #customer_details {
		grid-row: 1 / 3;
	}

	form.checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
	}

	form.checkout #order_review {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		inset-block-start: calc(var(--della-header-h) + 20px);
	}
}

#customer_details {
	min-inline-size: 0;
}

#customer_details.col2-set {
	display: grid;
	gap: 30px;
	grid-template-columns: 1fr;
}

#customer_details .col-1,
#customer_details .col-2 {
	inline-size: auto;
	float: none;
	min-inline-size: 0;
}

#customer_details h3,
#order_review_heading {
	font-family: var(--della-font-body);
	font-size: var(--della-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking-wide);
	color: var(--della-heading);
	padding-block-end: 14px;
	margin-block-end: 20px;
	border-block-end: var(--della-line);
}

#customer_details h3 label,
#ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
	cursor: pointer;
}

#order_review {
	min-inline-size: 0;
	background: var(--della-surface);
	border-radius: var(--della-radius);
	padding: clamp(20px, 4vw, 30px);
}

#order_review_heading {
	margin-block-end: 14px;
}

.woocommerce-checkout-review-order-table {
	border: 0;
	background: transparent;
	margin-block-end: 0;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 11px 0;
	border-block-end: var(--della-line);
	background: transparent;
	font-size: var(--della-fs-sm);
}

.woocommerce-checkout-review-order-table thead th {
	background: transparent;
	padding-block-start: 0;
}

.woocommerce-checkout-review-order-table td {
	text-align: end;
}

.woocommerce-checkout-review-order-table th {
	font-weight: 500;
	color: var(--della-muted);
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce-checkout-review-order-table .product-name {
	text-align: start;
	color: var(--della-text);
	font-weight: 500;
}

.woocommerce-checkout-review-order-table .product-quantity {
	color: var(--della-muted);
	font-weight: 400;
}

.woocommerce-checkout-review-order-table .variation {
	margin: 3px 0 0;
	font-size: var(--della-fs-xs);
	color: var(--della-muted);
}

.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
	border-block-end: 0;
	font-size: var(--della-fs-md);
	font-weight: 600;
	color: var(--della-heading);
	padding-block-start: 15px;
}

@media (max-width: 767px) {
	.woocommerce-checkout-review-order-table th,
	.woocommerce-checkout-review-order-table td {
		display: table-cell;
	}
}

/* --- Payment ------------------------------------------------------------ */

#payment {
	margin-block-start: 22px;
	background: transparent;
}

#payment ul.wc_payment_methods {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
	border: 0;
}

#payment li.wc_payment_method {
	border: var(--della-line);
	border-radius: var(--della-radius);
	background: var(--della-bg);
	padding: 14px 16px;
	transition: border-color var(--della-dur-fast) var(--della-ease);
}

#payment li.wc_payment_method:has(input:checked) {
	border-color: var(--della-accent);
}

#payment li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: var(--della-fs-sm);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--della-heading);
	cursor: pointer;
}

#payment li.wc_payment_method > label img {
	max-block-size: 24px;
	inline-size: auto;
	margin-inline-start: auto;
}

#payment .payment_box {
	margin: 12px 0 0;
	padding: 12px 14px;
	background: var(--della-surface);
	border-radius: var(--della-radius-sm);
	font-size: var(--della-fs-sm);
	color: var(--della-muted);
	line-height: 1.6;
}

#payment .payment_box p:last-child {
	margin-block-end: 0;
}

#payment .woocommerce-privacy-policy-text {
	font-size: var(--della-fs-xs);
	color: var(--della-muted);
	line-height: 1.6;
	margin-block-end: 14px;
}

#payment .form-row.place-order {
	margin: 0;
	padding: 0;
}

#place_order,
#payment #place_order {
	inline-size: 100%;
	min-block-size: 54px;
	border: 1px solid var(--della-accent);
	border-radius: var(--della-radius);
	background: var(--della-accent);
	color: var(--della-accent-contrast);
	font-family: var(--della-font-body);
	font-size: var(--della-fs-btn);
	font-weight: 500;
	letter-spacing: var(--della-tracking);
	text-transform: var(--della-button-transform);
	cursor: pointer;
	transition: background-color var(--della-dur) var(--della-ease);
}

#place_order:hover {
	background: var(--della-accent-hover);
}

.woocommerce-terms-and-conditions-wrapper {
	margin-block-end: 14px;
	font-size: var(--della-fs-sm);
}

.blockUI.blockOverlay {
	background: var(--della-bg) !important; /* WooCommerce sets this colour inline on the overlay. */
	opacity: 0.6 !important;
}

/* =========================================================================
   6. Order received / order details
   ========================================================================= */

.woocommerce-thankyou-order-received {
	font-family: var(--della-font-heading);
	font-size: var(--della-fs-lg);
	color: var(--della-heading);
	text-align: center;
	padding-block: 20px 26px;
}

ul.woocommerce-order-overview,
ul.order_details {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
	background: var(--della-border);
	border: var(--della-line);
	border-radius: var(--della-radius);
	overflow: hidden;
}

ul.woocommerce-order-overview li,
ul.order_details li {
	background: var(--della-bg);
	padding: 16px 18px;
	font-size: var(--della-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
	color: var(--della-muted);
	border: 0;
	margin: 0;
}

ul.woocommerce-order-overview li strong,
ul.order_details li strong {
	display: block;
	margin-block-start: 6px;
	font-family: var(--della-font-body);
	font-size: var(--della-fs-sm);
	text-transform: none;
	letter-spacing: 0;
	color: var(--della-heading);
}

.woocommerce-order-details,
.woocommerce-customer-details {
	margin-block-end: 34px;
}

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2 {
	font-family: var(--della-font-body);
	font-size: var(--della-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking-wide);
	margin-block-end: 16px;
}

address {
	font-style: normal;
	line-height: 1.8;
	font-size: var(--della-fs-sm);
	color: var(--della-muted);
	border: var(--della-line);
	border-radius: var(--della-radius);
	padding: 16px 18px;
}

.woocommerce-customer-details .col2-set,
.woocommerce-Addresses.u-columns {
	display: grid;
	gap: var(--della-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.woocommerce-customer-details .col2-set,
	.woocommerce-Addresses.u-columns {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-customer-details .col-1,
.woocommerce-customer-details .col-2,
.woocommerce-Addresses .col-1,
.woocommerce-Addresses .col-2 {
	inline-size: auto;
	float: none;
}

/* =========================================================================
   7. My account
   ========================================================================= */

.woocommerce-account .woocommerce {
	display: grid;
	gap: clamp(24px, 4vw, 48px);
	grid-template-columns: 1fr;
	align-items: start;
	padding-block: 10px 20px;
}

/*
 * The two-column account layout must only exist when there is a sidebar to put
 * in the first column. It used to key off `body:not(.logged-out)`, but WordPress
 * never adds a `logged-out` class — so the logged-out login page was also laid
 * out as 220px + rest, which is why the "Login" heading sat marooned in an empty
 * left column beside the form. Ask for the nav itself instead: it is only ever
 * printed for a signed-in customer.
 */
@media (min-width: 768px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 220px minmax(0, 1fr);
	}
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1px;
	border: var(--della-line);
	border-radius: var(--della-radius);
	overflow: hidden;
	background: var(--della-border);
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
	background: var(--della-bg);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 13px 16px;
	font-size: var(--della-fs-sm);
	color: var(--della-text);
	transition: background-color var(--della-dur-fast) var(--della-ease),
		color var(--della-dur-fast) var(--della-ease);
}

.woocommerce-MyAccount-navigation a:hover {
	background: var(--della-surface);
	color: var(--della-heading);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--della-accent);
	color: var(--della-accent-contrast);
	font-weight: 500;
}

.woocommerce-MyAccount-content {
	min-inline-size: 0;
	font-size: var(--della-fs-sm);
	line-height: 1.75;
}

.woocommerce-MyAccount-content > p:first-child {
	margin-block-end: 16px;
}

/* Section labels, in the same small-caps voice as the checkout column heads. */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: var(--della-font-body);
	font-size: var(--della-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking-wide);
	color: var(--della-heading);
	margin-block: 30px 14px;
}

.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-MyAccount-content .button {
	min-block-size: 38px;
	padding: 7px 16px;
	font-size: var(--della-fs-xs);
}

/* --- Login / register --------------------------------------------------- */

.woocommerce-account.logged-out .woocommerce > .u-columns,
.woocommerce-account .u-columns.col2-set {
	display: grid;
	gap: var(--della-gap);
	grid-template-columns: 1fr;
	grid-column: 1 / -1;
}

@media (min-width: 768px) {
	.woocommerce-account.logged-out .woocommerce > .u-columns,
	.woocommerce-account .u-columns.col2-set {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	inline-size: auto;
	float: none;
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword,
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
	border: var(--della-line);
	border-radius: var(--della-radius);
	padding: clamp(20px, 4vw, 30px);
	background: var(--della-bg);
}

.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--della-fs-sm);
	color: var(--della-text);
	margin-block-end: 12px;
}

.woocommerce-form-login .button,
.woocommerce-form-register .button,
.woocommerce-EditAccountForm .button {
	inline-size: 100%;
}

.woocommerce-LostPassword {
	margin-block-start: 12px;
	font-size: var(--della-fs-sm);
}

.woocommerce-LostPassword a {
	color: var(--della-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.woocommerce-password-strength {
	margin-block-start: 8px;
	font-size: var(--della-fs-xs);
	padding: 6px 10px;
	border-radius: var(--della-radius-sm);
	background: var(--della-surface);
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
	color: var(--della-sale);
}

.woocommerce-password-strength.good,
.woocommerce-password-strength.strong {
	color: var(--della-new);
}

.woocommerce-password-hint {
	display: block;
	margin-block-start: 6px;
	font-size: var(--della-fs-xs);
	color: var(--della-muted);
	line-height: 1.5;
}

/* =========================================================================
   8. Cart page free-shipping bar
   ========================================================================= */

.woocommerce-cart .della-shipbar {
	max-inline-size: 520px;
	margin-inline: auto;
	margin-block-end: 24px;
}

/* =========================================================================
   9. Native control rows

   Every radio and checkbox in the shop flow is followed by a plain label.
   Nothing in WooCommerce's markup puts space between the two, and an
   inline-block label happily runs back over the input — measured at -17px on
   the cart's shipping methods, i.e. the label sat entirely on top of the radio.
   Patching margins one selector at a time is what created that drift, so each
   row becomes a flex line instead: the gap is real layout, and align-items
   replaces the input's vertical-align nudge.
   ========================================================================= */

#shipping_method li,
.woocommerce-shipping-methods li,
#payment ul.wc_payment_methods li.wc_payment_method,
.woocommerce-shipping-totals .shipping__option {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	list-style: none;
}

/*
 * The payment row is the last thing read before paying, so it gets the same
 * treatment plus room for its description panel: the radio and its label sit on
 * one line, and .payment_box drops onto a full-width second line beneath them.
 */
#payment ul.wc_payment_methods li.wc_payment_method {
	flex-wrap: wrap;
}

#payment li.wc_payment_method > label {
	flex: 1 1 auto;
	min-inline-size: 0;
}

#payment li.wc_payment_method > .payment_box {
	flex: 1 0 100%;
}

#shipping_method li label,
.woocommerce-shipping-methods li label,
#payment li.wc_payment_method > label {
	margin: 0;
}

/*
 * Checkbox rows — remember me, ship-to-different-address, terms. flex-start
 * rather than center because these labels wrap, and a centred box drifts to the
 * middle of a two-line label.
 */
.woocommerce-form__label-for-checkbox,
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--della-fs-sm);
	line-height: 1.55;
	color: var(--della-text);
	cursor: pointer;
}

.woocommerce-form__label-for-checkbox input[type="checkbox"] {
	/* Sits on the first line's optical centre when the label wraps. */
	margin-block-start: 0.12em;
}

.woocommerce-form-login__rememberme {
	display: flex;
	margin-block-end: 14px;
}

.woocommerce-terms-and-conditions-wrapper {
	margin-block-end: 16px;
}

/* =========================================================================
   10. Cart page layout

   The cart used to stack a full-width table over a collaterals grid whose left
   column was empty whenever there were no cross-sells — which is most of the
   time — leaving the totals stranded beside a screen-wide blank. Pair the table
   with the totals instead, and fall back to the stacked layout on the rare page
   that does have cross-sells to show.
   ========================================================================= */

@media (min-width: 992px) {
	.woocommerce-cart .woocommerce:not(:has(.cross-sells)) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
		column-gap: clamp(30px, 4vw, 56px);
		align-items: start;
	}

	.woocommerce-cart .woocommerce:not(:has(.cross-sells)) > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .woocommerce:not(:has(.cross-sells)) .woocommerce-cart-form {
		margin-block-end: 0;
	}

	.woocommerce-cart .woocommerce:not(:has(.cross-sells)) .cart-collaterals {
		grid-template-columns: minmax(0, 1fr);
		position: sticky;
		inset-block-start: calc(var(--della-header-h) + 20px);
	}

	.woocommerce-cart .woocommerce:not(:has(.cross-sells)) .cart-collaterals .cart_totals {
		grid-column: 1;
	}
}

/*
 * Auto table layout sizes every column to its content, so four short columns
 * huddled on the left of a 1300px table. Letting the product name claim the
 * slack pushes price, quantity and subtotal out to the right where they belong,
 * and keeps the money columns from wrapping.
 */
.woocommerce-cart-form__contents .product-name {
	inline-size: 100%;
}

/*
 * A cell at 100% squeezes every other column down to its min-content, and the
 * global `img { max-inline-size: 100% }` lets the thumbnail's min-content go to
 * zero — which collapsed the photograph to 0×0. Pin the column and the image so
 * they hold their size against the greedy name column.
 */
.woocommerce-cart-form__contents .product-thumbnail {
	min-inline-size: 90px;
}

.woocommerce-cart-form__contents .product-thumbnail img {
	min-inline-size: 76px;
	max-inline-size: none;
}

.woocommerce-cart-form__contents .product-price,
.woocommerce-cart-form__contents .product-subtotal {
	white-space: nowrap;
	text-align: end;
}

.woocommerce-cart-form__contents th.product-price,
.woocommerce-cart-form__contents th.product-subtotal {
	text-align: end;
}

@media (max-width: 767px) {
	/* The responsive card layout re-labels every cell; right alignment there
	   would fight the label sitting on the same line. */
	.woocommerce-cart-form__contents .product-price,
	.woocommerce-cart-form__contents .product-subtotal {
		text-align: end;
	}
}

/* =========================================================================
   11. My account — logged-out view

   With no navigation to sit beside, the login (and lost-password) form is a
   single centred object rather than a column of a two-column page.
   ========================================================================= */

.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
	max-inline-size: 460px;
	margin-inline: auto;
	inline-size: 100%;
}

.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) > h2 {
	font-family: var(--della-font-body);
	font-size: var(--della-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking-wide);
	color: var(--della-heading);
	text-align: center;
	margin: 0;
}

/* =========================================================================
   12. My account — signed-in views
   ========================================================================= */

.woocommerce-MyAccount-navigation {
	min-inline-size: 0;
}

/* The dashboard greeting is the one place the account pages get warm. */
.woocommerce-MyAccount-content > p:first-child strong {
	color: var(--della-heading);
	font-weight: 600;
}

.woocommerce-MyAccount-content > h2:first-child,
.woocommerce-MyAccount-content > h3:first-child {
	margin-block-start: 0;
}

.woocommerce-orders-table,
.woocommerce-MyAccount-content table.shop_table {
	inline-size: 100%;
}

.woocommerce-orders-table__cell-order-number a {
	font-weight: 600;
	color: var(--della-heading);
}

/*
 * Auto table layout again: without a column claiming the slack, all five sit
 * huddled on the left of a full-width table. The actions column takes it and
 * carries its buttons out to the right edge where they read as row controls.
 */
.woocommerce-orders-table th.woocommerce-orders-table__header-order-actions,
.woocommerce-orders-table__cell-order-actions {
	inline-size: 100%;
	text-align: end;
	white-space: nowrap;
}

/* An order row's buttons are secondary actions, not calls to action. */
.woocommerce-orders-table__cell-order-actions .button + .button {
	margin-inline-start: 6px;
}

.woocommerce-Address {
	min-inline-size: 0;
}

/* The <address> below already carries a frame; a rule here would double it. */
.woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 10px;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
	font-family: var(--della-font-body);
	font-size: var(--della-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking-wide);
	color: var(--della-heading);
}

.woocommerce-Address-title .edit {
	font-size: var(--della-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
	color: var(--della-muted);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	white-space: nowrap;
}

.woocommerce-Address-title .edit:hover {
	color: var(--della-heading);
}

.woocommerce-Address address {
	font-style: normal;
	font-size: var(--della-fs-sm);
	line-height: 1.8;
	color: var(--della-text);
}

.woocommerce-EditAccountForm fieldset {
	margin-block-start: 26px;
	padding: 0;
	border: 0;
	border-block-start: var(--della-line-hair);
	padding-block-start: 22px;
}

.woocommerce-EditAccountForm legend {
	padding: 0;
	font-family: var(--della-font-body);
	font-size: var(--della-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking-wide);
	color: var(--della-heading);
}

/*
 * With the actions column claiming the table's slack, the short columns would
 * otherwise be squeezed to min-content and wrap "August 18, 2026" onto three
 * lines. Keeping them on one line hands the remainder to actions cleanly.
 * Only above the responsive breakpoint — below it every cell is its own row.
 */
@media (min-width: 768px) {
	.woocommerce-orders-table__cell {
		white-space: nowrap;
	}
}

/* The account details form follows the same two-up field rhythm as addresses. */
@media (min-width: 600px) {
	.woocommerce-EditAccountForm {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 16px;
	}

	.woocommerce-EditAccountForm > .form-row-wide,
	.woocommerce-EditAccountForm > fieldset,
	.woocommerce-EditAccountForm > p:last-child {
		grid-column: 1 / -1;
	}
}

/* =========================================================================
   13. Cart and checkout on small screens
   ========================================================================= */

@media (max-width: 767px) {
	/*
	 * In the card layout each cell becomes its own row, and the thumbnail cell
	 * kept the 90px width it needs in the desktop table — leaving the
	 * photograph stranded in the corner of a full-width blank band. Centre it
	 * and let it be the card's picture.
	 */
	.woocommerce-cart-form__contents .product-thumbnail {
		inline-size: 100%;
		justify-content: center;
		padding-block: 14px 4px;
	}

	.woocommerce-cart-form__contents .product-thumbnail img {
		inline-size: 120px;
		min-inline-size: 0;
	}

	/*
	 * The totals table is a two-column label/value list, not a list of records,
	 * so the card treatment does not apply to it: its <th> labels were already
	 * showing and the generated data-title labels repeated every one of them
	 * ("Subtotal" followed by "SUBTOTAL: $116.00"). Put it back to a table.
	 */
	.cart_totals table.shop_table_responsive {
		display: table;
	}

	.cart_totals table.shop_table_responsive tbody {
		display: table-row-group;
	}

	.cart_totals table.shop_table_responsive tr {
		display: table-row;
		padding-block: 0;
	}

	.cart_totals table.shop_table_responsive th,
	.cart_totals table.shop_table_responsive td {
		display: table-cell;
		padding: 12px 0;
	}

	.cart_totals table.shop_table_responsive td::before {
		content: none;
	}

	/* Shipping choices need the full width once the label column is narrow. */
	.cart_totals .woocommerce-shipping-methods,
	.cart_totals .woocommerce-shipping-destination {
		text-align: start;
	}
}

/*
 * Touch strike areas for the choice rows. The label is the real target (the
 * 17px control is only its marker), so the row — not the box — is what needs
 * to reach 44px.
 */
@media (max-width: 991px) {
	#shipping_method li,
	.woocommerce-shipping-methods li,
	.woocommerce-shipping-totals .shipping__option {
		min-block-size: 44px;
	}

	.woocommerce-form__label-for-checkbox,
	.form-row label.checkbox,
	.form-row .woocommerce-form__label-for-checkbox {
		padding-block: 11px;
	}
}

/* =========================================================================
   14. Order tables — order-received, My account → view order, downloads

   The base `table.shop_table` rules give these a frame and 14px/16px cells,
   which reads as cramped once a table is the main object on the page rather
   than a strip inside a card. Everything below is about the *order view*
   specifically: a wider gutter inside every cell, a taller row, a header band
   that reads as a header, and a totals block that is visibly a summary and not
   just two more line items.

   The reason the table looked "broken" at all was `.della-prose table`
   forcing `display: block` (fixed in base.css); these rules are the finish.
   ========================================================================= */

.woocommerce-table--order-details,
.woocommerce-table--order-downloads,
.woocommerce-order-details table.shop_table,
.woocommerce-view-order table.shop_table,
table.order_details {
	inline-size: 100%;
	table-layout: auto;
	border-collapse: collapse;
	background: var(--della-bg);
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td,
.woocommerce-table--order-downloads th,
.woocommerce-table--order-downloads td,
.woocommerce-order-details table.shop_table th,
.woocommerce-order-details table.shop_table td,
.woocommerce-view-order table.shop_table th,
.woocommerce-view-order table.shop_table td {
	padding: 18px 22px;
	vertical-align: middle;
	line-height: 1.55;
}

/* A comfortable row height even for a one-line download or fee row. */
.woocommerce-table--order-details tbody tr,
.woocommerce-table--order-downloads tbody tr,
.woocommerce-order-details table.shop_table tbody tr,
.woocommerce-view-order table.shop_table tbody tr {
	block-size: 84px;
}

.woocommerce-table--order-details thead th,
.woocommerce-table--order-downloads thead th,
.woocommerce-order-details table.shop_table thead th,
.woocommerce-view-order table.shop_table thead th {
	padding-block: 15px;
	background: var(--della-surface);
	border-block-end: var(--della-line);
	color: var(--della-heading);
	font-size: var(--della-fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--della-tracking);
}

/* Line items keep a hairline between them; the last one closes into tfoot. */
.woocommerce-table--order-details tbody td,
.woocommerce-table--order-downloads tbody td,
.woocommerce-order-details table.shop_table tbody td,
.woocommerce-view-order table.shop_table tbody td {
	border-block-end: var(--della-line-soft);
}

/*
 * Money columns: nailed to the end edge and never wrapping, so the amounts
 * form a single column the eye can run down. The name column takes the slack
 * — without this the auto layout huddles both columns on the start edge.
 */
.woocommerce-table--order-details .product-name,
.woocommerce-table--order-details th.product-name,
.woocommerce-view-order table.shop_table .product-name,
.woocommerce-table--order-downloads .download-product {
	inline-size: 100%;
}

.woocommerce-table--order-details .product-total,
.woocommerce-table--order-details th.product-total,
.woocommerce-table--order-details tfoot td,
.woocommerce-view-order table.shop_table .product-total,
.woocommerce-view-order table.shop_table tfoot td {
	text-align: end;
	white-space: nowrap;
}

/* The per-line "× 2" multiplier reads as an annotation, not as a name. */
.woocommerce-table--order-details .product-quantity,
.woocommerce-view-order table.shop_table .product-quantity {
	color: var(--della-muted);
	font-weight: 500;
	white-space: nowrap;
}

.woocommerce-table--order-details td.product-name .wc-item-meta,
.woocommerce-view-order table.shop_table td.product-name .wc-item-meta {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--della-fs-xs);
	color: var(--della-muted);
}

.woocommerce-table--order-details td.product-name .wc-item-meta p,
.woocommerce-view-order table.shop_table td.product-name .wc-item-meta p {
	margin: 0;
	display: inline;
}

/*
 * Totals. A double rule at the top of the tfoot is what separates a summary
 * from the list above it; the label column is muted and the last row (the
 * grand total, or the payment method line under it) carries the weight.
 */
.woocommerce-table--order-details tfoot,
.woocommerce-view-order table.shop_table tfoot {
	background: var(--della-surface);
}

.woocommerce-table--order-details tfoot tr:first-child th,
.woocommerce-table--order-details tfoot tr:first-child td,
.woocommerce-view-order table.shop_table tfoot tr:first-child th,
.woocommerce-view-order table.shop_table tfoot tr:first-child td {
	border-block-start: 2px solid var(--della-border);
}

.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td,
.woocommerce-view-order table.shop_table tfoot th,
.woocommerce-view-order table.shop_table tfoot td {
	padding-block: 13px;
	border-block-end: var(--della-line-soft);
	font-size: var(--della-fs-sm);
}

.woocommerce-table--order-details tfoot th,
.woocommerce-view-order table.shop_table tfoot th {
	inline-size: 100%;
	font-weight: 500;
	text-align: end;
	text-transform: none;
	letter-spacing: 0;
	color: var(--della-muted);
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td,
.woocommerce-view-order table.shop_table tfoot tr:last-child th,
.woocommerce-view-order table.shop_table tfoot tr:last-child td {
	border-block-end: 0;
	padding-block-end: 20px;
}

/* The grand total is the one number anybody actually looks for. */
.woocommerce-table--order-details tfoot tr.order-total th,
.woocommerce-table--order-details tfoot tr.order-total td,
.woocommerce-view-order table.shop_table tfoot tr.order-total th,
.woocommerce-view-order table.shop_table tfoot tr.order-total td {
	font-size: var(--della-fs-md);
	font-weight: 600;
	color: var(--della-heading);
}

/* Customer details sit under the table and should read as the same object. */
.woocommerce-customer-details address {
	background: var(--della-surface);
	border: var(--della-line);
	padding: 20px 22px;
	color: var(--della-text);
}

.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
	margin-block-start: 10px;
	margin-block-end: 0;
	font-size: var(--della-fs-sm);
	color: var(--della-muted);
}

/* =========================================================================
   15. Order-summary line item (.della-orderitem)

   Printed by the theme into the order-details table, the My-account order
   view and the checkout review table. The markup is inline spans, so the
   first job is to give the wrapper a box; without it the raw <img> rendered
   at its intrinsic 180×240 and pushed the price column off the row.
   ========================================================================= */

.della-orderitem {
	display: flex;
	align-items: center;
	gap: 14px;
	min-inline-size: 0;
	text-align: start;
}

.della-orderitem__thumb {
	display: block;
	flex: 0 0 auto;
	inline-size: 60px;
	overflow: hidden;
	border: var(--della-line);
	border-radius: var(--della-radius);
	background: var(--della-surface);
	line-height: 0;
}

.della-orderitem__img {
	display: block;
	inline-size: 100%;
	/* Not `max-inline-size` — the global img rule caps at 100% of a cell that
	   the flex row has already squeezed, which collapsed the thumbnail. */
	block-size: auto;
	aspect-ratio: var(--della-product-aspect);
	object-fit: cover;
}

.della-orderitem__name {
	display: block;
	min-inline-size: 0;
	font-size: var(--della-fs-sm);
	font-weight: 600;
	line-height: 1.45;
	color: var(--della-heading);
	overflow-wrap: anywhere;
}

.della-orderitem__name a {
	color: inherit;
	text-decoration: none;
}

.della-orderitem__name a:hover,
.della-orderitem__name a:focus-visible {
	color: var(--della-accent-alt);
}

/* The variation / meta list WooCommerce prints after the name. */
.della-orderitem__name .variation,
.della-orderitem__name .wc-item-meta {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--della-fs-xs);
	font-weight: 400;
	color: var(--della-muted);
}

/*
 * In the order tables the multiplier and the meta list are siblings of the
 * component, not children of it, so the cell has to be the flex row that
 * lines them up beside the thumbnail.
 */
.woocommerce-table--order-details td.product-name,
.woocommerce-view-order table.shop_table td.product-name,
.woocommerce-checkout-review-order-table td.product-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 6px 12px;
}

.woocommerce-table--order-details td.product-name > .della-orderitem,
.woocommerce-view-order table.shop_table td.product-name > .della-orderitem,
.woocommerce-checkout-review-order-table td.product-name > .della-orderitem {
	/* Shrink to content, so the "× 2" multiplier sits beside the name instead
	   of being flung to the far end of a very wide cell. */
	flex: 0 1 auto;
}

.woocommerce-table--order-details td.product-name > .wc-item-meta,
.woocommerce-view-order table.shop_table td.product-name > .wc-item-meta,
.woocommerce-checkout-review-order-table td.product-name > .wc-item-meta {
	flex: 1 1 100%;
	/* Clear the thumbnail so the meta list lines up with the name above it. */
	margin-inline-start: 74px;
}

/* The narrow checkout review column gets a smaller thumbnail. */
.woocommerce-checkout-review-order-table .della-orderitem__thumb {
	inline-size: 56px;
}

.woocommerce-checkout-review-order-table .della-orderitem {
	gap: 12px;
}

@media (max-width: 767px) {
	/*
	 * The card layout turns every cell into a label/value row with
	 * `justify-content: space-between`, which would stretch the thumbnail
	 * away from the name. Keep the component together and let it lead.
	 */
	.della-orderitem {
		gap: 12px;
	}

	.della-orderitem__thumb {
		inline-size: 56px;
	}

	.woocommerce-table--order-details td.product-name,
	.woocommerce-view-order table.shop_table td.product-name,
	.woocommerce-checkout-review-order-table td.product-name {
		justify-content: flex-start;
		text-align: start;
	}

	.woocommerce-table--order-details td.product-name > .wc-item-meta,
	.woocommerce-view-order table.shop_table td.product-name > .wc-item-meta,
	.woocommerce-checkout-review-order-table td.product-name > .wc-item-meta {
		margin-inline-start: 68px;
	}

	/*
	 * In a column this narrow the "\D7 1" often cannot share the line with the
	 * name. Pushing it to the end edge makes the wrap read as an annotation on
	 * the item rather than as an orphan under the thumbnail.
	 */
	.woocommerce-table--order-details td.product-name > .product-quantity,
	.woocommerce-view-order table.shop_table td.product-name > .product-quantity,
	.woocommerce-checkout-review-order-table td.product-name > .product-quantity {
		margin-inline-start: auto;
	}
}

/* =========================================================================
   16. Order tables on small screens
   ========================================================================= */

@media (max-width: 767px) {
	/*
	 * These two are NOT `shop_table_responsive`, so they stay real tables on
	 * mobile. Two columns fit; they just need the padding pulled back in.
	 */
	.woocommerce-table--order-details th,
	.woocommerce-table--order-details td,
	.woocommerce-table--order-downloads th,
	.woocommerce-table--order-downloads td,
	.woocommerce-order-details table.shop_table th,
	.woocommerce-order-details table.shop_table td,
	.woocommerce-view-order table.shop_table th,
	.woocommerce-view-order table.shop_table td {
		padding: 14px;
	}

	.woocommerce-table--order-details tbody tr,
	.woocommerce-order-details table.shop_table tbody tr,
	.woocommerce-view-order table.shop_table tbody tr {
		block-size: auto;
	}

	.woocommerce-table--order-details tfoot th,
	.woocommerce-table--order-details tfoot td,
	.woocommerce-view-order table.shop_table tfoot th,
	.woocommerce-view-order table.shop_table tfoot td {
		padding-block: 11px;
	}

	/* The downloads table DOES carry the responsive class — its cells are
	   cards, so undo the table padding the block above just set. */
	.woocommerce-table--order-downloads.shop_table_responsive th,
	.woocommerce-table--order-downloads.shop_table_responsive td {
		padding: 8px 14px;
	}
}

/* =========================================================================
   17. Empty cart

   The empty state itself is the generic .della-emptystate component in
   components.css — it is reused for empty search results and an empty
   wishlist, so nothing about it may assume the cart. All that belongs here is
   getting it OUT of section 10's two-column cart grid, which was dropping the
   message into the left column and the button into the totals column and
   pinning both to the top of a 96px-tall page.
   ========================================================================= */

.woocommerce-cart .woocommerce:has(.della-emptystate) {
	display: block;
}

/*
 * WooCommerce still prints its own "Return to shop" paragraph after the empty
 * state — only wc_empty_cart_message was unhooked. It duplicates the
 * component's own primary action and lands hard against the start edge under a
 * centred block. Centre it until it is unhooked in PHP (see the handover note).
 */
.woocommerce-cart .woocommerce:has(.della-emptystate) .return-to-shop {
	margin: 0;
	padding-block-end: clamp(30px, 6vw, 56px);
	text-align: center;
}