/**
 * Motta Product Elements — front-end styles.
 *
 * Design tokens are declared here and re-pointed at the theme's own variables
 * by MPE_Motta::inline_theme_bridge(), so widgets inherit the shop palette.
 */

:root {
	--mpe-primary: #7a1420;
	--mpe-primary-hover: #5e0f19;
	--mpe-accent: #c8a04a;
	--mpe-text: #1c1c1c;
	--mpe-muted: #6b6b6b;
	--mpe-border: #e6e2dc;
	--mpe-surface: #ffffff;
	--mpe-surface-alt: #faf7f2;
	--mpe-success: #1a7f4b;
	--mpe-danger: #c0392b;
	--mpe-radius: 8px;
	--mpe-gap: 16px;
	--mpe-star-color: #e8a33d;
	--mpe-star-empty: #dcd7cf;
	--mpe-star-size: 16px;
}

/* ---------------------------------------------------------------- shared */

[class^="mpe-"] *,
[class*=" mpe-"] * {
	box-sizing: border-box;
}

.mpe-icon {
	flex: 0 0 auto;
	vertical-align: middle;
}

.mpe-placeholder {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
	border: 1px dashed var(--mpe-border);
	border-radius: var(--mpe-radius);
	background: var(--mpe-surface-alt);
	color: var(--mpe-muted);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

.mpe-placeholder__title {
	font-weight: 600;
	color: var(--mpe-text);
}

.mpe-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.mpe-pill--in-stock {
	color: var(--mpe-success);
}

.mpe-pill--out-of-stock {
	color: var(--mpe-danger);
}

.mpe-section-head {
	margin-bottom: 24px;
}

.mpe-section-head__eyebrow {
	display: block;
	margin-bottom: 6px;
	color: var(--mpe-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mpe-section-head__title {
	margin: 0 0 8px;
	color: var(--mpe-text);
	line-height: 1.25;
}

.mpe-section-head__subtitle {
	margin: 0;
	color: var(--mpe-muted);
	max-width: 62ch;
}

.mpe-section-head[style*="center"] .mpe-section-head__subtitle {
	margin-inline: auto;
}

/* Star rating -------------------------------------------------------- */

.mpe-stars {
	position: relative;
	display: inline-block;
	width: calc(var(--mpe-star-size) * 5 + 8px);
	height: var(--mpe-star-size);
	overflow: hidden;
	flex: 0 0 auto;
	background-image: var(--mpe-star-bg-empty);
	background-repeat: repeat-x;
	background-size: calc(var(--mpe-star-size) + 2px) var(--mpe-star-size);
	--mpe-star-bg-empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23dcd7cf' d='M12 2.6l2.9 6 6.5.9-4.7 4.6 1.1 6.5L12 17.5 6.2 20.6l1.1-6.5L2.6 9.5l6.5-.9z'/%3E%3C/svg%3E");
}

.mpe-stars__fill {
	position: absolute;
	inset: 0 auto 0 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e8a33d' d='M12 2.6l2.9 6 6.5.9-4.7 4.6 1.1 6.5L12 17.5 6.2 20.6l1.1-6.5L2.6 9.5l6.5-.9z'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: calc(var(--mpe-star-size) + 2px) var(--mpe-star-size);
}

.mpe-stars--sm {
	--mpe-star-size: 13px;
}

/* ------------------------------------------------------------ breadcrumb */

.mpe-breadcrumb {
	color: var(--mpe-muted);
	font-size: 13px;
	line-height: 1.6;
}

.mpe-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.mpe-breadcrumb a:hover {
	color: var(--mpe-primary);
}

.mpe-breadcrumb__sep {
	display: inline-block;
	margin: 0 8px;
	opacity: 0.55;
}

.mpe-breadcrumb-uppercase-yes .mpe-breadcrumb {
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 11px;
}

/* ---------------------------------------------------------------- title */

.mpe-title__eyebrow {
	display: block;
	margin-bottom: 8px;
	color: var(--mpe-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mpe-title__text {
	margin: 0;
	color: var(--mpe-text);
	line-height: 1.2;
}

.mpe-title__text a {
	color: inherit;
	text-decoration: none;
}

/* Info lines: any number of product details above or below the title. */

.mpe-title__info {
	color: var(--mpe-muted);
	font-size: 13px;
	line-height: 1.5;
}

.mpe-title__info--above {
	margin-bottom: 8px;
	color: var(--mpe-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mpe-title__info--below {
	margin-top: 8px;
}

.mpe-title__line {
	display: block;
}

.mpe-title__info--stack .mpe-title__line + .mpe-title__line {
	margin-top: var(--mpe-title-line-gap, 4px);
}

/* Inline lines follow the widget's text-align, so alignment keeps working. */
.mpe-title__info--inline .mpe-title__line {
	display: inline;
}

.mpe-title__info--inline .mpe-title__line + .mpe-title__line {
	margin-left: var(--mpe-title-line-gap, 0.75em);
}

.mpe-title__divider {
	margin: 0 var(--mpe-title-line-gap, 0.5em);
	opacity: 0.6;
}

.mpe-title__label {
	font-weight: 600;
}

.mpe-title__value a {
	color: inherit;
	text-decoration: none;
}

.mpe-title__value a:hover {
	text-decoration: underline;
}

.mpe-title__stock.is-in-stock {
	color: var(--mpe-success);
}

.mpe-title__stock.is-out-of-stock {
	color: var(--mpe-danger);
}

/* --------------------------------------------------------------- rating */

.mpe-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.mpe-rating__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mpe-muted);
	font-size: 14px;
}

.mpe-rating__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mpe-rating__link:hover {
	color: var(--mpe-primary);
}

/* ---------------------------------------------------------------- price */

.mpe-price__row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
}

.mpe-price__active {
	color: var(--mpe-primary);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

.mpe-price .mpe-price__active del,
.mpe-price .mpe-price__active del .amount,
.mpe-price .mpe-price__active del bdi {
	color: var(--mpe-muted);
	font-size: 0.62em;
	font-weight: 400;
	text-decoration: line-through;
	opacity: 1;
}

/*
 * Themes often paint a highlight behind the price. When the widget's
 * "Remove Theme Price Highlight" switch is on, strip it back to plain text.
 */
.mpe-price-clean--yes .mpe-price__active,
.mpe-price-clean--yes .mpe-price__active ins,
.mpe-price-clean--yes .mpe-price__active del,
.mpe-price-clean--yes .mpe-price__active bdi,
.mpe-price-clean--yes .mpe-price__active .amount {
	background: none;
	box-shadow: none;
	padding: 0;
	border: 0;
}

.mpe-price__active ins {
	text-decoration: none;
}

.mpe-price-regular--no .mpe-price__active del {
	display: none;
}

.mpe-price--stacked .mpe-price__row {
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 2px;
}

/*
 * Belt and braces for the savings stripper: some themes inject their own
 * "Save: ..." into the price with JavaScript, after PHP has already run.
 * Scoped inside the active price so this plugin's own badge is untouched.
 */
.mpe-price--no-theme-save .mpe-price__active [class*="save"],
.mpe-price--no-theme-save .mpe-price__active [class*="saving"],
.mpe-price--no-theme-save .mpe-price__active [class*="discount"] {
	display: none;
}

.mpe-price__saving {
	padding: 3px 9px;
	border-radius: 4px;
	background: var(--mpe-success);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.mpe-price__note {
	margin: 6px 0 0;
	color: var(--mpe-muted);
	font-size: 13px;
}

/* -------------------------------------------------------------- excerpt */

.mpe-excerpt__body {
	color: var(--mpe-text);
	line-height: 1.65;
}

.mpe-excerpt__body > :last-child {
	margin-bottom: 0;
}

.mpe-excerpt--collapsible .mpe-excerpt__body {
	position: relative;
	overflow: hidden;
	max-height: 120px;
	transition: max-height 0.28s ease;
}

.mpe-excerpt--collapsible .mpe-excerpt__body::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 42px;
	background: linear-gradient(to bottom, transparent, var(--mpe-surface));
	pointer-events: none;
}

.mpe-excerpt--collapsible.is-expanded .mpe-excerpt__body {
	max-height: none;
}

.mpe-excerpt--collapsible.is-expanded .mpe-excerpt__body::after {
	display: none;
}

.mpe-excerpt__toggle {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mpe-primary);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------- gallery */

.mpe-gallery {
	display: grid;
	gap: var(--mpe-gallery-gap, 12px);
	max-width: var(--mpe-gallery-max, none);
	--mpe-thumb-size: 84px;
	--mpe-thumb-active: var(--mpe-primary);
}

.mpe-gallery__stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--mpe-radius);
	background: var(--mpe-surface-alt);
}

/* In-flow sizing element, used by the fixed layout only. */
.mpe-gallery__sizer {
	display: none;
}

.mpe-gallery__slide {
	display: none;
}

.mpe-gallery__slide.is-active {
	display: block;
}

.mpe-gallery__figure {
	position: relative;
	overflow: hidden;
}

.mpe-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--mpe-image-fit, cover);
	object-position: var(--mpe-image-x, 50%) var(--mpe-image-y, 50%);
	transition: transform 0.2s ease-out;
}

.mpe-gallery__figure {
	height: 100%;
}

.mpe-gallery__figure.is-zooming .mpe-gallery__image {
	transition: none;
}

.mpe-gallery__badges {
	position: absolute;
	z-index: 3;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
	pointer-events: none;
}

.mpe-badge {
	padding: 4px 10px;
	border-radius: 3px;
	background: var(--mpe-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mpe-badge--sale {
	background: var(--mpe-danger);
}

.mpe-badge--custom {
	background: var(--mpe-accent);
	color: #2a1a05;
}

.mpe-gallery__hint {
	position: absolute;
	z-index: 3;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 11px;
	letter-spacing: 0.04em;
	pointer-events: none;
}

/*
 * Themes routinely set button { width: 100%; height: auto; padding: … },
 * which stretched these into tall ovals. Pin every box property explicitly
 * and raise specificity above a bare element selector.
 */
.mpe-gallery .mpe-gallery__nav {
	position: absolute;
	z-index: 3;
	top: 50%;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--mpe-nav-size, 38px);
	height: var(--mpe-nav-size, 38px);
	min-width: var(--mpe-nav-size, 38px);
	min-height: var(--mpe-nav-size, 38px);
	max-width: var(--mpe-nav-size, 38px);
	max-height: var(--mpe-nav-size, 38px);
	margin: 0;
	padding: 0;
	line-height: 0;
	box-shadow: none;
	transform: translateY(-50%);
	border: 1px solid var(--mpe-border);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--mpe-text);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.mpe-gallery .mpe-gallery__nav svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.mpe-gallery__stage:hover .mpe-gallery__nav,
.mpe-gallery__nav:focus-visible {
	opacity: 1;
}

.mpe-gallery .mpe-gallery__nav--prev {
	left: 12px;
	transform: translateY(-50%) rotate(90deg);
}

.mpe-gallery .mpe-gallery__nav--next {
	right: 12px;
	transform: translateY(-50%) rotate(-90deg);
}

.mpe-gallery__video {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 240px;
	background: #111;
}

.mpe-gallery__video-poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.75;
}

.mpe-gallery__video-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	min-width: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
	color: #fff;
	cursor: pointer;
}

