/**
 * MON PORTÉ Products — Premium minimal card design system (Phase 1.1).
 *
 * Strictly .mpp-* scoped. No bare selectors, no overrides of Flatsome or
 * WooCommerce markup. Every default lives here (= option defaults); PHP
 * emits per-instance rules only for explicitly saved values (columns,
 * gap, ratio, radius) and attribute-driven modifier classes for the rest.
 *
 * Defaults mirror the inspector: Editorial Minimal, left aligned, title
 * 2 lines, normal content gap, cover fit, theme media background, small
 * swatches, no hover.
 */

/* ------------------------------------------------------------------ */
/* Section + track                                                    */
/* ------------------------------------------------------------------ */

.mpp-sec {
	display: block;
	--mpp-ph: 16px;
	--mpp-pv: 16px;
	--mpp-mgap: 12px;
}

@media (max-width: 549px) {
	.mpp-sec {
		--mpp-ph: 10px;
		--mpp-pv: 12px;
		--mpp-mgap: 10px;
	}
}

/* Per-style spacing fallbacks (explicit owner values always win: the
   #id-scoped per-instance rules beat these class rules). */
.mpp-style-framed {
	--mpp-ph: 16px;
	--mpp-pv: 18px;
	--mpp-mgap: 14px;
}

.mpp-track {
	display: grid;
	grid-template-columns: repeat(var(--mpp-cols, 4), minmax(0, 1fr));
	gap: var(--mpp-gap, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 849px) {
	.mpp-track {
		grid-template-columns: repeat(var(--mpp-cols, 3), minmax(0, 1fr));
		gap: var(--mpp-gap, 20px);
	}
}

@media (max-width: 549px) {
	.mpp-track {
		grid-template-columns: repeat(var(--mpp-cols, 2), minmax(0, 1fr));
		gap: var(--mpp-gap, 12px);
	}
}

/* ------------------------------------------------------------------ */
/* Card                                                               */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Card surface (preset classes are fallback; explicit vars win)      */
/* ------------------------------------------------------------------ */

.mpp-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	border: var(--mpp-border-w, 0px) solid var(--mpp-border-c, transparent);
	border-radius: var(--mpp-card-radius, 0px);
	background-color: var(--mpp-card-bg, transparent);
}

.mpp-cbg-theme {
	--mpp-card-bg: #fffdf9;
}

.mpp-style-framed {
	--mpp-border-w: 1px;
	--mpp-border-c: rgba(31, 30, 27, 0.12);
	--mpp-card-radius: 14px;
	--mpp-card-bg: #fffdf9;
}

.mpp-card-clip .mpp-card {
	overflow: hidden;
}

.mpp-shadow-soft .mpp-card {
	box-shadow: 0 10px 26px -20px rgba(31, 30, 27, 0.4);
}

.mpp-shadow-medium .mpp-card {
	box-shadow: 0 22px 44px -24px rgba(31, 30, 27, 0.45);
}

/* Equalized: grid stretch + full-height bodies bottom-align price/CTA.
   Natural: cards keep their own height. */
.mpp-eq .mpp-track {
	align-items: stretch;
}

.mpp-eq .mpp-card {
	height: 100%;
}

.mpp-natural .mpp-track {
	align-items: start;
}

/* Card hover surface (separate from image hover). */
.mpp-ch-lift .mpp-card {
	transition: transform 250ms ease, box-shadow 250ms ease;
}

.mpp-ch-lift .mpp-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px -18px rgba(31, 30, 27, 0.45);
}

.mpp-ch-bg .mpp-card {
	transition: background-color 250ms ease;
}

.mpp-ch-bg .mpp-card:hover {
	background-color: rgba(31, 30, 27, 0.025);
}

.mpp-ch-border .mpp-card {
	transition: border-color 250ms ease;
}

.mpp-ch-border .mpp-card:hover {
	border-color: rgba(31, 30, 27, 0.45);
}

/* Image Focus: larger media emphasis, tighter minimal metadata. */
.mpp-style-focus .mpp-title {
	font-size: 17px;
}

/* ------------------------------------------------------------------ */
/* Media                                                              */
/* ------------------------------------------------------------------ */

.mpp-media {
	position: relative;
	box-sizing: border-box;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	padding: var(--mpp-mpad, 0px);
	background-color: #f3efe7;
	border-bottom: var(--mpp-sepw, 0px) solid var(--mpp-sepc, rgba(31, 30, 27, 0.12));
}

.mpp-mbg-transparent .mpp-media {
	background-color: transparent;
}

