/**
 * MM Side Cart - front-end styles.
 *
 * Everything is scoped under .mm-side-cart-root and every colour, size and spacing value
 * comes from a custom property declared on .mm-side-cart-root, never on :root, so nothing
 * leaks into the theme.
 *
 * Direction is expressed with logical properties (inset-inline, margin-inline,
 * padding-inline) so right-to-left sites mirror without a second stylesheet.
 *
 * There are exactly four !important declarations in this file. Each is marked
 * with a PROTECTED comment explaining the theme behaviour it defends against.
 * Nothing else uses !important.
 */

/* -------------------------------------------------------------------------
 * 1. Root, tokens and reset
 * ---------------------------------------------------------------------- */

.mm-side-cart-root {
	/* Colours. Overridden by the settings through wp_add_inline_style(). */
	--mm-side-cart-trigger-bg: #4f46e5;
	--mm-side-cart-trigger-text: #ffffff;
	--mm-side-cart-trigger-hover: #4338ca;
	--mm-side-cart-badge-bg: #10b981;
	--mm-side-cart-badge-text: #ffffff;
	--mm-side-cart-bg: #ffffff;
	--mm-side-cart-title: #111827;
	--mm-side-cart-price: #4f46e5;
	--mm-side-cart-muted: #6b7280;
	--mm-side-cart-border: #e5e7eb;
	--mm-side-cart-btn-bg: #4f46e5;
	--mm-side-cart-btn-text: #ffffff;
	--mm-side-cart-btn-hover: #4338ca;
	--mm-side-cart-btn2-bg: #f3f4f6;
	--mm-side-cart-btn2-text: #111827;
	--mm-side-cart-overlay-alpha: 0.55;

	/* Shape and size. */
	--mm-side-cart-radius: 10px;
	--mm-side-cart-font-size: 15px;
	--mm-side-cart-icon-size: 24px;
	--mm-side-cart-offset-x: 24px;
	--mm-side-cart-offset-y: 24px;
	--mm-side-cart-thumb-size: 64px;
	--mm-side-cart-drawer-width: 400px;
	--mm-side-cart-z: 99990;

	/* Motion. Setting this token to 0s disables every transition at once,
	   which is how prefers-reduced-motion is honoured without !important. */
	--mm-side-cart-anim: 0.28s;

	/* Filled in by the spacing and size scales below. */
	--mm-side-cart-gap: 14px;
	--mm-side-cart-pad: 18px;
	--mm-side-cart-trigger-size: 56px;
	--mm-side-cart-badge-size: 20px;

	/* PROTECTED: some themes and optimisers reset positioning on late-body
	   elements, which would drop the cart into the page flow. */
	position: fixed !important;
	/* PROTECTED: sticky headers, cookie bars and page builders routinely claim
	   very high stacking values; the cart has to sit above them to be usable. */
	z-index: var(--mm-side-cart-z) !important;
	inset: 0;
	isolation: isolate;
	pointer-events: none;
	font-family: inherit;
	font-size: var(--mm-side-cart-font-size);
	line-height: 1.45;
	text-align: start;
	direction: inherit;
}

.mm-side-cart-root,
.mm-side-cart-root *,
.mm-side-cart-root *::before,
.mm-side-cart-root *::after {
	box-sizing: border-box;
}

.mm-side-cart-root button {
	font: inherit;
	margin: 0;
	color: inherit;
}

/* PROTECTED: accessibility-focused themes force underlines on every link, which
   would draw a line through the cart button and the action buttons. */
.mm-side-cart-root a.mm-side-cart-trigger,
.mm-side-cart-root a.mm-side-cart-btn,
.mm-side-cart-root a.mm-side-cart-item-name {
	text-decoration: none !important;
}

