/* ==========================================================================
   Cart — "ZDESIGNER Panier"
   The page loads this on the cart route; the panel ships on every page.
   ========================================================================== */

/* ------------------------------------------------------ shared buttons --- */

.zd-btn-solid,
.zd-btn-outline {
	display: block;
	width: 100%;
	padding: 15px 0;
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}

.zd-btn-solid:hover,
.zd-btn-outline:hover {
	text-decoration: none;
}

.zd-btn-solid {
	background: #1A1A1A;
	border: 1px solid #1A1A1A;
	color: #FFFFFF;
	font-weight: 500;
}

.zd-btn-outline {
	background: none;
	border: 1px solid #1A1A1A;
	color: var(--ink);
}

.zd--ar .zd-btn-solid,
.zd--ar .zd-btn-outline,
.zd--ar .zd-cart__title,
.zd--ar .zd-sum__title,
.zd--ar .zd-sum__cta,
.zd--ar .zd-suggest__title,
.zd--ar .zd-suggest__all,
.zd--ar .zd-panel__title,
.zd--ar .zd-coupon__label,
.zd--ar .zd-coupon__btn,
.zd--ar .zd-pline__brand,
.zd--ar .zd-line__badge {
	text-transform: none;
	letter-spacing: 0.02em;
}

/*
 * No footer on the basket, on any screen.
 *
 * Four accordions of links, the socials, the payment marks and the copyright,
 * under a page whose whole job is to reach the checkout. What the page needs
 * it already has: the way out in its header, Continuer mes achats in the list,
 * and the checkout at the end of the summary.
 */
body.woocommerce-cart .zd-footer {
	display: none;
}

/*
 * And room at the end in the footer's place. Without it the last row of
 * suggestions stops hard against the bottom of the window, with the page
 * appearing to have been cut rather than to have ended.
 */
body.woocommerce-cart .zd-main {
	padding-bottom: clamp(44px, 5vw, 76px);
}

/* =============================================================== page === */

.woocommerce-cart .zd-main,
.woocommerce-cart .woocommerce,
.woocommerce-cart .zd-wc-page {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.zd-cart {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: clamp(20px, 2vw, 30px);
	align-items: start;
	/*
	 * The basket runs the width of the window rather than being held to the
	 * 1440 the rest of the site uses. It is a working page — a list on the
	 * left, the figures on the right — and on a wide monitor the cap left it
	 * as a column down the middle with the pieces squeezed and empty paper
	 * either side. The 1920 is a ceiling for very wide screens, not a frame.
	 */
	max-width: 1920px;
	margin: 0 auto;
	padding: 26px var(--gutter) 0;
}

/* The heading row. The close is drawn on a phone only; see the block below. */
.zd-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.zd-cart__close {
	display: none;
}

.zd-cart__main {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.zd-cart__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(15px, 1.4vw, 19px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.zd-cart__box {
	border: 1px solid var(--rule);
}

.zd-cart__ship {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 11px 16px;
	background: #F7F5F0;
	border-bottom: 1px solid var(--rule);
	font-size: 11.5px;
	letter-spacing: 0.04em;
	color: #1A1A1A;
	text-align: center;
}

.zd-cart__ship a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------- a line --- */

/*
 * How far from free delivery. A line, not a slab: it is an encouragement, not
 * a warning, and the basket beneath it is what the shopper came to see.
 */
.zd-cart__toward {
	margin: 0 0 14px;
	padding: 11px 14px;
	background: #F7F5F0;
	border-inline-start: 2px solid var(--ink);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ink);
}

/*
 * On a wide screen the panel is nothing: the heading, the breakdown, the total
 * and the button sit in the column exactly as they did before it existed.
 */
.zd-sum__close {
	display: contents;
}

.zd-sum__detail {
	display: contents;
}

/*
 * The button carries none of its own look: the heading around it sets the
 * type, and a button does not inherit that by default. On a wide screen it
 * is a heading that happens to be pressable and never is.
 */
.zd-sum__toggle {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	text-align: start;
	cursor: default;
}

.zd-sum__chev {
	display: none;
}

.zd-line {
	display: grid;
	grid-template-columns: 132px 1fr;
	gap: 16px;
	padding: 18px 16px;
	border-bottom: 1px solid var(--rule);
}

.zd-line__media {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	background-color: #F7F5F0;
	background-size: cover;
	background-position: 50% 22%;
	background-repeat: no-repeat;
}

.zd-line__body {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
}

.zd-line__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.zd-line__name {
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink);
}

.zd-line__tools {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.zd-line__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	cursor: pointer;
}

.zd-line__icon:hover {
	text-decoration: none;
}

.zd-line__heart {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: #1A1A1A;
	stroke-width: 1.4;
}

.zd-line__icon[aria-pressed="true"] .zd-line__heart {
	fill: #1A1A1A;
}

.zd-line__bin {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: #1A1A1A;
	stroke-width: 1.4;
}

.zd-line__meta {
	font-size: 12px;
	color: var(--muted);
}

.zd-line__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 2px;
}