.mpe-gallery__video iframe,
.mpe-gallery__video video {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.mpe-gallery__thumbs {
	display: flex;
	gap: 8px;
	overflow: auto;
	scrollbar-width: thin;
}

/*
 * Thumbnails are <button>s, and Motta styles every button with
 * min-width: 160px, display: inline-flex, a 60px line-height and a shadow.
 * A width can never beat a larger min-width, so each of those is pinned.
 */
.mpe-gallery .mpe-gallery__thumb {
	position: relative;
	display: block;
	box-sizing: border-box;
	flex: 0 0 var(--mpe-thumb-size);
	width: var(--mpe-thumb-size);
	min-width: 0;
	max-width: none;
	height: var(--mpe-thumb-height, var(--mpe-thumb-size));
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 0;
	line-height: 0;
	box-shadow: none;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--mpe-radius);
	background: var(--mpe-surface-alt);
	cursor: pointer;
}

.mpe-gallery .mpe-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--mpe-thumb-fit, cover);
}

.mpe-gallery__thumb.is-active {
	border-color: var(--mpe-thumb-active);
}

.mpe-gallery__thumb-video {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
}

/*
 * Thumbnail placement. Elementor's responsive prefix_class emits
 * mpe-gallery-thumbs-<value> for desktop and mpe-gallery-thumbs-tablet-<value> /
 * mpe-gallery-thumbs-mobile-<value> for the smaller breakpoints, so each
 * breakpoint gets its own block below. The device name is joined with a
 * hyphen; up to 1.6.2 these selectors used an underscore and never matched.
 */

.mpe-gallery-thumbs-left .mpe-gallery {
	grid-template-columns: var(--mpe-thumb-size) minmax(0, 1fr);
}

.mpe-gallery-thumbs-left .mpe-gallery__thumbs {
	order: -1;
	flex-direction: column;
	max-height: 520px;
}

.mpe-gallery-thumbs-right .mpe-gallery {
	grid-template-columns: minmax(0, 1fr) var(--mpe-thumb-size);
}

.mpe-gallery-thumbs-right .mpe-gallery__thumbs {
	flex-direction: column;
	max-height: 520px;
}

.mpe-gallery-thumbs-none .mpe-gallery,
.mpe-gallery-thumbs-bottom .mpe-gallery {
	grid-template-columns: minmax(0, 1fr);
}