.mpp-imglink {
	display: block;
	width: 100%;
	height: 100%;
}

.mpp-imglink img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--mpp-objpos, center);
	transform: scale(var(--mpp-imgscale, 1));
	transition: transform var(--mpp-xdur, 300ms) ease;
}

.mpp-obj-top .mpp-imglink img {
	--mpp-objpos: top;
}

.mpp-obj-bottom .mpp-imglink img {
	--mpp-objpos: bottom;
}

.mpp-obj-left .mpp-imglink img {
	--mpp-objpos: left;
}

.mpp-obj-right .mpp-imglink img {
	--mpp-objpos: right;
}

.mpp-fit-contain .mpp-imglink img {
	object-fit: contain;
}

/* Crossfade stack: secondary + JS preview ride above the main image.
   One robust fade; speed via --mpp-xdur (0/180/300/450ms). */
/* Absolutely positioned against the media padding box; inset by the
   media padding so overlays align exactly with the main image. */
.mpp-secondary,
.mpp-preview {
	position: absolute;
	top: var(--mpp-mpad, 0px);
	left: var(--mpp-mpad, 0px);
	width: calc(100% - (var(--mpp-mpad, 0px) * 2));
	height: calc(100% - (var(--mpp-mpad, 0px) * 2));
	object-fit: cover;
	object-position: var(--mpp-objpos, center);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--mpp-xdur, 300ms) ease;
}

.mpp-fit-contain .mpp-secondary,
.mpp-fit-contain .mpp-preview {
	object-fit: contain;
}

.mpp-ih-secondary .mpp-card:hover .mpp-secondary {
	opacity: 1;
}

.mpp-preview.mpp-is-on {
	opacity: 1;
}

.mpp-imglink:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* Sale badge + wishlist ride on parent visuals; only placement here. */
.mpp-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	pointer-events: none;
}

.mpp-wishlist {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
}

/* Minimal heart: transparent, quiet, strong hit area, always visible
   (never hover-gated, so touch keeps full functionality). Class names
   untouched — YITH behavior binds to them. */
.mpp-wishlist .wishlist-icon {
	position: static;
}

.mpp-wishlist .wishlist-button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #1f1e1b;
	box-shadow: none;
}

.mpp-wishlist .wishlist-button.button:hover {
	background: rgba(255, 253, 249, 0.9);
	color: #60373d;
}

.mpp-wishlist .wishlist-button.button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mpp-wishlist .wishlist-button .icon,
.mpp-wishlist .wishlist-button i {
	font-size: 20px;
	width: auto;
	height: auto;
	margin: 0;
}

.mpp-oos {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	padding: 8px 10px;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center;
	background-color: rgba(31, 30, 27, 0.85);
	color: #ffffff;
	pointer-events: none;
}

.mpp-is-oos .mpp-imglink img {
	opacity: 0.75;
}

/* ------------------------------------------------------------------ */
/* Body rhythm (single gap token, three presets)                      */
/* ------------------------------------------------------------------ */

/* Body owns its full inset: --mpp-mgap separates media from content
   (the body's top padding), --mpp-ph/--mpp-pv own side/bottom edges.
   One contract, no double-counting, no per-element margin hacks. */
.mpp-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
	padding: var(--mpp-mgap) var(--mpp-ph) var(--mpp-pv);
	gap: var(--mpp-cgap, 0);
}

.mpp-gap-compact {
	--mpp-cgap: 6px;
}

.mpp-gap-normal {
	--mpp-cgap: 10px;
}

.mpp-gap-airy {
	--mpp-cgap: 16px;
}

.mpp-body > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Content alignment (wishlist stays top-right of media). */
.mpp-align-center .mpp-body {
	text-align: center;
	align-items: center;
}

.mpp-align-right .mpp-body {
	text-align: right;
	align-items: flex-end;
}

.mpp-align-center .mpp-swatches {
	justify-content: center;
}

