/* ============================================================
   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;
}
.mp-card--feature .mp-card__media { min-height: 180px; }
.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. 2× of the 180px base (which fits at 1080p), so it fits here too. */
	.mp-card--feature .mp-card__media { min-height: 360px; }
	.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; }
}