/* ============================================================
   ModuPRO Series page — Figma node 76:11563
   Tokens: Blue #2DA7FA · Blue subtle #EDF7FF · BG #F7F7F9
           Text #333536 · Text-secondary #737A82 · Hover #E4E4E4
   Font: Montserrat
   ============================================================ */
:root {
	--mp-blue: #2DA7FA;
	--mp-blue-subtle: #EDF7FF;
	--mp-bg: #F7F7F9;
	--mp-text: #333536;
	--mp-text-2: #737A82;
	--mp-hover: #E4E4E4;
	--mp-radius: 16px;
	--mp-shell: 1320px;
}

.mp-page {
	margin: 0;
	background: var(--mp-bg);
	color: var(--mp-text);
	font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.mp-main { display: block; }
/* Section content block: 1320px at a 15.625% gutter (300px on the 1920 design,
   Figma sections at x=300) — identical to the homepage split sections
   (.ft-shell + .ft-split). No inner padding so the content's left edge lands on
   the Figma 300px gutter exactly; min() keeps a 40px gutter on narrow screens. */
.mp-shell {
	width: min(var(--mp-shell), 100% - 80px);
	margin: 0 auto;
	box-sizing: border-box;
}
.mp-accent { color: var(--mp-blue); }

/* ---- Buttons ---- */
.mp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: fit-content;
	padding: 12px 32px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.mp-btn--primary { background: var(--mp-blue); color: #fff; }
.mp-btn--primary:hover { background: #1f96e8; }
.mp-btn i { font-size: 16px; }

/* ============================================================
   Hero — mirrors the homepage hero (.ft-hero*) so the two pages line up.
   Figma: hero frame 76:11564 (model + blob) + copy frame 76:11621.
   ============================================================ */
.mp-hero {
	background: #f7f7f9;
	padding: 56px 0 36px;
}
/* Copy column inset 18.75%/side (Figma copy at x=360). Like the homepage, hold a
   1200px content block on smaller desktops so the media doesn't collapse, and only
   keep the 18.75% inset once 62.5% is wider than that block (>=1920). */
@media (min-width: 991px) {
	.mp-hero .mp-shell {
		width: min(100% - 48px, max(1200px, 62.5%));
		max-width: none;
	}
}
.mp-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}
.mp-hero__copy {
	display: grid;
	gap: 24px;
	max-width: 480px;
}
.mp-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	padding: 8px 14px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(39, 55, 75, .08);
	font-size: 14px;
	font-weight: 600;
	color: var(--mp-text);
}
.mp-hero__badge img { width: 19px; height: 19px; }
.mp-hero__title {
	margin: 0;
	font-size: 36px;
	line-height: 44px;
	font-weight: 700;
}
.mp-hero__desc {
	margin: 0;
	max-width: 448px;
	font-size: 16px;
	/* Figma Body/Lead = Montserrat Medium (500), 16px, line-height 22px. */
	font-weight: 500;
	line-height: 22px;
	color: var(--mp-text-2);
}
/* Model + blob locked together via .mp-hero__stack (sized to the model), so the
   blob keeps its position relative to the model at every width — same approach as
   the homepage hero's .ft-hero__media-stack. The stack fills the media column and
   caps its size so the model stays consistent (and doesn't grow oversized at wide
   desktops); 4K scales the cap up via its own override. */
.mp-hero__media {
	position: relative;
	display: flex;
	align-items: center;
	/* Model sits to the right of its column (toward the shell edge), as in Figma,
	   leaving room for the blob to peek out the model's lower-left clear of the
	   copy. Mobile re-centres it (see <=990). */
	justify-content: flex-end;
	min-height: 380px;
}
.mp-hero__stack {
	position: relative;
	width: 100%;
	max-width: 600px;
}
.mp-hero__model {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	object-fit: contain;
	filter: drop-shadow(0 24px 40px rgba(20, 40, 70, .18));
}
/* Blob behind the model's lower-left (Figma node 76:11572). Offsets are % of the
   stack (= the model box), so the blob↔model relationship holds at any width. */
.mp-hero__blob {
	position: absolute;
	z-index: 0;
	left: -2%;
	top: 20%;
	width: 60%;
	height: auto;
	pointer-events: none;
}

/* Hero responsive — mirrors the homepage hero breakpoints (stack + centre at
   <=990, smaller media on phones). The page's product grids use their own
   1024/720 breakpoints; the hero deliberately follows the homepage's 990/680
   so the two heroes behave identically. */
@media (max-width: 990px) {
	.mp-hero__inner {
		grid-template-columns: 1fr;
		gap: 64px;
	}
	/* Copy first, model image below — the ModuPRO Figma mobile hero (439:7172)
	   stacks the badge/title/desc/button above the articulator model (unlike the
	   homepage, which leads with its image). Natural DOM order (copy → media) gives
	   this, so no order override. */
	.mp-hero__media {
		justify-content: center;
		align-items: flex-start;
		min-height: 0;
		/* Room for the blob's small downward peek so it clears the section below. */
		padding-bottom: 48px;
	}
	.mp-hero__copy {
		max-width: none;
		justify-items: center;
		text-align: center;
	}
	.mp-hero__desc {
		max-width: 448px;
		margin-inline: auto;
	}
}

@media (max-width: 680px) {
	.mp-hero__stack { max-width: 430px; }
	.mp-hero__media { padding-bottom: 36px; }
}

/* ============================================================
   Section + tabs
   ============================================================ */
.mp-section { padding: 56px 0; scroll-margin-top: 96px; }
/* Alternating section backgrounds (matches Figma). The shared .shop-page styles
   force the page white, so the gray sections are set explicitly: hero, Pedo and
   Hygiene are #f7f7f9 (darker), Restorative and Endo are #fcfcfc (near-white). */
#restorative, #endo { background: #fcfcfc; }
#pedo, #hygiene { background: #f7f7f9; }
.mp-hero { background: #f7f7f9; }
/* Endo "More Videos & Resources": 6 cards (4 video + 2 PDF) on a SINGLE row,
   matching the Figma. The design row is 1320px (4x220 + 2x180 + gaps) but our
   content shell is a touch narrower, so the cards flex-shrink to fit rather than
   wrapping to a second row. They re-wrap on small screens. */
#endo .mp-resources__grid { flex-wrap: nowrap; }
#endo .mp-res { flex: 0 1 220px; width: auto; min-width: 0; }
#endo .mp-res--pdf { flex: 0 1 180px; }
#endo .mp-res__thumb { height: 132px; }
@media (max-width: 990px) {
	#endo .mp-resources__grid { flex-wrap: wrap; }
	#endo .mp-res,
	#endo .mp-res--pdf { flex: 1 1 150px; }
}
.mp-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}
.mp-eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mp-text-2);
}
.mp-title {
	margin: 0;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 700;
}
.mp-tabs {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.mp-tab {
	appearance: none;
	background: none;
	border: 0;
	padding: 0 0 6px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--mp-text-2);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
	white-space: nowrap;
}
.mp-tab:hover { color: var(--mp-text); }
.mp-tab.is-active {
	color: var(--mp-blue);
	border-bottom-color: var(--mp-blue);
}