.mpp-align-right .mpp-swatches {
	justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* Title (headline family via the h3 + theme heading styles)          */
/* ------------------------------------------------------------------ */

.mpp-title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: #1f1e1b;
	overflow-wrap: break-word;
	min-height: calc(1.4em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mpp-lines-1 .mpp-title {
	-webkit-line-clamp: 1;
	min-height: calc(1.4em * 1);
}

.mpp-lines-all .mpp-title {
	display: block;
	min-height: 0;
}

.mpp-title a {
	color: inherit;
	text-decoration: none;
}

.mpp-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mpp-title a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Category (quiet secondary metadata)                                */
/* ------------------------------------------------------------------ */

.mpp-category {
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: #8a8272;
}

/* ------------------------------------------------------------------ */
/* Price (clean, Woo HTML styled only)                                */
/* ------------------------------------------------------------------ */

.mpp-price {
	font-size: 14.5px;
	font-weight: 500;
	color: #1f1e1b;
	/* UI Polish: card price joins the Manrope UI/price voice (PDP
	price precedent); fallbacks mirror the PDP purchase element. */
	font-family: "Manrope", -apple-system, "Segoe UI", sans-serif;
}

/* UI Polish: keep the currency symbol from abutting the amount
(observed: 990.00د.م.). margin-inline-end lands between symbol and
digits for both prefix (LTR) and RTL-wrapped symbols; harmless
elsewhere. Scoped to MON PORTÉ price components only. */
.mpp-price .woocommerce-Price-currencySymbol,
.mppc-price .woocommerce-Price-currencySymbol {
	margin-inline-end: 0.18em;
}

.mpp-nolink .mpp-price {
	margin-top: auto;
}

.mpp-price del {
	font-weight: 400;
	color: #8a8272;
}

.mpp-price ins {
	text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Static swatch indicators                                           */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Static swatch indicators — shape / style / size / gap system      */
/* ------------------------------------------------------------------ */

.mpp-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	min-height: 18px;
	/* Pre-deploy review: hit halos below tile the row exactly
	(half the row gap each side), so adjacent targets meet but
	never overlap — every tap resolves to its nearest dot. */
	--mpp-halo: 3.5px;
}

.mpp-swg-compact .mpp-swatches {
	gap: 5px;
	min-height: 16px;
	--mpp-halo: 2.5px;
}

.mpp-swg-airy .mpp-swatches {
	gap: 10px;
	min-height: 20px;
	--mpp-halo: 5px;
}

.mpp-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mpp-sw, 16px);
	height: var(--mpp-sw, 16px);
	border: 1px solid rgba(31, 30, 27, 0.28);
	border-radius: 50%;
	overflow: hidden;
	background-color: #fffdf9;
}

.mpp-sw-medium .mpp-swatch {
	--mpp-sw: 20px;
}

.mpp-sw-large .mpp-swatch {
	--mpp-sw: 24px;
}

.mpp-sw-large .mpp-swatches {
	min-height: 26px;
}

/* Custom swatch size: the section carries an inline --mpp-sw (8–48px).
   Dots and the +N chip inherit it via var(); only the row min-height
   needs a scoped rule so the row tracks the dot. Preset output
   (small/medium/large) never carries this class and is unchanged. */
.mpp-sw-custom .mpp-swatches {
	min-height: calc(var(--mpp-sw, 16px) + 2px);
}

/* Shapes. */
.mpp-sh-rounded .mpp-swatch,
.mpp-sh-rounded .mpp-swatch__fill {
	border-radius: 6px;
}

.mpp-sh-square .mpp-swatch,
.mpp-sh-square .mpp-swatch__fill {
	border-radius: 0;
}

/* Styles: solid is the base above. Ring keeps the real color readable
   inside a quiet outline; soft seats it on a restrained tint. */
.mpp-ss-ring .mpp-swatch {
	padding: 2px;
	border-width: 1.5px;
	border-color: rgba(31, 30, 27, 0.45);
	background-color: transparent;
}

.mpp-ss-soft .mpp-swatch {
	padding: 3px;
	border-color: transparent;
	background-color: rgba(31, 30, 27, 0.07);
}

.mpp-swatch__fill {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
}

.mpp-swatch__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Image visual mode: dedicated stable square thumbnail. The wrapper
   keeps the fixed --mpp-sw box (size control still applies); padding
   from ring/soft styles is neutralized so the thumbnail never
   squashes or stretches, and the image always cover-crops 1:1.
   Shape radius (circle/rounded/square) clips cleanly via overflow. */
.mpp-swatch--image {
	flex: none;
	padding: 0;
	aspect-ratio: 1 / 1;
}

.mpp-ss-ring .mpp-swatch--image,
.mpp-ss-soft .mpp-swatch--image {
	padding: 0;
}

.mpp-swatch--image .mpp-swatch__img {
	flex: none;
	aspect-ratio: 1 / 1;
}

/* Collapsed dots use the real hidden attribute (author display rules
   override the UA [hidden] style, so this scoped rule is required).
   Hidden dots leave layout and Tab order entirely. */