.mpe-gallery-thumbs-none .mpe-gallery__thumbs {
	display: none;
}

@media (max-width: 1024px) {
	.mpe-gallery-thumbs-tablet-left .mpe-gallery {
		grid-template-columns: var(--mpe-thumb-size) minmax(0, 1fr);
	}

	.mpe-gallery-thumbs-tablet-left .mpe-gallery__thumbs {
		order: -1;
		flex-direction: column;
		max-height: 520px;
	}

	.mpe-gallery-thumbs-tablet-right .mpe-gallery {
		grid-template-columns: minmax(0, 1fr) var(--mpe-thumb-size);
	}

	.mpe-gallery-thumbs-tablet-right .mpe-gallery__thumbs {
		flex-direction: column;
		max-height: 520px;
	}

	.mpe-gallery-thumbs-tablet-bottom .mpe-gallery,
	.mpe-gallery-thumbs-tablet-none .mpe-gallery {
		grid-template-columns: minmax(0, 1fr);
	}

	.mpe-gallery-thumbs-tablet-bottom .mpe-gallery__thumbs {
		order: 1;
		flex-direction: row;
		max-height: none;
	}

	.mpe-gallery-thumbs-tablet-none .mpe-gallery__thumbs {
		display: none;
	}
}

@media (max-width: 767px) {
	.mpe-gallery-thumbs-mobile-left .mpe-gallery {
		grid-template-columns: var(--mpe-thumb-size) minmax(0, 1fr);
	}

	.mpe-gallery-thumbs-mobile-left .mpe-gallery__thumbs {
		order: -1;
		flex-direction: column;
		max-height: 420px;
	}

	.mpe-gallery-thumbs-mobile-right .mpe-gallery {
		grid-template-columns: minmax(0, 1fr) var(--mpe-thumb-size);
	}

	.mpe-gallery-thumbs-mobile-right .mpe-gallery__thumbs {
		flex-direction: column;
		max-height: 420px;
	}

	.mpe-gallery-thumbs-mobile-bottom .mpe-gallery,
	.mpe-gallery-thumbs-mobile-none .mpe-gallery {
		grid-template-columns: minmax(0, 1fr);
	}

	.mpe-gallery-thumbs-mobile-bottom .mpe-gallery__thumbs {
		order: 1;
		flex-direction: row;
		max-height: none;
	}

	.mpe-gallery-thumbs-mobile-none .mpe-gallery__thumbs {
		display: none;
	}
}

/*
 * A gallery with nothing to put in the thumbnail track (a single-image
 * product, or thumbnails switched off) must not keep reserving that column,
 * or the main image lands in it. Selector is deliberately more specific than
 * the layout rules above so it wins at every breakpoint.
 */

[class*="mpe-gallery-thumbs"] .mpe-gallery.mpe-gallery--no-thumbs {
	grid-template-columns: minmax(0, 1fr);
}

.mpe-gallery--no-thumbs .mpe-gallery__thumbs {
	display: none;
}

/*
 * Fixed gallery layout — the default.
 *
 * The stage is a fixed-shape box and the active slide fills it absolutely,
 * so an image's own dimensions can never change the widget's height. That
 * dependency is what let headings slide over single-image products. Images
 * are contained, never cropped, and thumbnails have one fixed size at every
 * breakpoint.
 *
 * !important is scoped to this mode only. It beats the selector CSS that a
 * widget saved under Custom mode may still carry (thumbnail size, image
 * ratio, main image height), so existing pages snap to the fixed layout
 * without anyone re-editing them.
 */

.mpe-gallery--fixed {
	--mpe-gallery-ratio: 3 / 4;
	--mpe-fixed-thumb: 72px;
	--mpe-fixed-thumb-gap: 8px;
	--mpe-thumb-size: var(--mpe-fixed-thumb) !important;
	--mpe-thumb-height: auto !important;
	--mpe-thumb-fit: contain !important;
	--mpe-image-fit: contain !important;
}

.mpe-gallery--fixed .mpe-gallery__main {
	min-width: 0;
}

.mpe-gallery--fixed .mpe-gallery__stage {
	position: relative !important;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	/* A full-width container would otherwise make a 3:4 frame taller than
	   the screen. The image stays whole; it just gains side margins. */
	max-height: 90vh;
	aspect-ratio: var(--mpe-gallery-ratio) !important;
	overflow: hidden !important;
}

/*
 * Every slide below is absolutely positioned, so the stage has no intrinsic
 * width of its own. Elementor containers set to Wrap size their widgets at
 * fit-content width before stretching them; with nothing to measure, the
 * gallery fitted to 0px, aspect-ratio turned that into 0px height, and the
 * next section (title, price, Buy Now) was drawn over the image.
 *
 * This hidden SVG sits in flow and fills the stage. A replaced element with a
 * percentage width contributes 0 to min-content and its 2000px natural width
 * to max-content, so fit-content always resolves to the available width.
 */
.mpe-gallery--fixed .mpe-gallery__stage > .mpe-gallery__sizer {
	display: block !important;
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	visibility: hidden;
	pointer-events: none;
}

.mpe-gallery--fixed .mpe-gallery__slide.is-active,
.mpe-gallery--fixed .mpe-gallery__figure,
.mpe-gallery--fixed .mpe-gallery__video {
	position: absolute;
	inset: 0;
	height: auto;
	min-height: 0;
}

.mpe-gallery--fixed .mpe-gallery__image,
.mpe-gallery--fixed .mpe-gallery__video-poster img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: contain !important;
	object-position: var(--mpe-image-x, 50%) var(--mpe-image-y, 50%);
}

.mpe-gallery--fixed .mpe-gallery__video iframe,
.mpe-gallery--fixed .mpe-gallery__video video {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
}

/* Thumbnails: one fixed tile size, same shape as the stage, whole image. */

.mpe-gallery--fixed .mpe-gallery__thumbs {
	flex-wrap: wrap;
	gap: var(--mpe-fixed-thumb-gap);
	overflow: visible;
}

.mpe-gallery.mpe-gallery--fixed .mpe-gallery__thumb {
	/* auto, not a 72px basis: in the beside-image column the main axis is
	   vertical, so a fixed basis pins the height and flattens tiles square. */
	display: block !important;
	flex: 0 0 auto;
	width: var(--mpe-fixed-thumb) !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	padding: 0 !important;
	aspect-ratio: var(--mpe-gallery-ratio);
}

.mpe-gallery.mpe-gallery--fixed .mpe-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain !important;
}

/*
 * Beside-image thumbnails: one column exactly as tall as the stage, scrolling
 * if there are more images than fit. height:0 + min-height:100% lets the grid
 * row take its height from the stage alone.
 */
.mpe-gallery-thumbs-left .mpe-gallery--fixed .mpe-gallery__thumbs,
.mpe-gallery-thumbs-right .mpe-gallery--fixed .mpe-gallery__thumbs {
	flex-wrap: nowrap;
	height: 0;
	min-height: 100%;
	max-height: none;
	overflow-x: hidden;
	overflow-y: auto;
}

