/**
 * M M Sanidaz — Shop Quick Add + Cart Drawer
 * ------------------------------------------------------------------
 * Two independent overlays, both hidden by default and toggled via
 * quick-add.js: a small size list (variable products: every configured
 * size, unavailable ones disabled; size only — colour is chosen on the
 * product page; a bottom sheet on phones) and a
 * right-side Cart Drawer shown after a successful add. Markup is printed
 * once in wp_footer (inc/quick-add.php) and populated at runtime.
 *
 * Uses this site's own design tokens (Espresso/Ivory/Rose/Taupe/Beige) —
 * not SNITCH's colors or typography, only the interaction pattern.
 */

body.mmsc-modal-open {
	overflow: hidden;
}

/* The page itself stays still behind an open panel. The theme sets
   `overflow-y: scroll` on <html>, so the lock has to be there too (a body
   lock alone let the page scroll behind the backdrop) — the same lock as
   the Size Guide's (single-product.css). The gutter keeps its width, so
   nothing shifts sideways. */
html:has(> body.mmsc-modal-open) {
	overflow-y: hidden;
	scrollbar-gutter: stable;
}

/* ---------------------------------------------------------------
   Shared backdrop treatment
------------------------------------------------------------------ */

.mmsc-quick-add,
.mmsc-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	visibility: hidden;
	pointer-events: none;
}

.mmsc-quick-add.is-open,
.mmsc-cart-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.mmsc-quick-add__backdrop,
.mmsc-cart-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 45, 38, 35, 0.5 ); /* espresso, translucent */
	opacity: 0;
	transition: opacity var( --mmsc-transition-base );
}

.mmsc-quick-add.is-open .mmsc-quick-add__backdrop,
.mmsc-cart-drawer.is-open .mmsc-cart-drawer__backdrop {
	opacity: 1;
}

/* ---------------------------------------------------------------
   Quick Add — "Choose Your Size" panel
------------------------------------------------------------------ */

.mmsc-quick-add__panel {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min( 360px, calc( 100vw - 2 * var( --mmsc-space-4 ) ) );
	max-height: calc( 100vh - 2 * var( --mmsc-space-5 ) );
	overflow-y: auto;
	background: var( --mmsc-color-surface );
	border-radius: var( --mmsc-radius-lg );
	box-shadow: var( --mmsc-shadow-md );
	padding: var( --mmsc-space-6 ) var( --mmsc-space-5 ) var( --mmsc-space-5 );
	transform: translate( -50%, -46% );
	opacity: 0;
	transition: opacity var( --mmsc-transition-base ), transform var( --mmsc-transition-base );
}

.mmsc-quick-add.is-open .mmsc-quick-add__panel {
	opacity: 1;
	transform: translate( -50%, -50% );
}

.mmsc-quick-add__panel:focus-visible {
	outline: none;
}

.mmsc-quick-add__close,
.mmsc-cart-drawer__close {
	position: absolute;
	top: var( --mmsc-space-3 );
	right: var( --mmsc-space-3 );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: var( --mmsc-radius-pill );
	background: var( --mmsc-color-bg );
	color: var( --mmsc-color-text );
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background var( --mmsc-transition-fast );
}

.mmsc-quick-add__close:hover,
.mmsc-cart-drawer__close:hover {
	background: var( --mmsc-color-border );
}

.mmsc-quick-add__close:focus-visible,
.mmsc-cart-drawer__close:focus-visible,
.mmsc-size-option:focus-visible,
.mmsc-cart-drawer__view-cart:focus-visible,
.mmsc-cart-drawer__checkout:focus-visible,
.mmsc-quick-add__product-link:focus-visible {
	outline: 2px solid var( --mmsc-color-accent );
	outline-offset: 2px;
}

.mmsc-quick-add__title {
	margin: 0 0 var( --mmsc-space-5 );
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-sm );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --mmsc-color-text );
	text-align: center;
}

.mmsc-quick-add__status {
	margin: 0;
	padding: var( --mmsc-space-5 ) 0;
	text-align: center;
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-sm );
	color: var( --mmsc-color-text-muted );
}

.mmsc-quick-add__status--error {
	color: var( --mmsc-color-error );
}