/* ============================================================
   Product grid + cards
   ============================================================ */
.mp-panel[hidden] { display: none; }
.mp-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* Compact row unit (matches Figma): wide cards = 1 row (~160px),
	   feature + regular cards = 2 rows (~336px). */
	grid-auto-rows: 160px;
	gap: 16px;
}
/* single / pair panels: center the few cards */
.mp-panel--single .mp-grid,
.mp-panel--pair .mp-grid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	grid-auto-rows: auto;
}
.mp-panel--pair .mp-grid .mp-card { flex: 0 1 460px; }
.mp-panel--single .mp-grid .mp-card { flex: 0 1 720px; }

.mp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mp-blue-subtle);
	border-radius: var(--mp-radius);
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;
	/* default regular card = 2 rows tall (~336px) */
	grid-row: span 2;
}
.mp-card--feature { grid-column: span 2; grid-row: span 2; }
.mp-card--wide { grid-column: span 2; grid-row: span 1; }
/* Divider between the feature/wide block and the regular grid
   (matches Figma's Line 473 separator). Sits between two grids. */
.mp-grid__divider {
	height: 0;
	border-top: 1px solid var(--mp-hover);
	margin: 24px 0;
}

.mp-card__media {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	margin-bottom: 12px;
}
.mp-card__media img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}
/* Feature card sits in a fixed-height 2-row track (336px). A 180px media floor
   plus the title/desc/cart body overflowed that track, clipping the "Add to Cart"
   into the bottom padding. Lower the floor so the media flexes down and the body
   keeps its full 20px bottom padding (matches Figma spacing). */
.mp-card--feature .mp-card__media { min-height: 150px; }
.mp-card__body { flex: 0 0 auto; }
.mp-card__title {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--mp-text);
}
.mp-card__desc {
	margin: 0 0 14px;
	font-size: 12.5px;
	/* Figma Body/Body-sm = Montserrat Medium (500); the page base weight is 400. */
	font-weight: 500;
	line-height: 1.55;
	color: var(--mp-text-2);
}
.mp-cart {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mp-blue);
	text-decoration: none;
}
.mp-cart i { font-size: 15px; }
.mp-cart:hover { text-decoration: underline; }

/* horizontal card (matches Figma): image left, text right */
.mp-card--horizontal { flex-direction: row; align-items: center; gap: 20px; }
.mp-card--horizontal .mp-card__media {
	order: 1;
	flex: 0 0 46%;
	margin-bottom: 0;
	min-height: 0;
	align-self: stretch;
}
.mp-card--horizontal .mp-card__media img { width: 100%; height: 100%; object-fit: contain; }
.mp-card--horizontal .mp-card__body { flex: 1 1 auto; order: 2; }

/* ---- Explicit per-tab grids (OS3 / Pros / RPD / Dental Study Model) ---- */
/* The column row height is a floor, not a fixed cap: rows grow to fit content
   so a longer description (e.g. ModuPRO Denture) isn't clipped by the card's
   `overflow: hidden`. (.mp-grid--rh240 below raises the floor to 240px.) */
.mp-grid--cols2 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(160px, auto); }
.mp-grid--cols3 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(160px, auto); }
.mp-grid--rh240 { grid-auto-rows: minmax(240px, auto); }
.mp-grid--center { display: flex; justify-content: center; }
.mp-grid--explicit .mp-card { grid-row: span 1; }
.mp-grid--explicit .mp-cspan2 { grid-column: span 2; }
.mp-grid--explicit .mp-rspan2 { grid-row: span 2; }
/* In auto-sized explicit rows the media must be height-capped, otherwise the
   image grows to its intrinsic size and blows up the card. (Pedo cards manage
   their own image-box sizing, so they are excluded.) */
.mp-grid--explicit .mp-card__media:not(.mp-card__media--pedo) { flex: 0 0 auto; height: 110px; min-height: 0; }
.mp-grid--explicit .mp-card--brand .mp-card__media { height: 130px; }
/* Secondary cards (refill / modules / replacement / checkmate) place their
   product image toward the TOP-RIGHT, matching Figma — not top-center. */
.mp-grid--explicit .mp-card:not(.mp-card--hr):not(.mp-card--horizontal):not(.mp-card--brand):not(.mp-card--dsm):not(.mp-card--pedo) .mp-card__media {
	justify-content: flex-end;
	align-items: flex-start;
}
.mp-grid--explicit .mp-card:not(.mp-card--hr):not(.mp-card--horizontal):not(.mp-card--brand):not(.mp-card--dsm):not(.mp-card--pedo) .mp-card__media img {
	object-fit: contain;
	object-position: right top;
}
/* Two-piece teeth (OS3 / Pros Replacement Teeth): canine + molar as a
   right-aligned row at the top, sharing the same pieces as Endo 3DP. */