@media (max-width: 1024px) {
	.mpe-gallery-thumbs-tablet-bottom .mpe-gallery--fixed .mpe-gallery__thumbs {
		flex-wrap: wrap;
		height: auto;
		min-height: 0;
		overflow: visible;
	}

	.mpe-gallery-thumbs-tablet-left .mpe-gallery--fixed .mpe-gallery__thumbs,
	.mpe-gallery-thumbs-tablet-right .mpe-gallery--fixed .mpe-gallery__thumbs {
		flex-wrap: nowrap;
		height: 0;
		min-height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}
}

@media (max-width: 767px) {
	.mpe-gallery-thumbs-mobile-bottom .mpe-gallery--fixed .mpe-gallery__thumbs {
		flex-wrap: wrap;
		height: auto;
		min-height: 0;
		overflow: visible;
	}

	.mpe-gallery-thumbs-mobile-left .mpe-gallery--fixed .mpe-gallery__thumbs,
	.mpe-gallery-thumbs-mobile-right .mpe-gallery--fixed .mpe-gallery__thumbs {
		flex-wrap: nowrap;
		height: 0;
		min-height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}
}

/* Lightbox */

.mpe-lightbox {
	position: fixed;
	z-index: 99999;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(12, 10, 8, 0.9);
}

.mpe-lightbox img {
	max-width: min(1100px, 92vw);
	max-height: 88vh;
	object-fit: contain;
}

.mpe-lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
}

/* ------------------------------------------------------------- swatches */

.mpe-swatches {
	display: flex;
	flex-direction: column;
	gap: 18px;
	--mpe-swatch-size: 36px;
	--mpe-swatch-gap: 8px;
	--mpe-swatch-active: var(--mpe-primary);
}

.mpe-swatches__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.mpe-swatches__label {
	color: var(--mpe-text);
	font-size: 14px;
	font-weight: 600;
}

.mpe-swatches__selected:not(:empty)::before {
	content: ": ";
	font-weight: 400;
}

.mpe-swatches__selected {
	color: var(--mpe-muted);
	font-weight: 400;
}

.mpe-swatches__guide {
	color: var(--mpe-primary);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mpe-swatches__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mpe-swatch-gap);
}

.mpe-swatch {
	position: relative;
	display: inline-grid;
	place-items: center;
	min-width: var(--mpe-swatch-size);
	height: var(--mpe-swatch-size);
	padding: 0;
	border: 1px solid var(--mpe-border);
	border-radius: 4px;
	background: var(--mpe-surface);
	color: var(--mpe-text);
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mpe-swatch--button {
	padding: 0 14px;
	font-weight: 600;
}

.mpe-swatch--color {
	background-color: var(--mpe-swatch-color, #ccc);
	border-radius: 50%;
}

.mpe-swatch--image {
	background-image: var(--mpe-swatch-image);
	background-size: cover;
	background-position: center;
}

.mpe-swatch:hover {
	border-color: var(--mpe-swatch-active);
}

.mpe-swatch.is-selected {
	border-color: var(--mpe-swatch-active);
	box-shadow: 0 0 0 2px var(--mpe-surface), 0 0 0 3px var(--mpe-swatch-active);
}

.mpe-swatch.is-unavailable {
	cursor: not-allowed;
}

.mpe-swatches--fade .mpe-swatch.is-unavailable {
	opacity: 0.35;
}

.mpe-swatches--hide .mpe-swatch.is-unavailable {
	display: none;
}

.mpe-swatches--strike .mpe-swatch.is-unavailable {
	opacity: 0.6;
}

.mpe-swatches--strike .mpe-swatch.is-unavailable::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top left,
		transparent calc(50% - 1px),
		currentColor calc(50% - 1px),
		currentColor calc(50% + 1px),
		transparent calc(50% + 1px)
	);
	opacity: 0.5;
}

.mpe-swatches__reset {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mpe-muted);
	cursor: pointer;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------- add to cart */

.mpe-atc {
	--mpe-gap: 10px;
}

.mpe-atc form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mpe-gap);
	align-items: stretch;
	margin: 0;
}

.mpe-atc .quantity {
	flex: 0 0 auto;
}

.mpe-atc .single_add_to_cart_button,
.mpe-atc__buy-now {
	flex: 1 1 220px;
	min-height: 52px;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.mpe-atc .single_add_to_cart_button {
	background: var(--mpe-surface);
	border-color: var(--mpe-primary);
	color: var(--mpe-primary);
}

.mpe-atc .single_add_to_cart_button:hover {
	background: var(--mpe-primary);
	color: #fff;
}

.mpe-atc__buy-now {
	background: var(--mpe-primary);
	color: #fff;
}

.mpe-atc__buy-now:hover {
	background: var(--mpe-primary-hover);
}

.mpe-atc__buy-now--first {
	order: -1;
}

.mpe-atc-layout--stacked .mpe-atc form.cart {
	flex-direction: column;
}

.mpe-atc-layout--stacked .mpe-atc .quantity {
	align-self: flex-start;
}

.mpe-atc.mpe-atc--no-qty .quantity {
	display: none;
}

.mpe-atc--qty-stepper .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--mpe-border);
	border-radius: 4px;
	overflow: hidden;
}

.mpe-atc--qty-stepper .quantity input.qty {
	width: 48px;
	height: 50px;
	border: 0;
	text-align: center;
	-moz-appearance: textfield;
}

.mpe-atc--qty-stepper .quantity input.qty::-webkit-outer-spin-button,
.mpe-atc--qty-stepper .quantity input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.mpe-qty-step {
	width: 40px;
	height: 50px;
	border: 0;
	background: none;
	color: var(--mpe-text);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
}

.mpe-atc .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mpe-gap);
	width: 100%;
}

/* ------------------------------------------------------ quantity widget */

.mpe-quantity {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.mpe-quantity__label {
	color: var(--mpe-text);
	font-size: 14px;
	font-weight: 600;
}

.mpe-qty-label--inline .mpe-quantity {
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.mpe-qty-label--hidden .mpe-quantity__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.mpe-quantity__control {
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--mpe-border);
	border-radius: 4px;
	background: var(--mpe-surface);
	--mpe-qty-height: 50px;
}

.mpe-quantity .mpe-quantity__step {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--mpe-qty-height);
	height: var(--mpe-qty-height);
	min-width: var(--mpe-qty-height);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mpe-text);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
}

.mpe-quantity .mpe-quantity__step:hover {
	color: var(--mpe-primary);
}

.mpe-quantity .mpe-quantity__input {
	box-sizing: border-box;
	width: 56px;
	height: var(--mpe-qty-height);
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--mpe-border);
	border-right: 1px solid var(--mpe-border);
	background: transparent;
	color: var(--mpe-text);
	font-size: 15px;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.mpe-quantity__input::-webkit-outer-spin-button,
