/* ==========================================================================
   Cleandosis — cart.css
   The cart in both of its forms: the drawer that opens on every page, and the
   classic cart page at /cart/.

   Loaded on every page where WooCommerce is active (inc/setup.php), because the
   drawer is on every page. The drawer's base rules live in theme.css section 10
   — this file only carries what round 16 changed, so the two have to be read
   together. Everything else here is scoped to .cd-cart, .cd-cart-empty or
   .cd-toast and cannot reach a page that has none of them.

   A few selectors are prefixed with .cd-page__body.cd-prose. page.php renders
   /cart/ like any written page, and .cd-prose decorates lists, headings and
   tables in ways a cart must not inherit. Same reasoning as checkout.css
   section 1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The page frame

   .cd-page is capped at a reading measure, which is too narrow for a list and
   a summary side by side. .woocommerce-cart is WooCommerce's own body class.
   -------------------------------------------------------------------------- */
.woocommerce-cart .cd-page {
	max-width: none;
	padding-top: clamp(20px, 3vw, 36px);
}

.woocommerce-cart .cd-page::before { content: none; }

.cd-page__body.cd-prose .cd-cart {
	font-size: 15px;
	line-height: 1.55;
}

/* .cd-prose's hanging bullets, rules over headings and table chrome are for
   written pages. Off, inside the cart. */
.cd-page__body.cd-prose .cd-cart h2,
.cd-page__body.cd-prose .cd-cart h3 {
	margin: 0;
	padding-top: 0;
}

.cd-page__body.cd-prose .cd-cart h2::before,
.cd-page__body.cd-prose .cd-cart h3::before,
.cd-page__body.cd-prose .cd-cart li::before {
	content: none;
}

.cd-page__body.cd-prose .cd-cart p { margin: 0; }

.cd-page__body.cd-prose .cd-cart ul,
.cd-page__body.cd-prose .cd-cart ol {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.cd-page__body.cd-prose .cd-cart li { margin: 0; }
.cd-page__body.cd-prose .cd-cart a { text-decoration: none; }
.cd-page__body.cd-prose .cd-cart a:hover { text-decoration: underline; }

.cd-page__body.cd-prose .cd-cart table {
	display: table;
	width: 100%;
	margin: 0;
	border: 0;
	font-size: inherit;
}

.cd-page__body.cd-prose .cd-cart th,
.cd-page__body.cd-prose .cd-cart td {
	border: 0;
	background: transparent;
	padding: 0;
	text-align: left;
	font-weight: 400;
	/* .cd-prose small-caps a table head. "SUBTOTAL" beside "TOTAL" at two
	   different sizes reads as two different kinds of row; they are not. */
	text-transform: none;
	letter-spacing: 0;
	font-size: inherit;
	color: inherit;
}

/* --------------------------------------------------------------------------
   2. Layout
   -------------------------------------------------------------------------- */
.cd-cart {
	/* Near-white, warmed by the palette, so a card reads as a surface above
	   --color-bg without adding a colour the Customizer cannot move. */
	--cd-cart-card: color-mix(in srgb, var(--color-neutral-100) 45%, #fff);
	--cd-cart-line: color-mix(in srgb, var(--color-text) 9%, transparent);

	display: block;
	max-width: 100%;
}

.cd-cart__head {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.cd-page__body.cd-prose .cd-cart__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(22px, 2.4vw, 28px);
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.cd-cart__count {
	font-size: 13px;
	color: var(--color-neutral-700);
}

.cd-cart__count::before {
	content: "·";
	margin-right: var(--space-2);
	color: var(--color-neutral-500);
}

.cd-cart__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(20px, 2.6vw, 36px);
	align-items: start;
}

.cd-cart__main { min-width: 0; }

.cd-cart__aside {
	min-width: 0;
	position: sticky;
	top: calc(var(--cd-header-h, 72px) + 20px);
}

/* --------------------------------------------------------------------------
   3. The line items
   -------------------------------------------------------------------------- */
.cd-cart__list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	transition: opacity .18s ease;
}

.cd-page__body.cd-prose .cd-cart__items {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.cd-page__body.cd-prose .cd-cart__item,
.cd-cart__item {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-3);
	background: var(--cd-cart-card);
	border: 1px solid var(--cd-cart-line);
	border-radius: var(--radius-lg);
}

.cd-cart__thumb {
	width: 88px;
	line-height: 0;
}

.cd-cart__thumb img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.cd-cart__body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-3);
	min-width: 0;
}