.mmsc-quick-add__product-link {
	display: block;
	text-align: center;
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-sm );
	font-weight: 600;
	color: var( --mmsc-color-primary );
	text-decoration: underline;
}

/* Product name under the title: which style the sizes are for. */
.mmsc-quick-add__product {
	margin: calc( -1 * var( --mmsc-space-4 ) ) 0 var( --mmsc-space-5 );
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-sm );
	color: var( --mmsc-color-text-muted );
	text-align: center;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------
   Size list (quick-add.js): every configured size; a tap on an
   available one adds it. Unavailable sizes are real disabled buttons.
------------------------------------------------------------------ */

.mmsc-size-list {
	display: flex;
	flex-direction: column;
	gap: var( --mmsc-space-2 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.mmsc-size-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --mmsc-space-3 );
	width: 100%;
	min-height: 48px; /* touch target */
	padding: var( --mmsc-space-3 ) var( --mmsc-space-4 );
	border: 1px solid var( --mmsc-color-border );
	border-radius: var( --mmsc-radius-sm );
	background: var( --mmsc-color-surface );
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-base );
	font-weight: 500;
	color: var( --mmsc-color-text );
	text-align: left;
	cursor: pointer;
	transition: border-color var( --mmsc-transition-fast ), background var( --mmsc-transition-fast ), color var( --mmsc-transition-fast );
}

.mmsc-size-option:hover:not( :disabled ),
.mmsc-size-option:focus-visible:not( :disabled ) {
	border-color: var( --mmsc-color-primary );
	background: var( --mmsc-color-bg );
}

.mmsc-size-option.is-disabled,
.mmsc-size-option:disabled {
	cursor: not-allowed;
	color: var( --mmsc-color-text-muted );
	background: var( --mmsc-color-bg );
	border-color: var( --mmsc-color-border );
}

.mmsc-size-option.is-disabled .mmsc-size-option__label {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* Unavailable sizes: visible (every configured size is listed), muted,
   struck through, a dashed edge — and no hover that suggests a choice. */
.mmsc-size-option.is-disabled,
.mmsc-size-option.is-disabled:hover {
	border-style: dashed;
}

.mmsc-size-option__note {
	flex-shrink: 0;
	font-size: var( --mmsc-text-xs );
	color: var( --mmsc-color-text-muted );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* The size just tapped is marked at once and keeps its label; a small
   spinner appears at its end only if the add takes a moment. The other
   sizes rest while it runs (one add at a time). */
.mmsc-size-option.is-selected,
.mmsc-size-option.is-selected:disabled {
	position: relative;
	border-color: var( --mmsc-color-dark );
	background: var( --mmsc-color-bg );
	color: var( --mmsc-color-text );
	cursor: progress;
}

.mmsc-size-option.is-loading::after {
	content: '';
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 2px solid var( --mmsc-color-border );
	border-top-color: var( --mmsc-color-primary );
	border-radius: 50%;
	opacity: 0;
	animation: mmsc-fade-in 150ms ease 200ms forwards, mmsc-spin 700ms linear infinite;
}

.mmsc-quick-add__body.is-waiting .mmsc-size-option:not( .is-selected ):not( .is-disabled ) {
	opacity: 0.55;
}

/* Sizes still loading: the list's own shape, so the panel neither sits
   blank nor jumps when they arrive. */
.mmsc-size-skeleton {
	display: block;
	height: 54px; /* a real size button: 12px padding, the theme's 1.8 line-height, border */
	border-radius: var( --mmsc-radius-sm );
	background: linear-gradient( 90deg, var( --mmsc-color-bg ) 0%, #efe9e1 50%, var( --mmsc-color-bg ) 100% );
	background-size: 200% 100%;
	animation: mmsc-shimmer 1.2s ease-in-out infinite;
}

.mmsc-size-list--enter {
	animation: mmsc-fade-in 160ms ease;
}

.mmsc-quick-add__inline-error {
	padding: var( --mmsc-space-3 ) 0 0;
}

/* Phones: the list rises from the bottom edge, within thumb reach. */
@media ( max-width: 600px ) {
	.mmsc-quick-add__panel {
		top: auto;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: min( 88vh, calc( 100dvh - var( --mmsc-space-6 ) ) );
		border-radius: var( --mmsc-radius-lg ) var( --mmsc-radius-lg ) 0 0;
		padding: var( --mmsc-space-5 ) var( --mmsc-space-4 ) calc( var( --mmsc-space-4 ) + env( safe-area-inset-bottom, 0px ) );
		transform: translateY( 24px );
	}

	.mmsc-quick-add.is-open .mmsc-quick-add__panel {
		transform: translateY( 0 );
	}

	.mmsc-quick-add__title {
		margin-bottom: var( --mmsc-space-4 );
	}

	.mmsc-quick-add__product {
		margin-top: calc( -1 * var( --mmsc-space-3 ) );
		margin-bottom: var( --mmsc-space-4 );
	}
}

@keyframes mmsc-shimmer {
	from {
		background-position: 100% 0;
	}
	to {
		background-position: -100% 0;
	}
}

@keyframes mmsc-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

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

/* ---------------------------------------------------------------
   Cart Drawer
------------------------------------------------------------------ */

.mmsc-cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min( 400px, 100vw );
	display: flex;
	flex-direction: column;
	background: var( --mmsc-color-surface );
	box-shadow: var( --mmsc-shadow-md );
	transform: translateX( 100% );
	transition: transform var( --mmsc-transition-base );
}

.mmsc-cart-drawer.is-open .mmsc-cart-drawer__panel {
	transform: translateX( 0 );
}

.mmsc-cart-drawer__panel:focus-visible {
	outline: none;
}

.mmsc-cart-drawer__header {
	position: relative;
	padding: var( --mmsc-space-5 ) var( --mmsc-space-5 ) var( --mmsc-space-4 );
	border-bottom: 1px solid var( --mmsc-color-border );
}

.mmsc-cart-drawer__title {
	margin: 0;
	padding-right: var( --mmsc-space-7 );
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-sm );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --mmsc-color-text );
}