.mpe-quantity__input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.mpe-quantity__note {
	margin: 0;
	color: var(--mpe-muted);
	font-size: 12px;
}

/* ------------------------------------------------------------ countdown */

.mpe-countdown {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--mpe-border);
	border-radius: var(--mpe-radius);
	background: var(--mpe-surface-alt);
}

.mpe-countdown__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mpe-countdown__icon {
	color: var(--mpe-danger);
	display: inline-flex;
}

.mpe-countdown__label {
	color: var(--mpe-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mpe-countdown__timer {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mpe-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 52px;
	padding: 8px 6px;
	border-radius: 6px;
	background: var(--mpe-surface);
}

.mpe-countdown__value {
	color: var(--mpe-primary);
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.mpe-countdown__unit-label {
	color: var(--mpe-muted);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mpe-countdown__sep {
	color: var(--mpe-muted);
	font-weight: 700;
}

.mpe-countdown__expired {
	margin: 0;
	color: var(--mpe-muted);
	font-size: 14px;
}

.mpe-countdown.is-expired .mpe-countdown__timer {
	display: none;
}

/* ------------------------------------------------------------- scarcity */

.mpe-scarcity {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mpe-scarcity__line {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.mpe-scarcity__icon {
	color: var(--mpe-danger);
	display: inline-flex;
}

.mpe-scarcity__text {
	color: var(--mpe-danger);
	font-size: 14px;
	font-weight: 600;
}

.mpe-scarcity__bar {
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--mpe-border);
}

.mpe-scarcity__bar-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--mpe-danger);
	transition: width 0.4s ease;
}

/* Sold out / on backorder. */

.mpe-scarcity--sold-out .mpe-scarcity__text {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mpe-scarcity__note {
	margin: 0;
	color: var(--mpe-muted);
	font-size: 13px;
}

.mpe-scarcity--backorder .mpe-scarcity__icon,
.mpe-scarcity--backorder .mpe-scarcity__text {
	color: var(--mpe-text);
}

/* -------------------------------------------------------------- viewers */

.mpe-viewers {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mpe-muted);
	font-size: 14px;
}

.mpe-viewers__icon {
	display: inline-flex;
}

.mpe-viewers__count {
	color: var(--mpe-text);
	font-weight: 700;
}

.mpe-viewers__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mpe-success);
}

.mpe-viewers-pulse--yes .mpe-viewers__dot {
	animation: mpe-pulse 2s ease-in-out infinite;
}

@keyframes mpe-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.75); }
}

/* ------------------------------------------------------------------ eta */

.mpe-eta {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border: 1px dashed var(--mpe-border);
	border-radius: var(--mpe-radius);
}

.mpe-eta__icon {
	color: var(--mpe-success);
	display: inline-flex;
	padding-top: 1px;
}

.mpe-eta__text {
	color: var(--mpe-text);
	font-size: 14px;
	line-height: 1.5;
}

.mpe-eta__value {
	color: var(--mpe-success);
	font-weight: 700;
}

/* -------------------------------------------------------------- pincode */

.mpe-pincode {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mpe-pincode__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mpe-text);
	font-size: 14px;
	font-weight: 600;
}

.mpe-pincode__icon {
	display: inline-flex;
	color: var(--mpe-primary);
}

.mpe-pincode__field {
	display: flex;
	align-items: stretch;
	max-width: 340px;
	overflow: hidden;
	border: 1px solid var(--mpe-border);
	border-radius: 4px;
}

.mpe-pincode__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 12px;
	border: 0;
	background: transparent;
	color: var(--mpe-text);
	font-size: 14px;
}

.mpe-pincode__input:focus {
	outline: 2px solid var(--mpe-primary);
	outline-offset: -2px;
}

.mpe-pincode__submit {
	padding: 0 18px;
	border: 0;
	background: var(--mpe-primary);
	color: #fff;
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mpe-pincode__submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.mpe-pincode__result {
	margin: 0;
	font-size: 13px;
	min-height: 1.2em;
}

.mpe-pincode__result.is-success {
	color: var(--mpe-success);
}

.mpe-pincode__result.is-error {
	color: var(--mpe-danger);
}

.mpe-pincode__hint {
	margin: 0;
	color: var(--mpe-muted);
	font-size: 12px;
}

/* ------------------------------------------------------------------ emi */

.mpe-emi {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--mpe-border);
	border-radius: var(--mpe-radius);
}

.mpe-emi__icon {
	color: var(--mpe-primary);
	display: inline-flex;
	padding-top: 2px;
}

.mpe-emi__body p {
	margin: 0;
}

.mpe-emi__main {
	color: var(--mpe-text);
	font-size: 15px;
	font-weight: 700;
}

.mpe-emi__sub {
	color: var(--mpe-muted);
	font-size: 13px;
}

.mpe-emi__disclaimer {
	margin-top: 4px !important;
	color: var(--mpe-muted);
	font-size: 11px;
	line-height: 1.5;
}

/* ------------------------------------------------------------- payments */

.mpe-payments {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.mpe-payments__label {
	color: var(--mpe-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mpe-payments__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mpe-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mpe-payments__item {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border: 1px solid var(--mpe-border);
	border-radius: 4px;
	color: var(--mpe-text);
	font-size: 12px;
	font-weight: 600;
}

.mpe-payments__logo {
	display: block;
	width: auto;
	height: 24px;
}

.mpe-payments__note {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0;
	color: var(--mpe-muted);
	font-size: 12px;
}

/* ------------------------------------------------------------- wishlist */

.mpe-wishlist {
	display: flex;
}

.mpe-wishlist__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border: 1px solid var(--mpe-border);
	border-radius: 4px;
	background: transparent;
	color: var(--mpe-text);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
}

.mpe-wishlist-full--yes .mpe-wishlist__button {
	width: 100%;
}

.mpe-wishlist__icon {
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-9.3A4 4 0 0 1 12 7a4 4 0 0 1 7 3.7c0 4.9-7 9.3-7 9.3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-9.3A4 4 0 0 1 12 7a4 4 0 0 1 7 3.7c0 4.9-7 9.3-7 9.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mpe-wishlist__button.is-active {
	color: var(--mpe-primary);
	border-color: currentColor;
}

/* --------------------------------------------------------------- sticky */

.mpe-sticky {
	position: fixed;
	z-index: 9990;
	left: 0;
	right: 0;
	background: var(--mpe-surface);
	box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.1);
	transform: translateY(110%);
	transition: transform 0.28s ease;
}

.mpe-sticky--bottom {
	bottom: 0;
}

.mpe-sticky--top {
	top: 0;
	transform: translateY(-110%);
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.1);
}

.mpe-sticky.is-visible {
	transform: translateY(0);
}

.mpe-sticky__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 20px;
}

