/**
 * M M Sanidaz — Wholesale catalogue
 * ------------------------------------------------------------------
 * page-970.php only (markup helpers: inc/wholesale.php; behaviour:
 * assets/js/wholesale.js). A B2B catalogue rather than a second Shop:
 * white catalogue tiles with style numbers, an enquiry basket (desktop side
 * panel / mobile + tablet dock and review sheet) and a quote dialog — no
 * prices, no cart, no checkout language.
 *
 * Everything is scoped under #mmsc-wholesale: the ID out-ranks OceanWP's
 * base element styles (button / input / list / heading margins) and the
 * legacy Additional CSS this page would otherwise inherit —
 *   `.page-id-253 p, div { color: black !important }` (stray comma: every div)
 *   `h1 { font-family: poppins !important }`
 *   `input { color: green !important; font-weight: bold }` (post-1202.css)
 *   `body { font-weight: 900 }` at ≤480px (OceanWP Customizer)
 * — using !important only where those rules already do.
 *
 * Breakpoints: mobile ≤767 (global bottom nav + dock) · tablet 768–1023
 * (dock, no bottom nav) · desktop ≥1024 (side panel, no dock).
 */

/* =================================================================
   Page frame
   ================================================================= */

#mmsc-wholesale.mmsc-wholesale {
	--mmsc-ws-gutter: var(--mmsc-space-4);
	--mmsc-ws-header: 104px; /* fixed #site-header on phones/tablets (legacy Additional CSS) */
	color: var(--mmsc-color-text) !important;
	font-family: var(--mmsc-font-body);
	font-weight: 400;
	overflow-x: clip;
}

#mmsc-wholesale div {
	color: inherit !important;
}

@media (min-width: 768px) {
	#mmsc-wholesale.mmsc-wholesale {
		--mmsc-ws-gutter: var(--mmsc-space-5);
	}
}

/* OceanWP switches to its desktop header (76–90px tall) at 960px. */
@media (min-width: 960px) {
	#mmsc-wholesale.mmsc-wholesale {
		--mmsc-ws-header: 84px;
	}
}

/* Same fixed-header clearance as the other coded templates (see
   homepage.css): the legacy `body { margin-top: 80px }` doesn't quite cover
   the header's real height at these widths. */
@media (max-width: 1024px) {
	#mmsc-wholesale.mmsc-wholesale {
		padding-top: 30px;
	}
}

#mmsc-wholesale .mmsc-ws-wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 var(--mmsc-ws-gutter);
}

#mmsc-wholesale ul,
#mmsc-wholesale ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

#mmsc-wholesale li {
	margin: 0;
}

#mmsc-wholesale figure {
	margin: 0;
}

#mmsc-wholesale p {
	margin: 0;
}

#mmsc-wholesale h1,
#mmsc-wholesale h2,
#mmsc-wholesale h3 {
	margin: 0;
	padding: 0;
	font-family: var(--mmsc-font-heading) !important;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--mmsc-color-text);
}

#mmsc-wholesale .mmsc-ws-icon {
	display: block;
	flex: 0 0 auto;
}

/* Every <button> here restates its own look: OceanWP's base button rule
   (blue fill, uppercase 12px, 14px 20px padding, white border) and its
   :hover blue would otherwise show through. */
#mmsc-wholesale button {
	margin: 0;
	min-height: 0;
	font-family: var(--mmsc-font-body);
	line-height: 1.2;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

#mmsc-wholesale button:focus-visible,
#mmsc-wholesale a:focus-visible,
#mmsc-wholesale summary:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

#mmsc-wholesale .mmsc-ws-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--mmsc-color-primary);
}

#mmsc-wholesale .mmsc-ws-h2 {
	font-size: 28px;
	line-height: 1.15;
}

@media (min-width: 768px) {
	#mmsc-wholesale .mmsc-ws-h2 {
		font-size: var(--mmsc-text-2xl);
	}
}

/* Round icon button (close, remove). */
#mmsc-wholesale .mmsc-ws-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-bg);
	color: var(--mmsc-color-text);
	transition: background-color var(--mmsc-transition-fast), color var(--mmsc-transition-fast);
}

#mmsc-wholesale .mmsc-ws-iconbtn:hover,
#mmsc-wholesale .mmsc-ws-iconbtn:focus {
	background: var(--mmsc-color-border);
	color: var(--mmsc-color-text);
}

#mmsc-wholesale .mmsc-ws-textbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 var(--mmsc-space-2);
	border: 0;
	background: transparent;
	color: var(--mmsc-color-text);
	font-size: var(--mmsc-text-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	text-decoration: underline;
	text-decoration-color: var(--mmsc-color-border);
	text-underline-offset: 4px;
	transition: text-decoration-color var(--mmsc-transition-fast), color var(--mmsc-transition-fast);
}

#mmsc-wholesale .mmsc-ws-textbtn:hover,
#mmsc-wholesale .mmsc-ws-textbtn:focus {
	background: transparent;
	color: var(--mmsc-color-text);
	text-decoration-color: var(--mmsc-color-primary);
}

/* =================================================================
   1. Hero — photograph + introduction, then "how it works"
   ================================================================= */

#mmsc-wholesale .mmsc-ws-hero {
	padding: var(--mmsc-space-4) 0 var(--mmsc-space-6);
}

#mmsc-wholesale .mmsc-ws-hero__grid {
	display: grid;
	gap: var(--mmsc-space-5);
}

/* Phones: the photograph leads, as a compact band. */
#mmsc-wholesale .mmsc-ws-hero__media {
	order: -1;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--mmsc-radius-lg);
	background: var(--mmsc-color-border);
}

#mmsc-wholesale .mmsc-ws-hero__media img,
#mmsc-wholesale .mmsc-ws-hero__media .mmsc-image-slot {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* The girl sits left of centre and the folded stock runs to the
	   right edge — keep both in frame at every crop. */
	object-position: 38% 45%;
}

#mmsc-wholesale .mmsc-ws-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#mmsc-wholesale .mmsc-ws-hero__title {
	margin: var(--mmsc-space-2) 0 var(--mmsc-space-3);
	font-size: 34px;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

#mmsc-wholesale .mmsc-ws-hero__lede {
	max-width: 34em;
	font-size: 15px;
	line-height: 1.65;
	color: var(--mmsc-color-text-muted);
}

#mmsc-wholesale .mmsc-ws-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mmsc-space-3) var(--mmsc-space-5);
	margin-top: var(--mmsc-space-5);
}

#mmsc-wholesale .mmsc-ws-cta,
#mmsc-wholesale .mmsc-ws-cta:hover,
#mmsc-wholesale .mmsc-ws-cta:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mmsc-space-3);
	min-height: 50px;
	padding: 0 var(--mmsc-space-5);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
	font-size: var(--mmsc-text-button);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--mmsc-transition-base);
}

#mmsc-wholesale .mmsc-ws-cta:hover {
	background: var(--mmsc-color-dark-hover);
}

#mmsc-wholesale .mmsc-ws-cta .mmsc-ws-icon {
	transition: transform var(--mmsc-transition-base);
}

#mmsc-wholesale .mmsc-ws-cta:hover .mmsc-ws-icon {
	transform: translateY(2px) rotate(90deg);
}

#mmsc-wholesale .mmsc-ws-hero__min {
	display: inline-flex;
	align-items: center;
	gap: var(--mmsc-space-2);
	font-size: var(--mmsc-text-sm);
	font-weight: 500;
	color: var(--mmsc-color-text);
}

#mmsc-wholesale .mmsc-ws-hero__min .mmsc-ws-icon {
	color: var(--mmsc-color-primary);
}

/* How it works — one quiet card, three numbered steps. */
#mmsc-wholesale .mmsc-ws-steps {
	display: grid;
	gap: var(--mmsc-space-4);
	margin-top: var(--mmsc-space-6);
	padding: var(--mmsc-space-5);
	background: var(--mmsc-color-surface);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-lg);
	counter-reset: none;
}

#mmsc-wholesale .mmsc-ws-steps__item {
	display: flex;
	align-items: flex-start;
	gap: var(--mmsc-space-3);
}