.zd-qty--line {
	width: 112px;
	height: 36px;
}

.zd-line__prices {
	display: flex;
	align-items: baseline;
	gap: 9px;
	flex-wrap: wrap;
}

.zd-line__old {
	font-size: 12.5px;
	color: var(--muted);
	text-decoration: line-through;
}

.zd-line__price {
	font-size: 15px;
	color: var(--ink);
}

.zd-line__price.is-sale {
	color: var(--sale);
}

.zd-line__badge {
	align-self: flex-start;
	background: var(--accent);
	color: #FFFFFF;
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 7px;
	white-space: nowrap;
}

.zd-cart__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 15px 16px;
	font-size: 12px;
	color: var(--muted);
}

.zd-cart__foot a {
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.zd-cart__side {
	position: sticky;
	top: 190px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zd-sum {
	border: 1px solid var(--rule);
	padding: 18px 18px 20px;
}

.zd-sum__title {
	margin: 0 0 16px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.zd-sum__rows {
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: 12.5px;
}

.zd-sum__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.zd-sum__row span:last-child {
	white-space: nowrap;
}

.zd-sum__row.is-sale,
.zd-sum__row.is-sale span {
	color: var(--sale);
}

.zd-sum__total {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--rule);
}

.zd-sum__total-label {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.zd-sum__total-value {
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
}

.zd-sum__saving {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 9px;
	font-size: 11.5px;
	color: var(--sale);
}

.zd-sum__saving span:last-child {
	white-space: nowrap;
}

.zd-sum__cta {
	display: block;
	width: 100%;
	margin-top: 18px;
	background: #1A1A1A;
	border: 1px solid #1A1A1A;
	color: #FFFFFF;
	padding: 16px 0;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}

.zd-sum__cta:hover {
	text-decoration: none;
}

.zd-sum__trust {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 12px;
	font-size: 11px;
	color: var(--muted);
}

.zd-sum__trust svg {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	fill: none;
	stroke: #1E7A3C;
	stroke-width: 1.5;
}

/* ------------------------------------------------------------- coupon --- */

.zd-coupon {
	border: 1px solid var(--rule);
	padding: 16px 18px 18px;
}

.zd-coupon__label {
	display: block;
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 11px;
}

/*
 * The field and the button wrap rather than insisting on one line.
 *
 * A text input carries an intrinsic width of its own — about twenty
 * characters — and min-width:0 lets it be *drawn* narrower without lowering
 * what it asks for. Side by side the pair asked for 286px, the box around
 * them 324, and the page 376: wider than a 320px screen, so the browser laid
 * the whole page out at 350 and zoomed out to fit, clipping everything on the
 * right. Allowed to wrap, the row asks for one item's width instead of two.
 */
.zd-coupon__form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.zd-coupon__input {
	flex: 1 1 150px;
	min-width: 0;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--rule);
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 12.5px;
	color: var(--ink);
	outline: none;
	background: var(--paper);
}

.zd-coupon__btn {
	flex: 0 0 auto;
	height: 40px;
	padding: 0 18px;
	background: none;
	border: 1px solid #1A1A1A;
	font-family: var(--font-body);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	cursor: pointer;
}

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

.zd-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: clamp(70px, 11vw, 150px) 24px clamp(60px, 9vw, 120px);
	text-align: center;
}

.zd-cart-empty__title {
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--ink);
}

.zd-cart-empty__body {
	margin: 0;
	max-width: 24em;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--muted);
}

.zd-cart-empty__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 290px;
	padding-top: 10px;
}

/* -------------------------------------------------------- suggestions --- */