.mp-card--teeth2 .mp-card__media { justify-content: flex-end; align-items: flex-start; gap: 10px; }
.mp-card--teeth2 .mp-tooth { width: auto; height: 95%; flex: 0 0 auto; object-fit: contain; object-position: top; }

/* Videos & Resources thumbnail also sits top-right, text below-left. */
.mp-grid--explicit .mp-card--brand .mp-card__media--brand {
	align-self: flex-end;
	width: 60%;
	max-width: 260px;
}

/* horizontal card, image on the RIGHT / text on the LEFT (OS3 & Pros hero) */
.mp-card--hr .mp-card__media { order: 2; flex: 0 0 54%; min-width: 0; overflow: hidden; }
.mp-card--hr .mp-card__body { order: 1; flex: 1 1 auto; min-width: 0; }
.mp-grid--explicit .mp-card--hr .mp-card__media { flex: 0 0 54%; height: 200px; align-self: center; }
/* OS3 (Pros) & Pros (M200) wide hero cards: anchor the text to the bottom-left
   (Figma node 26:1270 — text block sits in the lower-left, image vertically
   centered on the right). Scoped to the cspan2 hero cards so the Endo ModuPRO
   hr cards (which are not cspan2) keep their centered text. */
.mp-card--hr.mp-cspan2 .mp-card__body { align-self: flex-end; }
/* OS3 (Pros) hero card: the Figma text column is 243px wide at 12px (node
   26:1270/26:1273). Constrain the description to that so it wraps exactly like
   the design — "…model for fixed-" / "prosthodontics and grading simplicity." —
   without disturbing the right-aligned image. */
.mp-card--os3pros .mp-card__desc { max-width: 243px; font-size: 12px; }

/* vertically-stacked card with centered text (OS3/Pros small cards, DSM) */
.mp-card--vcenter .mp-card__body { text-align: center; }
.mp-card--vcenter .mp-cart { justify-content: center; }

/* Dental Study Model: single centered card. Text block is left-aligned (matches
   the design), overriding the centered .mp-card--vcenter text. */
.mp-card--dsm { width: 580px; max-width: 100%; min-height: 340px; }
.mp-grid--explicit .mp-card--dsm .mp-card__media { height: 200px; }
.mp-card--dsm .mp-card__body { text-align: left; }
.mp-card--dsm .mp-cart { justify-content: flex-start; }

/* ===== Endo grid tabs (X2 / Real T / Endo 3DP / E-Block) =====
   Centered row of 318x280 blue-subtle cards: image top-center, text below-left. */
.mp-grid--endo { display: flex; flex-wrap: nowrap; justify-content: center; gap: 16px; }
.mp-grid--endo .mp-card { flex: 1 1 0; min-width: 0; max-width: 318px; min-height: 280px; }
@media (max-width: 990px) {
	.mp-grid--endo { flex-wrap: wrap; }
	.mp-grid--endo .mp-card { flex: 1 1 280px; max-width: 100%; }
}
.mp-grid--endo .mp-card__media {
	flex: 0 0 auto !important;
	height: 140px !important;
	min-height: 0 !important;
	justify-content: center !important;
	align-items: flex-start !important;
}
.mp-grid--endo .mp-card__media img { object-fit: contain; object-position: top center !important; }
/* Endo cards whose product image sits toward the right of the box (Figma):
   X2 Endo + Lifelike Coronal Hardness (X2 tab), Real T Endo + Straightforward to
   Complex (Real T tab). */
.mp-grid--endo .mp-card--img-right .mp-card__media img { object-position: top right !important; }
/* Match Figma type for the endo cards: title SemiBold 14, desc Medium 12 with a
   tighter line-height so the card keeps the design's ~318x280 (landscape) shape
   instead of growing tall. */
.mp-grid--endo .mp-card__title { font-size: 14px; }
.mp-grid--endo .mp-card__desc { font-size: 12px; line-height: 1.4; }
/* Endo "Resources" card: small PDF icon instead of a full product image */
.mp-card--res .mp-card__media img { max-height: 76px !important; width: auto; }