.mmsc-cart-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var( --mmsc-space-5 );
}

.mmsc-cart-drawer__item {
	display: flex;
	gap: var( --mmsc-space-4 );
	padding-bottom: var( --mmsc-space-5 );
	margin-bottom: var( --mmsc-space-5 );
	border-bottom: 1px solid var( --mmsc-color-border );
}

.mmsc-cart-drawer__image {
	flex-shrink: 0;
	width: 88px;
	height: 110px;
	object-fit: cover;
	border-radius: var( --mmsc-radius-md );
	background: var( --mmsc-color-bg );
}

.mmsc-cart-drawer__details {
	display: flex;
	flex-direction: column;
	gap: var( --mmsc-space-1 );
	min-width: 0;
}

.mmsc-cart-drawer__name {
	margin: 0;
	font-family: var( --mmsc-font-heading );
	font-size: var( --mmsc-text-base );
	font-weight: 600;
	color: var( --mmsc-color-text );
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.mmsc-cart-drawer__meta {
	margin: 0;
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-sm );
	color: var( --mmsc-color-text-muted );
	text-transform: capitalize;
}

.mmsc-cart-drawer__price {
	margin-top: var( --mmsc-space-1 );
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-base );
	font-weight: 600;
	color: var( --mmsc-color-text );
}

.mmsc-cart-drawer__price del {
	margin-right: var( --mmsc-space-2 );
	font-size: var( --mmsc-text-sm );
	font-weight: 400;
	color: var( --mmsc-color-text-muted );
	opacity: 1;
}

.mmsc-cart-drawer__price ins {
	text-decoration: none;
}

/* Prices keep the drawer's colours on every page (the Additional CSS used
   to paint Wishlist-page prices green: `.page-id-1288 bdi`). */
.mmsc-cart-drawer .mmsc-cart-drawer__price .amount,
.mmsc-cart-drawer .mmsc-cart-drawer__price bdi,
.mmsc-cart-drawer .mmsc-cart-drawer__subtotal .amount,
.mmsc-cart-drawer .mmsc-cart-drawer__subtotal bdi,
.mmsc-cart-drawer .mmsc-cart-drawer__subtotal-amount {
	background: none !important;
	color: var( --mmsc-color-text );
	font-size: inherit;
	font-weight: inherit;
}