#mmsc-wholesale .mmsc-ws-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border: 1px solid var(--mmsc-color-primary);
	border-radius: var(--mmsc-radius-pill);
	font-family: var(--mmsc-font-heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--mmsc-color-primary);
}

#mmsc-wholesale .mmsc-ws-steps__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 4px;
}

#mmsc-wholesale .mmsc-ws-steps__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mmsc-color-text);
}

#mmsc-wholesale .mmsc-ws-steps__desc {
	font-size: var(--mmsc-text-sm);
	line-height: 1.55;
	color: var(--mmsc-color-text-muted);
}

@media (min-width: 768px) {
	#mmsc-wholesale .mmsc-ws-hero {
		padding: var(--mmsc-space-6) 0 var(--mmsc-space-7);
	}

	#mmsc-wholesale .mmsc-ws-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--mmsc-space-6);
	}

	#mmsc-wholesale .mmsc-ws-hero__media {
		order: 0;
		aspect-ratio: 4 / 3;
	}

	#mmsc-wholesale .mmsc-ws-hero__title {
		font-size: 42px;
	}

	#mmsc-wholesale .mmsc-ws-hero__lede {
		font-size: var(--mmsc-text-base);
	}

	#mmsc-wholesale .mmsc-ws-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
		margin-top: var(--mmsc-space-7);
		padding: var(--mmsc-space-5) 0;
	}

	#mmsc-wholesale .mmsc-ws-steps__item {
		padding: 0 var(--mmsc-space-5);
	}

	#mmsc-wholesale .mmsc-ws-steps__item + .mmsc-ws-steps__item {
		border-left: 1px solid var(--mmsc-color-border);
	}
}

@media (min-width: 1024px) {
	#mmsc-wholesale .mmsc-ws-hero {
		padding: var(--mmsc-space-7) 0 var(--mmsc-space-8);
	}

	#mmsc-wholesale .mmsc-ws-hero__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--mmsc-space-8);
	}

	#mmsc-wholesale .mmsc-ws-hero__title {
		font-size: 52px;
	}

	#mmsc-wholesale .mmsc-ws-hero__lede {
		font-size: 17px;
	}

	#mmsc-wholesale .mmsc-ws-hero__media {
		aspect-ratio: 16 / 11;
	}

	#mmsc-wholesale .mmsc-ws-steps__item {
		padding: 0 var(--mmsc-space-6);
	}
}

/* =================================================================
   2. Catalogue + enquiry panel
   ================================================================= */

#mmsc-wholesale .mmsc-ws-catalogue {
	padding: var(--mmsc-space-6) 0 var(--mmsc-space-7);
	border-top: 1px solid var(--mmsc-color-border);
	scroll-margin-top: calc(var(--mmsc-ws-header) + var(--mmsc-space-2));
}

@media (min-width: 1024px) {
	#mmsc-wholesale .mmsc-ws-catalogue {
		padding: var(--mmsc-space-7) 0 var(--mmsc-space-8);
	}

	#mmsc-wholesale .mmsc-ws-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
		gap: var(--mmsc-space-6);
	}
}

@media (min-width: 1280px) {
	#mmsc-wholesale .mmsc-ws-layout {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: var(--mmsc-space-7);
	}
}

#mmsc-wholesale .mmsc-ws-catalogue__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mmsc-space-1) var(--mmsc-space-4);
	margin-bottom: var(--mmsc-space-5);
}

#mmsc-wholesale .mmsc-ws-catalogue__meta {
	font-size: 13px;
	font-weight: 500;
	color: var(--mmsc-color-text-muted);
}

/* Grid */

#mmsc-wholesale .mmsc-ws-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mmsc-space-4) var(--mmsc-space-3);
}

@media (min-width: 600px) {
	#mmsc-wholesale .mmsc-ws-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--mmsc-space-5) var(--mmsc-space-4);
	}
}

/* Card — a white catalogue tile (the retail Shop's cards are borderless
   photos on ivory; the frame is what makes this read as a trade sheet). */

#mmsc-wholesale .mmsc-ws-card {
	display: flex;
	min-width: 0;
}

#mmsc-wholesale .mmsc-ws-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--mmsc-space-2);
	background: var(--mmsc-color-surface);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-lg);
	transition: border-color var(--mmsc-transition-base), box-shadow var(--mmsc-transition-base);
}

#mmsc-wholesale .mmsc-ws-card.is-selected .mmsc-ws-card__inner {
	border-color: var(--mmsc-color-dark);
	box-shadow: 0 0 0 1px var(--mmsc-color-dark), var(--mmsc-shadow-md);
}

#mmsc-wholesale .mmsc-ws-card__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--mmsc-radius-md);
	background: var(--mmsc-color-border);
}

/* Same 3% top-anchored crop as the Shop cards: the shared catalogue photos
   have a thin band baked into their bottom rows. */
#mmsc-wholesale .mmsc-ws-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: scale(1.03);
	transform-origin: center top;
	transition: transform 500ms ease;
}

@media (hover: hover) {
	#mmsc-wholesale .mmsc-ws-card:hover .mmsc-ws-card__img {
		transform: scale(1.06);
	}

	#mmsc-wholesale .mmsc-ws-card:hover .mmsc-ws-card__inner {
		border-color: var(--mmsc-color-text-muted);
	}

	#mmsc-wholesale .mmsc-ws-card.is-selected:hover .mmsc-ws-card__inner {
		border-color: var(--mmsc-color-dark);
	}
}

/* "Selected" chip on the photo — icon + word, never color alone. */
#mmsc-wholesale .mmsc-ws-card__badge {
	position: absolute;
	top: var(--mmsc-space-2);
	left: var(--mmsc-space-2);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 9px 5px 7px;
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--mmsc-transition-base), transform var(--mmsc-transition-base);
	pointer-events: none;
}

#mmsc-wholesale .mmsc-ws-card.is-selected .mmsc-ws-card__badge {
	opacity: 1;
	transform: none;
}

#mmsc-wholesale .mmsc-ws-card__body {
	flex: 1 1 auto;
	padding: var(--mmsc-space-3) var(--mmsc-space-1) 0;
}

#mmsc-wholesale .mmsc-ws-card__sku {
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--mmsc-color-text-muted);
	font-variant-numeric: tabular-nums;
}

#mmsc-wholesale .mmsc-ws-card__title {
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: 0;
}

#mmsc-wholesale .mmsc-ws-card__desc {
	display: none;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mmsc-color-text-muted);
}

@media (min-width: 480px) {
	#mmsc-wholesale .mmsc-ws-card__desc {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

@media (min-width: 768px) {
	#mmsc-wholesale .mmsc-ws-card__inner {
		padding: 10px;
	}

	#mmsc-wholesale .mmsc-ws-card__title {
		font-size: 16px;
	}
}

#mmsc-wholesale .mmsc-ws-card__action {
	margin-top: var(--mmsc-space-3);
	padding: 0 var(--mmsc-space-1) var(--mmsc-space-1);
}

/* "Add to enquiry" — outline button; the stepper replaces it once selected. */
#mmsc-wholesale .mmsc-ws-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 44px;
	padding: 0 var(--mmsc-space-2);
	border: 1px solid var(--mmsc-color-dark);
	border-radius: var(--mmsc-radius-sm);
	background: transparent;
	color: var(--mmsc-color-dark);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color var(--mmsc-transition-fast), color var(--mmsc-transition-fast);
}

#mmsc-wholesale .mmsc-ws-add:hover,
#mmsc-wholesale .mmsc-ws-add:focus {
	border-color: var(--mmsc-color-dark);
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
}

@media (max-width: 399px) {
	#mmsc-wholesale .mmsc-ws-add {
		gap: 4px;
		font-size: 11px;
		letter-spacing: 0.03em;
	}
}

@media (max-width: 339px) {
	#mmsc-wholesale .mmsc-ws-add .mmsc-ws-icon {
		display: none;
	}
}

@media (min-width: 768px) {
	#mmsc-wholesale .mmsc-ws-add {
		font-size: var(--mmsc-text-button);
	}
}

