/* ==========================================================================
   Yazan (Astra Child) — CART DRAWER.

   Ports the reference slide-cart (commafootball.com, captured 2026-09-27) onto the modern-cart
   plugin. The plugin is vendored and never edited; its markup is rearranged through hooks in
   inc/cart-drawer.php and dressed here.

   HOW THE PLUGIN FIGHTS BACK
   --------------------------
   modern-cart scopes almost everything to `#moderncart-slide-out-modal … #moderncart-slide-out`
   (TWO ids) and colours itself from ~20 `--moderncart-*` custom properties it prints on :root.
   Class-only rules lose to that — which is why the first pass at drawer styling (the block this
   file replaced in woocommerce.css) never took. So:
     (a) we remap the plugin's own variables into Yazan token space, which handles colour, and
     (b) every structural rule leads with the same two ids, so it wins on specificity and needs
         no `!important`.
   theme-burgundy.css remaps the same variables under html[data-yz-theme="burgundy"] with
   `!important`; that layer is colour-only and is left untouched by the geometry here, so both
   themes get this layout.

   GEOMETRY DIAL
   -------------
   The reference rounds its item cards 4px and its APPLY button into a pill. Yazan's design
   language is square (--yz-radius-none). The two knobs are isolated in `--yzc-radius-*` below:
   set them to 4px / 999px for a literal match with the reference.
   ========================================================================== */