.mmsc-cart-drawer .woocommerce-Price-currencySymbol {
	font-size: inherit;
}

.mmsc-cart-drawer .mmsc-cart-drawer__price del .amount,
.mmsc-cart-drawer .mmsc-cart-drawer__price del bdi {
	color: var( --mmsc-color-text-muted );
}

.mmsc-cart-drawer .mmsc-cart-drawer__price .mmsc-discount-percent {
	color: var( --mmsc-color-sale );
}

/* Quantity stepper + Remove (quick-add.js): both change the drawer at
   once; WooCommerce confirms in the background. */
.mmsc-cart-drawer__line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --mmsc-space-3 );
	margin-top: var( --mmsc-space-2 );
}

.mmsc-drawer-qty {
	display: inline-flex;
	align-items: stretch;
	height: 36px;
	border: 1px solid var( --mmsc-color-border );
	border-radius: var( --mmsc-radius-sm );
	background: var( --mmsc-color-surface );
	overflow: hidden;
}

.mmsc-cart-drawer .mmsc-drawer-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var( --mmsc-color-text );
	cursor: pointer;
	touch-action: manipulation; /* rapid taps never zoom */
	transition: background var( --mmsc-transition-fast ), color var( --mmsc-transition-fast );
}

.mmsc-cart-drawer .mmsc-drawer-qty__btn:hover:not( :disabled ) {
	background: var( --mmsc-color-bg );
}

.mmsc-cart-drawer .mmsc-drawer-qty__btn:disabled {
	color: var( --mmsc-color-border );
	cursor: default;
}

.mmsc-cart-drawer .mmsc-drawer-qty__btn:focus-visible,
.mmsc-cart-drawer__remove:focus-visible {
	outline: 2px solid var( --mmsc-color-accent );
	outline-offset: -2px;
}

.mmsc-drawer-qty__value {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-sm );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var( --mmsc-color-text );
}

.mmsc-cart-drawer .mmsc-cart-drawer__remove {
	min-height: 0;
	margin: 0;
	padding: var( --mmsc-space-2 ) 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-xs );
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var( --mmsc-color-text-muted );
	cursor: pointer;
}

.mmsc-cart-drawer .mmsc-cart-drawer__remove:hover {
	color: var( --mmsc-color-text );
}

/* Removed: the line folds away and a short note takes its place. */
.mmsc-cart-drawer__item {
	max-height: 320px;
	transition: max-height var( --mmsc-transition-base ), opacity var( --mmsc-transition-fast ), padding var( --mmsc-transition-base ), margin var( --mmsc-transition-base ), border-color var( --mmsc-transition-base ), visibility 0s;
}

.mmsc-cart-drawer__item.is-removed {
	max-height: 0;
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom-color: transparent;
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
	transition-delay: 0s, 0s, 0s, 0s, 0s, 250ms;
}

.mmsc-cart-drawer__removed {
	margin: 0 0 var( --mmsc-space-5 );
	padding-bottom: var( --mmsc-space-5 );
	border-bottom: 1px solid var( --mmsc-color-border );
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-sm );
	color: var( --mmsc-color-text-muted );
	animation: mmsc-fade-in 200ms ease;
}

.mmsc-cart-drawer__removed:focus {
	outline: none;
}

.mmsc-cart-drawer__subtotal-amount {
	font-variant-numeric: tabular-nums;
}

/* A link waiting for the cart to finish syncing before it navigates. */
.mmsc-cart-drawer__view-cart.is-busy,
.mmsc-cart-drawer__checkout.is-busy {
	cursor: progress;
	opacity: 0.75;
}

.mmsc-cart-drawer__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var( --mmsc-space-5 );
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-base );
	font-weight: 600;
	color: var( --mmsc-color-text );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mmsc-cart-drawer__subtotal span:first-child {
	font-size: var( --mmsc-text-sm );
	font-weight: 500;
	color: var( --mmsc-color-text-muted );
}