/* Quantity stepper — cards and enquiry lines. */
#mmsc-wholesale .mmsc-ws-stepper {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	align-items: stretch;
	height: 44px;
	border: 1px solid var(--mmsc-color-dark);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-surface);
	overflow: hidden;
}

#mmsc-wholesale .mmsc-ws-stepper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--mmsc-color-dark);
	transition: background-color var(--mmsc-transition-fast), color var(--mmsc-transition-fast);
}

#mmsc-wholesale .mmsc-ws-stepper__btn:hover,
#mmsc-wholesale .mmsc-ws-stepper__btn:focus {
	background: var(--mmsc-color-bg);
	color: var(--mmsc-color-dark);
}

#mmsc-wholesale .mmsc-ws-stepper__btn:focus-visible {
	outline-offset: -3px;
}

#mmsc-wholesale .mmsc-ws-stepper__btn[data-remove] {
	color: var(--mmsc-color-sale);
}

#mmsc-wholesale .mmsc-ws-stepper__field {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	border-right: 1px solid var(--mmsc-color-border);
	border-left: 1px solid var(--mmsc-color-border);
}

#mmsc-wholesale input.mmsc-ws-stepper__input {
	width: 3.2ch;
	min-width: 0;
	min-height: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mmsc-color-text) !important; /* legacy `input { color: green !important }` */
	font-family: var(--mmsc-font-body);
	font-size: 16px; /* 16px: iOS doesn't zoom the page on focus */
	font-weight: 600;
	line-height: 1;
	text-align: right;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}

#mmsc-wholesale input.mmsc-ws-stepper__input:focus {
	outline: none;
}

#mmsc-wholesale .mmsc-ws-stepper__field:focus-within {
	box-shadow: inset 0 0 0 2px var(--mmsc-color-accent);
}

#mmsc-wholesale .mmsc-ws-stepper__unit {
	font-size: 12px;
	font-weight: 500;
	color: var(--mmsc-color-text-muted);
}

#mmsc-wholesale .mmsc-ws-stepper--sm {
	grid-template-columns: 36px minmax(52px, auto) 36px;
	height: 36px;
	border-color: var(--mmsc-color-border);
}

#mmsc-wholesale .mmsc-ws-stepper--sm .mmsc-ws-stepper__field {
	padding: 0 6px;
}

#mmsc-wholesale .mmsc-ws-stepper--sm input.mmsc-ws-stepper__input {
	font-size: 15px;
}

/* Empty catalogue */
#mmsc-wholesale .mmsc-ws-empty {
	padding: var(--mmsc-space-7) var(--mmsc-space-5);
	text-align: center;
	background: var(--mmsc-color-surface);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-lg);
}

#mmsc-wholesale .mmsc-ws-empty__title {
	font-family: var(--mmsc-font-heading);
	font-size: var(--mmsc-text-lg);
	font-weight: 600;
	color: var(--mmsc-color-text);
}

#mmsc-wholesale .mmsc-ws-empty__text {
	margin-top: var(--mmsc-space-2);
	color: var(--mmsc-color-text-muted);
}

/* =================================================================
   3. Enquiry summary — desktop side panel & mobile review sheet
   ================================================================= */

#mmsc-wholesale .mmsc-ws-aside {
	display: none;
}

@media (min-width: 1024px) {
	#mmsc-wholesale .mmsc-ws-aside {
		display: block;
		position: sticky;
		top: calc(var(--mmsc-ws-header) + var(--mmsc-space-5));
	}
}

#mmsc-wholesale .mmsc-ws-summary {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--mmsc-color-surface);
	color: var(--mmsc-color-text);
}

/* Height capped so the panel (and its Get Best Quote button) always ends
   above Chaty's button, which sits in the same bottom-right corner (~80px
   tall including its offset); a long selection scrolls inside instead. */
#mmsc-wholesale .mmsc-ws-summary--panel {
	max-height: calc(100vh - var(--mmsc-ws-header) - var(--mmsc-space-5) - 96px);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-lg);
	box-shadow: var(--mmsc-shadow-sm);
}

#mmsc-wholesale .mmsc-ws-summary__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2px var(--mmsc-space-3);
	padding: var(--mmsc-space-5) var(--mmsc-space-5) 0;
}

#mmsc-wholesale .mmsc-ws-summary__title {
	grid-column: 1;
	font-size: var(--mmsc-text-lg);
	line-height: 1.25;
}

#mmsc-wholesale .mmsc-ws-summary__title:focus {
	outline: none;
}

#mmsc-wholesale .mmsc-ws-summary__count {
	grid-column: 1;
	font-size: 13px;
	font-weight: 500;
	color: var(--mmsc-color-text-muted);
	font-variant-numeric: tabular-nums;
}

#mmsc-wholesale .mmsc-ws-summary__close {
	grid-column: 2;
	grid-row: 1 / span 2;
}

/* Minimum-order progress — bar + sentence; the sentence (and a check icon
   once complete) carries the state, the colour only reinforces it. */
#mmsc-wholesale .mmsc-ws-progress {
	padding: var(--mmsc-space-4) var(--mmsc-space-5) var(--mmsc-space-4);
	border-bottom: 1px solid var(--mmsc-color-border);
}

#mmsc-wholesale .mmsc-ws-progress__bar {
	position: relative;
	height: 6px;
	overflow: hidden;
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-bg);
	box-shadow: inset 0 0 0 1px var(--mmsc-color-border);
}

#mmsc-wholesale .mmsc-ws-progress__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	border-radius: inherit;
	background: var(--mmsc-color-primary);
	transition: width 350ms ease, background-color var(--mmsc-transition-base);
}

#mmsc-wholesale .mmsc-ws-progress[data-state="ready"] .mmsc-ws-progress__fill {
	background: var(--mmsc-color-success);
}

#mmsc-wholesale .mmsc-ws-progress__text {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: var(--mmsc-space-2);
	font-size: 13px;
	line-height: 1.45;
	color: var(--mmsc-color-text-muted);
}

#mmsc-wholesale .mmsc-ws-progress[data-state="short"] .mmsc-ws-progress__text {
	color: var(--mmsc-color-text);
}

#mmsc-wholesale .mmsc-ws-progress[data-state="ready"] .mmsc-ws-progress__text {
	font-weight: 600;
	color: var(--mmsc-color-success);
}

#mmsc-wholesale .mmsc-ws-progress__text .mmsc-ws-icon {
	margin-top: 1px;
}

/* Gentle nudge when Get Best Quote is tapped before the minimum. */
#mmsc-wholesale .mmsc-ws-progress.is-nudged .mmsc-ws-progress__text {
	color: var(--mmsc-color-sale);
	font-weight: 600;
}

#mmsc-wholesale .mmsc-ws-summary__body,
#mmsc-wholesale .mmsc-ws-dialog__scroll {
	scrollbar-width: thin;
	scrollbar-color: var(--mmsc-color-border) transparent;
}

#mmsc-wholesale .mmsc-ws-summary__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--mmsc-space-2) var(--mmsc-space-5);
}

#mmsc-wholesale .mmsc-ws-summary__empty {
	padding: var(--mmsc-space-4) 0;
	font-size: var(--mmsc-text-sm);
	line-height: 1.6;
	color: var(--mmsc-color-text-muted);
}

#mmsc-wholesale .mmsc-ws-summary__empty[hidden] {
	display: none;
}

/* One selected style */
#mmsc-wholesale .mmsc-ws-line {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb info remove"
		"thumb qty  qty";
	align-items: start;
	gap: var(--mmsc-space-2) var(--mmsc-space-3);
	padding: var(--mmsc-space-3) 0;
	border-bottom: 1px solid var(--mmsc-color-border);
}

#mmsc-wholesale .mmsc-ws-line:last-child {
	border-bottom: 0;
}

#mmsc-wholesale .mmsc-ws-line__thumb {
	grid-area: thumb;
	display: block;
	width: 48px;
	height: 64px;
	max-width: none;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-border);
}

#mmsc-wholesale .mmsc-ws-line__info {
	grid-area: info;
	min-width: 0;
	padding-top: 2px;
}