.mm-side-cart-font-system {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.mm-side-cart-sr-only,
.mm-side-cart-live {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Focus rings take a colour that contrasts with the surface they sit on. */
.mm-side-cart-drawer :focus-visible {
	outline: 2px solid var(--mm-side-cart-title);
	outline-offset: 2px;
}

/* The quantity group clips its children, so its rings are drawn inward. */
.mm-side-cart-qty :focus-visible {
	outline-offset: -2px;
}

.mm-side-cart-icon {
	display: block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

/* Spacing scale. */
.mm-side-cart-space-compact {
	--mm-side-cart-gap: 10px;
	--mm-side-cart-pad: 14px;
}

.mm-side-cart-space-normal {
	--mm-side-cart-gap: 14px;
	--mm-side-cart-pad: 18px;
}

.mm-side-cart-space-roomy {
	--mm-side-cart-gap: 18px;
	--mm-side-cart-pad: 24px;
}

/* Cart button diameters. */
.mm-side-cart-size-small {
	--mm-side-cart-trigger-size: 48px;
}

.mm-side-cart-size-medium {
	--mm-side-cart-trigger-size: 56px;
}

.mm-side-cart-size-large {
	--mm-side-cart-trigger-size: 64px;
}

/* -------------------------------------------------------------------------
 * 2. The cart button
 *
 * The button is always a perfect circle. The item count and the subtotal
 * are positioned around the circle's box instead of inside its flow, so
 * turning either on can never stretch it into a pill. One rule sets the
 * composition: the outer corner holds the count, the inner side holds the
 * price, and both mirror when the button moves to the other side.
 * ---------------------------------------------------------------------- */

/* Two classes deep so a theme's `.site a` style cannot reshape it. */
.mm-side-cart-root .mm-side-cart-trigger {
	position: absolute;
	display: block;
	width: var(--mm-side-cart-trigger-size);
	height: var(--mm-side-cart-trigger-size);
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mm-side-cart-trigger-bg);
	color: var(--mm-side-cart-trigger-text);
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
	transition: background-color var(--mm-side-cart-anim) ease, transform var(--mm-side-cart-anim) ease, box-shadow var(--mm-side-cart-anim) ease;
	-webkit-tap-highlight-color: transparent;
}

.mm-side-cart-root .mm-side-cart-trigger:hover {
	background: var(--mm-side-cart-trigger-hover);
	transform: translateY(-2px);
}

.mm-side-cart-root .mm-side-cart-trigger:active {
	transform: translateY(0);
}

/* A ring in the button colour, separated by a gap, stays visible on light
   and dark pages alike. */
.mm-side-cart-root .mm-side-cart-trigger:focus-visible {
	outline: 3px solid var(--mm-side-cart-trigger-bg);
	outline-offset: 3px;
}

.mm-side-cart-trigger-inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
}

.mm-side-cart-trigger-icon {
	display: inline-flex;
}

/* The icon never outgrows the circle, whatever the icon size setting. */
.mm-side-cart-trigger-icon .mm-side-cart-icon {
	width: min(var(--mm-side-cart-icon-size), calc(var(--mm-side-cart-trigger-size) * 0.6));
	height: min(var(--mm-side-cart-icon-size), calc(var(--mm-side-cart-trigger-size) * 0.6));
}

/* The count badge is centred on the rim of the circle at 45 degrees. That
   point sits (1 - 1/sqrt(2)) / 2, about 0.1464, of the diameter in from each
   edge of the box, so the badge touches the rim at every button size.
   Longer counts grow inward over the button, never off the screen. */
.mm-side-cart-badge {
	--mm-side-cart-badge-inset: calc(var(--mm-side-cart-trigger-size) * 0.1464 - var(--mm-side-cart-badge-size) / 2);
	position: absolute;
	inset-block-start: var(--mm-side-cart-badge-inset);
	inset-inline-end: var(--mm-side-cart-badge-inset);
	min-width: var(--mm-side-cart-badge-size);
	height: var(--mm-side-cart-badge-size);
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--mm-side-cart-badge-bg);
	color: var(--mm-side-cart-badge-text);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	/* A ring in the drawer surface colour lifts the badge off both the button
	   and the page behind it. */
	box-shadow: 0 0 0 2px var(--mm-side-cart-bg);
}

/* The subtotal tag sits beside the circle, on the side facing the page, so
   it always has room and never pushes the button off the edge. */