/* The same width as the basket above it, so the two edges line up. */
.zd-suggest {
	max-width: 1920px;
	margin: clamp(46px, 5vw, 80px) auto 0;
	padding: 0 var(--gutter);
}

.zd-suggest__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.zd-suggest__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.zd-suggest__all {
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.zd-grid--suggest {
	grid-template-columns: repeat(4, 1fr);
	gap: 30px 16px;
}

/*
 * The Panier mockup tints the footer, but the site uses one footer
 * everywhere — the Boutique one — so that override is deliberately absent.
 */

/* ============================================================== panel === */

.zd-panel-scrim {
	position: fixed;
	inset: 0;
	background: var(--scrim);
	z-index: 90;
}


.zd-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	inset-inline-end: 0;
	width: min(94vw, 430px);
	background: var(--paper);
	z-index: 91;
	display: flex;
	flex-direction: column;
}

.zd-panel__top {
	display: flex;
	justify-content: flex-end;
	padding: 16px 20px 0;
}

.zd-panel__close {
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	line-height: 0;
}

.zd-panel__close svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: #1A1A1A;
	stroke-width: 1.4;
}

.zd-panel__inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.zd-panel__title {
	margin: 0;
	padding: 4px 26px 22px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.zd-panel__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 0 26px;
}

.zd-panel__empty {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 13px;
	min-height: 64vh;
	text-align: center;
}

.zd-panel__empty-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	padding-top: 14px;
}

/* ---------------------------------------------------------- panel line --- */

.zd-pline {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 16px;
	padding-bottom: 22px;
}

.zd-pline__media {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	background-color: #F7F5F0;
	background-size: cover;
	background-position: 50% 24%;
	background-repeat: no-repeat;
}

.zd-pline__body {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
}

.zd-pline__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.zd-pline__brand {
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.zd-pline__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.zd-pline__remove:hover {
	text-decoration: none;
}

.zd-pline__remove svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: #1A1A1A;
	stroke-width: 1.4;
}

.zd-pline__name {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ink);
}

.zd-pline__prices {
	display: flex;
	align-items: baseline;
	gap: 9px;
	flex-wrap: wrap;
}

.zd-pline__old {
	font-size: 12.5px;
	color: var(--muted);
	text-decoration: line-through;
}

.zd-pline__price {
	font-size: 13.5px;
	color: var(--ink);
}

.zd-pline__price.is-sale {
	color: var(--sale);
}

.zd-pline__meta {
	font-size: 12px;
	color: var(--muted);
}

.zd-panel__foot {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--rule);
	padding: 18px 26px 22px;
}

.zd-panel__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 12.5px;
}

.zd-panel__row span:last-child {
	white-space: nowrap;
}

.zd-panel__row.is-sale,
.zd-panel__row.is-sale span {
	color: var(--sale);
}

.zd-panel__row--total {
	margin-top: 9px;
	font-size: 13px;
}

.zd-panel__row--total span:last-child {
	font-weight: 500;
}

.zd-panel__foot .zd-btn-solid {
	margin-top: 16px;
	font-size: 12.5px;
}

/* ------------------------------------------------------- text weight --- */

/*
 * Cart body text runs 30% heavier than the site default.
 *
 * 300 x 1.3 = 390 and 400 x 1.3 = 520, but neither family has a cut there:
 * Satoshi is 300/400/500/700 and IBM Plex Sans Arabic 300/400/500/600. The
 * declared values are the nearest real cuts, so both languages move exactly
 * one step — 300 -> 400 in Latin, 400 -> 500 in Arabic. Declaring 390 would
 * have resolved back down to 300 and changed nothing.
 *
 * Scoped to the cart page's own containers, so the shared header, footer and
 * cart panel keep the site weight.
 */
.zd-cart,
.zd-cart-empty,
.zd-suggest {
	font-weight: 400;
}

.zd--ar .zd-cart,
.zd--ar .zd-cart-empty,
.zd--ar .zd-suggest {
	font-weight: 500;
}

/* Inputs and buttons do not inherit weight on their own. */
.zd-cart .zd-qty__input,
.zd-cart .zd-qty__btn,
.zd-cart .zd-coupon__input,
.zd-cart .zd-coupon__btn {
	font-weight: inherit;
}