#mmsc-wholesale .mmsc-ws-line__name {
	font-size: var(--mmsc-text-sm);
	font-weight: 600;
	line-height: 1.35;
	color: var(--mmsc-color-text);
}

#mmsc-wholesale .mmsc-ws-line__sku {
	margin-top: 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mmsc-color-text-muted);
}

#mmsc-wholesale .mmsc-ws-line__qty {
	grid-area: qty;
	justify-self: start;
}

#mmsc-wholesale .mmsc-ws-line__remove {
	grid-area: remove;
	width: 32px;
	height: 32px;
	background: transparent;
	color: var(--mmsc-color-text-muted);
}

#mmsc-wholesale .mmsc-ws-line__remove:hover,
#mmsc-wholesale .mmsc-ws-line__remove:focus {
	background: var(--mmsc-color-bg);
	color: var(--mmsc-color-sale);
}

#mmsc-wholesale .mmsc-ws-summary__foot {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--mmsc-space-2);
	padding: var(--mmsc-space-4) var(--mmsc-space-5) var(--mmsc-space-5);
	border-top: 1px solid var(--mmsc-color-border);
}

#mmsc-wholesale .mmsc-ws-summary__note {
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	color: var(--mmsc-color-text-muted);
}

/* Get Best Quote — the page's one primary action. Gated (aria-disabled)
   below the minimum: still focusable and tappable, so it can explain what's
   missing instead of silently doing nothing. */
#mmsc-wholesale .mmsc-ws-quote-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mmsc-space-2);
	width: 100%;
	min-height: 52px;
	padding: 0 var(--mmsc-space-5);
	border: 1px solid var(--mmsc-color-dark);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
	font-size: var(--mmsc-text-button);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color var(--mmsc-transition-base), border-color var(--mmsc-transition-base), color var(--mmsc-transition-base);
}

#mmsc-wholesale .mmsc-ws-quote-btn:hover,
#mmsc-wholesale .mmsc-ws-quote-btn:focus {
	border-color: var(--mmsc-color-dark-hover);
	background: var(--mmsc-color-dark-hover);
	color: var(--mmsc-color-surface);
}

#mmsc-wholesale .mmsc-ws-quote-btn[aria-disabled="true"],
#mmsc-wholesale .mmsc-ws-quote-btn[aria-disabled="true"]:hover,
#mmsc-wholesale .mmsc-ws-quote-btn[aria-disabled="true"]:focus {
	border-color: #e7e0d8;
	background: #ece6df;
	color: #6b605a;
	cursor: not-allowed;
}

#mmsc-wholesale .mmsc-ws-quote-btn .mmsc-ws-icon {
	transition: transform var(--mmsc-transition-base);
}

#mmsc-wholesale .mmsc-ws-quote-btn:not([aria-disabled="true"]):hover .mmsc-ws-icon {
	transform: translateX(3px);
}

/* =================================================================
   4. Support — dark panel, the site's established "wholesale" tone
   ================================================================= */

#mmsc-wholesale .mmsc-ws-support {
	padding: 0 0 var(--mmsc-space-7);
}

#mmsc-wholesale .mmsc-ws-support__card {
	display: grid;
	gap: var(--mmsc-space-5);
	padding: var(--mmsc-space-6) var(--mmsc-space-5);
	border-radius: var(--mmsc-radius-lg);
	background: var(--mmsc-color-dark);
}

#mmsc-wholesale .mmsc-ws-eyebrow--light {
	color: var(--mmsc-color-accent);
}

#mmsc-wholesale .mmsc-ws-support__title {
	margin-top: var(--mmsc-space-2);
	font-size: 26px;
	line-height: 1.15;
	color: var(--mmsc-color-surface);
}

#mmsc-wholesale .mmsc-ws-support__text {
	margin-top: var(--mmsc-space-3);
	max-width: 30em;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(248, 245, 240, 0.78);
}

#mmsc-wholesale .mmsc-ws-support__links {
	display: grid;
	gap: var(--mmsc-space-2);
}

#mmsc-wholesale .mmsc-ws-support__link,
#mmsc-wholesale .mmsc-ws-support__link:hover,
#mmsc-wholesale .mmsc-ws-support__link:focus {
	display: flex;
	align-items: center;
	gap: var(--mmsc-space-3);
	min-height: 64px;
	padding: var(--mmsc-space-3) var(--mmsc-space-4);
	border: 1px solid rgba(248, 245, 240, 0.14);
	border-radius: var(--mmsc-radius-md);
	background: rgba(248, 245, 240, 0.04);
	color: var(--mmsc-color-surface);
	text-decoration: none;
	transition: background-color var(--mmsc-transition-fast), border-color var(--mmsc-transition-fast), transform var(--mmsc-transition-fast);
}

/* Hover / keyboard focus: the whole card answers — gold edge, lifted
   surface, and the icon disc fills gold (Call, WhatsApp, Email, Contact). */
#mmsc-wholesale .mmsc-ws-support__link:hover,
#mmsc-wholesale .mmsc-ws-support__link:focus-visible {
	border-color: rgba(213, 168, 75, 0.7);
	background: rgba(248, 245, 240, 0.1);
	color: var(--mmsc-color-surface);
}

#mmsc-wholesale .mmsc-ws-support__link:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

#mmsc-wholesale .mmsc-ws-support__link:active {
	background: rgba(248, 245, 240, 0.14);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	#mmsc-wholesale .mmsc-ws-support__link:hover {
		transform: translateY(-2px);
	}
}

#mmsc-wholesale .mmsc-ws-support__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: var(--mmsc-radius-pill);
	background: rgba(248, 245, 240, 0.08);
	color: var(--mmsc-color-accent);
	transition: background-color var(--mmsc-transition-fast), color var(--mmsc-transition-fast);
}

#mmsc-wholesale .mmsc-ws-support__link:hover .mmsc-ws-support__icon,
#mmsc-wholesale .mmsc-ws-support__link:focus-visible .mmsc-ws-support__icon {
	background: var(--mmsc-color-accent);
	color: var(--mmsc-color-dark);
}

#mmsc-wholesale .mmsc-ws-support__label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	max-width: 100%;
}

#mmsc-wholesale .mmsc-ws-support__kicker {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(248, 245, 240, 0.64);
}

#mmsc-wholesale .mmsc-ws-support__value {
	font-family: var(--mmsc-font-heading);
	font-size: 17px;
	font-weight: 600;
	color: var(--mmsc-color-surface);
	/* The email address has no break points; never let it leave its card. */
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	#mmsc-wholesale .mmsc-ws-support {
		padding-bottom: var(--mmsc-space-8);
	}

	#mmsc-wholesale .mmsc-ws-support__card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--mmsc-space-6);
		padding: var(--mmsc-space-7);
	}

	#mmsc-wholesale .mmsc-ws-support__title {
		font-size: var(--mmsc-text-2xl);
	}
}

@media (min-width: 1024px) {
	#mmsc-wholesale .mmsc-ws-support__card {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		padding: var(--mmsc-space-7) var(--mmsc-space-8);
	}

	/* Four cards: an even 2 × 2 grid (three columns left the email
	   overflowing a 197px card and the fourth card alone on its row). */
	#mmsc-wholesale .mmsc-ws-support__links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* :hover / :focus too — the base rule sets the phone layout on those
	   states as well, so without them a hovered card re-centred its
	   content and shrank to 64px. */
	#mmsc-wholesale .mmsc-ws-support__link,
	#mmsc-wholesale .mmsc-ws-support__link:hover,
	#mmsc-wholesale .mmsc-ws-support__link:focus {
		flex-direction: column;
		align-items: flex-start;
		min-height: 128px;
		padding: var(--mmsc-space-4);
	}
}

/* =================================================================
   5. Enquiry dock — phones (above the bottom nav) and tablets
   ================================================================= */

#mmsc-wholesale .mmsc-ws-dock {
	display: none;
}