#moderncart-slide-out-modal {
	/* --- the geometry dial (see header) --- */
	--yzc-radius-card: var(--yz-radius, 0);
	--yzc-radius-pill: var(--yz-radius, 0);

	/* --- the reference's measurements, kept as names so the rhythm is editable in one place --- */
	--yzc-pad-x: 28px;      /* body gutter          */
	--yzc-pad-head: 24px;   /* header padding       */
	--yzc-pad-foot: 21px;   /* footer gutter        */
	--yzc-gap-item: 14px;   /* between item cards   */
	--yzc-thumb-w: 112px;
	--yzc-thumb-h: 140px;

	/* --- remap the plugin's palette onto brand tokens (Black theme; burgundy overrides later) --- */
	--moderncart-background-color: var(--yz-surface-2, #F5F1E9);
	--moderncart-header-background-color: var(--yz-surface-2, #F5F1E9);
	--moderncart-body-color: var(--yz-text, #141210);
	--moderncart-heading-color: var(--yz-text, #141210);
	--moderncart-header-font-color: var(--yz-text, #141210);
	--moderncart-primary-color: var(--yz-primary, #141210);
	--moderncart-primary-color-light: var(--yz-surface, #FFFFFF);
	--moderncart-highlight-color: var(--yz-accent, #8C2F24);
	--moderncart-button-font-color: var(--yz-on-primary, #F5F1E9);
	--moderncart-quantity-background-color: var(--yz-surface, #FFFFFF);
	--moderncart-quantity-font-color: var(--yz-text, #141210);
	--moderncart-cart-item-padding: 14px;
}

/* --------------------------------------------------------------------------
   Scrim. The reference dims the whole page behind its drawer; modern-cart ships a backdrop
   element that is never actually painted (`.moderncart-modal-backdrop` measures 1440x0, and the
   burgundy sheet's `[role="dialog"]` qualifier matches nothing because the node carries no role).
   Rather than resurrect it, the ground goes on the modal root — which is already the full-viewport
   layer the reference tints — and only while the drawer is open, so it can never swallow a click
   on the page behind it. Without this the drawer had no edge at all on the dark theme: its header
   band and the page were the same colour.
   -------------------------------------------------------------------------- */
#moderncart-slide-out-modal {
	background-color: transparent;
	transition: background-color 300ms var(--yz-theme-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

#moderncart-slide-out-modal.moderncart-show {
	background-color: var(--yz-scrim, rgba(12, 11, 10, 0.55));
}

@media (prefers-reduced-motion: reduce) {
	#moderncart-slide-out-modal {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Panel shell — 500px column that owns its own scrolling.

   The reference panel is a flex column of head / body / foot where ONLY the body scrolls, so the
   totals and the CTA never leave the viewport on a long cart. The plugin lets the whole panel
   scroll, which is why the current drawer pushed its checkout button off-screen with four rings
   in the basket.
   -------------------------------------------------------------------------- */
#moderncart-slide-out-modal.moderncart-cart-style-slideout #moderncart-slide-out {
	width: min(500px, 100vw);
	max-width: 100vw;
	background: var(--yz-surface-2, #F5F1E9);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-height: 100%;
	overflow: hidden;
	background: var(--yz-surface-2, #F5F1E9);
	color: var(--yz-text, #141210);
	font-family: var(--yz-font-body);
}

/* --------------------------------------------------------------------------
   Header — [ title ][ × ], hairline base. (header-style2 from the plugin; see inc/cart-drawer.php.)
   -------------------------------------------------------------------------- */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header {
	flex: 0 0 auto;
	padding: 0;
	border-bottom: 1px solid var(--yz-hairline, rgba(20, 18, 16, 0.12));
	background: var(--yz-surface-2, #F5F1E9);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: var(--yzc-pad-head) var(--yzc-pad-x);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-family: var(--yz-font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--yz-text, #141210);
	text-align: start;
}

/* The item count. header-style2 does not print one, so when it IS present (style1, or a future
   plugin change) it sits beside the title as the reference's "(N Items)" does, not off in a
   corner. Rendered as a quiet tracked pill rather than a coloured badge. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-quantity {
	order: 2;
	flex: 0 0 auto;
	min-width: 0;
	padding: 0;
	background: none;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--yz-tracking-label, 0.14em);
	text-transform: uppercase;
	color: var(--yz-text-muted, #6E6A63);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-close {
	order: 3;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--yz-text-muted, #6E6A63);
	cursor: pointer;
	transition: color var(--mo-fast, 200ms) ease;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-close:hover {
	color: var(--yz-text, #141210);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-close svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	color: currentColor;
}

/* --------------------------------------------------------------------------
   Body — the scrolling item list.
   -------------------------------------------------------------------------- */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-cart {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--yz-surface-2, #F5F1E9);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-cart-inner {
	display: flex;
	flex-direction: column;
	gap: var(--yzc-gap-item);
	padding: 16px var(--yzc-pad-x);
}

/* --------------------------------------------------------------------------
   Item — a raised card, not a row with a rule under it.

   This is the single biggest structural difference from what the drawer looked like before: the
   reference lifts every line item onto its own white card so the list reads as discrete objects.
   -------------------------------------------------------------------------- */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item {
	padding: 14px;
	border: 0;
	border-radius: var(--yzc-radius-card);
	background: var(--yz-surface, #FFFFFF);
	box-shadow: 0 0 4px rgba(20, 18, 16, 0.08);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-container {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 0;
	border: 0; /* kill the plugin's row divider — the card edge is the separator now */
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-image {
	flex: 0 0 var(--yzc-thumb-w);
	width: var(--yzc-thumb-w);
	border-radius: var(--yzc-radius-card);
	overflow: hidden;
	background: var(--yz-surface-2, #F5F1E9);
}

/* The plugin wraps the photo in an inline-block <a>. Inline-block sits on the text baseline, so
   the anchor's line-height left an 8px strip of the container's ivory ground showing under every
   ring — a pale band across the bottom of each card. The anchor has to be a block, not just the
   <img> inside it. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-image > a {
	display: block;
	line-height: 0;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-image img {
	display: block;
	width: 100%;
	height: var(--yzc-thumb-h);
	object-fit: cover;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 0;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item__details {
	width: 100%;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-name,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-name a,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-link,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-link a {
	font-family: var(--yz-font-display);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--yz-text, #141210);
	text-decoration: none;
}

/* Stone · metal line — the reference's variant row ("Size: 2XS"). Printed by
   yazan_cart_drawer_item_meta() in inc/cart-drawer.php. */
#moderncart-slide-out-modal #moderncart-slide-out .yz-cart-item-meta {
	display: block;
	margin-top: 5px;
	font-family: var(--yz-font-body);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--yz-tracking-label, 0.14em);
	text-transform: uppercase;
	color: var(--yz-text-muted, #6E6A63);
}

/* Price — current price leading, compare-at struck through beside it. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions--pricing,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	font-family: var(--yz-font-body);
	font-size: 13px;
	line-height: 1.2;
	color: var(--yz-text-2, #4A4540);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-price del,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions--pricing del {
	opacity: 0.6;
	text-decoration: line-through;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-price ins,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions--pricing ins {
	text-decoration: none;
}

/* Remove — a quiet tracked control under the price, as in the reference. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions-remove {
	margin: 2px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--yz-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--yz-tracking-label, 0.14em);
	text-transform: uppercase;
	color: var(--yz-text-muted, #6E6A63);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color var(--mo-fast, 200ms) ease;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions-remove:hover {
	color: var(--yz-accent, #8C2F24);
}

/* Quantity stepper — [ − ][ n ][ + ], 95×33 like the reference. It only renders for products
   that are not "sold individually"; the one-of-one rings correctly have none. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions {
	padding: 10px 0 0;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity {
	display: inline-flex;
	align-items: center;
	width: 95px;
	height: 33px;
	border: 1px solid var(--yz-border, rgba(20, 18, 16, 0.14));
	border-radius: var(--yzc-radius-card);
	background: var(--yz-surface, #FFFFFF);
	overflow: hidden;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity .quantity__button--down,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity .quantity__button--up {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 31px;
	width: 31px;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--yz-text, #141210);
	cursor: pointer;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity svg {
	width: 11px;
	height: 11px;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity svg path {
	fill: currentColor;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-quantity__input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--yz-font-body);
	font-size: 14px;
	text-align: center;
	color: var(--yz-text, #141210);
	-moz-appearance: textfield;
	appearance: textfield;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-quantity__input::-webkit-outer-spin-button,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-quantity__input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

#moderncart-slide-out-modal #moderncart-slide-out .quantity__button--disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Footer — pinned block: progress bar → discount → totals → CTA → trust row.
   -------------------------------------------------------------------------- */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer {
	position: relative;
	flex: 0 0 auto;
	padding: 0;
	border-top: 1px solid var(--yz-hairline, rgba(20, 18, 16, 0.12));
	background: var(--yz-surface-2, #F5F1E9);
}

/* A short fade painted UPWARD over the bottom of the item list. A scrolling list has to cut its
   content off somewhere, and with two rings in a short window the second card was being sliced
   clean through with nothing to say why — it read as a rendering fault rather than as "there is
   more below". Anchored to the foot rather than to the scroll area so it stays put while the list
   moves under it. Decorative and click-through. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: 32px;
	background: linear-gradient(to top, var(--yz-surface-2, #F5F1E9), rgba(245, 241, 233, 0));
	pointer-events: none;
}

html[data-yz-theme="burgundy"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer::before {
	background: linear-gradient(to top, #2C0A10, rgba(44, 10, 16, 0));
}

/* THE FOOT IS A FLEX COLUMN TOO, and that is what was cutting the checkout button off.
   `flex: 0 0 auto` above stops the FOOT shrinking inside the panel, but the plugin lays the foot
   out as a flex column of its own, so its children were still shrinkable — and on a short window
   the totals block was compressed 17px below its content and the trust row (and at 600px the CTA
   itself) fell off the bottom edge under `overflow: hidden`. Pinning the children makes the item
   list the only thing that yields, which is what a scrolling list is for. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer > * {
	flex-shrink: 0;
}

/* Free-shipping progress. Moved into the footer by yazan_cart_drawer_rehook().

   `height` and `z-index` are the two declarations that matter here, and neither is cosmetic.
   cart.css:846 gives this wrapper `height: 100%` and `z-index: 99999` — written for its original
   home ABOVE the drawer header, where it was an overlay. In the footer those turn it into a
   footer-tall box stacked over everything around it: the owner's screenshot showed the progress
   bar floating in the blank space under the last item and "COMPLIMENTARY EXPRESS SHIPPING
   UNLOCKED" sliced in half by the divider it was painting across. It has to be an ordinary block
   in the flow. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-free-shipping-bar-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	height: auto;
	max-height: none;
	z-index: auto;
	padding: 14px var(--yzc-pad-x);
	border-bottom: 1px solid var(--yz-hairline, rgba(20, 18, 16, 0.12));
	text-align: center;
	cursor: default; /* cart.css makes the whole strip look clickable; nothing happens on click. */
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-free-shipping-bar-wrapper .moderncart-notification {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var(--yz-font-body);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--yz-tracking-label, 0.14em);
	text-transform: uppercase;
	color: var(--yz-text-2, #4A4540);
}

/* `margin-top: 0` is the whole reason the message was unreadable. cart.css:1479 pulls the track up
   by -16px so it rides ON the notification banner — correct for the plugin's original overlay,
   wrong the moment the bar becomes two stacked rows in the footer: the gold track was drawn
   straight through the middle of "COMPLIMENTARY EXPRESS SHIPPING UNLOCKED". */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-free-shipping-bar-wrapper .moderncart-progress-bar {
	position: relative;
	width: 100%;
	height: 6px;
	margin: 0;
	border: 0;
	border-radius: var(--yzc-radius-pill);
	background: rgba(20, 18, 16, 0.10);
	overflow: hidden;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-free-shipping-progress-bar {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--yz-accent, #8C2F24);
	transition: width 500ms var(--yz-theme-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Threshold reached — the bar goes gold, the way the reference fires its confetti state. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-free-shipping-bar-wrapper--success .moderncart-free-shipping-progress-bar {
	background: var(--yz-gold, #9A7B3F);
}

/* Discount code — label over [ input | APPLY ], always visible. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-have-coupon-code-area {
	display: block;
	padding: 14px var(--yzc-pad-x) 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: default;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-have-coupon-code {
	font-family: var(--yz-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--yz-tracking-label, 0.14em);
	text-transform: uppercase;
	color: var(--yz-text-2, #4A4540);
}

/* With the field permanently open the disclosure chevrons are noise. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-arrow-down-icon,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-arrow-up-icon {
	display: none;
}

#moderncart-slide-out-modal #moderncart-slide-out #moderncart-coupon-form-container {
	padding: 8px var(--yzc-pad-x) 14px;
	border-bottom: 1px solid var(--yz-hairline, rgba(20, 18, 16, 0.12));
	background: none;
}

/* `height: auto` is load-bearing. The plugin pins this row to a flat `height: 40px`
   (cart.css:970); the 42px controls below then overflowed it and, once the grid collapsed to one
   column on a phone, a 94px stack was painting out of a 40px box straight through the totals
   hairline. `min-height: 0` keeps the grid from re-inheriting it. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: stretch;
	gap: 10px;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input input[type="text"] {
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--yz-border-strong, rgba(20, 18, 16, 0.28));
	border-radius: var(--yzc-radius-card);
	background: var(--yz-surface, #FFFFFF);
	font-family: var(--yz-font-body);
	font-size: 14px;
	color: var(--yz-text, #141210);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-form-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 112px;
	height: 42px;
	padding: 0 18px;
	border: 1px solid var(--yz-primary, #141210);
	border-radius: var(--yzc-radius-pill);
	background: var(--yz-primary, #141210);
	font-family: var(--yz-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--yz-tracking-label, 0.14em);
	text-transform: uppercase;
	color: var(--yz-on-primary, #F5F1E9);
	cursor: pointer;
	transition: background var(--mo-fast, 200ms) ease, color var(--mo-fast, 200ms) ease;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-form-button:hover {
	background: transparent;
	color: var(--yz-primary, #141210);
}

/* Totals + CTA block. The plugin draws a cool blue-grey rule (#E5E7EB) on top of this block,
   which lands on exactly the same line as the discount field's own warm hairline — two rules,
   two different greys, one seam. Ours is the one that stays. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-total {
	padding: 16px var(--yzc-pad-foot);
	border-top: 0;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-line-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

/* `font-size` has to be restated on the spans. cart.css:144 sizes
   `….moderncart-cart-line-items-item span` at 16px directly, so setting it on the row alone left
   SUBTOTAL and SHIPPING rendering LOUDER (16px) than the TOTAL label (12px) — the hierarchy
   upside down, with the secondary rows shouting over the number being decided on. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-line-items-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 0;
	border: 0;
	font-family: var(--yz-font-body);
	font-size: 13px;
	color: var(--yz-text-2, #4A4540);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-line-items-item span {
	font-size: inherit;
}

/* The order total is the number the customer is deciding on — it gets the weight the reference
   gives its SUBTOTAL row, and a hairline above it to close the list. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-line-items__total {
	padding-top: 12px;
	border-top: 1px solid var(--yz-hairline, rgba(20, 18, 16, 0.12));
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--yz-text, #141210);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-line-items__total .moderncart-cart-line-items-label {
	text-transform: uppercase;
	letter-spacing: var(--yz-tracking-label, 0.14em);
	font-size: 12px;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-line-items__total .moderncart-cart-line-items-value {
	font-size: 18px;
}

#moderncart-slide-out-modal #moderncart-slide-out .wc-proceed-to-checkout {
	margin: 0;
	padding: 0;
}

#moderncart-slide-out-modal #moderncart-slide-out a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 15px;
	border: 1px solid var(--yz-primary, #141210);
	border-radius: var(--yzc-radius-card);
	background: var(--yz-primary, #141210);
	font-family: var(--yz-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--yz-tracking-label, 0.14em);
	text-transform: uppercase;
	color: var(--yz-on-primary, #F5F1E9);
	text-decoration: none;
	transition: background var(--mo-fast, 200ms) ease, color var(--mo-fast, 200ms) ease;
}

#moderncart-slide-out-modal #moderncart-slide-out a.checkout-button:hover {
	background: transparent;
	color: var(--yz-primary, #141210);
}

/* Trust row — printed by yazan_cart_drawer_trust_row(). The shared .yz-pay strip is a single
   row elsewhere on the site; in the drawer it stacks, which is the reference arrangement. */
#moderncart-slide-out-modal #moderncart-slide-out .yz-pay--cart-drawer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 8px;
	margin: 14px 0 0;
	padding: 0 var(--yzc-pad-foot) 18px;
}

#moderncart-slide-out-modal #moderncart-slide-out .yz-pay--cart-drawer .yz-pay__label {
	font-size: 11px;
	letter-spacing: var(--yz-tracking-label, 0.14em);
	text-transform: uppercase;
	color: var(--yz-text-muted, #6E6A63);
}

#moderncart-slide-out-modal #moderncart-slide-out .yz-pay--cart-drawer .yz-pay__marks {
	flex: 1 0 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* --------------------------------------------------------------------------
   Empty state.
   -------------------------------------------------------------------------- */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-empty-cart {
	padding: 48px var(--yzc-pad-x);
	text-align: center;
	font-family: var(--yz-font-body);
	font-size: 14px;
	color: var(--yz-text-muted, #6E6A63);
}

/* --------------------------------------------------------------------------
   Recommendations — the reference's "You may also like" rail.
   -------------------------------------------------------------------------- */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-recommendations-header,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-empty-cart-recommendations-title {
	padding-top: 16px;
	border-top: 1px solid var(--yz-hairline, rgba(20, 18, 16, 0.12));
	font-family: var(--yz-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--yz-tracking-label, 0.14em);
	text-transform: uppercase;
	color: var(--yz-text-muted, #6E6A63);
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-add-to-cart {
	border: 1px solid var(--yz-primary, #141210);
	border-radius: var(--yzc-radius-card);
	background: transparent;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--yz-tracking-label, 0.14em);
	text-transform: uppercase;
	color: var(--yz-primary, #141210);
	transition: background var(--mo-fast, 200ms) ease, color var(--mo-fast, 200ms) ease;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-add-to-cart:hover {
	background: var(--yz-primary, #141210);
	color: var(--yz-on-primary, #F5F1E9);
}

/* --------------------------------------------------------------------------
   Phone — full-bleed panel, tighter gutters, larger tap targets.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	#moderncart-slide-out-modal {
		--yzc-pad-x: 16px;
		--yzc-pad-head: 18px;
		--yzc-pad-foot: 16px;
		--yzc-thumb-w: 84px;
		--yzc-thumb-h: 104px;
	}

	#moderncart-slide-out-modal.moderncart-cart-style-slideout #moderncart-slide-out {
		width: 100vw;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input {
		grid-template-columns: 1fr;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-form-button {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   SHORT VIEWPORTS — the drawer's real failure mode, and the one a laptop hits.

   The panel is head / scrolling body / pinned foot. The foot's height is intrinsic — free-shipping
   bar + discount field + totals + CTA + trust row — so on a short window it simply takes what it
   needs and the body gets the remainder. Measured on a 600px-tall viewport (a 768px laptop with
   browser chrome, which is what the owner reported): header 77 + foot 414 left the item list
   **109px**, and a 176px item card was being sliced in half by the scroll container. The drawer
   looked broken, and the free-shipping bar appeared to sit on top of the product.

   Two answers, in order of how hard they push back.
   -------------------------------------------------------------------------- */

/* 1. TIGHTEN THE RHYTHM. Most of this is one variable block — the measurements were named at the
      top of this file for exactly this reason — plus the handful of paddings set in px. Worth
      ~90px of footer, which is the difference between one whole card and half of one. */
@media (max-height: 820px) {
	#moderncart-slide-out-modal {
		--yzc-pad-x: 20px;
		--yzc-pad-head: 16px;
		--yzc-pad-foot: 18px;
		--yzc-gap-item: 10px;
		--yzc-thumb-w: 92px;
		--yzc-thumb-h: 104px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-cart-inner {
		padding-block: 12px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item {
		padding: 12px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-free-shipping-bar-wrapper {
		gap: 7px;
		padding-block: 10px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-have-coupon-code-area {
		padding-top: 10px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out #moderncart-coupon-form-container {
		padding-block: 6px 10px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-total {
		padding-block: 12px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-line-items {
		gap: 6px;
		margin-bottom: 12px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-line-items__total {
		padding-top: 9px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .yz-pay--cart-drawer {
		margin-top: 10px;
		padding-bottom: 12px;
	}
}

/* 2. THEN GIVE THE FOOT LESS TO CARRY. Tightening alone is not enough once the free-shipping bar
      is on the page — the owner's own cart is over the threshold, so their foot is ~60px taller
      than the measurement above and the card was clipped again.

      The instinct here is to let the whole panel scroll and pin the button with `position:
      sticky; bottom: 0`. It does not work: sticky only holds while its containing block is in
      view, and at scroll top the totals block is entirely below the fold — so the CTA is not
      pinned, it is simply missing until you scroll. Tried and measured, 2026-09-27.

      So the two-region model stays (it is also the reference's), and the foot sheds height
      instead. The trust row folds onto one line: the least load-bearing thing down there, and the
      same payment marks are repeated on the checkout page a click away. */
@media (max-height: 760px) {
	#moderncart-slide-out-modal {
		--yzc-thumb-h: 96px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-line-items {
		gap: 5px;
		margin-bottom: 10px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out a.checkout-button {
		min-height: 44px;
		padding: 12px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .yz-pay--cart-drawer {
		margin-top: 8px;
		padding-bottom: 10px;
	}

	/* `flex: 0 1 auto` instead of the full-width basis: label and marks share one row. */
	#moderncart-slide-out-modal #moderncart-slide-out .yz-pay--cart-drawer .yz-pay__marks {
		flex: 0 1 auto;
	}
}

/* 3. LAST RESORT, for a genuinely small window. The photograph is the product, so it is the last
      thing to shrink — but a visible small photo beats a large one sliced in half by the scroll
      container. The trust row goes entirely; it is restated on the checkout page. */
@media (max-height: 640px) {
	#moderncart-slide-out-modal {
		--yzc-thumb-w: 76px;
		--yzc-thumb-h: 84px;
		--yzc-pad-head: 14px;
	}

	#moderncart-slide-out-modal #moderncart-slide-out .yz-pay--cart-drawer {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Burgundy — only the few surfaces this file introduces that theme-burgundy.css
   cannot reach (it predates them). Colour only; geometry above is shared.
   -------------------------------------------------------------------------- */
/* On the dark theme the card (#221012) and the ground (#2C0A10) are barely a lightness step
   apart — measured 1.006:1 — so the ring is what actually separates them and it has to be able to
   do that job. A drop shadow underneath adds the lift that the two hues cannot. */
html[data-yz-theme="burgundy"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item {
	background: var(--yz-surface, #221012);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 6px 14px -8px rgba(0, 0, 0, 0.75);
}

html[data-yz-theme="burgundy"] #moderncart-slide-out-modal #moderncart-slide-out .yz-cart-item-meta,
html[data-yz-theme="burgundy"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions-remove,
html[data-yz-theme="burgundy"] #moderncart-slide-out-modal #moderncart-slide-out .yz-pay--cart-drawer .yz-pay__label {
	color: var(--yz-text-muted, #9E8A8B);
}

html[data-yz-theme="burgundy"] #moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-free-shipping-bar-wrapper .moderncart-progress-bar {
	background: rgba(255, 255, 255, 0.10);
}

@media (prefers-reduced-motion: reduce) {
	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-free-shipping-progress-bar {
		transition: none;
	}
}