.mmsc-cart-drawer__actions {
	display: flex;
	flex-direction: column;
	gap: var( --mmsc-space-3 );
	padding: var( --mmsc-space-4 ) var( --mmsc-space-5 ) calc( var( --mmsc-space-5 ) + env( safe-area-inset-bottom, 0px ) );
	border-top: 1px solid var( --mmsc-color-border );
}

.mmsc-cart-drawer__view-cart,
.mmsc-cart-drawer__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var( --mmsc-space-3 ) var( --mmsc-space-5 );
	border-radius: var( --mmsc-radius-sm );
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-sm );
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: background var( --mmsc-transition-fast ), color var( --mmsc-transition-fast );
}

.mmsc-cart-drawer__view-cart {
	background: transparent;
	color: var( --mmsc-color-primary );
	box-shadow: inset 0 0 0 1px var( --mmsc-color-primary );
}

.mmsc-cart-drawer__view-cart:hover {
	background: var( --mmsc-color-primary );
	color: var( --mmsc-color-surface );
}

.mmsc-cart-drawer__checkout {
	background: var( --mmsc-color-dark );
	color: var( --mmsc-color-surface );
}

.mmsc-cart-drawer__checkout:hover {
	background: var( --mmsc-color-dark-hover );
}

/* ---------------------------------------------------------------
   Cart Drawer — "You May Also Like" (quick-add.js + inc/drawer-recs.php)
   A short sideways row between the added line and the subtotal. Its
   loading shape has the row's final height, so the subtotal and buttons
   never jump when the products arrive; if there's nothing to show, the
   row is simply removed.
------------------------------------------------------------------ */

.mmsc-drawer-recs {
	margin: 0 0 var( --mmsc-space-5 );
	padding-bottom: var( --mmsc-space-5 );
	border-bottom: 1px solid var( --mmsc-color-border );
	animation: mmsc-fade-in 240ms ease;
}

.mmsc-cart-drawer .mmsc-drawer-recs__title {
	margin: 0 0 var( --mmsc-space-3 );
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-xs );
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var( --mmsc-color-text-muted );
}

.mmsc-cart-drawer .mmsc-drawer-recs__list {
	display: flex;
	gap: var( --mmsc-space-3 );
	margin: 0 calc( -1 * var( --mmsc-space-5 ) );
	padding: 0 var( --mmsc-space-5 ) var( --mmsc-space-1 );
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var( --mmsc-space-5 );
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.mmsc-drawer-recs__list::-webkit-scrollbar {
	display: none;
}

.mmsc-cart-drawer .mmsc-drawer-rec {
	display: flex;
	flex: 0 0 112px;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

.mmsc-drawer-rec__media {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var( --mmsc-radius-md );
	background: var( --mmsc-color-bg );
}

.mmsc-drawer-rec__media img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: center top;
}

.mmsc-cart-drawer a.mmsc-drawer-rec__name {
	display: -webkit-box;
	min-height: 2.7em;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-family: var( --mmsc-font-body );
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	color: var( --mmsc-color-text );
	text-decoration: none;
}

.mmsc-cart-drawer a.mmsc-drawer-rec__name:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mmsc-drawer-rec__price {
	font-family: var( --mmsc-font-body );
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var( --mmsc-color-text );
}

.mmsc-drawer-rec__price del {
	margin-right: 4px;
	font-weight: 400;
	color: var( --mmsc-color-text-muted );
}

.mmsc-drawer-rec__price ins {
	text-decoration: none;
}

.mmsc-cart-drawer .mmsc-drawer-rec__price .amount,
.mmsc-cart-drawer .mmsc-drawer-rec__price bdi {
	background: none !important;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* Rupee amounts only — no discount badge / range suffix in this tight space. */
.mmsc-cart-drawer .mmsc-drawer-rec__price .onsale,
.mmsc-cart-drawer .mmsc-drawer-rec__price .mmsc-discount-percent,
.mmsc-cart-drawer .mmsc-drawer-rec__price .screen-reader-text + .mmsc-discount-percent {
	display: none;
}

.mmsc-cart-drawer .mmsc-drawer-rec__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	min-height: 34px;
	margin: 2px 0 0;
	padding: 0 var( --mmsc-space-2 );
	border: 1px solid var( --mmsc-color-dark );
	border-radius: var( --mmsc-radius-sm );
	background: transparent;
	box-shadow: none;
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-xs );
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --mmsc-color-text );
	cursor: pointer;
	touch-action: manipulation;
	transition: background var( --mmsc-transition-fast ), color var( --mmsc-transition-fast ), border-color var( --mmsc-transition-fast );
}