/* The controls decide the card's minimum width. Without this the stepper's
   intrinsic size pushes the whole body wider than its grid track, and the
   product name is the thing that gets clipped. */
.cd-cart__body,
.cd-cart__controls { min-width: 0; }

.cd-cart__lines {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 220px;
}

.cd-cart__meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
	margin-bottom: 1px;
}

.cd-cart__kicker {
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-700);
}

.cd-cart__rx {
	font-size: 10px;
	letter-spacing: 0.06em;
	padding: 2px 8px;
}

.cd-page__body.cd-prose .cd-cart__name,
.cd-cart__name {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.25;
	color: var(--color-text);
	overflow-wrap: break-word;
}

.cd-cart__name:hover { color: var(--color-accent-700); }

.cd-cart__variant,
.cd-page__body.cd-prose .cd-cart__variant p,
.cd-cart__variant p,
.cd-cart__variant dl,
.cd-cart__variant dt,
.cd-cart__variant dd {
	font-size: 13px;
	line-height: 19px;
	color: var(--color-neutral-700);
	margin: 0;
}

.cd-cart__variant dl {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
}

.cd-cart__unit {
	font-size: 13.5px;
	color: var(--color-neutral-700);
	margin-top: 2px;
}

.cd-page__body.cd-prose .backorder_notification,
.cd-cart__item .backorder_notification {
	font-size: 12.5px;
	color: var(--color-accent-800);
	margin: 2px 0 0;
}

.cd-cart__controls {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex: 0 0 auto;
}

/* The 44px stepper the design asks for: touch-sized on every screen. */
.cd-qty--lg {
	padding: 3px;
	gap: 2px;
}

.cd-qty--lg .cd-qty__btn {
	width: 38px;
	height: 38px;
}

.cd-qty--lg .cd-qty__input {
	width: 46px;
	min-height: 38px;
	font-size: 15px;
}

.cd-cart__total {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 17px;
	min-width: 74px;
	text-align: right;
	white-space: nowrap;
}

.cd-page__body.cd-prose .cd-cart__remove,
.cd-cart__remove {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: none;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--color-neutral-700);
	line-height: 0;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

.cd-cart__remove:hover {
	background: var(--color-surface);
	color: var(--color-accent-800);
	text-decoration: none;
}

/* The prescription line, under the items it describes. */
.cd-page__body.cd-prose .cd-cart__list .cd-note--cart,
.cd-cart__list .cd-note--cart {
	margin: var(--space-1) 0 0;
}

/* No-JS: the stepper cannot save on its own, so WooCommerce's own
   "Update cart" button is the way to commit a quantity. With JavaScript the
   change is already saved, and the button is noise. */
.cd-cart__actions {
	margin-top: var(--space-3);
}

.cd-js .cd-cart__actions { display: none; }

.cd-cart__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
	font-size: 14px;
}

.cd-cart__back svg { flex: none; }

/* -- Loading veil ---------------------------------------------------------
   While a fragment request is in flight the list is dimmed and a spinner is
   drawn over it, so a slow connection does not look like a dead button. */
.cd-cart__spinner {
	position: absolute;
	inset: 0;
	display: none;
	pointer-events: none;
}

.cd-cart__list.is-busy {
	opacity: .5;
	pointer-events: none;
}

.cd-cart__list.is-busy .cd-cart__spinner { display: block; }

.cd-cart__spinner::after,
.cd-drawer__veil::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border: 2px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
	border-top-color: var(--color-accent);
	border-radius: 50%;
	animation: cd-cart-spin .7s linear infinite;
}

@keyframes cd-cart-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.cd-cart__spinner::after,
	.cd-drawer__veil::after { animation-duration: 2.4s; }
	.cd-cart__list { transition: none; }
}

/* --------------------------------------------------------------------------
   4. The order summary
   -------------------------------------------------------------------------- */
.cd-cart-sum { min-width: 0; }

.cd-cart-sum__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--cd-cart-card, color-mix(in srgb, var(--color-neutral-100) 45%, #fff));
	border: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
	border-radius: var(--radius-lg);
}

.cd-page__body.cd-prose .cd-cart-sum__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: -0.01em;
}

.cd-cart-sum__ship {
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	background: var(--color-accent-100);
	color: var(--color-accent-900);
}

.cd-cart-sum__ship-text {
	display: block;
	font-size: 13px;
	line-height: 18px;
	margin-bottom: 7px;
}

.cd-cart-sum__bar {
	display: block;
	height: 5px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-accent) 22%, transparent);
	overflow: hidden;
}

.cd-cart-sum__bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--color-accent);
	transition: width .3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.cd-cart-sum__bar-fill { transition: none; }
}