@media (max-width: 1023px) {
	/* `html body` so this outranks bottom-nav.css's own body rule (same
	   properties, dock height added) regardless of stylesheet order. Below
	   768px --mmsc-bnav-offset is the bar + safe area; on tablets there is
	   no bar, so it falls back to the safe area alone. */
	html body.mmsc-wholesale-page {
		--mmsc-ws-dock-h: 68px;
		--mmsc-float-offset: calc(var(--mmsc-bnav-offset, env(safe-area-inset-bottom, 0px)) + var(--mmsc-ws-dock-h));
		padding-bottom: var(--mmsc-float-offset);
	}

	#mmsc-wholesale .mmsc-ws-dock {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 8990;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--mmsc-space-3);
		min-height: var(--mmsc-ws-dock-h);
		padding: 10px var(--mmsc-ws-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, 0.97);
		border-top: 1px solid var(--mmsc-color-border);
		box-shadow: 0 -8px 24px rgba(45, 38, 35, 0.07);
		transition: transform var(--mmsc-transition-base), visibility var(--mmsc-transition-base);
	}

	/* Floating widgets clear the dock too (on phones, the bar as well).
	   Chaty: see bottom-nav.css for --mmsc-chaty-legacy. */
	body.mmsc-wholesale-page .chaty-widget {
		bottom: calc(var(--mmsc-float-offset) + 12px - var(--mmsc-chaty-legacy, 0px)) !important;
	}

	body.mmsc-wholesale-page .woomotiv-popup {
		bottom: calc(var(--mmsc-float-offset) + 12px) !important;
	}

	/* Tablets too (on phones bottom-nav.css already does this): Chaty's
	   always-on "Contact us" label would sit over the catalogue tiles; the
	   chat button itself stays, and this page has its own Call / WhatsApp
	   section. */
	body.mmsc-wholesale-page .chaty-widget .on-hover-text {
		display: none;
	}

	/* OceanWP's back-to-top square would float over the right-hand column
	   of catalogue tiles (and their Add / quantity controls) at this height;
	   the dock is this page's bottom UI on phones and tablets. */
	body.mmsc-wholesale-page #scroll-top {
		display: none !important;
	}
}

/* Phones: the dock stacks directly on the global bottom nav — one unit.
   The bar's own top shadow is dropped here so the pair reads as a single
   two-tier surface instead of two floating layers. */
@media (max-width: 767px) {
	body.mmsc-wholesale-page.mmsc-has-bnav #mmsc-wholesale .mmsc-ws-dock {
		bottom: var(--mmsc-bnav-offset);
		padding-bottom: 10px;
		box-shadow: 0 -8px 24px rgba(45, 38, 35, 0.07);
	}

	body.mmsc-wholesale-page #mmsc-bnav.mmsc-bnav {
		box-shadow: none;
	}

	/* Keyboard up (e.g. typing a quantity on a card): the dock steps aside
	   with the bar. */
	html.mmsc-kb-open body.mmsc-wholesale-page #mmsc-wholesale .mmsc-ws-dock {
		visibility: hidden;
		transform: translateY(calc(100% + var(--mmsc-bnav-offset, 0px)));
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	#mmsc-wholesale .mmsc-ws-dock {
		grid-template-columns: auto minmax(0, 1fr);
		padding-right: max(var(--mmsc-ws-gutter), calc((100vw - 720px) / 2));
		padding-left: max(var(--mmsc-ws-gutter), calc((100vw - 720px) / 2));
	}
}

#mmsc-wholesale .mmsc-ws-dock__progress {
	position: absolute;
	top: -1px;
	right: 0;
	left: 0;
	height: 3px;
	background: transparent;
	pointer-events: none;
}

#mmsc-wholesale .mmsc-ws-dock__fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--mmsc-color-primary);
	transition: width 350ms ease, background-color var(--mmsc-transition-base);
}

#mmsc-wholesale .mmsc-ws-dock[data-state="ready"] .mmsc-ws-dock__fill {
	background: var(--mmsc-color-success);
}

/* Bottom-left: Get Best Quote. */
#mmsc-wholesale .mmsc-ws-dock__quote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--mmsc-space-5);
	border: 1px solid var(--mmsc-color-dark);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
	font-size: var(--mmsc-text-button);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color var(--mmsc-transition-base), border-color var(--mmsc-transition-base), color var(--mmsc-transition-base);
}

#mmsc-wholesale .mmsc-ws-dock__quote:hover,
#mmsc-wholesale .mmsc-ws-dock__quote:focus {
	border-color: var(--mmsc-color-dark-hover);
	background: var(--mmsc-color-dark-hover);
	color: var(--mmsc-color-surface);
}

#mmsc-wholesale .mmsc-ws-dock__quote[aria-disabled="true"],
#mmsc-wholesale .mmsc-ws-dock__quote[aria-disabled="true"]:hover,
#mmsc-wholesale .mmsc-ws-dock__quote[aria-disabled="true"]:focus {
	border-color: #e7e0d8;
	background: #ece6df;
	color: #6b605a;
}

@media (max-width: 359px) {
	#mmsc-wholesale .mmsc-ws-dock__quote {
		padding: 0 var(--mmsc-space-4);
		font-size: 12px;
		letter-spacing: 0.04em;
	}
}

/* Right: running total — opens the review sheet. */
#mmsc-wholesale .mmsc-ws-dock__summary {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--mmsc-space-2);
	min-width: 0;
	min-height: 48px;
	padding: 0 0 0 var(--mmsc-space-2);
	border: 0;
	border-radius: var(--mmsc-radius-sm);
	background: transparent;
	color: var(--mmsc-color-text);
	text-align: right;
	text-transform: none;
	letter-spacing: 0;
}

#mmsc-wholesale .mmsc-ws-dock__summary:hover,
#mmsc-wholesale .mmsc-ws-dock__summary:focus {
	background: transparent;
	color: var(--mmsc-color-text);
}

#mmsc-wholesale .mmsc-ws-dock__text {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 0;
}

#mmsc-wholesale .mmsc-ws-dock__pieces {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--mmsc-color-text);
}

#mmsc-wholesale .mmsc-ws-dock__status {
	max-width: 100%;
	overflow: hidden;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--mmsc-color-text-muted);
}

#mmsc-wholesale .mmsc-ws-dock[data-state="ready"] .mmsc-ws-dock__status {
	font-weight: 600;
	color: var(--mmsc-color-success);
}

#mmsc-wholesale .mmsc-ws-dock__summary .mmsc-ws-icon {
	color: var(--mmsc-color-text-muted);
}

/* =================================================================
   6. Dialogs (native <dialog>: top layer, inert page, Esc built in)
   ================================================================= */

html.mmsc-ws-scroll-lock {
	overflow: hidden;
}

#mmsc-wholesale .mmsc-ws-dialog {
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mmsc-color-text);
	font-family: var(--mmsc-font-body);
	font-weight: 400;
	overflow: visible;
}

#mmsc-wholesale .mmsc-ws-dialog::backdrop {
	background: rgba(45, 38, 35, 0.55);
}

#mmsc-wholesale .mmsc-ws-dialog[open] {
	animation: mmsc-ws-fade-up var(--mmsc-transition-base);
}

@keyframes mmsc-ws-fade-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes mmsc-ws-sheet-up {
	from {
		transform: translateY(40px);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

/* Review sheet (phones + tablets). */
#mmsc-wholesale .mmsc-ws-dialog--sheet {
	width: 100%;
	max-height: 88vh;
	max-height: 88dvh;
	margin: auto 0 0;
}

#mmsc-wholesale .mmsc-ws-dialog--sheet[open] {
	display: flex;
	animation-name: mmsc-ws-sheet-up;
}

#mmsc-wholesale .mmsc-ws-summary--sheet {
	width: 100%;
	max-height: inherit;
	border-radius: var(--mmsc-radius-lg) var(--mmsc-radius-lg) 0 0;
	box-shadow: 0 -12px 40px rgba(45, 38, 35, 0.16);
}

/* Grab handle — a visual cue that this is a sheet; closing is by the ×,
   the backdrop or Escape. */
#mmsc-wholesale .mmsc-ws-summary--sheet .mmsc-ws-summary__head {
	position: relative;
	padding-top: var(--mmsc-space-5);
}