.mmsc-cart-drawer .mmsc-drawer-rec__add:hover:not( :disabled ),
.mmsc-cart-drawer .mmsc-drawer-rec.is-picking .mmsc-drawer-rec__add {
	background: var( --mmsc-color-dark );
	color: var( --mmsc-color-surface );
}

.mmsc-cart-drawer .mmsc-drawer-rec__add--link {
	border-color: var( --mmsc-color-border );
}

.mmsc-cart-drawer .mmsc-drawer-rec.is-added .mmsc-drawer-rec__add {
	border-color: var( --mmsc-color-border );
	background: var( --mmsc-color-bg );
	color: var( --mmsc-color-text );
	cursor: default;
}

.mmsc-cart-drawer .mmsc-drawer-rec__add.is-loading,
.mmsc-cart-drawer .mmsc-drawer-recs__size.is-loading {
	cursor: progress;
	opacity: 0.6;
}

.mmsc-cart-drawer .mmsc-drawer-rec__add:focus-visible,
.mmsc-cart-drawer a.mmsc-drawer-rec__name:focus-visible,
.mmsc-cart-drawer .mmsc-drawer-recs__size:focus-visible,
.mmsc-cart-drawer .mmsc-drawer-recs__sizes-close:focus-visible {
	outline: 2px solid var( --mmsc-color-accent );
	outline-offset: 2px;
}

/* Loading shape: same box as a real card (image + two text lines + button). */
.mmsc-drawer-rec--skeleton {
	pointer-events: none;
}

.mmsc-drawer-rec--skeleton .mmsc-drawer-rec__line {
	display: block;
	height: 12px;
	border-radius: 3px;
	background: var( --mmsc-color-bg );
}

.mmsc-drawer-rec--skeleton .mmsc-drawer-rec__line--short {
	width: 60%;
	margin-bottom: 40px; /* the price line + the Add button's height */
}

.mmsc-drawer-recs.is-loading .mmsc-drawer-rec--skeleton {
	animation: mmsc-recs-pulse 1400ms ease-in-out infinite;
}

@keyframes mmsc-recs-pulse {
	50% {
		opacity: 0.55;
	}
}

/* Mouse / trackpad: a sideways row is awkward to scroll, so three cards
   share the width exactly; touch screens keep the four-card swipe row. */
@media ( hover: hover ) and ( pointer: fine ) and ( min-width: 480px ) {
	.mmsc-cart-drawer .mmsc-drawer-recs__list {
		margin: 0;
		padding: 0 0 var( --mmsc-space-1 );
		overflow: visible;
	}

	.mmsc-cart-drawer .mmsc-drawer-rec {
		flex: 1 1 0;
	}

	.mmsc-cart-drawer .mmsc-drawer-rec:nth-child( n + 4 ) {
		display: none;
	}
}

/* Subtotal + View Cart / Checkout pinned to the bottom of the drawer body.
   Without recommendations everything fits and this looks exactly as
   before; with them, the row scrolls underneath and the buttons stay in
   reach (short phones included). */
.mmsc-cart-drawer__footer {
	position: sticky;
	bottom: calc( -1 * var( --mmsc-space-5 ) );
	z-index: 1;
	margin: 0 calc( -1 * var( --mmsc-space-5 ) ) calc( -1 * var( --mmsc-space-5 ) );
	padding: 0 var( --mmsc-space-5 );
	background: var( --mmsc-color-surface );
}

.mmsc-cart-drawer__footer::before {
	content: "";
	position: absolute;
	top: -12px;
	right: 0;
	left: 0;
	height: 12px;
	background: linear-gradient( to top, rgba( 45, 38, 35, 0.06 ), rgba( 45, 38, 35, 0 ) );
	opacity: 0;
	pointer-events: none;
	transition: opacity var( --mmsc-transition-fast );
}