.mm-side-cart-tag {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: calc(100% + 10px);
	translate: 0 -50%;
	display: block;
	height: 30px;
	max-width: min(60vw, 240px);
	padding: 0 12px;
	overflow: hidden;
	border: 1px solid var(--mm-side-cart-border);
	border-radius: 999px;
	background: var(--mm-side-cart-bg);
	color: var(--mm-side-cart-title);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
	font-size: 0.85em;
	font-weight: 600;
	line-height: 28px;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-variant-numeric: tabular-nums;
}

/* Mirror both when the button sits on the start side of the screen. */
.mm-side-cart-pos-bottom-start .mm-side-cart-badge,
.mm-side-cart-pos-middle-start .mm-side-cart-badge {
	inset-inline-end: auto;
	inset-inline-start: var(--mm-side-cart-badge-inset);
}

.mm-side-cart-pos-bottom-start .mm-side-cart-tag,
.mm-side-cart-pos-middle-start .mm-side-cart-tag {
	inset-inline-end: auto;
	inset-inline-start: calc(100% + 10px);
}

/* A short pop when the count goes up: the one moment of motion on the
   button, and it answers something the customer just did. */
.mm-side-cart-bump .mm-side-cart-badge {
	animation: mm-side-cart-pop calc(var(--mm-side-cart-anim) * 1.6) cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes mm-side-cart-pop {

	0% {
		transform: scale(0.6);
	}

	60% {
		transform: scale(1.18);
	}

	100% {
		transform: scale(1);
	}
}

/* Button placement. Logical insets mirror automatically in RTL. */
.mm-side-cart-pos-bottom-end .mm-side-cart-trigger,
.mm-side-cart-pos-bottom-start .mm-side-cart-trigger {
	inset-block-end: calc(var(--mm-side-cart-offset-y) + env(safe-area-inset-bottom, 0px));
}

.mm-side-cart-pos-bottom-end .mm-side-cart-trigger,
.mm-side-cart-pos-middle-end .mm-side-cart-trigger {
	inset-inline-end: var(--mm-side-cart-offset-x);
}

.mm-side-cart-pos-bottom-start .mm-side-cart-trigger,
.mm-side-cart-pos-middle-start .mm-side-cart-trigger {
	inset-inline-start: var(--mm-side-cart-offset-x);
}

.mm-side-cart-pos-middle-end .mm-side-cart-trigger,
.mm-side-cart-pos-middle-start .mm-side-cart-trigger {
	inset-block-start: 50%;
	translate: 0 -50%;
}

/* Hide the button while the cart is empty, but keep it in the DOM so
   WooCommerce can still replace its contents through cart fragments. */
.mm-side-cart-autohide.mm-side-cart-is-empty .mm-side-cart-trigger {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Quantity and remove controls only work with JavaScript. */
.mm-side-cart-root:not(.mm-side-cart-has-js) .mm-side-cart-qty,
.mm-side-cart-root:not(.mm-side-cart-has-js) .mm-side-cart-remove {
	display: none;
}

/* -------------------------------------------------------------------------
 * 3. Overlay and drawer
 * ---------------------------------------------------------------------- */

.mm-side-cart-overlay {
	position: absolute;
	inset: 0;
	background: #0f172a;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--mm-side-cart-anim) ease, visibility 0s linear var(--mm-side-cart-anim);
}

.mm-side-cart-open .mm-side-cart-overlay {
	opacity: var(--mm-side-cart-overlay-alpha);
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--mm-side-cart-anim) ease, visibility 0s;
}

.mm-side-cart-no-overlay .mm-side-cart-overlay {
	display: none;
}

.mm-side-cart-drawer {
	position: absolute;
	inset-block: 0;
	width: min(var(--mm-side-cart-drawer-width), calc(100vw - 32px));
	display: flex;
	flex-direction: column;
	background: var(--mm-side-cart-bg);
	color: var(--mm-side-cart-title);
	box-shadow: 0 0 48px rgba(15, 23, 42, 0.2);
	visibility: hidden;
	pointer-events: none;
	transform: translateX(var(--mm-side-cart-tx, 100%));
	transition: transform var(--mm-side-cart-anim) cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear var(--mm-side-cart-anim);
}

.mm-side-cart-side-end .mm-side-cart-drawer {
	inset-inline-end: 0;
	--mm-side-cart-tx: 100%;
}

.mm-side-cart-side-start .mm-side-cart-drawer {
	inset-inline-start: 0;
	--mm-side-cart-tx: -100%;
}

[dir="rtl"] .mm-side-cart-side-end .mm-side-cart-drawer {
	--mm-side-cart-tx: -100%;
}

[dir="rtl"] .mm-side-cart-side-start .mm-side-cart-drawer {
	--mm-side-cart-tx: 100%;
}

.mm-side-cart-open .mm-side-cart-drawer {
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
	transition: transform var(--mm-side-cart-anim) cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
}

/* Locks page scrolling while the drawer is open. The html element is the only
   selector outside .mm-side-cart- in this file, and a modal cannot work without it. */
html.mm-side-cart-locked {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/* -------------------------------------------------------------------------
 * 4. Drawer header
 * ---------------------------------------------------------------------- */

.mm-side-cart-header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	padding: var(--mm-side-cart-pad);
	border-block-end: 1px solid var(--mm-side-cart-border);
}

.mm-side-cart-drawer-title {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	font: inherit;
	font-size: 1.08em;
	font-weight: 600;
	color: var(--mm-side-cart-title);
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.mm-side-cart-drawer-count {
	font-size: 0.78em;
	font-weight: 500;
	color: var(--mm-side-cart-muted);
}

.mm-side-cart-close {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--mm-side-cart-radius);
	background: transparent;
	color: var(--mm-side-cart-muted);
	cursor: pointer;
	transition: background-color var(--mm-side-cart-anim) ease, color var(--mm-side-cart-anim) ease;
}

.mm-side-cart-close:hover {
	background: var(--mm-side-cart-btn2-bg);
	color: var(--mm-side-cart-title);
}

.mm-side-cart-close .mm-side-cart-icon {
	width: 18px;
	height: 18px;
}

.mm-side-cart-notice {
	flex: 0 0 auto;
	margin: 0;
	padding: 12px var(--mm-side-cart-pad);
	border-block-end: 1px solid #fecaca;
	background: #fef2f2;
	color: #991b1b;
	font-size: 0.85em;
	line-height: 1.4;
}

.mm-side-cart-notice[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
 * 5. Drawer body and items
 * ---------------------------------------------------------------------- */

.mm-side-cart-drawer-body {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-rows: 1fr auto;
}

.mm-side-cart-items {
	margin: 0;
	padding: 0 var(--mm-side-cart-pad);
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.mm-side-cart-items > li {
	list-style: none;
	margin: 0;
}

.mm-side-cart-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--mm-side-cart-gap);
	padding-block: var(--mm-side-cart-gap);
	border-block-end: 1px solid var(--mm-side-cart-border);
	transition: opacity var(--mm-side-cart-anim) ease;
}

.mm-side-cart-item:last-child {
	border-block-end: 0;
}

.mm-side-cart-item-media {
	flex: 0 0 auto;
	width: var(--mm-side-cart-thumb-size);
}

.mm-side-cart-item-media img {
	display: block;
	width: 100%;
	/* PROTECTED: many themes declare img { height: auto !important }, which
	   would stretch a non-square product image out of its square frame. */
	height: var(--mm-side-cart-thumb-size) !important;
	max-width: none;
	object-fit: cover;
	border-radius: var(--mm-side-cart-radius);
	border: 1px solid var(--mm-side-cart-border);
	background: #fff;
}

.mm-side-cart-item-main {
	flex: 1 1 auto;
	min-width: 0;
}

.mm-side-cart-item-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--mm-side-cart-title);
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
	transition: color var(--mm-side-cart-anim) ease;
}