/* ===== Pedo section: white cards with light-blue (#eaf6ff) image boxes ===== */
.mp-grid--pedo {
	grid-template-columns: minmax(0, 700fr) minmax(0, 604fr);
	grid-auto-rows: 192px;
}
.mp-card--pedo { background: #fff; padding: 24px; }
.mp-card--pedo .mp-card__media--pedo {
	background: #eaf6ff;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin: 0;
	min-height: 0;
}
.mp-card--pedo .mp-card__media--pedo img { width: 90%; height: 84%; object-fit: contain; object-position: center; }
/* feature (ModuPRO Pedo): text on top, image box on the bottom (full width) */
.mp-card--pedo-feature { display: flex; flex-direction: column; }
.mp-card--pedo-feature .mp-card__body { flex: 0 0 auto; margin-bottom: 16px; }
.mp-card--pedo-feature .mp-card__media--pedo { flex: 1 1 auto; height: auto; width: 100%; }
/* horizontal (gingiva / teeth / endo / study): text left, image box right */
.mp-card--pedo-h { display: flex; flex-direction: row; align-items: stretch; gap: 16px; }
.mp-card--pedo-h .mp-card__body { flex: 1 1 auto; align-self: center; }
.mp-card--pedo-h .mp-card__media--pedo { flex: 0 0 44%; height: auto; }
/* single centered pedo card (Pedo Endo 3DP / Pedo Study Model) */
.mp-card--pedo-single { width: 652px; max-width: 100%; min-height: 220px; }

/* corner card (e.g. Endo 3DP): two separate teeth tucked top-right,
   text bottom-left — mirrors Figma's two Replacement-Teeth nodes. */
.mp-card--corner { position: relative; }
.mp-card--corner .mp-card__media {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 44%;
	aspect-ratio: 138 / 140;
	height: auto;
	min-height: 0;
	margin: 0;
}
.mp-card--corner .mp-tooth {
	position: absolute;
	object-fit: contain;
	object-position: bottom center;
}
/* canine: narrow, taller, left */
.mp-card--corner .mp-tooth--canine { left: 0; top: 0; width: 38.9%; height: 99.6%; }
/* molar: wider, slightly lower, right */
.mp-card--corner .mp-tooth--molar { left: 47.7%; top: 3.2%; width: 52.3%; height: 96.8%; }
.mp-card--corner .mp-card__body { margin-top: auto; }

/* brand ("Videos & Resources") card: keeps the blue-subtle card background
   (like every other card); only the inner video thumbnail is white. */
.mp-card__media--brand {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(20, 40, 70, .06);
}
.mp-card__media--brand img { max-height: 80px; }

/* pdf card (e.g. Endo X2 "Resources") */
.mp-card--pdf .mp-card__media--pdf { min-height: 150px; }
.mp-card__media--pdf img { max-height: 130px; }

/* ===== Hygiene / Perio gallery cards (Figma 76:11650 family) =====
   Borderless cards on the section background: product image on top, then
   centered title / description / Add-to-Cart. A centered flex row holds a
   fixed-width set of cards per tab (251 / 280 / 400 wide), matching the
   design's "ProductGallery" instances. */
.mp-grid--hyg {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	grid-template-columns: none;
	grid-auto-rows: auto;
}
.mp-card--gallery {
	background: transparent;
	border-radius: 0;
	padding: 16px 0 0;
	overflow: visible;
	grid-row: auto;
	flex: 0 1 251px;
	max-width: 251px;
	min-height: 320px;
	align-items: center;
}
.mp-hyg--w280 .mp-card--gallery { flex-basis: 280px; max-width: 280px; }
.mp-hyg--w400 .mp-card--gallery { flex-basis: 400px; max-width: 400px; }
.mp-card--gallery .mp-card__media {
	flex: 0 0 auto;
	width: 100%;
	height: 150px;
	min-height: 0;
	margin-bottom: 16px;
	align-items: center;
	justify-content: center;
}
.mp-card--gallery .mp-card__media img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
}
.mp-card--gallery .mp-card__body { flex: 0 0 auto; width: 100%; text-align: center; }
/* Match Figma type: title = Montserrat SemiBold 600 / 14px, description =
   Montserrat Medium 500 / 12px (Body-sm). The page's base weight is 400, so
   the description must be set to 500 explicitly to read as bold as the design. */
.mp-card--gallery .mp-card__title { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.mp-card--gallery .mp-card__desc { font-size: 12px; font-weight: 500; line-height: 1.5; margin-bottom: 12px; }
.mp-card--gallery .mp-cart { justify-content: center; }
/* "Videos & Resources" gallery card: white video thumbnail on top, no cart. */
.mp-card--gallery-brand .mp-card__media--brand {
	width: 100%;
	max-width: 248px;
	height: 142px;
	margin: 0 auto 16px;
}
.mp-card--gallery-brand .mp-card__media--brand img { max-width: 100%; max-height: 100%; }
@media (max-width: 990px) {
	.mp-grid--hyg { flex-wrap: wrap; }
	.mp-card--gallery,
	.mp-hyg--w280 .mp-card--gallery,
	.mp-hyg--w400 .mp-card--gallery { flex-basis: 280px; max-width: 100%; }
}

/* ============================================================
   More Videos & Resources
   ============================================================ */
.mp-resources { margin-top: 32px; }
.mp-resources__head { padding-top: 28px; border-top: 1px solid var(--mp-hover); margin-bottom: 20px; }
.mp-resources__head h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--mp-text); }
.mp-resources__head p { margin: 0; font-size: 13px; font-weight: 500; color: var(--mp-text-2); }
/* Left-aligned row (matches Figma): video blocks are wider than PDF blocks,
   packed to the left with whitespace on the right — not a stretched grid. */
.mp-resources__grid {
	--res-video-w: 286px;
	--res-pdf-w: 200px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 16px;
}
.mp-res { display: flex; flex-direction: column; flex: 0 0 auto; width: var(--res-video-w); max-width: 100%; }
.mp-res--pdf { width: var(--res-pdf-w); }
.mp-res__thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 10px;
	height: 160px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(20, 40, 70, .06);
	text-decoration: none;
}
.mp-res__thumb img { max-width: 78%; max-height: 70%; object-fit: contain; }
.mp-res--video .mp-res__thumb img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; }
.mp-res__play {
	position: absolute;
	width: 46px; height: 46px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(45, 167, 250, .92);
	color: #fff;
	border-radius: 50%;
	font-size: 18px;
	box-shadow: 0 6px 16px rgba(45, 167, 250, .4);
}
.mp-res__title { margin: 12px 0 8px; font-size: 13px; font-weight: 600; color: var(--mp-text); text-align: center; }
.mp-res--pdf .mp-res__title { margin-bottom: 10px; }
.mp-res__btn {
	align-self: center;
	display: inline-block;
	padding: 7px 22px;
	border: 1px solid var(--mp-blue);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mp-blue);
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.mp-res__btn:hover { background: var(--mp-blue); color: #fff; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
	/* Rows keep the 150px tablet unit as a floor but grow to fit content, so a
	   card whose image + copy needs more than its allotted track height is no
	   longer clipped by `overflow: hidden` (e.g. the lead feature card's
	   "Add to Cart"). */
	.mp-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(150px, auto); }
	.mp-card { grid-row: span 2; }
	.mp-card--feature { grid-column: span 2; grid-row: span 2; }
	.mp-card--wide { grid-column: span 2; grid-row: span 1; }
	.mp-resources__grid { grid-template-columns: repeat(2, 1fr); }

	/* The lead feature card spans the full width here; cap its media so the image
	   stays a proportionate banner (the media's default `flex: 1 1 auto` would
	   otherwise blow up to the image's intrinsic size in an auto-height row). */
	.mp-card--feature .mp-card__media { flex: 0 0 auto; height: 240px; min-height: 0; }

	/* Explicit per-tab grids (OS3 / Pros / RPD) keep their own card structure
	   instead of the auto-flow span-2 layout above. The fixed 150px row + the
	   .mp-grid--explicit `grid-row: span 1` would otherwise pin each card to one
	   150px row and clip the image + title under `overflow: hidden`. Size rows to
	   content here so the cards grow to fit (the wide hero still spans 2 cols). */
	.mp-grid--explicit { grid-auto-rows: auto; }
	.mp-grid--explicit .mp-card,
	.mp-grid--explicit .mp-rspan2 { grid-row: auto; }
}
/* ============================================================
   Mobile (<=990px) — Figma "iPhone 16 Pro Max" frame (400:6829).
   Every section's product grid (whatever its desktop shape —
   feature/wide/horizontal/hr/corner/endo flex/hygiene gallery)
   collapses to ONE uniform 2-column layout of vertical cards:
   image box on top → title → description → "Add to Cart". The
   tab row becomes a horizontal scroll strip and the section
   heading stacks above it. This reflows the existing desktop
   markup with no DOM changes — same CSS-only approach the
   homepage uses for its mobile layout. (Raised from 720 to 990
   so cards never get squeezed in the tablet band.)
   ============================================================ */