.mmsc-cart-drawer__body.is-scrollable .mmsc-cart-drawer__footer::before {
	opacity: 1;
}

.mmsc-cart-drawer__body.is-scrollable .mmsc-cart-drawer__footer {
	padding-top: var( --mmsc-space-4 );
}

/* Size row for the recommendation being added. */
.mmsc-drawer-recs__sizes {
	margin-top: var( --mmsc-space-4 );
	padding: var( --mmsc-space-3 );
	border-radius: var( --mmsc-radius-md );
	background: var( --mmsc-color-bg );
	animation: mmsc-fade-in 200ms ease;
}

.mmsc-drawer-recs__sizes[hidden] {
	display: none;
}

.mmsc-drawer-recs__sizes-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var( --mmsc-space-2 );
	margin-bottom: var( --mmsc-space-2 );
}

.mmsc-cart-drawer .mmsc-drawer-recs__sizes-label {
	margin: 0;
	font-family: var( --mmsc-font-body );
	font-size: 13px;
	line-height: 1.4;
	color: var( --mmsc-color-text ) !important; /* legacy `p` colour rule */
}

.mmsc-drawer-recs__sizes-label span {
	display: block;
	font-size: var( --mmsc-text-xs );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --mmsc-color-text-muted );
}

.mmsc-cart-drawer .mmsc-drawer-recs__sizes-close {
	display: flex;
	flex: 0 0 28px;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-height: 0;
	margin: -4px -4px 0 0;
	padding: 0;
	border: 0;
	border-radius: var( --mmsc-radius-pill );
	background: transparent;
	box-shadow: none;
	font-size: 18px;
	line-height: 1;
	color: var( --mmsc-color-text );
	cursor: pointer;
}

.mmsc-drawer-recs__size-list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --mmsc-space-2 );
}

.mmsc-cart-drawer .mmsc-drawer-recs__size {
	min-width: 64px;
	min-height: 36px;
	margin: 0;
	padding: 0 var( --mmsc-space-3 );
	border: 1px solid var( --mmsc-color-border );
	border-radius: var( --mmsc-radius-sm );
	background: var( --mmsc-color-surface );
	box-shadow: none;
	font-family: var( --mmsc-font-body );
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: var( --mmsc-color-text );
	cursor: pointer;
	touch-action: manipulation;
	transition: border-color var( --mmsc-transition-fast ), background var( --mmsc-transition-fast ), color var( --mmsc-transition-fast );
}

.mmsc-cart-drawer .mmsc-drawer-recs__size:hover:not( :disabled ) {
	border-color: var( --mmsc-color-dark );
}

.mmsc-cart-drawer .mmsc-drawer-recs__size.is-selected {
	border-color: var( --mmsc-color-dark );
	background: var( --mmsc-color-dark );
	color: var( --mmsc-color-surface );
}

/* Same unavailable treatment as the Quick Add chooser. */
.mmsc-cart-drawer .mmsc-drawer-recs__size.is-unavailable {
	border-style: dashed;
	background: var( --mmsc-color-bg );
	color: var( --mmsc-color-text-muted );
	text-decoration: line-through;
	cursor: not-allowed;
}

.mmsc-cart-drawer .mmsc-drawer-recs__size:disabled:not( .is-unavailable ) {
	cursor: progress;
}

/* While a recommendation is being added, its siblings wait (no double adds). */
.mmsc-cart-drawer__body.is-rec-adding .mmsc-drawer-rec__add:not( .is-loading ),
.mmsc-cart-drawer__body.is-rec-adding .mmsc-drawer-recs__size:not( .is-loading ) {
	pointer-events: none;
}

/* ---------------------------------------------------------------
   Mobile — full-bleed drawer, no overlap with the
   bottom navigation (a modal overlay is expected to sit above it
   while open; the bottom nav itself is left completely untouched).
------------------------------------------------------------------ */

@media ( max-width: 479px ) {
	/* (The Quick Add panel is a full-width bottom sheet up to 600px — see
	   the chooser section above.) */

	.mmsc-cart-drawer__panel {
		width: 100vw;
	}

	.mmsc-cart-drawer__item {
		gap: var( --mmsc-space-3 );
	}

	.mmsc-cart-drawer__image {
		width: 72px;
		height: 90px;
	}

	.mmsc-cart-drawer__actions {
		flex-direction: column;
	}
}