/*
 * Elements that already declare 500 — the page title, summary heading, total,
 * CTA and the discount badge — are left alone. Satoshi has no 600, so a bump
 * would snap them to 700 and read as a far larger change than the copy got.
 */

/* -------------------------------------------------------- breakpoints --- */

@media (max-width: 1199px) {
	.zd-cart {
		grid-template-columns: 1fr 300px;
	}

	.zd-grid--suggest {
		grid-template-columns: repeat(3, 1fr);
	}
}

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

	.zd-cart__side {
		position: static;
	}

	/*
	 * A narrower shot leaves the name room to breathe. At 110px the body was
	 * 178px wide: titles broke over three lines, and the stepper and the price
	 * could not stand side by side so the price wrapped to a line of its own.
	 */
	.zd-line {
		grid-template-columns: 80px 1fr;
		gap: 14px;
		padding: 16px 14px;
	}

	.zd-line__row {
		gap: 10px;
	}

	.zd-qty--line {
		width: 96px;
	}

	.zd-grid--suggest {
		grid-template-columns: repeat(2, 1fr);
	}

	/*
	 * The total and the way out, pinned along the foot.
	 *
	 * The checkout button sat halfway down the page, under the summary and
	 * above a grid of suggestions, so reaching it meant scrolling past things
	 * the shopper had already decided against. Down here it is always a thumb
	 * away, with the figure it commits to beside it.
	 *
	 * The tab bar stands down on this page — the basket is somewhere you are
	 * finishing, not browsing from, and two bars stacked would take a quarter
	 * of the screen. The mark still leads home and the list has its own way
	 * back to the shop.
	 */
	body.woocommerce-cart .zd-tabbar {
		display: none;
	}

	/*
	 * The summary becomes a panel along the foot of the screen: the heading
	 * folds the breakdown away, and the saving, the total and the button stay
	 * on screen wherever the shopper has scrolled to.
	 */
	.zd-sum__close {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 54;
		display: block;
		max-height: 72vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 4px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--paper);
		border-top: 1px solid var(--rule);
		box-shadow: 0 -10px 24px rgba(26, 26, 26, 0.07);
	}

	/* The heading is only a wrapper here; the button inside it is the row. */
	.zd-sum__title {
		margin: 0;
	}

	.zd-sum__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 0 10px;
		cursor: pointer;
	}

	.zd-sum__chev {
		display: block;
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
		fill: none;
		stroke: var(--ink);
		stroke-width: 1.6;
		stroke-linecap: round;
		stroke-linejoin: round;
		transition: transform 0.22s ease;
	}

	/*
	 * Up while the breakdown is folded away — the direction it will travel —
	 * and down once it is open, which is the way back.
	 */
	.zd-sum__toggle[aria-expanded="false"] .zd-sum__chev {
		transform: rotate(180deg);
	}

	.zd-sum__detail {
		display: block;
		padding-bottom: 6px;
		border-bottom: 1px solid var(--rule);
	}

	.zd-sum__detail[hidden] {
		display: none;
	}

	.zd-sum__row--coupon,
	.zd-sum__saving,
	.zd-sum__total {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		margin: 0;
		padding: 8px 0 0;
		border: 0;
	}

	/*
	 * A rule under the fold, so what is always on show is read apart from the
	 * breakdown above it. It is drawn by the first of these that exists — the
	 * code's line when there is a code, otherwise the saving, otherwise the
	 * total — since the fold itself only carries a rule while it is open.
	 */
	.zd-sum__detail[hidden] + .zd-sum__row--coupon,
	.zd-sum__detail[hidden] + .zd-sum__saving,
	.zd-sum__detail[hidden] + .zd-sum__total {
		border-top: 1px solid var(--rule);
		padding-top: 12px;
	}

	.zd-sum__cta {
		margin: 10px 0 0;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
	}

	/*
	 * The estimate is the first thing left in the summary card once the
	 * heading, the breakdown and the total have gone to the panel below — so
	 * its own rule and the space above it are a line drawn under nothing.
	 */
	.zd-sum .zd-est {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	/*
	 * The code goes first, straight after the basket.
	 *
	 * Written last, it sat below the delivery estimate — two screens down,
	 * past everything a shopper with a code in hand does not want to read.
	 * Ordered to the head of the column it is the next thing after the pieces
	 * themselves, which is where someone holding a code looks for it.
	 */
	.zd-coupon {
		order: -1;
	}

	/*
	 * The title row is the page's header on a phone: the name of the page in
	 * the middle, the way out at the end, and a rule under it. The site header
	 * is not drawn here at all.
	 *
	 * It scrolls with the page rather than sticking. Sticky would only hold
	 * while its parent is on screen — it lives inside the basket's own column
	 * — so it would travel for a while and then leave, which is worse than
	 * either staying or going.
	 */
	.zd-cart__head {
		margin: 0 calc(var(--gutter) * -1) 16px;
		padding: 13px var(--gutter);
		background: var(--paper);
		border-bottom: 1px solid var(--rule);
	}

	.zd-cart__title {
		flex: 1 1 auto;
		min-width: 0;
		/* Centred on the row, so the close does not pull it off true. */
		text-align: center;
		margin-inline-start: 40px;
		font-size: 13.5px;
		letter-spacing: 0.1em;
	}

	/*
	 * The empty basket's copy of the head. It lives outside .zd-cart, so it
	 * has no gutter to pull itself back out of — it takes one directly.
	 */
	.zd-cart__head--bare {
		margin: 0 0 24px;
	}

	.zd-cart__close {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin-inline-end: -10px;
		color: var(--ink);
	}

	/* The page opens at its own header rather than under a gap. */
	.zd-cart {
		padding-top: 0;
	}

	.zd-cart__close:hover {
		text-decoration: none;
	}

	.zd-cart__close svg {
		width: 20px;
		height: 20px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.5;
		stroke-linecap: round;
	}

	/*
	 * The page stands back while the summary is open.
	 *
	 * The panel grows up out of the foot of the screen over whatever was
	 * there; without the wash it reads as two things at once. Tapping the
	 * wash folds it away again, as tapping beside any sheet should.
	 */
	.zd-sum__scrim {
		position: fixed;
		inset: 0;
		z-index: 53;
		background: rgba(26, 26, 26, 0.42);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.24s ease, visibility 0.24s;
	}

	.zd-sum__scrim.is-open {
		opacity: 1;
		visibility: visible;
	}

	/*
	 * Room at the foot of the page for the panel that sits over it.
	 *
	 * The footer used to provide this by accident; with it gone, the last of
	 * the suggestions ended underneath the summary with no way to scroll it
	 * into view. The height is the measured one — --zd-bottom-bar, published
	 * by header.js — because the panel is as tall as its own contents.
	 */
	body.woocommerce-cart .zd-main {
		padding-bottom: calc(var(--zd-bottom-bar, 120px) + 18px + env(safe-area-inset-bottom, 0px));
	}

}