.mpp-swatch[hidden] {
	display: none;
}

/* Overflow disclosure chip (+N / collapse). Same row height as a
   swatch, slightly wider for the count; quiet premium treatment that
   follows shape modifiers. Global button geometry is neutralized so
   the chip never grows the row. */
.mpp-swatch-overflow {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--mpp-sw, 16px);
	min-width: 0;
	min-height: 0;
	padding: 0 8px;
	margin: 0;
	box-sizing: border-box;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: #1f1e1b;
	background-color: #fffdf9;
	border: 1px solid rgba(31, 30, 27, 0.28);
	border-radius: 999px;
	cursor: pointer;
}

.mpp-sh-rounded .mpp-swatch-overflow {
	border-radius: 6px;
}

.mpp-sh-square .mpp-swatch-overflow {
	border-radius: 0;
}

button.mpp-swatch-overflow:hover {
	border-color: rgba(31, 30, 27, 0.6);
}

button.mpp-swatch-overflow:focus-visible {
	outline: 2px solid #1f1e1b;
	outline-offset: 2px;
}

.mpp-swatch-overflow[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Card CTA (permalink text link, not Add to Cart)                    */
/* ------------------------------------------------------------------ */

.mpp-card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 4px;
	align-self: flex-start;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: #1f1e1b;
	text-decoration: underline;
	text-decoration-color: rgba(31, 30, 27, 0.35);
	text-underline-offset: 4px;
}

.mpp-align-center .mpp-card-link {
	align-self: center;
}

.mpp-align-right .mpp-card-link {
	align-self: flex-end;
}

.mpp-card-link:hover {
	text-decoration-color: currentColor;
}

.mpp-card-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mpp-card-link__arrow {
	line-height: 1;
	transition: transform 150ms ease;
}

.mpp-card-link:hover .mpp-card-link__arrow {
	transform: translateX(3px);
}

/* CTA style variants (underline is the base above). */
.mpp-cta-plain .mpp-card-link {
	text-decoration: none;
}

.mpp-cta-arrow .mpp-card-link {
	text-decoration: none;
	gap: 10px;
}

.mpp-cta-arrow .mpp-card-link__arrow {
	font-size: 1.1em;
}

.mpp-cta-pill .mpp-card-link {
	text-decoration: none;
	border: 1px solid rgba(31, 30, 27, 0.3);
	border-radius: 999px;
	padding: 8px 16px;
}

/* CTA hover behaviors (glide is the base above). */
.mpp-cta-none .mpp-card-link:hover .mpp-card-link__arrow {
	transform: none;
}

.mpp-cta-none .mpp-card-link:hover {
	text-decoration-color: rgba(31, 30, 27, 0.35);
}

.mpp-cta-grow .mpp-card-link {
	text-decoration-color: transparent;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 250ms ease;
}

.mpp-cta-grow .mpp-card-link:hover {
	text-decoration-color: transparent;
	background-size: 100% 1px;
}

/* ------------------------------------------------------------------ */
/* Motion (desktop pointers only, motion-safe)                        */
/* ------------------------------------------------------------------ */

@media (hover: hover) {
	.mpp-ih-zoom .mpp-card:hover .mpp-imglink > img:first-child {
		transform: scale(calc(var(--mpp-imgscale, 1) * 1.05));
	}
}

@media (prefers-reduced-motion: reduce) {
	.mpp-imglink img,
	.mpp-secondary,
	.mpp-preview,
	.mpp-ch-lift .mpp-card,
	.mpp-ch-bg .mpp-card,
	.mpp-ch-border .mpp-card,
	.mpp-card-link__arrow,
	.mpp-cta-grow .mpp-card-link {
		transition: none;
	}

	.mpp-ih-zoom .mpp-card:hover .mpp-imglink > img:first-child,
	.mpp-ch-lift .mpp-card:hover {
		transform: none;
		box-shadow: none;
	}

	.mpp-ih-secondary .mpp-card:hover .mpp-secondary {
		opacity: 0;
	}
}

/* Wishlist presentation variants (YITH classes untouched). */
.mpp-wl-left .mpp-wishlist {
	right: auto;
	left: 8px;
}

.mpp-wl-circle .mpp-wishlist .wishlist-button.button {
	background: rgba(255, 253, 249, 0.92);
	border: 1px solid rgba(31, 30, 27, 0.12);
}

.mpp-wl-soft .mpp-wishlist .wishlist-button.button {
	background: rgba(31, 30, 27, 0.06);
}