/* -- The money rows -------------------------------------------------------
   A table, because wc_cart_totals_shipping_html() emits <tr>s and the classic
   checkout renders the same template. See cart-totals.php. */
.cd-page__body.cd-prose .cd-cart-sum__rows,
.cd-cart-sum__rows {
	border-collapse: collapse;
	width: 100%;
}

.cd-page__body.cd-prose .cd-cart-sum__rows tr,
.cd-cart-sum__rows tr {
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent);
}

.cd-cart-sum__rows tr:last-child { border-bottom: 0; }

.cd-page__body.cd-prose .cd-cart-sum__rows th,
.cd-page__body.cd-prose .cd-cart-sum__rows td,
.cd-cart-sum__rows th,
.cd-cart-sum__rows td {
	padding: 9px 0;
	font-size: 14px;
	vertical-align: top;
}

.cd-cart-sum__rows th {
	color: var(--color-neutral-800);
	font-weight: 400;
}

.cd-cart-sum__rows td {
	text-align: right;
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-text);
}

.cd-cart-sum__row--muted td,
.cd-ship__note {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 13.5px;
	color: var(--color-neutral-700);
}

.cd-cart-sum__rows .cart-discount td { color: var(--color-accent-700); }

.cd-page__body.cd-prose .cd-cart-sum__rows .woocommerce-remove-coupon,
.cd-cart-sum__rows .woocommerce-remove-coupon {
	display: inline-block;
	margin-left: 6px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	color: var(--color-neutral-700);
}

.cd-page__body.cd-prose .cd-cart-sum__total th,
.cd-page__body.cd-prose .cd-cart-sum__total td,
.cd-cart-sum__total th,
.cd-cart-sum__total td {
	padding-top: var(--space-3);
	font-size: 16px;
	color: var(--color-text);
}

.cd-cart-sum__total td {
	font-size: 22px;
	line-height: 1.15;
}

.cd-ship__methods {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: right;
}

.cd-ship__to,
.cd-ship__contents {
	margin-top: 4px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12.5px;
	line-height: 17px;
	color: var(--color-neutral-700);
}

/* -- Coupon --------------------------------------------------------------- */
.cd-cart-sum__coupon {
	display: flex;
	gap: var(--space-2);
	margin: 0;
}

.cd-cart-sum__coupon .cd-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 40px;
	background: var(--color-bg);
}

.cd-cart-sum__coupon .cd-btn {
	flex: none;
	min-height: 40px;
	background: var(--color-bg);
}

/* -- Below the button ----------------------------------------------------- */
.cd-cart-sum .wc-proceed-to-checkout { margin: 0; }

.cd-cart-sum .checkout-button {
	min-height: 46px;
	font-size: 16px;
	margin-top: 0;
}

.cd-page__body.cd-prose .cd-cart-sum__fine,
.cd-cart-sum__fine {
	margin: -6px 0 0;
	font-size: 12.5px;
	line-height: 17px;
	color: var(--color-neutral-700);
	text-align: center;
}

.cd-page__body.cd-prose .cd-cart-sum__seals,
.cd-cart-sum__seals {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px var(--space-2);
	margin: 0;
	padding-top: var(--space-3);
	border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
	list-style: none;
}

.cd-cart-sum__seals li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-neutral-800);
}

.cd-cart-sum__seal-icon {
	flex: none;
	line-height: 0;
	color: var(--color-accent-700);
}

/* The shipping calculator, if a zone ever gives it something to calculate. */
.cd-cart-sum .shipping-calculator-form {
	margin-top: var(--space-2);
	text-align: left;
}

/* --------------------------------------------------------------------------
   5. Cross-sells
   -------------------------------------------------------------------------- */
.cd-cart-cross {
	margin-top: clamp(32px, 4vw, 56px);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-divider);
}

.cd-page__body.cd-prose .cd-cart-cross__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: -0.01em;
	margin-bottom: var(--space-3);
}

.cd-page__body.cd-prose .cd-cart-cross__grid,
.cd-cart-cross__grid {
	--cd-cols: 4;
	margin: 0;
	padding: 0;
}

@media (max-width: 900px) {
	.cd-cart-cross__grid { --cd-cols: 2; }
}

/* --------------------------------------------------------------------------
   6. The mobile action bar

   Sticky rather than fixed: it rides the bottom of the viewport while the cart
   is on screen and scrolls away with the footer, so it never sits on top of
   the page's last line. Hidden where the summary card is sticky instead.
   -------------------------------------------------------------------------- */