/* ---------------------------------------------------------------
   Shared feedback (cart-sync.js) — also used by the single product
   form and the Cart page, which load this file too.
------------------------------------------------------------------ */

/* A figure that just changed settles in quietly. */
.mmsc-tick {
	animation: mmsc-tick 220ms ease;
}

@keyframes mmsc-tick {
	from {
		opacity: 0.35;
	}
	to {
		opacity: 1;
	}
}

/* Toasts: bottom centre, above the mobile bottom nav, never over the
   content's layout (fixed, so nothing below moves). */
.mmsc-toasts {
	position: fixed;
	left: 50%;
	/* Clear of the bottom nav / Cart dock on phones (their shared offset). */
	bottom: calc( var( --mmsc-float-offset, env( safe-area-inset-bottom, 0px ) ) + var( --mmsc-space-4 ) );
	z-index: 100001; /* above the Cart Drawer / Quick Add (100000) */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --mmsc-space-2 );
	width: min( 420px, calc( 100vw - 2 * var( --mmsc-space-4 ) ) );
	transform: translateX( -50% );
	pointer-events: none;
}

.mmsc-toast {
	display: flex;
	align-items: flex-start;
	gap: var( --mmsc-space-3 );
	width: 100%;
	padding: var( --mmsc-space-3 ) var( --mmsc-space-3 ) var( --mmsc-space-3 ) var( --mmsc-space-4 );
	border-radius: var( --mmsc-radius-md );
	background: var( --mmsc-color-dark );
	box-shadow: 0 8px 24px rgba( 45, 38, 35, 0.2 );
	color: var( --mmsc-color-surface );
	opacity: 0;
	transform: translateY( 8px );
	transition: opacity 200ms ease, transform 200ms ease;
	pointer-events: auto;
}

.mmsc-toast.is-visible {
	opacity: 1;
	transform: none;
}

.mmsc-toast--error {
	box-shadow: inset 3px 0 0 #e59a95, 0 8px 24px rgba( 45, 38, 35, 0.2 );
}

.mmsc-toast .mmsc-toast__text {
	flex: 1 1 auto;
	margin: 0;
	padding: 2px 0;
	font-family: var( --mmsc-font-body );
	font-size: var( --mmsc-text-sm );
	font-weight: 500;
	line-height: 1.45;
	color: var( --mmsc-color-surface );
}

.mmsc-toast .mmsc-toast__text a {
	color: var( --mmsc-color-surface );
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mmsc-toast .mmsc-toast__close {
	display: flex;
	flex: 0 0 28px;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var( --mmsc-radius-pill );
	background: transparent;
	box-shadow: none;
	color: rgba( 255, 255, 255, 0.75 );
	cursor: pointer;
}

.mmsc-toast .mmsc-toast__close:hover {
	background: rgba( 255, 255, 255, 0.12 );
	color: var( --mmsc-color-surface );
}

.mmsc-toast .mmsc-toast__close:focus-visible,
.mmsc-toast .mmsc-toast__text a:focus-visible {
	outline: 2px solid var( --mmsc-color-accent );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.mmsc-quick-add__backdrop,
	.mmsc-cart-drawer__backdrop,
	.mmsc-quick-add__panel,
	.mmsc-cart-drawer__panel,
	.mmsc-size-option,
	.mmsc-cart-drawer__item,
	.mmsc-toast {
		transition: none;
	}

	.mmsc-size-option.is-loading::after {
		animation: none;
		opacity: 1;
	}

	.mmsc-size-skeleton,
	.mmsc-size-list--enter,
	.mmsc-cart-drawer__removed,
	.mmsc-tick,
	.mmsc-drawer-recs,
	.mmsc-drawer-recs__sizes,
	.mmsc-drawer-recs.is-loading .mmsc-drawer-rec--skeleton {
		animation: none;
	}

	.mmsc-drawer-rec__add,
	.mmsc-drawer-recs__size {
		transition: none;
	}
}