@media (max-width: 990px) {
	.mp-section { padding: 40px 0; }

	/* Heading stacks above a horizontally-scrollable tab strip */
	.mp-section__head { flex-direction: column; align-items: stretch; gap: 16px; }
	.mp-tabs {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 20px;
		width: 100%;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	/* ---- Every grid variant → uniform 2-column ---- */
	.mp-grid,
	.mp-grid--hero,
	.mp-grid--rest,
	.mp-grid--endo,
	.mp-grid--hyg,
	.mp-grid--pedo,
	.mp-panel--pair .mp-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
		/* Equal-height cards per row (Figma): the shorter card's background
		   stretches to match its taller neighbour, with its content top-aligned. */
		align-items: stretch;
		justify-content: stretch;
		gap: 12px;
	}
	/* Single / centered cards span the full width */
	.mp-panel--single .mp-grid,
	.mp-grid--center { display: grid; grid-template-columns: 1fr; }

	/* (Lead "full model" cards are made full-width at the end of this block, so
	   their rule wins over the span resets below regardless of source order.) */

	/* ---- Every card → uniform vertical; reset desktop spans/sizes ---- */
	.mp-card {
		grid-column: auto;
		grid-row: auto;
		flex: initial;
		flex-direction: column;
		min-width: 0;
		max-width: none;
		min-height: 0;
		width: auto;
		padding: 14px;
	}
	.mp-card__media {
		order: 0;
		flex: 0 0 auto;
		height: 110px;
		min-height: 0;
		margin-bottom: 12px;
		justify-content: center;
		align-items: center;
	}
	.mp-card__media img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center !important;
	}
	.mp-card__body { order: 1; align-self: auto; text-align: left; }
	.mp-card__title { font-size: 14px; }
	.mp-card__desc { font-size: 12px; }
	.mp-cart { justify-content: flex-start; }

	/* Horizontal / hr (image-side) cards → stacked vertical */
	.mp-card--horizontal,
	.mp-card--hr { flex-direction: column; align-items: stretch; gap: 0; }
	.mp-card--horizontal .mp-card__media,
	.mp-card--hr .mp-card__media,
	.mp-grid--explicit .mp-card--hr .mp-card__media {
		order: 0;
		flex: 0 0 auto;
		height: 110px;
		margin-bottom: 12px;
		align-self: stretch;
	}
	.mp-card--horizontal .mp-card__body,
	.mp-card--hr .mp-card__body,
	.mp-card--hr.mp-cspan2 .mp-card__body { order: 1; align-self: stretch; }
	.mp-card--os3pros .mp-card__desc { max-width: none; font-size: 12px; }

	/* Feature / wide / spanned cards no longer span (Figma: half-width) */
	.mp-card--feature,
	.mp-card--wide,
	.mp-grid--explicit .mp-cspan2,
	.mp-grid--explicit .mp-rspan2 { grid-column: auto; grid-row: auto; }
	.mp-card--feature .mp-card__media { min-height: 0; height: 130px; }

	/* Explicit-grid media: drop the top-right anchoring + fixed heights */
	.mp-grid--explicit .mp-card__media:not(.mp-card__media--pedo) {
		height: 110px;
		justify-content: center;
		align-items: center;
	}
	.mp-card--teeth2 .mp-card__media { justify-content: center; }

	/* Endo grid cards */
	.mp-grid--endo .mp-card { max-width: none; min-height: 0; }
	.mp-grid--endo .mp-card__media { height: 110px !important; align-items: center !important; }
	.mp-grid--endo .mp-card__media img { object-position: center !important; }

	/* Corner card (Endo 3DP two teeth): teeth move into a normal top media box */
	.mp-card--corner .mp-card__media {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		height: 110px;
		aspect-ratio: auto;
		margin-bottom: 12px;
	}
	.mp-card--corner .mp-tooth--canine { left: 28%; top: 0; height: 100%; width: auto; }
	.mp-card--corner .mp-tooth--molar { left: 52%; top: 0; height: 100%; width: auto; }
	.mp-card--corner .mp-card__body { margin-top: 0; }

	/* Brand ("Videos & Resources") card: video thumb fills the top media box */
	.mp-grid--explicit .mp-card--brand .mp-card__media,
	.mp-card--brand .mp-card__media--brand { height: 110px; width: 100%; max-width: none; align-self: stretch; }

	/* PDF card */
	.mp-card--pdf .mp-card__media--pdf { min-height: 0; height: 110px; }

	/* ---- Pedo: white cards with a light-blue image box ---- */
	.mp-card--pedo { padding: 14px; }
	/* Feature (ModuPRO Pedo) spans both columns; text on top, image box below
	   (Figma). The .mp-grid--pedo scope beats the .mp-grid--explicit rspan reset. */
	.mp-grid--pedo .mp-card--pedo-feature { grid-column: 1 / -1; }
	.mp-card--pedo-feature .mp-card__body { order: 0; }
	.mp-card--pedo-feature .mp-card__media--pedo { order: 1; flex: 0 0 auto; height: 160px; width: 100%; }
	.mp-card--pedo-h { flex-direction: column; gap: 12px; }
	.mp-card--pedo-h .mp-card__media--pedo { order: 0; flex: 0 0 auto; height: 110px; width: 100%; }
	.mp-card--pedo-h .mp-card__body { order: 1; align-self: auto; }
	.mp-card--pedo-single { grid-column: 1 / -1; width: auto; min-height: 0; }
	.mp-card--pedo-single .mp-card__media--pedo { height: 150px; }

	/* ---- Hygiene gallery: transparent cards, centered text, 2-col ---- */
	.mp-card--gallery,
	.mp-hyg--w280 .mp-card--gallery,
	.mp-hyg--w400 .mp-card--gallery {
		flex-basis: auto;
		max-width: none;
		min-height: 0;
		padding: 8px 0 0;
		align-items: center;
	}
	.mp-card--gallery .mp-card__media { height: 120px; margin-bottom: 12px; }
	.mp-card--gallery .mp-card__body { text-align: center; }
	.mp-card--gallery .mp-cart { justify-content: center; }
	.mp-card--gallery-brand .mp-card__media--brand { width: 100%; max-width: none; height: 120px; margin: 0 auto 12px; }

	/* Dental Study Model single centered card → full width */
	.mp-card--dsm { grid-column: 1 / -1; width: auto; max-width: none; min-height: 0; }
	.mp-grid--explicit .mp-card--dsm .mp-card__media { height: 140px; }

	/* ---- More Videos & Resources → 2-column ---- */
	.mp-resources__grid,
	#endo .mp-resources__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px 16px;
		flex-wrap: initial;
	}
	.mp-res,
	.mp-res--pdf,
	#endo .mp-res,
	#endo .mp-res--pdf { width: auto; flex: initial; }
	.mp-res__thumb,
	#endo .mp-res__thumb { height: 96px; }

	/* ---- Lead "full model" cards span the entire row ----
	   ModuPRO One (.mp-card--feature), ModuPRO OS3 (Pros) + ModuPRO Pros (M200)
	   (.mp-card--hr.mp-cspan2), ModuPRO Pedo (.mp-card--pedo-feature). Plus any
	   tab whose grid holds a single product (:only-child) — E-Block, ModuPRO
	   Coris, Dental Study Model, the Pedo single-card tabs. Placed last so it
	   beats the span resets and the desktop span rules; grid-row:auto stops the
	   desktop 2-row span from leaving an empty cell. Accessory cards keep the
	   uniform 2-column grid. */
	.mp-card--feature,
	.mp-card--hr.mp-cspan2,
	.mp-grid--pedo .mp-card--pedo-feature,
	.mp-grid .mp-card:only-child {
		grid-column: 1 / -1;
		grid-row: auto;
	}
	.mp-card--feature .mp-card__media,
	.mp-card--hr.mp-cspan2 .mp-card__media { height: 160px; }
}