/* =================================================== the estimate === */

/*
 * What delivery costs, answered in the basket rather than four form fields
 * later. Sits under the checkout button: it informs the decision, it is not
 * the decision.
 */
.zd-est {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
}

.zd-est__title {
	margin: 0 0 4px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.zd--ar .zd-est__title {
	text-transform: none;
	letter-spacing: 0.02em;
}

.zd-est__lead,
.zd-est__note {
	margin: 0 0 10px;
	font-size: 11.5px;
	line-height: 1.65;
	color: var(--muted);
}

.zd-est__note {
	margin: 10px 0 0;
}

.zd-est__form {
	margin-bottom: 12px;
}

.zd-est__field {
	display: block;
}

/* The facts, one per line, label quiet and answer plain. */
.zd-est__facts {
	margin: 0;
}

.zd-est__fact {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	font-size: 12.5px;
}

.zd-est__fact dt {
	color: var(--muted);
}

.zd-est__fact dd {
	margin: 0;
	text-align: end;
}

/* The one number that moves a basket. */
.zd-est__free {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ink);
}

.zd-est__go {
	margin-top: 8px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--rule-strong);
	background: var(--paper);
	font-family: var(--font-body);
	font-size: 12px;
	cursor: pointer;
}

/* The code's own line, with the code itself and a way to take it off. */
.zd-sum__coupon {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	flex-wrap: wrap;
}

.zd-sum__code {
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: 0.08em;
	padding: 1px 6px;
	border: 1px solid currentColor;
	opacity: 0.75;
}

.zd-sum__drop {
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	color: inherit;
	opacity: 0.6;
}

.zd-sum__drop:hover,
.zd-sum__drop:focus-visible {
	opacity: 1;
}