a.mm-side-cart-item-name:hover {
	color: var(--mm-side-cart-price);
}

.mm-side-cart-item-meta {
	margin-block-start: 3px;
	color: var(--mm-side-cart-muted);
	font-size: 0.82em;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.mm-side-cart-item-meta dl,
.mm-side-cart-item-meta p {
	margin: 0;
	padding: 0;
	font-size: inherit;
	color: inherit;
}

.mm-side-cart-item-meta dt {
	display: inline;
	margin: 0;
	font-weight: 600;
}

.mm-side-cart-item-meta dd {
	display: inline;
	margin: 0;
	margin-inline-end: 8px;
}

.mm-side-cart-item-meta dd p {
	display: inline;
}

.mm-side-cart-item-note {
	margin: 4px 0 0;
	padding: 0;
	font-size: 0.78em;
	font-weight: 600;
	color: #b45309;
}

.mm-side-cart-item-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-block-start: 8px;
}

.mm-side-cart-item-price {
	color: var(--mm-side-cart-price);
	font-size: 0.92em;
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.mm-side-cart-item-price del {
	color: var(--mm-side-cart-muted);
	font-weight: 500;
}

.mm-side-cart-qty-static {
	color: var(--mm-side-cart-muted);
	font-size: 0.85em;
	font-weight: 500;
}

/* -------------------------------------------------------------------------
 * 6. Quantity and remove controls
 * ---------------------------------------------------------------------- */

.mm-side-cart-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--mm-side-cart-border);
	border-radius: var(--mm-side-cart-radius);
	overflow: hidden;
	background: var(--mm-side-cart-bg);
}

