/* ============================================================
   ModuPRO Series page — Figma node 76:11563.
   Built on the shared .ft-* foundation (css/new/foundation.css): shared
   tokens (--ft-blue/--ft-blue-subtle/--ft-text/--ft-muted/--ft-border),
   shell, section rhythm, .ft-accent and buttons come from the foundation;
   this sheet keeps the page-only tokens, the body.mp-page-scoped deltas
   from the foundation defaults, and the genuinely unique hero / tab /
   card-grid / resources rules (.mp-*).
   Font: Montserrat
   ============================================================ */
:root {
	--mp-bg: #F7F7F9;
	--mp-radius: 16px;
}

.mp-page {
	margin: 0;
	background: var(--mp-bg);
	color: var(--ft-text);
	font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
/* Section content block: 1320px at a 15.625% gutter (300px on the 1920 design,
   Figma sections at x=300). Foundation caps --ft-shell at 1480px; the old
   .mp-shell computed min(1320px, 100% - 80px), restated here on the page's
   unique body class so it also outranks foundation's own media re-declarations
   (e.g. the ≤380px 40px-gutter step). */
body.mp-page .ft-main {
	--ft-shell: min(1320px, 100% - 80px);
}

/* ---- Buttons ---- */
/* .ft-btn matches the old .mp-btn except: the foundation draws a 1.5px
   transparent border (the old button had none — 3px size difference), the
   primary label was #fff (foundation: #f6f6f6), and this page keeps its
   hover shade + transition. text-decoration is reset globally in core.css. */
body.mp-page .ft-btn {
	border: 0;
	transition: background .15s ease, transform .15s ease;
}
body.mp-page .ft-btn--primary { color: #fff; }
body.mp-page .ft-btn--primary:hover { background: #1f96e8; }

/* ============================================================
   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 .ft-shell {
		width: min(100% - 48px, 1200px);
		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(--ft-text);
}
.mp-hero__badge img { width: 19px; height: 19px; }
.mp-hero__title {
	margin: 0;
	font-size: 36px;
	line-height: 44px;
	font-weight: 700;
}
/* Lead + description sit tighter than the copy grid's 24px gap. */
.mp-hero__text {
	display: grid;
	gap: 8px;
}
.mp-hero__lead {
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	color: var(--ft-text);
}
.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(--ft-muted);
}
/* 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). */
.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
   ============================================================ */
/* This page's sections are 56px (foundation: 80px, stepping 64@990/48@680).
   Body-scoped so the base value beats foundation's media steps at every width;
   the page's own ≤990 40px rule (mobile block below) then wins by source
   order. The scroll margin matches charlie/licensure/accessory.css and
   useHashScroll's offset, so a header-menu jump made on this page (router
   scroll, honors scroll-margin) lands where one from another page does. */
body.mp-page .ft-section { padding: 56px 0; scroll-margin-top: calc(var(--shop-header-height, 96px) + 12px); }
/* 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;
}
/* Heading trio deltas from the foundation (weight 600 + uppercase come from
   .ft-eyebrow; weight 700 + text color from .ft-title): this page's eyebrow is
   13px muted with letterspacing and the browser-default line-height (the old
   rule never set one — foundation's 1.2 must be cancelled), its title 26px. */
body.mp-page .ft-eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: normal;
	letter-spacing: .08em;
	color: var(--ft-muted);
}
body.mp-page .ft-title {
	font-size: 26px;
	line-height: 1.2;
}
.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(--ft-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
	white-space: nowrap;
}
.mp-tab:hover { color: var(--ft-text); }
.mp-tab.is-active {
	color: var(--ft-blue);
	border-bottom-color: var(--ft-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(--ft-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(--ft-border);
	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(--ft-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(--ft-muted);
}
.mp-cart {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ft-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-grid horizontal cards (RPD / Denture): the explicit media rule below
   makes the image box `flex: 0 0 auto`, so its width comes from the img — and
   the img's `width: 100%` of that box is circular. Chrome resolves it from the
   110px height × aspect ratio; Safari takes the natural width (rpd.png = 1140px),
   which shoves the text past the card's `overflow: hidden` and squeezes it to one
   word per line. Derive the width from the height so both engines agree. */
@media (min-width: 991px) {
	.mp-grid--explicit .mp-card--horizontal:not(.mp-card--hr) .mp-card__media img { width: auto; max-width: 100%; }
}

/* ---- 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; }
/* Figma 76:11636 — desktop pins the PDF icon to the card's top-right corner
   (~51x63). Below 990 the endo grid wraps and the base center rule keeps the
   icon centered, per the brief. */
@media (min-width: 991px) {
	.mp-grid--endo .mp-card--res .mp-card__media { justify-content: flex-end !important; }
	.mp-card--res .mp-card__media img { max-height: 63px !important; }
}

/* ===== 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; }

/* brand tile as a real video player: poster fills the frame + centered play
   button, matching the .mp-res--video thumbs. The two-class selector beats the
   80px-tall .mp-card__media--brand img rule above and the grid width caps. */
/* No white card frame — the box wraps the video tightly (height:auto) so there
   is no background, shadow, or letterbox; just the player at its own ratio. */
.mp-card__media--brand.mp-card__media--video {
	position: relative;
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	/* Wrap the poster tightly — the media is a flex child that otherwise grows
	   (flex:1 1 auto) to fill the card, leaving the play button centered on the
	   empty space below the image instead of on the video. */
	flex: 0 0 auto;
	min-height: 0;
	align-self: start;
	padding: 0;
	background: transparent;
	box-shadow: none;
	overflow: hidden;
	cursor: pointer;
}
.mp-grid--explicit .mp-card--brand .mp-card__media--brand.mp-card__media--video {
	width: 100%;
	max-width: none;
	/* Beat the explicit-grid `.mp-card--brand .mp-card__media { height:130px }`
	   rule, which otherwise crops the poster. Let it wrap the video like the
	   non-explicit ModuPRO One tile. */
	height: auto;
	align-self: start;
}
.mp-card__media--brand.mp-card__media--video img {
	display: block;
	max-width: 100%;
	max-height: none;
	width: 100%;
	height: auto;
	border-radius: 10px;
}
.mp-card__media--brand.mp-card__media--video .mp-res__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	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;
}

/* 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(--ft-border); margin-bottom: 20px; }
.mp-resources__head h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--ft-text); }
.mp-resources__head p { margin: 0; font-size: 13px; font-weight: 500; color: var(--ft-muted); }
/* 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(--ft-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(--ft-blue);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ft-blue);
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.mp-res__btn:hover { background: var(--ft-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) {
	body.mp-page .ft-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; }
	/* …but a real video player wraps its poster (no fixed height → no crop). */
	.mp-card--brand .mp-card__media--brand.mp-card__media--video,
	.mp-grid--explicit .mp-card--brand .mp-card__media--brand.mp-card__media--video { height: auto; align-self: start; }

	/* 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. Also outranks foundation's
	   ≤380px 40px-gutter re-declaration. */
	body.mp-page .ft-main { --ft-shell: min(1320px, 100% - 32px); }
}