.cd-cart__bar { display: none; }

@media (max-width: 900px) {
	.cd-cart__bar {
		position: sticky;
		bottom: 0;
		z-index: 4;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		margin: var(--space-4) calc(var(--cd-pad) * -1) 0;
		padding: var(--space-2) var(--cd-pad) calc(var(--space-2) + env(safe-area-inset-bottom));
		background: color-mix(in srgb, var(--color-bg) 92%, #fff);
		border-top: 1px solid var(--color-divider);
		backdrop-filter: blur(6px);
	}

	.cd-cart__bar-total {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
		min-width: 0;
	}

	.cd-cart__bar-label {
		font-size: 11px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-neutral-700);
	}

	.cd-cart__bar-total strong {
		font-family: var(--font-heading);
		font-weight: 600;
		font-size: 19px;
	}

	.cd-cart__bar-btn {
		flex: 0 1 190px;
		min-height: 44px;
	}
}

/* --------------------------------------------------------------------------
   7. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.cd-cart__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-4);
	}

	.cd-cart__aside {
		position: static;
		top: auto;
	}
}

@media (max-width: 560px) {
	.cd-page__body.cd-prose .cd-cart__item,
	.cd-cart__item {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: var(--space-2);
		padding: var(--space-2);
	}

	.cd-cart__thumb,
	.cd-cart__thumb img {
		width: 64px;
	}

	.cd-cart__thumb img { height: 64px; }

	.cd-cart__body {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2);
	}

	/* flex-basis is the *height* once the direction is column, so the 220px
	   basis above would open a 220px hole between the name and the stepper. */
	.cd-cart__lines { flex: 0 0 auto; }

	.cd-cart__controls {
		justify-content: space-between;
		gap: var(--space-2);
	}

	/* 256px of usable row on a 390px phone: a smaller stepper and a smaller
	   remove target are what make the line total fit beside them. */
	.cd-qty--lg { padding: 2px; }
	.cd-qty--lg .cd-qty__btn { width: 34px; height: 34px; }

	.cd-qty--lg .cd-qty__input {
		width: 38px;
		min-height: 34px;
		font-size: 14px;
	}

	.cd-page__body.cd-prose .cd-cart__remove,
	.cd-cart__remove {
		width: 32px;
		height: 32px;
	}

	.cd-cart__total {
		min-width: 0;
		margin-left: auto;
		font-size: 16px;
	}

	.cd-page__body.cd-prose .cd-cart__name,
	.cd-cart__name { font-size: 16px; }

	.cd-cart-sum__card { padding: var(--space-3); }

	.cd-cart-sum__coupon { flex-wrap: wrap; }
	.cd-cart-sum__coupon .cd-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   8. The empty cart
   -------------------------------------------------------------------------- */
/* WooCommerce's notices, kept to the width of the thing they are about rather
   than running the full page. Mostly this is the removal message and its
   "Undo?" — core's own, and the reason cart-empty.php prints notices at all. */
.cd-cart__notices {
	max-width: 620px;
	margin: 0 auto var(--space-3);
}

.cd-page__body.cd-prose .cd-cart__notices .woocommerce-message,
.cd-page__body.cd-prose .cd-cart__notices .woocommerce-info,
.cd-cart__notices .woocommerce-message,
.cd-cart__notices .woocommerce-info {
	justify-content: center;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-lg);
	background: var(--color-accent-100);
	color: var(--color-accent-900);
	font-size: 14px;
}

.cd-cart__notices a {
	color: var(--color-accent-700);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cd-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	max-width: 520px;
	margin: 0 auto;
	padding: clamp(20px, 4vw, 48px) 0 clamp(30px, 5vw, 64px);
	text-align: center;
}

.cd-cart-empty__art {
	width: min(240px, 62vw);
	height: auto;
}

.cd-page__body.cd-prose .cd-cart-empty__title,
.cd-cart-empty__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(22px, 2.6vw, 28px);
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.cd-page__body.cd-prose .cd-cart-empty__text,
.cd-cart-empty__text {
	margin: -6px 0 0;
	max-width: 38ch;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-neutral-800);
}

.cd-cart-empty__go { min-height: 44px; }

.cd-cart-empty__label {
	margin-top: var(--space-2);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
}

.cd-cart-empty__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	max-width: 100%;
}

/* Deliberately not .cd-pill — see the note in cart-empty.php. Same look as the
   filter chip in theme.css, under a name pages.css does not also claim. */
.cd-page__body.cd-prose .cd-cart-empty__chip,
.cd-cart-empty__chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--color-surface);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 13px;
	text-decoration: none;
}