.mm-side-cart-qty-btn {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mm-side-cart-muted);
	cursor: pointer;
	transition: background-color var(--mm-side-cart-anim) ease, color var(--mm-side-cart-anim) ease;
}

.mm-side-cart-qty-btn:hover {
	background: var(--mm-side-cart-btn2-bg);
	color: var(--mm-side-cart-title);
}

.mm-side-cart-qty-btn[disabled] {
	opacity: 0.4;
	cursor: default;
}

.mm-side-cart-qty-btn .mm-side-cart-icon {
	width: 14px;
	height: 14px;
}

.mm-side-cart-qty-input {
	width: 44px;
	height: 36px;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--mm-side-cart-border);
	border-radius: 0;
	background: transparent;
	color: var(--mm-side-cart-title);
	font: inherit;
	font-size: 0.88em;
	font-weight: 600;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
	font-variant-numeric: tabular-nums;
}

.mm-side-cart-qty-input::-webkit-outer-spin-button,
.mm-side-cart-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

.mm-side-cart-remove {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--mm-side-cart-radius);
	background: transparent;
	color: var(--mm-side-cart-muted);
	cursor: pointer;
	transition: background-color var(--mm-side-cart-anim) ease, color var(--mm-side-cart-anim) ease;
}

.mm-side-cart-remove:hover {
	background: #fef2f2;
	color: #b91c1c;
}

.mm-side-cart-remove .mm-side-cart-icon {
	width: 16px;
	height: 16px;
}

/* Busy state while a change is saving. */
.mm-side-cart-item[aria-busy="true"] {
	opacity: 0.5;
}

.mm-side-cart-item[aria-busy="true"] .mm-side-cart-qty,
.mm-side-cart-item[aria-busy="true"] .mm-side-cart-remove {
	pointer-events: none;
}

.mm-side-cart-spinner {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 0;
	width: 16px;
	height: 16px;
	margin-block-start: -8px;
	border: 2px solid var(--mm-side-cart-border);
	border-top-color: var(--mm-side-cart-price);
	border-radius: 50%;
	animation: mm-side-cart-spin 700ms linear infinite;
}

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

/* -------------------------------------------------------------------------
 * 7. Footer and empty state
 * ---------------------------------------------------------------------- */

.mm-side-cart-footer {
	flex: 0 0 auto;
	display: grid;
	gap: 12px;
	padding: var(--mm-side-cart-pad);
	border-block-start: 1px solid var(--mm-side-cart-border);
	background: var(--mm-side-cart-bg);
}

.mm-side-cart-subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.mm-side-cart-subtotal-label {
	color: var(--mm-side-cart-muted);
	font-size: 0.9em;
	font-weight: 500;
}