#mmsc-wholesale .mmsc-ws-summary--sheet .mmsc-ws-summary__head::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 50%;
	width: 36px;
	height: 4px;
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-border);
	transform: translateX(-50%);
}

#mmsc-wholesale .mmsc-ws-summary--sheet .mmsc-ws-summary__foot {
	padding-bottom: calc(var(--mmsc-space-4) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
	#mmsc-wholesale .mmsc-ws-dialog--sheet {
		width: min(560px, calc(100vw - 2 * var(--mmsc-space-5)));
		margin: auto auto 0;
	}
}

/* Quote dialog */
#mmsc-wholesale .mmsc-ws-dialog--quote {
	width: 100%;
	height: 100%;
	max-height: 100vh;
	max-height: 100dvh;
	margin: 0;
}

#mmsc-wholesale .mmsc-ws-dialog--quote[open] {
	display: flex;
}

#mmsc-wholesale .mmsc-ws-dialog__frame {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
	max-height: inherit;
	overflow: hidden;
	background: var(--mmsc-color-surface);
}

@media (max-width: 767px) {
	#mmsc-wholesale .mmsc-ws-dialog--quote[open] {
		animation-name: mmsc-ws-sheet-up;
	}
}

@media (min-width: 768px) {
	#mmsc-wholesale .mmsc-ws-dialog--quote {
		width: min(960px, calc(100vw - 2 * var(--mmsc-space-6)));
		height: auto;
		max-height: min(92vh, 860px);
		margin: auto;
	}

	#mmsc-wholesale .mmsc-ws-dialog__frame {
		border-radius: var(--mmsc-radius-lg);
		box-shadow: 0 32px 80px rgba(45, 38, 35, 0.22);
	}
}

#mmsc-wholesale .mmsc-ws-dialog__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--mmsc-space-4);
	padding: var(--mmsc-space-4) var(--mmsc-space-4) var(--mmsc-space-3) var(--mmsc-space-5);
	border-bottom: 1px solid var(--mmsc-color-border);
}

#mmsc-wholesale .mmsc-ws-dialog__title {
	margin-top: 2px;
	font-size: var(--mmsc-text-xl);
	line-height: 1.15;
}

#mmsc-wholesale .mmsc-ws-dialog__title:focus,
#mmsc-wholesale .mmsc-ws-success__title:focus {
	outline: none;
}

#mmsc-wholesale .mmsc-ws-dialog__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

#mmsc-wholesale .mmsc-ws-dialog__scroll[hidden] {
	display: none;
}

#mmsc-wholesale .mmsc-ws-quote {
	display: grid;
	min-height: 100%;
}

@media (min-width: 900px) {
	#mmsc-wholesale .mmsc-ws-dialog__top {
		padding: var(--mmsc-space-5) var(--mmsc-space-5) var(--mmsc-space-4) var(--mmsc-space-6);
	}

	#mmsc-wholesale .mmsc-ws-quote {
		grid-template-columns: 300px minmax(0, 1fr);
	}
}

/* Enquiry review (inside the quote dialog). */
#mmsc-wholesale .mmsc-ws-review {
	padding: var(--mmsc-space-3) var(--mmsc-space-5);
	background: var(--mmsc-color-bg);
	border-bottom: 1px solid var(--mmsc-color-border);
}

@media (min-width: 900px) {
	#mmsc-wholesale .mmsc-ws-review {
		padding: var(--mmsc-space-5) var(--mmsc-space-5) var(--mmsc-space-6) var(--mmsc-space-6);
		border-right: 1px solid var(--mmsc-color-border);
		border-bottom: 0;
	}
}

#mmsc-wholesale .mmsc-ws-review__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mmsc-space-3);
	min-height: 44px;
	cursor: pointer;
	list-style: none;
}

#mmsc-wholesale .mmsc-ws-review__summary::-webkit-details-marker {
	display: none;
}

#mmsc-wholesale .mmsc-ws-review__heading {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

#mmsc-wholesale .mmsc-ws-review__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--mmsc-color-text-muted);
}

#mmsc-wholesale .mmsc-ws-review__totals {
	font-family: var(--mmsc-font-heading);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mmsc-color-text);
	font-variant-numeric: tabular-nums;
}

#mmsc-wholesale .mmsc-ws-review__summary .mmsc-ws-icon {
	flex: 0 0 auto;
	color: var(--mmsc-color-text-muted);
	transform: rotate(180deg);
	transition: transform var(--mmsc-transition-base);
}

#mmsc-wholesale .mmsc-ws-review__details[open] .mmsc-ws-review__summary .mmsc-ws-icon {
	transform: none;
}

#mmsc-wholesale .mmsc-ws-review__list {
	display: flex;
	flex-direction: column;
	gap: var(--mmsc-space-3);
	margin: var(--mmsc-space-3) 0 var(--mmsc-space-4);
}

#mmsc-wholesale .mmsc-ws-review__item {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--mmsc-space-3);
}

#mmsc-wholesale .mmsc-ws-review__thumb {
	display: block;
	width: 36px;
	height: 48px;
	max-width: none;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-border);
}

#mmsc-wholesale .mmsc-ws-review__name {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mmsc-color-text);
}

#mmsc-wholesale .mmsc-ws-review__sku {
	display: block;
	margin-top: 1px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mmsc-color-text-muted);
}

#mmsc-wholesale .mmsc-ws-review__qty {
	font-size: 13px;
	font-weight: 600;
	color: var(--mmsc-color-text);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

#mmsc-wholesale .mmsc-ws-review__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-top: var(--mmsc-space-3);
	border-top: 1px solid var(--mmsc-color-border);
	font-size: var(--mmsc-text-sm);
	font-weight: 600;
	color: var(--mmsc-color-text);
}

#mmsc-wholesale .mmsc-ws-review__total span:last-child {
	font-family: var(--mmsc-font-heading);
	font-size: var(--mmsc-text-lg);
	font-variant-numeric: tabular-nums;
}

#mmsc-wholesale .mmsc-ws-review__edit {
	margin-top: var(--mmsc-space-2);
	padding: 0;
}

/* Form */
#mmsc-wholesale .mmsc-ws-form {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: var(--mmsc-space-5) var(--mmsc-space-5) 0;
}

@media (min-width: 900px) {
	#mmsc-wholesale .mmsc-ws-form {
		padding: var(--mmsc-space-5) var(--mmsc-space-6) 0;
	}
}

#mmsc-wholesale .mmsc-ws-form__intro {
	margin-bottom: var(--mmsc-space-4);
	font-size: var(--mmsc-text-sm);
	line-height: 1.6;
	color: var(--mmsc-color-text-muted);
}

#mmsc-wholesale .mmsc-ws-form__alert {
	display: flex;
	gap: var(--mmsc-space-2);
	margin-bottom: var(--mmsc-space-4);
	padding: var(--mmsc-space-3) var(--mmsc-space-4);
	border: 1px solid var(--mmsc-color-error);
	border-radius: var(--mmsc-radius-sm);
	background: rgba(179, 65, 61, 0.05);
	font-size: var(--mmsc-text-sm);
	line-height: 1.5;
}

#mmsc-wholesale .mmsc-ws-form__alert[hidden] {
	display: none;
}

#mmsc-wholesale .mmsc-ws-form__alert p {
	color: var(--mmsc-color-error);
}

#mmsc-wholesale .mmsc-ws-form__grid {
	display: grid;
	gap: var(--mmsc-space-4);
}

@media (min-width: 600px) {
	#mmsc-wholesale .mmsc-ws-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#mmsc-wholesale .mmsc-ws-field--city,
	#mmsc-wholesale .mmsc-ws-field--note {
		grid-column: 1 / -1;
	}
}

#mmsc-wholesale .mmsc-ws-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

#mmsc-wholesale .mmsc-ws-field__label {
	display: block;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mmsc-color-text);
}

#mmsc-wholesale .mmsc-ws-field__req {
	color: var(--mmsc-color-sale);
}

#mmsc-wholesale .mmsc-ws-field__optional {
	font-weight: 400;
	color: var(--mmsc-color-text-muted);
}