/* ============================================================
   Narrow phones (<=449px) — the 2-column product grid collapses to a
   SINGLE column (user request). Min target width is 325px, so also
   reclaim side padding here to keep the single-column cards roomy.
   ============================================================ */
@media (max-width: 449px) {
	.mp-grid,
	.mp-grid--hero,
	.mp-grid--rest,
	.mp-grid--endo,
	.mp-grid--hyg,
	.mp-grid--pedo,
	.mp-panel--pair .mp-grid {
		grid-template-columns: 1fr;
	}
	/* "More Videos & Resources" likewise drops to one column. */
	.mp-resources__grid,
	#endo .mp-resources__grid { grid-template-columns: 1fr; }
	/* The default shell reserves 40px of gutter each side; halve it so cards
	   keep usable width down to the 325px target. */
	.mp-shell { width: min(var(--mp-shell), 100% - 32px); }
}

/* ---- Footer: match the homepage footer layout ----
 * Ported from homepage.css (body.ft-page) and re-scoped to body.mp-page so
 * this page's shared footer renders identically to the homepage's: brand
 * pinned far left with the four link columns clustered on the right on
 * desktop, a 3-up grid on mobile, and a single-row policy bar. The 4K
 * scaling block from the homepage is intentionally omitted — this page's
 * content is not scaled up at 4K, so the shared footer should keep its
 * default 4K sizing here.
 */
@media (min-width: 991px) {
	body.mp-page .shop-footer__grid {
		grid-template-columns: 1fr repeat(4, minmax(0, max-content));
		gap: 100px;
		align-items: start;
	}

	body.mp-page .shop-footer__brand {
		max-width: 370px;
	}
}

/* Mobile footer: brand on top, link columns in a 3-up grid. Higher
 * specificity than footer.css's rules, so it wins regardless of load order. */
@media (max-width: 680px) {
	body.mp-page .shop-footer__main {
		padding: 48px 0;
	}

	body.mp-page .shop-footer__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px 16px;
		align-items: start;
	}

	body.mp-page .shop-footer__brand {
		grid-column: 1 / -1;
		margin-bottom: 4px;
	}

	body.mp-page .shop-footer__column h3 {
		font-size: 16px;
	}

	body.mp-page .shop-footer__column a,
	body.mp-page .shop-footer__brand p {
		font-size: 15px;
		line-height: 1.9;
	}

	/* Keep the policy bar on a single horizontal row — override the shared
	 * <=400px rule that stacks it vertically. */
	body.mp-page .shop-footer__bar-inner {
		gap: 12px;
	}

	body.mp-page .shop-footer__policies {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 14px;
	}

	body.mp-page .shop-footer__policies a {
		font-size: 10px;
		white-space: nowrap;
	}

	body.mp-page .shop-footer__youtube img {
		height: 22px;
	}
}

/* Extra-small phones: let the policy bar wrap so nothing is clipped off the
 * right edge. Placed after the <=680 block so it wins on source order. */