.cd-cart-empty__chip:hover {
	background: var(--color-accent-100);
	color: var(--color-accent-800);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   9. The drawer — round 16 changes on top of theme.css section 10
   -------------------------------------------------------------------------- */
.cd-drawer__head { gap: var(--space-3); }

.cd-drawer__heading {
	display: flex;
	align-items: baseline;
	gap: 7px;
	min-width: 0;
}

.cd-drawer__sep { color: var(--color-neutral-500); }

.cd-drawer__count {
	font-size: 13px;
	color: var(--color-neutral-700);
	white-space: nowrap;
}

.cd-drawer__ship {
	background: var(--color-accent-100);
	padding: 12px 18px;
}

/* Bigger thumbnail, and the line total beside the stepper. */
.cd-drawer__item {
	grid-template-columns: 72px 1fr auto;
	gap: 12px;
	padding: 14px 0;
}

.cd-drawer__thumb img {
	width: 72px;
	height: 72px;
}

.cd-drawer__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.cd-drawer__rx {
	font-size: 10px;
	letter-spacing: 0.06em;
	padding: 1px 7px;
}

.cd-drawer__price {
	font-size: 13px;
	color: var(--color-neutral-700);
}

.cd-drawer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	margin-top: 7px;
}

.cd-drawer__line {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
}

.cd-drawer__remove {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	color: var(--color-neutral-700);
	text-decoration: none;
}

.cd-drawer__remove:hover { text-decoration: none; }

/* The prescription line: quiet, not a box. */
.cd-note.cd-note--drawer {
	margin: 2px 18px 14px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--color-accent-800);
	font-size: 12.5px;
	line-height: 18px;
	gap: 8px;
}

.cd-note--drawer .cd-note__icon { padding-top: 0; }

/* -- Footer --------------------------------------------------------------- */
.cd-drawer__total { margin-bottom: 4px; }

.cd-drawer__fine {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-neutral-700);
}

.cd-drawer__view {
	display: block;
	margin-top: 12px;
	text-align: center;
	font-size: 14px;
	color: var(--color-accent-700);
}

.cd-drawer__note {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.cd-drawer__note-icon {
	flex: none;
	line-height: 0;
	padding-top: 1px;
	color: var(--color-accent-600);
}

/* -- Empty ---------------------------------------------------------------- */
.cd-drawer__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: clamp(24px, 8vh, 56px) var(--space-4);
}

.cd-drawer__empty-art {
	width: 150px;
	height: auto;
}

.cd-drawer__empty-title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 18px;
	color: var(--color-text);
}

.cd-drawer__empty-text {
	margin: 0 0 var(--space-2);
	max-width: 30ch;
	font-size: 13.5px;
	line-height: 19px;
	color: var(--color-neutral-700);
	text-align: center;
}

/* -- Loading -------------------------------------------------------------- */
.cd-drawer__veil {
	position: absolute;
	inset: 0;
	display: none;
	pointer-events: none;
	background: color-mix(in srgb, var(--color-bg) 55%, transparent);
}

.cd-drawer.is-busy .cd-drawer__veil { display: block; }
.cd-drawer.is-busy .widget_shopping_cart_content { pointer-events: none; }

/* --------------------------------------------------------------------------
   10. The toast, and the undo it carries
   -------------------------------------------------------------------------- */
.cd-toast {
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom));
	z-index: 120;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	max-width: min(420px, calc(100vw - 32px));
	padding: 11px 16px;
	transform: translate(-50%, 12px);
	background: var(--color-text);
	color: var(--color-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	font-size: 14px;
	line-height: 19px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.cd-toast.is-open {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.cd-toast__text {
	min-width: 0;
	overflow-wrap: break-word;
}

.cd-toast__undo {
	flex: none;
	color: var(--color-accent-2-300);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cd-toast__undo:hover { color: var(--color-accent-2-200); }

@media (prefers-reduced-motion: reduce) {
	.cd-toast { transition: opacity .2s ease, visibility .2s; transform: translate(-50%, 0); }
}

/* Clear of the cart page's own action bar, which owns the bottom of the
   viewport on a phone. */
@media (max-width: 900px) {
	.woocommerce-cart .cd-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* The footer (subtotal + Checkout) sits at the bottom edge of the drawer: pushed
   down while the list is short, pinned while the list scrolls under it. */
.cd-drawer .widget_shopping_cart_content { position: relative; }
.cd-drawer__foot { margin-top: auto; position: sticky; bottom: 0; z-index: 2; }