.mpe-sticky__product {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.mpe-sticky__image img {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	object-fit: cover;
}

.mpe-sticky__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mpe-sticky__title {
	overflow: hidden;
	color: var(--mpe-text);
	font-size: 14px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mpe-sticky__price {
	color: var(--mpe-primary);
	font-size: 15px;
	font-weight: 700;
}

.mpe-sticky__price del {
	color: var(--mpe-muted);
	font-size: 0.8em;
	font-weight: 400;
}

.mpe-sticky__button {
	flex: 0 0 auto;
	padding: 12px 28px;
	border: 0;
	border-radius: 4px;
	background: var(--mpe-primary);
	color: #fff;
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.mpe-sticky-hide-mobile--yes .mpe-sticky {
		display: none;
	}

	.mpe-sticky__image,
	.mpe-sticky .mpe-stars {
		display: none;
	}
}

/* ---------------------------------------------------------------- trust */

.mpe-trust {
	display: grid;
	grid-template-columns: repeat(var(--mpe-cols, 3), minmax(0, 1fr));
	gap: var(--mpe-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mpe-trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.mpe-trust__link {
	display: contents;
	color: inherit;
	text-decoration: none;
}

.mpe-trust__icon {
	display: grid;
	place-items: center;
	color: var(--mpe-primary);
}

.mpe-trust__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mpe-trust__title {
	color: var(--mpe-text);
	font-size: 13px;
	font-weight: 700;
}

.mpe-trust__subtitle {
	color: var(--mpe-muted);
	font-size: 12px;
}

.mpe-trust-layout--inline .mpe-trust__item {
	flex-direction: row;
	align-items: center;
	text-align: left;
}

.mpe-trust-dividers--yes .mpe-trust__item + .mpe-trust__item {
	border-left: 1px solid var(--mpe-border);
	padding-left: var(--mpe-gap);
}

/* ----------------------------------------------------------- highlights */

.mpe-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mpe-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mpe-highlights__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--mpe-border);
	border-radius: 999px;
	color: var(--mpe-text);
	font-size: 13px;
}

.mpe-highlights__icon {
	display: inline-flex;
	color: var(--mpe-success);
}

.mpe-highlights-style--list .mpe-highlights {
	flex-direction: column;
}

.mpe-highlights-style--list .mpe-highlights__item,
.mpe-highlights-style--columns .mpe-highlights__item {
	padding: 0;
	border: 0;
	border-radius: 0;
}

.mpe-highlights-style--columns .mpe-highlights {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------------------------------------------------------------- stats */

.mpe-stats {
	display: grid;
	grid-template-columns: repeat(var(--mpe-cols, 4), minmax(0, 1fr));
	gap: var(--mpe-gap);
}

.mpe-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.mpe-stats__item + .mpe-stats__item {
	border-left: 1px solid var(--mpe-border);
}

.mpe-stats__icon {
	color: var(--mpe-accent);
	display: inline-flex;
}

.mpe-stats__value {
	color: var(--mpe-primary);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
}

.mpe-stats__caption {
	color: var(--mpe-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- promo */

.mpe-promo {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	border-radius: var(--mpe-radius);
	background-color: var(--mpe-surface-alt);
	background-size: cover;
	background-position: center;
}

.mpe-promo__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 12, 8, 0.55);
}

.mpe-promo__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mpe-promo__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 36px;
}

.mpe-promo-image--right .mpe-promo,
.mpe-promo-image--left .mpe-promo {
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.mpe-promo-image--left .mpe-promo__media {
	order: -1;
}

.mpe-promo__eyebrow {
	color: var(--mpe-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.mpe-promo__title {
	margin: 0;
	color: var(--mpe-text);
	font-size: clamp(22px, 3vw, 34px);
	line-height: 1.2;
}

.mpe-promo__text {
	margin: 0;
	color: var(--mpe-muted);
	max-width: 52ch;
}

.mpe-promo-image--background .mpe-promo__title,
.mpe-promo-image--background .mpe-promo__text {
	color: #fff;
}

.mpe-promo__button {
	display: inline-block;
	padding: 13px 28px;
	border-radius: 4px;
	background: var(--mpe-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.mpe-promo__button:hover {
	background: var(--mpe-primary-hover);
	color: #fff;
}

@media (max-width: 767px) {
	.mpe-promo-image--right .mpe-promo,
	.mpe-promo-image--left .mpe-promo {
		grid-template-columns: 1fr;
	}

	.mpe-promo__body {
		padding: 24px;
	}
}

/* ------------------------------------------------------------ accordion */

.mpe-accordion__panel {
	border-bottom: 1px solid var(--mpe-border);
}

.mpe-accordion__panel:first-child {
	border-top: 1px solid var(--mpe-border);
}

.mpe-accordion__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.mpe-accordion__header {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 16px 4px;
	border: 0;
	background: none;
	color: var(--mpe-text);
	cursor: pointer;
	text-align: left;
}

.mpe-accordion__icon {
	display: inline-flex;
	color: var(--mpe-primary);
}

.mpe-accordion__title {
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 700;
}

.mpe-accordion__toggle {
	display: inline-flex;
	color: var(--mpe-muted);
	transition: transform 0.2s ease;
}

.mpe-accordion--chevron .mpe-accordion__panel.is-open .mpe-accordion__toggle {
	transform: rotate(180deg);
}

.mpe-accordion--plus .mpe-accordion__panel.is-open .mpe-accordion__toggle {
	transform: rotate(45deg);
}

.mpe-accordion__body-inner {
	padding: 0 4px 20px;
	color: var(--mpe-text);
	line-height: 1.65;
}

.mpe-accordion__body-inner > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------- features */

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

.mpe-features__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mpe-features-layout--inline .mpe-features__item {
	flex-direction: row;
	align-items: flex-start;
}

.mpe-features__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--mpe-surface-alt);
	color: var(--mpe-primary);
}

.mpe-features__media img {
	display: block;
	width: 64px;
	height: auto;
}

.mpe-features__number {
	color: var(--mpe-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.mpe-features__title {
	margin: 0;
	color: var(--mpe-text);
	font-size: 16px;
	line-height: 1.3;
}

.mpe-features__text {
	margin: 0;
	color: var(--mpe-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* -------------------------------------------------------------- compare */

.mpe-compare-wrap {
	overflow-x: auto;
}

.mpe-compare {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.mpe-compare__caption {
	margin-bottom: 12px;
	color: var(--mpe-muted);
	font-size: 13px;
	text-align: left;
}

.mpe-compare th,
.mpe-compare td {
	padding: 14px 16px;
	border: 1px solid var(--mpe-border);
	vertical-align: top;
}

.mpe-compare thead th {
	background: var(--mpe-surface-alt);
	color: var(--mpe-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mpe-compare__ours {
	background: rgba(122, 20, 32, 0.04);
}

.mpe-compare td {
	color: var(--mpe-muted);
	font-size: 14px;
	line-height: 1.55;
}

.mpe-compare__mark {
	display: inline-flex;
	margin-right: 8px;
	vertical-align: -3px;
}

.mpe-compare__mark--yes {
	color: var(--mpe-success);
}

.mpe-compare__mark--no {
	color: var(--mpe-danger);
}

@media (max-width: 600px) {
	.mpe-compare,
	.mpe-compare tbody,
	.mpe-compare tr,
	.mpe-compare td,
	.mpe-compare th {
		display: block;
		width: 100%;
	}

	.mpe-compare thead {
		display: none;
	}

	.mpe-compare tr {
		margin-bottom: 16px;
		border: 1px solid var(--mpe-border);
	}

	.mpe-compare td,
	.mpe-compare th {
		border: 0;
		border-bottom: 1px solid var(--mpe-border);
	}

	.mpe-compare td[data-label]::before {
		display: block;
		margin-bottom: 4px;
		color: var(--mpe-muted);
		content: attr(data-label);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}
}

/* ---------------------------------------------------------------- specs */

.mpe-specs__group {
	margin: 20px 0 8px;
	color: var(--mpe-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mpe-specs__group:first-child {
	margin-top: 0;
}

.mpe-specs__list {
	margin: 0;
}

.mpe-specs__row {
	display: grid;
	grid-template-columns: minmax(120px, 34%) 1fr;
	gap: 12px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--mpe-border);
}

.mpe-specs-layout--stacked .mpe-specs__row {
	grid-template-columns: 1fr;
	gap: 2px;
}

.mpe-specs__label {
	margin: 0;
	color: var(--mpe-muted);
	font-size: 13px;
}

.mpe-specs__value {
	margin: 0;
	color: var(--mpe-text);
	font-size: 14px;
}

/* ---------------------------------------------------------------- cards */

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

.mpe-strip-display--scroll .mpe-strip {
	display: flex;
	overflow-x: auto;
	padding-bottom: 8px;
	scroll-snap-type: x mandatory;
}

.mpe-strip-display--scroll .mpe-card {
	flex: 0 0 calc((100% - (var(--mpe-cols, 4) - 1) * var(--mpe-gap)) / var(--mpe-cols, 4));
	scroll-snap-align: start;
}

.mpe-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.mpe-card__link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.mpe-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--mpe-radius);
	background: var(--mpe-surface-alt);
}

.mpe-card__media img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.3s ease;
}

.mpe-card:hover .mpe-card__media img {
	transform: scale(1.04);
}

.mpe-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 2px 8px;
	border-radius: 3px;
	background: var(--mpe-danger);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mpe-card__title {
	color: var(--mpe-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.mpe-card__price {
	color: var(--mpe-primary);
	font-size: 14px;
	font-weight: 700;
}

.mpe-card__price del {
	color: var(--mpe-muted);
	font-size: 0.85em;
	font-weight: 400;
}

.mpe-card__button {
	align-self: flex-start;
	margin-top: 4px;
	padding: 8px 16px;
	border-radius: 4px;
	background: var(--mpe-surface-alt);
	color: var(--mpe-text);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.mpe-strip-display--list .mpe-strip {
	grid-template-columns: 1fr;
}

.mpe-strip-display--list .mpe-card {
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.mpe-strip-display--list .mpe-card__link {
	flex-direction: row;
	align-items: center;
	flex: 1 1 auto;
}

.mpe-strip-display--list .mpe-card__media {
	flex: 0 0 72px;
	width: 72px;
}

/* ------------------------------------------------- frequently bought */

.mpe-fbt {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	padding: 20px;
	border: 1px solid var(--mpe-border);
	border-radius: var(--mpe-radius);
}

@media (min-width: 900px) {
	.mpe-fbt {
		grid-template-columns: 1fr 300px;
		align-items: start;
	}
}

.mpe-fbt__items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mpe-fbt__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1 1 200px;
}

.mpe-fbt__item.is-excluded {
	opacity: 0.45;
}

.mpe-fbt__check {
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: 2;
}

.mpe-fbt__media img {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 4px;
	object-fit: cover;
}

.mpe-fbt__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mpe-fbt__tag {
	color: var(--mpe-accent);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mpe-fbt__title {
	color: var(--mpe-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.mpe-fbt__price {
	color: var(--mpe-primary);
	font-size: 13px;
	font-weight: 700;
}

.mpe-fbt__price del {
	color: var(--mpe-muted);
	font-weight: 400;
}

.mpe-fbt__plus {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	color: var(--mpe-muted);
}

.mpe-fbt__summary {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border-radius: var(--mpe-radius);
	background: var(--mpe-surface-alt);
}

.mpe-fbt__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	color: var(--mpe-text);
	font-size: 13px;
}

.mpe-fbt__row--muted {
	color: var(--mpe-muted);
}

.mpe-fbt__row--muted [data-role] {
	text-decoration: line-through;
}

.mpe-fbt__row--discount {
	color: var(--mpe-success);
}

.mpe-fbt__total {
	padding-top: 8px;
	border-top: 1px solid var(--mpe-border);
	font-size: 15px;
	font-weight: 700;
}

.mpe-fbt__total-value {
	color: var(--mpe-primary);
	font-size: 20px;
}

.mpe-fbt__savings {
	margin: 0;
	color: var(--mpe-success);
	font-size: 13px;
	font-weight: 600;
}

.mpe-fbt__add {
	width: 100%;
	padding: 13px 20px;
	border: 1px solid var(--mpe-primary);
	border-radius: 4px;
	background: var(--mpe-primary);
	color: #fff;
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mpe-fbt__add--checkout {
	background: transparent;
	color: var(--mpe-primary);
}

.mpe-fbt__add[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.mpe-fbt__footnote {
	margin: 0;
	color: var(--mpe-muted);
	font-size: 11px;
	text-align: center;
}

.mpe-fbt__message {
	margin: 0;
	font-size: 13px;
	min-height: 1.1em;
}

.mpe-fbt__message.is-error {
	color: var(--mpe-danger);
}

.mpe-fbt__message.is-success {
	color: var(--mpe-success);
}

/* -------------------------------------------------------------- reviews */

.mpe-reviews {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mpe-reviews__summary {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	padding: 20px;
	border-radius: var(--mpe-radius);
	background: var(--mpe-surface-alt);
}

@media (min-width: 700px) {
	.mpe-reviews__summary {
		grid-template-columns: 200px 1fr;
		align-items: center;
	}
}

.mpe-reviews__score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.mpe-reviews__average {
	color: var(--mpe-text);
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
}

.mpe-reviews__count {
	color: var(--mpe-muted);
	font-size: 13px;
}

.mpe-reviews__bars {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mpe-reviews__bar-row {
	display: grid;
	grid-template-columns: 62px 1fr 36px;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--mpe-muted);
}

.mpe-reviews__bar {
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--mpe-border);
}

.mpe-reviews__bar-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--mpe-star-color);
}

.mpe-reviews__bar-count {
	text-align: right;
}

.mpe-reviews__list {
	display: grid;
	grid-template-columns: repeat(var(--mpe-cols, 1), minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mpe-review {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--mpe-border);
}

.mpe-review__head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.mpe-review__avatar img {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.mpe-review__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-right: auto;
}

.mpe-review__author {
	color: var(--mpe-text);
	font-size: 14px;
	font-weight: 700;
}

.mpe-review__verified {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--mpe-success);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mpe-review__date {
	color: var(--mpe-muted);
	font-size: 12px;
}

.mpe-review__title {
	margin: 0;
	color: var(--mpe-text);
	font-size: 15px;
}

.mpe-review__body {
	color: var(--mpe-muted);
	font-size: 14px;
	line-height: 1.65;
}

.mpe-review__body p:last-child {
	margin-bottom: 0;
}

.mpe-reviews__more {
	align-self: center;
	padding: 12px 28px;
	border: 1px solid var(--mpe-border);
	border-radius: 4px;
	background: transparent;
	color: var(--mpe-text);
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mpe-reviews__empty {
	color: var(--mpe-muted);
}

/* ------------------------------------------------------- accessibility */

.mpe-swatch:focus-visible,
.mpe-gallery__thumb:focus-visible,
.mpe-accordion__header:focus-visible,
.mpe-fbt__add:focus-visible,
.mpe-reviews__more:focus-visible,
.mpe-excerpt__toggle:focus-visible {
	outline: 2px solid var(--mpe-primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mpe-viewers-pulse--yes .mpe-viewers__dot,
	.mpe-card__media img,
	.mpe-gallery__image,
	.mpe-sticky,
	.mpe-excerpt--collapsible .mpe-excerpt__body {
		transition: none;
		animation: none;
	}
}

/* Screen-reader text, in case the theme does not provide it. */
.mpe-reviews .screen-reader-text,
.mpe-swatches .screen-reader-text,
.mpe-fbt .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------ category carousel */

.mpe-cats {
	position: relative;
	--mpe-cols: 5;
	--mpe-gap: 24px;
	--mpe-cat-nav: 40px;
	--mpe-cat-fit: cover;
}

.mpe-cats__viewport {
	overflow: hidden;
}

.mpe-cats__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--mpe-cols) - 1) * var(--mpe-gap)) / var(--mpe-cols));
	gap: var(--mpe-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mpe-cats__item {
	margin: 0;
	min-width: 0;
}

.mpe-cats__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.mpe-cats__media {
	position: relative;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 1;
	border: 1px solid var(--mpe-border);
	background: var(--mpe-surface-alt);
}

.mpe-cats__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--mpe-cat-fit, cover);
	transition: transform 0.35s ease, opacity 0.25s ease;
}

/* Shapes */

.mpe-cats-shape--circle .mpe-cats__media,
.mpe-cats-shape--circle .mpe-cats__img {
	border-radius: 50%;
}

.mpe-cats-shape--rounded .mpe-cats__media,
.mpe-cats-shape--rounded .mpe-cats__img {
	border-radius: 14px;
}

/* Name and count */

.mpe-cats__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mpe-cats__name {
	color: var(--mpe-text);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.3;
	transition: color 0.2s ease;
}

.mpe-cats-caps--yes .mpe-cats__name {
	text-transform: uppercase;
}

.mpe-cats__count {
	color: var(--mpe-muted);
	font-size: 12px;
}

.mpe-cats-name--overlay .mpe-cats__link {
	position: relative;
}

.mpe-cats-name--overlay .mpe-cats__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 10px 8px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
}

.mpe-cats-name--overlay .mpe-cats__name,
.mpe-cats-name--overlay .mpe-cats__count {
	color: inherit;
}

.mpe-cats-shape--circle.mpe-cats-name--overlay .mpe-cats__body {
	border-radius: 0 0 999px 999px;
}

/* Hover effects */

.mpe-cats-hover--zoom .mpe-cats__item:hover .mpe-cats__img {
	transform: scale(1.08);
}

.mpe-cats-hover--fade .mpe-cats__item:hover .mpe-cats__img {
	opacity: 0.72;
}

.mpe-cats-hover--lift .mpe-cats__item {
	transition: transform 0.25s ease;
}

.mpe-cats-hover--lift .mpe-cats__item:hover {
	transform: translateY(-6px);
}

.mpe-cats__link:focus-visible {
	outline: 2px solid var(--mpe-primary);
	outline-offset: 4px;
}

/* Grid mode */

.mpe-cats-display--grid .mpe-cats__track {
	grid-auto-flow: row;
	grid-auto-columns: auto;
	grid-template-columns: repeat(var(--mpe-cols), minmax(0, 1fr));
	row-gap: calc(var(--mpe-gap) * 1.2);
}

/* Carousel mode */

.mpe-cats-display--carousel .mpe-cats__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mpe-cats-display--carousel .mpe-cats__viewport::-webkit-scrollbar {
	display: none;
}

.mpe-cats-display--carousel .mpe-cats__item {
	scroll-snap-align: start;
}

/* Arrows — every box property pinned so theme button rules cannot stretch them. */

.mpe-cats .mpe-cats__nav {
	position: absolute;
	z-index: 3;
	top: calc(50% - 20px);
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--mpe-cat-nav);
	height: var(--mpe-cat-nav);
	min-width: var(--mpe-cat-nav);
	min-height: var(--mpe-cat-nav);
	max-width: var(--mpe-cat-nav);
	max-height: var(--mpe-cat-nav);
	margin: 0;
	padding: 0;
	line-height: 0;
	transform: translateY(-50%);
	border: 1px solid var(--mpe-border);
	border-radius: 50%;
	background: var(--mpe-surface);
	color: var(--mpe-text);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.mpe-cats .mpe-cats__nav svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.mpe-cats .mpe-cats__nav--prev {
	left: -18px;
	transform: translateY(-50%) rotate(90deg);
}

.mpe-cats .mpe-cats__nav--next {
	right: -18px;
	transform: translateY(-50%) rotate(-90deg);
}

.mpe-cats .mpe-cats__nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

.mpe-cats.is-static .mpe-cats__nav,
.mpe-cats.is-static .mpe-cats__dots {
	display: none;
}

/* Dots */

.mpe-cats__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}

.mpe-cats .mpe-cats__dot {
	box-sizing: border-box;
	width: 8px;
	height: 8px;
	min-width: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mpe-border);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.mpe-cats .mpe-cats__dot.is-active {
	background: var(--mpe-primary);
	transform: scale(1.3);
}

@media (max-width: 767px) {
	.mpe-cats .mpe-cats__nav--prev {
		left: 0;
	}

	.mpe-cats .mpe-cats__nav--next {
		right: 0;
	}
}