@media (max-width: 380px) {
	body.mp-page .shop-footer__bar-inner {
		flex-wrap: wrap;
		gap: 10px;
	}

	body.mp-page .shop-footer__policies {
		flex-wrap: wrap;
		gap: 8px 12px;
	}
}

/* ============================================================
   4K / ultra-wide (matches the homepage's 4K treatment)
   ------------------------------------------------------------
   Same desktop design, uniformly scaled up ~2.5x so it reads as
   the desktop layout zoomed in — not a small island of content in
   a huge shell. The content shell widens 1320 -> 3320px to line up
   edge-to-edge with the shared header/footer (homePage_design.css
   scales --shop-shell: 3320px at this same breakpoint), so content
   widths AND type/spacing scale by the same factor.

   The header (.shop-header__*) and footer (.shop-footer__*) blocks
   below are ported verbatim from homepage.css's body.ft-page rules,
   re-scoped to body.mp-page. The header/footer markup is the shared
   header.php / footer.php, identical on both pages, so the same
   values apply — without them the shared chrome stays ~1.2x while
   this page's content is ~2.5x, making the bars look tiny.
   ============================================================ */
@media (min-width: 3000px) {
	/* ---- Page-level tokens ---- */
	body.mp-page {
		/* Section content block caps at 2640px (1320 × 2) → 600px (15.625%) gutter
		   at 3840, identical to the homepage's 4K split sections (.ft-split
		   max-width: 2640). No inner padding so the content's left edge sits on the
		   600px gutter exactly. */
		--mp-shell: 2640px;
		--mp-radius: 40px;
		--shop-header-height: 210px;
	}

	/* ---- Buttons (match homepage .ft-btn 4K) ---- */
	.mp-btn {
		gap: 26px;
		padding: 26px 70px;
		border-radius: 8px;
		font-size: 34px;
	}
	.mp-btn i { font-size: 34px; }

	/* ---- Hero (match homepage .ft-hero* 4K so the two heroes line up) ---- */
	.mp-hero { padding: 124px 0 80px; }
	/* Hero gutter stays 18.75% via the %-based rule above (.mp-hero .mp-shell),
	   applied from 991px up, so no 4K shell cap is needed — like the homepage. */
	.mp-hero__inner {
		grid-template-columns: minmax(0, 960px) minmax(0, 1fr); /* 480 × 2 */
		gap: 96px;
	}
	.mp-hero__copy { max-width: 960px; gap: 53px; }
	.mp-hero__badge {
		gap: 8px;
		padding: 18px 31px;
		font-size: 30px;
	}
	.mp-hero__badge img { width: 42px; height: 42px; }
	.mp-hero__title { font-size: 78px; line-height: 96px; }
	.mp-hero__desc { max-width: 896px; font-size: 34px; line-height: 48px; } /* 448 × 2 */
	/* Model + blob scale up via the stack cap (≈2× the desktop 620); blob is % of
	   the stack so it follows automatically. */
	.mp-hero__media { min-height: 792px; }
	.mp-hero__stack { max-width: 1200px; }

	/* ---- Section + tabs (2× the 1920 design, matching the homepage 4K type
	   scale — the heading + right-aligned tab row must fit the 2640 content
	   block on one line, as in Figma, so these track the homepage's .ft-title
	   etc. rather than the old ~2.5× scale). ---- */
	.mp-section { padding: 140px 0; scroll-margin-top: 240px; }
	.mp-section__head { gap: 48px; margin-bottom: 64px; }
	.mp-eyebrow { margin-bottom: 16px; font-size: 26px; }
	.mp-title { font-size: 52px; }
	.mp-tabs { gap: 56px; }
	.mp-tab {
		padding-bottom: 12px;
		font-size: 28px;
		border-bottom-width: 4px;
	}

	/* ---- Product grid + cards (2× the 1920 Figma base) ---- */
	.mp-grid {
		grid-auto-rows: 320px;
		gap: 32px;
	}
	.mp-panel--pair .mp-grid .mp-card { flex: 0 1 920px; }
	.mp-panel--single .mp-grid .mp-card { flex: 0 1 1440px; }
	.mp-card { padding: 40px; }
	/* Feature card (ModuPRO One): the media is flex:1 and grows to fill the space
	   left after the title/long-desc/button, so keep its min-height BELOW that
	   leftover, else it overflows the fixed 672px row and clips "Add to Cart".
	   2× of the 150px base. */
	.mp-card--feature .mp-card__media { min-height: 300px; }
	.mp-card__media { min-height: 192px; margin-bottom: 24px; }
	.mp-card__title { margin-bottom: 16px; font-size: 30px; }
	.mp-card__desc { margin-bottom: 28px; font-size: 25px; }
	.mp-cart { gap: 8px; font-size: 28px; }
	.mp-cart i { font-size: 30px; }
	.mp-card--horizontal { gap: 40px; }
	.mp-card--horizontal .mp-card__media { min-height: 220px; }
	.mp-card__media--brand img { max-height: 160px; }
	.mp-card--pdf .mp-card__media--pdf { min-height: 300px; }
	.mp-card__media--pdf img { max-height: 260px; }

	/* ---- Hygiene / Perio gallery cards (~2.5x, matches the scale above) ----
	   Added after the base 4K block, so without explicit overrides the cards
	   keep their 1080p widths/text while the page scales 2.5x. The 2-class
	   selectors here beat the single-class base 4K card rules. */
	.mp-grid--hyg { gap: 32px; }
	.mp-card--gallery {
		padding: 32px 0 0;
		flex-basis: 502px;
		max-width: 502px;
		min-height: 640px;
	}
	.mp-hyg--w280 .mp-card--gallery { flex-basis: 560px; max-width: 560px; }
	.mp-hyg--w400 .mp-card--gallery { flex-basis: 800px; max-width: 800px; }
	.mp-card--gallery .mp-card__media { height: 300px; min-height: 0; margin-bottom: 32px; }
	.mp-card--gallery .mp-card__title { font-size: 28px; margin-bottom: 16px; }
	.mp-card--gallery .mp-card__desc { font-size: 24px; margin-bottom: 24px; }
	.mp-card--gallery-brand .mp-card__media--brand { height: 284px; max-width: 496px; margin: 0 auto 32px; }

	/* ---- Explicit per-tab grids: OS3 / Pros / RPD / Dental Study Model (~2.5x).
	   Like the gallery cards, these fixed-px media/row sizes need explicit 4K
	   values; the base .mp-card 4K rules only scale padding/text, leaving the
	   image boxes tiny otherwise. */
	.mp-grid--rh240 { grid-auto-rows: minmax(480px, auto); }
	.mp-grid--explicit .mp-card__media:not(.mp-card__media--pedo) { height: 220px; }
	.mp-grid--explicit .mp-card--brand .mp-card__media { height: 260px; }
	.mp-grid--explicit .mp-card--hr .mp-card__media { height: 400px; }
	.mp-grid--explicit .mp-card--brand .mp-card__media--brand { max-width: 520px; }
	/* Dental Study Model single centered card (2× of the 580×… base) */
	.mp-card--dsm { width: 1160px; min-height: 680px; }
	.mp-grid--explicit .mp-card--dsm .mp-card__media { height: 400px; }
	.mp-grid--explicit .mp-card--brand .mp-card__media--brand { max-width: 650px; }
	.mp-grid--explicit .mp-card--hr .mp-card__media { height: 500px; }
	.mp-grid--explicit .mp-card--dsm .mp-card__media { height: 500px; }
	.mp-card--teeth2 .mp-card__media { gap: 25px; }
	.mp-card--dsm { width: 1450px; min-height: 850px; }
	/* OS3 (Pros) desc column scaled 2× (243→486 @ 12→24) so it wraps as the
	   design at 4K too. */
	.mp-card--os3pros .mp-card__desc { max-width: 486px; font-size: 24px; }

	/* ---- Endo grid tabs: X2 / Real T / Endo 3DP / E-Block (2× the base) ----
	   At a uniform 2× the cards keep the Figma 318×280 → 636×560 landscape shape;
	   4 cards (636×4 + 32×3 gaps) fill the 2640 block exactly, 3/1-card tabs
	   center, matching the design. */
	.mp-grid--endo { gap: 32px; }
	.mp-grid--endo .mp-card { max-width: 636px; min-height: 560px; }
	.mp-grid--endo .mp-card__media { height: 280px !important; }
	.mp-grid--endo .mp-card__title { font-size: 28px; margin-bottom: 16px; }
	.mp-grid--endo .mp-card__desc { font-size: 24px; line-height: 1.4; margin-bottom: 24px; }
	.mp-grid--endo .mp-cart { font-size: 28px; }
	.mp-card--res .mp-card__media img { max-height: 152px !important; }
	/* Endo "More Videos & Resources" 6-card row (2× the base #endo widths). */
	#endo .mp-res { flex-basis: 440px; }
	#endo .mp-res--pdf { flex-basis: 360px; }
	#endo .mp-res__thumb { height: 264px; }

	/* ---- Pedo section: white cards with light-blue image boxes (2× base) ---- */
	.mp-grid--pedo { grid-auto-rows: 384px; }
	.mp-card--pedo { padding: 48px; }
	.mp-card--pedo-feature .mp-card__body { margin-bottom: 32px; }
	.mp-card--pedo-h { gap: 32px; }
	.mp-card--pedo-single { width: 1304px; min-height: 440px; }

	/* ---- Corner card (Endo 3DP two-teeth): scale the top-right offsets ---- */
	.mp-card--corner .mp-card__media { top: 32px; right: 40px; }

	/* ---- More Videos & Resources (2× base) ---- */
	.mp-resources { margin-top: 64px; }
	.mp-resources__head { padding-top: 56px; margin-bottom: 40px; }
	.mp-resources__head h3 { margin-bottom: 12px; font-size: 36px; }
	.mp-resources__head p { font-size: 26px; }
	.mp-resources__grid { gap: 32px; --res-video-w: 572px; --res-pdf-w: 400px; }
	.mp-res__thumb { height: 320px; border-radius: 20px; }
	.mp-res__play { width: 92px; height: 92px; font-size: 36px; }
	.mp-res__title { margin: 24px 0 16px; font-size: 26px; }
	.mp-res__btn {
		padding: 14px 44px;
		border-radius: 16px;
		font-size: 26px;
	}

	/* ---- Shared header (ported from homepage.css body.ft-page) ---- */
	body.mp-page .shop-header__brand img { width: 388px; }
	body.mp-page .shop-nav__link {
		gap: 18px;
		padding: 20px 26px;
		font-size: 33px;
	}
	body.mp-page .shop-nav__caret { font-size: 31px; }
	body.mp-page .shop-header__actions { gap: 31px; }
	body.mp-page .shop-header__actions a,
	body.mp-page .shop-header__icon-btn,
	body.mp-page .shop-header__search-trigger {
		width: 88px;
		height: 88px;
		font-size: 44px;
	}
	/* (Desktop search bar + dropdown 4K scaling now lives in header.css so it
	   applies to every page, not just this one.) */

	/* ---- Shared footer (ported from homepage.css body.ft-page) ---- */
	body.mp-page .shop-footer__main { padding: 158px 0; }
	body.mp-page .shop-footer__grid { gap: 220px; }
	body.mp-page .shop-footer__brand { max-width: 810px; }
	body.mp-page .shop-footer__brand img { width: 360px; margin-bottom: 35px; }
	body.mp-page .shop-footer__brand p,
	body.mp-page .shop-footer__column a { font-size: 35px; }
	body.mp-page .shop-footer__column h3 { margin-bottom: 26px; font-size: 40px; }
	body.mp-page .shop-footer__bar-inner { gap: 53px; padding: 62px 0; }
	body.mp-page .shop-footer__policies { gap: 106px; }
	body.mp-page .shop-footer__policies a { font-size: 35px; }
	body.mp-page .shop-footer__youtube img { height: 62px; }
}