#mmsc-wholesale input.mmsc-ws-field__input,
#mmsc-wholesale textarea.mmsc-ws-field__input {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-bg);
	box-shadow: none;
	color: var(--mmsc-color-text) !important; /* legacy `input { color: green !important }` */
	font-family: var(--mmsc-font-body);
	font-size: 16px; /* no iOS focus zoom */
	font-weight: 400;
	line-height: 1.4;
	transition: border-color var(--mmsc-transition-fast), background-color var(--mmsc-transition-fast), box-shadow var(--mmsc-transition-fast);
}

#mmsc-wholesale textarea.mmsc-ws-field__input {
	min-height: 96px;
	resize: vertical;
}

#mmsc-wholesale .mmsc-ws-field__input::placeholder {
	color: #9a8f88;
	opacity: 1;
}

#mmsc-wholesale .mmsc-ws-field__input:hover {
	border-color: var(--mmsc-color-text-muted);
}

#mmsc-wholesale .mmsc-ws-field__input:focus {
	outline: none;
	border-color: var(--mmsc-color-primary);
	background: var(--mmsc-color-surface);
	box-shadow: 0 0 0 3px rgba(185, 121, 132, 0.18);
}

#mmsc-wholesale .mmsc-ws-field__input[aria-invalid="true"] {
	border-color: var(--mmsc-color-error);
	background: var(--mmsc-color-surface);
}

#mmsc-wholesale .mmsc-ws-field__error {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: var(--mmsc-color-error);
}

#mmsc-wholesale .mmsc-ws-field__error:empty {
	display: none;
}

/* Honeypot — off-screen for people, still a real field for bots. */
#mmsc-wholesale .mmsc-ws-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

#mmsc-wholesale .mmsc-ws-form__legend {
	margin-top: var(--mmsc-space-3);
	font-size: 12px;
	color: var(--mmsc-color-text-muted);
}

#mmsc-wholesale .mmsc-ws-form__legend span {
	color: var(--mmsc-color-sale);
}

/* Submit stays in reach: sticky to the bottom of the scrolling pane, just
   the button (the fine print follows it at the end of the form, so the
   pinned bar stays compact on small phones). */
#mmsc-wholesale .mmsc-ws-form__submit {
	position: sticky;
	bottom: 0;
	z-index: 1;
	margin: var(--mmsc-space-4) calc(-1 * var(--mmsc-space-5)) 0;
	padding: var(--mmsc-space-3) var(--mmsc-space-5);
	border-top: 1px solid var(--mmsc-color-border);
	background: var(--mmsc-color-surface);
}

@media (min-width: 900px) {
	#mmsc-wholesale .mmsc-ws-form__submit {
		margin-right: calc(-1 * var(--mmsc-space-6));
		margin-left: calc(-1 * var(--mmsc-space-6));
		padding: var(--mmsc-space-4) var(--mmsc-space-6);
	}
}

#mmsc-wholesale .mmsc-ws-submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 0 var(--mmsc-space-5);
	border: 1px solid var(--mmsc-color-dark);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
	font-size: var(--mmsc-text-button);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color var(--mmsc-transition-base);
}

#mmsc-wholesale .mmsc-ws-submit:hover,
#mmsc-wholesale .mmsc-ws-submit:focus {
	border-color: var(--mmsc-color-dark-hover);
	background: var(--mmsc-color-dark-hover);
	color: var(--mmsc-color-surface);
}

#mmsc-wholesale .mmsc-ws-submit[aria-busy="true"] {
	cursor: progress;
}

#mmsc-wholesale .mmsc-ws-submit[aria-busy="true"] .mmsc-ws-submit__label {
	visibility: hidden;
}

#mmsc-wholesale .mmsc-ws-submit__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	display: none;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--mmsc-color-surface);
	border-radius: 50%;
	animation: mmsc-ws-spin 700ms linear infinite;
}

#mmsc-wholesale .mmsc-ws-submit[aria-busy="true"] .mmsc-ws-submit__spinner {
	display: block;
}

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

#mmsc-wholesale .mmsc-ws-form__fine {
	padding: 0 0 calc(var(--mmsc-space-5) + env(safe-area-inset-bottom, 0px));
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	color: var(--mmsc-color-text-muted);
}

/* Success */
#mmsc-wholesale .mmsc-ws-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--mmsc-space-6) var(--mmsc-space-5) calc(var(--mmsc-space-5) + env(safe-area-inset-bottom, 0px));
	text-align: center;
}

#mmsc-wholesale .mmsc-ws-success[hidden] {
	display: none;
}

#mmsc-wholesale .mmsc-ws-success__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: var(--mmsc-radius-pill);
	background: rgba(92, 122, 92, 0.12);
	color: var(--mmsc-color-success);
}

#mmsc-wholesale .mmsc-ws-success__title {
	margin-top: var(--mmsc-space-4);
	font-size: var(--mmsc-text-2xl);
	line-height: 1.15;
}

#mmsc-wholesale .mmsc-ws-success__text {
	max-width: 30em;
	margin-top: var(--mmsc-space-3);
	font-size: 15px;
	line-height: 1.6;
	color: var(--mmsc-color-text-muted);
}

#mmsc-wholesale .mmsc-ws-success__list {
	width: 100%;
	max-width: 420px;
	margin: var(--mmsc-space-5) 0;
	padding: var(--mmsc-space-4);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-md);
	text-align: left;
}

#mmsc-wholesale .mmsc-ws-success__done {
	max-width: 420px;
}

/* =================================================================
   Motion preferences
   ================================================================= */

/* =================================================================
   9. Refinements (2026-09-29 feedback)
   ================================================================= */

/* Catalogue cards on phones: the controls follow the CARD's width, so
   "Add to enquiry" and the pieces number always fit — also with enlarged
   system text. */
#mmsc-wholesale .mmsc-ws-card {
	container-type: inline-size;
}

#mmsc-wholesale .mmsc-ws-add {
	min-width: 0;
	overflow: hidden;
	font-size: 12px;
	letter-spacing: 0.05em;
}

/* The label is sized from the card's width so it keeps clear room from
   the border on every card (~12px+ a side even at 320px). */
@container (max-width: 220px) {
	#mmsc-wholesale .mmsc-ws-add {
		gap: 4px;
		padding: 0 6px;
		font-size: clamp(10.5px, 6.5cqi, 11.5px);
		letter-spacing: 0.02em;
	}

	#mmsc-wholesale .mmsc-ws-card .mmsc-ws-stepper {
		grid-template-columns: 38px minmax(0, 1fr) 38px;
	}

	#mmsc-wholesale .mmsc-ws-card .mmsc-ws-stepper__field {
		gap: 2px;
		padding: 0 2px;
	}

	#mmsc-wholesale .mmsc-ws-card input.mmsc-ws-stepper__input {
		width: 100%;
		max-width: 4ch;
		text-align: center;
	}
}

/* Narrow cards: the number alone in the stepper (its label says "Pieces
   of …"; the running total below says "pcs"). */
@container (max-width: 150px) {
	#mmsc-wholesale .mmsc-ws-add {
		letter-spacing: 0;
	}
}

@container (max-width: 175px) {
	#mmsc-wholesale .mmsc-ws-add .mmsc-ws-icon,
	#mmsc-wholesale .mmsc-ws-card .mmsc-ws-stepper__unit {
		display: none;
	}

	#mmsc-wholesale .mmsc-ws-card .mmsc-ws-stepper {
		grid-template-columns: 36px minmax(0, 1fr) 36px;
	}
}

/* Enquiry dock on phones: running total on the left (it truncates, never
   slides under the button), a compact Get Best Quote on the right. */
@media (max-width: 767px) {
	#mmsc-wholesale .mmsc-ws-dock {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--mmsc-space-2);
	}

	#mmsc-wholesale .mmsc-ws-dock__summary {
		order: -1;
		justify-content: flex-start;
		gap: 6px;
		overflow: hidden;
		padding: 0;
		text-align: left;
	}

	#mmsc-wholesale .mmsc-ws-dock__text {
		align-items: flex-start;
		overflow: hidden;
	}

	#mmsc-wholesale .mmsc-ws-dock__pieces {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#mmsc-wholesale .mmsc-ws-dock__summary .mmsc-ws-icon {
		flex: none;
	}

	#mmsc-wholesale .mmsc-ws-dock__quote {
		min-height: 46px;
		padding: 0 var(--mmsc-space-4);
		font-size: 12px;
		letter-spacing: 0.04em;
	}
}