.mpp-wl-small .mpp-wishlist .wishlist-button.button {
	min-width: 32px;
	min-height: 32px;
}

.mpp-wl-small .wishlist-button .icon,
.mpp-wl-small .wishlist-button i {
	font-size: 16px;
}

.mpp-wl-large .mpp-wishlist .wishlist-button.button {
	min-width: 48px;
	min-height: 48px;
}

.mpp-wl-large .wishlist-button .icon,
.mpp-wl-large .wishlist-button i {
	font-size: 24px;
}

/* Badge presentation + deterministic wishlist collision handling.
   Badge defaults top-left; when both claim top-right the badge steps
   below the heart instead of overlapping. */
.mpp-badge-right .mpp-badge {
	left: auto;
	right: 10px;
}

.mpp-badge-right:not(.mpp-wl-left) .mpp-badge {
	top: 56px;
}

.mpp-badge-pill .mpp-badge .onsale {
	border-radius: 999px;
	padding-left: 12px;
	padding-right: 12px;
}

.mpp-badge-soft .mpp-badge .onsale {
	background-color: rgba(31, 30, 27, 0.07);
	color: #1f1e1b;
	border: 1px solid rgba(31, 30, 27, 0.14);
}

/* Interactive swatch buttons: same visuals as spans, subtle
   hover/focus feedback, quiet active ring. No color change.
   Geometry normalization: the global button rule sets
   min-width:24px + min-height:2.5em, which would stretch preview
   swatches taller than static spans. Neutralize both so Swatch
   Interaction changes behavior only, never visible size. */
button.mpp-swatch {
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
	margin: 0;
	min-width: 0;
	min-height: 0;
	font: inherit;
	cursor: pointer;
	/* Pre-deploy review: exact tiling instead of 44px halos. At the
	compact 24px visual / 29px pitch, 44px targets must overlap and
	create ~7px strips that select the wrong neighbor; tiling gives
	29–34px targets (density-dependent, all above the 24px minimum)
	with boundaries at gap midpoints. Layout, gaps and row height
	are unchanged, so 320px/390px overflow behavior holds. A true
	44px target needs a 44px pitch (owner Swatch Gap control). */
	position: relative;
	overflow: visible;
}

button.mpp-swatch::before {
	content: "";
	position: absolute;
	inset: calc(var(--mpp-halo, 3.5px) * -1);
}

/* Inner clipping (replaces the button-level overflow:hidden above):
color fills already self-clip; image thumbs inherit the button
shape so circle/rounded/square all keep clipping cleanly. */
.mpp-swatch--image .mpp-swatch__img {
	border-radius: inherit;
}

/* Overflow chip (+N): same tiling halo (no overflow set here,
so the halo applies directly). Visual size unchanged. */
.mpp-swatch-overflow {
	position: relative;
}

.mpp-swatch-overflow::before {
	content: "";
	position: absolute;
	inset: calc(var(--mpp-halo, 3.5px) * -1);
}

button.mpp-swatch:hover {
	border-color: rgba(31, 30, 27, 0.6);
}

button.mpp-swatch:focus-visible {
	outline: 2px solid #1f1e1b;
	outline-offset: 2px;
}

button.mpp-swatch[aria-pressed="true"],
button.mpp-swatch.mpp-is-selected {
	border-color: #1f1e1b;
	box-shadow: 0 0 0 1.5px #fffdf9, 0 0 0 3px rgba(31, 30, 27, 0.55);
}

/* Body background split (editorial split-color cards). */
.mpp-bbg-inherit .mpp-body {
	background-color: var(--mpp-card-bg, transparent);
}

.mpp-bbg-custom .mpp-body {
	background-color: var(--mpp-bodybg, transparent);
}

/* Mobile density: compact falls back tighter on small screens only.
   Explicit owner values (#id rules) always win over these fallbacks. */
@media (max-width: 549px) {
	.mpp-dense-compact {
		--mpp-ph: 8px;
		--mpp-pv: 10px;
		--mpp-mgap: 8px;
		--mpp-cgap: 6px;
	}

	.mpp-dense-compact .mpp-card-link {
		font-size: 12px;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile robustness (2-col stays valid, never overridden)            */
/* ------------------------------------------------------------------ */

.mpp-card,
.mpp-body,
.mpp-title,
.mpp-price {
	min-width: 0;
}

.mpp-card-link {
	overflow-wrap: anywhere;
}

.mpp-wishlist .wishlist-popup {
	max-width: calc(100vw - 32px);
}