.mm-side-cart-subtotal-value {
	color: var(--mm-side-cart-title);
	font-size: 1.1em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.mm-side-cart-subtotal-value small {
	display: block;
	font-size: 0.62em;
	font-weight: 500;
	color: var(--mm-side-cart-muted);
}

.mm-side-cart-actions {
	display: grid;
	gap: 10px;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

.mm-side-cart-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 16px;
	border: 0;
	border-radius: var(--mm-side-cart-radius);
	font: inherit;
	font-size: 0.94em;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	transition: background-color var(--mm-side-cart-anim) ease, color var(--mm-side-cart-anim) ease;
}

.mm-side-cart-btn-primary {
	background: var(--mm-side-cart-btn-bg);
	color: var(--mm-side-cart-btn-text);
}

.mm-side-cart-btn-primary:hover,
.mm-side-cart-btn-primary:focus {
	background: var(--mm-side-cart-btn-hover);
	color: var(--mm-side-cart-btn-text);
}

.mm-side-cart-btn-secondary {
	background: var(--mm-side-cart-btn2-bg);
	color: var(--mm-side-cart-btn2-text);
}

.mm-side-cart-btn-secondary:hover,
.mm-side-cart-btn-secondary:focus {
	background: color-mix(in srgb, var(--mm-side-cart-btn2-bg) 88%, #000000);
	color: var(--mm-side-cart-btn2-text);
}

.mm-side-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 48px var(--mm-side-cart-pad);
	text-align: center;
}

.mm-side-cart-empty-icon {
	display: inline-flex;
	margin-block-end: 6px;
	color: var(--mm-side-cart-border);
}

.mm-side-cart-empty-icon .mm-side-cart-icon {
	width: 48px;
	height: 48px;
	stroke-width: 1.2;
}

.mm-side-cart-empty-title {
	margin: 0;
	padding: 0;
	color: var(--mm-side-cart-title);
	font-size: 1.02em;
	font-weight: 600;
}

.mm-side-cart-empty-text {
	margin: 0;
	padding: 0;
	color: var(--mm-side-cart-muted);
	font-size: 0.88em;
}

.mm-side-cart-empty-cta {
	margin-block-start: 14px;
	min-width: 180px;
}

/* -------------------------------------------------------------------------
 * 8. Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 768px) {
	.mm-side-cart-hide-mobile {
		display: none;
	}

	.mm-side-cart-size-large {
		--mm-side-cart-trigger-size: 58px;
	}

	.mm-side-cart-size-medium {
		--mm-side-cart-trigger-size: 52px;
	}

	.mm-side-cart-tag {
		height: 28px;
		padding: 0 10px;
		line-height: 26px;
	}

	.mm-side-cart-qty-btn {
		width: 42px;
		height: 42px;
	}

	.mm-side-cart-qty-input {
		width: 46px;
		height: 42px;
	}

	.mm-side-cart-remove {
		width: 40px;
		height: 40px;
	}
}

@media (min-width: 769px) {
	.mm-side-cart-hide-desktop {
		display: none;
	}
}

@media (max-width: 540px) {
	.mm-side-cart-drawer {
		width: 100vw;
	}

	.mm-side-cart-empty-cta {
		width: 100%;
	}
}

@media (max-width: 359px) {
	.mm-side-cart-actions {
		grid-auto-flow: row;
	}
}

/* -------------------------------------------------------------------------
 * 9. Reduced motion
 *
 * Both of these switch the single motion token off, so no !important and no
 * per-property overrides are needed.
 * ---------------------------------------------------------------------- */

.mm-side-cart-no-motion {
	--mm-side-cart-anim: 0s;
}

@media (prefers-reduced-motion: reduce) {
	.mm-side-cart-root {
		--mm-side-cart-anim: 0s;
	}

	.mm-side-cart-root .mm-side-cart-trigger:hover {
		transform: none;
	}

	.mm-side-cart-bump .mm-side-cart-badge {
		animation: none;
	}

	.mm-side-cart-spinner {
		animation: none;
		border-top-color: var(--mm-side-cart-border);
	}
}