@media (max-width: 359px) {
	#mmsc-wholesale .mmsc-ws-dock__quote {
		padding: 0 var(--mmsc-space-3);
		font-size: 11px;
	}
}

/* Desktop enquiry panel: wider, less chrome, and each selected style large
   enough to recognise at a glance — bigger photo, name and pieces. */
@media (min-width: 1280px) {
	#mmsc-wholesale .mmsc-ws-layout {
		grid-template-columns: minmax(0, 1fr) 400px;
	}
}

@media (min-width: 1024px) {
	#mmsc-wholesale .mmsc-ws-summary--panel .mmsc-ws-summary__head {
		padding: var(--mmsc-space-4) var(--mmsc-space-5) 0;
	}

	#mmsc-wholesale .mmsc-ws-summary--panel .mmsc-ws-progress {
		padding: var(--mmsc-space-3) var(--mmsc-space-5);
	}

	#mmsc-wholesale .mmsc-ws-summary--panel .mmsc-ws-progress__text {
		margin-top: 6px;
	}

	/* The page says it above the catalogue; the panel keeps its height for
	   the selection. (The phone review sheet keeps the note.) */
	#mmsc-wholesale .mmsc-ws-summary--panel .mmsc-ws-summary__note {
		display: none;
	}

	#mmsc-wholesale .mmsc-ws-summary--panel .mmsc-ws-summary__foot {
		padding: var(--mmsc-space-3) var(--mmsc-space-5) var(--mmsc-space-4);
	}

	#mmsc-wholesale .mmsc-ws-summary--panel .mmsc-ws-summary__body {
		padding-top: 0;
		padding-bottom: 0;
	}
}

#mmsc-wholesale .mmsc-ws-line {
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 6px var(--mmsc-space-3);
	padding: var(--mmsc-space-4) 0;
}

#mmsc-wholesale .mmsc-ws-line__thumb {
	width: 64px;
	height: 85px;
	border-radius: var(--mmsc-radius-md);
}

#mmsc-wholesale .mmsc-ws-line__name {
	font-size: 15px;
}

#mmsc-wholesale .mmsc-ws-line__qty {
	align-self: end;
}

#mmsc-wholesale .mmsc-ws-line .mmsc-ws-stepper--sm {
	grid-template-columns: 38px minmax(68px, auto) 38px;
	height: 40px;
	border-color: var(--mmsc-color-dark);
}

#mmsc-wholesale .mmsc-ws-line .mmsc-ws-stepper--sm input.mmsc-ws-stepper__input {
	font-size: 17px;
}

#mmsc-wholesale .mmsc-ws-line .mmsc-ws-stepper--sm .mmsc-ws-stepper__unit {
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	#mmsc-wholesale *,
	#mmsc-wholesale *::before,
	#mmsc-wholesale *::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}

	#mmsc-wholesale .mmsc-ws-submit__spinner {
		animation: mmsc-ws-spin 1.6s linear infinite !important;
	}
}

/* =================================================================
   10. Refinements (2026-09-30 feedback)
   ================================================================= */

/* Phones: a smaller "Add to enquiry" and a compact card stepper, set by
   screen width rather than only by the container queries above — some
   phone browsers (and large system text) fell back to the full-size
   stepper, where 44px buttons plus the "pcs" label squeezed a two-digit
   number out of view. The number now has the whole middle segment. */
@media (max-width: 767px) {
	#mmsc-wholesale .mmsc-ws-card .mmsc-ws-add {
		min-height: 38px;
		gap: 4px;
		padding: 0 8px;
		font-size: 11px;
		letter-spacing: 0.02em;
	}

	#mmsc-wholesale .mmsc-ws-card .mmsc-ws-add .mmsc-ws-icon {
		display: none;
	}

	#mmsc-wholesale .mmsc-ws-card .mmsc-ws-stepper {
		grid-template-columns: 34px minmax(0, 1fr) 34px;
		height: 40px;
	}

	#mmsc-wholesale .mmsc-ws-card .mmsc-ws-stepper__field {
		gap: 0;
		padding: 0 2px;
	}

	#mmsc-wholesale .mmsc-ws-card .mmsc-ws-stepper__unit {
		display: none;
	}

	#mmsc-wholesale .mmsc-ws-card input.mmsc-ws-stepper__input {
		width: 100%;
		max-width: none;
		text-align: center;
		font-size: 16px;
	}
}

/* Desktop enquiry panel: wider, and each selected style shown large
   enough to recognise — bigger photo, full name, pieces on one row. */
@media (min-width: 1024px) and (max-width: 1279px) {
	#mmsc-wholesale .mmsc-ws-layout {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: var(--mmsc-space-5);
	}
}

@media (min-width: 1280px) {
	#mmsc-wholesale .mmsc-ws-layout {
		grid-template-columns: minmax(0, 1fr) 440px;
		gap: var(--mmsc-space-6);
	}
}

@media (min-width: 1024px) {
	#mmsc-wholesale .mmsc-ws-summary--panel .mmsc-ws-summary__title {
		font-size: var(--mmsc-text-xl);
	}

	#mmsc-wholesale .mmsc-ws-summary--panel .mmsc-ws-summary__count {
		font-size: 14px;
	}

	#mmsc-wholesale .mmsc-ws-summary--panel .mmsc-ws-line {
		grid-template-columns: 84px minmax(0, 1fr) auto;
		column-gap: var(--mmsc-space-4);
		row-gap: var(--mmsc-space-2);
		padding: var(--mmsc-space-4) 0;
	}

	#mmsc-wholesale .mmsc-ws-summary--panel .mmsc-ws-line__thumb {
		width: 84px;
		height: 112px;
		object-position: center 12%;
	}

	#mmsc-wholesale .mmsc-ws-summary--panel .mmsc-ws-line__name {
		font-size: 16px;
		line-height: 1.3;
	}

	#mmsc-wholesale .mmsc-ws-summary--panel .mmsc-ws-line__sku {
		margin-top: 4px;
		font-size: 12px;
	}

	#mmsc-wholesale .mmsc-ws-summary--panel .mmsc-ws-line .mmsc-ws-stepper--sm {
		grid-template-columns: 40px minmax(76px, auto) 40px;
		height: 42px;
	}

	#mmsc-wholesale .mmsc-ws-summary--panel .mmsc-ws-line__remove {
		width: 36px;
		height: 36px;
	}
}

/* Narrowest phones (and large system text): a little more room for the
   label — tighter side padding, no letter-spacing. */
@media (max-width: 399px) {
	#mmsc-wholesale .mmsc-ws-card .mmsc-ws-add {
		padding: 0 4px;
		letter-spacing: 0;
	}
}

/* "Add to enquiry" on phones (2026-10-01 feedback): the label rendered
   edge-to-edge on a real Android phone — its text scaling / font boosting
   enlarged the 11px label past the button. Boosting is switched off for
   the catalogue, the label is a touch smaller with clear side padding,
   and if a phone still enlarges it, it wraps onto two centred lines
   instead of touching the border. */
#mmsc-wholesale {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media (max-width: 767px) {
	#mmsc-wholesale .mmsc-ws-card .mmsc-ws-add,
	#mmsc-wholesale .mmsc-ws-card .mmsc-ws-add:hover,
	#mmsc-wholesale .mmsc-ws-card .mmsc-ws-add:focus {
		padding: 4px 14px;
		font-size: 10px;
		letter-spacing: 0.04em;
		line-height: 1.2;
		white-space: normal;
		text-align: center;
	}

	#mmsc-wholesale .mmsc-ws-card .mmsc-ws-add span {
		display: block;
		max-width: 100%;
		text-align: center;
	}
}

@media (max-width: 399px) {
	#mmsc-wholesale .mmsc-ws-card .mmsc-ws-add {
		padding: 4px 10px;
		letter-spacing: 0.02em;
	}
}